@dust-tt/sparkle 0.2.648 → 0.2.650

package/src/components/ConversationMessage.tsx

@@ -36,6 +36,7 @@ interface ConversationMessageProps
   isDisabled?: boolean;
   name?: string;
   timestamp?: string;
+  completionStatus?: string;
   pictureUrl?: string | React.ReactNode | null;
   renderName?: (name: string | null) => React.ReactNode;
   infoChip?: React.ReactNode;
@@ -50,7 +51,7 @@ const messageVariants = cva("s-flex s-w-full s-flex-col s-rounded-2xl", {
       user: "s-bg-muted-background dark:s-bg-muted-background-night s-px-5 s-py-4 s-gap-2",
       agent: "s-w-full s-gap-3",
       agentAsTool:
-        "s-w-full s-gap-3 s-border s-border-border dark:s-border-border-night s-rounded-2xl s-px-5 s-py-5",
+        "s-w-full s-gap-5 s-border s-border-border dark:s-border-border-night s-rounded-2xl s-px-5 s-py-5",
     },
   },
   defaultVariants: {
@@ -87,6 +88,7 @@ export const ConversationMessage = React.forwardRef<
       isDisabled = false,
       name,
       timestamp,
+      completionStatus,
       pictureUrl,
       renderName = (name) => <span>{name}</span>,
       infoChip,
@@ -103,6 +105,7 @@ export const ConversationMessage = React.forwardRef<
             avatarUrl={pictureUrl}
             name={name}
             timestamp={timestamp}
+            completionStatus={completionStatus}
             isBusy={avatarBusy}
             isDisabled={isDisabled}
             renderName={renderName}
@@ -171,6 +174,7 @@ interface ConversationMessageHeaderProps
   isDisabled?: boolean;
   name?: string;
   timestamp?: string;
+  completionStatus?: string;
   infoChip?: React.ReactNode;
   renderName: (name: string | null) => React.ReactNode;
   type: ConversationMessageType;
@@ -189,6 +193,7 @@ export const ConversationMessageHeader = React.forwardRef<
       timestamp,
       infoChip,
       type,
+      completionStatus,
       renderName,
       className,
       ...props
@@ -227,17 +232,22 @@ export const ConversationMessageHeader = React.forwardRef<
         <div className="s-flex s-w-full s-flex-row s-justify-between s-gap-0.5">
           <div
             className={cn(
-              "s-heading-sm @sm:s-text-base",
+              "s-heading-xs @sm:s-heading-sm",
               "s-text-foreground dark:s-text-foreground-night",
               "s-flex s-flex-row s-items-center s-gap-2"
             )}
           >
             {renderName(name)}
             {infoChip}
-            <span className="s-text-xs s-font-normal s-text-muted-foreground dark:s-text-muted-foreground-night">
+            <span className="s-text-xs s-text-muted-foreground dark:s-text-muted-foreground-night">
               {timestamp}
             </span>
           </div>
+          {completionStatus && (
+            <div className="s-text-xs s-text-muted-foreground dark:s-text-muted-foreground-night">
+              {completionStatus}
+            </div>
+          )}
         </div>
       </div>
     );

package/src/components/Dialog.tsx

@@ -80,7 +80,6 @@ interface DialogContentProps
   isAlertDialog?: boolean;
   preventAutoFocusOnClose?: boolean;
   mountPortalContainer?: HTMLElement;
-  dataAnalytics?: string;
 }
 
 const DialogContent = React.forwardRef<
@@ -98,7 +97,6 @@ const DialogContent = React.forwardRef<
       preventAutoFocusOnClose = true,
       onCloseAutoFocus,
       mountPortalContainer,
-      dataAnalytics,
       ...props
     },
     ref
@@ -126,7 +124,6 @@ const DialogContent = React.forwardRef<
                 : props.onInteractOutside
             }
             onCloseAutoFocus={handleCloseAutoFocus}
-            data-analytics={dataAnalytics}
             {...props}
           >
             {children}

package/src/components/EmptyCTA.tsx

