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

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/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;

package/src/components/markdown/CodeBlock.tsx

@@ -34,6 +34,7 @@ type CodeBlockProps = {
   inline?: boolean;
   variant?: "surface";
   wrapLongLines?: boolean;
+  showLineNumber?: boolean;
 };
 
 export function CodeBlock({
@@ -42,6 +43,7 @@ export function CodeBlock({
   inline,
   variant = "surface",
   wrapLongLines = false,
+  showLineNumber = false,
 }: CodeBlockProps): JSX.Element {
   const match = /language-(\w+)/.exec(className || "");
   const language = match ? match[1] : "text";
@@ -63,6 +65,13 @@ export function CodeBlock({
       backgroundColor: "transparent",
       fontSize: "0.875rem",
     },
+    "hljs-ln": {
+      color: "var(--s-muted-foreground)",
+      fontSize: "0.75rem",
+      paddingRight: "1em",
+      textAlign: "right",
+      userSelect: "none",
+    },
     "hljs-keyword": {
       // function, const, let, if, return
       color: violet[500],
@@ -148,6 +157,7 @@ export function CodeBlock({
       <div className="s-text-foreground dark:s-text-foreground-night">
         <SyntaxHighlighter
           wrapLongLines={wrapLongLines}
+          showLineNumbers={showLineNumber}
           style={codeStyle}
           language={languageToUse}
           PreTag="div"

package/src/icons/app/Mic.tsx

@@ -0,0 +1,18 @@
+import type { SVGProps } from "react";
+import * as React from "react";
+const SvgMic = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="none"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      d="M12 1a5 5 0 0 1 5 5v4a5 5 0 0 1-10 0V6a5 5 0 0 1 5-5ZM3.055 11H5.07a7.002 7.002 0 0 0 13.858 0h2.016A9.004 9.004 0 0 1 13 18.945V23h-2v-4.055A9.004 9.004 0 0 1 3.055 11Z"
+    />
+  </svg>
+);
+export default SvgMic;

package/src/icons/app/index.ts

@@ -93,6 +93,7 @@ export { default as LogoutIcon } from "./Logout";
 export { default as MagicIcon } from "./Magic";
 export { default as MagnifyingGlassIcon } from "./MagnifyingGlass";
 export { default as MenuIcon } from "./Menu";
+export { default as MicIcon } from "./Mic";
 export { default as MoonIcon } from "./Moon";
 export { default as MoreIcon } from "./More";
 export { default as MovingMailIcon } from "./MovingMail";

package/src/icons/src/app/mic.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.9998 1C14.7612 1 16.9998 3.23858 16.9998 6V10C16.9998 12.7614 14.7612 15 11.9998 15C9.23833 15 6.99976 12.7614 6.99976 10V6C6.99976 3.23858 9.23833 1 11.9998 1ZM3.05469 11H5.07065C5.55588 14.3923 8.47329 17 11.9998 17C15.5262 17 18.4436 14.3923 18.9289 11H20.9448C20.4837 15.1716 17.1714 18.4839 12.9998 18.9451V23H10.9998V18.9451C6.82814 18.4839 3.51584 15.1716 3.05469 11Z" fill="#111418"/>
+</svg>

package/src/index.ts

@@ -1,4 +1,5 @@
 export * from "./components";
+export * from "./components/WindowUtility";
 export { SparkleContext } from "./context";
 export * from "./hooks";
 export * from "./icons";

package/src/stories/Avatar.stories.tsx

@@ -44,7 +44,7 @@ export const AvatarExample = () => (
       <Avatar size="md" />
       <Avatar size="lg" />
       <Avatar size="xl" />
-      <Avatar size="xxl" />
+      <Avatar size="2xl" />
     </div>
     <div>With name</div>
     <div className="s-flex s-gap-4">
@@ -53,7 +53,7 @@ export const AvatarExample = () => (
       <Avatar size="md" name="Aria Doe" />
       <Avatar size="lg" name="Omar Doe" />
       <Avatar size="xl" name="Omar Doe" />
-      <Avatar size="xxl" name="Omar Doe" />
+      <Avatar size="2xl" name="Omar Doe" />
     </div>
     <div>With emoji url</div>
     <div className="s-flex s-gap-4">
@@ -69,7 +69,7 @@ export const AvatarExample = () => (
       <Avatar size="md" emoji="😂" backgroundColor="s-bg-info-200" />
       <Avatar size="lg" emoji="🧑‍🚀" backgroundColor="s-bg-gray-200" />
       <Avatar size="xl" emoji="👕" backgroundColor="s-bg-blue-200" />
-      <Avatar size="xxl" emoji="👕" backgroundColor="s-bg-blue-200" />
+      <Avatar size="2xl" emoji="👕" backgroundColor="s-bg-blue-200" />
     </div>
     <div className="s-flex s-gap-4">
       <Avatar size="sm" name="Eleanor Wright" />
@@ -126,7 +126,7 @@ export const AvatarExample = () => (
       <Avatar size="lg" icon={ActionFlagIcon} />
       <Avatar size="lg" icon={SlackLogo} hexBgColor="#421D51" />
       <Avatar size="xl" icon={ActionShirtIcon} />
-      <Avatar size="xxl" icon={StarStrokeIcon} />
+      <Avatar size="2xl" icon={StarStrokeIcon} />
     </div>
     <div className="heading-2xl">Tools example</div>
     <div>Remote MCP Servers</div>