@dust-tt/sparkle 0.2.641-rc-1 → 0.2.641-rc-2

package/dist/esm/stories/Citation.stories.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { Button, Citation, CitationClose, CitationDescription, CitationGrid, CitationIcons, CitationIndex, CitationTitle, DocumentIcon, ExternalLinkIcon, FaviconIcon, GlobeAltIcon, Icon, ImageIcon, Tooltip, NotionLogo, Popover, SlackLogo, TableIcon, } from "../index_with_tw_base";
+import { Button, Citation, CitationClose, CitationDescription, CitationGrid, CitationIcons, CitationImage, CitationIndex, CitationTitle, DocumentIcon, ExternalLinkIcon, FaviconIcon, GlobeAltIcon, Icon, ImageIcon, NotionLogo, Popover, SlackLogo, TableIcon, } from "../index_with_tw_base";
 var meta = {
     title: "Components/Citation",
     component: Citation,
@@ -8,30 +8,31 @@ export default meta;
 export var CitationsExample = function () { return (React.createElement("div", { className: "s-flex s-flex-col s-gap-8" },
     "Example of attachement",
     React.createElement(CitationGrid, null,
-        React.createElement(Citation, { onClick: function () { return alert("Card clicked"); }, tooltip: "@ed at 16:32 This is the latest ve" },
+        React.createElement(Citation, { onClick: function () { return alert("Card clicked"); }, className: "s-w-48", tooltip: "@ed at 16:32 This is the latest ve" },
             React.createElement(CitationIcons, null,
                 React.createElement(Icon, { visual: SlackLogo, size: "sm" })),
             React.createElement(CitationTitle, null, "Citation w/ tooltip"),
             React.createElement(CitationDescription, null, "@ed at 16:32 This is the latest ve"))),
     React.createElement(CitationGrid, null,
-        React.createElement(Citation, { onClick: function () { return alert("Card clicked"); }, tooltip: "@ed at 16:32 This is the latest ve" },
+        React.createElement(Citation, { onClick: function () { return alert("Card clicked"); }, className: "s-w-48", tooltip: "@ed at 16:32 This is the latest ve" },
             React.createElement(CitationIcons, null,
                 React.createElement(Icon, { visual: SlackLogo, size: "sm" })),
             React.createElement(CitationTitle, null, "Slack thread"),
             React.createElement(CitationDescription, null, "@ed at 16:32 This is the latest ve")),
-        React.createElement(Citation, { onClick: function () { return alert("Card clicked"); } },
+        React.createElement(Citation, { onClick: function () { return alert("Card clicked"); }, className: "s-w-48" },
             React.createElement(CitationIcons, null,
                 React.createElement(Icon, { visual: TableIcon, size: "sm" })),
             React.createElement(CitationTitle, null, "extract_financa.csv")),
-        React.createElement(Citation, { onClick: function () { return alert("Card clicked"); } },
+        React.createElement(Citation, { onClick: function () { return alert("Card clicked"); }, className: "s-w-48" },
             React.createElement(CitationIcons, null,
                 React.createElement(FaviconIcon, { websiteUrl: "https://www.linkedin.com", size: "sm" })),
             React.createElement(CitationTitle, null, "Linkedin, Edouard Wautier")),
-        React.createElement(Citation, { onClick: function () { return alert("Card clicked"); } },
+        React.createElement(Citation, { onClick: function () { return alert("Card clicked"); }, className: "s-w-48" },
             React.createElement(CitationIcons, null,
                 React.createElement(FaviconIcon, { websiteUrl: "https://github.com", size: "sm" })),
             React.createElement(CitationTitle, null, "GitHub Repository")),
-        React.createElement(Citation, { onClick: function () { return alert("Card clicked"); }, tooltip: React.createElement("img", { src: "https://dust.tt/static/droidavatar/Droid_Lime_3.jpg", alt: "screenshot.png" }) },
+        React.createElement(Citation, { onClick: function () { return alert("Card clicked"); }, className: "s-w-48" },
+            React.createElement(CitationImage, { imgSrc: "https://dust.tt/static/droidavatar/Droid_Lime_3.jpg" }),
             React.createElement(CitationIcons, null,
                 React.createElement(Icon, { visual: ImageIcon, size: "sm" })),
             React.createElement(CitationTitle, null, "screenshot.png")),
@@ -54,45 +55,45 @@ export var CitationsExample = function () { return (React.createElement("div", {
             React.createElement(CitationIcons, null,
                 React.createElement(Icon, { visual: GlobeAltIcon, size: "sm" })),
             React.createElement(CitationTitle, null, "Linkedin, Edouard Wautier")),
-        React.createElement(Tooltip, { trigger: React.createElement(Citation, { onClick: function () { return alert("Card clicked"); }, className: "s-w-48", action: React.createElement(CitationClose, { onClick: function () { return alert("Close clicked"); } }) },
-                React.createElement(CitationIcons, null,
-                    React.createElement(Icon, { visual: ImageIcon, size: "sm" })),
-                React.createElement(CitationTitle, null, "screenshot.png")), label: React.createElement("div", { className: "s-flex s-w-80 s-max-w-[80vw] s-flex-col s-gap-2" },
-                React.createElement("img", { src: "https://dust.tt/static/droidavatar/Droid_Lime_3.jpg", alt: "screenshot.png", className: "s-mx-auto s-max-h-40 s-w-full s-rounded-md s-object-contain" })) })),
+        React.createElement(Citation, { onClick: function () { return alert("Card clicked"); }, className: "s-w-48", action: React.createElement(CitationClose, { onClick: function () { return alert("Close clicked"); } }) },
+            React.createElement(CitationImage, { imgSrc: "https://dust.tt/static/droidavatar/Droid_Lime_3.jpg" }),
+            React.createElement(CitationIcons, null,
+                React.createElement(Icon, { visual: ImageIcon, size: "sm" })),
+            React.createElement(CitationTitle, null, "screenshot.png"))),
     "Example of citations in markdown",
     React.createElement("div", null,
         React.createElement(Popover, { trigger: React.createElement(CitationIndex, null, "1"), content: React.createElement(React.Fragment, null,
                 React.createElement(CitationIcons, null,
-                    React.createElement(Icon, { visual: SlackLogo, size: "sm" }),
-                    React.createElement(CitationIndex, null, "1")),
+                    React.createElement(CitationIndex, null, "1"),
+                    React.createElement(Icon, { visual: SlackLogo, size: "sm" })),
                 React.createElement(CitationTitle, null, "Hello"),
                 React.createElement(Button, { variant: "ghost", icon: ExternalLinkIcon, className: "s-absolute s-right-2 s-top-2" })) })),
     "Example of dynamic grid",
     React.createElement(CitationGrid, null,
         React.createElement(Citation, { onClick: function () { return alert("Card clicked"); } },
             React.createElement(CitationIcons, null,
-                React.createElement(Icon, { visual: SlackLogo, size: "sm" }),
-                React.createElement(CitationIndex, null, "1")),
+                React.createElement(CitationIndex, null, "1"),
+                React.createElement(Icon, { visual: SlackLogo, size: "sm" })),
             React.createElement(CitationTitle, null, "Hello")),
         React.createElement(Citation, { onClick: function () { return alert("Close action clicked"); } },
             React.createElement(CitationIcons, null,
-                React.createElement(Icon, { visual: NotionLogo, size: "sm" }),
-                React.createElement(CitationIndex, null, "2")),
+                React.createElement(CitationIndex, null, "2"),
+                React.createElement(Icon, { visual: NotionLogo, size: "sm" })),
             React.createElement(CitationTitle, null, "Hello")),
         React.createElement(Citation, { onClick: function () { return alert("Close action clicked"); } },
             React.createElement(CitationIcons, null,
-                React.createElement(Icon, { visual: DocumentIcon, size: "sm" }),
-                React.createElement(CitationIndex, null, "3")),
+                React.createElement(CitationIndex, null, "3"),
+                React.createElement(Icon, { visual: DocumentIcon, size: "sm" })),
             React.createElement(CitationTitle, null, "Hello")),
         React.createElement(Citation, { onClick: function () { return alert("Close action clicked"); } },
             React.createElement(CitationIcons, null,
-                React.createElement(FaviconIcon, { websiteUrl: "https://stackoverflow.com", size: "sm" }),
-                React.createElement(CitationIndex, null, "4")),
+                React.createElement(CitationIndex, null, "4"),
+                React.createElement(FaviconIcon, { websiteUrl: "https://stackoverflow.com", size: "sm" })),
             React.createElement(CitationTitle, null, "Stack Overflow Answer")),
         React.createElement(Citation, { onClick: function () { return alert("Close action clicked"); } },
             React.createElement(CitationIcons, null,
-                React.createElement(FaviconIcon, { websiteUrl: "https://www.wikipedia.org", size: "sm" }),
-                React.createElement(CitationIndex, null, "5")),
+                React.createElement(CitationIndex, null, "5"),
+                React.createElement(FaviconIcon, { websiteUrl: "https://www.wikipedia.org", size: "sm" })),
             React.createElement(CitationTitle, null, "Wikipedia Article"))),
     "Example of interactive content (list variant)",
     React.createElement(CitationGrid, { variant: "list" },

package/dist/esm/stories/Citation.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Citation.stories.js","sourceRoot":"","sources":["../../../src/stories/Citation.stories.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Citation.stories.js","sourceRoot":"","sources":["../../../src/stories/Citation.stories.tsx"],"names":[],"mappings":"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"}

package/dist/esm/stories/ConversationMessage.stories.d.ts

@@ -4,4 +4,5 @@ declare const meta: {
 };
 export default meta;
 export declare const ConversationExample: () => React.JSX.Element;
+export declare const ConversationHandoffExample: () => React.JSX.Element;
 //# sourceMappingURL=ConversationMessage.stories.d.ts.map

package/dist/esm/stories/ConversationMessage.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConversationMessage.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/ConversationMessage.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAoB1B,QAAA,MAAM,IAAI;;CAEkC,CAAC;AAE7C,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,mBAAmB,yBA2F/B,CAAC"}
+{"version":3,"file":"ConversationMessage.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/ConversationMessage.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAuB1B,QAAA,MAAM,IAAI;;CAEkC,CAAC;AAE7C,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,mBAAmB,yBA2F/B,CAAC;AAiEF,eAAO,MAAM,0BAA0B,yBAwEtC,CAAC"}

package/dist/esm/stories/ConversationMessage.stories.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { Avatar, Button, Citation, CitationIcons, CitationTitle, ClockIcon, ConversationContainer, ConversationMessage, GithubIcon, HandThumbDownIcon, HandThumbUpIcon, Icon, Markdown, SlackLogo, TableIcon, } from "../index_with_tw_base";
+import { ArrowPathIcon, AtomIcon, Avatar, Button, Citation, CitationIcons, CitationTitle, ClipboardIcon, ClockIcon, ConversationContainer, ConversationMessage, GithubIcon, HandThumbDownIcon, HandThumbUpIcon, Icon, Markdown, SlackLogo, TableIcon, } from "../index_with_tw_base";
 var meta = {
     title: "Modules/ConversationMessage",
 };
@@ -32,4 +32,29 @@ export var ConversationExample = function () {
                 React.createElement(ConversationMessage, { type: "user", name: "Edouard", pictureUrl: "https://dust.tt/static/droidavatar/Droid_Lime_1.jpg", isDisabled: true, renderName: function (name) { return (React.createElement("span", { className: "s-text-gray-600 s-text-opacity-25" }, name)); } }, "This is a message with a disabled agent")))));
 };
 var example = "\n# Level 1 Title\n## Level 2 Title\n### Level 3 Title\n#### Level 4 Title\n##### Level 5 Title\n###### Level 6 Title\n\nThis is a paragraph with **bold** text and *italic* text. This is `code` block:\n```\nBlock \n```\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n\n# Another Level 1 Title\n\nDemo of a list, showcasing our pets of the month:\n- Soupinou\n- Chawarma\n- Chalom\n- Anakine\n- Goose\n\nOrdered list: \n1. Soupinou\n2. Chawarma\n3. Chalom\n\n---\n\n### Demo of a quote below:\n\n> You take the blue pill - the story ends, you wake up in your bed and believe whatever you want to believe. You take the red pill - you stay in Wonderland and I show you how deep the rabbit hole goes.\n\n> You take the blue pill - the story ends, you wake up in your bed and believe whatever you want to believe. You take the red pill - you stay in Wonderland and I show you how deep the rabbit hole goes.\n\nAnother one, a short one:\n> Soupinou fait des miaou miaou.\n\n### Other stuff\n\n~~stuff~~\nlink www.x.com\nfootnote [^1]\n\n* [ ] to do\n* [x] done\n\n### Short Table\n\n| Date        | High Temperature (\u00B0C) | Low Temperature (\u00B0C) |\n|-------------|-----------------------|----------------------|\n| October 25  | 19                    | 14                   |\n| October 26  | 17                    | 12                   |\n| October 27  | 16                    | 10                   |\n| October 28  | 16                    | 9                    |\n| October 29  | 17                    | 8                    |\n| October 30  | 19                    | 8                    |\n| October 31  | 19                    | 10                   |\n\n";
+export var ConversationHandoffExample = function () {
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: "s-flex s-w-full s-justify-center s-gap-6" },
+            React.createElement(ConversationContainer, null,
+                React.createElement(ConversationMessage, { type: "user", name: "Daph", pictureUrl: "https://avatars.githubusercontent.com/u/3803406?v=4", timestamp: "17:09" }, "Can you provide an overview of the major frontier language models and their specificities. I'm curious about technical details, benchmarks, business etc.. I need a complete picture"),
+                React.createElement(ConversationMessage, { type: "agent", name: "@soupinou", pictureUrl: "https://avatars.githubusercontent.com/u/138893015?&v=4", buttons: [
+                        React.createElement(Button, { icon: ClipboardIcon, onClick: function () { }, size: "xs", variant: "outline" }),
+                        React.createElement(Button, { icon: ArrowPathIcon, onClick: function () { }, size: "xs", variant: "outline" }),
+                    ] },
+                    React.createElement(Markdown, { content: "Let me use Deep Dive to explore this comprehensively. I'll need some time to gather all the information." })),
+                React.createElement(ConversationMessage, { type: "agentAsTool", name: "Deep Dive", renderName: function (name) { return (React.createElement("span", { className: "s-inline-flex s-items-center s-text-faint dark:s-text-faint-night" },
+                        React.createElement(Icon, { visual: AtomIcon, size: "sm" }),
+                        React.createElement("span", { className: "s-ml-1" }, name))); }, citations: [
+                        React.createElement(Citation, { href: "https://www.google.com" },
+                            React.createElement(CitationIcons, null,
+                                React.createElement(Icon, { visual: SlackLogo, size: "sm" })),
+                            React.createElement(CitationTitle, null, "Source: Thread on #general message from @ed")),
+                        React.createElement(Citation, { href: "https://www.google.com" },
+                            React.createElement(CitationIcons, null,
+                                React.createElement(Icon, { visual: GithubIcon, size: "sm" })),
+                            React.createElement(CitationTitle, null, "PR from @henry")),
+                    ] },
+                    React.createElement(Markdown, { content: handoffAnswer }))))));
+};
+var handoffAnswer = "\n**A Complete Technical Overview of Soupinou: The Frontier Feline Model**\n\nSoupinou represents a breakthrough in black cat architecture, featuring a revolutionary single-whisker design that challenges conventional multi-whisker paradigms. This asymmetric sensor configuration demonstrates remarkable efficiency gains in cuddle detection and lap-finding algorithms.\n\n**Technical Specifications:**\n- Processing unit: One (1) whisker sensor array\n- Color depth: Maximum black saturation\n- Purr frequency: Variable, optimized for human dopamine release\n- Cuddle latency: Near-zero response time\n\n**Benchmark Performance:**\n- Achieves 99.7% accuracy in identifying the exact moment you sit down\n- Outperforms all competitors in the \"appearing from nowhere when you're sad\" metric\n- Sets new industry standards for selective hearing (responds to treat bags but not \"get off the counter\")\n\n**Business Model:**\nOperates on a simple value exchange - provides unlimited affection in return for food, shelter, and accepting that everything you own now has black fur on it. Market penetration strategy involves strategic placement on keyboards during important work calls.\n\n**Limitations:**\nOccasional system crashes when presented with empty food bowl. Single whisker may cause slight navigation errors when squeezing through spaces designed for two-whiskered models.\n";
 //# sourceMappingURL=ConversationMessage.stories.js.map

