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

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/Input.tsx

@@ -42,7 +42,9 @@ const stateVariantStyles: Record<InputStateType, string> = {
   disabled: cn(
     "disabled:s-cursor-not-allowed",
     "disabled:s-text-muted-foreground dark:disabled:s-text-muted-foreground-night",
-    "disabled:s-border-border dark:disabled:s-border-border-night"
+    "disabled:s-border-border dark:disabled:s-border-border-night",
+    // Use muted background only when disabled
+    "s-bg-muted-background dark:s-bg-muted-background-night"
   ),
   error: cn(
     "s-border-border-warning/40 dark:s-border-border-warning-night/60",
@@ -66,7 +68,8 @@ const inputStyleClasses = cva(
   cn(
     "dark:s-text-primary-50",
     "s-text-sm s-rounded-xl s-flex s-h-9 s-w-full s-px-3 s-py-1.5 ",
-    "s-bg-muted-background dark:s-bg-muted-background-night",
+    // Default to plain background; disabled state will override to muted
+    "s-bg-background dark:s-bg-background-night",
     "s-border focus-visible:s-ring",
     "file:s-border-0 file:s-bg-transparent file:s-text-sm file:s-font-medium file:s-text-foreground",
     "placeholder:s-text-muted-foreground placeholder:s-italic dark:placeholder:s-text-muted-foreground-night"

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]",

package/src/components/Spinner.tsx

@@ -13,7 +13,7 @@ import animLightLG from "@sparkle/lottie/spinnerLightLG";
 import animLightXS from "@sparkle/lottie/spinnerLightXS";
 
 type SpinnerSizeType = (typeof SPINNER_SIZES)[number];
-const SPINNER_SIZES = ["xs", "sm", "md", "lg", "xl", "xxl"] as const;
+const SPINNER_SIZES = ["xs", "sm", "md", "lg", "xl", "2xl"] as const;
 
 type SpinnerVariant =
   | "mono"
@@ -43,7 +43,7 @@ const pxSizeClasses: Record<SpinnerSizeType, string> = {
   md: "24",
   lg: "32",
   xl: "128",
-  xxl: "192",
+  "2xl": "192",
 };
 
 type LottieColorType = [number, number, number, number];
@@ -111,7 +111,7 @@ const Spinner: React.FC<SpinnerProps> = ({ size = "md", variant = "mono" }) => {
         anim = animLightXS;
         break;
       case "xl":
-      case "xxl":
+      case "2xl":
         anim = animLightLG;
         break;
       default:
@@ -139,7 +139,7 @@ const Spinner: React.FC<SpinnerProps> = ({ size = "md", variant = "mono" }) => {
         anim = animColorXS;
         break;
       case "xl":
-      case "xxl":
+      case "2xl":
         anim = animColorLG;
         break;
       default:
@@ -162,7 +162,7 @@ const Spinner: React.FC<SpinnerProps> = ({ size = "md", variant = "mono" }) => {
         anim = animLightXS;
         break;
       case "xl":
-      case "xxl":
+      case "2xl":
         anim = animLightLG;
         break;
       default:
@@ -185,7 +185,7 @@ const Spinner: React.FC<SpinnerProps> = ({ size = "md", variant = "mono" }) => {
         anim = animDarkXS;
         break;
       case "xl":
-      case "xxl":
+      case "2xl":
         anim = animDarkLG;
         break;
       default:
@@ -210,7 +210,7 @@ const Spinner: React.FC<SpinnerProps> = ({ size = "md", variant = "mono" }) => {
       darkAnim = animDarkXS;
       break;
     case "xl":
-    case "xxl":
+    case "2xl":
       lightAnim = animLightLG;
       darkAnim = animDarkLG;
       break;

package/src/components/TextArea.tsx

@@ -20,7 +20,8 @@ const textAreaVariants = cva(
   cn(
     "s-flex s-w-full s-px-3 s-py-2 s-text-sm",
     "s-text-foreground dark:s-text-foreground-night",
-    "s-bg-muted-background dark:s-bg-muted-background-night",
+    // Default to plain background; disabled variant will set muted background
+    "s-bg-background dark:s-bg-background-night",
     "s-ring-offset-background",
     "s-border s-rounded-xl s-transition s-duration-100 focus-visible:s-outline-none",
     "focus-visible:s-border-border dark:focus-visible:s-border-border-night focus-visible:s-ring"
@@ -52,7 +53,9 @@ const textAreaVariants = cva(
       disabled: {
         true: cn(
           "disabled:s-cursor-not-allowed",
-          "disabled:s-text-muted-foreground dark:disabled:s-text-muted-foreground-night"
+          "disabled:s-text-muted-foreground dark:disabled:s-text-muted-foreground-night",
+          // Use muted background only when disabled
+          "s-bg-muted-background dark:s-bg-muted-background-night"
         ),
         false: "",
       },
@@ -117,8 +120,8 @@ const ReadOnlyTextArea = ({ content }: { content: string | null }) => {
       isDisplay
       className={cn(
         "s-copy-sm s-h-full s-min-h-60 s-w-full s-min-w-0 s-rounded-xl",
-        "s-resize-none s-border-border s-bg-muted-background",
-        "dark:s-border-border-night dark:s-bg-muted-background-night"
+        "s-resize-none s-border-border",
+        "dark:s-border-border-night"
       )}
       defaultValue={content ?? ""}
     />

package/src/components/ToolCard.tsx

@@ -15,10 +15,13 @@ export interface ToolCardProps {
   isSelected: boolean;
   canAdd: boolean;
   cantAddReason?: string;
+  toolInfo?: { label: string; onClick: () => void };
   onClick?: () => void;
   className?: string;
+  cardContainerClassName?: string;
   mountPortal?: boolean;
   mountPortalContainer?: HTMLElement;
+  descriptionLineClamp?: number;
 }
 
 export const ToolCard = React.forwardRef<HTMLDivElement, ToolCardProps>(
@@ -30,10 +33,13 @@ export const ToolCard = React.forwardRef<HTMLDivElement, ToolCardProps>(
       isSelected,
       canAdd,
       cantAddReason,
+      toolInfo,
       onClick,
       className,
+      cardContainerClassName,
       mountPortal,
       mountPortalContainer,
+      descriptionLineClamp = 2,
     },
     ref
   ) => {
@@ -43,44 +49,63 @@ export const ToolCard = React.forwardRef<HTMLDivElement, ToolCardProps>(
         variant={isSelected ? "secondary" : "primary"}
         onClick={onClick}
         disabled={!canAdd}
-        className={cn("s-h-24 s-p-3", className)}
+        containerClassName={cardContainerClassName}
+        className={cn("s-p-3", className)}
       >
-        <div className="s-flex s-w-full s-flex-col">
-          <div className="s-mb-2 s-flex s-items-start s-justify-between s-gap-2">
-            <div className="s-flex s-items-center s-gap-2">
-              <Avatar icon={icon} size="sm" />
-              <span className="s-text-sm s-font-medium">{label}</span>
-              {isSelected && (
-                <Chip
-                  size="xs"
-                  color="green"
-                  label="ADDED"
-                  className={cn(FADE_TRANSITION_CLASSES, "s-opacity-100")}
-                />
-              )}
-            </div>
-            {canAdd && (
-              <Button
-                size="xs"
-                variant="outline"
-                icon={PlusIcon}
-                label="Add"
-                className={cn(FADE_TRANSITION_CLASSES, "s-flex-shrink-0")}
-              />
-            )}
-            {cantAddReason && (
-              <div className="s-flex-shrink-0 s-text-xs s-italic s-text-muted-foreground dark:s-text-muted-foreground-night">
-                {cantAddReason}
+        <div className="s-flex s-h-full s-w-full s-flex-col s-justify-between">
+          <div className="s-flex s-flex-col">
+            <div className="s-mb-2 s-flex s-items-center s-justify-between s-gap-2">
+              <div className="s-flex s-items-center s-gap-2">
+                <Avatar icon={icon} size="sm" />
+                <span className="s-text-sm s-font-medium">{label}</span>
+                {isSelected && (
+                  <Chip
+                    size="xs"
+                    color="green"
+                    label="ADDED"
+                    className={cn(FADE_TRANSITION_CLASSES, "s-opacity-100")}
+                  />
+                )}
+              </div>
+              <div className="s-flex s-flex-shrink-0 s-items-center s-gap-2">
+                {canAdd && (
+                  <Button
+                    size="xs"
+                    variant="outline"
+                    icon={PlusIcon}
+                    label="Add"
+                    className={cn(FADE_TRANSITION_CLASSES, "s-flex-shrink-0")}
+                  />
+                )}
+                {cantAddReason && (
+                  <div className="s-flex-shrink-0 s-text-xs s-italic s-text-muted-foreground dark:s-text-muted-foreground-night">
+                    {cantAddReason}
+                  </div>
+                )}
               </div>
-            )}
+            </div>
+            <TruncatedText
+              className="s-text-sm s-text-muted-foreground dark:s-text-muted-foreground-night"
+              mountPortal={mountPortal}
+              mountPortalContainer={mountPortalContainer}
+              lineClamp={descriptionLineClamp}
+            >
+              {description}
+            </TruncatedText>
           </div>
-          <TruncatedText 
-            className="s-text-sm s-text-muted-foreground dark:s-text-muted-foreground-night"
-            mountPortal={mountPortal}
-            mountPortalContainer={mountPortalContainer}
-          >
-            {description}
-          </TruncatedText>
+          {toolInfo && (
+            <div>
+              <a
+                onClick={(e) => {
+                  e.stopPropagation();
+                  toolInfo.onClick();
+                }}
+                className="hover:s-underline-offset-2 dark:s-text-muted-foreground-night s-cursor-pointer s-text-sm s-font-semibold s-text-muted-foreground hover:s-text-highlight-light hover:s-underline dark:hover:s-text-highlight-light-night"
+              >
+                {toolInfo.label}
+              </a>
+            </div>
+          )}
         </div>
       </Card>
     );

package/src/components/Tooltip.tsx

@@ -20,47 +20,58 @@ interface TooltipContentProps
 const TooltipContent = React.forwardRef<
   React.ElementRef<typeof TooltipPrimitive.Content>,
   TooltipContentProps
->(({ className, sideOffset = 4, mountPortal = true, mountPortalContainer, ...props }, ref) => {
-  const content = (
-    <TooltipPrimitive.Content
-      ref={ref}
-      sideOffset={sideOffset}
-      className={classNames(
-        "s-z-50 s-max-w-sm s-overflow-hidden s-whitespace-pre-wrap s-break-words s-rounded-md s-border",
-        "s-bg-background dark:s-bg-background-night",
-        "s-text-foreground dark:s-text-foreground-night",
-        "s-border-border dark:s-border-border-night",
-        "s-px-3 s-py-1.5 s-text-sm s-shadow-md",
-        "s-animate-in s-fade-in-0 s-zoom-in-95",
-        "data-[state=closed]:s-animate-out data-[state=closed]:s-fade-out-0 data-[state=closed]:s-zoom-out-95 data-[side=bottom]:s-slide-in-from-top-2 data-[side=left]:s-slide-in-from-right-2 data-[side=right]:s-slide-in-from-left-2 data-[side=top]:s-slide-in-from-bottom-2",
-        className || ""
-      )}
-      {...props}
-    />
-  );
+>(
+  (
+    {
+      className,
+      sideOffset = 4,
+      mountPortal = true,
+      mountPortalContainer,
+      ...props
+    },
+    ref
+  ) => {
+    const content = (
+      <TooltipPrimitive.Content
+        ref={ref}
+        sideOffset={sideOffset}
+        className={classNames(
+          "s-z-50 s-max-w-sm s-overflow-hidden s-whitespace-pre-wrap s-break-words s-rounded-md s-border",
+          "s-bg-background dark:s-bg-background-night",
+          "s-text-foreground dark:s-text-foreground-night",
+          "s-border-border dark:s-border-border-night",
+          "s-px-3 s-py-1.5 s-text-sm s-shadow-md",
+          "s-animate-in s-fade-in-0 s-zoom-in-95",
+          "data-[state=closed]:s-animate-out data-[state=closed]:s-fade-out-0 data-[state=closed]:s-zoom-out-95 data-[side=bottom]:s-slide-in-from-top-2 data-[side=left]:s-slide-in-from-right-2 data-[side=right]:s-slide-in-from-left-2 data-[side=top]:s-slide-in-from-bottom-2",
+          className || ""
+        )}
+        {...props}
+      />
+    );
 
-  const [container, setContainer] = useState<Element | undefined>(
-    mountPortalContainer
-  );
+    const [container, setContainer] = useState<Element | undefined>(
+      mountPortalContainer
+    );
 
-  useEffect(() => {
-    if (mountPortal && !container) {
-      const dialogElements = document.querySelectorAll(
-        ".s-sheet[role=dialog][data-state=open]"
-      );
-      const defaultContainer = dialogElements[dialogElements.length - 1];
-      setContainer(defaultContainer);
-    }
-  }, [mountPortal, container]);
+    useEffect(() => {
+      if (mountPortal && !container) {
+        const dialogElements = document.querySelectorAll(
+          ".s-sheet[role=dialog][data-state=open]"
+        );
+        const defaultContainer = dialogElements[dialogElements.length - 1];
+        setContainer(defaultContainer);
+      }
+    }, [mountPortal, container]);
 
-  return mountPortal ? (
-    <TooltipPrimitive.Portal container={container}>
-      {content}
-    </TooltipPrimitive.Portal>
-  ) : (
-    content
-  );
-});
+    return mountPortal ? (
+      <TooltipPrimitive.Portal container={container}>
+        {content}
+      </TooltipPrimitive.Portal>
+    ) : (
+      content
+    );
+  }
+);
 
 interface TooltipProps extends TooltipContentProps {
   trigger: React.ReactNode;

package/src/components/WindowUtility.tsx

@@ -2,30 +2,25 @@ import { useEffect, useState } from "react";
 
 // Define breakpoints
 export const breakpoints = {
-  xs: 0,
+  xxs: 0,
+  xs: 512,
   sm: 640,
   md: 768,
   lg: 1024,
   xl: 1280,
-  xxl: 1536,
+  "2xl": 1536,
 };
 
 // Helper function to determine active breakpoint
 function getActiveBreakpoint(width: number): keyof typeof breakpoints {
-  if (width >= breakpoints.xxl) {
-    return "xxl";
-  }
-  if (width >= breakpoints.xl) {
-    return "xl";
-  }
-  if (width >= breakpoints.lg) {
-    return "lg";
-  }
-  if (width >= breakpoints.md) {
-    return "md";
-  }
-  if (width >= breakpoints.sm) {
-    return "sm";
+  const breakpointEntries = Object.entries(breakpoints) as [keyof typeof breakpoints, number][];
+  // Sort breakpoints from largest to smallest
+  const sortedBreakpoints = breakpointEntries.sort(([, a], [, b]) => b - a);
+  
+  for (const [breakpoint, minWidth] of sortedBreakpoints) {
+    if (width >= minWidth) {
+      return breakpoint;
+    }
   }
   return "xs";
 }
@@ -62,5 +57,3 @@ export function useWindowSize() {
 
   return windowSize;
 }
-
-export default useWindowSize;