@tanstack/ai-solid 0.6.19 → 0.7.1

package/dist/index.d.ts

@@ -2,9 +2,10 @@ import { ChatRequestBody, UIMessage, UseChatOptions, UseChatReturn } from "./typ
 import { useChat } from "./use-chat.js";
 import { UseGenerationOptions, UseGenerationReturn, useGeneration } from "./use-generation.js";
 import { UseGenerateImageOptions, UseGenerateImageReturn, useGenerateImage } from "./use-generate-image.js";
+import { UseGenerateAudioOptions, UseGenerateAudioReturn, useGenerateAudio } from "./use-generate-audio.js";
 import { UseGenerateSpeechOptions, UseGenerateSpeechReturn, useGenerateSpeech } from "./use-generate-speech.js";
 import { UseTranscriptionOptions, UseTranscriptionReturn, useTranscription } from "./use-transcription.js";
 import { UseSummarizeOptions, UseSummarizeReturn, useSummarize } from "./use-summarize.js";
 import { UseGenerateVideoOptions, UseGenerateVideoReturn, useGenerateVideo } from "./use-generate-video.js";
-import { ConnectionAdapter, FetchConnectionOptions, GenerationClientState, ImageGenerateInput, InferChatMessages, SpeechGenerateInput, SummarizeGenerateInput, TranscriptionGenerateInput, VideoGenerateInput, VideoGenerateResult, VideoStatusInfo, createChatClientOptions, fetchHttpStream, fetchServerSentEvents, stream } from "@tanstack/ai-client";
-export { type ChatRequestBody, type ConnectionAdapter, type FetchConnectionOptions, type GenerationClientState, type ImageGenerateInput, type InferChatMessages, type SpeechGenerateInput, type SummarizeGenerateInput, type TranscriptionGenerateInput, type UIMessage, type UseChatOptions, type UseChatReturn, type UseGenerateImageOptions, type UseGenerateImageReturn, type UseGenerateSpeechOptions, type UseGenerateSpeechReturn, type UseGenerateVideoOptions, type UseGenerateVideoReturn, type UseGenerationOptions, type UseGenerationReturn, type UseSummarizeOptions, type UseSummarizeReturn, type UseTranscriptionOptions, type UseTranscriptionReturn, type VideoGenerateInput, type VideoGenerateResult, type VideoStatusInfo, createChatClientOptions, fetchHttpStream, fetchServerSentEvents, stream, useChat, useGenerateImage, useGenerateSpeech, useGenerateVideo, useGeneration, useSummarize, useTranscription };
+import { AudioGenerateInput, ConnectionAdapter, FetchConnectionOptions, GenerationClientState, ImageGenerateInput, InferChatMessages, SpeechGenerateInput, SummarizeGenerateInput, TranscriptionGenerateInput, VideoGenerateInput, VideoGenerateResult, VideoStatusInfo, createChatClientOptions, fetchHttpStream, fetchServerSentEvents, stream } from "@tanstack/ai-client";
+export { type AudioGenerateInput, type ChatRequestBody, type ConnectionAdapter, type FetchConnectionOptions, type GenerationClientState, type ImageGenerateInput, type InferChatMessages, type SpeechGenerateInput, type SummarizeGenerateInput, type TranscriptionGenerateInput, type UIMessage, type UseChatOptions, type UseChatReturn, type UseGenerateAudioOptions, type UseGenerateAudioReturn, type UseGenerateImageOptions, type UseGenerateImageReturn, type UseGenerateSpeechOptions, type UseGenerateSpeechReturn, type UseGenerateVideoOptions, type UseGenerateVideoReturn, type UseGenerationOptions, type UseGenerationReturn, type UseSummarizeOptions, type UseSummarizeReturn, type UseTranscriptionOptions, type UseTranscriptionReturn, type VideoGenerateInput, type VideoGenerateResult, type VideoStatusInfo, createChatClientOptions, fetchHttpStream, fetchServerSentEvents, stream, useChat, useGenerateAudio, useGenerateImage, useGenerateSpeech, useGenerateVideo, useGeneration, useSummarize, useTranscription };

package/dist/index.js