@@ -42,24 +42,14 @@ EmptyCTA.displayName = "EmptyCTA";
 interface EmptyCTAButtonProps extends RegularButtonProps {
   icon: React.ComponentType;
   label: string;
-  dataAnalytics?: string;
 }
 
 const EmptyCTAButton: React.FC<EmptyCTAButtonProps> = ({
   icon,
   label,
   variant = "highlight",
-  dataAnalytics,
   ...props
-}) => (
-  <Button
-    icon={icon}
-    label={label}
-    variant={variant}
-    dataAnalytics={dataAnalytics}
-    {...props}
-  />
-);
+}) => <Button icon={icon} label={label} variant={variant} {...props} />;
 
 EmptyCTAButton.displayName = "EmptyCTAButton";
 

package/src/components/LinkWrapper.tsx

@@ -10,36 +10,29 @@ export interface LinkWrapperProps {
   shallow?: boolean;
   target?: string;
   prefetch?: boolean;
-  dataAnalytics?: string;
 }
 
 export const LinkWrapper = React.forwardRef<
   HTMLAnchorElement,
   LinkWrapperProps
->(
-  (
-    { children, href, rel, replace, shallow, target, prefetch, dataAnalytics },
-    ref
-  ) => {
-    const { components } = React.useContext(SparkleContext);
+>(({ children, href, rel, replace, shallow, target, prefetch }, ref) => {
+  const { components } = React.useContext(SparkleContext);
 
-    if (href) {
-      return (
-        <components.link
-          ref={ref}
-          href={href}
-          target={target}
-          rel={rel}
-          replace={replace}
-          shallow={shallow}
-          prefetch={prefetch}
-          data-analytics={dataAnalytics}
-        >
-          {children}
-        </components.link>
-      );
-    }
-
-    return children;
+  if (href) {
+    return (
+      <components.link
+        ref={ref}
+        href={href}
+        target={target}
+        rel={rel}
+        replace={replace}
+        shallow={shallow}
+        prefetch={prefetch}
+      >
+        {children}
+      </components.link>
+    );
   }
-);
+
+  return children;
+});

package/src/components/MultiPageDialog.tsx

@@ -99,7 +99,6 @@ interface MultiPageDialogProps {
   footerContent?: React.ReactNode;
   addFooterSeparator?: boolean;
   hideCloseButton?: boolean;
-  dataAnalytics?: string;
 }
 
 interface MultiPageDialogContentProps extends MultiPageDialogProps {
@@ -130,7 +129,6 @@ const MultiPageDialogContent = React.forwardRef<
       rightButton,
       footerContent,
       hideCloseButton,
-      dataAnalytics,
       ...props
     },
     ref
@@ -190,7 +188,6 @@ const MultiPageDialogContent = React.forwardRef<
         isAlertDialog={isAlertDialog}
         preventAutoFocusOnClose={preventAutoFocusOnClose}
         className={className}
-        dataAnalytics={dataAnalytics}
         {...props}
       >
         <div className={cn(multiPageDialogLayoutVariants())}>

package/src/components/NavigationList.tsx

@@ -71,7 +71,6 @@ interface NavigationListItemProps
   icon?: React.ComponentType;
   moreMenu?: React.ReactNode;
   status?: "idle" | "unread" | "blocked";
-  dataAnalytics?: string;
 }
 
 const NavigationListItem = React.forwardRef<
@@ -91,7 +90,6 @@ const NavigationListItem = React.forwardRef<
       shallow,
       moreMenu,
       status = "idle",
-      dataAnalytics,
       ...props
     },
     ref
@@ -131,7 +129,6 @@ const NavigationListItem = React.forwardRef<
           rel={rel}
           replace={replace}
           shallow={shallow}
