@tanstack/ai-react 0.18.1 → 0.19.1

package/README.md

@@ -1,5 +1,19 @@
 <div align="center">
-  <img src="https://raw.githubusercontent.com/TanStack/ai/main/media/header_ai.png" alt="TanStack AI" />
+  <picture>
+    <source
+      media="(prefers-color-scheme: dark)"
+      srcset="https://tanstack.com/api/readme/ai.png?framework=react&theme=dark"
+    />
+    <source
+      media="(prefers-color-scheme: light)"
+      srcset="https://tanstack.com/api/readme/ai.png?framework=react"
+    />
+    <img
+      src="https://tanstack.com/api/readme/ai.png?framework=react"
+      alt="TanStack React AI"
+      width="900"
+    />
+  </picture>
 </div>
 
 <br />

package/dist/esm/index.d.ts

@@ -20,4 +20,4 @@ export { useGenerateVideo } from './use-generate-video.js';
 export type { UseGenerateVideoOptions, UseGenerateVideoReturn, } from './use-generate-video.js';
 export { useAudioRecorder } from './use-audio-recorder.js';
 export type { UseAudioRecorderOptions, UseAudioRecorderReturn, } from './use-audio-recorder.js';
-export { fetchServerSentEvents, fetchHttpStream, xhrServerSentEvents, xhrHttpStream, stream, rpcStream, createChatClientOptions, createMcpAppBridge, type McpAppBridge, type CreateMcpAppBridgeOptions, type ChatFetcher, type ChatFetcherInput, type ChatFetcherOptions, type ConnectionAdapter, type ConnectConnectionAdapter, type SubscribeConnectionAdapter, type RunAgentInputContext, type FetchConnectionOptions, type XhrConnectionOptions, type InferChatMessages, type GenerationClientState, type ImageGenerateInput, type AudioGenerateInput, type SpeechGenerateInput, type TranscriptionGenerateInput, type SummarizeGenerateInput, type VideoGenerateInput, type VideoGenerateResult, type VideoStatusInfo, } from '@tanstack/ai-client';
+export { fetchServerSentEvents, localStoragePersistence, sessionStoragePersistence, indexedDBPersistence, StorageUnavailableError, type ChatClientPersistence, type ChatPersistedState, type ChatPersistenceOption, type ChatStorageAdapter, type WebStoragePersistenceOptions, type IndexedDBPersistenceOptions, fetchHttpStream, xhrServerSentEvents, xhrHttpStream, stream, rpcStream, createChatClientOptions, createMcpAppBridge, type McpAppBridge, type CreateMcpAppBridgeOptions, type ChatFetcher, type ChatFetcherInput, type ChatFetcherOptions, type ConnectionAdapter, type ConnectConnectionAdapter, type SubscribeConnectionAdapter, type RunAgentInputContext, type FetchConnectionOptions, type XhrConnectionOptions, type InferChatMessages, type GenerationClientState, type ImageGenerateInput, type AudioGenerateInput, type SpeechGenerateInput, type TranscriptionGenerateInput, type SummarizeGenerateInput, type VideoGenerateInput, type VideoGenerateResult, type VideoStatusInfo, } from '@tanstack/ai-client';

package/dist/esm/index.js

@@ -9,26 +9,5 @@ import { useTranscription } from "./use-transcription.js";
 import { useSummarize } from "./use-summarize.js";
 import { useGenerateVideo } from "./use-generate-video.js";
 import { useAudioRecorder } from "./use-audio-recorder.js";
-import { createChatClientOptions, createMcpAppBridge, fetchHttpStream, fetchServerSentEvents, rpcStream, stream, xhrHttpStream, xhrServerSentEvents } from "@tanstack/ai-client";
-export {
-  createChatClientOptions,
-  createMcpAppBridge,
-  fetchHttpStream,
-  fetchServerSentEvents,
-  rpcStream,
-  stream,
-  useAudioRecorder,
-  useChat,
-  useGenerateAudio,
-  useGenerateImage,
-  useGenerateSpeech,
-  useGenerateVideo,
-  useGeneration,
-  useMcpAppBridge,
-  useRealtimeChat,
-  useSummarize,
-  useTranscription,
-  xhrHttpStream,
-  xhrServerSentEvents
-};
-//# sourceMappingURL=index.js.map
+import { StorageUnavailableError, createChatClientOptions, createMcpAppBridge, fetchHttpStream, fetchServerSentEvents, indexedDBPersistence, localStoragePersistence, rpcStream, sessionStoragePersistence, stream, xhrHttpStream, xhrServerSentEvents } from "@tanstack/ai-client";
+export { StorageUnavailableError, createChatClientOptions, createMcpAppBridge, fetchHttpStream, fetchServerSentEvents, indexedDBPersistence, localStoragePersistence, rpcStream, sessionStoragePersistence, stream, useAudioRecorder, useChat, useGenerateAudio, useGenerateImage, useGenerateSpeech, useGenerateVideo, useGeneration, useMcpAppBridge, useRealtimeChat, useSummarize, useTranscription, xhrHttpStream, xhrServerSentEvents };

package/dist/esm/mcp-app-resource.js

