@ai-sdk/react 3.0.47 → 3.0.48

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @ai-sdk/react
 
+## 3.0.48
+
+### Patch Changes
+
+- 8dc54db: chore: add src folders to package bundle
+  - ai@6.0.46
+
 ## 3.0.47
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ai-sdk/react",
-  "version": "3.0.47",
+  "version": "3.0.48",
   "license": "Apache-2.0",
   "sideEffects": false,
   "main": "./dist/index.js",
@@ -16,6 +16,7 @@
   },
   "files": [
     "dist/**/*",
+    "src",
     "CHANGELOG.md",
     "README.md"
   ],
@@ -23,7 +24,7 @@
     "swr": "^2.2.5",
     "throttleit": "2.1.0",
     "@ai-sdk/provider-utils": "4.0.8",
-    "ai": "6.0.45"
+    "ai": "6.0.46"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.3",
@@ -39,7 +40,7 @@
     "tsup": "^7.2.0",
     "typescript": "5.8.3",
     "zod": "3.25.76",
-    "@ai-sdk/test-server": "1.0.1",
+    "@ai-sdk/test-server": "1.0.2",
     "@vercel/ai-tsconfig": "0.0.0",
     "eslint-config-vercel-ai": "0.0.0"
   },

package/src/chat.react.ts

@@ -0,0 +1,130 @@
+import { AbstractChat, ChatInit, ChatState, ChatStatus, UIMessage } from 'ai';
+import { throttle } from './throttle';
+
+class ReactChatState<UI_MESSAGE extends UIMessage>
+  implements ChatState<UI_MESSAGE>
+{
+  #messages: UI_MESSAGE[];
+  #status: ChatStatus = 'ready';
+  #error: Error | undefined = undefined;
+
+  #messagesCallbacks = new Set<() => void>();
+  #statusCallbacks = new Set<() => void>();
+  #errorCallbacks = new Set<() => void>();
+
+  constructor(initialMessages: UI_MESSAGE[] = []) {
+    this.#messages = initialMessages;
+  }
+
+  get status(): ChatStatus {
+    return this.#status;
+  }
+
+  set status(newStatus: ChatStatus) {
+    this.#status = newStatus;
+    this.#callStatusCallbacks();
+  }
+
+  get error(): Error | undefined {
+    return this.#error;
+  }
+
+  set error(newError: Error | undefined) {
+    this.#error = newError;
+    this.#callErrorCallbacks();
+  }
+
+  get messages(): UI_MESSAGE[] {
+    return this.#messages;
+  }
+
+  set messages(newMessages: UI_MESSAGE[]) {
+    this.#messages = [...newMessages];
+    this.#callMessagesCallbacks();
+  }
+
+  pushMessage = (message: UI_MESSAGE) => {
+    this.#messages = this.#messages.concat(message);
+    this.#callMessagesCallbacks();
+  };
+
+  popMessage = () => {
+    this.#messages = this.#messages.slice(0, -1);
+    this.#callMessagesCallbacks();
+  };
+
+  replaceMessage = (index: number, message: UI_MESSAGE) => {
+    this.#messages = [
+      ...this.#messages.slice(0, index),
+      // We deep clone the message here to ensure the new React Compiler (currently in RC) detects deeply nested parts/metadata changes:
+      this.snapshot(message),
+      ...this.#messages.slice(index + 1),
+    ];
+    this.#callMessagesCallbacks();
+  };
+
+  snapshot = <T>(value: T): T => structuredClone(value);
+
+  '~registerMessagesCallback' = (
+    onChange: () => void,
+    throttleWaitMs?: number,
+  ): (() => void) => {
+    const callback = throttleWaitMs
+      ? throttle(onChange, throttleWaitMs)
+      : onChange;
+    this.#messagesCallbacks.add(callback);
+    return () => {
+      this.#messagesCallbacks.delete(callback);
+    };
+  };
+
+  '~registerStatusCallback' = (onChange: () => void): (() => void) => {
+    this.#statusCallbacks.add(onChange);
+    return () => {
+      this.#statusCallbacks.delete(onChange);
+    };
+  };
+
+  '~registerErrorCallback' = (onChange: () => void): (() => void) => {
+    this.#errorCallbacks.add(onChange);
+    return () => {
+      this.#errorCallbacks.delete(onChange);
+    };
+  };
+
+  #callMessagesCallbacks = () => {
+    this.#messagesCallbacks.forEach(callback => callback());
+  };
+
+  #callStatusCallbacks = () => {
+    this.#statusCallbacks.forEach(callback => callback());
+  };
+
+  #callErrorCallbacks = () => {
+    this.#errorCallbacks.forEach(callback => callback());
+  };
+}
+
+export class Chat<
+  UI_MESSAGE extends UIMessage,
+> extends AbstractChat<UI_MESSAGE> {
+  #state: ReactChatState<UI_MESSAGE>;
+
+  constructor({ messages, ...init }: ChatInit<UI_MESSAGE>) {
+    const state = new ReactChatState(messages);
+    super({ ...init, state });
+    this.#state = state;
+  }
+
+  '~registerMessagesCallback' = (
+    onChange: () => void,
+    throttleWaitMs?: number,
+  ): (() => void) =>
+    this.#state['~registerMessagesCallback'](onChange, throttleWaitMs);
+
+  '~registerStatusCallback' = (onChange: () => void): (() => void) =>
+    this.#state['~registerStatusCallback'](onChange);
+
+  '~registerErrorCallback' = (onChange: () => void): (() => void) =>
+    this.#state['~registerErrorCallback'](onChange);
+}