-          dataAnalytics={dataAnalytics}
         >
           <div
             className={cn(

package/src/components/PriceTable.tsx

@@ -14,7 +14,6 @@ interface PriceTableProps {
   className?: string;
   children: ReactNode;
   magnified?: boolean;
-  dataAnalytics?: string;
 }
 
 const colorTable = {
@@ -46,7 +45,6 @@ export function PriceTable({
   priceLabel = "",
   className = "",
   magnified = true,
-  dataAnalytics,
   children, // Use children instead of tableItems
 }: PriceTableProps) {
   // Pass size prop to all PriceTable.Item children
@@ -75,7 +73,6 @@ export function PriceTable({
         colorTable[color],
         className
       )}
-      data-analytics={dataAnalytics}
     >
       <div
         className={classNames(

package/src/components/Sheet.tsx

@@ -89,7 +89,6 @@ interface SheetContentProps
   side?: SheetSideType;
   preventAutoFocusOnClose?: boolean;
   preventAutoFocusOnOpen?: boolean;
-  dataAnalytics?: string;
 }
 
 const SheetContent = React.forwardRef<
@@ -107,7 +106,6 @@ const SheetContent = React.forwardRef<
       preventAutoFocusOnOpen = true,
       onCloseAutoFocus,
       onOpenAutoFocus,
-      dataAnalytics,
       ...props
     },
     ref
@@ -162,7 +160,6 @@ const SheetContent = React.forwardRef<
             onCloseAutoFocus={handleCloseAutoFocus}
             onOpenAutoFocus={handleOpenAutoFocus}
             onKeyDownCapture={onKeyDownCapture}
-            data-analytics={dataAnalytics}
             {...props}
           >
             {children}

package/src/components/Tabs.tsx

@@ -52,7 +52,6 @@ const TabsTrigger = React.forwardRef<
       >
     > & {
       isLoading?: boolean;
-      dataAnalytics?: string;
     } & Omit<LinkWrapperProps, "children" | "className">
 >(
   (
@@ -70,7 +69,6 @@ const TabsTrigger = React.forwardRef<
       variant = "ghost",
       isCounter = false,
       counterValue,
-      dataAnalytics,
       ...props
     },
     ref
@@ -97,7 +95,6 @@ const TabsTrigger = React.forwardRef<
           shallow={shallow}
           isCounter={isCounter}
           counterValue={counterValue}
-          dataAnalytics={dataAnalytics}
           className={cn(
             "s-relative",
             "after:s-absolute after:s-bottom-[-9px] after:s-left-1/2 after:s-h-[2px] after:s-w-full after:s--translate-x-1/2",

package/src/icons/app/Atom.tsx

@@ -10,7 +10,7 @@ const SvgAtom = (props: SVGProps<SVGSVGElement>) => (
     {...props}
   >
     <path
-      fill="#000"
+      fill="currentColor"
       fillRule="evenodd"
       d="M14.974 2.284c.831-.248 1.733-.268 2.526.19.793.458 1.227 1.249 1.428 2.093.2.841.196 1.827.047 2.866-.029.196-.065.396-.104.599.196.068.387.137.571.21.975.39 1.83.88 2.46 1.474C22.531 10.313 23 11.084 23 12c0 .915-.468 1.687-1.099 2.283-.628.594-1.484 1.084-2.459 1.473-.184.074-.375.143-.57.211.038.204.074.404.103.6.15 1.039.153 2.025-.047 2.866-.201.844-.635 1.635-1.428 2.093-.793.458-1.695.438-2.526.19-.83-.247-1.681-.743-2.506-1.392a12.997 12.997 0 0 1-.468-.389c-.157.136-.312.266-.468.389-.825.649-1.677 1.145-2.506 1.392-.831.248-1.733.268-2.526-.19-.793-.458-1.227-1.249-1.428-2.093-.2-.841-.196-1.827-.047-2.866.029-.196.064-.396.103-.6a13.01 13.01 0 0 1-.57-.21c-.975-.39-1.83-.88-2.46-1.474C1.469 13.687 1 12.915 1 12c0-.916.468-1.687 1.099-2.284.628-.594 1.484-1.083 2.459-1.473.184-.074.374-.143.57-.211-.04-.203-.074-.403-.103-.599-.15-1.039-.153-2.025.047-2.866.201-.844.635-1.635 1.428-2.093.793-.458 1.695-.438 2.526-.19.83.247 1.681.743 2.506 1.392.156.123.312.253.468.388.156-.135.312-.265.468-.388.825-.649 1.677-1.145 2.506-1.392ZM7.06 16.502a10.7 10.7 0 0 0-.056.35c-.128.89-.11 1.605.013 2.118.121.51.319.73.482.825.163.094.452.155.955.005.506-.15 1.134-.492 1.84-1.049.092-.07.182-.146.274-.223a21.574 21.574 0 0 1-1.368-1.683 21.558 21.558 0 0 1-2.14-.343Zm9.878 0c-.677.145-1.394.26-2.141.343a21.577 21.577 0 0 1-1.368 1.683c.092.077.183.152.274.224.707.556 1.335.898 1.84 1.048.504.15.793.089.956-.006.163-.094.36-.314.482-.824.123-.513.141-1.229.013-2.119a10.715 10.715 0 0 0-.056-.35ZM12 17l-.114-.002.113.127.114-.127L12 17Zm0-8c-.582 0-1.15.022-1.698.061A23.841 23.841 0 0 0 8.605 12a23.888 23.888 0 0 0 1.697 2.939 23.855 23.855 0 0 0 3.395 0 23.915 23.915 0 0 0 1.697-2.94 23.902 23.902 0 0 0-1.697-2.937A23.853 23.853 0 0 0 12 9Zm4.33 5.5c-.019.033-.04.065-.058.098l.168-.035-.054-.163c-.02.033-.037.067-.056.1Zm-8.77.063.168.034-.058-.097-.057-.1-.053.163Zm10.808-4.59c-.212.66-.47 1.338-.772 2.027.301.688.56 1.366.772 2.025.113-.041.224-.082.331-.125.835-.334 1.445-.708 1.828-1.07.381-.36.473-.642.473-.83 0-.19-.092-.47-.473-.83-.383-.363-.993-.737-1.828-1.07a10.657 10.657 0 0 0-.33-.127Zm-12.737 0c-.113.041-.223.083-.33.126-.835.334-1.445.708-1.828 1.07-.381.36-.473.642-.473.83 0 .19.092.47.473.83.383.363.993.737 1.828 1.071.107.043.217.084.33.125.212-.659.471-1.337.772-2.025a21.546 21.546 0 0 1-.772-2.027Zm1.929-.537.053.162.057-.098.058-.098-.168.034Zm8.77.064.056.098.053-.162-.168-.035.06.099ZM8.455 4.2c-.503-.15-.792-.089-.955.006-.163.094-.36.314-.482.824-.123.513-.141 1.229-.013 2.119.016.114.035.23.056.349a21.543 21.543 0 0 1 2.14-.345c.446-.605.904-1.17 1.368-1.683-.091-.077-.183-.15-.273-.221-.707-.557-1.335-.898-1.84-1.05Zm8.045.006c-.163-.095-.452-.156-.955-.006-.506.15-1.134.492-1.84 1.049-.091.07-.184.144-.275.221a21.56 21.56 0 0 1 1.368 1.683c.747.083 1.464.199 2.14.345.021-.119.04-.235.057-.349.128-.89.11-1.606-.013-2.12-.121-.51-.319-.73-.482-.823ZM11.887 7 12 7h.112A17.69 17.69 0 0 0 12 6.874L11.887 7Z"
       clipRule="evenodd"

package/src/stories/ConversationMessage.stories.tsx

@@ -202,6 +202,7 @@ export const ConversationHandoffExample = () => {
           <ConversationMessage
             type="agent"
             name="@soupinou"
+            timestamp="17:10"
             pictureUrl="https://avatars.githubusercontent.com/u/138893015?&v=4"
             buttons={[
               <Button
@@ -228,11 +229,12 @@ export const ConversationHandoffExample = () => {
             type="agentAsTool"
             name="Deep Dive"
             renderName={(name) => (
-              <span className="s-inline-flex s-items-center s-text-faint dark:s-text-faint-night">
+              <span className="s-inline-flex s-items-center s-text-muted-foreground dark:s-text-muted-foreground-night">
                 <Icon visual={AtomIcon} size="sm" />
                 <span className="s-ml-1">{name}</span>
               </span>
             )}
+            completionStatus="Completed in 9 min 30 sec"
             citations={[
               <Citation href="https://www.google.com">
                 <CitationIcons>