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

package/src/components/WindowUtility.tsx

@@ -2,25 +2,30 @@ import { useEffect, useState } from "react";
 
 // Define breakpoints
 export const breakpoints = {
-  xxs: 0,
-  xs: 512,
+  xs: 0,
   sm: 640,
   md: 768,
   lg: 1024,
   xl: 1280,
-  "2xl": 1536,
+  xxl: 1536,
 };
 
 // Helper function to determine active breakpoint
 function getActiveBreakpoint(width: number): keyof typeof breakpoints {
-  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;
-    }
+  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";
   }
   return "xs";
 }
@@ -57,3 +62,5 @@ export function useWindowSize() {
 
   return windowSize;
 }
+
+export default useWindowSize;

package/src/components/markdown/CodeBlock.tsx

@@ -34,7 +34,6 @@ type CodeBlockProps = {
   inline?: boolean;
   variant?: "surface";
   wrapLongLines?: boolean;
-  showLineNumber?: boolean;
 };
 
 export function CodeBlock({
@@ -43,7 +42,6 @@ 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";
@@ -65,13 +63,6 @@ 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],
@@ -157,7 +148,6 @@ 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/index.ts

@@ -1,5 +1,4 @@
 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="2xl" />
+      <Avatar size="xxl" />
     </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="2xl" name="Omar Doe" />
+      <Avatar size="xxl" 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="2xl" emoji="👕" backgroundColor="s-bg-blue-200" />
+      <Avatar size="xxl" 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="2xl" icon={StarStrokeIcon} />
+      <Avatar size="xxl" icon={StarStrokeIcon} />
     </div>
     <div className="heading-2xl">Tools example</div>
     <div>Remote MCP Servers</div>

package/src/stories/ConversationMessage.stories.tsx

@@ -2,12 +2,10 @@ import type { Meta } from "@storybook/react";
 import React from "react";
 
 import {
-  Avatar,
   Button,
   Citation,
   CitationIcons,
   CitationTitle,
-  ClockIcon,
   ConversationContainer,
   ConversationMessage,
   GithubIcon,
@@ -34,7 +32,6 @@ export const ConversationExample = () => {
             type="user"
             name="Edouard"
             pictureUrl="https://dust.tt/static/droidavatar/Droid_Lime_1.jpg"
-            timestamp="14:30"
             citations={[
               <Citation href="https://www.google.com">
                 <CitationIcons>
@@ -43,9 +40,6 @@ export const ConversationExample = () => {
                 <CitationTitle>Title</CitationTitle>
               </Citation>,
             ]}
-            infoChip={
-              <Avatar size="xs" visual={<ClockIcon className="h-4 w-4" />} />
-            }
           >
             I only want to show citations if a citations reactnode has been
             passed

package/src/stories/MultiPageDialog.stories.tsx

@@ -912,7 +912,7 @@ export const ActionValidation: Story = {
         content: (
           <div className="s-space-y-6 s-pt-4">
             <div>
-              <p className="s-mb-6 s-text-sm s-text-muted-foreground dark:s-text-muted-foreground-night">
+              <p className="s-mb-6 s-text-sm s-text-muted-foreground">
                 Allow{" "}
                 <span className="s-font-semibold">@Marketing Assistant</span> to
                 use the tool <span className="s-font-semibold">Send Email</span>{" "}

package/src/stories/Spinner.stories.tsx

@@ -89,13 +89,13 @@ export const SpinnerExample = () => {
       </div>
       <div className="s-flex s-gap-4">
         <div className="s-p-20">
-          <Spinner variant="color" size="2xl" />
+          <Spinner variant="color" size="xxl" />
         </div>
         <div className="s-p-20">
-          <Spinner variant="mono" size="2xl" />
+          <Spinner variant="mono" size="xxl" />
         </div>
         <div className="s-p-20">
-          <Spinner variant="rose300" size="2xl" />
+          <Spinner variant="rose300" size="xxl" />
         </div>
       </div>
     </div>

package/src/stories/ToolCard.stories.tsx

@@ -13,55 +13,41 @@ const meta: Meta<typeof ToolCard> = {
 export default meta;
 
 export const Examples = () => (
-  <div className="s-flex s-gap-3">
-    {/* Not added - default md size */}
-    <div className="s-w-80">
-      <ToolCard
-        icon={BookOpenIcon}
-        cardContainerClassName="s-h-36"
-        label="Image Generation"
-        description="Agent can generate images (GPT Image 1)."
-        isSelected
-        canAdd
-        onClick={() => console.log("Add Image Generation")}
-        toolInfo={{
-          label: "Click here",
-          onClick: () => console.log("Click here"),
-        }}
-      />
-    </div>
+  <div className="s-grid s-grid-cols-2 s-gap-3">
+    {/* Not added */}
+    <ToolCard
+      icon={BookOpenIcon}
+      label="Image Generation"
+      description="Agent can generate images (GPT Image 1)."
+      isSelected={false}
+      canAdd={true}
+      onClick={() => console.log("Add Image Generation")}
+    />
 
-    {/* Added - xl size */}
-    <div className="s-w-80">
-      <ToolCard
-        cardContainerClassName="s-h-36"
-        icon={CommandLineIcon}
-        label="Reasoning"
-        description={
-          <>
-            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.{" "}
-            <Hoverable
-              href="https://example.com/help"
-              target="_blank"
-              rel="noopener noreferrer"
-              variant="primary"
-            >
-              the docs
-            </Hoverable>
-          </>
-        }
-        isSelected
-        canAdd={false}
-        toolInfo={{
-          label: "Click here",
-          onClick: () => console.log("Click here"),
-        }}
-      />
-    </div>
+    {/* Added */}
+    <ToolCard
+      icon={CommandLineIcon}
+      label="Reasoning"
+      description={
+        <>
+          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.{" "}
+          <Hoverable
+            href="https://example.com/help"
+            target="_blank"
+            rel="noopener noreferrer"
+            variant="primary"
+          >
+            the docs
+          </Hoverable>
+        </>
+      }
+      isSelected={true}
+      canAdd={false}
+    />
   </div>
 );

package/dist/esm/stories/CodeBlock.stories.d.ts

@@ -1,17 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { CodeBlock } from "../index_with_tw_base";
-declare const meta: Meta<typeof CodeBlock>;
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const InlineCode: Story;
-export declare const InlineCodeWithVariant: Story;
-export declare const TypescriptBlock: Story;
-export declare const ReactTSXBlock: Story;
-export declare const CSSBlock: Story;
-export declare const JSONBlock: Story;
-export declare const BashBlock: Story;
-export declare const SQLBlock: Story;
-export declare const LongCodeWithWrapping: Story;
-export declare const LongCodeWithoutWrapping: Story;
-export declare const TypescriptWithLineNumbers: Story;
-//# sourceMappingURL=CodeBlock.stories.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"CodeBlock.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/CodeBlock.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAGvD,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAElD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CA2ChC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAGnC,eAAO,MAAM,UAAU,EAAE,KAKxB,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,KAMnC,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAsB7B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KA+C3B,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAmCtB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KA+BvB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KA2BvB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KA+BtB,CAAC;AAGF,eAAO,MAAM,oBAAoB,EAAE,KAuBlC,CAAC;AAGF,eAAO,MAAM,uBAAuB,EAAE,KAcrC,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,KA2CvC,CAAC"}

package/dist/esm/stories/CodeBlock.stories.js

@@ -1,125 +0,0 @@
-import React from "react";
-import { CodeBlock } from "../index_with_tw_base";
-var meta = {
-    title: "Components/CodeBlock",
-    component: CodeBlock,
-    argTypes: {
-        children: {
-            description: "The code content to display",
-            control: { type: "text" },
-        },
-        className: {
-            description: "CSS class name, can include language specification (e.g., 'language-javascript')",
-            control: { type: "text" },
-        },
-        inline: {
-            description: "Whether to render as inline code (single line) or block code",
-            control: { type: "boolean" },
-            defaultValue: false,
-        },
-        variant: {
-            description: "Visual variant of the code block",
-            options: ["surface"],
-            control: { type: "select" },
-            defaultValue: "surface",
-        },
-        wrapLongLines: {
-            description: "Whether to wrap long lines in block code",
-            control: { type: "boolean" },
-            defaultValue: false,
-        },
-        showLineNumber: {
-            description: "Whether to show line numbers on the left side of the code",
-            control: { type: "boolean" },
-            defaultValue: false,
-        },
-    },
-    decorators: [
-        function (Story) { return (React.createElement("div", { className: "s-bg-background s-p-4 dark:s-bg-background-night" },
-            React.createElement(Story, null))); },
-    ],
-};
-export default meta;
-// Inline code examples
-export var InlineCode = {
-    args: {
-        children: "const greeting = 'Hello, World!';",
-        inline: true,
-    },
-};
-export var InlineCodeWithVariant = {
-    args: {
-        children: "npm install @dust-tt/sparkle",
-        inline: true,
-        variant: "surface",
-    },
-};
-export var TypescriptBlock = {
-    args: {
-        children: "interface User {\n  id: number;\n  name: string;\n  email: string;\n  isActive: boolean;\n}\n\nconst createUser = (userData: Partial<User>): User => {\n  return {\n    id: Math.random(),\n    name: userData.name || \"Anonymous\",\n    email: userData.email || \"\",\n    isActive: userData.isActive ?? true,\n  };\n};\n\nconst newUser = createUser({ name: \"John Doe\", email: \"john@example.com\" });",
-        className: "language-typescript",
-        inline: false,
-    },
-};
-export var ReactTSXBlock = {
-    args: {
-        children: "import React, { useState, useEffect } from 'react';\nimport { Button } from '@dust-tt/sparkle';\n\ninterface CounterProps {\n  initialValue?: number;\n  step?: number;\n  onCountChange?: (count: number) => void;\n}\n\nconst Counter: React.FC<CounterProps> = ({ \n  initialValue = 0, \n  step = 1,\n  onCountChange\n}) => {\n  const [count, setCount] = useState<number>(initialValue);\n\n  useEffect(() => {\n    document.title = `Count: ${count}`;\n    onCountChange?.(count);\n  }, [count, onCountChange]);\n\n  const increment = (): void => setCount(prev => prev + step);\n  const decrement = (): void => setCount(prev => prev - step);\n  const reset = (): void => setCount(initialValue);\n\n  return (\n    <div className=\"flex items-center gap-4\">\n      <Button onClick={decrement} variant=\"outline\">\n        -\n      </Button>\n      <span className=\"text-2xl font-bold\">{count}</span>\n      <Button onClick={increment} variant=\"primary\">\n        +\n      </Button>\n      <Button onClick={reset} variant=\"ghost\">\n        Reset\n      </Button>\n    </div>\n  );\n};\n\nexport default Counter;",
-        className: "language-tsx",
-        inline: false,
-    },
-};
-export var CSSBlock = {
-    args: {
-        children: ".code-block {\n  background-color: var(--s-muted);\n  border: 1px solid var(--s-border);\n  border-radius: 0.5rem;\n  padding: 1rem;\n  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n  font-size: 0.875rem;\n  line-height: 1.5;\n  overflow-x: auto;\n}\n\n.code-block .keyword {\n  color: #8b5cf6; /* violet-500 */\n}\n\n.code-block .string {\n  color: #10b981; /* emerald-500 */\n}\n\n.code-block .comment {\n  color: #6b7280; /* gray-500 */\n  font-style: italic;\n}\n\n@media (prefers-color-scheme: dark) {\n  .code-block {\n    background-color: var(--s-muted-night);\n    border-color: var(--s-border-night);\n  }\n}",
-        className: "language-css",
-        inline: false,
-    },
-};
-export var JSONBlock = {
-    args: {
-        children: "{\n  \"name\": \"@dust-tt/sparkle\",\n  \"version\": \"1.0.0\",\n  \"description\": \"A beautiful component library for React applications\",\n  \"main\": \"dist/index.js\",\n  \"types\": \"dist/index.d.ts\",\n  \"scripts\": {\n    \"build\": \"rollup -c\",\n    \"dev\": \"rollup -c -w\",\n    \"test\": \"jest\",\n    \"lint\": \"eslint src/**/*.{ts,tsx}\"\n  },\n  \"dependencies\": {\n    \"react\": \"^18.0.0\",\n    \"react-dom\": \"^18.0.0\",\n    \"class-variance-authority\": \"^0.7.0\"\n  },\n  \"devDependencies\": {\n    \"@types/react\": \"^18.0.0\",\n    \"@types/react-dom\": \"^18.0.0\",\n    \"typescript\": \"^5.0.0\"\n  },\n  \"keywords\": [\"react\", \"components\", \"ui\", \"typescript\"],\n  \"author\": \"Dust Team\",\n  \"license\": \"MIT\"\n}",
-        className: "language-json",
-        inline: false,
-    },
-};
-export var BashBlock = {
-    args: {
-        children: "#!/bin/bash\n\n# Install dependencies\nnpm install\n\n# Build the project\nnpm run build\n\n# Run tests\nnpm test\n\n# Deploy to production\nif [ \"$ENVIRONMENT\" = \"production\" ]; then\n  echo \"Deploying to production...\"\n  npm run deploy:prod\nelse\n  echo \"Deploying to staging...\"\n  npm run deploy:staging\nfi\n\n# Clean up\nnpm run clean",
-        className: "language-bash",
-        inline: false,
-    },
-};
-export var SQLBlock = {
-    args: {
-        children: "-- Create users table\nCREATE TABLE users (\n  id SERIAL PRIMARY KEY,\n  username VARCHAR(50) UNIQUE NOT NULL,\n  email VARCHAR(100) UNIQUE NOT NULL,\n  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,\n  updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP\n);\n\n-- Insert sample data\nINSERT INTO users (username, email) VALUES\n  ('alice', 'alice@example.com'),\n  ('bob', 'bob@example.com'),\n  ('charlie', 'charlie@example.com');\n\n-- Query with joins\nSELECT \n  u.username,\n  u.email,\n  p.title as post_title,\n  p.created_at as post_date\nFROM users u\nLEFT JOIN posts p ON u.id = p.user_id\nWHERE u.created_at > '2024-01-01'\nORDER BY p.created_at DESC\nLIMIT 10;",
-        className: "language-sql",
-        inline: false,
-    },
-};
-// Long code example with line wrapping
-export var LongCodeWithWrapping = {
-    args: {
-        children: "// This is a very long line of code that demonstrates how the wrapLongLines prop works when set to true. It contains a lot of text and would normally overflow the container, but with wrapLongLines enabled, it will wrap to the next line instead of creating a horizontal scrollbar. This is particularly useful for mobile devices or narrow containers where horizontal scrolling is not desirable.\n\nfunction processVeryLongFunctionNameWithManyParameters(\n  parameterOne: string,\n  parameterTwo: number,\n  parameterThree: boolean,\n  parameterFour: object,\n  parameterFive: array,\n  parameterSix: function,\n  parameterSeven: string,\n  parameterEight: number\n): Promise<ComplexReturnType> {\n  // Implementation here\n  return new Promise((resolve, reject) => {\n    // More implementation\n  });\n}",
-        className: "language-typescript",
-        inline: false,
-        wrapLongLines: true,
-    },
-};
-// Long code example without line wrapping (default)
-export var LongCodeWithoutWrapping = {
-    args: {
-        children: "// This is a very long line of code that demonstrates how the wrapLongLines prop works when set to false (default). It contains a lot of text and will create a horizontal scrollbar when it overflows the container. This is the default behavior and is useful when you want to preserve the exact formatting of the code.\n\nfunction processVeryLongFunctionNameWithManyParameters(parameterOne: string, parameterTwo: number, parameterThree: boolean, parameterFour: object, parameterFive: array, parameterSix: function, parameterSeven: string, parameterEight: number): Promise<ComplexReturnType> {\n  // Implementation here\n  return new Promise((resolve, reject) => {\n    // More implementation\n  });\n}",
-        className: "language-typescript",
-        inline: false,
-        wrapLongLines: false,
-    },
-};
-export var TypescriptWithLineNumbers = {
-    args: {
-        children: "interface User {\n  id: number;\n  name: string;\n  email: string;\n  isActive: boolean;\n}\n\nclass UserService {\n  private users: User[] = [];\n\n  addUser(user: Omit<User, 'id'>): User {\n    const newUser: User = {\n      id: this.users.length + 1,\n      ...user\n    };\n    \n    this.users.push(newUser);\n    return newUser;\n  }\n\n  getUserById(id: number): User | undefined {\n    return this.users.find(user => user.id === id);\n  }\n\n  getAllUsers(): User[] {\n    return [...this.users];\n  }\n}\n\nconst userService = new UserService();\nconst newUser = userService.addUser({\n  name: \"John Doe\",\n  email: \"john@example.com\",\n  isActive: true\n});\n\nconsole.log(\"Created user:\", newUser);",
-        className: "language-typescript",
-        inline: false,
-        showLineNumber: true,
-    },
-};
-//# sourceMappingURL=CodeBlock.stories.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"CodeBlock.stories.js","sourceRoot":"","sources":["../../../src/stories/CodeBlock.stories.tsx"],"names":[],"mappings":"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"}