reachat 2.1.0-alpha.9 → 2.1.0

package/dist/stories/Intro.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/addon-docs/blocks';
+import { Meta } from '@storybook/addon-docs';
 
 <Meta title="Docs/Intro" />
 

package/dist/stories/MessageStatus.stories.tsx

@@ -0,0 +1,314 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useEffect, useState } from 'react';
+import {
+  MessageStatus,
+  MessageStatusStep,
+  MessageStatusState
+} from 'reachat';
+
+export default {
+  title: 'Components/MessageStatus',
+  component: MessageStatus,
+  args: {
+    text: 'Analyzing your request...',
+    status: 'loading'
+  },
+  argTypes: {
+    status: {
+      control: 'select',
+      options: ['loading', 'complete', 'error'],
+      description: 'Current status state'
+    },
+    text: {
+      control: 'text',
+      description: 'Main status text to display'
+    },
+    steps: {
+      description: 'Optional sub-steps to display'
+    },
+    icon: {
+      description: 'Custom icon to display'
+    },
+    theme: {
+      description: 'Custom theme overrides'
+    },
+    className: {
+      description: 'Additional CSS classes'
+    }
+  }
+} as Meta<typeof MessageStatus>;
+
+type Story = StoryObj<typeof MessageStatus>;
+
+export const Loading: Story = {
+  render: args => (
+    <div className="w-[400px]">
+      <MessageStatus {...args} />
+    </div>
+  )
+};
+
+export const Complete: Story = {
+  args: {
+    status: 'complete',
+    text: 'Analysis complete'
+  },
+  render: args => (
+    <div className="w-[400px]">
+      <MessageStatus {...args} />
+    </div>
+  )
+};
+
+export const Error: Story = {
+  args: {
+    status: 'error',
+    text: 'Failed to analyze request'
+  },
+  render: args => (
+    <div className="w-[400px]">
+      <MessageStatus {...args} />
+    </div>
+  )
+};
+
+export const WithSteps: Story = {
+  args: {
+    text: 'Processing your code...',
+    steps: [
+      { id: '1', text: 'Reading file contents', status: 'complete' },
+      { id: '2', text: 'Analyzing dependencies', status: 'complete' },
+      { id: '3', text: 'Running linter checks', status: 'loading' },
+      { id: '4', text: 'Generating suggestions', status: 'loading' }
+    ]
+  },
+  render: args => (
+    <div className="w-[400px]">
+      <MessageStatus {...args} />
+    </div>
+  )
+};
+
+export const WithStepsComplete: Story = {
+  args: {
+    status: 'complete',
+    text: 'Code analysis complete',
+    steps: [
+      { id: '1', text: 'Reading file contents', status: 'complete' },
+      { id: '2', text: 'Analyzing dependencies', status: 'complete' },
+      { id: '3', text: 'Running linter checks', status: 'complete' },
+      { id: '4', text: 'Generating suggestions', status: 'complete' }
+    ]
+  },
+  render: args => (
+    <div className="w-[400px]">
+      <MessageStatus {...args} />
+    </div>
+  )
+};
+
+export const WithStepsError: Story = {
+  args: {
+    status: 'error',
+    text: 'Analysis failed',
+    steps: [
+      { id: '1', text: 'Reading file contents', status: 'complete' },
+      { id: '2', text: 'Analyzing dependencies', status: 'complete' },
+      { id: '3', text: 'Running linter checks', status: 'error' }
+    ]
+  },
+  render: args => (
+    <div className="w-[400px]">
+      <MessageStatus {...args} />
+    </div>
+  )
+};
+
+export const AllStates: Story = {
+  render: () => (
+    <div className="w-[400px] space-y-4">
+      <MessageStatus status="loading" text="Searching files..." />
+      <MessageStatus status="complete" text="Search complete" />
+      <MessageStatus status="error" text="Search failed" />
+    </div>
+  )
+};
+
+export const InteractiveDemo: Story = {
+  render: () => {
+    const [status, setStatus] = useState<MessageStatusState>('loading');
+    const [steps, setSteps] = useState<MessageStatusStep[]>([
+      { id: '1', text: 'Searching codebase', status: 'loading' },
+      { id: '2', text: 'Analyzing results', status: 'loading' },
+      { id: '3', text: 'Generating response', status: 'loading' }
+    ]);
+    const [currentStep, setCurrentStep] = useState(0);
+
+    useEffect(() => {
+      const interval = setInterval(() => {
+        setCurrentStep(prev => {
+          const next = prev + 1;
+          if (next > steps.length) {
+            setStatus('complete');
+            clearInterval(interval);
+            return prev;
+          }
+          setSteps(prevSteps =>
+            prevSteps.map((step, idx) => ({
+              ...step,
+              status: idx < next ? 'complete' : 'loading'
+            }))
+          );
+          return next;
+        });
+      }, 1500);
+
+      return () => clearInterval(interval);
+    }, []);
+
+    const statusText =
+      status === 'complete'
+        ? 'Task completed successfully'
+        : 'Processing your request...';
+
+    return (
+      <div className="w-[400px]">
+        <MessageStatus status={status} text={statusText} steps={steps} />
+      </div>
+    );
+  }
+};
+
+export const ToolUsageExample: Story = {
+  render: () => {
+    const [steps, setSteps] = useState<MessageStatusStep[]>([]);
+    const [status, setStatus] = useState<MessageStatusState>('loading');
+    const [text, setText] = useState('Starting tool execution...');
+
+    useEffect(() => {
+      const timeline = [
+        {
+          delay: 500,
+          action: () => {
+            setText('Using Read tool...');
+            setSteps([{ id: '1', text: 'Reading package.json', status: 'loading' as const }]);
+          }
+        },
+        {
+          delay: 1500,
+          action: () => {
+            setSteps(prev =>
+              prev.map(s => (s.id === '1' ? { ...s, status: 'complete' as const } : s))
+            );
+          }
+        },
+        {
+          delay: 2000,
+          action: () => {
+            setText('Using Grep tool...');
+            setSteps(prev => [
+              ...prev,
+              { id: '2', text: 'Searching for imports', status: 'loading' as const }
+            ]);
+          }
+        },
+        {
+          delay: 3500,
+          action: () => {
+            setSteps(prev =>
+              prev.map(s => (s.id === '2' ? { ...s, status: 'complete' as const } : s))
+            );
+          }
+        },
+        {
+          delay: 4000,
+          action: () => {
+            setText('Using Edit tool...');
+            setSteps(prev => [
+              ...prev,
+              { id: '3', text: 'Modifying source file', status: 'loading' as const }
+            ]);
+          }
+        },
+        {
+          delay: 5500,
+          action: () => {
+            setSteps(prev =>
+              prev.map(s => (s.id === '3' ? { ...s, status: 'complete' as const } : s))
+            );
+            setText('Tools completed');
+            setStatus('complete');
+          }
+        }
+      ];
+
+      const timeouts = timeline.map(item =>
+        setTimeout(item.action, item.delay)
+      );
+
+      return () => timeouts.forEach(clearTimeout);
+    }, []);
+
+    return (
+      <div className="w-[400px]">
+        <MessageStatus status={status} text={text} steps={steps} />
+      </div>
+    );
+  }
+};
+
+export const MultipleStatuses: Story = {
+  render: () => (
+    <div className="w-[500px] space-y-3">
+      <MessageStatus
+        status="complete"
+        text="Read src/index.ts"
+        steps={[
+          { id: '1', text: '156 lines read', status: 'complete' }
+        ]}
+      />
+      <MessageStatus
+        status="complete"
+        text="Grep for dependencies"
+        steps={[
+          { id: '1', text: 'Found 12 matches', status: 'complete' }
+        ]}
+      />
+      <MessageStatus
+        status="loading"
+        text="Analyzing code patterns"
+        steps={[
+          { id: '1', text: 'Parsing AST', status: 'complete' },
+          { id: '2', text: 'Finding patterns', status: 'loading' }
+        ]}
+      />
+    </div>
+  )
+};
+
+export const CustomStyling: Story = {
+  args: {
+    text: 'Custom styled status',
+    className: 'bg-gradient-to-r from-purple-500/10 to-blue-500/10 border-purple-500/30'
+  },
+  render: args => (
+    <div className="w-[400px]">
+      <MessageStatus {...args} />
+    </div>
+  )
+};
+
+export const LongText: Story = {
+  args: {
+    text: 'Analyzing complex codebase with multiple files and dependencies to generate comprehensive suggestions',
+    steps: [
+      { id: '1', text: 'Scanning src/components directory for React components', status: 'complete' },
+      { id: '2', text: 'Analyzing TypeScript interfaces and type definitions', status: 'loading' }
+    ]
+  },
+  render: args => (
+    <div className="w-[400px]">
+      <MessageStatus {...args} />
+    </div>
+  )
+};

