reachat 2.0.1 → 2.1.0-alpha.1

package/dist/stories/Integration.stories.tsx

@@ -0,0 +1,312 @@
+import { useState, useCallback, useRef, useEffect } from 'react';
+import OpenAI from 'openai';
+import { Meta } from '@storybook/react';
+import {
+  Chat,
+  Session,
+  SessionsList,
+  NewSessionButton,
+  SessionMessages,
+  SessionGroups,
+  ChatInput,
+  SessionMessagePanel,
+  SessionMessagesHeader
+} from 'reachat';
+import { Input } from 'reablocks';
+import { generateText } from 'ai';
+import { createOpenAI } from '@ai-sdk/openai';
+
+export default {
+  title: 'Demos/Integrations',
+  component: Chat
+} as Meta;
+
+export const _OpenAI = () => {
+  const [sessions, setSessions] = useState<Session[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [activeSessionId, setActiveSessionId] = useState(null);
+  const [apiKey, setApiKey] = useState('');
+
+  const openai = useRef<OpenAI | null>(null);
+
+  useEffect(() => {
+    if (apiKey) {
+      openai.current = new OpenAI({
+        apiKey: apiKey,
+        dangerouslyAllowBrowser: true // For demo purposes only
+      });
+    }
+  }, [apiKey]);
+
+  const handleNewMessage = useCallback(
+    async (message: string, sessionId: string = '1') => {
+      setIsLoading(true);
+      try {
+        const response = await openai.current.chat.completions.create({
+          model: 'gpt-3.5-turbo',
+          messages: [{ role: 'user', content: message }]
+        });
+
+        const aiResponse =
+          response.choices[0]?.message?.content ||
+          'Sorry, I couldnt generate a response.';
+
+        setSessions(prevSessions => {
+          const sessionIndex = prevSessions.findIndex(s => s.id === sessionId);
+          if (sessionIndex === -1) {
+            // Create a new session
+            return [
+              ...prevSessions,
+              {
+                id: sessionId,
+                title: message.slice(0, 30),
+                createdAt: new Date(),
+                updatedAt: new Date(),
+                conversations: [
+                  {
+                    id: Date.now().toString(),
+                    question: message,
+                    response: aiResponse,
+                    createdAt: new Date(),
+                    updatedAt: new Date()
+                  }
+                ]
+              }
+            ];
+          } else {
+            // Add to existing session
+            const updatedSessions = [...prevSessions];
+            updatedSessions[sessionIndex] = {
+              ...updatedSessions[sessionIndex],
+              updatedAt: new Date(),
+              conversations: [
+                ...updatedSessions[sessionIndex].conversations,
+                {
+                  id: Date.now().toString(),
+                  question: message,
+                  response: aiResponse,
+                  createdAt: new Date(),
+                  updatedAt: new Date()
+                }
+              ]
+            };
+            return updatedSessions;
+          }
+        });
+
+        setActiveSessionId(sessionId);
+      } catch (error) {
+        console.error('Error calling OpenAI API:', error);
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [openai]
+  );
+
+  const handleDeleteSession = useCallback((sessionId: string) => {
+    setSessions(prevSessions => prevSessions.filter(s => s.id !== sessionId));
+  }, []);
+
+  return (
+    <div
+      style={{
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        padding: 20
+      }}
+    >
+      <Input
+        fullWidth
+        placeholder="OpenAI API Key"
+        value={apiKey}
+        onChange={e => setApiKey(e.target.value)}
+      />
+      <div
+        className="dark:bg-gray-950 bg-white"
+        style={{
+          position: 'absolute',
+          top: 50,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          padding: 20,
+          margin: 20,
+          borderRadius: 5
+        }}
+      >
+        <Chat
+          viewType="console"
+          sessions={sessions}
+          isLoading={isLoading}
+          disabled={!apiKey}
+          onDeleteSession={handleDeleteSession}
+          onSendMessage={handleNewMessage}
+          activeSessionId={activeSessionId}
+        >
+          <SessionsList>
+            <NewSessionButton />
+            <SessionGroups />
+          </SessionsList>
+
+          <SessionMessagePanel>
+            <SessionMessagesHeader />
+            <SessionMessages />
+            <ChatInput />
+          </SessionMessagePanel>
+        </Chat>
+      </div>
+    </div>
+  );
+};
+
+export const VercelAI = () => {
+  const [sessions, setSessions] = useState<Session[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [activeSessionId, setActiveSessionId] = useState<string | null>(null);
+  const [apiKey, setApiKey] = useState('');
+
+  const handleNewMessage = useCallback(
+    async (message: string, sessionId: string | null = null) => {
+      if (!apiKey) {
+        console.error('API key not set');
+        return;
+      }
+
+      setIsLoading(true);
+      try {
+        const openai = createOpenAI({ apiKey });
+        const req = await generateText({
+          model: openai('gpt-3.5-turbo'),
+          prompt: message
+        });
+
+        const response = req.text;
+
+        setSessions(prevSessions => {
+          const newSessionId = sessionId || Date.now().toString();
+          const sessionIndex = prevSessions.findIndex(
+            s => s.id === newSessionId
+          );
+
+          if (sessionIndex === -1) {
+            // Create a new session
+            const newSession: Session = {
+              id: newSessionId,
+              title: message.slice(0, 30),
+              createdAt: new Date(),
+              updatedAt: new Date(),
+              conversations: [
+                {
+                  id: Date.now().toString(),
+                  question: message,
+                  response: response,
+                  createdAt: new Date(),
+                  updatedAt: new Date()
+                }
+              ]
+            };
+            return [...prevSessions, newSession];
+          } else {
+            // Add to existing session
+            const updatedSessions = [...prevSessions];
+            updatedSessions[sessionIndex] = {
+              ...updatedSessions[sessionIndex],
+              updatedAt: new Date(),
+              conversations: [
+                ...updatedSessions[sessionIndex].conversations,
+                {
+                  id: Date.now().toString(),
+                  question: message,
+                  response: response,
+                  createdAt: new Date(),
+                  updatedAt: new Date()
+                }
+              ]
+            };
+            return updatedSessions;
+          }
+        });
+
+        setActiveSessionId(sessionId || Date.now().toString());
+      } catch (error) {
+        console.error('Error generating text:', error);
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [apiKey]
+  );
+
+  const handleDeleteSession = useCallback(
+    (sessionId: string) => {
+      setSessions(prevSessions => prevSessions.filter(s => s.id !== sessionId));
+      if (activeSessionId === sessionId) {
+        setActiveSessionId(null);
+      }
+    },
+    [activeSessionId]
+  );
+
+  const handleNewSession = useCallback(() => {
+    setActiveSessionId(null);
+  }, []);
+
+  return (
+    <div
+      style={{
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        padding: 20
+      }}
+    >
+      <Input
+        fullWidth
+        placeholder="OpenAI API Key"
+        value={apiKey}
+        onChange={e => setApiKey(e.target.value)}
+      />
+      <div
+        className="dark:bg-gray-950 bg-white"
+        style={{
+          position: 'absolute',
+          top: 50,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          padding: 20,
+          margin: 20,
+          borderRadius: 5
+        }}
+      >
+        <Chat
+          viewType="console"
+          sessions={sessions}
+          isLoading={isLoading}
+          disabled={!apiKey}
+          onSendMessage={handleNewMessage}
+          onDeleteSession={handleDeleteSession}
+          activeSessionId={activeSessionId}
+          onSelectSession={setActiveSessionId}
+        >
+          <SessionsList>
+            <NewSessionButton />
+            <SessionGroups />
+          </SessionsList>
+
+          <SessionMessagePanel>
+            <SessionMessagesHeader />
+            <SessionMessages />
+            <ChatInput />
+          </SessionMessagePanel>
+        </Chat>
+      </div>
+    </div>
+  );
+};

package/dist/stories/Intro.mdx

@@ -0,0 +1,41 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Docs/Intro" />
+
+<div style={{ margin: '0 auto', maxWidth: '600px', color: 'white', textAlign: 'center', display: 'flex', flexDirection: 'column' }}>
+  <img
+    style={{ width: '75%', margin: '0 auto 2em auto' }}
+    src="https://raw.githubusercontent.com/reaviz/reachat/refs/heads/master/src/assets/logo/logo.png"
+  />
+  <br />
+  <div style={{ display: 'flex' }}>
+    <a href="https://github.com/reaviz/reachat/actions/workflows/build.yml" target="_blank">
+      <img src="https://github.com/reaviz/reachat/actions/workflows/build.yml/badge.svg" />
+    </a>
+    <span>&nbsp;&nbsp;</span>
+    <a href="https://npm.im/reachat" target="_blank">
+      <img src="https://img.shields.io/npm/v/reachat.svg" />
+    </a>
+    <span>&nbsp;&nbsp;</span>
+    <a href="https://npm.im/reachat" target="_blank">
+      <img src="https://badgen.net/npm/dw/reachat" />
+    </a>
+    <span>&nbsp;&nbsp;</span>
+    <a href="https://github.com/reaviz/reachat/blob/master/LICENSE" target="_blank">
+      <img src="https://badgen.now.sh/badge/license/apache2" />
+    </a>
+    <span>&nbsp;&nbsp;</span>
+    <a href="https://github.com/reaviz/reachat" target="_blank">
+      <img alt="GitHub stars" src="https://img.shields.io/github/stars/reaviz/reachat?style=social" />
+    </a>
+    <span>&nbsp;&nbsp;</span>
+    <a href="https://discord.gg/tt8wGExq35" target="_blank">
+      <img src="https://img.shields.io/discord/773948315037073409?label=discord" />
+    </a>
+  </div>
+  <br />
+
+  ---
+
+  reachat is a set o building blocks for LLM UIs
+</div>

package/dist/stories/Support.mdx

@@ -0,0 +1,9 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Docs/Support" />
+
+# Support
+
+We encourage users to make PRs and [log tickets](https://github.com/reaviz/reachat/issues) for issues. We will try to respond to them as quickly as possible
+but if you are in need of extra support, our team at [Good Code](https://goodcode.us?utm=reachat) is here to help. Reach out
+to us today to discuss our packages and support plans.

package/dist/stories/assets/chat-voice-fill.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="chat-voice-fill">
+<path id="Vector" d="M3.28596 12.714C2.07954 11.5076 1.33334 9.84091 1.33334 7.99998C1.33334 4.31808 4.31811 1.33331 8.00001 1.33331C11.6819 1.33331 14.6667 4.31808 14.6667 7.99998C14.6667 11.6818 11.6819 14.6666 8.00001 14.6666H1.33334L3.28596 12.714ZM7.33334 3.99998V12H8.66668V3.99998H7.33334ZM4.66668 5.99998V9.99998H6.00001V5.99998H4.66668ZM10 5.99998V9.99998H11.3333V5.99998H10Z" fill="currentColor"/>
+</g>
+</svg>

package/dist/stories/assets/close-fill.svg

@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="close-fill">
+<path id="Vector" d="M9.99975 8.82208L14.1246 4.69727L15.3031 5.87577L11.1782 10.0006L15.3031 14.1253L14.1246 15.3038L9.99975 11.1791L5.87497 15.3038L4.69645 14.1253L8.82125 10.0006L4.69645 5.87577L5.87497 4.69727L9.99975 8.82208Z" fill="#EEEEF0"/>
+</g>
+</svg>

package/dist/stories/assets/logo.svg

@@ -0,0 +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="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/menu.svg

@@ -0,0 +1 @@
+<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-ellipsis-vertical"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>

package/dist/stories/assets/paperclip.svg

@@ -0,0 +1 @@
+<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>