[sparkle] Use Citation component directly in messages (#8201)

* Use Citation component directly in messages * Add zoomable citation
dust-tt · Oct 24, 2024 · 48d5f66 · 48d5f66
1 parent e4c6774
commit 48d5f66
Show file tree

Hide file tree

Showing 7 changed files with 54 additions and 72 deletions.
diff --git a/sparkle/package-lock.json b/sparkle/package-lock.json
diff --git a/sparkle/package.json b/sparkle/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.2.273",
+  "version": "0.2.274",
   "scripts": {
     "build": "rm -rf dist && npm run tailwind && npm run build:esm && npm run build:cjs",
     "tailwind": "tailwindcss -i ./src/styles/tailwind.css -o dist/sparkle.css",

diff --git a/sparkle/src/components/ConversationCitationComponent.tsx b/sparkle/src/components/ConversationCitationComponent.tsx
diff --git a/sparkle/src/components/ConversationMessage.tsx b/sparkle/src/components/ConversationMessage.tsx
@@ -1,6 +1,5 @@
 import React, { ComponentType, MouseEventHandler } from "react";
 
-import { ConversationCitationType } from "@sparkle/components/ConversationCitationComponent";
 import {
   ConversationMessageActions,
   ConversationMessageEmojiSelectorProps,
@@ -32,7 +31,7 @@ type ConversationMessageProps = {
     onClick: MouseEventHandler<HTMLButtonElement>;
   }[];
   children?: React.ReactNode;
-  citations?: ConversationCitationType[];
+  citations?: React.ReactElement[];
   messageEmoji?: ConversationMessageEmojiSelectorProps;
   name: string | null;
   pictureUrl?: string | React.ReactNode | null;

diff --git a/sparkle/src/components/ConversationMessageContent.tsx b/sparkle/src/components/ConversationMessageContent.tsx
@@ -1,15 +1,11 @@
 import React from "react";
 
-import {
-  ConversationCitationComponent,
-  ConversationCitationType,
-} from "@sparkle/components/ConversationCitationComponent";
 import { ConversationMessageSizeType } from "@sparkle/components/ConversationMessage";
 import { cn } from "@sparkle/lib/utils";
 
 interface ConversationMessageContentProps {
   children: React.ReactNode;
-  citations?: ConversationCitationType[];
+  citations?: React.ReactElement[];
   size: ConversationMessageSizeType;
 }
 
@@ -40,9 +36,7 @@ export function ConversationMessageContent({
             size === "compact" ? "s-grid-cols-2" : "s-grid-cols-4"
           )}
         >
-          {citations.map((c) => {
-            return <ConversationCitationComponent citation={c} key={c.id} />;
-          })}
+          {citations}
         </div>
       )}
     </div>

diff --git a/sparkle/src/components/index.ts b/sparkle/src/components/index.ts
@@ -19,8 +19,6 @@ export { ColorPicker } from "./ColorPicker";
 export { default as ConfettiBackground } from "./ConfettiBackground";
 export { ContentMessage } from "./ContentMessage";
 export { ContextItem } from "./ContextItem";
-export type { ConversationCitationType } from "./ConversationCitationComponent";
-export { ConversationCitationComponent as ConverationCitationComponent } from "./ConversationCitationComponent";
 export type { ConversationMessageSizeType } from "./ConversationMessage";
 export { ConversationMessage } from "./ConversationMessage";
 export type { ConversationMessageEmojiSelectorProps } from "./ConversationMessageActions";

diff --git a/sparkle/src/stories/ConversationMessage.stories.tsx b/sparkle/src/stories/ConversationMessage.stories.tsx
@@ -2,8 +2,10 @@ import type { Meta } from "@storybook/react";
 import React from "react";
 
 import {
+  Citation,
   ConversationMessage,
   MagnifyingGlassIcon,
+  ZoomableImageCitationWrapper,
 } from "../index_with_tw_base";
 
 const meta = {
@@ -40,13 +42,29 @@ export const ConversationExample = () => {
               },
             ]}
             citations={[
-              {
-                citationType: "slack",
-                id: "1",
-                isZoomable: false,
-                sourceUrl: "https://www.google.com",
-                title: "Source: Thread on #general message from @ed",
-              },
+              <Citation
+                title="Source: Thread on #general message from @ed"
+                size="xs"
+                sizing="fluid"
+                type="slack"
+                index="1"
+                href="https://www.google.com"
+              />,
+              <Citation
+                title="Title"
+                type="github"
+                size="xs"
+                sizing="fluid"
+                index="2"
+                href="https://www.google.com"
+              />,
+
+              <ZoomableImageCitationWrapper
+                size="xs"
+                title="Title"
+                imgSrc="https://dust.tt/static/droidavatar/Droid_Lime_1.jpg"
+                alt={"Image"}
+              />,
             ]}
           >
             To conditionally render the citations only if a citations React node
@@ -92,13 +110,29 @@ export const ConversationExample = () => {
               },
             ]}
             citations={[
-              {
-                citationType: "slack",
-                id: "1",
-                isZoomable: false,
-                sourceUrl: "https://www.google.com",
-                title: "Source: Thread on #general message from @ed",
-              },
+              <Citation
+                title="Source: Thread on #general message from @ed"
+                size="xs"
+                sizing="fluid"
+                type="slack"
+                index="1"
+                href="https://www.google.com"
+              />,
+              <Citation
+                title="Title"
+                type="github"
+                size="xs"
+                sizing="fluid"
+                index="2"
+                href="https://www.google.com"
+              />,
+
+              <ZoomableImageCitationWrapper
+                size="xs"
+                title="Title"
+                imgSrc="https://dust.tt/static/droidavatar/Droid_Lime_1.jpg"
+                alt={"Image"}
+              />,
             ]}
           >
             To conditionally render the citations only if a citations React node