@@ -1,52 +1,52 @@
-import { jsx } from "react/jsx-runtime";
 import { AppRenderer } from "@mcp-ui/client";
+import { jsx } from "react/jsx-runtime";
+//#region src/mcp-app-resource.tsx
 function isRecord(value) {
-  return typeof value === "object" && value !== null && !Array.isArray(value);
+	return typeof value === "object" && value !== null && !Array.isArray(value);
 }
+/**
+* Coalesce an arbitrary bridge result into the `string` required by the
+* `CallToolResult` text content block. `JSON.stringify` is typed to return
+* `string` but actually returns `undefined` for inputs like `undefined` or a
+* function, so we narrow explicitly to avoid `text: undefined`.
+*/
 function resultToText(result) {
-  if (typeof result === "string") return result;
-  const stringify = JSON.stringify;
-  return stringify(result) ?? "null";
+	if (typeof result === "string") return result;
+	const stringify = JSON.stringify;
+	return stringify(result) ?? "null";
 }
 function MCPAppResource(props) {
-  const { bridge } = props;
-  return /* @__PURE__ */ jsx(
-    AppRenderer,
-    {
-      toolName: props.part.toolName,
-      sandbox: props.sandbox,
-      html: props.part.resource.text,
-      toolResourceUri: props.part.resource.uri,
-      toolInput: props.toolInput,
-      onCallTool: bridge ? async ({ name, arguments: args }) => {
-        const result = await bridge.callTool({
-          serverId: props.part.serverId,
-          toolName: name,
-          args
-        });
-        const structuredContent = isRecord(result) ? result : void 0;
-        return {
-          content: [
-            {
-              type: "text",
-              text: resultToText(result)
-            }
-          ],
-          structuredContent
-        };
-      } : void 0,
-      onMessage: bridge ? async ({ content }) => {
-        const text = content.filter(
-          (c) => c.type === "text"
-        ).map((c) => c.text).join("");
-        if (text) await bridge.sendPrompt(text);
-        return {};
-      } : void 0,
-      onOpenLink: bridge ? ({ url }) => Promise.resolve(bridge.openLink(url)) : void 0
-    }
-  );
+	const { bridge } = props;
+	return /* @__PURE__ */ jsx(AppRenderer, {
+		toolName: props.part.toolName,
+		sandbox: props.sandbox,
+		html: props.part.resource.text,
+		toolResourceUri: props.part.resource.uri,
+		toolInput: props.toolInput,
+		onCallTool: bridge ? async ({ name, arguments: args }) => {
+			const result = await bridge.callTool({
+				serverId: props.part.serverId,
+				toolName: name,
+				args
+			});
+			const structuredContent = isRecord(result) ? result : void 0;
+			return {
+				content: [{
+					type: "text",
+					text: resultToText(result)
+				}],
+				structuredContent
+			};
+		} : void 0,
+		onMessage: bridge ? async ({ content }) => {
+			const text = content.filter((c) => c.type === "text").map((c) => c.text).join("");
+			if (text) await bridge.sendPrompt(text);
+			return {};
+		} : void 0,
+		onOpenLink: bridge ? ({ url }) => Promise.resolve(bridge.openLink(url)) : void 0
+	});
 }
-export {
-  MCPAppResource
-};
-//# sourceMappingURL=mcp-app-resource.js.map
+//#endregion
+export { MCPAppResource };
+
+//# sourceMappingURL=mcp-app-resource.js.map

package/dist/esm/mcp-app-resource.js.map

