reachat 2.1.0-alpha.21 → 2.1.0-alpha.22

package/dist/stories/MessageStatus.stories.tsx

@@ -0,0 +1,326 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useEffect, useState } from 'react';
+
+import { ChatContext } from 'reachat';
+import {
+  MessageStatus,
+  type MessageStatusState,
+  type MessageStatusStep
+} from 'reachat';
+import { chatTheme } from 'reachat';
+
+export default {
+  title: 'Components/MessageStatus',
+  component: MessageStatus,
+  decorators: [
+    Story => (
+      <ChatContext.Provider
+        value={{ sessions: [], activeSessionId: null, theme: chatTheme }}
+      >
+        <Story />
+      </ChatContext.Provider>
+    )
+  ],
+  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/SessionsList.stories.tsx

@@ -0,0 +1,276 @@
+import type { Meta } from '@storybook/react';
+import { subDays } from 'date-fns';
+
+import {
+  Chat,
+  ChatInput,
+  NewSessionButton,
+  type Session,
+  SessionGroups,
+  SessionListItem,
+  SessionMessagePanel,
+  SessionMessages,
+  SessionMessagesHeader,
+  SessionsGroup,
+  SessionsList
+} from 'reachat';
+import { fakeSessions } from './examples';
+
+export default {
+  title: 'Demos/SessionList',
+  component: SessionsList
+} as Meta;
+
+export const DefaultSession = () => {
+  return (
+    <div
+      className="dark:bg-(--color-background-basic-black) bg-(--color-background-basic-white)"
+      style={{
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        padding: 20,
+        margin: 20,
+        borderRadius: 5
+      }}
+    >
+      <Chat
+        viewType="console"
+        sessions={fakeSessions}
+        activeSessionId="1"
+        onDeleteSession={() => alert('delete!')}
+      >
+        <SessionsList>
+          <NewSessionButton />
+          <SessionGroups />
+        </SessionsList>
+
+        <SessionMessagePanel>
+          <SessionMessagesHeader />
+          <SessionMessages />
+          <ChatInput />
+        </SessionMessagePanel>
+      </Chat>
+    </div>
+  );
+};
+
+export const UndeleteableSessions = () => {
+  return (
+    <div
+      className="dark:bg-(--color-background-basic-black) bg-(--color-background-basic-white)"
+      style={{
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        padding: 20,
+        margin: 20,
+        borderRadius: 5
+      }}
+    >
+      <Chat viewType="console" sessions={fakeSessions} activeSessionId="1">
+        <SessionsList>
+          <NewSessionButton />
+          <SessionGroups>
+            {groups =>
+              groups.map(({ heading, sessions }) => (
+                <SessionsGroup heading={heading} key={heading}>
+                  {sessions.map(s => (
+                    <SessionListItem key={s.id} session={s} deletable={false} />
+                  ))}
+                </SessionsGroup>
+              ))
+            }
+          </SessionGroups>
+        </SessionsList>
+
+        <SessionMessagePanel>
+          <SessionMessagesHeader />
+          <SessionMessages />
+          <ChatInput />
+        </SessionMessagePanel>
+      </Chat>
+    </div>
+  );
+};
+
+export const HundredSessions = () => {
+  const generateFakeSessions = (count: number): Session[] => {
+    return Array.from({ length: count }, (_, index) => ({
+      id: `session-${index + 1}`,
+      title: `Session ${index + 1}`,
+      createdAt: subDays(new Date(), index),
+      updatedAt: subDays(new Date(), index),
+      conversations: [
+        {
+          id: `conv-${index}-1`,
+          question: `Question for session ${index + 1}`,
+          response: `Response for session ${index + 1}`,
+          createdAt: subDays(new Date(), index),
+          updatedAt: subDays(new Date(), index)
+        }
+      ]
+    }));
+  };
+
+  const hundredSessions = generateFakeSessions(100);
+
+  return (
+    <div
+      className="dark:bg-(--color-background-basic-black) bg-(--color-background-basic-white)"
+      style={{
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        padding: 20,
+        margin: 20,
+        borderRadius: 5
+      }}
+    >
+      <Chat viewType="console" sessions={hundredSessions}>
+        <SessionsList>
+          <NewSessionButton />
+          <SessionGroups />
+        </SessionsList>
+
+        <SessionMessagePanel>
+          <SessionMessagesHeader />
+          <SessionMessages />
+          <ChatInput />
+        </SessionMessagePanel>
+      </Chat>
+    </div>
+  );
+};
+
+export const LongSessionNames = () => {
+  const generateFakeSessionsWithLongNames = (count: number) => {
+    return Array.from({ length: count }, (_, index) => ({
+      id: `session-${index + 1}`,
+      title: `Session ${index + 1}: This is a very long session name to test how the UI handles overflow and text wrapping in the session list. It should be truncated or wrapped appropriately to ensure a good user experience.`,
+      createdAt: subDays(new Date(), count - index),
+      updatedAt: new Date(),
+      conversations: [
+        {
+          id: '1',
+          question:
+            'Can you provide an in-depth explanation of the theory of relativity, including its historical context, key principles, mathematical foundations, experimental evidence, and its implications for our understanding of space, time, and gravity? Additionally, how does it relate to quantum mechanics, and what are the current challenges in reconciling these two fundamental theories of physics?',
+          response:
+            'Can you provide an in-depth explanation of the theory of relativity, including its historical context, key principles, mathematical foundations, experimental evidence, and its implications for our understanding of space, time, and gravity? Additionally, how does it relate to quantum mechanics, and what are the current challenges in reconciling these two fundamental theories of physics?',
+          createdAt: new Date(),
+          updatedAt: new Date()
+        }
+      ]
+    }));
+  };
+
+  const sessionsWithLongNames = generateFakeSessionsWithLongNames(10);
+
+  return (
+    <div
+      className="dark:bg-(--color-background-basic-black) bg-(--color-background-basic-white)"
+      style={{
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        padding: 20,
+        margin: 20,
+        borderRadius: 5
+      }}
+    >
+      <Chat
+        viewType="console"
+        sessions={sessionsWithLongNames}
+        activeSessionId="session-10"
+      >
+        <SessionsList>
+          <NewSessionButton />
+          <SessionGroups />
+        </SessionsList>
+
+        <SessionMessagePanel>
+          <SessionMessagesHeader />
+          <SessionMessages />
+          <ChatInput />
+        </SessionMessagePanel>
+      </Chat>
+    </div>
+  );
+};
+
+export const SessionGrouping = () => {
+  const createSessionWithDate = (
+    id: string,
+    title: string,
+    daysAgo: number
+  ): Session => ({
+    id,
+    title,
+    createdAt: subDays(new Date(), daysAgo),
+    updatedAt: subDays(new Date(), daysAgo),
+    conversations: [
+      {
+        id: `${id}-1`,
+        question: 'Sample question',
+        response: 'Sample response',
+        createdAt: subDays(new Date(), daysAgo),
+        updatedAt: subDays(new Date(), daysAgo)
+      }
+    ]
+  });
+
+  const sessionsWithVariousDates: Session[] = [
+    createSessionWithDate('1', 'Today Session', 0),
+    createSessionWithDate('2', 'Yesterday Session', 1),
+    createSessionWithDate('3', 'Yesterday Session 2', 1),
+    createSessionWithDate('4', 'Last Week Session', 6),
+    createSessionWithDate('5', 'Two Weeks Ago Session', 14),
+    createSessionWithDate('6', 'Last Month Session', 32),
+    createSessionWithDate('7', 'Two Months Ago Session', 65),
+    createSessionWithDate('8', 'Six Months Ago Session', 180),
+    createSessionWithDate('9', 'Last Year Session', 370),
+    createSessionWithDate('10', 'Two Years Ago Session', 740)
+  ];
+
+  return (
+    <div
+      className="dark:bg-(--color-background-basic-black) bg-(--color-background-basic-white)"
+      style={{
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        padding: 20,
+        margin: 20,
+        borderRadius: 5
+      }}
+    >
+      <Chat
+        viewType="console"
+        sessions={sessionsWithVariousDates}
+        isLoading={false}
+        onDeleteSession={() => {}}
+      >
+        <SessionsList>
+          <NewSessionButton />
+          <SessionGroups />
+        </SessionsList>
+
+        <SessionMessagePanel>
+          <SessionMessagesHeader />
+          <SessionMessages />
+          <ChatInput placeholder="Send a message" />
+        </SessionMessagePanel>
+      </Chat>
+    </div>
+  );
+};

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>

package/dist/stories/examples.ts

@@ -272,3 +272,37 @@ export const chatTemplates = [
     icon: 'SendPlane'
   }
 ];