package/dist/stories/RichTextInput.stories.tsx

@@ -0,0 +1,198 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+import { RichTextInput, MentionItem, SlashCommandItem } from 'reachat';
+import { ChatContext } from 'reachat';
+import { chatTheme } from 'reachat';
+
+const UserIcon = () => (
+  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className="w-full h-full">
+    <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
+    <circle cx="12" cy="7" r="4" />
+  </svg>
+);
+
+const HelpIcon = () => (
+  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className="w-full h-full">
+    <circle cx="12" cy="12" r="10" />
+    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" />
+    <line x1="12" y1="17" x2="12.01" y2="17" />
+  </svg>
+);
+
+const ClearIcon = () => (
+  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className="w-full h-full">
+    <path d="M21 4H8l-7 8 7 8h13a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2z" />
+    <line x1="18" y1="9" x2="12" y2="15" />
+    <line x1="12" y1="9" x2="18" y2="15" />
+  </svg>
+);
+
+const ImageIcon = () => (
+  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className="w-full h-full">
+    <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
+    <circle cx="8.5" cy="8.5" r="1.5" />
+    <polyline points="21 15 16 10 5 21" />
+  </svg>
+);
+
+const CodeIcon = () => (
+  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className="w-full h-full">
+    <polyline points="16 18 22 12 16 6" />
+    <polyline points="8 6 2 12 8 18" />
+  </svg>
+);
+
+const sampleMentions: MentionItem[] = [
+  { id: '1', label: 'John Doe', description: 'Engineering', icon: <UserIcon /> },
+  { id: '2', label: 'Jane Smith', description: 'Design', icon: <UserIcon /> },
+  { id: '3', label: 'Bob Wilson', description: 'Product', icon: <UserIcon /> }
+];
+
+const sampleCommands: SlashCommandItem[] = [
+  { id: 'help', label: 'help', description: 'Show available commands', icon: <HelpIcon />, shortcut: '?' },
+  { id: 'clear', label: 'clear', description: 'Clear the conversation', icon: <ClearIcon /> },
+  { id: 'image', label: 'image', description: 'Generate an image', icon: <ImageIcon /> },
+  { id: 'code', label: 'code', description: 'Generate code snippet', icon: <CodeIcon /> }
+];
+
+const Wrapper = ({ children }: { children: React.ReactNode }) => (
+  <ChatContext.Provider value={{ sessions: [], activeSessionId: null, theme: chatTheme }}>
+    {children}
+  </ChatContext.Provider>
+);
+
+export default {
+  title: 'Components/RichTextInput',
+  component: RichTextInput,
+  decorators: [
+    (Story) => (
+      <Wrapper>
+        <Story />
+      </Wrapper>
+    )
+  ],
+  parameters: {
+    layout: 'centered'
+  }
+} as Meta<typeof RichTextInput>;
+
+type Story = StoryObj<typeof RichTextInput>;
+
+export const Basic: Story = {
+  render: () => {
+    const [value, setValue] = useState('');
+    const [submitted, setSubmitted] = useState('');
+
+    return (
+      <div className="w-[400px] space-y-4">
+        <div className="p-4 bg-white dark:bg-gray-950 rounded-lg border border-gray-200 dark:border-gray-700">
+          <RichTextInput
+            placeholder="Type a message..."
+            value={value}
+            onChange={setValue}
+            onSubmit={(text) => {
+              setSubmitted(text);
+              setValue('');
+            }}
+          />
+        </div>
+        <div className="text-sm space-y-2">
+          <div className="flex gap-2">
+            <span className="text-gray-500 w-20">onChange:</span>
+            <code className="text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-800 px-2 py-0.5 rounded flex-1 min-h-[24px]">
+              {value || '(empty)'}
+            </code>
+          </div>
+          <div className="flex gap-2">
+            <span className="text-gray-500 w-20">onSubmit:</span>
+            <code className="text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-800 px-2 py-0.5 rounded flex-1 min-h-[24px]">
+              {submitted || '(press Enter to submit)'}
+            </code>
+          </div>
+        </div>
+      </div>
+    );
+  }
+};
+
+export const WithMentions: Story = {
+  render: () => {
+    const [value, setValue] = useState('');
+    const [submitted, setSubmitted] = useState('');
+
+    return (
+      <div className="w-[400px] space-y-4">
+        <div className="p-4 bg-white dark:bg-gray-950 rounded-lg border border-gray-200 dark:border-gray-700">
+          <RichTextInput
+            placeholder="Type @ to mention someone..."
+            value={value}
+            onChange={setValue}
+            mentions={{
+              trigger: '@',
+              items: sampleMentions
+            }}
+            onSubmit={(text) => {
+              setSubmitted(text);
+              setValue('');
+            }}
+          />
+        </div>
+        <div className="text-sm space-y-2">
+          <div className="flex gap-2">
+            <span className="text-gray-500 w-20">onChange:</span>
+            <code className="text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-800 px-2 py-0.5 rounded flex-1 min-h-[24px]">
+              {value || '(empty)'}
+            </code>
+          </div>
+          <div className="flex gap-2">
+            <span className="text-gray-500 w-20">onSubmit:</span>
+            <code className="text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-800 px-2 py-0.5 rounded flex-1 min-h-[24px]">
+              {submitted || '(press Enter to submit)'}
+            </code>
+          </div>
+        </div>
+      </div>
+    );
+  }
+};
+
+export const WithSlashCommands: Story = {
+  render: () => {
+    const [value, setValue] = useState('');
+    const [submitted, setSubmitted] = useState('');
+
+    return (
+      <div className="w-[400px] space-y-4">
+        <div className="p-4 bg-white dark:bg-gray-950 rounded-lg border border-gray-200 dark:border-gray-700">
+          <RichTextInput
+            placeholder="Type / for commands..."
+            value={value}
+            onChange={setValue}
+            commands={{
+              trigger: '/',
+              items: sampleCommands
+            }}
+            onSubmit={(text) => {
+              setSubmitted(text);
+              setValue('');
+            }}
+          />
+        </div>
+        <div className="text-sm space-y-2">
+          <div className="flex gap-2">
+            <span className="text-gray-500 w-20">onChange:</span>
+            <code className="text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-800 px-2 py-0.5 rounded flex-1 min-h-[24px]">
+              {value || '(empty)'}
+            </code>
+          </div>
+          <div className="flex gap-2">
+            <span className="text-gray-500 w-20">onSubmit:</span>
+            <code className="text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-800 px-2 py-0.5 rounded flex-1 min-h-[24px]">
+              {submitted || '(press Enter to submit)'}
+            </code>
+          </div>
+        </div>
+      </div>
+    );
+  }
+};

