@ably/ai-transport 0.0.1 → 0.1.0

package/src/vercel/react/contexts/chat-transport-provider.tsx

@@ -0,0 +1,122 @@
+/**
+ * ChatTransportProvider: creates a ChatTransport from a ClientTransport and makes it
+ * available to descendants via ChatTransportContext.
+ *
+ * Wraps children with TransportProvider (using UIMessageCodec) so the Ably channel
+ * lifecycle is managed in one place. An inner component reads the ClientTransport
+ * from NearestTransportContext and creates the ChatTransport once on first render
+ * (via useRef).
+ *
+ * The ChatTransport is NOT closed on unmount — the underlying ClientTransport
+ * lifecycle is managed by the wrapping TransportProvider. Auto-closing would break
+ * React Strict Mode, and ChatTransport.close() delegates to ClientTransport.close()
+ * which TransportProvider already calls.
+ *
+ * Multiple ChatTransportProviders can be nested using distinct channelNames.
+ * Each provider merges its transport into the parent registry, so descendants
+ * can access all registered transports via useChatTransport({ channelName }).
+ */
+
+import type * as AI from 'ai';
+import { type PropsWithChildren, type ReactNode, useContext, useMemo } from 'react';
+
+import { createTransportHooks, type TransportProviderProps } from '../../../react/index.js';
+import { UIMessageCodec } from '../../codec/index.js';
+import { type ChatTransportOptions, DEFAULT_VERCEL_API } from '../../transport/index.js';
+import { createChatTransport } from '../../transport/index.js';
+import type { ChatTransportSlot } from './chat-transport-context.js';
+import { ChatTransportContext } from './chat-transport-context.js';
+
+export const {
+  TransportProvider,
+  useAblyMessages,
+  useActiveTurns,
+  useClientTransport,
+  useCreateView,
+  useTree,
+  useView,
+} = createTransportHooks<AI.UIMessageChunk, AI.UIMessage>();
+
+type CoreTransportProviderProps = Omit<TransportProviderProps<AI.UIMessageChunk, AI.UIMessage>, 'codec' | 'api'> &
+  Partial<Pick<TransportProviderProps<AI.UIMessageChunk, AI.UIMessage>, 'api'>>;
+
+/**
+ * Props for {@link ChatTransportProvider}.
+ *
+ * All {@link TransportProviderProps} for Vercel types except `codec` (baked as UIMessageCodec),
+ * plus `chatOptions` for customizing chat request construction.
+ */
+export interface ChatTransportProviderProps extends CoreTransportProviderProps {
+  /**
+   * Optional hooks for customizing chat request construction (e.g. prepareSendMessagesRequest).
+   * Must be stable across renders — wrap in `useMemo` or define outside the component.
+   * A new object reference triggers ChatTransport recreation.
+   */
+  chatOptions?: ChatTransportOptions;
+}
+
+const ChatTransportProviderInner = ({
+  channelName,
+  chatOptions,
+  children,
+}: {
+  channelName: string;
+  chatOptions?: ChatTransportOptions;
+  children: ReactNode;
+}) => {
+  const { transport, transportError } = useClientTransport();
+  const { providers: parentProviders } = useContext(ChatTransportContext);
+  const chatTransport = useMemo(() => createChatTransport(transport, chatOptions), [transport, chatOptions]);
+  const contextValue = useMemo(() => {
+    const slot: ChatTransportSlot = { transport, transportError, chatTransport };
+    return {
+      nearest: slot,
+      providers: { ...parentProviders, [channelName]: slot },
+    };
+  }, [channelName, parentProviders, chatTransport, transport, transportError]);
+
+  return <ChatTransportContext.Provider value={contextValue}>{children}</ChatTransportContext.Provider>;
+};
+
+/**
+ * Provide a {@link ChatTransport} and its underlying {@link ClientTransport} to descendant components.
+ *
+ * Wraps children with Ably's `ChannelProvider` (via `TransportProvider`) using `channelName`,
+ * creates a {@link ClientTransport} with UIMessageCodec, wraps it in a {@link ChatTransport},
+ * and registers the full slot in `ChatTransportContext` under `channelName`. Descendants call
+ * {@link useChatTransport} with the same `channelName` to access both transports.
+ *
+ * `useClientTransport` is also available inside this provider's subtree.
+ *
+ * ```tsx
+ * <ChatTransportProvider channelName="ai:demo">
+ *   <Chat />
+ * </ChatTransportProvider>
+ *
+ * // Inside Chat:
+ * const { chatTransport, transport } = useChatTransport();
+ * const { transport } = useClientTransport(); // also available
+ * ```
+ * @param props - Provider configuration including `channelName`, optional `chatOptions`, and all other transport options.
+ * @param props.chatOptions - Optional hooks for customizing chat request construction. Must be stable (memoized) — a new reference recreates the ChatTransport.
+ * @param props.children - Descendant components that consume the transport via hooks.
+ * @returns A React element wrapping children with ChannelProvider, TransportContext, and ChatTransportContext.
+ */
+export const ChatTransportProvider = ({
+  chatOptions,
+  children,
+  ...transportProps
+}: ChatTransportProviderProps & PropsWithChildren): ReactNode => (
+  <TransportProvider
+    {...transportProps}
+    api={transportProps.api ?? DEFAULT_VERCEL_API}
+    codec={UIMessageCodec}
+  >
+    <ChatTransportProviderInner
+      channelName={transportProps.channelName}
+      chatOptions={chatOptions}
+    >
+      {children}
+    </ChatTransportProviderInner>
+  </TransportProvider>
+);