@@ -1 +1 @@
-{"version":3,"file":"mcp-app-resource.js","sources":["../../src/mcp-app-resource.tsx"],"sourcesContent":["import { AppRenderer } from '@mcp-ui/client'\nimport type { UIResourcePart } from '@tanstack/ai'\nimport type { McpAppBridge } from '@tanstack/ai-client'\nimport type { JSX } from 'react'\n\nexport interface MCPAppResourceProps {\n  /** The ui-resource part from a UIMessage assistant part. */\n  part: UIResourcePart\n  /**\n   * Framework-agnostic bridge for tool calls, prompt sending, and link opening.\n   * Omit it to render the widget in display-only mode — iframe interactions\n   * that would trigger tool calls or prompts are ignored.\n   */\n  bridge?: McpAppBridge\n  /** Sandbox iframe configuration — must include the proxy page URL. */\n  sandbox: { url: URL }\n  /** Optional structured arguments forwarded to the guest UI once it's ready. */\n  toolInput?: Record<string, unknown>\n}\n\nfunction isRecord(value: unknown): value is Record<string, unknown> {\n  return typeof value === 'object' && value !== null && !Array.isArray(value)\n}\n\n/**\n * Coalesce an arbitrary bridge result into the `string` required by the\n * `CallToolResult` text content block. `JSON.stringify` is typed to return\n * `string` but actually returns `undefined` for inputs like `undefined` or a\n * function, so we narrow explicitly to avoid `text: undefined`.\n */\nfunction resultToText(result: unknown): string {\n  if (typeof result === 'string') return result\n  // `JSON.stringify`'s lib signature claims `string`, but it returns\n  // `undefined` for `undefined`/function inputs; type the call honestly.\n  const stringify: (value: unknown) => string | undefined = JSON.stringify\n  return stringify(result) ?? 'null'\n}\n\nexport function MCPAppResource(props: MCPAppResourceProps): JSX.Element {\n  const { bridge } = props\n  return (\n    <AppRenderer\n      toolName={props.part.toolName}\n      sandbox={props.sandbox}\n      html={props.part.resource.text}\n      toolResourceUri={props.part.resource.uri}\n      toolInput={props.toolInput}\n      onCallTool={\n        bridge\n          ? async ({ name, arguments: args }) => {\n              const result = await bridge.callTool({\n                serverId: props.part.serverId,\n                toolName: name,\n                args,\n              })\n              const structuredContent = isRecord(result) ? result : undefined\n              return {\n                content: [\n                  {\n                    type: 'text' as const,\n                    text: resultToText(result),\n                  },\n                ],\n                structuredContent,\n              }\n            }\n          : undefined\n      }\n      onMessage={\n        bridge\n          ? async ({ content }) => {\n              const text = content\n                .filter(\n                  (c): c is { type: 'text'; text: string } => c.type === 'text',\n                )\n                .map((c) => c.text)\n                .join('')\n              if (text) await bridge.sendPrompt(text)\n              return {}\n            }\n          : undefined\n      }\n      onOpenLink={\n        bridge ? ({ url }) => Promise.resolve(bridge.openLink(url)) : undefined\n      }\n    />\n  )\n}\n"],"names":[],"mappings":";;AAoBA,SAAS,SAAS,OAAkD;AAClE,SAAO,OAAO,UAAU,YAAY,UAAU,QAAQ,CAAC,MAAM,QAAQ,KAAK;AAC5E;AAQA,SAAS,aAAa,QAAyB;AAC7C,MAAI,OAAO,WAAW,SAAU,QAAO;AAGvC,QAAM,YAAoD,KAAK;AAC/D,SAAO,UAAU,MAAM,KAAK;AAC9B;AAEO,SAAS,eAAe,OAAyC;AACtE,QAAM,EAAE,WAAW;AACnB,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,UAAU,MAAM,KAAK;AAAA,MACrB,SAAS,MAAM;AAAA,MACf,MAAM,MAAM,KAAK,SAAS;AAAA,MAC1B,iBAAiB,MAAM,KAAK,SAAS;AAAA,MACrC,WAAW,MAAM;AAAA,MACjB,YACE,SACI,OAAO,EAAE,MAAM,WAAW,WAAW;AACnC,cAAM,SAAS,MAAM,OAAO,SAAS;AAAA,UACnC,UAAU,MAAM,KAAK;AAAA,UACrB,UAAU;AAAA,UACV;AAAA,QAAA,CACD;AACD,cAAM,oBAAoB,SAAS,MAAM,IAAI,SAAS;AACtD,eAAO;AAAA,UACL,SAAS;AAAA,YACP;AAAA,cACE,MAAM;AAAA,cACN,MAAM,aAAa,MAAM;AAAA,YAAA;AAAA,UAC3B;AAAA,UAEF;AAAA,QAAA;AAAA,MAEJ,IACA;AAAA,MAEN,WACE,SACI,OAAO,EAAE,cAAc;AACrB,cAAM,OAAO,QACV;AAAA,UACC,CAAC,MAA2C,EAAE,SAAS;AAAA,QAAA,EAExD,IAAI,CAAC,MAAM,EAAE,IAAI,EACjB,KAAK,EAAE;AACV,YAAI,KAAM,OAAM,OAAO,WAAW,IAAI;AACtC,eAAO,CAAA;AAAA,MACT,IACA;AAAA,MAEN,YACE,SAAS,CAAC,EAAE,UAAU,QAAQ,QAAQ,OAAO,SAAS,GAAG,CAAC,IAAI;AAAA,IAAA;AAAA,EAAA;AAItE;"}
+{"version":3,"file":"mcp-app-resource.js","names":[],"sources":["../../src/mcp-app-resource.tsx"],"sourcesContent":["import { AppRenderer } from '@mcp-ui/client'\nimport type { UIResourcePart } from '@tanstack/ai'\nimport type { McpAppBridge } from '@tanstack/ai-client'\nimport type { JSX } from 'react'\n\nexport interface MCPAppResourceProps {\n  /** The ui-resource part from a UIMessage assistant part. */\n  part: UIResourcePart\n  /**\n   * Framework-agnostic bridge for tool calls, prompt sending, and link opening.\n   * Omit it to render the widget in display-only mode — iframe interactions\n   * that would trigger tool calls or prompts are ignored.\n   */\n  bridge?: McpAppBridge\n  /** Sandbox iframe configuration — must include the proxy page URL. */\n  sandbox: { url: URL }\n  /** Optional structured arguments forwarded to the guest UI once it's ready. */\n  toolInput?: Record<string, unknown>\n}\n\nfunction isRecord(value: unknown): value is Record<string, unknown> {\n  return typeof value === 'object' && value !== null && !Array.isArray(value)\n}\n\n/**\n * Coalesce an arbitrary bridge result into the `string` required by the\n * `CallToolResult` text content block. `JSON.stringify` is typed to return\n * `string` but actually returns `undefined` for inputs like `undefined` or a\n * function, so we narrow explicitly to avoid `text: undefined`.\n */\nfunction resultToText(result: unknown): string {\n  if (typeof result === 'string') return result\n  // `JSON.stringify`'s lib signature claims `string`, but it returns\n  // `undefined` for `undefined`/function inputs; type the call honestly.\n  const stringify: (value: unknown) => string | undefined = JSON.stringify\n  return stringify(result) ?? 'null'\n}\n\nexport function MCPAppResource(props: MCPAppResourceProps): JSX.Element {\n  const { bridge } = props\n  return (\n    <AppRenderer\n      toolName={props.part.toolName}\n      sandbox={props.sandbox}\n      html={props.part.resource.text}\n      toolResourceUri={props.part.resource.uri}\n      toolInput={props.toolInput}\n      onCallTool={\n        bridge\n          ? async ({ name, arguments: args }) => {\n              const result = await bridge.callTool({\n                serverId: props.part.serverId,\n                toolName: name,\n                args,\n              })\n              const structuredContent = isRecord(result) ? result : undefined\n              return {\n                content: [\n                  {\n                    type: 'text' as const,\n                    text: resultToText(result),\n                  },\n                ],\n                structuredContent,\n              }\n            }\n          : undefined\n      }\n      onMessage={\n        bridge\n          ? async ({ content }) => {\n              const text = content\n                .filter(\n                  (c): c is { type: 'text'; text: string } => c.type === 'text',\n                )\n                .map((c) => c.text)\n                .join('')\n              if (text) await bridge.sendPrompt(text)\n              return {}\n            }\n          : undefined\n      }\n      onOpenLink={\n        bridge ? ({ url }) => Promise.resolve(bridge.openLink(url)) : undefined\n      }\n    />\n  )\n}\n"],"mappings":";;;AAoBA,SAAS,SAAS,OAAkD;CAClE,OAAO,OAAO,UAAU,YAAY,UAAU,QAAQ,CAAC,MAAM,QAAQ,KAAK;AAC5E;;;;;;;AAQA,SAAS,aAAa,QAAyB;CAC7C,IAAI,OAAO,WAAW,UAAU,OAAO;CAGvC,MAAM,YAAoD,KAAK;CAC/D,OAAO,UAAU,MAAM,KAAK;AAC9B;AAEA,SAAgB,eAAe,OAAyC;CACtE,MAAM,EAAE,WAAW;CACnB,OACE,oBAAC,aAAD;EACE,UAAU,MAAM,KAAK;EACrB,SAAS,MAAM;EACf,MAAM,MAAM,KAAK,SAAS;EAC1B,iBAAiB,MAAM,KAAK,SAAS;EACrC,WAAW,MAAM;EACjB,YACE,SACI,OAAO,EAAE,MAAM,WAAW,WAAW;GACnC,MAAM,SAAS,MAAM,OAAO,SAAS;IACnC,UAAU,MAAM,KAAK;IACrB,UAAU;IACV;GACF,CAAC;GACD,MAAM,oBAAoB,SAAS,MAAM,IAAI,SAAS,KAAA;GACtD,OAAO;IACL,SAAS,CACP;KACE,MAAM;KACN,MAAM,aAAa,MAAM;IAC3B,CACF;IACA;GACF;EACF,IACA,KAAA;EAEN,WACE,SACI,OAAO,EAAE,cAAc;GACrB,MAAM,OAAO,QACV,QACE,MAA2C,EAAE,SAAS,MACzD,CAAC,CACA,KAAK,MAAM,EAAE,IAAI,CAAC,CAClB,KAAK,EAAE;GACV,IAAI,MAAM,MAAM,OAAO,WAAW,IAAI;GACtC,OAAO,CAAC;EACV,IACA,KAAA;EAEN,YACE,UAAU,EAAE,UAAU,QAAQ,QAAQ,OAAO,SAAS,GAAG,CAAC,IAAI,KAAA;CAEjE,CAAA;AAEL"}

