reachat 2.1.0-alpha.9 → 2.1.0

package/dist/stories/Console.stories.tsx

@@ -1,4 +1,4 @@
-import { useState, useRef, FC, useContext } from 'react';
+import { useState, useRef, FC, useContext, useEffect } from 'react';
 import AttachIcon from './assets/paperclip.svg?react';
 import { Meta } from '@storybook/react';
 import {
@@ -17,6 +17,9 @@ import {
   SessionMessagesHeader,
   ChatContext,
   SessionMessage,
+  MessageStatus,
+  MessageStatusStep,
+  MessageStatusState
 } from 'reachat';
 import {
   Card,
@@ -55,7 +58,7 @@ export default {
 export const Basic = () => {
   return (
     <div
-      className="dark:bg-(--color-background-basic-black) bg-(--color-background-basic-white)"
+      className="dark:bg-gray-950 bg-white"
       style={{
         position: 'absolute',
         top: 0,
@@ -89,7 +92,7 @@ export const Basic = () => {
 export const Embeds = () => {
   return (
     <div
-      className="dark:bg-(--color-background-basic-black) bg-(--color-background-basic-white)"
+      className="dark:bg-gray-950 bg-white"
       style={{
         position: 'absolute',
         top: 0,
@@ -123,7 +126,7 @@ export const Embeds = () => {
 export const DefaultSession = () => {
   return (
     <div
-      className="dark:bg-(--color-background-basic-black) bg-(--color-background-basic-white)"
+      className="dark:bg-gray-950 bg-white"
       style={{
         position: 'absolute',
         top: 0,
@@ -159,7 +162,7 @@ export const DefaultSession = () => {
 export const Loading = () => {
   return (
     <div
-      className="dark:bg-(--color-background-basic-black) bg-(--color-background-basic-white)"
+      className="dark:bg-gray-950 bg-white"
       style={{
         position: 'absolute',
         top: 0,
@@ -199,7 +202,7 @@ export const FileUploads = () => {
 
   return (
     <div
-      className="dark:bg-(--color-background-basic-black) bg-(--color-background-basic-white)"
+      className="dark:bg-gray-950 bg-white"
       style={{
         position: 'absolute',
         top: 0,
@@ -257,7 +260,7 @@ export const FileUploads = () => {
 export const DefaultInputValue = () => {
   return (
     <div
-      className="dark:bg-(--color-background-basic-black) bg-(--color-background-basic-white)"
+      className="dark:bg-gray-950 bg-white"
       style={{
         position: 'absolute',
         top: 0,
@@ -293,7 +296,7 @@ export const DefaultInputValue = () => {
 export const UndeleteableSessions = () => {
   return (
     <div
-      className="dark:bg-(--color-background-basic-black) bg-(--color-background-basic-white)"
+      className="dark:bg-gray-950 bg-white"
       style={{
         position: 'absolute',
         top: 0,
@@ -367,7 +370,7 @@ export const SessionGrouping = () => {
 
   return (
     <div
-      className="dark:bg-(--color-background-basic-black) bg-(--color-background-basic-white)"
+      className="dark:bg-gray-950 bg-white"
       style={{
         position: 'absolute',
         top: 0,
@@ -423,7 +426,7 @@ export const HundredSessions = () => {
 
   return (
     <div
-      className="dark:bg-(--color-background-basic-black) bg-(--color-background-basic-white)"
+      className="dark:bg-gray-950 bg-white"
       style={{
         position: 'absolute',
         top: 0,
@@ -474,7 +477,7 @@ export const HundredConversations = () => {
 
   return (
     <div
-      className="dark:bg-(--color-background-basic-black) bg-(--color-background-basic-white)"
+      className="dark:bg-gray-950 bg-white"
       style={{
         position: 'absolute',
         top: 0,
@@ -498,7 +501,7 @@ export const HundredConversations = () => {
 
         <SessionMessagePanel>
           <SessionMessagesHeader />
-          <SessionMessages />
+          <SessionMessages showScrollBottomButton />
           <ChatInput />
         </SessionMessagePanel>
       </Chat>
@@ -531,7 +534,7 @@ export const LongSessionNames = () => {
 
   return (
     <div
-      className="dark:bg-(--color-background-basic-black) bg-(--color-background-basic-white)"
+      className="dark:bg-gray-950 bg-white"
       style={{
         position: 'absolute',
         top: 0,
@@ -648,7 +651,7 @@ export const MarkdownShowcase = () => {
 
   return (
     <div
-      className="dark:bg-(--color-background-basic-black) bg-(--color-background-basic-white)"
+      className="dark:bg-gray-950 bg-white"
       style={{
         position: 'absolute',
         top: 0,
@@ -695,7 +698,7 @@ export const CVEExample = () => {
   The listed CVEs are critical vulnerabilities that need immediate attention.
 
   - CVE-2021-34527
-  - [CVE-2021-44228](https://cve.mitre.org/cgi-bin/cvename.cgi?name=CVE-2021-44228) < Has link
+  - CVE-2021-44228
   - CVE-2021-45046
   `;
 
@@ -718,7 +721,7 @@ export const CVEExample = () => {
 
   return (
     <div
-      className="dark:bg-(--color-background-basic-black) bg-(--color-background-basic-white)"
+      className="dark:bg-gray-950 bg-white"
       style={{
         position: 'absolute',
         top: 0,
@@ -754,7 +757,7 @@ export const CVEExample = () => {
 export const Empty = () => {
   return (
     <div
-      className="dark:bg-(--color-background-basic-black) bg-(--color-background-basic-white)"
+      className="dark:bg-gray-950 bg-white"
       style={{
         position: 'absolute',
         top: 0,
@@ -817,7 +820,7 @@ export const Empty = () => {
 export const ConversationSources = () => {
   return (
     <div
-      className="dark:bg-(--color-background-basic-black) bg-(--color-background-basic-white)"
+      className="dark:bg-gray-950 bg-white"
       style={{
         position: 'absolute',
         top: 0,
@@ -954,7 +957,7 @@ const CustomSessionListItem: FC<SessionListItemProps> = ({
 export const CustomComponents = () => {
   return (
     <div
-      className="dark:bg-(--color-background-basic-black) bg-(--color-background-basic-white)"
+      className="dark:bg-gray-950 bg-white"
       style={{
         position: 'absolute',
         top: 0,
@@ -1038,25 +1041,25 @@ export const ImageFiles = () => {
       id: '1',
       name: 'landscape.jpg',
       type: 'image/jpeg',
-      url: 'https://picsum.photos/200?random=1'
+      url: 'https://www.goodcode.us/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Faustin.1ee6ee64.jpg&w=640&q=75'
     },
     {
       id: '2',
       name: 'portrait.jpg',
       type: 'image/jpeg',
-      url: 'https://picsum.photos/200?random=2'
+      url: 'https://www.goodcode.us/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fandrew.50c21037.jpeg&w=640&q=75'
     },
     {
       id: '3',
       name: 'abstract.png',
       type: 'image/jpg',
-      url: 'https://picsum.photos/200?random=3'
+      url: 'https://www.goodcode.us/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fkyle.52befaed.jpg&w=640&q=75'
     },
     {
       id: '4',
       name: 'nature.jpg',
       type: 'image/jpeg',
-      url: 'https://picsum.photos/200?random=4'
+      url: 'https://www.goodcode.us/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fsteph.8a52b5d2.jpg&w=640&q=75'
     }
   ];
 
@@ -1089,7 +1092,7 @@ export const ImageFiles = () => {
 
   return (
     <div
-      className="dark:bg-(--color-background-basic-black) bg-(--color-background-basic-white)"
+      className="dark:bg-gray-950 bg-white"
       style={{
         position: 'absolute',
         top: 0,
@@ -1124,7 +1127,7 @@ export const ImageFiles = () => {
 export const CSVPreview = () => {
   return (
     <div
-      className="dark:bg-(--color-background-basic-black) bg-(--color-background-basic-white)"
+      className="dark:bg-gray-950 bg-white"
       style={{
         position: 'absolute',
         inset: 0,
@@ -1152,3 +1155,140 @@ export const CSVPreview = () => {
     </div>
   );
 };
+
+export const WithToolStatus = () => {
+  const [status, setStatus] = useState<MessageStatusState>('loading');
+  const [steps, setSteps] = useState<MessageStatusStep[]>([
+    { id: '1', text: 'Reading src/index.ts', status: 'loading' }
+  ]);
+
+  useEffect(() => {
+    const timeline = [
+      {
+        delay: 1500,
+        action: () => {
+          setSteps(prev =>
+            prev.map(s => (s.id === '1' ? { ...s, status: 'complete' as const } : s))
+          );
+        }
+      },
+      {
+        delay: 2000,
+        action: () => {
+          setSteps(prev => [
+            ...prev,
+            { id: '2', text: 'Searching for dependencies', status: 'loading' as const }
+          ]);
+        }
+      },
+      {
+        delay: 3500,
+        action: () => {
+          setSteps(prev =>
+            prev.map(s => (s.id === '2' ? { ...s, status: 'complete' as const } : s))
+          );
+        }
+      },
+      {
+        delay: 4000,
+        action: () => {
+          setSteps(prev => [
+            ...prev,
+            { id: '3', text: 'Analyzing code patterns', status: 'loading' as const }
+          ]);
+        }
+      },
+      {
+        delay: 6000,
+        action: () => {
+          setSteps(prev =>
+            prev.map(s => (s.id === '3' ? { ...s, status: 'complete' as const } : s))
+          );
+          setStatus('complete');
+        }
+      }
+    ];
+
+    const timeouts = timeline.map(item => setTimeout(item.action, item.delay));
+    return () => timeouts.forEach(clearTimeout);
+  }, []);
+
+  const sessionWithToolStatus: Session[] = [
+    {
+      id: 'session-tool-status',
+      title: 'Tool Status Demo',
+      createdAt: subHours(new Date(), 1),
+      updatedAt: new Date(),
+      conversations: [
+        {
+          id: 'conversation-1',
+          question: 'Can you analyze my codebase and find any issues?',
+          response:
+            'I\'ll analyze your codebase now. Let me read through the files and check for any potential issues.',
+          createdAt: new Date()
+        }
+      ]
+    }
+  ];
+
+  return (
+    <div
+      className="dark:bg-gray-950 bg-white"
+      style={{
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        padding: 20,
+        margin: 20,
+        borderRadius: 5
+      }}
+    >
+      <Chat
+        viewType="console"
+        sessions={sessionWithToolStatus}
+        activeSessionId="session-tool-status"
+        isLoading={status === 'loading'}
+      >
+        <SessionsList>
+          <NewSessionButton />
+          <SessionGroups />
+        </SessionsList>
+
+        <SessionMessagePanel>
+          <SessionMessagesHeader />
+          <SessionMessages>
+            {conversations =>
+              conversations.map((conversation, index) => (
+                <SessionMessage
+                  conversation={conversation}
+                  isLast={index === conversations.length - 1}
+                  key={conversation.id}
+                >
+                  <MessageQuestion
+                    question={conversation.question}
+                    files={conversation.files}
+                  />
+                  <MessageResponse response={conversation.response} />
+                  <div className="mt-4">
+                    <MessageStatus
+                      status={status}
+                      text={status === 'complete' ? 'Analysis complete' : 'Analyzing codebase...'}
+                      steps={steps}
+                    />
+                  </div>
+                  <MessageActions
+                    question={conversation.question}
+                    response={conversation.response}
+                  />
+                </SessionMessage>
+              ))
+            }
+          </SessionMessages>
+          <ChatInput />
+        </SessionMessagePanel>
+      </Chat>
+    </div>
+  );
+};

package/dist/stories/EnhancedInput.stories.tsx

@@ -0,0 +1,322 @@
+import { Meta, StoryFn } from '@storybook/react';
+import { useState, useCallback } from 'react';
+import {
+  Chat,
+  SessionMessages,
+  ChatInput,
+  SessionMessagePanel,
+  Session,
+  MentionItem,
+  SlashCommandItem
+} from 'reachat';
+import { fakeSessions } from './examples';
+
+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 CommandIcon = () => (
+  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className="w-full h-full">
+    <path d="M18 3a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3H6a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3V6a3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3h12a3 3 0 0 0 3-3 3 3 0 0 0-3-3z" />
+  </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>
+);
+
+export default {
+  title: 'Demos/Enhanced Input',
+  component: ChatInput
+} as Meta;
+
+const sampleUsers: 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 /> },
+  { id: '4', label: 'Alice Brown', description: 'Marketing', icon: <UserIcon /> },
+  { id: '5', label: 'Charlie Davis', description: 'Sales', 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 />,
+    type: 'action'
+  },
+  {
+    id: 'code',
+    label: 'code',
+    description: 'Insert a code block',
+    icon: <CommandIcon />,
+    type: 'insert',
+    value: '```\n\n```'
+  },
+  {
+    id: 'summarize',
+    label: 'summarize',
+    description: 'Summarize the conversation',
+    icon: <CommandIcon />
+  }
+];
+
+export const WithMentions: StoryFn = () => {
+  const [activeId, setActiveId] = useState<string>(fakeSessions[0].id);
+  const [sessions, setSessions] = useState<Session[]>(fakeSessions);
+
+  return (
+    <div
+      className="dark:bg-gray-950 bg-white"
+      style={{ width: 500, height: 400, padding: 20, borderRadius: 5 }}
+    >
+      <Chat
+        viewType="chat"
+        sessions={sessions}
+        activeSessionId={activeId}
+        onSelectSession={setActiveId}
+      >
+        <SessionMessagePanel>
+          <SessionMessages />
+          <ChatInput
+            placeholder="Type @ to mention someone..."
+            mentions={{
+              items: sampleUsers,
+            }}
+          />
+        </SessionMessagePanel>
+      </Chat>
+    </div>
+  );
+};
+
+export const WithSlashCommands: StoryFn = () => {
+  const [activeId, setActiveId] = useState<string>(fakeSessions[0].id);
+  const [sessions, setSessions] = useState<Session[]>(fakeSessions);
+
+  const handleCommandSelect = useCallback(
+    (item: SlashCommandItem, insertText: (text: string) => void) => {
+      if (item.type === 'action') {
+        console.log('Executing action:', item.label);
+        insertText('');
+      } else if (item.value) {
+        insertText(item.value);
+      }
+    },
+    []
+  );
+
+  return (
+    <div
+      className="dark:bg-gray-950 bg-white"
+      style={{ width: 500, height: 400, padding: 20, borderRadius: 5 }}
+    >
+      <Chat
+        viewType="chat"
+        sessions={sessions}
+        activeSessionId={activeId}
+        onSelectSession={setActiveId}
+      >
+        <SessionMessagePanel>
+          <SessionMessages />
+          <ChatInput
+            placeholder="Type / for commands..."
+            commands={{
+              items: sampleCommands,
+              onSelect: handleCommandSelect,
+            }}
+          />
+        </SessionMessagePanel>
+      </Chat>
+    </div>
+  );
+};
+
+export const WithAllFeatures: StoryFn = () => {
+  const [activeId, setActiveId] = useState<string>(fakeSessions[0].id);
+  const [sessions, setSessions] = useState<Session[]>(fakeSessions);
+
+  const handleCommandSelect = useCallback(
+    (item: SlashCommandItem, insertText: (text: string) => void) => {
+      if (item.type === 'action') {
+        console.log('Executing action:', item.label);
+        insertText('');
+      } else if (item.value) {
+        insertText(item.value);
+      }
+    },
+    []
+  );
+
+  return (
+    <div
+      className="dark:bg-gray-950 bg-white"
+      style={{ width: 600, height: 500, padding: 20, borderRadius: 5 }}
+    >
+      <Chat
+        viewType="chat"
+        sessions={sessions}
+        activeSessionId={activeId}
+        onSelectSession={setActiveId}
+      >
+        <SessionMessagePanel>
+          <SessionMessages />
+          <ChatInput
+            placeholder="Type @ for mentions, / for commands..."
+            mentions={{
+              items: sampleUsers,
+            }}
+            commands={{
+              items: sampleCommands,
+              onSelect: handleCommandSelect,
+            }}
+          />
+        </SessionMessagePanel>
+      </Chat>
+    </div>
+  );
+};
+
+export const WithAsyncSearch: StoryFn = () => {
+  const [activeId, setActiveId] = useState<string>(fakeSessions[0].id);
+  const [sessions, setSessions] = useState<Session[]>(fakeSessions);
+
+  const searchUsers = useCallback(async (query: string): Promise<MentionItem[]> => {
+    await new Promise(resolve => setTimeout(resolve, 500));
+
+    const filtered = sampleUsers.filter(
+      user =>
+        user.label.toLowerCase().includes(query.toLowerCase()) ||
+        user.description?.toLowerCase().includes(query.toLowerCase())
+    );
+
+    return filtered;
+  }, []);
+
+  return (
+    <div
+      className="dark:bg-gray-950 bg-white"
+      style={{ width: 500, height: 400, padding: 20, borderRadius: 5 }}
+    >
+      <Chat
+        viewType="chat"
+        sessions={sessions}
+        activeSessionId={activeId}
+        onSelectSession={setActiveId}
+      >
+        <SessionMessagePanel>
+          <SessionMessages />
+          <ChatInput
+            placeholder="Type @ to search team members (async)..."
+            mentions={{
+              items: sampleUsers,
+              onSearch: searchUsers,
+              renderEmpty: query => <span>No users found matching "{query}"</span>
+            }}
+          />
+        </SessionMessagePanel>
+      </Chat>
+    </div>
+  );
+};
+
+export const MultiLineEmpty: StoryFn = () => {
+  const [activeId, setActiveId] = useState<string>(fakeSessions[0].id);
+  const [sessions, setSessions] = useState<Session[]>(fakeSessions);
+
+  return (
+    <div
+      className="dark:bg-gray-950 bg-white"
+      style={{ width: 500, height: 400, padding: 20, borderRadius: 5 }}
+    >
+      <Chat
+        viewType="chat"
+        sessions={sessions}
+        activeSessionId={activeId}
+        onSelectSession={setActiveId}
+      >
+        <SessionMessagePanel>
+          <SessionMessages />
+          <ChatInput
+            placeholder="Type a multi-line message (max 4 lines visible)..."
+            minHeight={88}
+            maxHeight={88}
+          />
+        </SessionMessagePanel>
+      </Chat>
+    </div>
+  );
+};
+
+export const MultiLineWithContent: StoryFn = () => {
+  const [activeId, setActiveId] = useState<string>(fakeSessions[0].id);
+  const [sessions, setSessions] = useState<Session[]>(fakeSessions);
+
+  const defaultMultiLineText = `This is line one of the input.
+This is line two of the input.
+This is line three of the input.
+This is line four of the input.
+This is line five - you should scroll to see this.
+This is line six - still scrolling!`;
+
+  return (
+    <div
+      className="dark:bg-gray-950 bg-white"
+      style={{ width: 500, height: 400, padding: 20, borderRadius: 5 }}
+    >
+      <Chat
+        viewType="chat"
+        sessions={sessions}
+        activeSessionId={activeId}
+        onSelectSession={setActiveId}
+      >
+        <SessionMessagePanel>
+          <SessionMessages />
+          <ChatInput
+            placeholder="Type a multi-line message..."
+            defaultValue={defaultMultiLineText}
+            minHeight={88}
+            maxHeight={88}
+          />
+        </SessionMessagePanel>
+      </Chat>
+    </div>
+  );
+};

package/dist/stories/Integration.stories.tsx

@@ -126,7 +126,7 @@ export const _OpenAI = () => {
         onChange={e => setApiKey(e.target.value)}
       />
       <div
-        className="dark:bg-(--color-background-basic-black) bg-(--color-background-basic-white)"
+        className="dark:bg-gray-950 bg-white"
         style={{
           position: 'absolute',
           top: 50,
@@ -273,7 +273,7 @@ export const VercelAI = () => {
         onChange={e => setApiKey(e.target.value)}
       />
       <div
-        className="dark:bg-(--color-background-basic-black) bg-(--color-background-basic-white)"
+        className="dark:bg-gray-950 bg-white"
         style={{
           position: 'absolute',
           top: 50,