package/src/vercel/react/index.ts

@@ -1,4 +1,18 @@
 // Vercel-specific React hooks
 export type { ChatTransport } from '../transport/chat-transport.js';
+export type { ChatTransportProviderProps } from './contexts/chat-transport-provider.js';
+export {
+  ChatTransportProvider,
+  TransportProvider,
+  useAblyMessages,
+  useActiveTurns,
+  useClientTransport,
+  useCreateView,
+  useTree,
+  useView,
+} from './contexts/chat-transport-provider.js';
+export type { ChatTransportHandle, UseChatTransportOptions } from './use-chat-transport.js';
 export { useChatTransport } from './use-chat-transport.js';
+export type { UseMessageSyncOptions } from './use-message-sync.js';
 export { useMessageSync } from './use-message-sync.js';
+export { useStagedAddToolApprovalResponse } from './use-staged-add-tool-approval-response.js';

package/src/vercel/react/use-chat-transport.ts

@@ -1,60 +1,182 @@
 /**
- * useChatTransport: wraps a core ClientTransport into the ChatTransport
- * shape that Vercel's useChat expects.
+ * useChatTransport: reads a ChatTransport and its underlying ClientTransport from
+ * the nearest ChatTransportProvider.
  *
- * Accepts either an existing ClientTransport or options to create one:
- * - From an existing ClientTransport — wraps it directly
- * - From options — creates a ClientTransport with UIMessageCodec and wraps it
+ * The transport is created by ChatTransportProvider, which also wraps the subtree
+ * with TransportProvider and Ably's ChannelProvider. This hook is a thin context
+ * reader — it does not create or manage any transport state.
  *
- * Both forms accept an optional second argument for ChatTransportOptions
- * (e.g. prepareSendMessagesRequest for the persistence pattern).
- *
- * The hook does NOT auto-close the transport on unmount. Channel lifecycle is
- * managed by the Ably provider (useChannel). Auto-closing would break React
- * Strict Mode. Call chatTransport.close() explicitly if needed.
+ * Pass `channelName` to look up a specific provider by name. Omit to use the nearest
+ * provider in the tree. Pass `skip: true` to defer (e.g. when auth is not yet resolved)
+ * — returns stub transports whose properties throw with a descriptive error.
  */
 
+import * as Ably from 'ably';
 import type * as AI from 'ai';
-import { useRef } from 'react';
+import { useContext } from 'react';
+
+import type { ClientTransport, Tree, View } from '../../core/transport/types.js';
+import { ErrorCode } from '../../errors.js';
+import type { ChatTransport } from '../transport/index.js';
+import { ChatTransportContext } from './contexts/chat-transport-context.js';
 