package/dist/esm/stories/ConversationMessage.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"ConversationMessage.stories.js","sourceRoot":"","sources":["../../../src/stories/ConversationMessage.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EACL,MAAM,EACN,MAAM,EACN,QAAQ,EACR,aAAa,EACb,aAAa,EACb,SAAS,EACT,qBAAqB,EACrB,mBAAmB,EACnB,UAAU,EACV,iBAAiB,EACjB,eAAe,EACf,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,SAAS,GACV,MAAM,uBAAuB,CAAC;AAE/B,IAAM,IAAI,GAAG;IACX,KAAK,EAAE,6BAA6B;CACM,CAAC;AAE7C,eAAe,IAAI,CAAC;AAEpB,MAAM,CAAC,IAAM,mBAAmB,GAAG;IACjC,OAAO,CACL;QACE,6BAAK,SAAS,EAAC,0CAA0C;YACvD,oBAAC,qBAAqB;gBACpB,oBAAC,mBAAmB,IAClB,IAAI,EAAC,MAAM,EACX,IAAI,EAAC,SAAS,EACd,UAAU,EAAC,qDAAqD,EAChE,SAAS,EAAC,OAAO,EACjB,SAAS,EAAE;wBACT,oBAAC,QAAQ,IAAC,IAAI,EAAC,wBAAwB;4BACrC,oBAAC,aAAa;gCACZ,oBAAC,IAAI,IAAC,MAAM,EAAE,SAAS,EAAE,IAAI,EAAC,IAAI,GAAG,CACvB;4BAChB,oBAAC,aAAa,gBAAsB,CAC3B;qBACZ,EACD,QAAQ,EACN,oBAAC,MAAM,IAAC,IAAI,EAAC,IAAI,EAAC,MAAM,EAAE,oBAAC,SAAS,IAAC,SAAS,EAAC,SAAS,GAAG,GAAI,6EAK7C;gBAEtB,oBAAC,mBAAmB,IAClB,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,QAAQ,EACb,UAAU,EAAC,qDAAqD,EAChE,OAAO,EAAE;wBACP,oBAAC,MAAM,IACL,IAAI,EAAE,eAAe,EACrB,OAAO,EAAE,cAAO,CAAC,EACjB,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,SAAS,GAClB;wBACF,oBAAC,MAAM,IACL,IAAI,EAAE,iBAAiB,EACvB,OAAO,EAAE,cAAO,CAAC,EACjB,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,SAAS,GAClB;qBACH,EACD,SAAS,EAAE;wBACT,oBAAC,QAAQ,IAAC,IAAI,EAAC,wBAAwB;4BACrC,oBAAC,aAAa;gCACZ,oBAAC,IAAI,IAAC,MAAM,EAAE,SAAS,EAAE,IAAI,EAAC,IAAI,GAAG,CACvB;4BAChB,oBAAC,aAAa,sDAEE,CACP;wBACX,oBAAC,QAAQ,IAAC,IAAI,EAAC,wBAAwB;4BACrC,oBAAC,aAAa;gCACZ,oBAAC,IAAI,IAAC,MAAM,EAAE,UAAU,EAAE,IAAI,EAAC,IAAI,GAAG,CACxB;4BAChB,oBAAC,aAAa,gBAAsB,CAC3B;qBACZ;oBAED,oBAAC,QAAQ,IAAC,OAAO,EAAE,OAAO,GAAI,CACV;gBAEtB,oBAAC,mBAAmB,IAClB,IAAI,EAAC,MAAM,EACX,IAAI,EAAC,SAAS,EACd,UAAU,EAAC,qDAAqD,gSAO5C;gBAEtB,oBAAC,mBAAmB,IAClB,IAAI,EAAC,MAAM,EACX,IAAI,EAAC,SAAS,EACd,UAAU,EAAC,qDAAqD,EAChE,UAAU,EAAE,IAAI,EAChB,UAAU,EAAE,UAAC,IAAI,IAAK,OAAA,CACpB,8BAAM,SAAS,EAAC,mCAAmC,IAAE,IAAI,CAAQ,CAClE,EAFqB,CAErB,8CAGmB,CACA,CACpB,CACL,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,IAAM,OAAO,GAAG,qhEA6Df,CAAC"}
+{"version":3,"file":"ConversationMessage.stories.js","sourceRoot":"","sources":["../../../src/stories/ConversationMessage.stories.tsx"],"names":[],"mappings":"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"}

