@dust-tt/sparkle 0.2.617-rc-1 → 0.2.617

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

@@ -1 +1 @@
-{"version":3,"file":"Playground.stories.js","sourceRoot":"","sources":["../../../src/stories/Playground.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EACL,MAAM,EACN,YAAY,EACZ,mBAAmB,EACnB,gBAAgB,EAChB,oBAAoB,EACpB,mBAAmB,EACnB,KAAK,EACL,IAAI,GACL,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAE9E,eAAe;IACb,KAAK,EAAE,iBAAiB;CACzB,CAAC;AAEF,MAAM,CAAC,IAAM,IAAI,GAAG;IAClB,OAAO,CACL,6BAAK,SAAS,EAAC,8DAA8D;QAC3E,oBAAC,IAAI,CAAC,MAAM,IAAC,SAAS,EAAC,YAAY;YACjC,oBAAC,IAAI,CAAC,QAAQ,IAAC,MAAM,EAAC,MAAM,EAAC,KAAK,EAAC,SAAS,EAAC,GAAG,EAAC,IAAI;gBACnD,oBAAC,KAAK,gBAAc;gBACpB,oBAAC,YAAY;oBACX,oBAAC,mBAAmB,IAAC,OAAO;wBAC1B,oBAAC,MAAM,IACL,OAAO,EAAC,SAAS,EACjB,IAAI,EAAE,aAAa,EACnB,KAAK,EAAC,OAAO,EACb,QAAQ,QACR,SAAS,EAAC,SAAS,GACnB,CACkB;oBACtB,oBAAC,mBAAmB;wBAClB,oBAAC,gBAAgB,IAAC,IAAI,EAAE,aAAa,EAAE,KAAK,EAAC,OAAO,GAAG;wBACvD,oBAAC,gBAAgB,IAAC,IAAI,EAAE,cAAc,EAAE,KAAK,EAAC,MAAM,GAAG;wBACvD,oBAAC,gBAAgB,IAAC,IAAI,EAAE,aAAa,EAAE,KAAK,EAAC,QAAQ,GAAG,CACpC,CACT,CACD;YAChB,oBAAC,IAAI,CAAC,QAAQ,IAAC,MAAM,EAAC,MAAM,EAAC,KAAK,EAAC,SAAS,EAAC,GAAG,EAAC,IAAI;gBACnD,oBAAC,KAAK,6BAA2B;gBACjC,oBAAC,YAAY;oBACX,oBAAC,mBAAmB,IAAC,OAAO;wBAC1B,6BAAK,SAAS,EAAC,yCAAyC;;4BAEtD,oBAAC,MAAM,IACL,OAAO,EAAC,SAAS,EACjB,KAAK,EAAC,2BAAiB,EACvB,QAAQ,QACR,SAAS,EAAC,SAAS,GACnB,CACE,CACc;oBACtB,oBAAC,mBAAmB;wBAClB,oBAAC,gBAAgB;;4BAEf,oBAAC,oBAAoB,iBAAyB,CAC7B;wBACnB,oBAAC,gBAAgB;;4BAEf,oBAAC,oBAAoB,0BAA6B,CACjC,CACC,CACT,CACD,CACJ,CACV,CACP,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"Playground.stories.js","sourceRoot":"","sources":["../../../src/stories/Playground.stories.tsx"],"names":[],"mappings":"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"}

package/dist/esm/stories/Spinner.stories.js

@@ -50,11 +50,11 @@ export var SpinnerExample = function () {
         React.createElement("div", { className: "s-heading-base s-text-foreground dark:s-text-white" }, "Size = XXL"),
         React.createElement("div", { className: "s-flex s-gap-4" },
             React.createElement("div", { className: "s-p-20" },
-                React.createElement(Spinner, { variant: "color", size: "xxl" })),
+                React.createElement(Spinner, { variant: "color", size: "2xl" })),
             React.createElement("div", { className: "s-p-20" },
-                React.createElement(Spinner, { variant: "mono", size: "xxl" })),
+                React.createElement(Spinner, { variant: "mono", size: "2xl" })),
             React.createElement("div", { className: "s-p-20" },
-                React.createElement(Spinner, { variant: "rose300", size: "xxl" })))));
+                React.createElement(Spinner, { variant: "rose300", size: "2xl" })))));
 };
 export var BasicSpinner = {
     args: {

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

@@ -1 +1 @@
-{"version":3,"file":"ToolCard.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/ToolCard.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAI/C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,QAAQ,CAG/B,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,QAAQ,yBAsCpB,CAAC"}
+{"version":3,"file":"ToolCard.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/ToolCard.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAI/C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,QAAQ,CAG/B,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,QAAQ,yBAoDpB,CAAC"}

package/dist/esm/stories/ToolCard.stories.js

@@ -7,10 +7,18 @@ var meta = {
     component: ToolCard,
 };
 export default meta;
-export var Examples = function () { return (React.createElement("div", { className: "s-grid s-grid-cols-2 s-gap-3" },
-    React.createElement(ToolCard, { icon: BookOpenIcon, label: "Image Generation", description: "Agent can generate images (GPT Image 1).", isSelected: false, canAdd: true, onClick: function () { return console.log("Add Image Generation"); } }),
-    React.createElement(ToolCard, { icon: CommandLineIcon, label: "Reasoning", description: React.createElement(React.Fragment, null,
-            "Agent can decide to trigger a reasoning model for complex tasks. Agent can decide to trigger a reasoning model for complex tasks. Agent can decide to trigger a reasoning model for complex tasks. Agent can decide to trigger a reasoning model for complex tasks. Agent can decide to trigger a reasoning model for complex tasks. Agent can decide to trigger a reasoning model for complex tasks.",
-            " ",
-            React.createElement(Hoverable, { href: "https://example.com/help", target: "_blank", rel: "noopener noreferrer", variant: "primary" }, "the docs")), isSelected: true, canAdd: false }))); };
+export var Examples = function () { return (React.createElement("div", { className: "s-flex s-gap-3" },
+    React.createElement("div", { className: "s-w-80" },
+        React.createElement(ToolCard, { icon: BookOpenIcon, cardContainerClassName: "s-h-36", label: "Image Generation", description: "Agent can generate images (GPT Image 1).", isSelected: true, canAdd: true, onClick: function () { return console.log("Add Image Generation"); }, toolInfo: {
+                label: "Click here",
+                onClick: function () { return console.log("Click here"); },
+            } })),
+    React.createElement("div", { className: "s-w-80" },
+        React.createElement(ToolCard, { cardContainerClassName: "s-h-36", icon: CommandLineIcon, label: "Reasoning", description: React.createElement(React.Fragment, null,
+                "Agent can decide to trigger a reasoning model for complex tasks. Agent can decide to trigger a reasoning model for complex tasks. Agent can decide to trigger a reasoning model for complex tasks. Agent can decide to trigger a reasoning model for complex tasks. Agent can decide to trigger a reasoning model for complex tasks. Agent can decide to trigger a reasoning model for complex tasks.",
+                " ",
+                React.createElement(Hoverable, { href: "https://example.com/help", target: "_blank", rel: "noopener noreferrer", variant: "primary" }, "the docs")), isSelected: true, canAdd: false, toolInfo: {
+                label: "Click here",
+                onClick: function () { return console.log("Click here"); },
+            } })))); };
 //# sourceMappingURL=ToolCard.stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ToolCard.stories.js","sourceRoot":"","sources":["../../../src/stories/ToolCard.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAEnE,IAAM,IAAI,GAA0B;IAClC,KAAK,EAAE,kBAAkB;IACzB,SAAS,EAAE,QAAQ;CACpB,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,MAAM,CAAC,IAAM,QAAQ,GAAG,cAAM,OAAA,CAC5B,6BAAK,SAAS,EAAC,8BAA8B;IAE3C,oBAAC,QAAQ,IACP,IAAI,EAAE,YAAY,EAClB,KAAK,EAAC,kBAAkB,EACxB,WAAW,EAAC,0CAA0C,EACtD,UAAU,EAAE,KAAK,EACjB,MAAM,EAAE,IAAI,EACZ,OAAO,EAAE,cAAM,OAAA,OAAO,CAAC,GAAG,CAAC,sBAAsB,CAAC,EAAnC,CAAmC,GAClD;IAGF,oBAAC,QAAQ,IACP,IAAI,EAAE,eAAe,EACrB,KAAK,EAAC,WAAW,EACjB,WAAW,EACT;;YAMyD,GAAG;YAC1D,oBAAC,SAAS,IACR,IAAI,EAAC,0BAA0B,EAC/B,MAAM,EAAC,QAAQ,EACf,GAAG,EAAC,qBAAqB,EACzB,OAAO,EAAC,SAAS,eAGP,CACX,EAEL,UAAU,EAAE,IAAI,EAChB,MAAM,EAAE,KAAK,GACb,CACE,CACP,EAtC6B,CAsC7B,CAAC"}
+{"version":3,"file":"ToolCard.stories.js","sourceRoot":"","sources":["../../../src/stories/ToolCard.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAEnE,IAAM,IAAI,GAA0B;IAClC,KAAK,EAAE,kBAAkB;IACzB,SAAS,EAAE,QAAQ;CACpB,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,MAAM,CAAC,IAAM,QAAQ,GAAG,cAAM,OAAA,CAC5B,6BAAK,SAAS,EAAC,gBAAgB;IAE7B,6BAAK,SAAS,EAAC,QAAQ;QACrB,oBAAC,QAAQ,IACP,IAAI,EAAE,YAAY,EAClB,sBAAsB,EAAC,QAAQ,EAC/B,KAAK,EAAC,kBAAkB,EACxB,WAAW,EAAC,0CAA0C,EACtD,UAAU,QACV,MAAM,QACN,OAAO,EAAE,cAAM,OAAA,OAAO,CAAC,GAAG,CAAC,sBAAsB,CAAC,EAAnC,CAAmC,EAClD,QAAQ,EAAE;gBACR,KAAK,EAAE,YAAY;gBACnB,OAAO,EAAE,cAAM,OAAA,OAAO,CAAC,GAAG,CAAC,YAAY,CAAC,EAAzB,CAAyB;aACzC,GACD,CACE;IAGN,6BAAK,SAAS,EAAC,QAAQ;QACrB,oBAAC,QAAQ,IACP,sBAAsB,EAAC,QAAQ,EAC/B,IAAI,EAAE,eAAe,EACrB,KAAK,EAAC,WAAW,EACjB,WAAW,EACT;;gBAMmE,GAAG;gBACpE,oBAAC,SAAS,IACR,IAAI,EAAC,0BAA0B,EAC/B,MAAM,EAAC,QAAQ,EACf,GAAG,EAAC,qBAAqB,EACzB,OAAO,EAAC,SAAS,eAGP,CACX,EAEL,UAAU,QACV,MAAM,EAAE,KAAK,EACb,QAAQ,EAAE;gBACR,KAAK,EAAE,YAAY;gBACnB,OAAO,EAAE,cAAM,OAAA,OAAO,CAAC,GAAG,CAAC,YAAY,CAAC,EAAzB,CAAyB;aACzC,GACD,CACE,CACF,CACP,EApD6B,CAoD7B,CAAC"}

package/dist/sparkle.css

@@ -1407,6 +1407,10 @@ select {
   height: 100vh;
 }
 
+.s-h-\[12\%\] {
+  height: 12%;
+}
+
 .s-h-\[120px\] {
   height: 120px;
 }
@@ -1415,6 +1419,10 @@ select {
   height: 125px;
 }
 
+.s-h-\[18\%\] {
+  height: 18%;
+}
+
 .s-h-\[1px\] {
   height: 1px;
 }
@@ -1423,10 +1431,22 @@ select {
   height: 200px;
 }
 
+.s-h-\[22\%\] {
+  height: 22%;
+}
+
 .s-h-\[30\%\] {
   height: 30%;
 }
 
+.s-h-\[33\%\] {
+  height: 33%;
+}
+
+.s-h-\[34\%\] {
+  height: 34%;
+}
+
 .s-h-\[340px\] {
   height: 340px;
 }
@@ -1443,14 +1463,38 @@ select {
   height: 45%;
 }
 
+.s-h-\[46\%\] {
+  height: 46%;
+}
+
+.s-h-\[56\%\] {
+  height: 56%;
+}
+
+.s-h-\[6\%\] {
+  height: 6%;
+}
+
 .s-h-\[600px\] {
   height: 600px;
 }
 
+.s-h-\[64\%\] {
+  height: 64%;
+}
+
 .s-h-\[700px\] {
   height: 700px;
 }
 
+.s-h-\[76\%\] {
+  height: 76%;
+}
+
+.s-h-\[98\%\] {
+  height: 98%;
+}
+
 .s-h-fit {
   height: -moz-fit-content;
   height: fit-content;
@@ -1484,6 +1528,10 @@ select {
   min-height: 0px;
 }
 
+.s-min-h-1 {
+  min-height: 0.25rem;
+}
+
 .s-min-h-5 {
   min-height: 1.25rem;
 }
@@ -1798,6 +1846,10 @@ select {
   max-width: 80vh;
 }
 
+.s-max-w-\[900px\] {
+  max-width: 900px;
+}
+
 .s-max-w-full {
   max-width: 100%;
 }
@@ -2768,6 +2820,10 @@ select {
   border-color: rgb(248 166 180 / var(--tw-border-opacity));
 }
 
+.s-border-warning\/20 {
+  border-color: rgb(225 67 34 / 0.2);
+}
+
 .s-border-white\/30 {
   border-color: rgb(255 255 255 / 0.3);
 }
@@ -3293,6 +3349,11 @@ select {
   background-color: rgb(247 247 247 / var(--tw-bg-opacity));
 }
 
+.s-bg-muted-foreground {
+  --tw-bg-opacity: 1;
+  background-color: rgb(84 93 108 / var(--tw-bg-opacity));
+}
+
 .s-bg-muted-foreground\/40 {
   background-color: rgb(84 93 108 / 0.4);
 }
@@ -8794,12 +8855,51 @@ select {
   .sm\:s-gap-3 {
     gap: 0.75rem;
   }
+
+  .sm\:s-p-0 {
+    padding: 0px;
+  }
 }
 
 @media (min-width: 768px) {
+  .md\:s-flex {
+    display: flex;
+  }
+
+  .md\:s-hidden {
+    display: none;
+  }
+
   .md\:s-min-w-\[450px\] {
     min-width: 450px;
   }
+
+  .md\:s-gap-1 {
+    gap: 0.25rem;
+  }
+
+  .md\:s-rounded-3xl {
+    border-radius: 1.5rem;
+  }
+
+  .md\:s-p-6 {
+    padding: 1.5rem;
+  }
+
+  .md\:s-ring-2 {
+    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+  }
+
+  .md\:s-ring-highlight-300 {
+    --tw-ring-opacity: 1;
+    --tw-ring-color: rgb(122 198 255 / var(--tw-ring-opacity));
+  }
+
+  .md\:s-ring-offset-2 {
+    --tw-ring-offset-width: 2px;
+  }
 }
 
 @media (min-width: 1024px) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.2.617-rc-1",
+  "version": "0.2.617",
   "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",

package/src/components/Avatar.tsx

@@ -6,7 +6,7 @@ import { UserIcon } from "@sparkle/icons/app";
 import { getEmojiAndBackgroundFromUrl } from "@sparkle/lib/avatar/utils";
 import { cn } from "@sparkle/lib/utils";
 
-const AVATAR_SIZES = ["xs", "sm", "md", "lg", "xl", "xxl", "auto"] as const;
+const AVATAR_SIZES = ["xs", "sm", "md", "lg", "xl", "2xl", "auto"] as const;
 type AvatarSizeType = (typeof AVATAR_SIZES)[number];
 
 const AVATAR_VARIANTS = ["default", "clickable", "disabled"] as const;
@@ -22,7 +22,7 @@ const avatarVariants = cva(
         md: "s-h-10 s-w-10",
         lg: "s-h-16 s-w-16",
         xl: "s-h-20 s-w-20",
-        xxl: "s-h-36 s-w-36",
+        "2xl": "s-h-36 s-w-36",
         auto: "s-w-full s-relative",
       },
       variant: {
@@ -64,7 +64,7 @@ const avatarVariants = cva(
       },
       {
         rounded: false,
-        size: "xxl",
+        size: "2xl",
         className: "s-rounded-[38px]",
       },
       {
@@ -89,7 +89,7 @@ const textVariants = cva("s-select-none s-font-semibold", {
       md: "s-text-base",
       lg: "s-text-3xl",
       xl: "s-text-5xl",
-      xxl: "s-text-7xl",
+      "2xl": "s-text-7xl",
       auto: "s-text-xl",
     },
   },

package/src/components/Button.tsx

@@ -100,16 +100,25 @@ const buttonVariants = cva(
         ),
       },
       size: {
-        xmini: "s-h-6 s-w-6 s-rounded-lg s-label-xs s-gap-1 s-shrink-0",
-        mini: "s-h-7 s-w-7 s-rounded-lg s-label-xs s-gap-1.5 s-shrink-0",
-        xs: "s-h-7 s-px-2.5 s-rounded-lg s-label-xs s-gap-1.5 s-shrink-0",
-        sm: "s-h-9 s-px-3 s-rounded-xl s-label-sm s-gap-2 s-shrink-0",
-        md: "s-h-12 s-px-4 s-py-2 s-rounded-2xl s-label-base s-gap-2.5 s-shrink-0",
+        xmini: "s-h-6 s-w-6 s-label-xs s-gap-1 s-shrink-0",
+        mini: "s-h-7 s-w-7 s-label-xs s-gap-1.5 s-shrink-0",
+        xs: "s-h-7 s-px-2.5 s-label-xs s-gap-1.5 s-shrink-0",
+        sm: "s-h-9 s-px-3 s-label-sm s-gap-2 s-shrink-0",
+        md: "s-h-12 s-px-4 s-py-2 s-label-base s-gap-2.5 s-shrink-0",
+      },
+      rounded: {
+        xmini: "s-rounded-lg",
+        mini: "s-rounded-lg",
+        xs: "s-rounded-lg",
+        sm: "s-rounded-xl",
+        md: "s-rounded-2xl",
+        full: "s-rounded-full",
       },
     },
     defaultVariants: {
       variant: "primary",
       size: "sm",
+      rounded: "sm",
     },
   }
 );
@@ -153,14 +162,30 @@ export interface MetaButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {
   asChild?: boolean;
+  isRounded?: boolean;
 }
 
 const MetaButton = React.forwardRef<HTMLButtonElement, MetaButtonProps>(
-  ({ className, asChild = false, variant, size, children, ...props }, ref) => {
+  (
+    {
+      className,
+      asChild = false,
+      variant,
+      size,
+      isRounded,
+      children,
+      ...props
+    },
+    ref
+  ) => {
     const Comp = asChild ? Slot : "button";
+
+    // Determine rounded variant based on isRounded prop
+    const rounded = isRounded ? "full" : size;
+
     return (
       <Comp
-        className={cn(buttonVariants({ variant, size, className }))}
+        className={cn(buttonVariants({ variant, size, rounded, className }))}
         ref={ref}
         {...props}
       >
@@ -199,6 +224,7 @@ type CommonButtonProps = Omit<MetaButtonProps, "children"> &
     tooltip?: string;
     isCounter?: boolean;
     counterValue?: string;
+    isRounded?: boolean;
   };
 
 export type MiniButtonProps = CommonButtonProps & {
@@ -230,6 +256,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
       isCounter = false,
       counterValue,
       size = "sm",
+      isRounded = false,
       href,
       target,
       rel,
@@ -338,6 +365,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         ref={ref}
         size={size}
         variant={variant}
+        isRounded={isRounded}
         disabled={isLoading || props.disabled}
         className={cn(
           (isPulsing || isPulsingBriefly) && "s-animate-pulse",

package/src/components/ConversationMessage.tsx

@@ -35,8 +35,10 @@ interface ConversationMessageProps
   citations?: React.ReactElement[];
   isDisabled?: boolean;
   name?: string;
+  timestamp?: string;
   pictureUrl?: string | React.ReactNode | null;
   renderName?: (name: string | null) => React.ReactNode;
+  infoChip?: React.ReactNode;
 }
 
 const messageVariants = cva("s-flex s-w-full s-flex-col s-rounded-2xl", {
@@ -81,8 +83,10 @@ export const ConversationMessage = React.forwardRef<
       citations,
       isDisabled = false,
       name,
+      timestamp,
       pictureUrl,
       renderName = (name) => <span>{name}</span>,
+      infoChip,
       type,
       className,
       ...props
@@ -95,9 +99,11 @@ export const ConversationMessage = React.forwardRef<
           <ConversationMessageHeader
             avatarUrl={pictureUrl}
             name={name}
+            timestamp={timestamp}
             isBusy={avatarBusy}
             isDisabled={isDisabled}
             renderName={renderName}
+            infoChip={infoChip}
           />
 
           <ConversationMessageContent citations={citations}>
@@ -158,6 +164,8 @@ interface ConversationMessageHeaderProps
   isBusy?: boolean;
   isDisabled?: boolean;
   name?: string;
+  timestamp?: string;
+  infoChip?: React.ReactNode;
   renderName: (name: string | null) => React.ReactNode;
 }
 
@@ -171,6 +179,8 @@ export const ConversationMessageHeader = React.forwardRef<
       isBusy,
       isDisabled,
       name = "",
+      timestamp,
+      infoChip,
       renderName,
       className,
       ...props
@@ -202,13 +212,22 @@ export const ConversationMessageHeader = React.forwardRef<
           disabled={isDisabled}
           size="sm"
         />
-        <div
-          className={cn(
-            "s-text-sm s-font-semibold @sm:s-text-base",
-            "s-text-foreground dark:s-text-foreground-night"
-          )}
-        >
-          {renderName(name)}
+        <div className="s-flex s-w-full s-flex-row s-justify-between s-gap-0.5">
+          <div
+            className={cn(
+              "s-text-sm s-font-semibold @sm:s-text-base",
+              "s-text-foreground dark:s-text-foreground-night",
+              "s-flex s-flex-row s-items-center s-gap-2"
+            )}
+          >
+            {renderName(name)}
+            {infoChip}
+          </div>
+          <div>
+            <span className="s-text-xs s-font-normal s-text-muted-foreground dark:s-text-muted-foreground-night">
+              {timestamp}
+            </span>
+          </div>
         </div>
       </div>
     );

package/src/components/DataTable.tsx

@@ -15,13 +15,7 @@ import {
   useReactTable,
 } from "@tanstack/react-table";
 import { useVirtualizer } from "@tanstack/react-virtual";
-import React, {
-  ReactNode,
-  useEffect,
-  useLayoutEffect,
-  useRef,
-  useState,
-} from "react";
+import React, { ReactNode, useEffect, useRef, useState } from "react";
 
 import {
   Avatar,
@@ -345,24 +339,6 @@ export interface ScrollableDataTableProps<TData extends TBaseData>
 const COLUMN_HEIGHT = 48;
 const MIN_COLUMN_WIDTH = 40;
 
-// Helper function to compare column sizing objects
-function shallowEqualSizing(
-  a: Record<string, number>,
-  b: Record<string, number>
-) {
-  const aKeys = Object.keys(a);
-  const bKeys = Object.keys(b);
-  if (aKeys.length !== bKeys.length) {
-    return false;
-  }
-  for (const k of aKeys) {
-    if (a[k] !== b[k]) {
-      return false;
-    }
-  }
-  return true;
-}
-
 export function ScrollableDataTable<TData extends TBaseData>({
   data,
   totalRowCount,
@@ -384,7 +360,7 @@ export function ScrollableDataTable<TData extends TBaseData>({
   const loadMoreRef = useRef<HTMLDivElement>(null);
   const [tableWidth, setTableWidth] = useState(0);
 
-  // Monitor table width changes with guard against tiny changes
+  // Monitor table width changes
   useEffect(() => {
     if (!tableContainerRef.current) {
       return;
@@ -392,8 +368,7 @@ export function ScrollableDataTable<TData extends TBaseData>({
 
     const resizeObserver = new ResizeObserver((entries) => {
       for (const entry of entries) {
-        const w = Math.round(entry.contentRect.width);
-        setTableWidth((prev) => (prev !== w ? w : prev)); // update only on real change
+        setTableWidth(entry.contentRect.width);
       }
     });
 
@@ -430,20 +405,12 @@ export function ScrollableDataTable<TData extends TBaseData>({
     getRowId,
   });
 
-  useLayoutEffect(() => {
+  useEffect(() => {
     if (!tableContainerRef.current || !table || !tableWidth) {
       return;
     }
     const columns = table.getAllColumns();
 
-    // Skip sizing if no columns have ratios defined
-    const hasRatios = columns.some(
-      (c) => (c.columnDef.meta?.sizeRatio ?? 0) > 0
-    );
-    if (!hasRatios) {
-      return;
-    }
-
     // Calculate ideal widths and handle minimums
     const idealSizing = columns.reduce(
       (acc, column) => {
@@ -452,8 +419,7 @@ export function ScrollableDataTable<TData extends TBaseData>({
           Math.floor((ratio / 100) * tableWidth),
           MIN_COLUMN_WIDTH
         );
-        acc[column.id] = calculated;
-        return acc;
+        return { ...acc, [column.id]: calculated };
       },
       {} as Record<string, number>
     );
@@ -473,13 +439,8 @@ export function ScrollableDataTable<TData extends TBaseData>({
 
       idealSizing[adjustColumnId] += widthDifference;
     }
-
-    // Only set when sizing actually changes
-    const currentSizing = table.getState().columnSizing;
-    if (!shallowEqualSizing(idealSizing, currentSizing)) {
-      table.setColumnSizing(idealSizing);
-    }
-  }, [tableWidth]); // intentionally remove `table` from deps
+    table.setColumnSizing(idealSizing);
+  }, [table, tableWidth]);
 
   // Get the current column sizing from the table for rendering
   const columnSizing = table.getState().columnSizing;

package/src/components/NavigationList.tsx

@@ -41,13 +41,18 @@ const NavigationListItemStyles = cva(
   }
 );
 
+interface NavigationListProps {
+  viewportRef?: React.RefObject<HTMLDivElement>;
+}
 const NavigationList = React.forwardRef<
   React.ElementRef<typeof ScrollAreaPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
->(({ className, children, ...props }, ref) => {
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> &
+    NavigationListProps
+>(({ className, children, viewportRef, ...props }, ref) => {
   return (
     <ScrollArea
       ref={ref}
+      viewportRef={viewportRef}
       className={cn(className, "s-transition-all s-duration-300")}
       {...props}
     >

package/src/components/ScrollArea.tsx

@@ -14,6 +14,7 @@ interface ScrollAreaProps
     active?: string;
     inactive?: string;
   };
+  viewportRef?: React.RefObject<HTMLDivElement>;
 }
 
 const ScrollArea = React.forwardRef<
@@ -29,11 +30,12 @@ const ScrollArea = React.forwardRef<
       scrollBarClassName,
       viewportClassName,
       scrollStyles,
+      viewportRef,
       ...props
     },
     ref
   ) => {
-    const viewportRef = React.useRef<HTMLDivElement>(null);
+    const localViewportRef = React.useRef<HTMLDivElement>(null);
     const [isScrolled, setIsScrolled] = React.useState(false);
 
     const hasCustomScrollBar = useMemo(
@@ -50,9 +52,13 @@ const ScrollArea = React.forwardRef<
     const shouldHideDefaultScrollBar = hideScrollBar || hasCustomScrollBar;
 
     const handleScroll = React.useCallback(() => {
-      if (viewportRef.current) {
+      if (viewportRef && viewportRef.current) {
         setIsScrolled(viewportRef.current.scrollTop > 0);
       }
+
+      if (localViewportRef.current) {
+        setIsScrolled(localViewportRef.current.scrollTop > 0);
+      }
     }, []);
 
     return (
@@ -66,7 +72,7 @@ const ScrollArea = React.forwardRef<
         {...props}
       >
         <ScrollAreaPrimitive.Viewport
-          ref={viewportRef}
+          ref={viewportRef || localViewportRef}
           onScroll={handleScroll}
           className={cn(
             "s-h-full s-w-full s-rounded-[inherit]",