-import type { ClientTransport } from '../../core/transport/types.js';
-import type { ChatTransport, ChatTransportOptions } from '../transport/chat-transport.js';
-import { createChatTransport } from '../transport/chat-transport.js';
-import type { VercelClientTransportOptions } from '../transport/index.js';
-import { createClientTransport as createCoreClientTransport } from '../transport/index.js';
+const SKIPPED_CLIENT_TRANSPORT: ClientTransport<AI.UIMessageChunk, AI.UIMessage> = {
+  get tree(): Tree<AI.UIMessage> {
+    throw new Ably.ErrorInfo('unable to access tree; hook is skipped', ErrorCode.InvalidArgument, 400);
+  },
+  get view(): View<AI.UIMessageChunk, AI.UIMessage> {
+    throw new Ably.ErrorInfo('unable to access view; hook is skipped', ErrorCode.InvalidArgument, 400);
+  },
+  createView: (): View<AI.UIMessageChunk, AI.UIMessage> => {
+    throw new Ably.ErrorInfo('unable to create view; hook is skipped', ErrorCode.InvalidArgument, 400);
+  },
+  cancel: () => {
+    throw new Ably.ErrorInfo('unable to cancel; hook is skipped', ErrorCode.InvalidArgument, 400);
+  },
+  stageEvents: () => {
+    throw new Ably.ErrorInfo('unable to stage events; hook is skipped', ErrorCode.InvalidArgument, 400);
+  },
+  stageMessage: () => {
+    throw new Ably.ErrorInfo('unable to stage message; hook is skipped', ErrorCode.InvalidArgument, 400);
+  },
+  waitForTurn: () => {
+    throw new Ably.ErrorInfo('unable to wait for turn; hook is skipped', ErrorCode.InvalidArgument, 400);
+  },
+  on: () => {
+    throw new Ably.ErrorInfo('unable to subscribe; hook is skipped', ErrorCode.InvalidArgument, 400);
+  },
+  close: () => {
+    throw new Ably.ErrorInfo('unable to close; hook is skipped', ErrorCode.InvalidArgument, 400);
+  },
+};
+
+const SKIPPED_CHAT_TRANSPORT: ChatTransport = {
+  sendMessages: (): never => {
+    throw new Ably.ErrorInfo('unable to send messages; hook is skipped', ErrorCode.InvalidArgument, 400);
+  },
+  reconnectToStream: (): never => {
+    throw new Ably.ErrorInfo('unable to reconnect to stream; hook is skipped', ErrorCode.InvalidArgument, 400);
+  },
+  close: (): never => {
+    throw new Ably.ErrorInfo('unable to close; hook is skipped', ErrorCode.InvalidArgument, 400);
+  },
+  get streaming(): never {
+    throw new Ably.ErrorInfo('unable to access streaming; hook is skipped', ErrorCode.InvalidArgument, 400);
+  },
+  onStreamingChange: (): never => {
+    throw new Ably.ErrorInfo(
+      'unable to subscribe to streaming changes; hook is skipped',
+      ErrorCode.InvalidArgument,
+      400,
+    );
+  },
+};
+
+/** Options for {@link useChatTransport}. */
+export interface UseChatTransportOptions {
+  /** Channel name to look up; omit to use the nearest {@link ChatTransportProvider}. */
+  channelName?: string;
+  /** When `true`, return stub transports that throw on any access. */
+  skip?: boolean;
+}
 
 /**
- * Type guard: distinguish an existing ClientTransport from options.
- * @param x - Either a transport instance or options object.
- * @returns True if the argument is a ClientTransport instance.
+ * The value returned by {@link useChatTransport}.
+ * Provides both the underlying {@link ClientTransport} and the {@link ChatTransport}
+ * adapter for Vercel's useChat hook.
  */
