reachat 2.1.0-alpha.20 → 2.1.0-alpha.22

package/dist/stories/Files.stories.tsx

@@ -0,0 +1,348 @@
+import type { Meta } from '@storybook/react';
+import { subHours } from 'date-fns';
+import { cn } from 'reablocks';
+import { useState } from 'react';
+
+import type { Session } from 'reachat';
+import {
+  Chat,
+  ChatInput,
+  NewSessionButton,
+  SessionGroups,
+  SessionMessagePanel,
+  SessionMessages,
+  SessionMessagesHeader,
+  SessionsList
+} from 'reachat';
+import UploadIcon from 'reachat';
+import AttachIcon from './assets/paperclip.svg?react';
+import { sessionsWithFiles, sessionWithCSVFiles } from './examples';
+
+export default {
+  title: 'Demos/Files',
+  component: Chat
+} as Meta;
+
+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 DragAndDrop = () => {
+  const [sessions, setSessions] = useState<Session[]>([
+    {
+      id: 'session-dragdrop',
+      title: 'Drag and Drop Demo',
+      createdAt: subHours(new Date(), 1),
+      updatedAt: new Date(),
+      conversations: [
+        {
+          id: 'conv-1',
+          question: 'Try dragging and dropping files onto the input below!',
+          response:
+            'You can drag and drop files directly onto the chat input. When you start dragging a file over the input area, you will see a visual indicator showing where to drop. This works with any file type that is allowed by the chat input configuration.',
+          createdAt: new Date()
+        }
+      ]
+    }
+  ]);
+  const [uploadedFiles, setUploadedFiles] = useState<File[]>([]);
+
+  const handleFileUpload = (file: File) => {
+    setUploadedFiles(prev => [...prev, file]);
+  };
+
+  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-dragdrop"
+        onSendMessage={message =>
+          setSessions(sessions => {
+            const session = sessions[0];
+            const files = uploadedFiles.map(f => ({
+              name: f.name,
+              size: f.size,
+              type: f.type
+            }));
+            setUploadedFiles([]);
+
+            return [
+              {
+                ...session,
+                conversations: [
+                  ...session.conversations,
+                  {
+                    id: (Math.random() * 100).toString(),
+                    createdAt: new Date(),
+                    question: message,
+                    response: files.length
+                      ? `Received ${files.length} file(s): ${files.map(f => f.name).join(', ')}`
+                      : 'Message received!',
+                    ...(files.length > 0 ? { files } : {})
+                  }
+                ]
+              }
+            ];
+          })
+        }
+        onFileUpload={handleFileUpload}
+        onDeleteSession={() => alert('delete!')}
+      >
+        <SessionsList>
+          <NewSessionButton />
+          <SessionGroups />
+        </SessionsList>
+        <SessionMessagePanel>
+          <SessionMessagesHeader />
+          <SessionMessages />
+          <div className="flex flex-col gap-2">
+            {uploadedFiles.length > 0 && (
+              <div className="flex flex-wrap gap-2 px-2">
+                {uploadedFiles.map((file, idx) => (
+                  <div
+                    key={idx}
+                    className="flex items-center gap-2 bg-gray-100 dark:bg-gray-800 px-3 py-1 rounded-full text-sm"
+                  >
+                    <span>{file.name}</span>
+                    <button
+                      onClick={() =>
+                        setUploadedFiles(prev =>
+                          prev.filter((_, i) => i !== idx)
+                        )
+                      }
+                      className="text-gray-500 hover:text-gray-700 dark:hover:text-gray-300"
+                    >
+                      ×
+                    </button>
+                  </div>
+                ))}
+              </div>
+            )}
+            <ChatInput
+              allowedFiles={[
+                '.pdf',
+                '.docx',
+                '.txt',
+                '.csv',
+                '.jpg',
+                '.jpeg',
+                '.png',
+                '.gif'
+              ]}
+              allowMultipleFiles
+              dropIcon={<UploadIcon className="w-8 h-8" />}
+              dropText="Drop your files here"
+              placeholder="Type a message or drag files here..."
+            />
+          </div>
+        </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>
+  );
+};
+
+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'
+    }
+  ];
+
+  const sessionWithImages: Session[] = [
+    {
+      id: 'session-images',
+      title: 'Multiple Image Files Showcase',
+      createdAt: subHours(new Date(), 1),
+      updatedAt: new Date(),
+      conversations: [
+        {
+          id: 'conversation-1',
+          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
+        },
+        {
+          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]]
+        }
+      ]
+    }
+  ];
+
+  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={sessionWithImages}
+        activeSessionId="session-images"
+      >
+        <SessionsList>
+          <NewSessionButton />
+          <SessionGroups />
+        </SessionsList>
+
+        <SessionMessagePanel>
+          <SessionMessagesHeader />
+          <SessionMessages />
+          <ChatInput />
+        </SessionMessagePanel>
+      </Chat>
+    </div>
+  );
+};

package/dist/stories/Markdown.stories.tsx

@@ -34,7 +34,7 @@ This risk table uses Dragos ransomware intelligence trends along with Acme Contr
 
 Let me know your next question or if you want me to elaborate on specific risks before we proceed to complete the Strategic Risk Assessment.`;
 
-export const RiskAssessmentTable: Story = {
+export const ComplexTable: Story = {
   render: args => (
     <div className="p-8 bg-background-neutral-canvas-base max-w-full overflow-x-auto">
       <Markdown {...args} remarkPlugins={[remarkGfm, remarkMath, remarkCve]}>
@@ -316,3 +316,110 @@ function greet(name: string): string {
     </div>
   )
 };
+
+export const MarkdownShowcase: Story = {
+  render: args => (
+    <div className="p-8 bg-background-neutral-canvas-base max-w-4xl">
+      <Markdown {...args}>
+        {`
+**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)
+`}
+      </Markdown>
+    </div>
+  )
+};
+
+export const CVEExample: Story = {
+  render: args => (
+    <div className="p-8 bg-background-neutral-canvas-base max-w-4xl">
+      <Markdown {...args} remarkPlugins={[remarkGfm, remarkMath, remarkCve]}>
+        {`
+## 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
+
+The \`remarkCve\` plugin automatically converts CVE identifiers into clickable links.
+`}
+      </Markdown>
+    </div>
+  )
+};
+
+export const Embeds: Story = {
+  render: args => (
+    <div className="p-8 bg-background-neutral-canvas-base max-w-4xl">
+      <Markdown {...args}>
+        {`
+## Watch this video
+
+https://youtu.be/enTFE2c68FQ
+
+https://www.youtube.com/watch?v=enTFE2c68FQ
+
+These links showcase a video about React basics. You can click on either link to watch the video.
+`}
+      </Markdown>
+    </div>
+  )
+};