@ai-sdk/react 4.0.0-beta.19 → 4.0.0-beta.190

package/src/use-object.ts

@@ -1,14 +1,19 @@
 import {
-  FetchFunction,
-  FlexibleSchema,
-  InferSchema,
   isAbortError,
-  Resolvable,
   resolve,
   normalizeHeaders,
   safeValidateTypes,
+  type FetchFunction,
+  type FlexibleSchema,
+  type InferSchema,
+  type Resolvable,
 } from '@ai-sdk/provider-utils';
-import { asSchema, DeepPartial, isDeepEqualData, parsePartialJson } from 'ai';
+import {
+  asSchema,
+  isDeepEqualData,
+  parsePartialJson,
+  type DeepPartial,
+} from 'ai';
 import { useCallback, useId, useRef, useState } from 'react';
 import useSWR from 'swr';
 
@@ -153,7 +158,7 @@ function useObject<
   const stop = useCallback(() => {
     try {
       abortControllerRef.current?.abort();
-    } catch (ignored) {
+    } catch {
     } finally {
       setIsLoading(false);
       abortControllerRef.current = null;

package/src/use-realtime.ts

@@ -0,0 +1,252 @@
+import {
+  Experimental_AbstractRealtimeSession as AbstractRealtimeSession,
+  type Experimental_RealtimeServerEvent as RealtimeServerEvent,
+  type Experimental_RealtimeSessionOptions as RealtimeSessionOptions,
+  type Experimental_RealtimeState as RealtimeState,
+  type Experimental_RealtimeStatus as RealtimeStatus,
+  type UIMessage,
+} from 'ai';
+import { useCallback, useEffect, useRef, useSyncExternalStore } from 'react';
+
+type UseRealtimeOptions = RealtimeSessionOptions;
+
+type RealtimeStateKey = keyof RealtimeState;
+type RealtimeStoreKey = {
+  model: RealtimeSessionOptions['model'];
+  token: RealtimeSessionOptions['api']['token'];
+  sessionConfig: RealtimeSessionOptions['sessionConfig'];
+  sampleRate: RealtimeSessionOptions['sampleRate'];
+  maxEvents: RealtimeSessionOptions['maxEvents'];
+};
+
+function getRealtimeStoreKey(options: UseRealtimeOptions): RealtimeStoreKey {
+  return {
+    model: options.model,
+    token: options.api.token,
+    sessionConfig: options.sessionConfig,
+    sampleRate: options.sampleRate,
+    maxEvents: options.maxEvents,
+  };
+}
+
+function shouldCreateRealtimeStore(
+  currentKey: RealtimeStoreKey,
+  nextOptions: UseRealtimeOptions,
+): boolean {
+  return (
+    currentKey.model !== nextOptions.model ||
+    currentKey.token !== nextOptions.api.token ||
+    currentKey.sessionConfig !== nextOptions.sessionConfig ||
+    currentKey.sampleRate !== nextOptions.sampleRate ||
+    currentKey.maxEvents !== nextOptions.maxEvents
+  );
+}
+
+class RealtimeStore extends AbstractRealtimeSession {
+  protected state: RealtimeState = {
+    status: 'disconnected',
+    messages: [],
+    events: [],
+    isCapturing: false,
+    isPlaying: false,
+  };
+
+  private callbacks: { [K in RealtimeStateKey]: Set<() => void> } = {
+    status: new Set(),
+    messages: new Set(),
+    events: new Set(),
+    isCapturing: new Set(),
+    isPlaying: new Set(),
+  };
+
+  get status(): RealtimeStatus {
+    return this.state.status;
+  }
+
+  get messages(): UIMessage[] {
+    return this.state.messages;
+  }
+
+  get events(): RealtimeServerEvent[] {
+    return this.state.events;
+  }
+
+  get isCapturing(): boolean {
+    return this.state.isCapturing;
+  }
+
+  get isPlaying(): boolean {
+    return this.state.isPlaying;
+  }
+
+  subscribe(key: RealtimeStateKey, onChange: () => void): () => void {
+    this.callbacks[key].add(onChange);
+
+    return () => {
+      this.callbacks[key].delete(onChange);
+    };
+  }
+
+  protected setState<K extends RealtimeStateKey>(
+    key: K,
+    value: RealtimeState[K],
+  ): void {
+    this.state = { ...this.state, [key]: value };
+    this.callbacks[key].forEach(callback => callback());
+  }
+
+  protected pushMessage(message: UIMessage): void {
+    this.state = {
+      ...this.state,
+      messages: [...this.state.messages, message],
+    };
+    this.callbacks.messages.forEach(callback => callback());
+  }
+
+  protected updateMessages(
+    updater: (messages: UIMessage[]) => UIMessage[],
+  ): void {
+    this.state = {
+      ...this.state,
+      messages: updater(this.state.messages),
+    };
+    this.callbacks.messages.forEach(callback => callback());
+  }
+
+  protected pushEvent(event: RealtimeServerEvent): void {
+    const nextEvents = [...this.state.events, event];
+    this.state = {
+      ...this.state,
+      events:
+        nextEvents.length > this.maxEvents
+          ? nextEvents.slice(-this.maxEvents)
+          : nextEvents,
+    };
+    this.callbacks.events.forEach(callback => callback());
+  }
+}
+
+type UseRealtimeReturn = {
+  status: RealtimeStatus;
+  messages: UIMessage[];
+  events: RealtimeServerEvent[];
+  isCapturing: boolean;
+  isPlaying: boolean;
+
+  connect: () => Promise<void>;
+  disconnect: () => void;
+  addToolOutput: (callId: string, result: unknown) => void;
+  sendEvent: RealtimeStore['sendEvent'];
+  sendTextMessage: (text: string) => void;
+  sendAudio: (base64Audio: string) => void;
+  commitAudio: () => void;
+  clearAudioBuffer: () => void;
+  requestResponse: (options?: { modalities?: string[] }) => void;
+  cancelResponse: () => void;
+  startAudioCapture: (stream: MediaStream) => void;
+  stopAudioCapture: () => void;
+  stopPlayback: () => void;
+};
+
+function useRealtime(options: UseRealtimeOptions): UseRealtimeReturn {
+  const callbacksRef = useRef({
+    onToolCall: options.onToolCall,
+    onEvent: options.onEvent,
+    onError: options.onError,
+  });
+  callbacksRef.current = {
+    onToolCall: options.onToolCall,
+    onEvent: options.onEvent,
+    onError: options.onError,
+  };
+
+  const realtimeRef = useRef<{
+    store: RealtimeStore;
+    key: RealtimeStoreKey;
+  } | null>(null);
+
+  let realtimeEntry = realtimeRef.current;
+
+  if (
+    realtimeEntry == null ||
+    shouldCreateRealtimeStore(realtimeEntry.key, options)
+  ) {
+    realtimeEntry = {
+      store: new RealtimeStore({
+        ...options,
+        onToolCall: (...args) => callbacksRef.current.onToolCall?.(...args),
+        onEvent: (...args) => callbacksRef.current.onEvent?.(...args),
+        onError: (...args) => callbacksRef.current.onError?.(...args),
+      }),
+      key: getRealtimeStoreKey(options),
+    };
+    realtimeRef.current = realtimeEntry;
+  } else {
+    realtimeEntry.key = getRealtimeStoreKey(options);
+  }
+
+  const rt = realtimeEntry.store;
+
+  const status = useSyncExternalStore(
+    useCallback(cb => rt.subscribe('status', cb), [rt]),
+    () => rt.status,
+    () => rt.status,
+  );
+
+  const messages = useSyncExternalStore(
+    useCallback(cb => rt.subscribe('messages', cb), [rt]),
+    () => rt.messages,
+    () => rt.messages,
+  );
+
+  const events = useSyncExternalStore(
+    useCallback(cb => rt.subscribe('events', cb), [rt]),
+    () => rt.events,
+    () => rt.events,
+  );
+
+  const isCapturing = useSyncExternalStore(
+    useCallback(cb => rt.subscribe('isCapturing', cb), [rt]),
+    () => rt.isCapturing,
+    () => rt.isCapturing,
+  );
+
+  const isPlaying = useSyncExternalStore(
+    useCallback(cb => rt.subscribe('isPlaying', cb), [rt]),
+    () => rt.isPlaying,
+    () => rt.isPlaying,
+  );
+
+  useEffect(() => {
+    return () => rt.dispose();
+  }, [rt]);
+
+  return {
+    status,
+    messages,
+    events,
+    isCapturing,
+    isPlaying,
+    connect: rt.connect.bind(rt),
+    disconnect: rt.disconnect.bind(rt),
+    addToolOutput: rt.addToolOutput.bind(rt),
+    sendEvent: rt.sendEvent.bind(rt),
+    sendTextMessage: rt.sendTextMessage.bind(rt),
+    sendAudio: rt.sendAudio.bind(rt),
+    commitAudio: rt.commitAudio.bind(rt),
+    clearAudioBuffer: rt.clearAudioBuffer.bind(rt),
+    requestResponse: rt.requestResponse.bind(rt),
+    cancelResponse: rt.cancelResponse.bind(rt),
+    startAudioCapture: rt.startAudioCapture.bind(rt),
+    stopAudioCapture: rt.stopAudioCapture.bind(rt),
+    stopPlayback: rt.stopPlayback.bind(rt),
+  };
+}
+
+export const experimental_useRealtime = useRealtime;
+
+export type {
+  RealtimeStatus as Experimental_RealtimeStatus,
+  UseRealtimeOptions as Experimental_UseRealtimeOptions,
+  UseRealtimeReturn as Experimental_UseRealtimeReturn,
+};

package/dist/index.d.mts

@@ -1,178 +0,0 @@
-import { UIMessage, AbstractChat, ChatInit, CompletionRequestOptions, UseCompletionOptions, DeepPartial } from 'ai';
-export { CreateUIMessage, UIMessage, UseCompletionOptions } from 'ai';
-import { FlexibleSchema, FetchFunction, Resolvable, InferSchema } from '@ai-sdk/provider-utils';
-
-declare class Chat<UI_MESSAGE extends UIMessage> extends AbstractChat<UI_MESSAGE> {
-    #private;
-    constructor({ messages, ...init }: ChatInit<UI_MESSAGE>);
-    '~registerMessagesCallback': (onChange: () => void, throttleWaitMs?: number) => (() => void);
-    '~registerStatusCallback': (onChange: () => void) => (() => void);
-    '~registerErrorCallback': (onChange: () => void) => (() => void);
-}
-
-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'>;
-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;
-};
-declare function useChat<UI_MESSAGE extends UIMessage = UIMessage>({ experimental_throttle: throttleWaitMs, resume, ...options }?: UseChatOptions<UI_MESSAGE>): UseChatHelpers<UI_MESSAGE>;
-
-type UseCompletionHelpers = {
-    /** The current completion result */
-    completion: string;
-    /**
-     * Send a new prompt to the API endpoint and update the completion state.
-     */
-    complete: (prompt: string, options?: CompletionRequestOptions) => Promise<string | null | undefined>;
-    /** The error object of the API request */
-    error: undefined | Error;
-    /**
-     * Abort the current API request but keep the generated tokens.
-     */
-    stop: () => void;
-    /**
-     * Update the `completion` state locally.
-     */
-    setCompletion: (completion: string) => void;
-    /** The current value of the input */
-    input: string;
-    /** setState-powered method to update the input value */
-    setInput: React.Dispatch<React.SetStateAction<string>>;
-    /**
-     * An input/textarea-ready onChange handler to control the value of the input
-     * @example
-     * ```jsx
-     * <input onChange={handleInputChange} value={input} />
-     * ```
-     */
-    handleInputChange: (event: React.ChangeEvent<HTMLInputElement> | React.ChangeEvent<HTMLTextAreaElement>) => void;
-    /**
-     * Form submission handler to automatically reset input and append a user message
-     * @example
-     * ```jsx
-     * <form onSubmit={handleSubmit}>
-     *  <input onChange={handleInputChange} value={input} />
-     * </form>
-     * ```
-     */
-    handleSubmit: (event?: {
-        preventDefault?: () => void;
-    }) => void;
-    /** Whether the API request is in progress */
-    isLoading: boolean;
-};
-declare function useCompletion({ api, id, initialCompletion, initialInput, credentials, headers, body, streamProtocol, fetch, onFinish, onError, experimental_throttle: throttleWaitMs, }?: UseCompletionOptions & {
-    /**
-     * Custom throttle wait in ms for the completion and data updates.
-     * Default is undefined, which disables throttling.
-     */
-    experimental_throttle?: number;
-}): UseCompletionHelpers;
-
-type Experimental_UseObjectOptions<SCHEMA extends FlexibleSchema, RESULT> = {
-    /**
-     * The API endpoint. It should stream JSON that matches the schema as chunked text.
-     */
-    api: string;
-    /**
-     * A schema that defines the shape of the complete object.
-     */
-    schema: SCHEMA;
-    /**
-     * An unique identifier. If not provided, a random one will be
-     * generated. When provided, the `useObject` hook with the same `id` will
-     * have shared states across components.
-     */
-    id?: string;
-    /**
-     * An optional value for the initial object.
-     */
-    initialValue?: DeepPartial<RESULT>;
-    /**
-     * Custom fetch implementation. You can use it as a middleware to intercept requests,
-     * or to provide a custom fetch implementation for e.g. testing.
-     */
-    fetch?: FetchFunction;
-    /**
-     * Callback that is called when the stream has finished.
-     */
-    onFinish?: (event: {
-        /**
-         * The generated object (typed according to the schema).
-         * Can be undefined if the final object does not match the schema.
-         */
-        object: RESULT | undefined;
-        /**
-         * Optional error object. This is e.g. a TypeValidationError when the final object does not match the schema.
-         */
-        error: Error | undefined;
-    }) => Promise<void> | void;
-    /**
-     * Callback function to be called when an error is encountered.
-     */
-    onError?: (error: Error) => void;
-    /**
-     * Additional HTTP headers to be included in the request.
-     * Can be a static object, a function that returns headers, or an async function
-     * for dynamic auth tokens.
-     */
-    headers?: Resolvable<Record<string, string> | Headers>;
-    /**
-     * The credentials mode to be used for the fetch request.
-     * Possible values are: 'omit', 'same-origin', 'include'.
-     * Defaults to 'same-origin'.
-     */
-    credentials?: RequestCredentials;
-};
-type Experimental_UseObjectHelpers<RESULT, INPUT> = {
-    /**
-     * Calls the API with the provided input as JSON body.
-     */
-    submit: (input: INPUT) => void;
-    /**
-     * The current value for the generated object. Updated as the API streams JSON chunks.
-     */
-    object: DeepPartial<RESULT> | undefined;
-    /**
-     * The error object of the API request if any.
-     */
-    error: Error | undefined;
-    /**
-     * Flag that indicates whether an API request is in progress.
-     */
-    isLoading: boolean;
-    /**
-     * Abort the current request immediately, keep the current partial object if any.
-     */
-    stop: () => void;
-    /**
-     * Clear the object state.
-     */
-    clear: () => void;
-};
-declare function useObject<SCHEMA extends FlexibleSchema, RESULT = InferSchema<SCHEMA>, INPUT = any>({ api, id, schema, // required, in the future we will use it for validation
-initialValue, fetch, onError, onFinish, headers, credentials, }: Experimental_UseObjectOptions<SCHEMA, RESULT>): Experimental_UseObjectHelpers<RESULT, INPUT>;
-declare const experimental_useObject: typeof useObject;
-
-export { Chat, Experimental_UseObjectHelpers, Experimental_UseObjectOptions, UseChatHelpers, UseChatOptions, UseCompletionHelpers, experimental_useObject, useChat, useCompletion };