-const isClientTransport = (
-  x: ClientTransport<AI.UIMessageChunk, AI.UIMessage> | VercelClientTransportOptions,
-): x is ClientTransport<AI.UIMessageChunk, AI.UIMessage> => 'send' in x && typeof x.send === 'function';
+export interface ChatTransportHandle {
+  /**
+   * The underlying client transport, also available via {@link useClientTransport}.
+   * A throwing stub when `skip` is `true`, when no matching {@link TransportProvider}
+   * was found in the tree, or when transport construction failed. Check `transportError` before use.
+   */
+  transport: ClientTransport<AI.UIMessageChunk, AI.UIMessage>;
+
+  /**
+   * The chat transport adapter for use with Vercel's `useChat` hook.
+   *
+   * A throwing stub when `skip` is `true`, when no matching
+   * {@link ChatTransportProvider} was found in the tree, or when the underlying
+   * {@link ClientTransport} construction failed. Check both `chatTransportError`
+   * and `transportError` before use.
+   */
+  chatTransport: ChatTransport;
+
+  /**
+   * Set when no matching {@link TransportProvider} was found, when transport
+   * construction failed, and `skip` is `false`.
+   * `undefined` when the transport resolved successfully or when `skip` is `true`.
+   */
+  transportError?: Ably.ErrorInfo | undefined;
+  /**
+   * Set when no matching {@link ChatTransportProvider} was found or when transport
+   * construction failed, and `skip` is `false`.
+   * `undefined` when the transport resolved successfully or when `skip` is `true`.
+   */
+  chatTransportError?: Ably.ErrorInfo | undefined;
+}
 
 /**
- * Create and memoize a {@link ChatTransport} for Vercel's useChat hook.
+ * Access a {@link ChatTransport} and {@link ClientTransport} from the nearest {@link ChatTransportProvider}.
  *
- * Pass an existing `ClientTransport` to wrap it, or pass
- * `VercelClientTransportOptions` to create one internally with UIMessageCodec.
- * @param transportOrOptions - An existing ClientTransport, or options to create one.
- * @param chatOptions - Optional hooks for customizing request construction.
- * @returns A {@link ChatTransport} compatible with Vercel's useChat hook.
+ * When `channelName` is omitted, the innermost `ChatTransportProvider` in the tree is used.
+ * When `skip` is `true`, returns stub transports whose every property and method throws
+ * an {@link Ably.ErrorInfo} — safe to hold in state before conditions are ready.
+ * When no provider is found, returns stubs with `chatTransportError` set instead of throwing.
+ * @param props - Options for selecting the transport.
+ * @param props.channelName - The channel name passed to the enclosing `ChatTransportProvider`. Omit to use the nearest.
+ * @param props.skip - When `true`, return stubs that throw on any access instead of reading from context.
+ * @returns The `ChatTransportHandle` containing both the chat transport adapter and the underlying client transport.
  */