@@ -1,10 +1,11 @@
 import { useChat } from "./use-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";
 import { useGenerateVideo } from "./use-generate-video.js";
 import { createChatClientOptions, fetchHttpStream, fetchServerSentEvents, stream } from "@tanstack/ai-client";
 
-export { createChatClientOptions, fetchHttpStream, fetchServerSentEvents, stream, useChat, useGenerateImage, useGenerateSpeech, useGenerateVideo, useGeneration, useSummarize, useTranscription };
+export { createChatClientOptions, fetchHttpStream, fetchServerSentEvents, stream, useChat, useGenerateAudio, useGenerateImage, useGenerateSpeech, useGenerateVideo, useGeneration, useSummarize, useTranscription };

package/dist/use-chat.js

@@ -18,8 +18,8 @@ function useChat(options = {}) {
 			id: clientId,
 			initialMessages: options.initialMessages,
 			body: options.body,
-			onResponse: options.onResponse,
-			onChunk: options.onChunk,
+			onResponse: (response) => options.onResponse?.(response),
+			onChunk: (chunk) => options.onChunk?.(chunk),
 			onFinish: (message) => {
 				options.onFinish?.(message);
 			},
@@ -27,7 +27,7 @@ function useChat(options = {}) {
 				options.onError?.(err);
 			},
 			tools: options.tools,
-			onCustomEvent: options.onCustomEvent,
+			onCustomEvent: (eventType, data, context) => options.onCustomEvent?.(eventType, data, context),
 			streamProcessor: options.streamProcessor,
 			onMessagesChange: (newMessages) => {
 				setMessages(newMessages);

package/dist/use-chat.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-chat.js","names":[],"sources":["../src/use-chat.ts"],"sourcesContent":["import {\n  createEffect,\n  createMemo,\n  createSignal,\n  createUniqueId,\n  onCleanup,\n} from 'solid-js'\n\nimport { ChatClient } from '@tanstack/ai-client'\nimport type { ChatClientState, ConnectionStatus } from '@tanstack/ai-client'\nimport type { AnyClientTool, ModelMessage } from '@tanstack/ai'\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> = {} as UseChatOptions<TTools>,\n): UseChatReturn<TTools> {\n  const hookId = createUniqueId()\n  const clientId = options.id || hookId\n\n  const [messages, setMessages] = createSignal<Array<UIMessage<TTools>>>(\n    options.initialMessages || [],\n  )\n  const [isLoading, setIsLoading] = createSignal(false)\n  const [error, setError] = createSignal<Error | undefined>(undefined)\n  const [status, setStatus] = createSignal<ChatClientState>('ready')\n  const [isSubscribed, setIsSubscribed] = createSignal(false)\n  const [connectionStatus, setConnectionStatus] =\n    createSignal<ConnectionStatus>('disconnected')\n  const [sessionGenerating, setSessionGenerating] = createSignal(false)\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 = createMemo(() => {\n    return new ChatClient({\n      connection: options.connection,\n      id: clientId,\n      initialMessages: options.initialMessages,\n      body: options.body,\n      onResponse: options.onResponse,\n      onChunk: options.onChunk,\n      onFinish: (message) => {\n        options.onFinish?.(message)\n      },\n      onError: (err) => {\n        options.onError?.(err)\n      },\n      tools: options.tools,\n      onCustomEvent: options.onCustomEvent,\n      streamProcessor: options.streamProcessor,\n      onMessagesChange: (newMessages: Array<UIMessage<TTools>>) => {\n        setMessages(newMessages)\n      },\n      onLoadingChange: (newIsLoading: boolean) => {\n        setIsLoading(newIsLoading)\n      },\n      onStatusChange: (newStatus: ChatClientState) => {\n        setStatus(newStatus)\n      },\n      onErrorChange: (newError: Error | undefined) => {\n        setError(newError)\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    // Only recreate when clientId changes\n    // Connection and other options are captured at creation time\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  createEffect(() => {\n    const currentBody = options.body\n    client().updateOptions({ body: currentBody })\n  })\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  createEffect(() => {\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  // Apply initial live mode immediately on hook creation.\n  if (options.live) {\n    client().subscribe()\n  } else {\n    client().unsubscribe()\n  }\n\n  createEffect(() => {\n    if (options.live) {\n      client().subscribe()\n    } else {\n      client().unsubscribe()\n    }\n  })\n\n  // Cleanup on unmount: stop any in-flight requests.\n  onCleanup(() => {\n    if (options.live) {\n      client().unsubscribe()\n    } else {\n      client().stop()\n    }\n  })\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 = async (content: string | MultimodalContent) => {\n    await client().sendMessage(content)\n  }\n\n  const append = async (message: ModelMessage | UIMessage<TTools>) => {\n    await client().append(message)\n  }\n\n  const reload = async () => {\n    await client().reload()\n  }\n\n  const stop = () => {\n    client().stop()\n  }\n\n  const clear = () => {\n    client().clear()\n  }\n\n  const setMessagesManually = (newMessages: Array<UIMessage<TTools>>) => {\n    client().setMessagesManually(newMessages)\n  }\n\n  const addToolResult = 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\n  const addToolApprovalResponse = async (response: {\n    id: string\n    approved: boolean\n  }) => {\n    await client().addToolApprovalResponse(response)\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"],"mappings":";;;;AAkBA,SAAgB,QACd,UAAkC,EAAE,EACb;CACvB,MAAM,SAAS,gBAAgB;CAC/B,MAAM,WAAW,QAAQ,MAAM;CAE/B,MAAM,CAAC,UAAU,eAAe,aAC9B,QAAQ,mBAAmB,EAAE,CAC9B;CACD,MAAM,CAAC,WAAW,gBAAgB,aAAa,MAAM;CACrD,MAAM,CAAC,OAAO,YAAY,aAAgC,OAAU;CACpE,MAAM,CAAC,QAAQ,aAAa,aAA8B,QAAQ;CAClE,MAAM,CAAC,cAAc,mBAAmB,aAAa,MAAM;CAC3D,MAAM,CAAC,kBAAkB,uBACvB,aAA+B,eAAe;CAChD,MAAM,CAAC,mBAAmB,wBAAwB,aAAa,MAAM;CAMrE,MAAM,SAAS,iBAAiB;AAC9B,SAAO,IAAI,WAAW;GACpB,YAAY,QAAQ;GACpB,IAAI;GACJ,iBAAiB,QAAQ;GACzB,MAAM,QAAQ;GACd,YAAY,QAAQ;GACpB,SAAS,QAAQ;GACjB,WAAW,YAAY;AACrB,YAAQ,WAAW,QAAQ;;GAE7B,UAAU,QAAQ;AAChB,YAAQ,UAAU,IAAI;;GAExB,OAAO,QAAQ;GACf,eAAe,QAAQ;GACvB,iBAAiB,QAAQ;GACzB,mBAAmB,gBAA0C;AAC3D,gBAAY,YAAY;;GAE1B,kBAAkB,iBAA0B;AAC1C,iBAAa,aAAa;;GAE5B,iBAAiB,cAA+B;AAC9C,cAAU,UAAU;;GAEtB,gBAAgB,aAAgC;AAC9C,aAAS,SAAS;;GAEpB,uBAAuB,qBAA8B;AACnD,oBAAgB,iBAAiB;;GAEnC,2BAA2B,eAAiC;AAC1D,wBAAoB,WAAW;;GAEjC,4BAA4B,iBAA0B;AACpD,yBAAqB,aAAa;;GAErC,CAAC;IAGD,CAAC,SAAS,CAAC;AAId,oBAAmB;EACjB,MAAM,cAAc,QAAQ;AAC5B,UAAQ,CAAC,cAAc,EAAE,MAAM,aAAa,CAAC;GAC7C;AAKF,oBAAmB;AACjB,MAAI,QAAQ,mBAAmB,QAAQ,gBAAgB,SAAS,GAE9D;OAAI,UAAU,CAAC,WAAW,EACxB,SAAQ,CAAC,oBAAoB,QAAQ,gBAAgB;;GAGzD;AAGF,KAAI,QAAQ,KACV,SAAQ,CAAC,WAAW;KAEpB,SAAQ,CAAC,aAAa;AAGxB,oBAAmB;AACjB,MAAI,QAAQ,KACV,SAAQ,CAAC,WAAW;MAEpB,SAAQ,CAAC,aAAa;GAExB;AAGF,iBAAgB;AACd,MAAI,QAAQ,KACV,SAAQ,CAAC,aAAa;MAEtB,SAAQ,CAAC,MAAM;GAEjB;CAMF,MAAM,cAAc,OAAO,YAAwC;AACjE,QAAM,QAAQ,CAAC,YAAY,QAAQ;;CAGrC,MAAM,SAAS,OAAO,YAA8C;AAClE,QAAM,QAAQ,CAAC,OAAO,QAAQ;;CAGhC,MAAM,SAAS,YAAY;AACzB,QAAM,QAAQ,CAAC,QAAQ;;CAGzB,MAAM,aAAa;AACjB,UAAQ,CAAC,MAAM;;CAGjB,MAAM,cAAc;AAClB,UAAQ,CAAC,OAAO;;CAGlB,MAAM,uBAAuB,gBAA0C;AACrE,UAAQ,CAAC,oBAAoB,YAAY;;CAG3C,MAAM,gBAAgB,OAAO,WAMvB;AACJ,QAAM,QAAQ,CAAC,cAAc,OAAO;;CAGtC,MAAM,0BAA0B,OAAO,aAGjC;AACJ,QAAM,QAAQ,CAAC,wBAAwB,SAAS;;AAGlD,QAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,aAAa;EACb;EACA;EACA;EACD"}
+{"version":3,"file":"use-chat.js","names":[],"sources":["../src/use-chat.ts"],"sourcesContent":["import {\n  createEffect,\n  createMemo,\n  createSignal,\n  createUniqueId,\n  onCleanup,\n} from 'solid-js'\n\nimport { ChatClient } from '@tanstack/ai-client'\nimport type { ChatClientState, ConnectionStatus } from '@tanstack/ai-client'\nimport type { AnyClientTool, ModelMessage } from '@tanstack/ai'\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> = {} as UseChatOptions<TTools>,\n): UseChatReturn<TTools> {\n  const hookId = createUniqueId()\n  const clientId = options.id || hookId\n\n  const [messages, setMessages] = createSignal<Array<UIMessage<TTools>>>(\n    options.initialMessages || [],\n  )\n  const [isLoading, setIsLoading] = createSignal(false)\n  const [error, setError] = createSignal<Error | undefined>(undefined)\n  const [status, setStatus] = createSignal<ChatClientState>('ready')\n  const [isSubscribed, setIsSubscribed] = createSignal(false)\n  const [connectionStatus, setConnectionStatus] =\n    createSignal<ConnectionStatus>('disconnected')\n  const [sessionGenerating, setSessionGenerating] = createSignal(false)\n\n  // Create ChatClient instance with callbacks to sync state.\n  // Every user-provided callback is wrapped so the LATEST `options.xxx` value\n  // is read at call time. Direct assignment would freeze the callback to the\n  // reference we saw at creation; the wrapper lets reactive `options` or\n  // in-place mutations propagate. When the user clears a callback (sets it to\n  // undefined), `?.` no-ops.\n  const client = createMemo(() => {\n    return new ChatClient({\n      connection: options.connection,\n      id: clientId,\n      initialMessages: options.initialMessages,\n      body: options.body,\n      onResponse: (response) => options.onResponse?.(response),\n      onChunk: (chunk) => options.onChunk?.(chunk),\n      onFinish: (message) => {\n        options.onFinish?.(message)\n      },\n      onError: (err) => {\n        options.onError?.(err)\n      },\n      tools: options.tools,\n      onCustomEvent: (eventType, data, context) =>\n        options.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      onStatusChange: (newStatus: ChatClientState) => {\n        setStatus(newStatus)\n      },\n      onErrorChange: (newError: Error | undefined) => {\n        setError(newError)\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    // Only recreate when clientId changes\n    // Connection and other options are captured at creation time\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  createEffect(() => {\n    const currentBody = options.body\n    client().updateOptions({ body: currentBody })\n  })\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  createEffect(() => {\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  // Apply initial live mode immediately on hook creation.\n  if (options.live) {\n    client().subscribe()\n  } else {\n    client().unsubscribe()\n  }\n\n  createEffect(() => {\n    if (options.live) {\n      client().subscribe()\n    } else {\n      client().unsubscribe()\n    }\n  })\n\n  // Cleanup on unmount: stop any in-flight requests.\n  onCleanup(() => {\n    if (options.live) {\n      client().unsubscribe()\n    } else {\n      client().stop()\n    }\n  })\n\n  // Callback options are read through `options.xxx` at call time, so reactive\n  // or mutated options propagate without recreating the client.\n\n  const sendMessage = async (content: string | MultimodalContent) => {\n    await client().sendMessage(content)\n  }\n\n  const append = async (message: ModelMessage | UIMessage<TTools>) => {\n    await client().append(message)\n  }\n\n  const reload = async () => {\n    await client().reload()\n  }\n\n  const stop = () => {\n    client().stop()\n  }\n\n  const clear = () => {\n    client().clear()\n  }\n\n  const setMessagesManually = (newMessages: Array<UIMessage<TTools>>) => {\n    client().setMessagesManually(newMessages)\n  }\n\n  const addToolResult = 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\n  const addToolApprovalResponse = async (response: {\n    id: string\n    approved: boolean\n  }) => {\n    await client().addToolApprovalResponse(response)\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"],"mappings":";;;;AAkBA,SAAgB,QACd,UAAkC,EAAE,EACb;CACvB,MAAM,SAAS,gBAAgB;CAC/B,MAAM,WAAW,QAAQ,MAAM;CAE/B,MAAM,CAAC,UAAU,eAAe,aAC9B,QAAQ,mBAAmB,EAAE,CAC9B;CACD,MAAM,CAAC,WAAW,gBAAgB,aAAa,MAAM;CACrD,MAAM,CAAC,OAAO,YAAY,aAAgC,OAAU;CACpE,MAAM,CAAC,QAAQ,aAAa,aAA8B,QAAQ;CAClE,MAAM,CAAC,cAAc,mBAAmB,aAAa,MAAM;CAC3D,MAAM,CAAC,kBAAkB,uBACvB,aAA+B,eAAe;CAChD,MAAM,CAAC,mBAAmB,wBAAwB,aAAa,MAAM;CAQrE,MAAM,SAAS,iBAAiB;AAC9B,SAAO,IAAI,WAAW;GACpB,YAAY,QAAQ;GACpB,IAAI;GACJ,iBAAiB,QAAQ;GACzB,MAAM,QAAQ;GACd,aAAa,aAAa,QAAQ,aAAa,SAAS;GACxD,UAAU,UAAU,QAAQ,UAAU,MAAM;GAC5C,WAAW,YAAY;AACrB,YAAQ,WAAW,QAAQ;;GAE7B,UAAU,QAAQ;AAChB,YAAQ,UAAU,IAAI;;GAExB,OAAO,QAAQ;GACf,gBAAgB,WAAW,MAAM,YAC/B,QAAQ,gBAAgB,WAAW,MAAM,QAAQ;GACnD,iBAAiB,QAAQ;GACzB,mBAAmB,gBAA0C;AAC3D,gBAAY,YAAY;;GAE1B,kBAAkB,iBAA0B;AAC1C,iBAAa,aAAa;;GAE5B,iBAAiB,cAA+B;AAC9C,cAAU,UAAU;;GAEtB,gBAAgB,aAAgC;AAC9C,aAAS,SAAS;;GAEpB,uBAAuB,qBAA8B;AACnD,oBAAgB,iBAAiB;;GAEnC,2BAA2B,eAAiC;AAC1D,wBAAoB,WAAW;;GAEjC,4BAA4B,iBAA0B;AACpD,yBAAqB,aAAa;;GAErC,CAAC;IAGD,CAAC,SAAS,CAAC;AAId,oBAAmB;EACjB,MAAM,cAAc,QAAQ;AAC5B,UAAQ,CAAC,cAAc,EAAE,MAAM,aAAa,CAAC;GAC7C;AAKF,oBAAmB;AACjB,MAAI,QAAQ,mBAAmB,QAAQ,gBAAgB,SAAS,GAE9D;OAAI,UAAU,CAAC,WAAW,EACxB,SAAQ,CAAC,oBAAoB,QAAQ,gBAAgB;;GAGzD;AAGF,KAAI,QAAQ,KACV,SAAQ,CAAC,WAAW;KAEpB,SAAQ,CAAC,aAAa;AAGxB,oBAAmB;AACjB,MAAI,QAAQ,KACV,SAAQ,CAAC,WAAW;MAEpB,SAAQ,CAAC,aAAa;GAExB;AAGF,iBAAgB;AACd,MAAI,QAAQ,KACV,SAAQ,CAAC,aAAa;MAEtB,SAAQ,CAAC,MAAM;GAEjB;CAKF,MAAM,cAAc,OAAO,YAAwC;AACjE,QAAM,QAAQ,CAAC,YAAY,QAAQ;;CAGrC,MAAM,SAAS,OAAO,YAA8C;AAClE,QAAM,QAAQ,CAAC,OAAO,QAAQ;;CAGhC,MAAM,SAAS,YAAY;AACzB,QAAM,QAAQ,CAAC,QAAQ;;CAGzB,MAAM,aAAa;AACjB,UAAQ,CAAC,MAAM;;CAGjB,MAAM,cAAc;AAClB,UAAQ,CAAC,OAAO;;CAGlB,MAAM,uBAAuB,gBAA0C;AACrE,UAAQ,CAAC,oBAAoB,YAAY;;CAG3C,MAAM,gBAAgB,OAAO,WAMvB;AACJ,QAAM,QAAQ,CAAC,cAAc,OAAO;;CAGtC,MAAM,0BAA0B,OAAO,aAGjC;AACJ,QAAM,QAAQ,CAAC,wBAAwB,SAAS;;AAGlD,QAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,aAAa;EACb;EACA;EACA;EACD"}

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

@@ -0,0 +1,86 @@
+import { Accessor } from "solid-js";
+import { AudioGenerateInput, ConnectConnectionAdapter, GenerationClientState, GenerationFetcher, InferGenerationOutput } from "@tanstack/ai-client";
+import { AudioGenerationResult, StreamChunk } from "@tanstack/ai";
+
+//#region src/use-generate-audio.d.ts
+
+/**
+ * Options for the useGenerateAudio hook.
+ *
+ * @template TOutput - The transformed output type (defaults to AudioGenerationResult)
+ */
+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 transformed output type (defaults to AudioGenerationResult)
+ */
+interface UseGenerateAudioReturn<TOutput = AudioGenerationResult> {
+  /** Trigger audio generation */
+  generate: (input: AudioGenerateInput) => Promise<void>;
+  /** The generation result containing audio, or null */
+  result: Accessor<TOutput | null>;
+  /** Whether generation is in progress */
+  isLoading: Accessor<boolean>;
+  /** Current error, if any */
+  error: Accessor<Error | undefined>;
+  /** Current state of the generation */
+  status: Accessor<GenerationClientState>;
+  /** Abort the current generation */
+  stop: () => void;
+  /** Clear result, error, and return to idle */
+  reset: () => void;
+}
+/**
+ * Solid hook for generating audio (music, sound effects) using AI models.
+ *
+ * @example
+ * ```tsx
+ * import { useGenerateAudio } from '@tanstack/ai-solid'
+ * import { fetchServerSentEvents } from '@tanstack/ai-client'
+ *
+ * function AudioGenerator() {
+ *   const { generate, result, isLoading } = useGenerateAudio({
+ *     connection: fetchServerSentEvents('/api/generate/audio'),
+ *   })
+ *
+ *   return (
+ *     <div>
+ *       <button onClick={() => generate({ prompt: 'An upbeat electronic track', duration: 10 })}>
+ *         Generate
+ *       </button>
+ *       {result()?.audio.url && <audio src={result()!.audio.url} controls />}
+ *     </div>
+ *   )
+ * }
+ * ```
+ */
+declare function useGenerateAudio<TOnResult extends ((result: AudioGenerationResult) => any) | undefined = undefined>(options: Omit<UseGenerateAudioOptions, 'onResult'> & {
+  onResult?: TOnResult;
+}): UseGenerateAudioReturn<InferGenerationOutput<AudioGenerationResult, TOnResult>>;
+//#endregion
+export { UseGenerateAudioOptions, UseGenerateAudioReturn, useGenerateAudio };
+//# sourceMappingURL=use-generate-audio.d.ts.map

package/dist/use-generate-audio.js

@@ -0,0 +1,43 @@
+import { useGeneration } from "./use-generation.js";
+
+//#region src/use-generate-audio.ts
+/**
+* Solid hook for generating audio (music, sound effects) using AI models.
+*
+* @example
+* ```tsx
+* import { useGenerateAudio } from '@tanstack/ai-solid'
+* import { fetchServerSentEvents } from '@tanstack/ai-client'
+*
+* function AudioGenerator() {
+*   const { generate, result, isLoading } = useGenerateAudio({
+*     connection: fetchServerSentEvents('/api/generate/audio'),
+*   })
+*
+*   return (
+*     <div>
+*       <button onClick={() => generate({ prompt: 'An upbeat electronic track', duration: 10 })}>
+*         Generate
+*       </button>
+*       {result()?.audio.url && <audio src={result()!.audio.url} controls />}
+*     </div>
+*   )
+* }
+* ```
+*/
+function useGenerateAudio(options) {
+	const { generate, result, isLoading, error, status, stop, reset } = useGeneration(options);
+	return {
+		generate,
+		result,
+		isLoading,
+		error,
+		status,
+		stop,
+		reset
+	};
+}
+
+//#endregion
+export { useGenerateAudio };
+//# sourceMappingURL=use-generate-audio.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-generate-audio.js","names":[],"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'\nimport type { Accessor } from 'solid-js'\n\n/**\n * Options for the useGenerateAudio hook.\n *\n * @template TOutput - The transformed output type (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 transformed output type (defaults to AudioGenerationResult)\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: Accessor<TOutput | null>\n  /** Whether generation is in progress */\n  isLoading: Accessor<boolean>\n  /** Current error, if any */\n  error: Accessor<Error | undefined>\n  /** Current state of the generation */\n  status: Accessor<GenerationClientState>\n  /** Abort the current generation */\n  stop: () => void\n  /** Clear result, error, and return to idle */\n  reset: () => void\n}\n\n/**\n * Solid hook for generating audio (music, sound effects) using AI models.\n *\n * @example\n * ```tsx\n * import { useGenerateAudio } from '@tanstack/ai-solid'\n * import { fetchServerSentEvents } from '@tanstack/ai-client'\n *\n * function AudioGenerator() {\n *   const { generate, result, isLoading } = 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 *       {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"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAuFA,SAAgB,iBAId,SAKA;CACA,MAAM,EAAE,UAAU,QAAQ,WAAW,OAAO,QAAQ,MAAM,UACxD,cAAoE,QAAQ;AAE9E,QAAO;EACK;EACV;EACA;EACA;EACA;EACA;EACA;EACD"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/ai-solid",
-  "version": "0.6.19",
+  "version": "0.7.1",
   "description": "Solid hooks for TanStack AI",
   "author": "",
   "license": "MIT",
@@ -31,11 +31,11 @@
     "streaming"
   ],
   "dependencies": {
-    "@tanstack/ai-client": "0.7.14"
+    "@tanstack/ai-client": "0.9.0"
   },
   "peerDependencies": {
     "solid-js": ">=1.9.10",
-    "@tanstack/ai": "^0.13.0"
+    "@tanstack/ai": "^0.15.0"
   },
   "devDependencies": {
     "@solidjs/testing-library": "^0.8.10",
@@ -46,7 +46,7 @@
     "tsdown": "^0.17.0-beta.6",
     "typescript": "5.9.3",
     "vitest": "^4.0.14",
-    "@tanstack/ai": "0.13.0"
+    "@tanstack/ai": "0.15.0"
   },
   "scripts": {
     "clean": "premove ./build ./dist",

package/src/index.ts

@@ -19,6 +19,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,
@@ -51,6 +57,7 @@ export {
   type InferChatMessages,
   type GenerationClientState,
   type ImageGenerateInput,
+  type AudioGenerateInput,
   type SpeechGenerateInput,
   type TranscriptionGenerateInput,
   type SummarizeGenerateInput,

package/src/use-chat.ts

@@ -33,18 +33,20 @@ export function useChat<TTools extends ReadonlyArray<AnyClientTool> = any>(
     createSignal<ConnectionStatus>('disconnected')
   const [sessionGenerating, setSessionGenerating] = createSignal(false)
 
-  // Create ChatClient instance with callbacks to sync state
-  // Note: Options are captured at client creation time.
-  // The connection adapter can use functions for dynamic values (url, headers, etc.)
-  // which are evaluated lazily on each request.
+  // Create ChatClient instance with callbacks to sync state.
+  // Every user-provided callback is wrapped so the LATEST `options.xxx` value
+  // is read at call time. Direct assignment would freeze the callback to the
+  // reference we saw at creation; the wrapper lets reactive `options` or
+  // in-place mutations propagate. When the user clears a callback (sets it to
+  // undefined), `?.` no-ops.
   const client = createMemo(() => {
     return new ChatClient({
       connection: options.connection,
       id: clientId,
       initialMessages: options.initialMessages,
       body: options.body,
-      onResponse: options.onResponse,
-      onChunk: options.onChunk,
+      onResponse: (response) => options.onResponse?.(response),
+      onChunk: (chunk) => options.onChunk?.(chunk),
       onFinish: (message) => {
         options.onFinish?.(message)
       },
@@ -52,7 +54,8 @@ export function useChat<TTools extends ReadonlyArray<AnyClientTool> = any>(
         options.onError?.(err)
       },
       tools: options.tools,
-      onCustomEvent: options.onCustomEvent,
+      onCustomEvent: (eventType, data, context) =>
+        options.onCustomEvent?.(eventType, data, context),
       streamProcessor: options.streamProcessor,
       onMessagesChange: (newMessages: Array<UIMessage<TTools>>) => {
         setMessages(newMessages)
@@ -123,9 +126,8 @@ export function useChat<TTools extends ReadonlyArray<AnyClientTool> = any>(
     }
   })
 
-  // 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.
+  // Callback options are read through `options.xxx` at call time, so reactive
+  // or mutated options propagate without recreating the client.
 
   const sendMessage = async (content: string | MultimodalContent) => {
     await client().sendMessage(content)

package/src/use-generate-audio.ts

@@ -0,0 +1,110 @@
+import { useGeneration } from './use-generation'
+import type { AudioGenerationResult, StreamChunk } from '@tanstack/ai'
+import type {
+  AudioGenerateInput,
+  ConnectConnectionAdapter,
+  GenerationClientState,
+  GenerationFetcher,
+  InferGenerationOutput,
+} from '@tanstack/ai-client'
+import type { Accessor } from 'solid-js'
+
+/**
+ * Options for the useGenerateAudio hook.
+ *
+ * @template TOutput - The transformed output type (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 transformed output type (defaults to AudioGenerationResult)
+ */
+export interface UseGenerateAudioReturn<TOutput = AudioGenerationResult> {
+  /** Trigger audio generation */
+  generate: (input: AudioGenerateInput) => Promise<void>
+  /** The generation result containing audio, or null */
+  result: Accessor<TOutput | null>
+  /** Whether generation is in progress */
+  isLoading: Accessor<boolean>
+  /** Current error, if any */
+  error: Accessor<Error | undefined>
+  /** Current state of the generation */
+  status: Accessor<GenerationClientState>
+  /** Abort the current generation */
+  stop: () => void
+  /** Clear result, error, and return to idle */
+  reset: () => void
+}
+
+/**
+ * Solid hook for generating audio (music, sound effects) using AI models.
+ *
+ * @example
+ * ```tsx
+ * import { useGenerateAudio } from '@tanstack/ai-solid'
+ * import { fetchServerSentEvents } from '@tanstack/ai-client'
+ *
+ * function AudioGenerator() {
+ *   const { generate, result, isLoading } = useGenerateAudio({
+ *     connection: fetchServerSentEvents('/api/generate/audio'),
+ *   })
+ *
+ *   return (
+ *     <div>
+ *       <button onClick={() => generate({ prompt: 'An upbeat electronic track', duration: 10 })}>
+ *         Generate
+ *       </button>
+ *       {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,
+  }
+}