reachat 2.1.2 → 2.2.0

package/dist/stories/AgUi.stories.tsx

@@ -0,0 +1,118 @@
+import { FC, ReactNode, useState } from 'react';
+import { Meta } from '@storybook/react';
+import {
+  Chat,
+  SessionsList,
+  NewSessionButton,
+  SessionMessages,
+  SessionGroups,
+  ChatInput,
+  SessionMessagePanel,
+  SessionMessagesHeader,
+  useAgUi,
+  UseAgUiOptions
+} from 'reachat';
+import { Input } from 'reablocks';
+
+export default {
+  title: 'Demos/AG-UI Protocol',
+  component: Chat
+} as Meta;
+
+const AgUiStory: FC<{ options?: Partial<UseAgUiOptions>; children?: ReactNode }> = ({
+  options
+}) => {
+  const [endpoint, setEndpoint] = useState('');
+
+  const agui = useAgUi({
+    agent: endpoint || 'http://localhost:3000/api/agent',
+    onError: err => console.error('AG-UI error:', err),
+    onEvent: event => console.log('AG-UI event:', event),
+    ...options
+  });
+
+  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,
+        display: 'flex',
+        flexDirection: 'column',
+        overflow: 'hidden'
+      }}
+    >
+      <div style={{ paddingBottom: 8, flexShrink: 0 }}>
+        <Input
+          placeholder="AG-UI agent endpoint URL"
+          value={endpoint}
+          onChange={e => setEndpoint((e.target as HTMLInputElement).value)}
+        />
+      </div>
+      <Chat
+        style={{ flex: 1, minHeight: 0 }}
+        viewType="console"
+        sessions={agui.sessions}
+        activeSessionId={agui.activeSessionId}
+        isLoading={agui.isLoading}
+        onSelectSession={agui.selectSession}
+        onDeleteSession={agui.deleteSession}
+        onNewSession={agui.createSession}
+        onSendMessage={agui.sendMessage}
+        onStopMessage={agui.stopMessage}
+      >
+        <SessionsList>
+          <NewSessionButton />
+          <SessionGroups />
+        </SessionsList>
+        <SessionMessagePanel>
+          <SessionMessagesHeader />
+          <SessionMessages />
+          <ChatInput />
+        </SessionMessagePanel>
+      </Chat>
+    </div>
+  );
+};
+
+export const Basic = () => <AgUiStory />;
+
+export const WithToolCalls = () => (
+  <AgUiStory
+    options={{
+      tools: [
+        {
+          name: 'get_weather',
+          description: 'Get the current weather for a location',
+          parameters: {
+            type: 'object',
+            properties: {
+              location: {
+                type: 'string',
+                description: 'City name'
+              }
+            },
+            required: ['location']
+          }
+        }
+      ],
+      onToolCall: async toolCall => {
+        console.log('Tool called:', toolCall);
+        if (toolCall.toolCallName === 'get_weather') {
+          const args = JSON.parse(toolCall.args);
+          console.log('Weather result:', {
+            location: args.location,
+            temperature: 72,
+            condition: 'sunny'
+          });
+        }
+      }
+    }}
+  />
+);

package/dist/stories/Chat.stories.tsx

@@ -11,7 +11,8 @@ import {
 import {
   fakeSessions,
   sessionWithSources,
-  sessionsWithFiles
+  sessionsWithFiles,
+  createSendMessageHandler
 } from './examples';
 import { useState } from 'react';
 import Placeholder from './assets/placeholder.svg?react';
@@ -64,6 +65,7 @@ export const Compact = () => {
         }}
         onSelectSession={setActiveId}
         onDeleteSession={() => alert('delete!')}
+        onSendMessage={createSendMessageHandler(setSessions, activeId)}
       >
         <SessionMessagePanel>
           <SessionMessages />
@@ -116,6 +118,7 @@ export const FullScreen = () => {
         }}
         onSelectSession={setActiveId}
         onDeleteSession={() => alert('delete!')}
+        onSendMessage={createSendMessageHandler(setSessions, activeId)}
       >
         <SessionMessagePanel>
           <SessionMessages />