-export const useChatTransport = (
-  transportOrOptions: ClientTransport<AI.UIMessageChunk, AI.UIMessage> | VercelClientTransportOptions,
-  chatOptions?: ChatTransportOptions,
-): ChatTransport => {
-  const chatTransportRef = useRef<ChatTransport | null>(null);
-
-  if (chatTransportRef.current === null) {
-    if (isClientTransport(transportOrOptions)) {
-      chatTransportRef.current = createChatTransport(transportOrOptions, chatOptions);
-    } else {
-      const transport = createCoreClientTransport(transportOrOptions);
-      chatTransportRef.current = createChatTransport(transport, chatOptions);
+export const useChatTransport = ({ channelName, skip }: UseChatTransportOptions = {}): ChatTransportHandle => {
+  const { nearest, providers } = useContext(ChatTransportContext);
+
+  if (skip) {
+    return { transport: SKIPPED_CLIENT_TRANSPORT, chatTransport: SKIPPED_CHAT_TRANSPORT };
+  }
+
+  if (channelName !== undefined) {
+    const slot = providers[channelName];
+    if (slot) {
+      return { transport: slot.transport, chatTransport: slot.chatTransport, transportError: slot.transportError };
     }
+    return {
+      transport: SKIPPED_CLIENT_TRANSPORT,
+      chatTransport: SKIPPED_CHAT_TRANSPORT,
+      transportError: new Ably.ErrorInfo(
+        `unable to use client transport; no TransportProvider found for channelName "${channelName}"`,
+        ErrorCode.BadRequest,
+        400,
+      ),
+      chatTransportError: new Ably.ErrorInfo(
+        `unable to use chat transport; no ChatTransportProvider found for channelName "${channelName}"`,
+        ErrorCode.BadRequest,
+        400,
+      ),
+    };
+  }
+
+  if (nearest) {
+    return {
+      transport: nearest.transport,
+      chatTransport: nearest.chatTransport,
+      transportError: nearest.transportError,
+    };
   }
 
-  return chatTransportRef.current;
+  return {
+    transport: SKIPPED_CLIENT_TRANSPORT,
+    chatTransport: SKIPPED_CHAT_TRANSPORT,
+    transportError: new Ably.ErrorInfo(
+      'unable to use transport; no TransportProvider found in the tree',
+      ErrorCode.BadRequest,
+      400,
+    ),
+    chatTransportError: new Ably.ErrorInfo(
+      'unable to use chat transport; no ChatTransportProvider found in the tree',
+      ErrorCode.BadRequest,
+      400,
+    ),
+  };
 };

package/src/vercel/react/use-message-sync.ts

@@ -1,34 +1,92 @@
 /**
  * useMessageSync: wires transport message lifecycle events into useChat's setMessages.
  *
- * Subscribes to the transport's 'message' event and replaces messages state
- * with the transport's authoritative message list. Events fire immediately
- * on every store update (including during active streaming), so this hook
- * keeps React state in sync in real time.
+ * Subscribes to the transport view's 'update' event and replaces messages state
+ * with the view's authoritative message list.
+ *
+ * When a ChatTransport is provided (resolved from the nearest ChatTransportProvider),
+ * setMessages calls are gated during active own-turn streams. This prevents the
+ * push/replace ID mismatch in useChat's write() function. When the stream finishes,
+ * the gate opens and an immediate sync fires to pick up any observer messages that
+ * arrived during the stream.
+ *
+ * All dependencies are resolved from the nearest ChatTransportProvider via
+ * useChatTransport(). Pass channelName to select a specific provider; omit to use
+ * the nearest. Pass skip: true to pause all subscriptions.
  *
  * Returns the unsubscribe function in the useEffect cleanup so handlers
  * are removed on unmount or when dependencies change.
  */
 
 import type * as AI from 'ai';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
+
+import { useChatTransport } from './use-chat-transport.js';
 
-import type { ClientTransport } from '../../core/transport/types.js';
+/** Options for {@link useMessageSync}. */
+export interface UseMessageSyncOptions {
+  /**
+   * The `setMessages` updater function from `useChat()`. Required.
+   * Called with a function that replaces the previous message list with the
+   * transport's current authoritative message list.
+   */
+  setMessages: (updater: (prev: AI.UIMessage[]) => AI.UIMessage[]) => void;
+  /**
+   * Channel name of the {@link ChatTransportProvider} to observe.
+   * Omit to use the nearest provider in the tree.
+   */
+  channelName?: string;
+  /**
+   * When `true`, skip all subscriptions and do nothing.
+   * Use when the hook's dependencies are not yet resolved (e.g. auth pending).
+   */
+  skip?: boolean;
+}
 
 /**
- * Wire transport message updates into useChat's `setMessages` updater.
- * @param transport - The client transport to observe, or null/undefined if not yet available.
- * @param setMessages - The `setMessages` updater function from useChat.
+ * Wire transport message updates into `useChat()`'s `setMessages` updater.
+ *
+ * Resolves both the transport view and the streaming gate from the nearest
+ * `ChatTransportProvider`. Pass `channelName` to target a specific provider.
+ * Pass `skip: true` to pause all subscriptions.
+ * @param options - Hook options.
+ * @param options.setMessages - The `setMessages` function from `useChat()`. Required.
+ * @param options.channelName - Channel name of the provider to observe; defaults to nearest.
+ * @param options.skip - When `true`, skip all subscriptions.
  */
-export const useMessageSync = (
-  transport: ClientTransport<unknown, AI.UIMessage> | null | undefined,
-  setMessages: (updater: (prev: AI.UIMessage[]) => AI.UIMessage[]) => void,
-): void => {
+export const useMessageSync = ({ setMessages, channelName, skip }: UseMessageSyncOptions): void => {
+  const { transport, chatTransport, chatTransportError } = useChatTransport({ channelName, skip });
+
+  // Only use resolved values when a provider was found and skip is false.
+  const resolved = !skip && !chatTransportError;
+  const view = resolved ? transport.view : undefined;
+  const resolvedChatTransport = resolved ? chatTransport : undefined;
+
+  const [gated, setGated] = useState(false);
+
+  // Subscribe to the ChatTransport's streaming state to gate setMessages.
+  // Reset gated to the new instance's current state so a stale `true`
+  // from a previous instance doesn't permanently suppress syncs.
+  useEffect(() => {
+    if (!resolvedChatTransport) {
+      setGated(false);
+      return;
+    }
+    setGated(resolvedChatTransport.streaming);
+    return resolvedChatTransport.onStreamingChange(setGated);
+  }, [resolvedChatTransport]);
+
+  // Subscribe to view updates and sync messages, unless gated.
   useEffect(() => {
-    if (!transport) return;
-    const unsubscribe = transport.on('message', () => {
-      setMessages(() => transport.getMessages());
-    });
-    return unsubscribe;
-  }, [transport, setMessages]);
+    if (!view || gated) return;
+
+    const sync = (): void => {
+      setMessages(() => view.flattenNodes().map((n) => n.message));
+    };
+
+    // Sync immediately when the effect runs (covers gate-open and initial mount).
+    sync();
+
+    return view.on('update', sync);
+  }, [view, setMessages, gated]);
 };

package/src/vercel/react/use-staged-add-tool-approval-response.ts

@@ -0,0 +1,87 @@
+/**
+ * useStagedAddToolApprovalResponse — wrap useChat's `addToolApprovalResponse`
+ * so the approval response is also applied to the transport tree
+ * synchronously at click time.
+ *
+ * Patching the tree at click time eliminates the useChat↔tree divergence
+ * the ChatTransport would otherwise have to reconcile via a history
+ * overlay, and closes the observer-turn race that could wipe the
+ * approval state between `addToolApprovalResponse` and
+ * `sendAutomaticallyWhen`'s evaluation.
+ *
+ * Use this in place of useChat's raw `addToolApprovalResponse` wherever
+ * you wire Approve / Deny buttons.
+ */
+
+import type * as AI from 'ai';
+import type { ChatAddToolApproveResponseFunction } from 'ai';
+import { useCallback } from 'react';
+
+import type { ClientTransport } from '../../core/transport/types.js';
+
+/**
+ * Returns a function with the same signature as useChat's
+ * `addToolApprovalResponse`, but additionally applies the approval
+ * response to the transport tree via `stageMessage` before delegating.
+ *
+ * If the tool call identified by `opts.id` isn't found in the tree,
+ * the tree update is skipped and the raw function is still called —
+ * matches useChat's tolerant behavior for stale approval ids.
+ * @param transport - The client transport whose tree to patch.
+ * @param addToolApprovalResponse - The raw function from `useChat()`.
+ * @returns A drop-in replacement that patches the tree then delegates.
+ */
+export const useStagedAddToolApprovalResponse = (
+  transport: ClientTransport<AI.UIMessageChunk, AI.UIMessage>,
+  addToolApprovalResponse: ChatAddToolApproveResponseFunction,
+): ChatAddToolApproveResponseFunction =>
+  useCallback<ChatAddToolApproveResponseFunction>(
+    (opts) => {
+      stageApprovalResponseOnTree(transport, opts);
+      return addToolApprovalResponse(opts);
+    },
+    [transport, addToolApprovalResponse],
+  );
+
+/**
+ * Locate the assistant message whose `dynamic-tool` part carries the
+ * given `approval.id`, build a patched copy with the part transitioned
+ * to `approval-responded`, and stage the patched message on the tree.
+ * @param transport - The transport whose tree to patch.
+ * @param opts - The approval response being applied.
+ * @param opts.id - The approval id matching a dynamic-tool part in the tree.
+ * @param opts.approved - Whether the user approved or denied.
+ * @param opts.reason - Optional reason accompanying the response.
+ */
+const stageApprovalResponseOnTree = (
+  transport: ClientTransport<AI.UIMessageChunk, AI.UIMessage>,
+  opts: { id: string; approved: boolean; reason?: string },
+): void => {
+  const nodes = transport.view.flattenNodes();
+  for (const node of nodes) {
+    const partIndex = node.message.parts.findIndex((p) => p.type === 'dynamic-tool' && p.approval?.id === opts.id);
+    if (partIndex === -1) continue;
+
+    // CAST: findIndex predicate above narrows this to a dynamic-tool part
+    // with a non-undefined approval.
+    const part = node.message.parts[partIndex] as AI.DynamicToolUIPart;
+
+    // Build the approval-responded variant directly rather than spreading
+    // `part`, which TypeScript narrows to whichever source-state variant
+    // the union discriminator inferred and then rejects when we change
+    // `state` to a variant with different approval/output constraints.
+    const patchedPart: AI.DynamicToolUIPart = {
+      type: 'dynamic-tool',
+      toolName: part.toolName,
+      toolCallId: part.toolCallId,
+      state: 'approval-responded',
+      input: part.input,
+      approval: { id: opts.id, approved: opts.approved, reason: opts.reason },
+    };
+
+    const patchedParts = [...node.message.parts];
+    patchedParts[partIndex] = patchedPart;
+    transport.stageMessage(node.msgId, { ...node.message, parts: patchedParts });
+    return;
+  }
+};

package/src/vercel/react/vite.config.ts

@@ -19,12 +19,14 @@ export default defineConfig({
       formats: ['es', 'umd'],
     },
     rollupOptions: {
-      external: ['ably', 'ai', 'react'],
+      external: ['ably', 'ably/react', 'react', 'react/jsx-runtime', 'react/jsx-dev-runtime'],
       output: {
         globals: {
           ably: 'Ably',
-          ai: 'AI',
+          'ably/react': 'AblyReact',
           react: 'React',
+          'react/jsx-runtime': 'ReactJsxRuntime',
+          'react/jsx-dev-runtime': 'ReactJsxDevRuntime',
         },
       },
     },