reachat 2.1.2 → 2.2.0

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/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;
+}

package/dist/useAgUi/useAgUi.d.ts

@@ -0,0 +1,119 @@
+import { Session, Conversation } from '../types';
+import { AgUiEvent, AgUiContext, AgUiMessage, AgUiTool, AgUiToolCallInfo } from './types';
+export interface UseAgUiOptions {
+    /**
+     * URL of the AG-UI compatible agent endpoint.
+     */
+    agent: string;
+    /**
+     * Initial sessions to populate the chat.
+     */
+    initialSessions?: Session[];
+    /**
+     * Initial active session ID.
+     */
+    initialActiveSessionId?: string;
+    /**
+     * Tools to expose to the agent.
+     */
+    tools?: AgUiTool[];
+    /**
+     * Context to send with each run.
+     */
+    context?: AgUiContext[];
+    /**
+     * Additional properties forwarded to the agent.
+     */
+    forwardedProps?: Record<string, unknown>;
+    /**
+     * Custom headers for the HTTP request.
+     */
+    headers?: Record<string, string>;
+    /**
+     * Called when a tool call is received from the agent.
+     */
+    onToolCall?: (toolCall: AgUiToolCallInfo) => Promise<void> | void;
+    /**
+     * Called when the agent run encounters an error.
+     */
+    onError?: (error: Error) => void;
+    /**
+     * Called when an AG-UI event is received (for debugging/logging).
+     */
+    onEvent?: (event: AgUiEvent) => void;
+}
+export interface UseAgUiReturn {
+    /**
+     * All chat sessions.
+     */
+    sessions: Session[];
+    /**
+     * The currently active session ID.
+     */
+    activeSessionId: string | undefined;
+    /**
+     * Whether the agent is currently processing.
+     */
+    isLoading: boolean;
+    /**
+     * Select a session by ID.
+     */
+    selectSession: (sessionId: string) => void;
+    /**
+     * Delete a session by ID.
+     */
+    deleteSession: (sessionId: string) => void;
+    /**
+     * Create a new empty session.
+     */
+    createSession: () => void;
+    /**
+     * Send a message to the agent.
+     */
+    sendMessage: (message: string) => void;
+    /**
+     * Stop the current agent run.
+     */
+    stopMessage: () => void;
+}
+export declare function addConversationToSession(sessions: Session[], sessionId: string, conversation: Conversation): Session[];
+export declare function updateConversationInSession(sessions: Session[], sessionId: string, conversationId: string, response: string): Session[];
+/**
+ * Converts reachat Session/Conversation history into AG-UI messages.
+ */
+export declare function sessionsToAgUiMessages(session: Session): AgUiMessage[];
+/**
+ * Parses a single SSE data line, returning the event or an Error
+ * if the JSON is malformed.
+ */
+export declare function parseSSELine(line: string): AgUiEvent | Error | null;
+/**
+ * Parses an SSE stream from a Response into AG-UI events.
+ */
+export declare function parseSSE(response: Response, signal: AbortSignal): AsyncGenerator<AgUiEvent | Error>;
+/**
+ * React hook that connects to an AG-UI protocol endpoint and provides
+ * all the props needed for the reachat `<Chat>` component.
+ *
+ * @example
+ * ```tsx
+ * const agui = useAgUi({ agent: 'https://my-agent.example.com/run' });
+ *
+ * <Chat
+ *   sessions={agui.sessions}
+ *   activeSessionId={agui.activeSessionId}
+ *   isLoading={agui.isLoading}
+ *   onSelectSession={agui.selectSession}
+ *   onDeleteSession={agui.deleteSession}
+ *   onNewSession={agui.createSession}
+ *   onSendMessage={agui.sendMessage}
+ *   onStopMessage={agui.stopMessage}
+ * >
+ *   <SessionMessagePanel>
+ *     <SessionMessages />
+ *     <ChatInput />
+ *   </SessionMessagePanel>
+ * </Chat>
+ * ```
+ */
+export declare function useAgUi({ agent, initialSessions, initialActiveSessionId, tools, context, forwardedProps, headers, onToolCall, onError, onEvent }: UseAgUiOptions): UseAgUiReturn;

package/dist/useAgUi/useAgUi.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "reachat",
-  "version": "2.1.2",
+  "version": "2.2.0",
   "description": "Chat UI for Building LLMs",
   "scripts": {
     "build-storybook": "storybook build",
@@ -40,6 +40,7 @@
   "browser": "dist/index.js",
   "typings": "dist/index.d.ts",
   "dependencies": {
+    "@floating-ui/dom": "^1.6.0",
     "@floating-ui/react": "^0.27.6",
     "@radix-ui/react-slot": "^1.1.0",
     "@tiptap/core": "^3.15.3",
@@ -61,6 +62,7 @@
     "react-syntax-highlighter": "^16.1.0",
     "reakeys": "^2.0.3",
     "rehype-katex": "^7.0.0",
+    "rehype-raw": "^7.0.0",
     "remark-gfm": "^4.0.0",
     "remark-math": "^6.0.0",
     "remark-youtube": "^1.3.2",