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

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>

package/src/stories/CodeBlock.stories.tsx

@@ -0,0 +1,361 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import React from "react";
+
+import { CodeBlock } from "../index_with_tw_base";
+
+const meta: Meta<typeof CodeBlock> = {
+  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: [
+    (Story) => (
+      <div className="s-bg-background s-p-4 dark:s-bg-background-night">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Inline code examples
+export const InlineCode: Story = {
+  args: {
+    children: "const greeting = 'Hello, World!';",
+    inline: true,
+  },
+};
+
+export const InlineCodeWithVariant: Story = {
+  args: {
+    children: "npm install @dust-tt/sparkle",
+    inline: true,
+    variant: "surface",
+  },
+};
+
+export const TypescriptBlock: Story = {
+  args: {
+    children: `interface User {
+  id: number;
+  name: string;
+  email: string;
+  isActive: boolean;
+}
+
+const createUser = (userData: Partial<User>): User => {
+  return {
+    id: Math.random(),
+    name: userData.name || "Anonymous",
+    email: userData.email || "",
+    isActive: userData.isActive ?? true,
+  };
+};
+
+const newUser = createUser({ name: "John Doe", email: "john@example.com" });`,
+    className: "language-typescript",
+    inline: false,
+  },
+};
+
+export const ReactTSXBlock: Story = {
+  args: {
+    children: `import React, { useState, useEffect } from 'react';
+import { Button } from '@dust-tt/sparkle';
+
+interface CounterProps {
+  initialValue?: number;
+  step?: number;
+  onCountChange?: (count: number) => void;
+}
+
+const Counter: React.FC<CounterProps> = ({ 
+  initialValue = 0, 
+  step = 1,
+  onCountChange
+}) => {
+  const [count, setCount] = useState<number>(initialValue);
+
+  useEffect(() => {
+    document.title = \`Count: \${count}\`;
+    onCountChange?.(count);
+  }, [count, onCountChange]);
+
+  const increment = (): void => setCount(prev => prev + step);
+  const decrement = (): void => setCount(prev => prev - step);
+  const reset = (): void => setCount(initialValue);
+
+  return (
+    <div className="flex items-center gap-4">
+      <Button onClick={decrement} variant="outline">
+        -
+      </Button>
+      <span className="text-2xl font-bold">{count}</span>
+      <Button onClick={increment} variant="primary">
+        +
+      </Button>
+      <Button onClick={reset} variant="ghost">
+        Reset
+      </Button>
+    </div>
+  );
+};
+
+export default Counter;`,
+    className: "language-tsx",
+    inline: false,
+  },
+};
+
+export const CSSBlock: Story = {
+  args: {
+    children: `.code-block {
+  background-color: var(--s-muted);
+  border: 1px solid var(--s-border);
+  border-radius: 0.5rem;
+  padding: 1rem;
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  overflow-x: auto;
+}
+
+.code-block .keyword {
+  color: #8b5cf6; /* violet-500 */
+}
+
+.code-block .string {
+  color: #10b981; /* emerald-500 */
+}
+
+.code-block .comment {
+  color: #6b7280; /* gray-500 */
+  font-style: italic;
+}
+
+@media (prefers-color-scheme: dark) {
+  .code-block {
+    background-color: var(--s-muted-night);
+    border-color: var(--s-border-night);
+  }
+}`,
+    className: "language-css",
+    inline: false,
+  },
+};
+
+export const JSONBlock: Story = {
+  args: {
+    children: `{
+  "name": "@dust-tt/sparkle",
+  "version": "1.0.0",
+  "description": "A beautiful component library for React applications",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "rollup -c",
+    "dev": "rollup -c -w",
+    "test": "jest",
+    "lint": "eslint src/**/*.{ts,tsx}"
+  },
+  "dependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "class-variance-authority": "^0.7.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "typescript": "^5.0.0"
+  },
+  "keywords": ["react", "components", "ui", "typescript"],
+  "author": "Dust Team",
+  "license": "MIT"
+}`,
+    className: "language-json",
+    inline: false,
+  },
+};
+
+export const BashBlock: Story = {
+  args: {
+    children: `#!/bin/bash
+
+# Install dependencies
+npm install
+
+# Build the project
+npm run build
+
+# Run tests
+npm test
+
+# Deploy to production
+if [ "$ENVIRONMENT" = "production" ]; then
+  echo "Deploying to production..."
+  npm run deploy:prod
+else
+  echo "Deploying to staging..."
+  npm run deploy:staging
+fi
+
+# Clean up
+npm run clean`,
+    className: "language-bash",
+    inline: false,
+  },
+};
+
+export const SQLBlock: Story = {
+  args: {
+    children: `-- Create users table
+CREATE TABLE users (
+  id SERIAL PRIMARY KEY,
+  username VARCHAR(50) UNIQUE NOT NULL,
+  email VARCHAR(100) UNIQUE NOT NULL,
+  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+  updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+);
+
+-- Insert sample data
+INSERT INTO users (username, email) VALUES
+  ('alice', 'alice@example.com'),
+  ('bob', 'bob@example.com'),
+  ('charlie', 'charlie@example.com');
+
+-- Query with joins
+SELECT 
+  u.username,
+  u.email,
+  p.title as post_title,
+  p.created_at as post_date
+FROM users u
+LEFT JOIN posts p ON u.id = p.user_id
+WHERE u.created_at > '2024-01-01'
+ORDER BY p.created_at DESC
+LIMIT 10;`,
+    className: "language-sql",
+    inline: false,
+  },
+};
+
+// Long code example with line wrapping
+export const LongCodeWithWrapping: Story = {
+  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.
+
+function processVeryLongFunctionNameWithManyParameters(
+  parameterOne: string,
+  parameterTwo: number,
+  parameterThree: boolean,
+  parameterFour: object,
+  parameterFive: array,
+  parameterSix: function,
+  parameterSeven: string,
+  parameterEight: number
+): Promise<ComplexReturnType> {
+  // Implementation here
+  return new Promise((resolve, reject) => {
+    // More implementation
+  });
+}`,
+    className: "language-typescript",
+    inline: false,
+    wrapLongLines: true,
+  },
+};
+
+// Long code example without line wrapping (default)
+export const LongCodeWithoutWrapping: Story = {
+  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.
+
+function processVeryLongFunctionNameWithManyParameters(parameterOne: string, parameterTwo: number, parameterThree: boolean, parameterFour: object, parameterFive: array, parameterSix: function, parameterSeven: string, parameterEight: number): Promise<ComplexReturnType> {
+  // Implementation here
+  return new Promise((resolve, reject) => {
+    // More implementation
+  });
+}`,
+    className: "language-typescript",
+    inline: false,
+    wrapLongLines: false,
+  },
+};
+
+export const TypescriptWithLineNumbers: Story = {
+  args: {
+    children: `interface User {
+  id: number;
+  name: string;
+  email: string;
+  isActive: boolean;
+}
+
+class UserService {
+  private users: User[] = [];
+
+  addUser(user: Omit<User, 'id'>): User {
+    const newUser: User = {
+      id: this.users.length + 1,
+      ...user
+    };
+    
+    this.users.push(newUser);
+    return newUser;
+  }
+
+  getUserById(id: number): User | undefined {
+    return this.users.find(user => user.id === id);
+  }
+
+  getAllUsers(): User[] {
+    return [...this.users];
+  }
+}
+
+const userService = new UserService();
+const newUser = userService.addUser({
+  name: "John Doe",
+  email: "john@example.com",
+  isActive: true
+});
+
+console.log("Created user:", newUser);`,
+    className: "language-typescript",
+    inline: false,
+    showLineNumber: true,
+  },
+};

package/src/stories/ConversationMessage.stories.tsx

@@ -2,10 +2,12 @@ import type { Meta } from "@storybook/react";
 import React from "react";
 
 import {
+  Avatar,
   Button,
   Citation,
   CitationIcons,
   CitationTitle,
+  ClockIcon,
   ConversationContainer,
   ConversationMessage,
   GithubIcon,
@@ -32,6 +34,7 @@ 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>
@@ -40,6 +43,9 @@ 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">
+              <p className="s-mb-6 s-text-sm s-text-muted-foreground dark:s-text-muted-foreground-night">
                 Allow{" "}
                 <span className="s-font-semibold">@Marketing Assistant</span> to
                 use the tool <span className="s-font-semibold">Send Email</span>{" "}