package/dist/stories/assets/logo.svg

@@ -1,40 +1,21 @@
 <svg width="795" height="140" viewBox="0 0 795 140" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path
-    d="M18.3191 17.5C10.2662 17.5 3.73579 24.0304 3.73579 32.0833V102.083L30.2775 84.5833H82.4858C90.5387 84.5833 97.0691 78.0529 97.0691 70V17.5H18.3191Z"
-    fill="url(#paint0_linear_182_647)" />
-  <path
-    d="M137.902 61.2501V134.167L111.361 116.667H59.1525C51.0995 116.667 44.5691 110.136 44.5691 102.083V84.5834H82.4858C90.5387 84.5834 97.0691 78.053 97.0691 70.0001V46.6667H123.319C131.372 46.6667 137.902 53.1972 137.902 61.2501Z"
-    fill="url(#paint1_linear_182_647)" />
-  <path
-    d="M251.987 103.6H237.683L224.147 80.2719H214.067V103.6H200.819V36.3999H227.699C233.939 36.3999 239.219 38.6079 243.539 42.9279C247.859 47.2479 250.067 52.5279 250.067 58.6719C250.067 67.0239 244.883 74.7039 237.107 78.2559L251.987 103.6ZM227.699 48.7839H200.819V68.6559H227.699C232.691 68.6559 236.819 64.1439 236.819 58.6719C236.819 53.1999 232.691 48.7839 227.699 48.7839Z"
-    fill="currentColor" />
-  <path
-    d="M290.508 75.8559V90.9279H332.076V103.6H290.508V36.3999H331.596V49.0719H290.508V63.3759H329.196V75.8559H290.508Z"
-    fill="currentColor" />
-  <path
-    d="M430.765 103.6H416.365L412.333 91.5039H385.549L381.517 103.6H367.213L390.733 36.3999H407.149L430.765 103.6ZM398.989 51.6639L385.549 91.5039H412.333L398.989 51.6639Z"
-    fill="currentColor" />
-  <path
-    d="M497.445 104.944C487.365 104.944 479.013 101.584 472.389 94.8639C465.765 88.1439 462.501 79.8879 462.501 69.9999C462.501 60.1119 465.765 51.7599 472.389 45.1359C479.013 38.4159 487.365 35.0559 497.445 35.0559C509.637 35.0559 520.581 41.1999 526.341 50.8959L514.917 57.5199C511.557 51.4719 505.125 47.9199 497.445 47.9199C490.917 47.9199 485.637 49.9359 481.605 54.0639C477.669 58.1919 475.653 63.4719 475.653 69.9999C475.653 76.4319 477.669 81.7119 481.605 85.8399C485.637 89.9679 490.917 91.9839 497.445 91.9839C505.125 91.9839 511.749 88.3359 514.917 82.4799L526.341 89.1039C520.581 98.7999 509.733 104.944 497.445 104.944Z"
-    fill="currentColor" />
-  <path
-    d="M603.407 63.0879V36.3999H616.559V103.6H603.407V75.7599H578.447V103.6H565.199V36.3999H578.447V63.0879H603.407Z"
-    fill="currentColor" />
-  <path
-    d="M717.363 103.6H702.963L698.931 91.5039H672.147L668.115 103.6H653.811L677.331 36.3999H693.747L717.363 103.6ZM685.587 51.6639L672.147 91.5039H698.931L685.587 51.6639Z"
-    fill="currentColor" />
-  <path d="M744.741 36.3999H794.181V49.0719H776.037V103.6H762.789V49.0719H744.741V36.3999Z"
-    fill="currentColor" />
-  <defs>
-    <linearGradient id="paint0_linear_182_647" x1="50.4025" y1="17.5" x2="50.4025" y2="102.083"
-      gradientUnits="userSpaceOnUse">
-      <stop stop-color="#105EFF" />
-      <stop offset="1" stop-color="#2E2E77" />
-    </linearGradient>
-    <linearGradient id="paint1_linear_182_647" x1="141.706" y1="169.085" x2="61.445" y2="30.0709"
-      gradientUnits="userSpaceOnUse">
-      <stop stop-color="#105EFF" />
-      <stop offset="1" stop-color="#105EFF" stop-opacity="0.71" />
-    </linearGradient>
-  </defs>
+<path d="M18.3191 17.5C10.2662 17.5 3.73579 24.0304 3.73579 32.0833V102.083L30.2775 84.5833H82.4858C90.5387 84.5833 97.0691 78.0529 97.0691 70V17.5H18.3191Z" fill="url(#paint0_linear_182_647)"/>
+<path d="M137.902 61.2501V134.167L111.361 116.667H59.1525C51.0995 116.667 44.5691 110.136 44.5691 102.083V84.5834H82.4858C90.5387 84.5834 97.0691 78.053 97.0691 70.0001V46.6667H123.319C131.372 46.6667 137.902 53.1972 137.902 61.2501Z" fill="url(#paint1_linear_182_647)"/>
+<path d="M251.987 103.6H237.683L224.147 80.2719H214.067V103.6H200.819V36.3999H227.699C233.939 36.3999 239.219 38.6079 243.539 42.9279C247.859 47.2479 250.067 52.5279 250.067 58.6719C250.067 67.0239 244.883 74.7039 237.107 78.2559L251.987 103.6ZM227.699 48.7839H200.819V68.6559H227.699C232.691 68.6559 236.819 64.1439 236.819 58.6719C236.819 53.1999 232.691 48.7839 227.699 48.7839Z" fill="white"/>
+<path d="M290.508 75.8559V90.9279H332.076V103.6H290.508V36.3999H331.596V49.0719H290.508V63.3759H329.196V75.8559H290.508Z" fill="white"/>
+<path d="M430.765 103.6H416.365L412.333 91.5039H385.549L381.517 103.6H367.213L390.733 36.3999H407.149L430.765 103.6ZM398.989 51.6639L385.549 91.5039H412.333L398.989 51.6639Z" fill="white"/>
+<path d="M497.445 104.944C487.365 104.944 479.013 101.584 472.389 94.8639C465.765 88.1439 462.501 79.8879 462.501 69.9999C462.501 60.1119 465.765 51.7599 472.389 45.1359C479.013 38.4159 487.365 35.0559 497.445 35.0559C509.637 35.0559 520.581 41.1999 526.341 50.8959L514.917 57.5199C511.557 51.4719 505.125 47.9199 497.445 47.9199C490.917 47.9199 485.637 49.9359 481.605 54.0639C477.669 58.1919 475.653 63.4719 475.653 69.9999C475.653 76.4319 477.669 81.7119 481.605 85.8399C485.637 89.9679 490.917 91.9839 497.445 91.9839C505.125 91.9839 511.749 88.3359 514.917 82.4799L526.341 89.1039C520.581 98.7999 509.733 104.944 497.445 104.944Z" fill="white"/>
+<path d="M603.407 63.0879V36.3999H616.559V103.6H603.407V75.7599H578.447V103.6H565.199V36.3999H578.447V63.0879H603.407Z" fill="white"/>
+<path d="M717.363 103.6H702.963L698.931 91.5039H672.147L668.115 103.6H653.811L677.331 36.3999H693.747L717.363 103.6ZM685.587 51.6639L672.147 91.5039H698.931L685.587 51.6639Z" fill="white"/>
+<path d="M744.741 36.3999H794.181V49.0719H776.037V103.6H762.789V49.0719H744.741V36.3999Z" fill="white"/>
+<defs>
+<linearGradient id="paint0_linear_182_647" x1="50.4025" y1="17.5" x2="50.4025" y2="102.083" gradientUnits="userSpaceOnUse">
+<stop stop-color="#105EFF"/>
+<stop offset="1" stop-color="#2E2E77"/>
+</linearGradient>
+<linearGradient id="paint1_linear_182_647" x1="141.706" y1="169.085" x2="61.445" y2="30.0709" gradientUnits="userSpaceOnUse">
+<stop stop-color="#105EFF"/>
+<stop offset="1" stop-color="#105EFF" stop-opacity="0.71"/>
+</linearGradient>
+</defs>
 </svg>

