reachat 2.1.2 → 3.0.0

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 />

package/dist/stories/Redact.stories.tsx

@@ -0,0 +1,175 @@
+import { Meta } from '@storybook/react';
+import {
+  Chat,
+  SessionMessages,
+  ChatInput,
+  SessionMessagePanel,
+  SessionsList,
+  NewSessionButton,
+  SessionGroups,
+  SessionMessagesHeader,
+  Session,
+  remarkRedact,
+  commonRedactMatchers
+} from 'reachat';
+import { subHours } from 'date-fns';
+
+export default {
+  title: 'Demos/Redact',
+  component: Chat
+} as Meta;
+
+export const RedactExample = () => {
+  const markdownQuestion = `# User Information
+
+Please help me with the following sensitive data:
+
+- My SSN is 123-45-6789
+- Credit card: 4532-1234-5678-9010
+- Bitcoin address: 1A1zP1eP5QGefi2DMPTfTL5SLmv7DivfNa
+
+Can you help me process this information?`;
+
+  const markdownResponse = `## Analysis
+
+I can see you've provided:
+- SSN: 123-45-6789
+- Credit Card: 4532-1234-5678-9010
+- Bitcoin: 1A1zP1eP5QGefi2DMPTfTL5SLmv7DivfNa
+
+**Note:** All sensitive information has been automatically redacted in the UI for your security.`;
+
+  const sessionWithRedaction: Session[] = [
+    {
+      id: 'session-redact',
+      title: 'Redaction 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-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={sessionWithRedaction}
+        activeSessionId="session-redact"
+        remarkPlugins={[remarkRedact(commonRedactMatchers)]}
+      >
+        <SessionsList>
+          <NewSessionButton />
+          <SessionGroups />
+        </SessionsList>
+
+        <SessionMessagePanel>
+          <SessionMessagesHeader />
+          <SessionMessages />
+          <ChatInput />
+        </SessionMessagePanel>
+      </Chat>
+    </div>
+  );
+};
+
+export const CustomMatchers = () => {
+  const markdownQuestion = `# Custom Redaction
+
+This example shows custom matchers:
+
+- Email: test@example.com
+- Phone: (555) 123-4567
+- Custom pattern: SECRET-12345`;
+
+  const markdownResponse = `I can see you've provided:
+- Email: test@example.com
+- Phone: (555) 123-4567
+- Custom: SECRET-12345`;
+
+  // Custom matchers using the new pattern-based API
+  const customMatchers = [
+    {
+      name: 'Email',
+      pattern: /\b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Z|a-z]{2,}\b/g
+    },
+    {
+      name: 'Phone',
+      pattern: /\b\(?\d{3}\)?[-.\s]?\d{3}[-.\s]?\d{4}\b/g
+    },
+    {
+      name: 'Secret Code',
+      pattern: /\bSECRET-\d+\b/g
+    },
+    ...commonRedactMatchers
+  ];
+
+  const sessionWithCustom: Session[] = [
+    {
+      id: 'session-custom',
+      title: 'Custom Matchers',
+      createdAt: subHours(new Date(), 1),
+      updatedAt: new Date(),
+      conversations: [
+        {
+          id: 'conversation-1',
+          question: markdownQuestion,
+          response: markdownResponse,
+          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={sessionWithCustom}
+        activeSessionId="session-custom"
+        remarkPlugins={[remarkRedact(customMatchers)]}
+      >
+        <SessionsList>
+          <NewSessionButton />
+          <SessionGroups />
+        </SessionsList>
+
+        <SessionMessagePanel>
+          <SessionMessagesHeader />
+          <SessionMessages />
+          <ChatInput />
+        </SessionMessagePanel>
+      </Chat>
+    </div>
+  );
+};

package/dist/stories/examples.ts

@@ -1,6 +1,37 @@
+import { Dispatch, SetStateAction } from 'react';
 import { Session } from '@/types';
 import { subHours } from 'date-fns';
 
+/**
+ * Creates an onSendMessage handler for story demos.
+ * Appends a new conversation with a canned response to the active session.
+ */
+export const createSendMessageHandler = (
+  setSessions: Dispatch<SetStateAction<Session[]>>,
+  activeId: string | undefined
+) => (message: string) => {
+  if (!activeId) return;
+
+  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
+    )
+  );
+};
+
 export const fakeSessions: Session[] = [
   {
     id: '1',

package/dist/theme.d.ts

@@ -159,5 +159,8 @@ export interface ChatTheme {
             title: string;
         };
     };
+    component?: {
+        base?: string;
+    };
 }
 export declare const chatTheme: ChatTheme;

package/dist/useAgUi/index.d.ts

@@ -0,0 +1,4 @@
+export { useAgUi } from './useAgUi';
+export type { UseAgUiOptions, UseAgUiReturn } from './useAgUi';
+export { AgUiEventType } from './types';
+export type { AgUiEvent, AgUiBaseEvent, AgUiRunStartedEvent, AgUiRunFinishedEvent, AgUiRunErrorEvent, AgUiStepStartedEvent, AgUiStepFinishedEvent, AgUiTextMessageStartEvent, AgUiTextMessageContentEvent, AgUiTextMessageEndEvent, AgUiTextMessageChunkEvent, AgUiToolCallStartEvent, AgUiToolCallArgsEvent, AgUiToolCallEndEvent, AgUiToolCallResultEvent, AgUiToolCallChunkEvent, AgUiStateSnapshotEvent, AgUiStateDeltaEvent, AgUiMessagesSnapshotEvent, AgUiRawEvent, AgUiCustomEvent, AgUiToolCallInfo, AgUiMessage, AgUiTool, AgUiContext, AgUiRunAgentInput, AgUiRole } from './types';

package/dist/useAgUi/types.d.ts

@@ -0,0 +1,157 @@
+/**
+ * AG-UI Protocol event types and interfaces.
+ *
+ * These are self-contained type definitions for the AG-UI protocol,
+ * so consumers don't need to install @ag-ui/core separately.
+ * See: https://docs.ag-ui.com
+ */
+export declare enum AgUiEventType {
+    RUN_STARTED = "RUN_STARTED",
+    RUN_FINISHED = "RUN_FINISHED",
+    RUN_ERROR = "RUN_ERROR",
+    STEP_STARTED = "STEP_STARTED",
+    STEP_FINISHED = "STEP_FINISHED",
+    TEXT_MESSAGE_START = "TEXT_MESSAGE_START",
+    TEXT_MESSAGE_CONTENT = "TEXT_MESSAGE_CONTENT",
+    TEXT_MESSAGE_END = "TEXT_MESSAGE_END",
+    TEXT_MESSAGE_CHUNK = "TEXT_MESSAGE_CHUNK",
+    TOOL_CALL_START = "TOOL_CALL_START",
+    TOOL_CALL_ARGS = "TOOL_CALL_ARGS",
+    TOOL_CALL_END = "TOOL_CALL_END",
+    TOOL_CALL_RESULT = "TOOL_CALL_RESULT",
+    TOOL_CALL_CHUNK = "TOOL_CALL_CHUNK",
+    STATE_SNAPSHOT = "STATE_SNAPSHOT",
+    STATE_DELTA = "STATE_DELTA",
+    MESSAGES_SNAPSHOT = "MESSAGES_SNAPSHOT",
+    RAW = "RAW",
+    CUSTOM = "CUSTOM"
+}
+export interface AgUiBaseEvent {
+    type: AgUiEventType;
+    timestamp?: number;
+    rawEvent?: unknown;
+}
+export interface AgUiRunStartedEvent extends AgUiBaseEvent {
+    type: AgUiEventType.RUN_STARTED;
+    threadId: string;
+    runId: string;
+}
+export interface AgUiRunFinishedEvent extends AgUiBaseEvent {
+    type: AgUiEventType.RUN_FINISHED;
+    threadId: string;
+    runId: string;
+}
+export interface AgUiRunErrorEvent extends AgUiBaseEvent {
+    type: AgUiEventType.RUN_ERROR;
+    message: string;
+    code?: string;
+}
+export interface AgUiStepStartedEvent extends AgUiBaseEvent {
+    type: AgUiEventType.STEP_STARTED;
+    stepName: string;
+}
+export interface AgUiStepFinishedEvent extends AgUiBaseEvent {
+    type: AgUiEventType.STEP_FINISHED;
+    stepName: string;
+}
+export interface AgUiTextMessageStartEvent extends AgUiBaseEvent {
+    type: AgUiEventType.TEXT_MESSAGE_START;
+    messageId: string;
+    role?: AgUiRole;
+}
+export interface AgUiTextMessageContentEvent extends AgUiBaseEvent {
+    type: AgUiEventType.TEXT_MESSAGE_CONTENT;
+    messageId: string;
+    delta: string;
+}
+export interface AgUiTextMessageEndEvent extends AgUiBaseEvent {
+    type: AgUiEventType.TEXT_MESSAGE_END;
+    messageId: string;
+}
+export interface AgUiTextMessageChunkEvent extends AgUiBaseEvent {
+    type: AgUiEventType.TEXT_MESSAGE_CHUNK;
+    messageId?: string;
+    role?: AgUiRole;
+    delta?: string;
+}
+export interface AgUiToolCallStartEvent extends AgUiBaseEvent {
+    type: AgUiEventType.TOOL_CALL_START;
+    toolCallId: string;
+    toolCallName: string;
+    parentMessageId?: string;
+}
+export interface AgUiToolCallArgsEvent extends AgUiBaseEvent {
+    type: AgUiEventType.TOOL_CALL_ARGS;
+    toolCallId: string;
+    delta: string;
+}
+export interface AgUiToolCallEndEvent extends AgUiBaseEvent {
+    type: AgUiEventType.TOOL_CALL_END;
+    toolCallId: string;
+}
+export interface AgUiToolCallResultEvent extends AgUiBaseEvent {
+    type: AgUiEventType.TOOL_CALL_RESULT;
+    toolCallId: string;
+    content: string;
+}
+export interface AgUiToolCallChunkEvent extends AgUiBaseEvent {
+    type: AgUiEventType.TOOL_CALL_CHUNK;
+    toolCallId?: string;
+    toolCallName?: string;
+    parentMessageId?: string;
+    delta?: string;
+}
+export interface AgUiStateSnapshotEvent extends AgUiBaseEvent {
+    type: AgUiEventType.STATE_SNAPSHOT;
+    snapshot: unknown;
+}
+export interface AgUiStateDeltaEvent extends AgUiBaseEvent {
+    type: AgUiEventType.STATE_DELTA;
+    delta: unknown[];
+}
+export interface AgUiMessagesSnapshotEvent extends AgUiBaseEvent {
+    type: AgUiEventType.MESSAGES_SNAPSHOT;
+    messages: AgUiMessage[];
+}
+export interface AgUiRawEvent extends AgUiBaseEvent {
+    type: AgUiEventType.RAW;
+    event: unknown;
+    source?: string;
+}
+export interface AgUiCustomEvent extends AgUiBaseEvent {
+    type: AgUiEventType.CUSTOM;
+    name: string;
+    value: unknown;
+}
+export type AgUiEvent = AgUiRunStartedEvent | AgUiRunFinishedEvent | AgUiRunErrorEvent | AgUiStepStartedEvent | AgUiStepFinishedEvent | AgUiTextMessageStartEvent | AgUiTextMessageContentEvent | AgUiTextMessageEndEvent | AgUiTextMessageChunkEvent | AgUiToolCallStartEvent | AgUiToolCallArgsEvent | AgUiToolCallEndEvent | AgUiToolCallResultEvent | AgUiToolCallChunkEvent | AgUiStateSnapshotEvent | AgUiStateDeltaEvent | AgUiMessagesSnapshotEvent | AgUiRawEvent | AgUiCustomEvent;
+export type AgUiRole = 'developer' | 'system' | 'assistant' | 'user' | 'tool';
+export interface AgUiMessage {
+    id: string;
+    role: AgUiRole;
+    content?: string;
+    name?: string;
+    toolCallId?: string;
+}
+export interface AgUiTool {
+    name: string;
+    description: string;
+    parameters: Record<string, unknown>;
+}
+export interface AgUiContext {
+    description: string;
+    value: string;
+}
+export interface AgUiRunAgentInput {
+    threadId: string;
+    runId: string;
+    messages: AgUiMessage[];
+    tools: AgUiTool[];
+    context: AgUiContext[];
+    state: unknown;
+    forwardedProps: Record<string, unknown>;
+}
+export interface AgUiToolCallInfo {
+    toolCallId: string;
+    toolCallName: string;
+    args: string;
+}