diff --git a/sparkle/package-lock.json b/sparkle/package-lock.json
index 44ad2be4d335..6eab853a604d 100644
--- a/sparkle/package-lock.json
+++ b/sparkle/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.2.273",
+  "version": "0.2.274",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@dust-tt/sparkle",
-      "version": "0.2.273",
+      "version": "0.2.274",
       "license": "ISC",
       "dependencies": {
         "@emoji-mart/data": "^1.1.2",
diff --git a/sparkle/package.json b/sparkle/package.json
index 753ba6c792ca..51a07b691af9 100644
--- 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
deleted file mode 100644
index fa9afedca665..000000000000
--- a/sparkle/src/components/ConversationCitationComponent.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import React from "react";
-
-import { Citation } from "@sparkle/components/Citation";
-import { CitationType } from "@sparkle/components/Citation";
-import { ZoomableImageCitationWrapper } from "@sparkle/components/ZoomableImageCitationWrapper";
-
-export type ConversationCitationType = {
-  avatarSrc?: string;
-  citationType: CitationType;
-  id: string;
-  isZoomable: boolean;
-  sourceUrl?: string;
-  title: string;
-};
-
-type ConversationCitationComponentProps = {
-  citation: ConversationCitationType;
-};
-
-export function ConversationCitationComponent({
-  citation,
-}: ConversationCitationComponentProps) {
-  if (citation.isZoomable && citation.sourceUrl) {
-    return (
-      <ZoomableImageCitationWrapper
-        size="xs"
-        title={citation.title}
-        imgSrc={citation.sourceUrl}
-        alt={citation.title}
-      />
-    );
-  }
-
-  return (
-    <Citation
-      title={citation.title}
-      size="xs"
-      type={citation.citationType}
-      href={citation.sourceUrl}
-      avatarSrc={citation.avatarSrc}
-    />
-  );
-}
diff --git a/sparkle/src/components/ConversationMessage.tsx b/sparkle/src/components/ConversationMessage.tsx
index 47760439f558..f9b1350c9faa 100644
--- 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
index e9c2e8bdc92b..5e2519afde53 100644
--- 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
index a0b9a49be13c..e17c60ab323c 100644
--- 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
index 9efbfaad46bc..e522c0108d13 100644
--- 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