@dust-tt/sparkle 0.5.9-rc-1 → 0.5.10

package/dist/esm/lottie/spinnerLightXS.d.ts

@@ -41,12 +41,12 @@ declare const animation: {
                     to: number[];
                     ti: number[];
                 } | {
+                    t: number;
+                    s: number[];
                     i?: undefined;
                     o?: undefined;
                     to?: undefined;
                     ti?: undefined;
-                    t: number;
-                    s: number[];
                 })[];
                 ix: number;
                 l: number;
@@ -68,19 +68,6 @@ declare const animation: {
         shapes: {
             ty: string;
             it: ({
-                o?: undefined;
-                c?: undefined;
-                bm?: undefined;
-                p?: undefined;
-                a?: undefined;
-                s?: undefined;
-                sk?: undefined;
-                sa?: undefined;
-                r?: undefined;
-                w?: undefined;
-                lc?: undefined;
-                lj?: undefined;
-                ml?: undefined;
                 ind: number;
                 ty: string;
                 ix: number;
@@ -103,8 +90,6 @@ declare const animation: {
                             c: boolean;
                         }[];
                     } | {
-                        i?: undefined;
-                        o?: undefined;
                         t: number;
                         s: {
                             i: number[][];
@@ -112,22 +97,28 @@ declare const animation: {
                             v: number[][];
                             c: boolean;
                         }[];
+                        i?: undefined;
+                        o?: undefined;
                     })[];
                     ix: number;
                 };
                 nm: string;
                 mn: string;
                 hd: boolean;
-            } | {
+                o?: undefined;
+                c?: undefined;
+                bm?: undefined;
                 p?: undefined;
                 a?: undefined;
                 s?: undefined;
+                r?: undefined;
                 sk?: undefined;
                 sa?: undefined;
-                ix?: undefined;
-                r?: undefined;
-                ind?: undefined;
-                ks?: undefined;
+                w?: undefined;
+                lc?: undefined;
+                lj?: undefined;
+                ml?: undefined;
+            } | {
                 ty: string;
                 c: {
                     a: number;
@@ -151,19 +142,16 @@ declare const animation: {
                 nm: string;
                 mn: string;
                 hd: boolean;
-            } | {
+                ind?: undefined;
+                ix?: undefined;
+                ks?: undefined;
                 p?: undefined;
                 a?: undefined;
                 s?: undefined;
+                r?: undefined;
                 sk?: undefined;
                 sa?: undefined;
-                ix?: undefined;
-                ind?: undefined;
-                ks?: undefined;
-                w?: undefined;
-                lc?: undefined;
-                lj?: undefined;
-                ml?: undefined;
+            } | {
                 ty: string;
                 c: {
                     a: number;
@@ -184,10 +172,10 @@ declare const animation: {
                         t: number;
                         s: number[];
                     } | {
-                        i?: undefined;
-                        o?: undefined;
                         t: number;
                         s: number[];
+                        i?: undefined;
+                        o?: undefined;
                     })[];
                     ix: number;
                 };
@@ -196,18 +184,19 @@ declare const animation: {
                 nm: string;
                 mn: string;
                 hd: boolean;
-            } | {
-                c?: undefined;
-                bm?: undefined;
-                mn?: undefined;
-                hd?: undefined;
-                ix?: undefined;
                 ind?: undefined;
+                ix?: undefined;
                 ks?: undefined;
+                p?: undefined;
+                a?: undefined;
+                s?: undefined;
+                sk?: undefined;
+                sa?: undefined;
                 w?: undefined;
                 lc?: undefined;
                 lj?: undefined;
                 ml?: undefined;
+            } | {
                 ty: string;
                 p: {
                     a: number;
@@ -245,6 +234,17 @@ declare const animation: {
                     ix: number;
                 };
                 nm: string;
+                ind?: undefined;
+                ix?: undefined;
+                ks?: undefined;
+                c?: undefined;
+                bm?: undefined;
+                mn?: undefined;
+                hd?: undefined;
+                w?: undefined;
+                lc?: undefined;
+                lj?: undefined;
+                ml?: undefined;
             })[];
             nm: string;
             np: number;

package/dist/sparkle.css

@@ -4424,6 +4424,14 @@ select {
   padding-left: 2rem;
 }
 
+.s-pl-9 {
+  padding-left: 2.25rem;
+}
+
+.s-pr-0 {
+  padding-right: 0px;
+}
+
 .s-pr-1 {
   padding-right: 0.25rem;
 }
@@ -4444,6 +4452,10 @@ select {
   padding-right: 2rem;
 }
 
+.s-pr-9 {
+  padding-right: 2.25rem;
+}
+
 .s-pt-0 {
   padding-top: 0px;
 }
@@ -6549,10 +6561,6 @@ select {
 }
 
 @container conversation (min-width: 40rem) {
-  .\@sm\/conversation\:s-gap-4 {
-    gap: 1rem;
-  }
-
   .\@sm\/conversation\:s-gap-8 {
     gap: 2rem;
   }
@@ -6581,6 +6589,10 @@ select {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
 
+  .\@sm\:s-flex-row {
+    flex-direction: row;
+  }
+
   .\@sm\:s-px-6 {
     padding-left: 1.5rem;
     padding-right: 1.5rem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.5.9-rc-1",
+  "version": "0.5.10",
   "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/ConversationMessage.tsx

@@ -1,7 +1,12 @@
 import { cva, VariantProps } from "class-variance-authority";
 import React from "react";
 
-import { Avatar, Button, CitationGrid, IconButton } from "@sparkle/components";
+import {
+  Avatar,
+  Button,
+  ConversationMessageContent,
+  IconButton,
+} from "@sparkle/components";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -52,9 +57,9 @@ interface ConversationMessageProps
   type: ConversationMessageType;
 }
 
-export type ConversationMessageType = "user" | "agent";
+type ConversationMessageType = "user" | "agent";
 
-export interface ConversationMessageAction {
+interface ConversationMessageAction {
   icon: React.ComponentType | React.ReactNode;
   label: string;
   onClick: () => void;
@@ -142,37 +147,6 @@ export const ConversationMessage = React.forwardRef<
 
 ConversationMessage.displayName = "ConversationMessage";
 
-interface ConversationMessageContentProps extends React.HTMLAttributes<HTMLDivElement> {
-  children: React.ReactNode;
-  citations?: React.ReactElement[];
-  type: ConversationMessageType;
-}
-
-export const ConversationMessageContent = React.forwardRef<
-  HTMLDivElement,
-  ConversationMessageContentProps
->(({ children, citations, className, ...props }, ref) => {
-  return (
-    <div
-      ref={ref}
-      className={cn(
-        "s-flex s-flex-col s-gap-3 @sm/conversation:s-gap-4",
-        className
-      )}
-      {...props}
-    >
-      <div className="s-text-base s-text-foreground dark:s-text-foreground-night">
-        {children}
-      </div>
-      {citations && citations.length > 0 && (
-        <CitationGrid>{citations}</CitationGrid>
-      )}
-    </div>
-  );
-});
-
-ConversationMessageContent.displayName = "ConversationMessageContent";
-
 interface ConversationMessageHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
   actions?: ConversationMessageAction[];
   avatarUrl?: string | React.ReactNode;
@@ -185,7 +159,7 @@ interface ConversationMessageHeaderProps extends React.HTMLAttributes<HTMLDivEle
   renderName: (name: string | null) => React.ReactNode;
 }
 
-export const ConversationMessageHeader = React.forwardRef<
+const ConversationMessageHeader = React.forwardRef<
   HTMLDivElement,
   ConversationMessageHeaderProps
 >(

package/src/components/ConversationMessages.tsx

@@ -0,0 +1,180 @@
+import { cva } from "class-variance-authority";
+import React from "react";
+
+import { Avatar, CitationGrid } from "@sparkle/components";
+import { cn } from "@sparkle/lib/utils";
+
+type ConversationMessageType = "user" | "agent";
+type MessageType = "me" | "user" | "agent";
+
+const wrapperVariants = cva("s-flex s-flex-col s-@container @sm:s-flex-row", {
+  variants: {
+    messageType: {
+      agent: "s-pr-0",
+      me: "s-pl-9",
+      user: "s-pr-9",
+    },
+  },
+  defaultVariants: {
+    messageType: "agent",
+  },
+});
+const messageVariants = cva("s-flex s-rounded-2xl s-max-w-full", {
+  variants: {
+    type: {
+      user: "s-bg-muted-background dark:s-bg-muted-background-night s-px-3 s-py-3 s-gap-2 s-w-fit",
+      agent: "s-w-full s-gap-3 s-p-4 @sm:s-flex-row s-flex-col",
+    },
+  },
+  defaultVariants: {
+    type: "agent",
+  },
+});
+
+interface ConversationMessageContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+  messageType: MessageType;
+  type: ConversationMessageType;
+}
+
+export const ConversationMessageContainer = React.forwardRef<
+  HTMLDivElement,
+  ConversationMessageContainerProps
+>(({ children, className, messageType, type, ...props }, ref) => {
+  return (
+    <div ref={ref} className={cn(wrapperVariants({ messageType }))}>
+      <div className={cn(messageVariants({ type, className }))} {...props}>
+        {children}
+      </div>
+    </div>
+  );
+});
+
+ConversationMessageContainer.displayName = "ConversationMessageContainer";
+
+interface ConversationMessageContentProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+  citations?: React.ReactElement[];
+  type: ConversationMessageType;
+  infoChip?: React.ReactNode;
+}
+
+export const ConversationMessageContent = React.forwardRef<
+  HTMLDivElement,
+  ConversationMessageContentProps
+>(({ children, citations, className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      className={cn("s-flex s-min-w-0 s-flex-col s-gap-1", className)}
+      {...props}
+    >
+      <div className="s-text-base s-text-foreground dark:s-text-foreground-night">
+        {children}
+      </div>
+      {citations && citations.length > 0 && (
+        <CitationGrid>{citations}</CitationGrid>
+      )}
+    </div>
+  );
+});
+
+ConversationMessageContent.displayName = "ConversationMessageContent";
+
+interface ConversationMessageAvatarProps extends React.HTMLAttributes<HTMLDivElement> {
+  avatarUrl?: string | React.ReactNode;
+  isBusy?: boolean;
+  isDisabled?: boolean;
+  name?: string;
+  type: ConversationMessageType;
+}
+
+export const ConversationMessageAvatar = React.forwardRef<
+  HTMLDivElement,
+  ConversationMessageAvatarProps
+>(
+  (
+    { avatarUrl, isBusy, isDisabled, name = "", className, type, ...props },
+    ref
+  ) => {
+    return (
+      <div
+        ref={ref}
+        className={cn("conversation:s-p-0 s-flex s-gap-2", className)}
+        {...props}
+      >
+        <Avatar
+          className="@sm:s-hidden"
+          name={name}
+          visual={avatarUrl}
+          busy={isBusy}
+          disabled={isDisabled}
+          isRounded={type === "user"}
+          size="xs"
+        />
+        <Avatar
+          className="s-hidden @sm:s-flex"
+          name={name}
+          visual={avatarUrl}
+          busy={isBusy}
+          disabled={isDisabled}
+          isRounded={type === "user"}
+          size="sm"
+        />
+      </div>
+    );
+  }
+);
+
+ConversationMessageAvatar.displayName = "ConversationMessageAvatar";
+
+interface ConversationMessageTitleProps extends React.HTMLAttributes<HTMLDivElement> {
+  name?: string;
+  timestamp?: string;
+  infoChip?: React.ReactNode;
+  completionStatus?: React.ReactNode;
+  renderName: (name: string | null) => React.ReactNode;
+}
+
+export const ConversationMessageTitle = React.forwardRef<
+  HTMLDivElement,
+  ConversationMessageTitleProps
+>(
+  (
+    {
+      name = "",
+      timestamp,
+      infoChip,
+      completionStatus,
+      renderName,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "s-inline-flex s-flex-1 s-items-center s-justify-between s-gap-0.5",
+          className
+        )}
+        {...props}
+      >
+        <div className="s-inline-flex s-items-center s-gap-2 s-text-foreground dark:s-text-foreground-night">
+          <span className="s-heading-sm">{renderName(name)}</span>
+          <span className="s-heading-xs s-text-muted-foreground dark:s-text-muted-foreground-night">
+            {timestamp}
+          </span>
+          {infoChip && (
+            <div className="s-inline-flex s-items-center">{infoChip}</div>
+          )}
+        </div>
+        <div className="s-ml-1 s-inline-flex s-items-center">
+          {completionStatus ?? null}
+        </div>
+      </div>
+    );
+  }
+);
+
+ConversationMessageTitle.displayName = "ConversationMessageTitle";

package/src/components/index.ts

@@ -45,13 +45,16 @@ export {
   ContentMessageInline,
 } from "./ContentMessage";
 export { ContextItem } from "./ContextItem";
-export type { ConversationMessageAction } from "./ConversationMessage";
 export {
   ConversationContainer,
   ConversationMessage,
-  ConversationMessageContent,
-  ConversationMessageHeader,
 } from "./ConversationMessage";
+export {
+  ConversationMessageAvatar,
+  ConversationMessageContainer,
+  ConversationMessageContent,
+  ConversationMessageTitle,
+} from "./ConversationMessages";
 export { Counter } from "./Counter";
 export type { DataTableMoreButtonProps, MenuItem } from "./DataTable";
 export {