[sparkle] internal: use new sparkle packaging - take 2

front/components/actions/retrieval/utils.ts

@@ -1,4 +1,4 @@
-import type { CitationType } from "@dust-tt/sparkle/dist/cjs/components/Citation";
+import type { Citation } from "@dust-tt/sparkle";
 import type { RetrievalDocumentType } from "@dust-tt/types";
 import {
   getProviderFromRetrievedDocument,
@@ -22,7 +22,7 @@ export function makeLinkForRetrievedDocument(
 interface RetrievedDocumentCitation {
   href: string;
   title: string;
-  type: CitationType;
+  type: Exclude<React.ComponentProps<typeof Citation>["type"], undefined>;
 }
 
 export function makeDocumentCitations(

front/components/actions/websearch/utils.ts

@@ -1,4 +1,4 @@
-import type { CitationType } from "@dust-tt/sparkle/dist/cjs/components/Citation";
+import type { CitationType } from "@dust-tt/sparkle/dist/esm/components/Citation";
 import type { WebsearchActionType } from "@dust-tt/types";
 
 interface WebsearchResultCitation {

front/components/assistant/conversation/ContentFragment.tsx

@@ -1,5 +1,4 @@
 import { Citation, ZoomableImageCitationWrapper } from "@dust-tt/sparkle";
-import type { CitationType } from "@dust-tt/sparkle/dist/cjs/components/Citation";
 import type { ContentFragmentType } from "@dust-tt/types";
 import { isSupportedImageContentType } from "@dust-tt/types";
 
@@ -15,9 +14,7 @@ export function ContentFragment({ message }: { message: ContentFragmentType }) {
     );
   }
 
-  const citationType: CitationType = ["dust-application/slack"].includes(
-    message.contentType
-  )
+  const citationType = ["dust-application/slack"].includes(message.contentType)
     ? "slack"
     : "document";
 

front/components/assistant/conversation/messages/MessageActions.tsx

@@ -10,7 +10,7 @@ import type {
   WorkspaceType,
 } from "@dust-tt/types";
 // TODO(2024-04-24 flav) Remove emoji-mart dependency from front.
-import type { Emoji, EmojiMartData } from "@emoji-mart/data";
+import type { EmojiMartData } from "@emoji-mart/data";
 import type { ComponentType, MouseEventHandler } from "react";
 import { useEffect, useRef, useState } from "react";
 import { useSWRConfig } from "swr";
@@ -247,7 +247,7 @@ function EmojiSelector({
           theme="light"
           previewPosition="none"
           data={emojiData ?? undefined}
-          onEmojiSelect={(emojiData: Emoji) => {
+          onEmojiSelect={(emojiData) => {
             const reaction = reactions.find((r) => r.emoji === emojiData.id);
             const hasReacted =
               (reaction &&

front/components/assistant_builder/InstructionScreen.tsx

@@ -5,7 +5,6 @@ import {
   Page,
   Spinner,
 } from "@dust-tt/sparkle";
-import type { ContentMessageProps } from "@dust-tt/sparkle/dist/cjs/components/ContentMessage";
 import type {
   APIError,
   AssistantCreativityLevel,
@@ -661,7 +660,7 @@ function AnimatedSuggestion({
   afterEnter,
 }: {
   suggestion: string;
-  variant?: ContentMessageProps["variant"];
+  variant?: React.ComponentProps<typeof ContentMessage>["variant"];
   afterEnter?: () => void;
 }) {
   return (

front/components/home/LandingLayout.tsx

@@ -3,9 +3,9 @@ import {
   Div3D,
   Hover3D,
   LoginIcon,
+  LogoHorizontalColorLayer1Logo,
+  LogoHorizontalColorLayer2Logo,
   LogoHorizontalColorLogo,
-  LogoHorizontalColorLogoLayer1,
-  LogoHorizontalColorLogoLayer2,
 } from "@dust-tt/sparkle";
 import { Transition } from "@headlessui/react";
 import Head from "next/head";
@@ -99,10 +99,10 @@ export default function LandingLayout({
             <Link href="/">
               <Hover3D className="relative h-[24px] w-[96px]">
                 <Div3D depth={0} className="h-[24px] w-[96px]">
-                  <LogoHorizontalColorLogoLayer1 className="h-[24px] w-[96px]" />
+                  <LogoHorizontalColorLayer1Logo className="h-[24px] w-[96px]" />
                 </Div3D>
                 <Div3D depth={25} className="absolute top-0">
-                  <LogoHorizontalColorLogoLayer2 className="h-[24px] w-[96px]" />
+                  <LogoHorizontalColorLayer2Logo className="h-[24px] w-[96px]" />
                 </Div3D>
               </Hover3D>
             </Link>

front/next.config.js

@@ -65,6 +65,13 @@ module.exports = {
       tls: false,
       dgram: false,
     };
+    // Use source-map-loader for transitively include source maps of dependencies.
+    config.module.rules.push({
+      test: /\.js$/,
+      use: ["source-map-loader"],
+      enforce: "pre",
+      include: [path.resolve(__dirname, "node_modules/@dust-tt/sparkle")],
+    });
     return config;
   },
 };