package/dist/stories/assets/paperclip.svg

@@ -1,4 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="24px" height="24px">
-  <path
-    d="M25.3,56.007c-3.409,0-6.818-1.297-9.414-3.893c-2.595-2.596-3.893-6.005-3.893-9.415c0-3.409,1.298-6.819,3.893-9.414	l20.4-20.4c1.847-1.847,4.302-2.864,6.914-2.864c2.611,0,5.067,1.017,6.914,2.864c3.812,3.813,3.812,10.016,0,13.829l-20.4,20.4	c-2.438,2.439-6.385,2.441-8.828,0c-2.434-2.435-2.434-6.395,0-8.829l13.7-13.7c0.781-0.781,2.047-0.781,2.828,0	c0.781,0.781,0.781,2.047,0,2.828l-13.7,13.7c-0.874,0.875-0.874,2.297,0.001,3.172c0.847,0.846,2.324,0.846,3.171,0l20.4-20.4	c2.252-2.253,2.252-5.919,0-8.172c-1.092-1.091-2.543-1.692-4.086-1.692c-1.544,0-2.994,0.601-4.086,1.692l-20.4,20.4	c-1.815,1.816-2.723,4.201-2.723,6.586c0,2.385,0.908,4.77,2.723,6.586c1.816,1.815,4.201,2.723,6.586,2.723	c2.385,0,4.771-0.907,6.586-2.723l12.7-12.7c0.781-0.781,2.047-0.781,2.828,0c0.781,0.781,0.781,2.047,0,2.828l-12.7,12.7	C32.119,54.709,28.71,56.007,25.3,56.007z" fill="currentColor" />
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-paperclip"><path d="m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg>