package/src/index.ts

@@ -0,0 +1,4 @@
+export * from './use-chat';
+export { Chat } from './chat.react';
+export * from './use-completion';
+export * from './use-object';

package/src/setup-test-component.tsx

@@ -0,0 +1,26 @@
+import { cleanup, render } from '@testing-library/react';
+import { SWRConfig } from 'swr';
+import { beforeEach, afterEach, vi } from 'vitest';
+
+export const setupTestComponent = (
+  TestComponent: React.ComponentType<any>,
+  {
+    init,
+  }: {
+    init?: (TestComponent: React.ComponentType<any>) => React.ReactNode;
+  } = {},
+) => {
+  beforeEach(() => {
+    // reset SWR cache to isolate tests:
+    render(
+      <SWRConfig value={{ provider: () => new Map() }}>
+        {init?.(TestComponent) ?? <TestComponent />}
+      </SWRConfig>,
+    );
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+    cleanup();
+  });
+};

package/src/throttle.ts

@@ -0,0 +1,8 @@
+import throttleFunction from 'throttleit';
+
+export function throttle<T extends (...args: any[]) => any>(
+  fn: T,
+  waitMs: number | undefined,
+): T {
+  return waitMs != null ? throttleFunction(fn, waitMs) : fn;
+}

package/src/use-chat.ts