package/dist/esm/stories/InteractiveImageGrid.stories.d.ts

@@ -4,7 +4,7 @@ declare const meta: {
     component: React.ForwardRefExoticComponent<(import("../index_with_tw_base").CardProps & {
         children: React.ReactNode;
         isLoading?: boolean | undefined;
-        tooltip?: React.ReactNode;
+        tooltip?: string | undefined;
     }) & React.RefAttributes<HTMLDivElement>>;
 };
 export default meta;

package/dist/esm/styles/global.css

@@ -51,15 +51,3 @@
     --tw-checker-color: theme("colors.slate.950"); /* Dark mode pattern color */
   }
 }
-
-.s-blinking-cursor > :not(pre):last-child::after {
-  content: "";
-  width: 8px;
-  height: 16px;
-  @apply s-bg-success-400;
-  display: inline-block;
-  @apply s-animate-cursor-blink;
-  margin-left: 5px;
-  position: relative;
-  top: 4px;
-}

package/dist/esm/styles/global_with_tw_base.css

@@ -2,27 +2,6 @@
 @tailwind components;
 @tailwind utilities;
 
-.s-blinking-cursor > :not(pre):last-child::after {
-  content: "";
-  width: 8px;
-  height: 16px;
-  @apply s-bg-success-400;
-  display: inline-block;
-  @apply s-animate-cursor-blink;
-  margin-left: 5px;
-  position: relative;
-  top: 4px;
-}
-
-@keyframes collapse-down {
-  from {
-    height: 0;
-  }
-  to {
-    height: var(--radix-collapsible-content-height);
-  }
-}
-
 @keyframes collapse-up {
   from {
     height: var(--radix-collapsible-content-height);

package/dist/esm/styles/tailwind.css

@@ -2,17 +2,6 @@
 @tailwind components;
 @tailwind utilities;
 
-.s-blinking-cursor > :not(pre):last-child::after {
-  content: "";
-  width: 8px;
-  height: 16px;
-  @apply s-bg-success-400;
-  display: inline-block;
-  @apply s-animate-cursor-blink;
-  margin-left: 5px;
-  position: relative;
-  top: 4px;
-}
 
 @keyframes bgblink {
   0%,

package/dist/sparkle.css

@@ -1518,10 +1518,6 @@ select {
   height: 1px;
 }
 
-.s-max-h-40 {
-  max-height: 10rem;
-}
-
 .s-max-h-72 {
   max-height: 18rem;
 }
@@ -1860,10 +1856,6 @@ select {
   max-width: 80vh;
 }
 
-.s-max-w-\[80vw\] {
-  max-width: 80vw;
-}
-
 .s-max-w-\[900px\] {
   max-width: 900px;
 }
@@ -4312,6 +4304,11 @@ select {
   padding-bottom: 1rem;
 }
 
+.s-py-5 {
+  padding-top: 1.25rem;
+  padding-bottom: 1.25rem;
+}
+
 .s-py-8 {
   padding-top: 2rem;
   padding-bottom: 2rem;
@@ -4425,6 +4422,10 @@ select {
   padding-top: 1.75rem;
 }
 
+.s-pt-\[min\(8\%\,theme\(spacing\.3\)\)\] {
+  padding-top: min(8%,0.75rem);
+}
+
 .s-text-left {
   text-align: left;
 }
@@ -4923,6 +4924,11 @@ select {
   color: rgb(42 50 65 / var(--tw-text-opacity));
 }
 
+.s-text-primary-200 {
+  --tw-text-opacity: 1;
+  color: rgb(211 213 217 / var(--tw-text-opacity));
+}
+
 .s-text-primary-400 {
   --tw-text-opacity: 1;
   color: rgb(150 156 165 / var(--tw-text-opacity));
@@ -5403,40 +5409,6 @@ select {
           mask-image: radial-gradient(white,black);
 }
 
-.s-blinking-cursor > :not(pre):last-child::after {
-  content: "";
-  width: 8px;
-  height: 16px;
-  --tw-bg-opacity: 1;
-  background-color: rgb(145 193 116 / var(--tw-bg-opacity));
-  display: inline-block;
-}
-
-@keyframes s-cursor-blink {
-  0% {
-    opacity: 1;
-  }
-
-  60% {
-    opacity: 1;
-  }
-
-  70% {
-    opacity: 0;
-  }
-
-  100% {
-    opacity: 0;
-  }
-}
-
-.s-blinking-cursor > :not(pre):last-child::after {
-  animation: s-cursor-blink 0.9s infinite;;
-  margin-left: 5px;
-  position: relative;
-  top: 4px;
-}
-
 @keyframes bgblink {
   0%,
   100% {
@@ -7982,6 +7954,11 @@ select {
   color: rgb(236 253 245 / var(--tw-text-opacity));
 }
 
+:is(.s-dark .dark\:s-text-faint-night) {
+  --tw-text-opacity: 1;
+  color: rgb(84 93 108 / var(--tw-text-opacity));
+}
+
 :is(.s-dark .dark\:s-text-foreground-night) {
   --tw-text-opacity: 1;
   color: rgb(211 213 217 / var(--tw-text-opacity));
@@ -8192,6 +8169,11 @@ select {
   color: rgb(255 241 247 / var(--tw-text-opacity));
 }
 
+:is(.s-dark .dark\:s-text-primary-200-night) {
+  --tw-text-opacity: 1;
+  color: rgb(42 50 65 / var(--tw-text-opacity));
+}
+
 :is(.s-dark .dark\:s-text-primary-300) {
   --tw-text-opacity: 1;
   color: rgb(178 182 189 / var(--tw-text-opacity));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.2.641-rc-1",
+  "version": "0.2.641-rc-2",
   "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",
@@ -118,6 +118,7 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "emoji-mart": "^5.5.2",
+    "framer-motion": "^12.23.22",
     "lottie-react": "^2.4.0",
     "lottie-web": "^5.12.2",
     "mermaid": "^11.4.1",

package/src/components/AssistantCard.tsx

@@ -17,7 +17,7 @@ interface BaseAssistantCardProps {
   subtitle?: string;
   className?: string;
   onClick?: () => void;
-  onContextMenu?: () => void;
+  onContextMenu?: (event: React.MouseEvent) => void;
   variant?: CardVariantType;
 }
 

package/src/components/Citation.tsx

@@ -1,19 +1,34 @@
 import { cva } from "class-variance-authority";
 import React, { ReactNode } from "react";
 
-import { Button, CardProps, Spinner, Tooltip } from "@sparkle/components/";
-import { LinkWrapper, LinkWrapperProps } from "@sparkle/components/LinkWrapper";
+import {
+  Button,
+  Card,
+  CardProps,
+  Spinner,
+  Tooltip,
+} from "@sparkle/components/";
 import { XMarkIcon } from "@sparkle/icons/app";
 import { cn } from "@sparkle/lib/utils";
 
 type CitationProps = CardProps & {
   children: React.ReactNode;
   isLoading?: boolean;
-  tooltip?: React.ReactNode;
+  tooltip?: string;
 };
 
 const Citation = React.forwardRef<HTMLDivElement, CitationProps>(
-  ({ children, isLoading, className, tooltip, ...props }, ref) => {
+  (
+    {
+      children,
+      variant = "secondary",
+      isLoading,
+      className,
+      tooltip,
+      ...props
+    },
+    ref
+  ) => {
     const hasDescription = React.useMemo(() => {
       const childrenArray = React.Children.toArray(children);
       return childrenArray.some(
@@ -32,73 +47,30 @@ const Citation = React.forwardRef<HTMLDivElement, CitationProps>(
         {!hasDescription && <CitationDescription>&nbsp;</CitationDescription>}
       </>
     );
-    // Render as an inline chip (link when href provided, otherwise div)
-    // We intentionally do NOT render the description inline; it's expected in tooltip.
-
-    // Extract link-related props if present (from CardProps union)
-    const action = (props as unknown as { action?: React.ReactNode }).action;
-    const { href, target, rel, replace, shallow, onClick, ...rest } =
-      props as unknown as LinkWrapperProps &
-        React.ButtonHTMLAttributes<HTMLDivElement>;
-
-    // Filter out CitationDescription & CitationImage from inline content
-    const inlineChildren = React.Children.toArray(
-      contentWithDescription
-    ).filter(
-      (child) =>
-        !(
-          React.isValidElement(child) &&
-          (child.type === CitationDescription || child.type === CitationImage)
-        )
-    );
-
-    const chipContent = (
-      <div
+    const cardButton = (
+      <Card
         ref={ref}
+        variant={variant}
+        size="sm"
         className={cn(
-          // base chip styles
-          "s-box-border s-inline-flex s-items-center s-gap-1.5 s-rounded-xl s-px-2 s-py-1",
-          "s-border s-border-border s-bg-background s-text-foreground",
-          "dark:s-border-border-night dark:s-bg-background-night dark:s-text-foreground-night",
-          "s-max-w-64 s-w-full s-truncate s-text-sm s-font-semibold",
+          "s-min-w-24 s-relative s-flex s-flex-none s-flex-col s-overflow-hidden",
+          // Use min() to maintain aspect ratio in grid mode (8% of width) while capping
+          // padding at 3 (0.75rem) for list mode to prevent excessive top padding on wide items.
+          "s-pt-[min(8%,theme(spacing.3))]",
           className
         )}
-        // Keep button-like behavior if onClick
-        onClick={onClick as any}
-        role={onClick ? "button" : undefined}
-        tabIndex={onClick ? 0 : undefined}
-        {...(rest as any)}
-      >
-        {/* icons + title only */}
-        {inlineChildren}
-        {action && <div className="s-ml-1 s-flex s-items-center">{action}</div>}
-        {isLoading && (
-          <span className="s-ml-1 s-inline-flex">
-            <Spinner variant="dark" size="xs" />
-          </span>
-        )}
-      </div>
-    );
-
-    const chip = href ? (
-      <LinkWrapper
-        href={href}
-        target={target}
-        rel={rel}
-        replace={replace}
-        shallow={shallow}
+        {...props}
       >
-        {chipContent}
-      </LinkWrapper>
-    ) : (
-      chipContent
+        {contentWithDescription}
+        {isLoading && <CitationLoading />}
+      </Card>
     );
 
     if (tooltip) {
-      return <Tooltip trigger={chip} label={tooltip} />;
+      return <Tooltip trigger={cardButton} label={tooltip} />;
     }
 
-    return chip;
+    return cardButton;
   }
 );
 
@@ -114,6 +86,8 @@ const CitationIndex = React.forwardRef<
       className={cn(
         "s-z-10",
         "s-flex s-h-4 s-w-4 s-items-center s-justify-center s-rounded-full s-text-xs s-font-semibold",
+        "s-text-primary-200 dark:s-text-primary-200-night",
+        "s-bg-primary-600 dark:s-bg-primary-600-night",
         className
       )}
       {...props}
@@ -148,7 +122,7 @@ const CitationGrid = React.forwardRef<HTMLDivElement, CitationGridProps>(
     return (
       <div
         ref={ref}
-        className={cn("s-min-w-60 s-space-x-1 s-@container", className)}
+        className={cn("s-min-w-60 s-@container", className)}
         {...props}
       >
         <div className={citationGridVariants({ variant })}>{children}</div>
@@ -232,13 +206,7 @@ const CitationIcons = React.forwardRef<
   return (
     <div
       ref={ref}
-      className={cn(
-        "s-flex s-flex-row s-items-center s-justify-center",
-        "s-gap-1 s-rounded-lg s-p-1 s-text-xs s-font-medium",
-        "s-bg-muted-background dark:s-bg-muted-background-night",
-        "s-text-muted-foreground dark:s-text-muted-foreground-night",
-        className
-      )}
+      className={cn("s-flex s-items-center s-gap-2 s-pb-1", className)}
       {...props}
     >
       {children}