package/dist/stories/assets/search.svg

@@ -1,5 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
-  <path
-    d="M7.75 2C10.92 2 13.5 4.58 13.5 7.75C13.5 9.06476 13.0552 10.2773 12.3096 11.2471L15.7812 14.7188C16.0743 15.0118 16.0743 15.4873 15.7812 15.7803C15.6353 15.9263 15.443 16 15.251 16H15.25C15.058 16 14.8657 15.9273 14.7197 15.7803L11.248 12.3086C10.2781 13.0547 9.06525 13.5 7.75 13.5C4.58 13.5 2 10.92 2 7.75C2 4.58 4.58 2 7.75 2ZM7.75 3.5C5.407 3.5 3.5 5.407 3.5 7.75C3.5 10.093 5.407 12 7.75 12C10.093 12 12 10.093 12 7.75C12 5.407 10.093 3.5 7.75 3.5Z"
-    fill="currentColor" />
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-search"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>

package/dist/stories/assets/sparkles.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M12 3l1.912 5.813a2 2 0 0 0 1.275 1.275L21 12l-5.813 1.912a2 2 0 0 0-1.275 1.275L12 21l-1.912-5.813a2 2 0 0 0-1.275-1.275L3 12l5.813-1.912a2 2 0 0 0 1.275-1.275L12 3z"/>
+  <path d="M5 3v4"/>
+  <path d="M3 5h4"/>
+  <path d="M19 17v4"/>
+  <path d="M17 19h4"/>
+</svg>