package/dist/esm/mcp-apps.js

@@ -1,5 +1,2 @@
 import { MCPAppResource } from "./mcp-app-resource.js";
-export {
-  MCPAppResource
-};
-//# sourceMappingURL=mcp-apps.js.map
+export { MCPAppResource };

package/dist/esm/types.d.ts

@@ -1,5 +1,5 @@
-import { AnyClientTool, InferSchemaType, ModelMessage, SchemaInput } from '@tanstack/ai/client';
-import { AIDevtoolsDisplayOptions, ChatClientOptions, ChatClientState, ChatRequestBody, ClientContextOptionFromTools, ConnectionStatus, DistributedOmit, InferredClientContext, MultimodalContent, QueueConfig, QueueOption, QueueStrategy, QueuedMessage, SendMessageOptions, UIMessage, WhenBusy } from '@tanstack/ai-client';
+import { AnyClientTool, InferSchemaType, ModelMessage, RunAgentResumeItem, SchemaInput } from '@tanstack/ai/client';
+import { AIDevtoolsDisplayOptions, BoundInterrupts, ChatClientOptions, ChatClientState, ChatInterrupt, ChatInterruptState, ChatRequestBody, ChatResumeState, ClientContextOptionFromTools, ConnectionStatus, DistributedOmit, InferredClientContext, MultimodalContent, QueueConfig, QueueOption, QueueStrategy, QueuedMessage, SendMessageOptions, UIMessage, WhenBusy } from '@tanstack/ai-client';
 export type { ChatRequestBody, MultimodalContent, QueueConfig, QueuedMessage, QueueOption, QueueStrategy, SendMessageOptions, UIMessage, WhenBusy, };
 /**
  * Recursive partial — every property and every nested array element is optional.
@@ -35,7 +35,7 @@ export type DeepPartial<T> = T extends ReadonlyArray<infer U> ? Array<DeepPartia
  * Note: Connection and body changes will recreate the ChatClient instance.
  * To update these options, remount the component or use a key prop.
  */