@@ -0,0 +1,173 @@
+import {
+  AbstractChat,
+  ChatInit,
+  type CreateUIMessage,
+  type UIMessage,
+} from 'ai';
+import { useCallback, useEffect, useRef, useSyncExternalStore } from 'react';
+import { Chat } from './chat.react';
+
+export type { CreateUIMessage, UIMessage };
+
+export type UseChatHelpers<UI_MESSAGE extends UIMessage> = {
+  /**
+   * The id of the chat.
+   */
+  readonly id: string;
+
+  /**
+   * Update the `messages` state locally. This is useful when you want to
+   * edit the messages on the client, and then trigger the `reload` method
+   * manually to regenerate the AI response.
+   */
+  setMessages: (
+    messages: UI_MESSAGE[] | ((messages: UI_MESSAGE[]) => UI_MESSAGE[]),
+  ) => void;
+
+  error: Error | undefined;
+} & Pick<
+  AbstractChat<UI_MESSAGE>,
+  | 'sendMessage'
+  | 'regenerate'
+  | 'stop'
+  | 'resumeStream'
+  | 'addToolResult'
+  | 'addToolOutput'
+  | 'addToolApprovalResponse'
+  | 'status'
+  | 'messages'
+  | 'clearError'
+>;
+
+export type UseChatOptions<UI_MESSAGE extends UIMessage> = (
+  | { chat: Chat<UI_MESSAGE> }
+  | ChatInit<UI_MESSAGE>
+) & {
+  /**
+Custom throttle wait in ms for the chat messages and data updates.
+Default is undefined, which disables throttling.
+   */
+  experimental_throttle?: number;
+
+  /**
+   * Whether to resume an ongoing chat generation stream.
+   */
+  resume?: boolean;
+};
+
+export function useChat<UI_MESSAGE extends UIMessage = UIMessage>({
+  experimental_throttle: throttleWaitMs,
+  resume = false,
+  ...options
+}: UseChatOptions<UI_MESSAGE> = {}): UseChatHelpers<UI_MESSAGE> {
+  // Create a single ref for all callbacks to avoid stale closures
+  const callbacksRef = useRef(
+    !('chat' in options)
+      ? {
+          onToolCall: options.onToolCall,
+          onData: options.onData,
+          onFinish: options.onFinish,
+          onError: options.onError,
+          sendAutomaticallyWhen: options.sendAutomaticallyWhen,
+        }
+      : {},
+  );
+
+  // Update callbacks ref on each render to keep them current
+  if (!('chat' in options)) {
+    callbacksRef.current = {
+      onToolCall: options.onToolCall,
+      onData: options.onData,
+      onFinish: options.onFinish,
+      onError: options.onError,
+      sendAutomaticallyWhen: options.sendAutomaticallyWhen,
+    };
+  }
+
+  // Ensure the Chat instance has the latest callbacks
+  const optionsWithCallbacks: typeof options = {
+    ...options,
+    onToolCall: arg => callbacksRef.current.onToolCall?.(arg),
+    onData: arg => callbacksRef.current.onData?.(arg),
+    onFinish: arg => callbacksRef.current.onFinish?.(arg),
+    onError: arg => callbacksRef.current.onError?.(arg),
+    sendAutomaticallyWhen: arg =>
+      callbacksRef.current.sendAutomaticallyWhen?.(arg) ?? false,
+  };
+
+  const chatRef = useRef<Chat<UI_MESSAGE>>(
+    'chat' in options ? options.chat : new Chat(optionsWithCallbacks),
+  );
+
+  const shouldRecreateChat =
+    ('chat' in options && options.chat !== chatRef.current) ||
+    ('id' in options && chatRef.current.id !== options.id);
+
+  if (shouldRecreateChat) {
+    chatRef.current =
+      'chat' in options ? options.chat : new Chat(optionsWithCallbacks);
+  }
+
+  const subscribeToMessages = useCallback(
+    (update: () => void) =>
+      chatRef.current['~registerMessagesCallback'](update, throttleWaitMs),
+    // `chatRef.current.id` is required to trigger re-subscription when the chat ID changes
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [throttleWaitMs, chatRef.current.id],
+  );
+
+  const messages = useSyncExternalStore(
+    subscribeToMessages,
+    () => chatRef.current.messages,
+    () => chatRef.current.messages,
+  );
+
+  const status = useSyncExternalStore(
+    chatRef.current['~registerStatusCallback'],
+    () => chatRef.current.status,
+    () => chatRef.current.status,
+  );
+
+  const error = useSyncExternalStore(
+    chatRef.current['~registerErrorCallback'],
+    () => chatRef.current.error,
+    () => chatRef.current.error,
+  );
+
+  const setMessages = useCallback(
+    (
+      messagesParam: UI_MESSAGE[] | ((messages: UI_MESSAGE[]) => UI_MESSAGE[]),
+    ) => {
+      if (typeof messagesParam === 'function') {
+        messagesParam = messagesParam(chatRef.current.messages);
+      }
+      chatRef.current.messages = messagesParam;
+    },
+    [chatRef],
+  );
+
+  useEffect(() => {
+    if (resume) {
+      chatRef.current.resumeStream();
+    }
+  }, [resume, chatRef]);
+
+  return {
+    id: chatRef.current.id,
+    messages,
+    setMessages,
+    sendMessage: chatRef.current.sendMessage,
+    regenerate: chatRef.current.regenerate,
+    clearError: chatRef.current.clearError,
+    stop: chatRef.current.stop,
+    error,
+    resumeStream: chatRef.current.resumeStream,
+    status,
+    /**
+     * @deprecated Use `addToolOutput` instead.
+     */
+    addToolResult: chatRef.current.addToolOutput,
+    addToolOutput: chatRef.current.addToolOutput,
+    addToolApprovalResponse: chatRef.current.addToolApprovalResponse,
+  };
+}