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

package/dist/stories/Console.stories.tsx

@@ -1,10 +1,8 @@
-import { useState, useRef, FC, useContext } from 'react';
-import AttachIcon from './assets/paperclip.svg?react';
+import { useState, useRef, FC, useContext, useEffect } from 'react';
 import { Meta } from '@storybook/react';
 import {
   Chat,
   Session,
-  remarkCve,
   SessionsList,
   SessionsGroup,
   SessionListItem,
@@ -17,6 +15,9 @@ import {
   SessionMessagesHeader,
   ChatContext,
   SessionMessage,
+  MessageStatus,
+  MessageStatusStep,
+  MessageStatusState
 } from 'reachat';
 import {
   Card,
@@ -29,7 +30,7 @@ import {
   ListItem,
   Menu
 } from 'reablocks';
-import { subDays, subMinutes, subHours } from 'date-fns';
+import { subMinutes, subHours } from 'date-fns';
 import MenuIcon from './assets/menu.svg?react';
 import Placeholder from './assets/placeholder.svg?react';
 import PlaceholderDark from './assets/placeholder-dark.svg?react';
@@ -40,11 +41,9 @@ import { MessageResponse } from 'reachat';
 import { MessageSources } from 'reachat';
 import {
   fakeSessions,
-  fakeSessionsWithEmbeds,
   sessionWithSources,
   sessionsWithFiles,
-  sessionsWithPartialConversation,
-  sessionWithCSVFiles
+  sessionsWithPartialConversation
 } from './examples';
 
 export default {
@@ -86,76 +85,6 @@ export const Basic = () => {
   );
 };
 
-export const Embeds = () => {
-  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
-        sessions={fakeSessionsWithEmbeds}
-        activeSessionId="1"
-        onDeleteSession={() => alert('delete!')}
-      >
-        <SessionsList>
-          <NewSessionButton />
-          <SessionGroups />
-        </SessionsList>
-        <SessionMessagePanel>
-          <SessionMessagesHeader />
-          <SessionMessages />
-          <ChatInput />
-        </SessionMessagePanel>
-      </Chat>
-    </div>
-  );
-};
-
-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 Loading = () => {
   return (
     <div
@@ -193,67 +122,6 @@ export const Loading = () => {
   );
 };
 
-export const FileUploads = () => {
-  const [sessions, setSessions] = useState(sessionsWithFiles);
-  const [selectedFile, setSelectedFile] = useState<File | null>(null);
-
-  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={sessions}
-        activeSessionId="session-files"
-        onSendMessage={(message) => setSessions((sessions) => {
-          const session = sessions[0];
-
-          setSelectedFile(null);
-
-          return [{
-            ...session,
-            conversations: [
-              ...session.conversations,
-              {
-                id: (Math.random() * 100).toString(),
-                createdAt: new Date(),
-                question: message,
-                ...(selectedFile ? { files: [{
-                  name: selectedFile.name,
-                  size: selectedFile.size,
-                  type: selectedFile.type,
-                }]} : [])
-              }
-            ]
-          }];
-        })}
-        onFileUpload={setSelectedFile}
-        onDeleteSession={() => alert('delete!')}
-      >
-        <SessionsList>
-          <NewSessionButton />
-          <SessionGroups />
-        </SessionsList>
-        <SessionMessagePanel>
-          <SessionMessagesHeader />
-          <SessionMessages />
-          <ChatInput attachIcon={<AttachIcon className={cn({'text-green-500': selectedFile})} />} allowedFiles={['.pdf', '.docx']} />
-        </SessionMessagePanel>
-      </Chat>
-    </div>
-  );
-};
-
 export const DefaultInputValue = () => {
   return (
     <div
@@ -283,168 +151,7 @@ export const DefaultInputValue = () => {
         <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 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>
-  );
-};
-
-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 />
+          <ChatInput defaultValue="Hello, tell me more" />
         </SessionMessagePanel>
       </Chat>
     </div>
@@ -498,252 +205,7 @@ export const HundredConversations = () => {
 
         <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: subHours(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? 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? 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? 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? 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? 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? 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? 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? 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? 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? 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? 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? 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? 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 MarkdownShowcase = () => {
-  const markdownQuestion = `
-  **What is the purpose of life?**
-  `;
-
-  const markdownResponse = `
-  **The purpose of life is a philosophical question concerning the significance of life or existence in general.**
-
-  1. Burning of fossil fuels (coal, oil, and natural gas)
-  2. Deforestation and land-use changes
-  3. Industrial processes
-  4. Agriculture and livestock farming
-
-  or
-
-  - Burning
-  - Deforestation
-  - Industrial
-  - Agriculture
-
-  Here is a table to illustrate different perspectives:
-
-  | Perspective       | Description                                                                 |
-  |-------------------|-----------------------------------------------------------------------------|
-  | Religious         | Belief in a higher power or divine purpose.                                 |
-  | Philosophical     | Various theories including existentialism, nihilism, and absurdism.         |
-  | Scientific        | Understanding life through biology, evolution, and the universe.            |
-  | Personal          | Individual goals, happiness, and fulfillment.                               |
-
-  \`\`\`python
-  def purpose_of_life():
-      return 42
-  \`\`\`
-
-  \`\`\`json
-  {
-    "perspectives": [
-      {
-        "type": "Religious",
-        "description": "Belief in a higher power or divine purpose."
-      },
-      {
-        "type": "Philosophical",
-        "description": "Various theories including existentialism, nihilism, and absurdism."
-      },
-      {
-        "type": "Scientific",
-        "description": "Understanding life through biology, evolution, and the universe."
-      },
-      {
-        "type": "Personal",
-        "description": "Individual goals, happiness, and fulfillment."
-      }
-    ]
-  }
-  \`\`\`
-
-  The answer to the ultimate question of life, the universe, and everything is **42**.
-
-  \`\`\`math
-  L = \\frac{1}{2} \\rho v^2 S C_L
-  \`\`\`
-
-  [Perspective](https://en.wikipedia.org/wiki/Philosophical_question)
-  `;
-
-  const sessionWithMarkdown: Session[] = [
-    {
-      id: 'session-markdown',
-      title: 'Markdown Showcase',
-      createdAt: subHours(new Date(), 1),
-      updatedAt: new Date(),
-      conversations: [
-        {
-          id: 'conversation-1',
-          question: markdownQuestion,
-          response: markdownResponse,
-          createdAt: new Date()
-        }
-      ]
-    }
-  ];
-
-  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={sessionWithMarkdown}
-        activeSessionId="session-markdown"
-      >
-        <SessionsList>
-          <NewSessionButton />
-          <SessionGroups />
-        </SessionsList>
-
-        <SessionMessagePanel>
-          <SessionMessagesHeader />
-          <SessionMessages />
-          <ChatInput />
-        </SessionMessagePanel>
-      </Chat>
-    </div>
-  );
-};
-
-export const CVEExample = () => {
-  const markdownQuestion = `# Security Report
-
-  Please review the following CVEs:
-
-  - CVE-2021-34527
-  - CVE-2021-44228
-  - CVE-2021-45046
-  `;
-
-  const markdownResponse = `## Analysis
-
-  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-45046
-  `;
-
-  const sessionWithMarkdown: Session[] = [
-    {
-      id: 'session-cve',
-      title: 'CVE Showcase',
-      createdAt: subHours(new Date(), 1),
-      updatedAt: new Date(),
-      conversations: [
-        {
-          id: 'conversation-1',
-          question: markdownQuestion,
-          response: markdownResponse,
-          createdAt: new Date()
-        }
-      ]
-    }
-  ];
-
-  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={sessionWithMarkdown}
-        activeSessionId="session-cve"
-        remarkPlugins={[remarkCve as any]}
-      >
-        <SessionsList>
-          <NewSessionButton />
-          <SessionGroups />
-        </SessionsList>
-
-        <SessionMessagePanel>
-          <SessionMessagesHeader />
-          <SessionMessages />
+          <SessionMessages showScrollBottomButton />
           <ChatInput />
         </SessionMessagePanel>
       </Chat>
@@ -1032,56 +494,76 @@ export const CustomComponents = () => {
   );
 };
 
-export const ImageFiles = () => {
-  const staticImageFiles = [
-    {
-      id: '1',
-      name: 'landscape.jpg',
-      type: 'image/jpeg',
-      url: 'https://picsum.photos/200?random=1'
-    },
-    {
-      id: '2',
-      name: 'portrait.jpg',
-      type: 'image/jpeg',
-      url: 'https://picsum.photos/200?random=2'
-    },
-    {
-      id: '3',
-      name: 'abstract.png',
-      type: 'image/jpg',
-      url: 'https://picsum.photos/200?random=3'
-    },
-    {
-      id: '4',
-      name: 'nature.jpg',
-      type: 'image/jpeg',
-      url: 'https://picsum.photos/200?random=4'
-    }
-  ];
+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 sessionWithImages: Session[] = [
+    const timeouts = timeline.map(item => setTimeout(item.action, item.delay));
+    return () => timeouts.forEach(clearTimeout);
+  }, []);
+
+  const sessionWithToolStatus: Session[] = [
     {
-      id: 'session-images',
-      title: 'Multiple Image Files Showcase',
+      id: 'session-tool-status',
+      title: 'Tool Status Demo',
       createdAt: subHours(new Date(), 1),
       updatedAt: new Date(),
       conversations: [
         {
           id: 'conversation-1',
-          question: 'Analyze these images and describe what you see.',
+          question: 'Can you analyze my codebase and find any issues?',
           response:
-            'I\'m sorry, but as an AI language model, I cannot actually see or analyze images. I can only process and respond to text input. If you\'d like me to describe or analyze images, you would need to provide detailed textual descriptions of the images.',
-          createdAt: new Date(),
-          files: staticImageFiles
-        },
-        {
-          id: 'conversation-2',
-          question: 'Analyze these images and describe what you see.',
-          response:
-            'I\'m sorry, but as an AI language model, I cannot actually see or analyze images. I can only process and respond to text input. If you\'d like me to describe or analyze images, you would need to provide detailed textual descriptions of the images.',
-          createdAt: new Date(),
-          files: [staticImageFiles[0]]
+            'I\'ll analyze your codebase now. Let me read through the files and check for any potential issues.',
+          createdAt: new Date()
         }
       ]
     }
@@ -1103,8 +585,9 @@ export const ImageFiles = () => {
     >
       <Chat
         viewType="console"
-        sessions={sessionWithImages}
-        activeSessionId="session-images"
+        sessions={sessionWithToolStatus}
+        activeSessionId="session-tool-status"
+        isLoading={status === 'loading'}
       >
         <SessionsList>
           <NewSessionButton />
@@ -1113,42 +596,37 @@ export const ImageFiles = () => {
 
         <SessionMessagePanel>
           <SessionMessagesHeader />
-          <SessionMessages />
+          <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>
   );
 };
-
-export const CSVPreview = () => {
-  return (
-    <div
-      className="dark:bg-(--color-background-basic-black) bg-(--color-background-basic-white)"
-      style={{
-        position: 'absolute',
-        inset: 0,
-        padding: 20,
-        margin: 20,
-        borderRadius: 5
-      }}
-    >
-      <Chat
-        sessions={sessionWithCSVFiles}
-        activeSessionId="1"
-        onDeleteSession={() => alert('delete!')}
-      >
-        <SessionsList>
-          <NewSessionButton />
-          <SessionGroups />
-        </SessionsList>
-
-        <SessionMessagePanel>
-          <SessionMessagesHeader />
-          <SessionMessages />
-          <ChatInput allowedFiles={['.pdf', '.docx', '.csv']} />
-        </SessionMessagePanel>
-      </Chat>
-    </div>
-  );
-};