@@ -160,6 +163,7 @@ export const Empty = () => {
         }}
         onSelectSession={setActiveId}
         onDeleteSession={() => alert('delete!')}
+        onSendMessage={createSendMessageHandler(setSessions, activeId)}
       >
         <SessionMessagePanel>
           <SessionMessages
@@ -229,6 +233,7 @@ export const WithAppBar = () => {
         }}
         onSelectSession={setActiveId}
         onDeleteSession={() => alert('delete!')}
+        onSendMessage={createSendMessageHandler(setSessions, activeId)}
       >
         <div className="flex flex-col h-full">
           <AppBar

package/dist/stories/ChatSuggestions.stories.tsx

@@ -13,7 +13,11 @@ import {
   ChatSuggestions,
   Suggestion
 } from 'reachat';
-import { defaultSuggestions, sessionWithSuggestions } from './examples';
+import {
+  defaultSuggestions,
+  sessionWithSuggestions,
+  createSendMessageHandler
+} from './examples';
 import Placeholder from './assets/placeholder.svg?react';
 import PlaceholderDark from './assets/placeholder-dark.svg?react';
 import SparklesIcon from './assets/sparkles.svg?react';
@@ -46,26 +50,7 @@ export const Basic = () => {
         sessions={sessions}
         activeSessionId={activeId}
         onSelectSession={setActiveId}
-        onSendMessage={message => {
-          setSessions(prev =>
-            prev.map(session =>
-              session.id === activeId
-                ? {
-                    ...session,
-                    conversations: [
-                      ...session.conversations,
-                      {
-                        id: Date.now().toString(),
-                        question: message,
-                        response: 'This is a response to your question.',
-                        createdAt: new Date()
-                      }
-                    ]
-                  }
-                : session
-            )
-          );
-        }}
+        onSendMessage={createSendMessageHandler(setSessions, activeId)}
         onDeleteSession={() => alert('delete!')}
       >
         <SessionsList>
@@ -128,26 +113,7 @@ export const LongSuggestions = () => {
         sessions={sessions}
         activeSessionId={activeId}
         onSelectSession={setActiveId}
-        onSendMessage={message => {
-          setSessions(prev =>
-            prev.map(session =>
-              session.id === activeId
-                ? {
-                    ...session,
-                    conversations: [
-                      ...session.conversations,
-                      {
-                        id: Date.now().toString(),
-                        question: message,
-                        response: 'This is a response to your question.',
-                        createdAt: new Date()
-                      }
-                    ]
-                  }
-                : session
-            )
-          );
-        }}
+        onSendMessage={createSendMessageHandler(setSessions, activeId)}
         onDeleteSession={() => alert('delete!')}
       >
         <SessionsList>
@@ -294,26 +260,7 @@ export const Companion = () => {
         sessions={sessions}
         activeSessionId={activeId}
         onSelectSession={setActiveId}
-        onSendMessage={message => {
-          setSessions(prev =>
-            prev.map(session =>
-              session.id === activeId
-                ? {
-                    ...session,
-                    conversations: [
-                      ...session.conversations,
-                      {
-                        id: Date.now().toString(),
-                        question: message,
-                        response: 'This is a response to your question.',
-                        createdAt: new Date()
-                      }
-                    ]
-                  }
-                : session
-            )
-          );
-        }}
+        onSendMessage={createSendMessageHandler(setSessions, activeId)}
         onDeleteSession={() => alert('delete!')}
       >
         <SessionsList>
@@ -360,26 +307,7 @@ export const CustomItemRendering = () => {
         sessions={sessions}
         activeSessionId={activeId}
         onSelectSession={setActiveId}
-        onSendMessage={message => {
-          setSessions(prev =>
-            prev.map(session =>
-              session.id === activeId
-                ? {
-                    ...session,
-                    conversations: [
-                      ...session.conversations,
-                      {
-                        id: Date.now().toString(),
-                        question: message,
-                        response: 'This is a response to your question.',
-                        createdAt: new Date()
-                      }
-                    ]
-                  }
-                : session
-            )
-          );
-        }}
+        onSendMessage={createSendMessageHandler(setSessions, activeId)}
         onDeleteSession={() => alert('delete!')}
       >
         <SessionsList>

package/dist/stories/Companion.stories.tsx

@@ -16,7 +16,8 @@ import {
   fakeSessions,
   sessionWithSources,
   sessionsWithFiles,
-  chatTemplates
+  chatTemplates,
+  createSendMessageHandler
 } from './examples';
 import { useState, memo, useCallback } from 'react';
 import { IconButton } from 'reablocks';
@@ -69,6 +70,7 @@ export const Basic = () => {
         }}
         onSelectSession={setActiveId}
         onDeleteSession={() => alert('delete!')}
+        onSendMessage={createSendMessageHandler(setSessions, activeId)}
       >
         <SessionsList>
           <NewSessionButton />
@@ -161,6 +163,7 @@ export const WithAppBar = () => {
         }}
         onSelectSession={setActiveId}
         onDeleteSession={() => alert('delete!')}
+        onSendMessage={createSendMessageHandler(setSessions, activeId)}
       >
         <AppBar
           content={
@@ -256,6 +259,7 @@ export const TemplatesView = () => {
         activeSessionId={activeId}
         onSelectSession={setActiveId}
         onDeleteSession={() => alert('delete!')}
+        onSendMessage={createSendMessageHandler(setSessions, activeId)}
       >
         <div className="flex flex-col h-full">
           <div className="flex-1 overflow-y-auto">
@@ -321,6 +325,7 @@ export const TemplatesViewWithTitle = () => {
         activeSessionId={activeId}
         onSelectSession={setActiveId}
         onDeleteSession={() => alert('delete!')}
+        onSendMessage={createSendMessageHandler(setSessions, activeId)}
       >
         <div className="dark:text-white text-gray-500 w-full h-full overflow-hidden flex flex-col">
           <div className="flex-1 overflow-y-auto">
@@ -398,6 +403,7 @@ export const TemplatesViewWithAppBar = () => {
           activeSessionId={activeId}
           onSelectSession={setActiveId}
           onDeleteSession={() => alert('delete!')}
+          onSendMessage={createSendMessageHandler(setSessions, activeId)}
         >
           <div className="dark:text-white text-gray-500 w-full h-full overflow-hidden flex flex-col">
             <div className="flex-1 overflow-y-auto">

package/dist/stories/Console.stories.tsx

@@ -47,7 +47,8 @@ import {
   sessionWithSources,
   sessionsWithFiles,
   sessionsWithPartialConversation,
-  sessionWithCSVFiles
+  sessionWithCSVFiles,
+  createSendMessageHandler
 } from './examples';
 
 export default {
@@ -56,6 +57,9 @@ export default {
 } as Meta;
 
 export const Basic = () => {
+  const [activeId, setActiveId] = useState<string>(fakeSessions[0].id);
+  const [sessions, setSessions] = useState<Session[]>(fakeSessions);
+
   return (
     <div
       className="dark:bg-gray-950 bg-white"
@@ -71,9 +75,12 @@ export const Basic = () => {
       }}
     >
       <Chat
-        sessions={fakeSessions}
+        sessions={sessions}
+        activeSessionId={activeId}
         viewType="console"
+        onSelectSession={setActiveId}
         onDeleteSession={() => alert('delete!')}
+        onSendMessage={createSendMessageHandler(setSessions, activeId)}
       >
         <SessionsList>
           <NewSessionButton />
@@ -90,6 +97,9 @@ export const Basic = () => {
 };
 
 export const Embeds = () => {
+  const [activeId, setActiveId] = useState<string>('1');
+  const [sessions, setSessions] = useState<Session[]>(fakeSessionsWithEmbeds);
+
   return (
     <div
       className="dark:bg-gray-950 bg-white"
@@ -105,9 +115,11 @@ export const Embeds = () => {
       }}
     >
       <Chat
-        sessions={fakeSessionsWithEmbeds}
-        activeSessionId="1"
+        sessions={sessions}
+        activeSessionId={activeId}
+        onSelectSession={setActiveId}
         onDeleteSession={() => alert('delete!')}
+        onSendMessage={createSendMessageHandler(setSessions, activeId)}
       >
         <SessionsList>
           <NewSessionButton />
@@ -124,6 +136,9 @@ export const Embeds = () => {
 };
 
 export const DefaultSession = () => {
+  const [activeId, setActiveId] = useState<string>('1');
+  const [sessions, setSessions] = useState<Session[]>(fakeSessions);
+
   return (
     <div
       className="dark:bg-gray-950 bg-white"
@@ -140,9 +155,11 @@ export const DefaultSession = () => {
     >
       <Chat
         viewType="console"
-        sessions={fakeSessions}
-        activeSessionId="1"
+        sessions={sessions}
+        activeSessionId={activeId}
+        onSelectSession={setActiveId}
         onDeleteSession={() => alert('delete!')}
+        onSendMessage={createSendMessageHandler(setSessions, activeId)}
       >
         <SessionsList>
           <NewSessionButton />
@@ -258,6 +275,9 @@ export const FileUploads = () => {
 };
 
 export const DefaultInputValue = () => {
+  const [activeId, setActiveId] = useState<string>('1');
+  const [sessions, setSessions] = useState<Session[]>(fakeSessions);
+
   return (
     <div
       className="dark:bg-gray-950 bg-white"
@@ -274,9 +294,11 @@ export const DefaultInputValue = () => {
     >
       <Chat
         viewType="console"
-        sessions={fakeSessions}
-        activeSessionId="1"
+        sessions={sessions}
+        activeSessionId={activeId}
+        onSelectSession={setActiveId}
         onDeleteSession={() => alert('delete!')}
+        onSendMessage={createSendMessageHandler(setSessions, activeId)}
       >
         <SessionsList>
           <NewSessionButton />
@@ -294,6 +316,9 @@ export const DefaultInputValue = () => {
 };
 
 export const UndeleteableSessions = () => {
+  const [activeId, setActiveId] = useState<string>('1');
+  const [sessions, setSessions] = useState<Session[]>(fakeSessions);
+
   return (
     <div
       className="dark:bg-gray-950 bg-white"
@@ -308,7 +333,13 @@ export const UndeleteableSessions = () => {
         borderRadius: 5
       }}
     >
-      <Chat viewType="console" sessions={fakeSessions} activeSessionId="1">
+      <Chat
+        viewType="console"
+        sessions={sessions}
+        activeSessionId={activeId}
+        onSelectSession={setActiveId}
+        onSendMessage={createSendMessageHandler(setSessions, activeId)}
+      >
         <SessionsList>
           <NewSessionButton />
           <SessionGroups>
@@ -818,6 +849,9 @@ export const Empty = () => {
 };
 
 export const ConversationSources = () => {
+  const [activeId, setActiveId] = useState<string>('session-sources');
+  const [sessions, setSessions] = useState<Session[]>(sessionWithSources);
+
   return (
     <div
       className="dark:bg-gray-950 bg-white"
@@ -834,8 +868,10 @@ export const ConversationSources = () => {
     >
       <Chat
         viewType="console"
-        sessions={sessionWithSources}
-        activeSessionId="session-sources"
+        sessions={sessions}
+        activeSessionId={activeId}
+        onSelectSession={setActiveId}
+        onSendMessage={createSendMessageHandler(setSessions, activeId)}
       >
         <SessionsList>
           <NewSessionButton />
@@ -955,6 +991,13 @@ const CustomSessionListItem: FC<SessionListItemProps> = ({
 };
 
 export const CustomComponents = () => {
+  const [activeId, setActiveId] = useState<string>('1');
+  const [sessions, setSessions] = useState<Session[]>([
+    ...fakeSessions,
+    ...sessionsWithFiles,
+    ...sessionWithSources
+  ]);
+
   return (
     <div
       className="dark:bg-gray-950 bg-white"
@@ -970,12 +1013,10 @@ export const CustomComponents = () => {
       }}
     >
       <Chat
-        sessions={[
-          ...fakeSessions,
-          ...sessionsWithFiles,
-          ...sessionWithSources
-        ]}
-        activeSessionId="1"
+        sessions={sessions}
+        activeSessionId={activeId}
+        onSelectSession={setActiveId}
+        onSendMessage={createSendMessageHandler(setSessions, activeId)}
       >
         <SessionsList>
           <NewSessionButton>
@@ -1063,7 +1104,7 @@ export const ImageFiles = () => {
     }
   ];
 
-  const sessionWithImages: Session[] = [
+  const [sessions, setSessions] = useState<Session[]>([
     {
       id: 'session-images',
       title: 'Multiple Image Files Showcase',
@@ -1088,7 +1129,7 @@ export const ImageFiles = () => {
         }
       ]
     }
-  ];
+  ]);
 
   return (
     <div
@@ -1106,8 +1147,9 @@ export const ImageFiles = () => {
     >
       <Chat
         viewType="console"
-        sessions={sessionWithImages}
+        sessions={sessions}
         activeSessionId="session-images"
+        onSendMessage={createSendMessageHandler(setSessions, 'session-images')}
       >
         <SessionsList>
           <NewSessionButton />
@@ -1125,6 +1167,8 @@ export const ImageFiles = () => {
 };
 
 export const CSVPreview = () => {
+  const [sessions, setSessions] = useState<Session[]>(sessionWithCSVFiles);
+
   return (
     <div
       className="dark:bg-gray-950 bg-white"
@@ -1137,9 +1181,10 @@ export const CSVPreview = () => {
       }}
     >
       <Chat
-        sessions={sessionWithCSVFiles}
+        sessions={sessions}
         activeSessionId="1"
         onDeleteSession={() => alert('delete!')}
+        onSendMessage={createSendMessageHandler(setSessions, '1')}
       >
         <SessionsList>
           <NewSessionButton />

package/dist/stories/EnhancedInput.stories.tsx

@@ -9,7 +9,7 @@ import {
   MentionItem,
   SlashCommandItem
 } from 'reachat';
-import { fakeSessions } from './examples';
+import { fakeSessions, createSendMessageHandler } from './examples';
 
 const UserIcon = () => (
   <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className="w-full h-full">
@@ -112,6 +112,7 @@ export const WithMentions: StoryFn = () => {
         sessions={sessions}
         activeSessionId={activeId}
         onSelectSession={setActiveId}
+        onSendMessage={createSendMessageHandler(setSessions, activeId)}
       >
         <SessionMessagePanel>
           <SessionMessages />
@@ -153,6 +154,7 @@ export const WithSlashCommands: StoryFn = () => {
         sessions={sessions}
         activeSessionId={activeId}
         onSelectSession={setActiveId}
+        onSendMessage={createSendMessageHandler(setSessions, activeId)}
       >
         <SessionMessagePanel>
           <SessionMessages />
@@ -195,6 +197,7 @@ export const WithAllFeatures: StoryFn = () => {
         sessions={sessions}
         activeSessionId={activeId}
         onSelectSession={setActiveId}
+        onSendMessage={createSendMessageHandler(setSessions, activeId)}
       >
         <SessionMessagePanel>
           <SessionMessages />
@@ -240,6 +243,7 @@ export const WithAsyncSearch: StoryFn = () => {
         sessions={sessions}
         activeSessionId={activeId}
         onSelectSession={setActiveId}
+        onSendMessage={createSendMessageHandler(setSessions, activeId)}
       >
         <SessionMessagePanel>
           <SessionMessages />
@@ -271,6 +275,7 @@ export const MultiLineEmpty: StoryFn = () => {
         sessions={sessions}
         activeSessionId={activeId}
         onSelectSession={setActiveId}
+        onSendMessage={createSendMessageHandler(setSessions, activeId)}
       >
         <SessionMessagePanel>
           <SessionMessages />
@@ -306,6 +311,7 @@ This is line six - still scrolling!`;
         sessions={sessions}
         activeSessionId={activeId}
         onSelectSession={setActiveId}
+        onSendMessage={createSendMessageHandler(setSessions, activeId)}
       >
         <SessionMessagePanel>
           <SessionMessages />