-export type UseChatOptions<TTools extends ReadonlyArray<AnyClientTool> = any, TSchema extends SchemaInput | undefined = undefined, TContext = InferredClientContext<TTools>> = DistributedOmit<ChatClientOptions<TTools, TContext>, 'onMessagesChange' | 'onLoadingChange' | 'onErrorChange' | 'onStatusChange' | 'onSubscriptionChange' | 'onConnectionStatusChange' | 'onSessionGeneratingChange' | 'onQueueChange' | 'context' | 'devtools'> & {
+export type UseChatOptions<TTools extends ReadonlyArray<AnyClientTool> = any, TSchema extends SchemaInput | undefined = undefined, TContext = InferredClientContext<TTools>> = DistributedOmit<ChatClientOptions<TTools, TContext>, 'onMessagesChange' | 'onLoadingChange' | 'onErrorChange' | 'onStatusChange' | 'onSubscriptionChange' | 'onConnectionStatusChange' | 'onSessionGeneratingChange' | 'onQueueChange' | 'onResumeStateChange' | 'onRunIdChange' | 'context' | 'devtools' | 'id'> & {
     /** Display options for TanStack AI Devtools. */
     devtools?: AIDevtoolsDisplayOptions;
     /**
@@ -116,6 +116,32 @@ interface BaseUseChatReturn<TTools extends ReadonlyArray<AnyClientTool> = any, T
         id: string;
         approved: boolean;
     }) => Promise<void>;
+    /**
+     * The id of the run this client has in flight — one it started or rejoined —
+     * or `null` when there is none (including while a run sits paused on an
+     * interrupt, waiting on approval).
+     *
+     * A run is one turn of the conversation, so this changes from turn to turn. A
+     * whole tool loop stays inside one run, while resuming after an interrupt
+     * continues the turn under a new id — so one user message can produce several
+     * run ids. Use it to talk to your own server about that run (cancel it, poll
+     * it, correlate a log line).
+     */
+    runId: string | null;
+    interrupts: BoundInterrupts<TTools>;
+    /** @deprecated Use `interrupts`. */
+    pendingInterrupts: BoundInterrupts<TTools>;
+    interruptErrors: ChatInterruptState<TTools>['interruptErrors'];
+    resuming: boolean;
+    resolveInterrupts: {
+        (approved: boolean): void;
+        (resolver: (interrupt: ChatInterrupt<TTools>) => undefined): void;
+    };
+    cancelInterrupts: () => void;
+    retryInterrupts: () => void;
+    resumeInterruptsUnsafe: (resume: Array<RunAgentResumeItem>, state?: ChatResumeState) => Promise<boolean>;
+    /** @deprecated Use bound interrupt methods or `resumeInterruptsUnsafe`. */
+    resumeInterrupts: (resume: Array<RunAgentResumeItem>, state?: ChatResumeState) => Promise<boolean>;
     /**
      * Reload the last assistant message
      */

package/dist/esm/use-audio-recorder.js

@@ -1,49 +1,44 @@
-import { useState, useRef, useMemo, useEffect, useCallback } from "react";
 import { AudioRecorder } from "@tanstack/ai-client";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+//#region src/use-audio-recorder.ts
 function useAudioRecorder(options = {}) {
-  const [isRecording, setIsRecording] = useState(false);
-  const [recording, setRecording] = useState(null);
-  const optionsRef = useRef(options);
-  optionsRef.current = options;
-  const recorder = useMemo(
-    () => new AudioRecorder({
-      ...options.audio !== void 0 && { audio: options.audio },
-      ...options.mimeType !== void 0 && { mimeType: options.mimeType },
-      onError: (err) => optionsRef.current.onError?.(err)
-    }),
-    // Recorder config (audio/mimeType) is captured once at mount, matching the
-    // other hooks' create-once pattern.
-    []
-  );
-  useEffect(() => {
-    const unsubscribe = recorder.subscribe((state) => {
-      setIsRecording(state === "recording");
-    });
-    return () => {
-      unsubscribe();
-      recorder.cancel();
-    };
-  }, [recorder]);
-  const start = useCallback(() => recorder.start(), [recorder]);
-  const stop = useCallback(async () => {
-    const recording2 = await recorder.stop();
-    const transformed = await optionsRef.current.onComplete?.(recording2);
-    const output = transformed === void 0 ? recording2 : transformed;
-    setRecording(() => output);
-    return output;
-  }, [recorder]);
-  const cancel = useCallback(() => recorder.cancel(), [recorder]);
-  return {
-    recording,
-    isRecording,
-    // recording is client-only; if SSR'd, gate UI on a mounted flag.
-    isSupported: AudioRecorder.isSupported(),
-    start,
-    stop,
-    cancel
-  };
+	const [isRecording, setIsRecording] = useState(false);
+	const [recording, setRecording] = useState(null);
+	const optionsRef = useRef(options);
+	optionsRef.current = options;
+	const recorder = useMemo(() => new AudioRecorder({
+		...options.audio !== void 0 && { audio: options.audio },
+		...options.mimeType !== void 0 && { mimeType: options.mimeType },
+		onError: (err) => optionsRef.current.onError?.(err)
+	}), []);
+	useEffect(() => {
+		const unsubscribe = recorder.subscribe((state) => {
+			setIsRecording(state === "recording");
+		});
+		return () => {
+			unsubscribe();
+			recorder.cancel();
+		};
+	}, [recorder]);
+	const start = useCallback(() => recorder.start(), [recorder]);
+	const stop = useCallback(async () => {
+		const recording = await recorder.stop();
+		const transformed = await optionsRef.current.onComplete?.(recording);
+		const output = transformed === void 0 ? recording : transformed;
+		setRecording(() => output);
+		return output;
+	}, [recorder]);
+	const cancel = useCallback(() => recorder.cancel(), [recorder]);
+	return {
+		recording,
+		isRecording,
+		isSupported: AudioRecorder.isSupported(),
+		start,
+		stop,
+		cancel
+	};
 }
-export {
-  useAudioRecorder
-};
-//# sourceMappingURL=use-audio-recorder.js.map
+//#endregion
+export { useAudioRecorder };
+
+//# sourceMappingURL=use-audio-recorder.js.map

package/dist/esm/use-audio-recorder.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-audio-recorder.js","sources":["../../src/use-audio-recorder.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from 'react'\nimport { AudioRecorder } from '@tanstack/ai-client'\nimport type {\n  AudioRecorderOptions,\n  AudioRecording,\n  InferAudioRecordingOutput,\n} from '@tanstack/ai-client'\n\nexport type UseAudioRecorderOptions<TOnComplete> = AudioRecorderOptions & {\n  /**\n   * Optional transform applied to the recording when `stop()` resolves. Its\n   * (awaited) return value becomes `recording` and the resolved value of\n   * `stop()`. Return nothing to keep the raw `AudioRecording`.\n   */\n  onComplete?: TOnComplete\n}\n\nexport interface UseAudioRecorderReturn<TOutput> {\n  /** Latest recording (transformed if `onComplete` provided), or null. */\n  recording: TOutput | null\n  /** True while actively capturing audio. */\n  isRecording: boolean\n  /** Whether the browser supports recording (getUserMedia + MediaRecorder). */\n  isSupported: boolean\n  /** Acquire the mic and begin recording. */\n  start: () => Promise<void>\n  /** Stop and resolve with the completed recording (transformed if `onComplete` provided). */\n  stop: () => Promise<TOutput>\n  /** Discard the in-progress recording and release the mic. */\n  cancel: () => void\n}\n\n/**\n * React hook for recording an audio message. The resolved\n * {@link AudioRecording} carries `.part` (an audio content part for\n * `useChat.sendMessage`) and `.base64` (for the generation hooks).\n *\n * Errors are delivered via `onError`. `start()` and `stop()` also reject on\n * failure (and `stop()` rejects with `Recording cancelled` if the component\n * unmounts while a stop is in flight) — handle one channel, not both.\n *\n * @example\n * ```tsx\n * const { isRecording, start, stop, recording } = useAudioRecorder()\n * const { sendMessage } = useChat({ connection })\n * // ...\n * const rec = await stop()\n * sendMessage({ content: [rec.part] })\n * ```\n */\nexport function useAudioRecorder<\n  TOnComplete extends (recording: AudioRecording) => unknown,\n>(\n  options: UseAudioRecorderOptions<TOnComplete>,\n): UseAudioRecorderReturn<InferAudioRecordingOutput<TOnComplete>>\nexport function useAudioRecorder(\n  options?: UseAudioRecorderOptions<undefined>,\n): UseAudioRecorderReturn<AudioRecording>\nexport function useAudioRecorder(\n  options: UseAudioRecorderOptions<(recording: AudioRecording) => unknown> = {},\n): UseAudioRecorderReturn<unknown> {\n  const [isRecording, setIsRecording] = useState(false)\n  const [recording, setRecording] = useState<unknown>(null)\n  // Read the freshest callbacks at fire time without recreating the recorder.\n  const optionsRef = useRef(options)\n  optionsRef.current = options\n\n  const recorder = useMemo(\n    () =>\n      new AudioRecorder({\n        ...(options.audio !== undefined && { audio: options.audio }),\n        ...(options.mimeType !== undefined && { mimeType: options.mimeType }),\n        onError: (err) => optionsRef.current.onError?.(err),\n      }),\n    // Recorder config (audio/mimeType) is captured once at mount, matching the\n    // other hooks' create-once pattern.\n    [],\n  )\n\n  useEffect(() => {\n    const unsubscribe = recorder.subscribe((state) => {\n      setIsRecording(state === 'recording')\n    })\n    return () => {\n      unsubscribe()\n      recorder.cancel()\n    }\n  }, [recorder])\n\n  const start = useCallback(() => recorder.start(), [recorder])\n  const stop = useCallback(async () => {\n    const recording = await recorder.stop()\n    const transformed = await optionsRef.current.onComplete?.(recording)\n    // Only `undefined` (returning nothing) falls back to the raw recording, so\n    // a transform that returns null is preserved — matching the inferred type,\n    // which excludes only undefined/void/null from the transform's return.\n    const output = transformed === undefined ? recording : transformed\n    setRecording(() => output)\n    return output\n  }, [recorder])\n  const cancel = useCallback(() => recorder.cancel(), [recorder])\n\n  return {\n    recording,\n    isRecording,\n    // recording is client-only; if SSR'd, gate UI on a mounted flag.\n    isSupported: AudioRecorder.isSupported(),\n    start,\n    stop,\n    cancel,\n  }\n}\n"],"names":["recording"],"mappings":";;AA0DO,SAAS,iBACd,UAA2E,IAC1C;AACjC,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,KAAK;AACpD,QAAM,CAAC,WAAW,YAAY,IAAI,SAAkB,IAAI;AAExD,QAAM,aAAa,OAAO,OAAO;AACjC,aAAW,UAAU;AAErB,QAAM,WAAW;AAAA,IACf,MACE,IAAI,cAAc;AAAA,MAChB,GAAI,QAAQ,UAAU,UAAa,EAAE,OAAO,QAAQ,MAAA;AAAA,MACpD,GAAI,QAAQ,aAAa,UAAa,EAAE,UAAU,QAAQ,SAAA;AAAA,MAC1D,SAAS,CAAC,QAAQ,WAAW,QAAQ,UAAU,GAAG;AAAA,IAAA,CACnD;AAAA;AAAA;AAAA,IAGH,CAAA;AAAA,EAAC;AAGH,YAAU,MAAM;AACd,UAAM,cAAc,SAAS,UAAU,CAAC,UAAU;AAChD,qBAAe,UAAU,WAAW;AAAA,IACtC,CAAC;AACD,WAAO,MAAM;AACX,kBAAA;AACA,eAAS,OAAA;AAAA,IACX;AAAA,EACF,GAAG,CAAC,QAAQ,CAAC;AAEb,QAAM,QAAQ,YAAY,MAAM,SAAS,SAAS,CAAC,QAAQ,CAAC;AAC5D,QAAM,OAAO,YAAY,YAAY;AACnC,UAAMA,aAAY,MAAM,SAAS,KAAA;AACjC,UAAM,cAAc,MAAM,WAAW,QAAQ,aAAaA,UAAS;AAInE,UAAM,SAAS,gBAAgB,SAAYA,aAAY;AACvD,iBAAa,MAAM,MAAM;AACzB,WAAO;AAAA,EACT,GAAG,CAAC,QAAQ,CAAC;AACb,QAAM,SAAS,YAAY,MAAM,SAAS,UAAU,CAAC,QAAQ,CAAC;AAE9D,SAAO;AAAA,IACL;AAAA,IACA;AAAA;AAAA,IAEA,aAAa,cAAc,YAAA;AAAA,IAC3B;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAEJ;"}
+{"version":3,"file":"use-audio-recorder.js","names":[],"sources":["../../src/use-audio-recorder.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from 'react'\nimport { AudioRecorder } from '@tanstack/ai-client'\nimport type {\n  AudioRecorderOptions,\n  AudioRecording,\n  InferAudioRecordingOutput,\n} from '@tanstack/ai-client'\n\nexport type UseAudioRecorderOptions<TOnComplete> = AudioRecorderOptions & {\n  /**\n   * Optional transform applied to the recording when `stop()` resolves. Its\n   * (awaited) return value becomes `recording` and the resolved value of\n   * `stop()`. Return nothing to keep the raw `AudioRecording`.\n   */\n  onComplete?: TOnComplete\n}\n\nexport interface UseAudioRecorderReturn<TOutput> {\n  /** Latest recording (transformed if `onComplete` provided), or null. */\n  recording: TOutput | null\n  /** True while actively capturing audio. */\n  isRecording: boolean\n  /** Whether the browser supports recording (getUserMedia + MediaRecorder). */\n  isSupported: boolean\n  /** Acquire the mic and begin recording. */\n  start: () => Promise<void>\n  /** Stop and resolve with the completed recording (transformed if `onComplete` provided). */\n  stop: () => Promise<TOutput>\n  /** Discard the in-progress recording and release the mic. */\n  cancel: () => void\n}\n\n/**\n * React hook for recording an audio message. The resolved\n * {@link AudioRecording} carries `.part` (an audio content part for\n * `useChat.sendMessage`) and `.base64` (for the generation hooks).\n *\n * Errors are delivered via `onError`. `start()` and `stop()` also reject on\n * failure (and `stop()` rejects with `Recording cancelled` if the component\n * unmounts while a stop is in flight) — handle one channel, not both.\n *\n * @example\n * ```tsx\n * const { isRecording, start, stop, recording } = useAudioRecorder()\n * const { sendMessage } = useChat({ connection })\n * // ...\n * const rec = await stop()\n * sendMessage({ content: [rec.part] })\n * ```\n */\nexport function useAudioRecorder<\n  TOnComplete extends (recording: AudioRecording) => unknown,\n>(\n  options: UseAudioRecorderOptions<TOnComplete>,\n): UseAudioRecorderReturn<InferAudioRecordingOutput<TOnComplete>>\nexport function useAudioRecorder(\n  options?: UseAudioRecorderOptions<undefined>,\n): UseAudioRecorderReturn<AudioRecording>\nexport function useAudioRecorder(\n  options: UseAudioRecorderOptions<(recording: AudioRecording) => unknown> = {},\n): UseAudioRecorderReturn<unknown> {\n  const [isRecording, setIsRecording] = useState(false)\n  const [recording, setRecording] = useState<unknown>(null)\n  // Read the freshest callbacks at fire time without recreating the recorder.\n  const optionsRef = useRef(options)\n  optionsRef.current = options\n\n  const recorder = useMemo(\n    () =>\n      new AudioRecorder({\n        ...(options.audio !== undefined && { audio: options.audio }),\n        ...(options.mimeType !== undefined && { mimeType: options.mimeType }),\n        onError: (err) => optionsRef.current.onError?.(err),\n      }),\n    // Recorder config (audio/mimeType) is captured once at mount, matching the\n    // other hooks' create-once pattern.\n    [],\n  )\n\n  useEffect(() => {\n    const unsubscribe = recorder.subscribe((state) => {\n      setIsRecording(state === 'recording')\n    })\n    return () => {\n      unsubscribe()\n      recorder.cancel()\n    }\n  }, [recorder])\n\n  const start = useCallback(() => recorder.start(), [recorder])\n  const stop = useCallback(async () => {\n    const recording = await recorder.stop()\n    const transformed = await optionsRef.current.onComplete?.(recording)\n    // Only `undefined` (returning nothing) falls back to the raw recording, so\n    // a transform that returns null is preserved — matching the inferred type,\n    // which excludes only undefined/void/null from the transform's return.\n    const output = transformed === undefined ? recording : transformed\n    setRecording(() => output)\n    return output\n  }, [recorder])\n  const cancel = useCallback(() => recorder.cancel(), [recorder])\n\n  return {\n    recording,\n    isRecording,\n    // recording is client-only; if SSR'd, gate UI on a mounted flag.\n    isSupported: AudioRecorder.isSupported(),\n    start,\n    stop,\n    cancel,\n  }\n}\n"],"mappings":";;;AA0DA,SAAgB,iBACd,UAA2E,CAAC,GAC3C;CACjC,MAAM,CAAC,aAAa,kBAAkB,SAAS,KAAK;CACpD,MAAM,CAAC,WAAW,gBAAgB,SAAkB,IAAI;CAExD,MAAM,aAAa,OAAO,OAAO;CACjC,WAAW,UAAU;CAErB,MAAM,WAAW,cAEb,IAAI,cAAc;EAChB,GAAI,QAAQ,UAAU,KAAA,KAAa,EAAE,OAAO,QAAQ,MAAM;EAC1D,GAAI,QAAQ,aAAa,KAAA,KAAa,EAAE,UAAU,QAAQ,SAAS;EACnE,UAAU,QAAQ,WAAW,QAAQ,UAAU,GAAG;CACpD,CAAC,GAGH,CAAC,CACH;CAEA,gBAAgB;EACd,MAAM,cAAc,SAAS,WAAW,UAAU;GAChD,eAAe,UAAU,WAAW;EACtC,CAAC;EACD,aAAa;GACX,YAAY;GACZ,SAAS,OAAO;EAClB;CACF,GAAG,CAAC,QAAQ,CAAC;CAEb,MAAM,QAAQ,kBAAkB,SAAS,MAAM,GAAG,CAAC,QAAQ,CAAC;CAC5D,MAAM,OAAO,YAAY,YAAY;EACnC,MAAM,YAAY,MAAM,SAAS,KAAK;EACtC,MAAM,cAAc,MAAM,WAAW,QAAQ,aAAa,SAAS;EAInE,MAAM,SAAS,gBAAgB,KAAA,IAAY,YAAY;EACvD,mBAAmB,MAAM;EACzB,OAAO;CACT,GAAG,CAAC,QAAQ,CAAC;CACb,MAAM,SAAS,kBAAkB,SAAS,OAAO,GAAG,CAAC,QAAQ,CAAC;CAE9D,OAAO;EACL;EACA;EAEA,aAAa,cAAc,YAAY;EACvC;EACA;EACA;CACF;AACF"}