+
+export const defaultSuggestions = [
+  {
+    id: '1',
+    content: 'Tell me more about this topic'
+  },
+  {
+    id: '2',
+    content: 'Can you provide an example?'
+  },
+  {
+    id: '3',
+    content: 'What are the best practices?'
+  }
+];
+
+export const sessionWithSuggestions = [
+  {
+    id: 'session-suggestions',
+    title: 'Session with Suggestions',
+    createdAt: new Date(),
+    updatedAt: new Date(),
+    conversations: [
+      {
+        id: '1',
+        question: 'What is React?',
+        response:
+          'React is a JavaScript library for building user interfaces. It was developed by Facebook and is now maintained by Meta and a community of developers.',
+        createdAt: new Date(),
+        updatedAt: new Date()
+      }
+    ]
+  }
+];

package/dist/theme.d.ts

@@ -4,6 +4,33 @@ export interface ChatTheme {
     companion: string;
     empty: string;
     appbar: string;
+    status: {
+        base: string;
+        header: string;
+        icon: {
+            base: string;
+            loading: string;
+            complete: string;
+            error: string;
+        };
+        text: {
+            base: string;
+            loading: string;
+            complete: string;
+            error: string;
+        };
+        steps: {
+            base: string;
+            step: {
+                base: string;
+                icon: string;
+                text: string;
+                loading: string;
+                complete: string;
+                error: string;
+            };
+        };
+    };
     sessions: {
         base: string;
         console: string;
@@ -34,6 +61,10 @@ export interface ChatTheme {
             cursor: string;
             overlay: string;
             expand: string;
+            scrollToBottom: {
+                container: string;
+                button: string;
+            };
             files: {
                 base: string;
                 file: {
@@ -103,6 +134,21 @@ export interface ChatTheme {
             send: string;
             stop: string;
         };
+        dropzone: {
+            base: string;
+            active: string;
+            overlay: string;
+            text: string;
+            icon: string;
+        };
+    };
+    suggestions: {
+        base: string;
+        item: {
+            base: string;
+            icon: string;
+            text: string;
+        };
     };
 }
 export declare const chatTheme: ChatTheme;