@tanstack/ai-svelte 0.6.19 → 0.7.1

package/dist/create-chat.svelte.js

@@ -41,7 +41,11 @@ export function createChat(options) {
     let isSubscribed = $state(false);
     let connectionStatus = $state('disconnected');
     let sessionGenerating = $state(false);
-    // Create ChatClient instance
+    // Create ChatClient instance.
+    // Note: Svelte's createChat runs once per instance and `options` is captured
+    // by reference. Callbacks are therefore frozen to whatever the caller passed
+    // at creation — to swap them dynamically, mutate the options object
+    // in-place or call `client.updateOptions(...)` imperatively.
     const client = new ChatClient({
         connection: options.connection,
         id: clientId,

package/dist/create-generate-audio.svelte.d.ts

@@ -0,0 +1,83 @@
+import type { AudioGenerationResult, StreamChunk } from '@tanstack/ai';
+import type { AudioGenerateInput, ConnectConnectionAdapter, GenerationClientState, GenerationFetcher, InferGenerationOutput } from '@tanstack/ai-client';
+/**
+ * Options for the createGenerateAudio function.
+ *
+ * @template TOutput - The output type after optional transform (defaults to AudioGenerationResult)
+ */
+export interface CreateGenerateAudioOptions<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 createGenerateAudio function.
+ *
+ * @template TOutput - The output type (after optional transform)
+ */
+export interface CreateGenerateAudioReturn<TOutput = AudioGenerationResult> {
+    /** The generation result containing audio, or null */
+    readonly result: TOutput | null;
+    /** Whether generation is in progress */
+    readonly isLoading: boolean;
+    /** Current error, if any */
+    readonly error: Error | undefined;
+    /** Current state of the generation */
+    readonly status: GenerationClientState;
+    /** Trigger audio generation */
+    generate: (input: AudioGenerateInput) => Promise<void>;
+    /** Abort the current generation */
+    stop: () => void;
+    /** Clear result, error, and return to idle */
+    reset: () => void;
+    /** Update additional body parameters */
+    updateBody: (body: Record<string, any>) => void;
+}
+/**
+ * Creates a reactive audio generation instance for Svelte 5.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { createGenerateAudio, fetchServerSentEvents } from '@tanstack/ai-svelte'
+ *
+ *   const audio = createGenerateAudio({
+ *     connection: fetchServerSentEvents('/api/generate/audio'),
+ *   })
+ * </script>
+ *
+ * <div>
+ *   <button onclick={() => audio.generate({ prompt: 'An upbeat electronic track', duration: 10 })}>
+ *     Generate
+ *   </button>
+ *   {#if audio.isLoading}
+ *     <p>Generating...</p>
+ *   {/if}
+ *   {#if audio.result?.audio.url}
+ *     <audio src={audio.result.audio.url} controls></audio>
+ *   {/if}
+ * </div>
+ * ```
+ */
+export declare function createGenerateAudio<TOnResult extends ((result: AudioGenerationResult) => any) | undefined = undefined>(options: Omit<CreateGenerateAudioOptions, 'onResult'> & {
+    onResult?: TOnResult;
+}): CreateGenerateAudioReturn<InferGenerationOutput<AudioGenerationResult, TOnResult>>;

package/dist/create-generate-audio.svelte.js

@@ -0,0 +1,48 @@
+import { createGeneration } from './create-generation.svelte';
+/**
+ * Creates a reactive audio generation instance for Svelte 5.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { createGenerateAudio, fetchServerSentEvents } from '@tanstack/ai-svelte'
+ *
+ *   const audio = createGenerateAudio({
+ *     connection: fetchServerSentEvents('/api/generate/audio'),
+ *   })
+ * </script>
+ *
+ * <div>
+ *   <button onclick={() => audio.generate({ prompt: 'An upbeat electronic track', duration: 10 })}>
+ *     Generate
+ *   </button>
+ *   {#if audio.isLoading}
+ *     <p>Generating...</p>
+ *   {/if}
+ *   {#if audio.result?.audio.url}
+ *     <audio src={audio.result.audio.url} controls></audio>
+ *   {/if}
+ * </div>
+ * ```
+ */
+export function createGenerateAudio(options) {
+    const gen = createGeneration(options);
+    return {
+        get result() {
+            return gen.result;
+        },
+        get isLoading() {
+            return gen.isLoading;
+        },
+        get error() {
+            return gen.error;
+        },
+        get status() {
+            return gen.status;
+        },
+        generate: gen.generate,
+        stop: gen.stop,
+        reset: gen.reset,
+        updateBody: gen.updateBody,
+    };
+}

package/dist/index.d.ts

@@ -4,6 +4,8 @@ export { createGeneration } from './create-generation.svelte';
 export type { CreateGenerationOptions, CreateGenerationReturn, } from './create-generation.svelte';
 export { createGenerateImage } from './create-generate-image.svelte';
 export type { CreateGenerateImageOptions, CreateGenerateImageReturn, } from './create-generate-image.svelte';
+export { createGenerateAudio } from './create-generate-audio.svelte';
+export type { CreateGenerateAudioOptions, CreateGenerateAudioReturn, } from './create-generate-audio.svelte';
 export { createGenerateSpeech } from './create-generate-speech.svelte';
 export type { CreateGenerateSpeechOptions, CreateGenerateSpeechReturn, } from './create-generate-speech.svelte';
 export { createTranscription } from './create-transcription.svelte';
@@ -12,4 +14,4 @@ export { createSummarize } from './create-summarize.svelte';
 export type { CreateSummarizeOptions, CreateSummarizeReturn, } from './create-summarize.svelte';
 export { createGenerateVideo } from './create-generate-video.svelte';
 export type { CreateGenerateVideoOptions, CreateGenerateVideoReturn, } from './create-generate-video.svelte';
-export { fetchServerSentEvents, fetchHttpStream, stream, createChatClientOptions, clientTools, 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, clientTools, 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/index.js

@@ -2,6 +2,7 @@ export { createChat } from './create-chat.svelte';
 // Generation hooks
 export { createGeneration } from './create-generation.svelte';
 export { createGenerateImage } from './create-generate-image.svelte';
+export { createGenerateAudio } from './create-generate-audio.svelte';
 export { createGenerateSpeech } from './create-generate-speech.svelte';
 export { createTranscription } from './create-transcription.svelte';
 export { createSummarize } from './create-summarize.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/ai-svelte",
-  "version": "0.6.19",
+  "version": "0.7.1",
   "description": "Svelte bindings for TanStack AI",
   "author": "",
   "license": "MIT",
@@ -33,11 +33,11 @@
     "streaming"
   ],
   "dependencies": {
-    "@tanstack/ai-client": "0.7.14"
+    "@tanstack/ai-client": "0.9.0"
   },
   "peerDependencies": {
     "svelte": "^5.0.0",
-    "@tanstack/ai": "^0.13.0"
+    "@tanstack/ai": "^0.15.0"
   },
   "devDependencies": {
     "@sveltejs/package": "^2.3.10",
@@ -49,7 +49,7 @@
     "svelte-check": "^4.2.0",
     "typescript": "5.9.3",
     "vite": "^7.2.7",
-    "@tanstack/ai": "0.13.0"
+    "@tanstack/ai": "0.15.0"
   },
   "scripts": {
     "clean": "rm -rf ./dist",

package/src/create-chat.svelte.ts

@@ -55,7 +55,11 @@ export function createChat<TTools extends ReadonlyArray<AnyClientTool> = any>(
   let connectionStatus = $state<ConnectionStatus>('disconnected')
   let sessionGenerating = $state(false)
 
-  // Create ChatClient instance
+  // Create ChatClient instance.
+  // Note: Svelte's createChat runs once per instance and `options` is captured
+  // by reference. Callbacks are therefore frozen to whatever the caller passed
+  // at creation — to swap them dynamically, mutate the options object
+  // in-place or call `client.updateOptions(...)` imperatively.
   const client = new ChatClient({
     connection: options.connection,
     id: clientId,

package/src/create-generate-audio.svelte.ts

@@ -0,0 +1,125 @@
+import { createGeneration } from './create-generation.svelte'
+import type { AudioGenerationResult, StreamChunk } from '@tanstack/ai'
+import type {
+  AudioGenerateInput,
+  ConnectConnectionAdapter,
+  GenerationClientState,
+  GenerationFetcher,
+  InferGenerationOutput,
+} from '@tanstack/ai-client'
+
+/**
+ * Options for the createGenerateAudio function.
+ *
+ * @template TOutput - The output type after optional transform (defaults to AudioGenerationResult)
+ */
+export interface CreateGenerateAudioOptions<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 createGenerateAudio function.
+ *
+ * @template TOutput - The output type (after optional transform)
+ */
+export interface CreateGenerateAudioReturn<TOutput = AudioGenerationResult> {
+  /** The generation result containing audio, or null */
+  readonly result: TOutput | null
+  /** Whether generation is in progress */
+  readonly isLoading: boolean
+  /** Current error, if any */
+  readonly error: Error | undefined
+  /** Current state of the generation */
+  readonly status: GenerationClientState
+  /** Trigger audio generation */
+  generate: (input: AudioGenerateInput) => Promise<void>
+  /** Abort the current generation */
+  stop: () => void
+  /** Clear result, error, and return to idle */
+  reset: () => void
+  /** Update additional body parameters */
+  updateBody: (body: Record<string, any>) => void
+}
+
+/**
+ * Creates a reactive audio generation instance for Svelte 5.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { createGenerateAudio, fetchServerSentEvents } from '@tanstack/ai-svelte'
+ *
+ *   const audio = createGenerateAudio({
+ *     connection: fetchServerSentEvents('/api/generate/audio'),
+ *   })
+ * </script>
+ *
+ * <div>
+ *   <button onclick={() => audio.generate({ prompt: 'An upbeat electronic track', duration: 10 })}>
+ *     Generate
+ *   </button>
+ *   {#if audio.isLoading}
+ *     <p>Generating...</p>
+ *   {/if}
+ *   {#if audio.result?.audio.url}
+ *     <audio src={audio.result.audio.url} controls></audio>
+ *   {/if}
+ * </div>
+ * ```
+ */
+export function createGenerateAudio<
+  TOnResult extends ((result: AudioGenerationResult) => any) | undefined =
+    undefined,
+>(
+  options: Omit<CreateGenerateAudioOptions, 'onResult'> & {
+    onResult?: TOnResult
+  },
+): CreateGenerateAudioReturn<
+  InferGenerationOutput<AudioGenerationResult, TOnResult>
+> {
+  const gen = createGeneration<
+    AudioGenerateInput,
+    AudioGenerationResult,
+    TOnResult
+  >(options)
+
+  return {
+    get result() {
+      return gen.result
+    },
+    get isLoading() {
+      return gen.isLoading
+    },
+    get error() {
+      return gen.error
+    },
+    get status() {
+      return gen.status
+    },
+    generate: gen.generate as (input: AudioGenerateInput) => Promise<void>,
+    stop: gen.stop,
+    reset: gen.reset,
+    updateBody: gen.updateBody,
+  }
+}

package/src/index.ts

@@ -19,6 +19,12 @@ export type {
   CreateGenerateImageReturn,
 } from './create-generate-image.svelte'
 
+export { createGenerateAudio } from './create-generate-audio.svelte'
+export type {
+  CreateGenerateAudioOptions,
+  CreateGenerateAudioReturn,
+} from './create-generate-audio.svelte'
+
 export { createGenerateSpeech } from './create-generate-speech.svelte'
 export type {
   CreateGenerateSpeechOptions,
@@ -55,6 +61,7 @@ export {
   type InferChatMessages,
   type GenerationClientState,
   type ImageGenerateInput,
+  type AudioGenerateInput,
   type SpeechGenerateInput,
   type TranscriptionGenerateInput,
   type SummarizeGenerateInput,