@tanstack/ai-react 0.7.14 → 0.8.0

package/dist/esm/index.d.ts

@@ -6,6 +6,8 @@ export { useGeneration } from './use-generation.js';
 export type { UseGenerationOptions, UseGenerationReturn, } from './use-generation.js';
 export { useGenerateImage } from './use-generate-image.js';
 export type { UseGenerateImageOptions, UseGenerateImageReturn, } from './use-generate-image.js';
+export { useGenerateAudio } from './use-generate-audio.js';
+export type { UseGenerateAudioOptions, UseGenerateAudioReturn, } from './use-generate-audio.js';
 export { useGenerateSpeech } from './use-generate-speech.js';
 export type { UseGenerateSpeechOptions, UseGenerateSpeechReturn, } from './use-generate-speech.js';
 export { useTranscription } from './use-transcription.js';
@@ -14,4 +16,4 @@ export { useSummarize } from './use-summarize.js';
 export type { UseSummarizeOptions, UseSummarizeReturn } from './use-summarize.js';
 export { useGenerateVideo } from './use-generate-video.js';
 export type { UseGenerateVideoOptions, UseGenerateVideoReturn, } from './use-generate-video.js';
-export { fetchServerSentEvents, fetchHttpStream, stream, createChatClientOptions, type ConnectionAdapter, type FetchConnectionOptions, type InferChatMessages, type GenerationClientState, type ImageGenerateInput, type SpeechGenerateInput, type TranscriptionGenerateInput, type SummarizeGenerateInput, type VideoGenerateInput, type VideoGenerateResult, type VideoStatusInfo, } from '@tanstack/ai-client';
+export { fetchServerSentEvents, fetchHttpStream, stream, createChatClientOptions, type ConnectionAdapter, type FetchConnectionOptions, 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

@@ -2,6 +2,7 @@ import { useChat } from "./use-chat.js";
 import { useRealtimeChat } from "./use-realtime-chat.js";
 import { useGeneration } from "./use-generation.js";
 import { useGenerateImage } from "./use-generate-image.js";
+import { useGenerateAudio } from "./use-generate-audio.js";
 import { useGenerateSpeech } from "./use-generate-speech.js";
 import { useTranscription } from "./use-transcription.js";
 import { useSummarize } from "./use-summarize.js";
@@ -13,6 +14,7 @@ export {
   fetchServerSentEvents,
   stream,
   useChat,
+  useGenerateAudio,
   useGenerateImage,
   useGenerateSpeech,
   useGenerateVideo,

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}

package/dist/esm/use-chat.js

@@ -27,8 +27,11 @@ function useChat(options) {
       id: clientId,
       initialMessages: messagesToUse,
       body: optionsRef.current.body,
-      onResponse: optionsRef.current.onResponse,
-      onChunk: optionsRef.current.onChunk,
+      // Wrap every callback so the latest options are read at call time.
+      // Capturing the function reference directly would freeze it to whatever
+      // the parent passed on the first render.
+      onResponse: (response) => optionsRef.current.onResponse?.(response),
+      onChunk: (chunk) => optionsRef.current.onChunk?.(chunk),
       onFinish: (message) => {
         optionsRef.current.onFinish?.(message);
       },
@@ -36,7 +39,7 @@ function useChat(options) {
         optionsRef.current.onError?.(error2);
       },
       tools: optionsRef.current.tools,
-      onCustomEvent: optionsRef.current.onCustomEvent,
+      onCustomEvent: (eventType, data, context) => optionsRef.current.onCustomEvent?.(eventType, data, context),
       streamProcessor: options.streamProcessor,
       onMessagesChange: (newMessages) => {
         setMessages(newMessages);

package/dist/esm/use-chat.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-chat.js","sources":["../../src/use-chat.ts"],"sourcesContent":["import { ChatClient } from '@tanstack/ai-client'\nimport { useCallback, useEffect, useId, useMemo, useRef, useState } from 'react'\nimport type { AnyClientTool, ModelMessage } from '@tanstack/ai'\nimport type { ChatClientState, ConnectionStatus } from '@tanstack/ai-client'\n\nimport type {\n  MultimodalContent,\n  UIMessage,\n  UseChatOptions,\n  UseChatReturn,\n} from './types'\n\nexport function useChat<TTools extends ReadonlyArray<AnyClientTool> = any>(\n  options: UseChatOptions<TTools>,\n): UseChatReturn<TTools> {\n  const hookId = useId()\n  const clientId = options.id || hookId\n\n  const [messages, setMessages] = useState<Array<UIMessage<TTools>>>(\n    options.initialMessages || [],\n  )\n  const [isLoading, setIsLoading] = useState(false)\n  const [error, setError] = useState<Error | undefined>(undefined)\n  const [status, setStatus] = useState<ChatClientState>('ready')\n  const [isSubscribed, setIsSubscribed] = useState(false)\n  const [connectionStatus, setConnectionStatus] =\n    useState<ConnectionStatus>('disconnected')\n  const [sessionGenerating, setSessionGenerating] = useState(false)\n\n  // Track current messages in a ref to preserve them when client is recreated\n  const messagesRef = useRef<Array<UIMessage<TTools>>>(\n    options.initialMessages || [],\n  )\n  const isFirstMountRef = useRef(true)\n\n  // Update ref synchronously during render so it's always current when useMemo runs.\n  // A useEffect here would be async and messagesRef could be stale on client recreation.\n  messagesRef.current = messages\n\n  // Track current options in a ref to avoid recreating client when options change\n  const optionsRef = useRef<UseChatOptions<TTools>>(options)\n  optionsRef.current = options\n\n  // Create ChatClient instance with callbacks to sync state\n  // Note: Options are captured at client creation time.\n  // The connection adapter can use functions for dynamic values (url, headers, etc.)\n  // which are evaluated lazily on each request.\n  const client = useMemo(() => {\n    // On first mount, use initialMessages. On subsequent recreations, preserve existing messages.\n    const messagesToUse = isFirstMountRef.current\n      ? options.initialMessages || []\n      : messagesRef.current\n\n    isFirstMountRef.current = false\n\n    return new ChatClient({\n      connection: optionsRef.current.connection,\n      id: clientId,\n      initialMessages: messagesToUse,\n      body: optionsRef.current.body,\n      onResponse: optionsRef.current.onResponse,\n      onChunk: optionsRef.current.onChunk,\n      onFinish: (message: UIMessage<TTools>) => {\n        optionsRef.current.onFinish?.(message)\n      },\n      onError: (error: Error) => {\n        optionsRef.current.onError?.(error)\n      },\n      tools: optionsRef.current.tools,\n      onCustomEvent: optionsRef.current.onCustomEvent,\n      streamProcessor: options.streamProcessor,\n      onMessagesChange: (newMessages: Array<UIMessage<TTools>>) => {\n        setMessages(newMessages)\n      },\n      onLoadingChange: (newIsLoading: boolean) => {\n        setIsLoading(newIsLoading)\n      },\n      onErrorChange: (newError: Error | undefined) => {\n        setError(newError)\n      },\n      onStatusChange: (status: ChatClientState) => {\n        setStatus(status)\n      },\n      onSubscriptionChange: (nextIsSubscribed: boolean) => {\n        setIsSubscribed(nextIsSubscribed)\n      },\n      onConnectionStatusChange: (nextStatus: ConnectionStatus) => {\n        setConnectionStatus(nextStatus)\n      },\n      onSessionGeneratingChange: (isGenerating: boolean) => {\n        setSessionGenerating(isGenerating)\n      },\n    })\n  }, [clientId])\n\n  // Sync body changes to the client\n  // This allows dynamic body values (like model selection) to be updated without recreating the client\n  useEffect(() => {\n    client.updateOptions({ body: options.body })\n  }, [client, options.body])\n\n  // Sync initial messages on mount only\n  // Note: initialMessages are passed to ChatClient constructor, but we also\n  // set them here to ensure React state is in sync\n  useEffect(() => {\n    if (options.initialMessages && options.initialMessages.length > 0) {\n      // Only set if current messages are empty (initial state)\n      if (messages.length === 0) {\n        client.setMessagesManually(options.initialMessages)\n      }\n    }\n  }, []) // Only run on mount - initialMessages are handled by ChatClient constructor\n\n  // Keep connection lifecycle opt-in and explicit.\n  useEffect(() => {\n    if (options.live) {\n      client.subscribe()\n    } else {\n      client.unsubscribe()\n    }\n  }, [client, options.live])\n\n  // Cleanup on unmount: stop any in-flight requests\n  // Note: We only cleanup when client changes or component unmounts.\n  // DO NOT include isLoading in dependencies - that would cause the cleanup\n  // to run when isLoading changes, aborting continuation requests.\n  useEffect(() => {\n    return () => {\n      // live mode owns the connection lifecycle; non-live keeps request-only stop.\n      if (options.live) {\n        client.unsubscribe()\n      } else {\n        client.stop()\n      }\n    }\n  }, [client, options.live])\n\n  // Note: Callback options (onResponse, onChunk, onFinish, onError, onToolCall)\n  // are captured at client creation time. Changes to these callbacks require\n  // remounting the component or changing the connection to recreate the client.\n\n  const sendMessage = useCallback(\n    async (content: string | MultimodalContent) => {\n      await client.sendMessage(content)\n    },\n    [client],\n  )\n\n  const append = useCallback(\n    async (message: ModelMessage | UIMessage) => {\n      await client.append(message)\n    },\n    [client],\n  )\n\n  const reload = useCallback(async () => {\n    await client.reload()\n  }, [client])\n\n  const stop = useCallback(() => {\n    client.stop()\n  }, [client])\n\n  const clear = useCallback(() => {\n    client.clear()\n  }, [client])\n\n  const setMessagesManually = useCallback(\n    (newMessages: Array<UIMessage<TTools>>) => {\n      client.setMessagesManually(newMessages)\n    },\n    [client],\n  )\n\n  const addToolResult = useCallback(\n    async (result: {\n      toolCallId: string\n      tool: string\n      output: any\n      state?: 'output-available' | 'output-error'\n      errorText?: string\n    }) => {\n      await client.addToolResult(result)\n    },\n    [client],\n  )\n\n  const addToolApprovalResponse = useCallback(\n    async (response: { id: string; approved: boolean }) => {\n      await client.addToolApprovalResponse(response)\n    },\n    [client],\n  )\n\n  return {\n    messages,\n    sendMessage,\n    append,\n    reload,\n    stop,\n    isLoading,\n    error,\n    status,\n    isSubscribed,\n    connectionStatus,\n    sessionGenerating,\n    setMessages: setMessagesManually,\n    clear,\n    addToolResult,\n    addToolApprovalResponse,\n  }\n}\n"],"names":["error","status"],"mappings":"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"}
+{"version":3,"file":"use-chat.js","sources":["../../src/use-chat.ts"],"sourcesContent":["import { ChatClient } from '@tanstack/ai-client'\nimport { useCallback, useEffect, useId, useMemo, useRef, useState } from 'react'\nimport type { AnyClientTool, ModelMessage } from '@tanstack/ai'\nimport type { ChatClientState, ConnectionStatus } from '@tanstack/ai-client'\n\nimport type {\n  MultimodalContent,\n  UIMessage,\n  UseChatOptions,\n  UseChatReturn,\n} from './types'\n\nexport function useChat<TTools extends ReadonlyArray<AnyClientTool> = any>(\n  options: UseChatOptions<TTools>,\n): UseChatReturn<TTools> {\n  const hookId = useId()\n  const clientId = options.id || hookId\n\n  const [messages, setMessages] = useState<Array<UIMessage<TTools>>>(\n    options.initialMessages || [],\n  )\n  const [isLoading, setIsLoading] = useState(false)\n  const [error, setError] = useState<Error | undefined>(undefined)\n  const [status, setStatus] = useState<ChatClientState>('ready')\n  const [isSubscribed, setIsSubscribed] = useState(false)\n  const [connectionStatus, setConnectionStatus] =\n    useState<ConnectionStatus>('disconnected')\n  const [sessionGenerating, setSessionGenerating] = useState(false)\n\n  // Track current messages in a ref to preserve them when client is recreated\n  const messagesRef = useRef<Array<UIMessage<TTools>>>(\n    options.initialMessages || [],\n  )\n  const isFirstMountRef = useRef(true)\n\n  // Update ref synchronously during render so it's always current when useMemo runs.\n  // A useEffect here would be async and messagesRef could be stale on client recreation.\n  messagesRef.current = messages\n\n  // Track current options in a ref to avoid recreating client when options change\n  const optionsRef = useRef<UseChatOptions<TTools>>(options)\n  optionsRef.current = options\n\n  // Create ChatClient instance with callbacks to sync state\n  // Note: Options are captured at client creation time.\n  // The connection adapter can use functions for dynamic values (url, headers, etc.)\n  // which are evaluated lazily on each request.\n  const client = useMemo(() => {\n    // On first mount, use initialMessages. On subsequent recreations, preserve existing messages.\n    const messagesToUse = isFirstMountRef.current\n      ? options.initialMessages || []\n      : messagesRef.current\n\n    isFirstMountRef.current = false\n\n    return new ChatClient({\n      connection: optionsRef.current.connection,\n      id: clientId,\n      initialMessages: messagesToUse,\n      body: optionsRef.current.body,\n      // Wrap every callback so the latest options are read at call time.\n      // Capturing the function reference directly would freeze it to whatever\n      // the parent passed on the first render.\n      onResponse: (response) => optionsRef.current.onResponse?.(response),\n      onChunk: (chunk) => optionsRef.current.onChunk?.(chunk),\n      onFinish: (message: UIMessage<TTools>) => {\n        optionsRef.current.onFinish?.(message)\n      },\n      onError: (error: Error) => {\n        optionsRef.current.onError?.(error)\n      },\n      tools: optionsRef.current.tools,\n      onCustomEvent: (eventType, data, context) =>\n        optionsRef.current.onCustomEvent?.(eventType, data, context),\n      streamProcessor: options.streamProcessor,\n      onMessagesChange: (newMessages: Array<UIMessage<TTools>>) => {\n        setMessages(newMessages)\n      },\n      onLoadingChange: (newIsLoading: boolean) => {\n        setIsLoading(newIsLoading)\n      },\n      onErrorChange: (newError: Error | undefined) => {\n        setError(newError)\n      },\n      onStatusChange: (status: ChatClientState) => {\n        setStatus(status)\n      },\n      onSubscriptionChange: (nextIsSubscribed: boolean) => {\n        setIsSubscribed(nextIsSubscribed)\n      },\n      onConnectionStatusChange: (nextStatus: ConnectionStatus) => {\n        setConnectionStatus(nextStatus)\n      },\n      onSessionGeneratingChange: (isGenerating: boolean) => {\n        setSessionGenerating(isGenerating)\n      },\n    })\n  }, [clientId])\n\n  // Sync body changes to the client\n  // This allows dynamic body values (like model selection) to be updated without recreating the client\n  useEffect(() => {\n    client.updateOptions({ body: options.body })\n  }, [client, options.body])\n\n  // Sync initial messages on mount only\n  // Note: initialMessages are passed to ChatClient constructor, but we also\n  // set them here to ensure React state is in sync\n  useEffect(() => {\n    if (options.initialMessages && options.initialMessages.length > 0) {\n      // Only set if current messages are empty (initial state)\n      if (messages.length === 0) {\n        client.setMessagesManually(options.initialMessages)\n      }\n    }\n  }, []) // Only run on mount - initialMessages are handled by ChatClient constructor\n\n  // Keep connection lifecycle opt-in and explicit.\n  useEffect(() => {\n    if (options.live) {\n      client.subscribe()\n    } else {\n      client.unsubscribe()\n    }\n  }, [client, options.live])\n\n  // Cleanup on unmount: stop any in-flight requests\n  // Note: We only cleanup when client changes or component unmounts.\n  // DO NOT include isLoading in dependencies - that would cause the cleanup\n  // to run when isLoading changes, aborting continuation requests.\n  useEffect(() => {\n    return () => {\n      // live mode owns the connection lifecycle; non-live keeps request-only stop.\n      if (options.live) {\n        client.unsubscribe()\n      } else {\n        client.stop()\n      }\n    }\n  }, [client, options.live])\n\n  // All callback options are read through optionsRef at call time, so fresh\n  // closures from each render are picked up without recreating the client.\n\n  const sendMessage = useCallback(\n    async (content: string | MultimodalContent) => {\n      await client.sendMessage(content)\n    },\n    [client],\n  )\n\n  const append = useCallback(\n    async (message: ModelMessage | UIMessage) => {\n      await client.append(message)\n    },\n    [client],\n  )\n\n  const reload = useCallback(async () => {\n    await client.reload()\n  }, [client])\n\n  const stop = useCallback(() => {\n    client.stop()\n  }, [client])\n\n  const clear = useCallback(() => {\n    client.clear()\n  }, [client])\n\n  const setMessagesManually = useCallback(\n    (newMessages: Array<UIMessage<TTools>>) => {\n      client.setMessagesManually(newMessages)\n    },\n    [client],\n  )\n\n  const addToolResult = useCallback(\n    async (result: {\n      toolCallId: string\n      tool: string\n      output: any\n      state?: 'output-available' | 'output-error'\n      errorText?: string\n    }) => {\n      await client.addToolResult(result)\n    },\n    [client],\n  )\n\n  const addToolApprovalResponse = useCallback(\n    async (response: { id: string; approved: boolean }) => {\n      await client.addToolApprovalResponse(response)\n    },\n    [client],\n  )\n\n  return {\n    messages,\n    sendMessage,\n    append,\n    reload,\n    stop,\n    isLoading,\n    error,\n    status,\n    isSubscribed,\n    connectionStatus,\n    sessionGenerating,\n    setMessages: setMessagesManually,\n    clear,\n    addToolResult,\n    addToolApprovalResponse,\n  }\n}\n"],"names":["error","status"],"mappings":";;AAYO,SAAS,QACd,SACuB;AACvB,QAAM,SAAS,MAAA;AACf,QAAM,WAAW,QAAQ,MAAM;AAE/B,QAAM,CAAC,UAAU,WAAW,IAAI;AAAA,IAC9B,QAAQ,mBAAmB,CAAA;AAAA,EAAC;AAE9B,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAChD,QAAM,CAAC,OAAO,QAAQ,IAAI,SAA4B,MAAS;AAC/D,QAAM,CAAC,QAAQ,SAAS,IAAI,SAA0B,OAAO;AAC7D,QAAM,CAAC,cAAc,eAAe,IAAI,SAAS,KAAK;AACtD,QAAM,CAAC,kBAAkB,mBAAmB,IAC1C,SAA2B,cAAc;AAC3C,QAAM,CAAC,mBAAmB,oBAAoB,IAAI,SAAS,KAAK;AAGhE,QAAM,cAAc;AAAA,IAClB,QAAQ,mBAAmB,CAAA;AAAA,EAAC;AAE9B,QAAM,kBAAkB,OAAO,IAAI;AAInC,cAAY,UAAU;AAGtB,QAAM,aAAa,OAA+B,OAAO;AACzD,aAAW,UAAU;AAMrB,QAAM,SAAS,QAAQ,MAAM;AAE3B,UAAM,gBAAgB,gBAAgB,UAClC,QAAQ,mBAAmB,CAAA,IAC3B,YAAY;AAEhB,oBAAgB,UAAU;AAE1B,WAAO,IAAI,WAAW;AAAA,MACpB,YAAY,WAAW,QAAQ;AAAA,MAC/B,IAAI;AAAA,MACJ,iBAAiB;AAAA,MACjB,MAAM,WAAW,QAAQ;AAAA;AAAA;AAAA;AAAA,MAIzB,YAAY,CAAC,aAAa,WAAW,QAAQ,aAAa,QAAQ;AAAA,MAClE,SAAS,CAAC,UAAU,WAAW,QAAQ,UAAU,KAAK;AAAA,MACtD,UAAU,CAAC,YAA+B;AACxC,mBAAW,QAAQ,WAAW,OAAO;AAAA,MACvC;AAAA,MACA,SAAS,CAACA,WAAiB;AACzB,mBAAW,QAAQ,UAAUA,MAAK;AAAA,MACpC;AAAA,MACA,OAAO,WAAW,QAAQ;AAAA,MAC1B,eAAe,CAAC,WAAW,MAAM,YAC/B,WAAW,QAAQ,gBAAgB,WAAW,MAAM,OAAO;AAAA,MAC7D,iBAAiB,QAAQ;AAAA,MACzB,kBAAkB,CAAC,gBAA0C;AAC3D,oBAAY,WAAW;AAAA,MACzB;AAAA,MACA,iBAAiB,CAAC,iBAA0B;AAC1C,qBAAa,YAAY;AAAA,MAC3B;AAAA,MACA,eAAe,CAAC,aAAgC;AAC9C,iBAAS,QAAQ;AAAA,MACnB;AAAA,MACA,gBAAgB,CAACC,YAA4B;AAC3C,kBAAUA,OAAM;AAAA,MAClB;AAAA,MACA,sBAAsB,CAAC,qBAA8B;AACnD,wBAAgB,gBAAgB;AAAA,MAClC;AAAA,MACA,0BAA0B,CAAC,eAAiC;AAC1D,4BAAoB,UAAU;AAAA,MAChC;AAAA,MACA,2BAA2B,CAAC,iBAA0B;AACpD,6BAAqB,YAAY;AAAA,MACnC;AAAA,IAAA,CACD;AAAA,EACH,GAAG,CAAC,QAAQ,CAAC;AAIb,YAAU,MAAM;AACd,WAAO,cAAc,EAAE,MAAM,QAAQ,MAAM;AAAA,EAC7C,GAAG,CAAC,QAAQ,QAAQ,IAAI,CAAC;AAKzB,YAAU,MAAM;AACd,QAAI,QAAQ,mBAAmB,QAAQ,gBAAgB,SAAS,GAAG;AAEjE,UAAI,SAAS,WAAW,GAAG;AACzB,eAAO,oBAAoB,QAAQ,eAAe;AAAA,MACpD;AAAA,IACF;AAAA,EACF,GAAG,CAAA,CAAE;AAGL,YAAU,MAAM;AACd,QAAI,QAAQ,MAAM;AAChB,aAAO,UAAA;AAAA,IACT,OAAO;AACL,aAAO,YAAA;AAAA,IACT;AAAA,EACF,GAAG,CAAC,QAAQ,QAAQ,IAAI,CAAC;AAMzB,YAAU,MAAM;AACd,WAAO,MAAM;AAEX,UAAI,QAAQ,MAAM;AAChB,eAAO,YAAA;AAAA,MACT,OAAO;AACL,eAAO,KAAA;AAAA,MACT;AAAA,IACF;AAAA,EACF,GAAG,CAAC,QAAQ,QAAQ,IAAI,CAAC;AAKzB,QAAM,cAAc;AAAA,IAClB,OAAO,YAAwC;AAC7C,YAAM,OAAO,YAAY,OAAO;AAAA,IAClC;AAAA,IACA,CAAC,MAAM;AAAA,EAAA;AAGT,QAAM,SAAS;AAAA,IACb,OAAO,YAAsC;AAC3C,YAAM,OAAO,OAAO,OAAO;AAAA,IAC7B;AAAA,IACA,CAAC,MAAM;AAAA,EAAA;AAGT,QAAM,SAAS,YAAY,YAAY;AACrC,UAAM,OAAO,OAAA;AAAA,EACf,GAAG,CAAC,MAAM,CAAC;AAEX,QAAM,OAAO,YAAY,MAAM;AAC7B,WAAO,KAAA;AAAA,EACT,GAAG,CAAC,MAAM,CAAC;AAEX,QAAM,QAAQ,YAAY,MAAM;AAC9B,WAAO,MAAA;AAAA,EACT,GAAG,CAAC,MAAM,CAAC;AAEX,QAAM,sBAAsB;AAAA,IAC1B,CAAC,gBAA0C;AACzC,aAAO,oBAAoB,WAAW;AAAA,IACxC;AAAA,IACA,CAAC,MAAM;AAAA,EAAA;AAGT,QAAM,gBAAgB;AAAA,IACpB,OAAO,WAMD;AACJ,YAAM,OAAO,cAAc,MAAM;AAAA,IACnC;AAAA,IACA,CAAC,MAAM;AAAA,EAAA;AAGT,QAAM,0BAA0B;AAAA,IAC9B,OAAO,aAAgD;AACrD,YAAM,OAAO,wBAAwB,QAAQ;AAAA,IAC/C;AAAA,IACA,CAAC,MAAM;AAAA,EAAA;AAGT,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,aAAa;AAAA,IACb;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAEJ;"}

package/dist/esm/use-generate-audio.d.ts

@@ -0,0 +1,85 @@
+import { AudioGenerationResult, StreamChunk } from '@tanstack/ai';
+import { AudioGenerateInput, ConnectConnectionAdapter, GenerationClientState, GenerationFetcher, InferGenerationOutput } from '@tanstack/ai-client';
+/**
+ * Options for the useGenerateAudio hook.
+ *
+ * @template TOutput - The output type after optional transform (defaults to AudioGenerationResult)
+ */
+export interface UseGenerateAudioOptions<TOutput = AudioGenerationResult> {
+    /** Connect-based adapter for streaming transport (SSE, HTTP stream, custom) */
+    connection?: ConnectConnectionAdapter;
+    /** Direct async function for audio generation */
+    fetcher?: GenerationFetcher<AudioGenerateInput, AudioGenerationResult>;
+    /** Unique identifier for this generation instance */
+    id?: string;
+    /** Additional body parameters to send with connect-based adapter requests */
+    body?: Record<string, any>;
+    /**
+     * Callback when audio is generated. Can optionally return a transformed value.
+     *
+     * - Return a non-null value to transform and store it as the result
+     * - Return `null` to keep the previous result unchanged
+     * - Return nothing (`void`) to store the raw result as-is
+     */
+    onResult?: (result: AudioGenerationResult) => TOutput | null | void;
+    /** Callback when an error occurs */
+    onError?: (error: Error) => void;
+    /** Callback when progress is reported (0-100) */
+    onProgress?: (progress: number, message?: string) => void;
+    /** Callback for each stream chunk (connect-based adapter mode only) */
+    onChunk?: (chunk: StreamChunk) => void;
+}
+/**
+ * Return type for the useGenerateAudio hook.
+ *
+ * @template TOutput - The output type (after optional transform)
+ */
+export interface UseGenerateAudioReturn<TOutput = AudioGenerationResult> {
+    /** Trigger audio generation */
+    generate: (input: AudioGenerateInput) => Promise<void>;
+    /** The generation result containing audio, or null */
+    result: TOutput | null;
+    /** Whether generation is in progress */
+    isLoading: boolean;
+    /** Current error, if any */
+    error: Error | undefined;
+    /** Current state of the generation */
+    status: GenerationClientState;
+    /** Abort the current generation */
+    stop: () => void;
+    /** Clear result, error, and return to idle */
+    reset: () => void;
+}
+/**
+ * React hook for generating audio (music, sound effects) using AI models.
+ *
+ * Supports two transport modes:
+ * - **ConnectConnectionAdapter** — Streaming transport (SSE, HTTP stream, custom)
+ * - **Fetcher** — Direct async function call
+ *
+ * @example
+ * ```tsx
+ * import { useGenerateAudio } from '@tanstack/ai-react'
+ * import { fetchServerSentEvents } from '@tanstack/ai-client'
+ *
+ * function AudioGenerator() {
+ *   const { generate, result, isLoading, error, reset } = useGenerateAudio({
+ *     connection: fetchServerSentEvents('/api/generate/audio'),
+ *   })
+ *
+ *   return (
+ *     <div>
+ *       <button onClick={() => generate({ prompt: 'An upbeat electronic track', duration: 10 })}>
+ *         Generate
+ *       </button>
+ *       {isLoading && <p>Generating...</p>}
+ *       {error && <p>Error: {error.message}</p>}
+ *       {result?.audio.url && <audio src={result.audio.url} controls />}
+ *     </div>
+ *   )
+ * }
+ * ```
+ */
+export declare function useGenerateAudio<TOnResult extends ((result: AudioGenerationResult) => any) | undefined = undefined>(options: Omit<UseGenerateAudioOptions, 'onResult'> & {
+    onResult?: TOnResult;
+}): UseGenerateAudioReturn<InferGenerationOutput<AudioGenerationResult, TOnResult>>;

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

@@ -0,0 +1,17 @@
+import { useGeneration } from "./use-generation.js";
+function useGenerateAudio(options) {
+  const { generate, result, isLoading, error, status, stop, reset } = useGeneration(options);
+  return {
+    generate,
+    result,
+    isLoading,
+    error,
+    status,
+    stop,
+    reset
+  };
+}
+export {
+  useGenerateAudio
+};
+//# sourceMappingURL=use-generate-audio.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-generate-audio.js","sources":["../../src/use-generate-audio.ts"],"sourcesContent":["import { useGeneration } from './use-generation'\nimport type { AudioGenerationResult, StreamChunk } from '@tanstack/ai'\nimport type {\n  AudioGenerateInput,\n  ConnectConnectionAdapter,\n  GenerationClientState,\n  GenerationFetcher,\n  InferGenerationOutput,\n} from '@tanstack/ai-client'\n\n/**\n * Options for the useGenerateAudio hook.\n *\n * @template TOutput - The output type after optional transform (defaults to AudioGenerationResult)\n */\nexport interface UseGenerateAudioOptions<TOutput = AudioGenerationResult> {\n  /** Connect-based adapter for streaming transport (SSE, HTTP stream, custom) */\n  connection?: ConnectConnectionAdapter\n  /** Direct async function for audio generation */\n  fetcher?: GenerationFetcher<AudioGenerateInput, AudioGenerationResult>\n  /** Unique identifier for this generation instance */\n  id?: string\n  /** Additional body parameters to send with connect-based adapter requests */\n  body?: Record<string, any>\n  /**\n   * Callback when audio is generated. Can optionally return a transformed value.\n   *\n   * - Return a non-null value to transform and store it as the result\n   * - Return `null` to keep the previous result unchanged\n   * - Return nothing (`void`) to store the raw result as-is\n   */\n  onResult?: (result: AudioGenerationResult) => TOutput | null | void\n  /** Callback when an error occurs */\n  onError?: (error: Error) => void\n  /** Callback when progress is reported (0-100) */\n  onProgress?: (progress: number, message?: string) => void\n  /** Callback for each stream chunk (connect-based adapter mode only) */\n  onChunk?: (chunk: StreamChunk) => void\n}\n\n/**\n * Return type for the useGenerateAudio hook.\n *\n * @template TOutput - The output type (after optional transform)\n */\nexport interface UseGenerateAudioReturn<TOutput = AudioGenerationResult> {\n  /** Trigger audio generation */\n  generate: (input: AudioGenerateInput) => Promise<void>\n  /** The generation result containing audio, or null */\n  result: TOutput | null\n  /** Whether generation is in progress */\n  isLoading: boolean\n  /** Current error, if any */\n  error: Error | undefined\n  /** Current state of the generation */\n  status: GenerationClientState\n  /** Abort the current generation */\n  stop: () => void\n  /** Clear result, error, and return to idle */\n  reset: () => void\n}\n\n/**\n * React hook for generating audio (music, sound effects) using AI models.\n *\n * Supports two transport modes:\n * - **ConnectConnectionAdapter** — Streaming transport (SSE, HTTP stream, custom)\n * - **Fetcher** — Direct async function call\n *\n * @example\n * ```tsx\n * import { useGenerateAudio } from '@tanstack/ai-react'\n * import { fetchServerSentEvents } from '@tanstack/ai-client'\n *\n * function AudioGenerator() {\n *   const { generate, result, isLoading, error, reset } = useGenerateAudio({\n *     connection: fetchServerSentEvents('/api/generate/audio'),\n *   })\n *\n *   return (\n *     <div>\n *       <button onClick={() => generate({ prompt: 'An upbeat electronic track', duration: 10 })}>\n *         Generate\n *       </button>\n *       {isLoading && <p>Generating...</p>}\n *       {error && <p>Error: {error.message}</p>}\n *       {result?.audio.url && <audio src={result.audio.url} controls />}\n *     </div>\n *   )\n * }\n * ```\n */\nexport function useGenerateAudio<\n  TOnResult extends ((result: AudioGenerationResult) => any) | undefined =\n    undefined,\n>(\n  options: Omit<UseGenerateAudioOptions, 'onResult'> & {\n    onResult?: TOnResult\n  },\n): UseGenerateAudioReturn<\n  InferGenerationOutput<AudioGenerationResult, TOnResult>\n> {\n  const { generate, result, isLoading, error, status, stop, reset } =\n    useGeneration<AudioGenerateInput, AudioGenerationResult, TOnResult>(options)\n\n  return {\n    generate: generate as (input: AudioGenerateInput) => Promise<void>,\n    result,\n    isLoading,\n    error,\n    status,\n    stop,\n    reset,\n  }\n}\n"],"names":[],"mappings":";AA4FO,SAAS,iBAId,SAKA;AACA,QAAM,EAAE,UAAU,QAAQ,WAAW,OAAO,QAAQ,MAAM,MAAA,IACxD,cAAoE,OAAO;AAE7E,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAEJ;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/ai-react",
-  "version": "0.7.14",
+  "version": "0.8.0",
   "description": "React hooks for TanStack AI",
   "author": "",
   "license": "MIT",
@@ -31,12 +31,12 @@
     "streaming"
   ],
   "dependencies": {
-    "@tanstack/ai-client": "0.7.13"
+    "@tanstack/ai-client": "0.8.0"
   },
   "peerDependencies": {
     "@types/react": ">=18.0.0",
     "react": ">=18.0.0",
-    "@tanstack/ai": "^0.12.0"
+    "@tanstack/ai": "^0.14.0"
   },
   "devDependencies": {
     "@testing-library/react": "^16.3.0",
@@ -45,7 +45,7 @@
     "jsdom": "^27.2.0",
     "react": "^19.2.3",
     "vite": "^7.2.7",
-    "@tanstack/ai": "0.12.0"
+    "@tanstack/ai": "0.14.0"
   },
   "scripts": {
     "clean": "premove ./build ./dist",

package/src/index.ts

@@ -24,6 +24,12 @@ export type {
   UseGenerateImageReturn,
 } from './use-generate-image'
 
+export { useGenerateAudio } from './use-generate-audio'
+export type {
+  UseGenerateAudioOptions,
+  UseGenerateAudioReturn,
+} from './use-generate-audio'
+
 export { useGenerateSpeech } from './use-generate-speech'
 export type {
   UseGenerateSpeechOptions,
@@ -56,6 +62,7 @@ export {
   type InferChatMessages,
   type GenerationClientState,
   type ImageGenerateInput,
+  type AudioGenerateInput,
   type SpeechGenerateInput,
   type TranscriptionGenerateInput,
   type SummarizeGenerateInput,

package/src/use-chat.ts

@@ -58,8 +58,11 @@ export function useChat<TTools extends ReadonlyArray<AnyClientTool> = any>(
       id: clientId,
       initialMessages: messagesToUse,
       body: optionsRef.current.body,
-      onResponse: optionsRef.current.onResponse,
-      onChunk: optionsRef.current.onChunk,
+      // Wrap every callback so the latest options are read at call time.
+      // Capturing the function reference directly would freeze it to whatever
+      // the parent passed on the first render.
+      onResponse: (response) => optionsRef.current.onResponse?.(response),
+      onChunk: (chunk) => optionsRef.current.onChunk?.(chunk),
       onFinish: (message: UIMessage<TTools>) => {
         optionsRef.current.onFinish?.(message)
       },
@@ -67,7 +70,8 @@ export function useChat<TTools extends ReadonlyArray<AnyClientTool> = any>(
         optionsRef.current.onError?.(error)
       },
       tools: optionsRef.current.tools,
-      onCustomEvent: optionsRef.current.onCustomEvent,
+      onCustomEvent: (eventType, data, context) =>
+        optionsRef.current.onCustomEvent?.(eventType, data, context),
       streamProcessor: options.streamProcessor,
       onMessagesChange: (newMessages: Array<UIMessage<TTools>>) => {
         setMessages(newMessages)
@@ -135,9 +139,8 @@ export function useChat<TTools extends ReadonlyArray<AnyClientTool> = any>(
     }
   }, [client, options.live])
 
-  // Note: Callback options (onResponse, onChunk, onFinish, onError, onToolCall)
-  // are captured at client creation time. Changes to these callbacks require
-  // remounting the component or changing the connection to recreate the client.
+  // All callback options are read through optionsRef at call time, so fresh
+  // closures from each render are picked up without recreating the client.
 
   const sendMessage = useCallback(
     async (content: string | MultimodalContent) => {

package/src/use-generate-audio.ts

@@ -0,0 +1,115 @@
+import { useGeneration } from './use-generation'
+import type { AudioGenerationResult, StreamChunk } from '@tanstack/ai'
+import type {
+  AudioGenerateInput,
+  ConnectConnectionAdapter,
+  GenerationClientState,
+  GenerationFetcher,
+  InferGenerationOutput,
+} from '@tanstack/ai-client'
+
+/**
+ * Options for the useGenerateAudio hook.
+ *
+ * @template TOutput - The output type after optional transform (defaults to AudioGenerationResult)
+ */
+export interface UseGenerateAudioOptions<TOutput = AudioGenerationResult> {
+  /** Connect-based adapter for streaming transport (SSE, HTTP stream, custom) */
+  connection?: ConnectConnectionAdapter
+  /** Direct async function for audio generation */
+  fetcher?: GenerationFetcher<AudioGenerateInput, AudioGenerationResult>
+  /** Unique identifier for this generation instance */
+  id?: string
+  /** Additional body parameters to send with connect-based adapter requests */
+  body?: Record<string, any>
+  /**
+   * Callback when audio is generated. Can optionally return a transformed value.
+   *
+   * - Return a non-null value to transform and store it as the result
+   * - Return `null` to keep the previous result unchanged
+   * - Return nothing (`void`) to store the raw result as-is
+   */
+  onResult?: (result: AudioGenerationResult) => TOutput | null | void
+  /** Callback when an error occurs */
+  onError?: (error: Error) => void
+  /** Callback when progress is reported (0-100) */
+  onProgress?: (progress: number, message?: string) => void
+  /** Callback for each stream chunk (connect-based adapter mode only) */
+  onChunk?: (chunk: StreamChunk) => void
+}
+
+/**
+ * Return type for the useGenerateAudio hook.
+ *
+ * @template TOutput - The output type (after optional transform)
+ */
+export interface UseGenerateAudioReturn<TOutput = AudioGenerationResult> {
+  /** Trigger audio generation */
+  generate: (input: AudioGenerateInput) => Promise<void>
+  /** The generation result containing audio, or null */
+  result: TOutput | null
+  /** Whether generation is in progress */
+  isLoading: boolean
+  /** Current error, if any */
+  error: Error | undefined
+  /** Current state of the generation */
+  status: GenerationClientState
+  /** Abort the current generation */
+  stop: () => void
+  /** Clear result, error, and return to idle */
+  reset: () => void
+}
+
+/**
+ * React hook for generating audio (music, sound effects) using AI models.
+ *
+ * Supports two transport modes:
+ * - **ConnectConnectionAdapter** — Streaming transport (SSE, HTTP stream, custom)
+ * - **Fetcher** — Direct async function call
+ *
+ * @example
+ * ```tsx
+ * import { useGenerateAudio } from '@tanstack/ai-react'
+ * import { fetchServerSentEvents } from '@tanstack/ai-client'
+ *
+ * function AudioGenerator() {
+ *   const { generate, result, isLoading, error, reset } = useGenerateAudio({
+ *     connection: fetchServerSentEvents('/api/generate/audio'),
+ *   })
+ *
+ *   return (
+ *     <div>
+ *       <button onClick={() => generate({ prompt: 'An upbeat electronic track', duration: 10 })}>
+ *         Generate
+ *       </button>
+ *       {isLoading && <p>Generating...</p>}
+ *       {error && <p>Error: {error.message}</p>}
+ *       {result?.audio.url && <audio src={result.audio.url} controls />}
+ *     </div>
+ *   )
+ * }
+ * ```
+ */
+export function useGenerateAudio<
+  TOnResult extends ((result: AudioGenerationResult) => any) | undefined =
+    undefined,
+>(
+  options: Omit<UseGenerateAudioOptions, 'onResult'> & {
+    onResult?: TOnResult
+  },
+): UseGenerateAudioReturn<
+  InferGenerationOutput<AudioGenerationResult, TOnResult>
+> {
+  const { generate, result, isLoading, error, status, stop, reset } =
+    useGeneration<AudioGenerateInput, AudioGenerationResult, TOnResult>(options)
+
+  return {
+    generate: generate as (input: AudioGenerateInput) => Promise<void>,
+    result,
+    isLoading,
+    error,
+    status,
+    stop,
+    reset,
+  }
+}