@tanstack/ai-svelte 0.6.2 → 0.6.4

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

@@ -0,0 +1,92 @@
+import type { ImageGenerationResult, StreamChunk } from '@tanstack/ai';
+import type { ConnectionAdapter, GenerationClientState, GenerationFetcher, ImageGenerateInput, InferGenerationOutput } from '@tanstack/ai-client';
+/**
+ * Options for the createGenerateImage function.
+ *
+ * @template TOutput - The output type after optional transform (defaults to ImageGenerationResult)
+ */
+export interface CreateGenerateImageOptions<TOutput = ImageGenerationResult> {
+    /** Connection adapter for streaming transport (SSE, HTTP stream, custom) */
+    connection?: ConnectionAdapter;
+    /** Direct async function for image generation */
+    fetcher?: GenerationFetcher<ImageGenerateInput, ImageGenerationResult>;
+    /** Unique identifier for this generation instance */
+    id?: string;
+    /** Additional body parameters to send with ConnectionAdapter requests */
+    body?: Record<string, any>;
+    /**
+     * Callback when images are 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: ImageGenerationResult) => 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 (ConnectionAdapter mode only) */
+    onChunk?: (chunk: StreamChunk) => void;
+}
+/**
+ * Return type for the createGenerateImage function.
+ *
+ * @template TOutput - The output type (after optional transform)
+ */
+export interface CreateGenerateImageReturn<TOutput = ImageGenerationResult> {
+    /** The generation result containing images, 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 image generation */
+    generate: (input: ImageGenerateInput) => 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 image generation instance for Svelte 5.
+ *
+ * Supports two transport modes:
+ * - **ConnectionAdapter** -- Streaming transport (SSE, HTTP stream, custom)
+ * - **Fetcher** -- Direct async function call
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { createGenerateImage, fetchServerSentEvents } from '@tanstack/ai-svelte'
+ *
+ *   const imageGen = createGenerateImage({
+ *     connection: fetchServerSentEvents('/api/generate/image'),
+ *   })
+ * </script>
+ *
+ * <div>
+ *   <button onclick={() => imageGen.generate({ prompt: 'A sunset over mountains' })}>
+ *     Generate
+ *   </button>
+ *   {#if imageGen.isLoading}
+ *     <p>Generating...</p>
+ *   {/if}
+ *   {#if imageGen.error}
+ *     <p>Error: {imageGen.error.message}</p>
+ *   {/if}
+ *   {#if imageGen.result}
+ *     {#each imageGen.result.images as img}
+ *       <img src={img.url || `data:image/png;base64,${img.b64Json}`} alt="Generated" />
+ *     {/each}
+ *   {/if}
+ * </div>
+ * ```
+ */
+export declare function createGenerateImage<TOnResult extends ((result: ImageGenerationResult) => any) | undefined = undefined>(options: Omit<CreateGenerateImageOptions, 'onResult'> & {
+    onResult?: TOnResult;
+}): CreateGenerateImageReturn<InferGenerationOutput<ImageGenerationResult, TOnResult>>;

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

@@ -0,0 +1,57 @@
+import { createGeneration } from './create-generation.svelte';
+/**
+ * Creates a reactive image generation instance for Svelte 5.
+ *
+ * Supports two transport modes:
+ * - **ConnectionAdapter** -- Streaming transport (SSE, HTTP stream, custom)
+ * - **Fetcher** -- Direct async function call
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { createGenerateImage, fetchServerSentEvents } from '@tanstack/ai-svelte'
+ *
+ *   const imageGen = createGenerateImage({
+ *     connection: fetchServerSentEvents('/api/generate/image'),
+ *   })
+ * </script>
+ *
+ * <div>
+ *   <button onclick={() => imageGen.generate({ prompt: 'A sunset over mountains' })}>
+ *     Generate
+ *   </button>
+ *   {#if imageGen.isLoading}
+ *     <p>Generating...</p>
+ *   {/if}
+ *   {#if imageGen.error}
+ *     <p>Error: {imageGen.error.message}</p>
+ *   {/if}
+ *   {#if imageGen.result}
+ *     {#each imageGen.result.images as img}
+ *       <img src={img.url || `data:image/png;base64,${img.b64Json}`} alt="Generated" />
+ *     {/each}
+ *   {/if}
+ * </div>
+ * ```
+ */
+export function createGenerateImage(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/create-generate-speech.svelte.d.ts

@@ -0,0 +1,83 @@
+import type { StreamChunk, TTSResult } from '@tanstack/ai';
+import type { ConnectionAdapter, GenerationClientState, GenerationFetcher, InferGenerationOutput, SpeechGenerateInput } from '@tanstack/ai-client';
+/**
+ * Options for the createGenerateSpeech function.
+ *
+ * @template TOutput - The output type after optional transform (defaults to TTSResult)
+ */
+export interface CreateGenerateSpeechOptions<TOutput = TTSResult> {
+    /** Connection adapter for streaming transport (SSE, HTTP stream, custom) */
+    connection?: ConnectionAdapter;
+    /** Direct async function for speech generation */
+    fetcher?: GenerationFetcher<SpeechGenerateInput, TTSResult>;
+    /** Unique identifier for this generation instance */
+    id?: string;
+    /** Additional body parameters to send with ConnectionAdapter requests */
+    body?: Record<string, any>;
+    /**
+     * Callback when speech 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: TTSResult) => 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 (ConnectionAdapter mode only) */
+    onChunk?: (chunk: StreamChunk) => void;
+}
+/**
+ * Return type for the createGenerateSpeech function.
+ *
+ * @template TOutput - The output type (after optional transform)
+ */
+export interface CreateGenerateSpeechReturn<TOutput = TTSResult> {
+    /** The TTS result containing audio data, 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 speech generation */
+    generate: (input: SpeechGenerateInput) => 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 speech generation (text-to-speech) instance for Svelte 5.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { createGenerateSpeech, fetchServerSentEvents } from '@tanstack/ai-svelte'
+ *
+ *   const speech = createGenerateSpeech({
+ *     connection: fetchServerSentEvents('/api/generate/speech'),
+ *   })
+ * </script>
+ *
+ * <div>
+ *   <button onclick={() => speech.generate({ text: 'Hello world', voice: 'alloy' })}>
+ *     Generate Speech
+ *   </button>
+ *   {#if speech.isLoading}
+ *     <p>Generating...</p>
+ *   {/if}
+ *   {#if speech.result}
+ *     <audio src={`data:audio/${speech.result.format};base64,${speech.result.audio}`} controls></audio>
+ *   {/if}
+ * </div>
+ * ```
+ */
+export declare function createGenerateSpeech<TOnResult extends ((result: TTSResult) => any) | undefined = undefined>(options: Omit<CreateGenerateSpeechOptions, 'onResult'> & {
+    onResult?: TOnResult;
+}): CreateGenerateSpeechReturn<InferGenerationOutput<TTSResult, TOnResult>>;

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

@@ -0,0 +1,48 @@
+import { createGeneration } from './create-generation.svelte';
+/**
+ * Creates a reactive speech generation (text-to-speech) instance for Svelte 5.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { createGenerateSpeech, fetchServerSentEvents } from '@tanstack/ai-svelte'
+ *
+ *   const speech = createGenerateSpeech({
+ *     connection: fetchServerSentEvents('/api/generate/speech'),
+ *   })
+ * </script>
+ *
+ * <div>
+ *   <button onclick={() => speech.generate({ text: 'Hello world', voice: 'alloy' })}>
+ *     Generate Speech
+ *   </button>
+ *   {#if speech.isLoading}
+ *     <p>Generating...</p>
+ *   {/if}
+ *   {#if speech.result}
+ *     <audio src={`data:audio/${speech.result.format};base64,${speech.result.audio}`} controls></audio>
+ *   {/if}
+ * </div>
+ * ```
+ */
+export function createGenerateSpeech(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/create-generate-video.svelte.d.ts

@@ -0,0 +1,95 @@
+import type { StreamChunk } from '@tanstack/ai';
+import type { ConnectionAdapter, GenerationClientState, GenerationFetcher, InferGenerationOutput, VideoGenerateInput, VideoGenerateResult, VideoStatusInfo } from '@tanstack/ai-client';
+/**
+ * Options for the createGenerateVideo function.
+ *
+ * @template TOutput - The output type after optional transform (defaults to VideoGenerateResult)
+ */
+export interface CreateGenerateVideoOptions<TOutput = VideoGenerateResult> {
+    /** Connection adapter for streaming transport (server handles polling) */
+    connection?: ConnectionAdapter;
+    /** Direct async function that returns a completed video result */
+    fetcher?: GenerationFetcher<VideoGenerateInput, VideoGenerateResult>;
+    /** Unique identifier for this generation instance */
+    id?: string;
+    /** Additional body parameters to send with ConnectionAdapter requests */
+    body?: Record<string, any>;
+    /**
+     * Callback when video generation completes. 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: VideoGenerateResult) => 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 when a video job is created */
+    onJobCreated?: (jobId: string) => void;
+    /** Callback on each status update */
+    onStatusUpdate?: (status: VideoStatusInfo) => void;
+    /** Callback for each stream chunk (ConnectionAdapter mode only) */
+    onChunk?: (chunk: StreamChunk) => void;
+}
+/**
+ * Return type for the createGenerateVideo function.
+ *
+ * @template TOutput - The output type (after optional transform)
+ */
+export interface CreateGenerateVideoReturn<TOutput = VideoGenerateResult> {
+    /** The final video result (with URL), or null */
+    readonly result: TOutput | null;
+    /** The current job ID, or null */
+    readonly jobId: string | null;
+    /** Current video generation status info, or null */
+    readonly videoStatus: VideoStatusInfo | null;
+    /** Whether generation/polling is in progress */
+    readonly isLoading: boolean;
+    /** Current error, if any */
+    readonly error: Error | undefined;
+    /** Current state of the generation */
+    readonly status: GenerationClientState;
+    /** Trigger video generation */
+    generate: (input: VideoGenerateInput) => Promise<void>;
+    /** Abort the current generation/polling */
+    stop: () => void;
+    /** Clear all state and return to idle */
+    reset: () => void;
+    /** Update additional body parameters */
+    updateBody: (body: Record<string, any>) => void;
+}
+/**
+ * Creates a reactive video generation instance for Svelte 5.
+ *
+ * Video generation is asynchronous: a job is created, then polled for status
+ * until completion. This function handles the full lifecycle.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { createGenerateVideo, fetchServerSentEvents } from '@tanstack/ai-svelte'
+ *
+ *   const video = createGenerateVideo({
+ *     connection: fetchServerSentEvents('/api/generate/video'),
+ *     onStatusUpdate: (status) => console.log(`Progress: ${status.progress}%`),
+ *   })
+ * </script>
+ *
+ * <div>
+ *   <button onclick={() => video.generate({ prompt: 'A flying car over a city' })}>
+ *     Generate Video
+ *   </button>
+ *   {#if video.isLoading && video.videoStatus}
+ *     <p>Status: {video.videoStatus.status} ({video.videoStatus.progress}%)</p>
+ *   {/if}
+ *   {#if video.result}
+ *     <video src={video.result.url} controls></video>
+ *   {/if}
+ * </div>
+ * ```
+ */
+export declare function createGenerateVideo<TOnResult extends ((result: VideoGenerateResult) => any) | undefined = undefined>(options: Omit<CreateGenerateVideoOptions, 'onResult'> & {
+    onResult?: TOnResult;
+}): CreateGenerateVideoReturn<InferGenerationOutput<VideoGenerateResult, TOnResult>>;

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

@@ -0,0 +1,126 @@
+import { VideoGenerationClient } from '@tanstack/ai-client';
+/**
+ * Creates a reactive video generation instance for Svelte 5.
+ *
+ * Video generation is asynchronous: a job is created, then polled for status
+ * until completion. This function handles the full lifecycle.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { createGenerateVideo, fetchServerSentEvents } from '@tanstack/ai-svelte'
+ *
+ *   const video = createGenerateVideo({
+ *     connection: fetchServerSentEvents('/api/generate/video'),
+ *     onStatusUpdate: (status) => console.log(`Progress: ${status.progress}%`),
+ *   })
+ * </script>
+ *
+ * <div>
+ *   <button onclick={() => video.generate({ prompt: 'A flying car over a city' })}>
+ *     Generate Video
+ *   </button>
+ *   {#if video.isLoading && video.videoStatus}
+ *     <p>Status: {video.videoStatus.status} ({video.videoStatus.progress}%)</p>
+ *   {/if}
+ *   {#if video.result}
+ *     <video src={video.result.url} controls></video>
+ *   {/if}
+ * </div>
+ * ```
+ */
+export function createGenerateVideo(options) {
+    const clientId = options.id ||
+        `video-${Date.now()}-${Math.random().toString(36).substring(7)}`;
+    // Create reactive state using Svelte 5 runes
+    let result = $state(null);
+    let jobId = $state(null);
+    let videoStatus = $state(null);
+    let isLoading = $state(false);
+    let error = $state(undefined);
+    let status = $state('idle');
+    const baseOptions = {
+        id: clientId,
+        body: options.body,
+        onResult: (r) => options.onResult?.(r),
+        onError: (e) => options.onError?.(e),
+        onProgress: (p, m) => options.onProgress?.(p, m),
+        onChunk: (c) => options.onChunk?.(c),
+        onJobCreated: (id) => options.onJobCreated?.(id),
+        onStatusUpdate: (s) => options.onStatusUpdate?.(s),
+        onResultChange: (r) => {
+            result = r;
+        },
+        onLoadingChange: (l) => {
+            isLoading = l;
+        },
+        onErrorChange: (e) => {
+            error = e;
+        },
+        onStatusChange: (s) => {
+            status = s;
+        },
+        onJobIdChange: (id) => {
+            jobId = id;
+        },
+        onVideoStatusChange: (s) => {
+            videoStatus = s;
+        },
+    };
+    let client;
+    if (options.connection) {
+        client = new VideoGenerationClient({
+            ...baseOptions,
+            connection: options.connection,
+        });
+    }
+    else if (options.fetcher) {
+        client = new VideoGenerationClient({
+            ...baseOptions,
+            fetcher: options.fetcher,
+        });
+    }
+    else {
+        throw new Error('createGenerateVideo requires either a connection or fetcher option');
+    }
+    // Note: Cleanup is handled by calling stop() directly when needed.
+    // Unlike React/Vue/Solid, Svelte 5 runes like $effect can only be used
+    // during component initialization, so we don't add automatic cleanup here.
+    // Users should call video.stop() in their component's cleanup if needed.
+    const generate = async (input) => {
+        await client.generate(input);
+    };
+    const stop = () => {
+        client.stop();
+    };
+    const reset = () => {
+        client.reset();
+    };
+    const updateBody = (newBody) => {
+        client.updateOptions({ body: newBody });
+    };
+    return {
+        get result() {
+            return result;
+        },
+        get jobId() {
+            return jobId;
+        },
+        get videoStatus() {
+            return videoStatus;
+        },
+        get isLoading() {
+            return isLoading;
+        },
+        get error() {
+            return error;
+        },
+        get status() {
+            return status;
+        },
+        generate,
+        stop,
+        reset,
+        updateBody,
+    };
+}

package/dist/create-generation.svelte.d.ts

@@ -0,0 +1,92 @@
+import type { StreamChunk } from '@tanstack/ai';
+import type { ConnectionAdapter, GenerationClientState, GenerationFetcher, InferGenerationOutput } from '@tanstack/ai-client';
+/**
+ * Options for the createGeneration function.
+ *
+ * Accepts either a `connection` (streaming transport) or a `fetcher` (direct async call).
+ *
+ * @template TInput - The input type for the generation request
+ * @template TResult - The result type returned by the generation
+ * @template TOutput - The output type after optional transform (defaults to TResult)
+ */
+export interface CreateGenerationOptions<TInput, TResult, TOutput = TResult> {
+    /** Connection adapter for streaming transport (SSE, HTTP stream, custom) */
+    connection?: ConnectionAdapter;
+    /** Direct async function for one-shot generation (no streaming protocol needed) */
+    fetcher?: GenerationFetcher<TInput, TResult>;
+    /** Unique identifier for this generation instance */
+    id?: string;
+    /** Additional body parameters to send with ConnectionAdapter requests */
+    body?: Record<string, any>;
+    /**
+     * Callback when a result is received. 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: TResult) => 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 (ConnectionAdapter mode only) */
+    onChunk?: (chunk: StreamChunk) => void;
+}
+/**
+ * Return type for the createGeneration function.
+ *
+ * @template TOutput - The output type (after optional transform)
+ */
+export interface CreateGenerationReturn<TOutput> {
+    /** The generation result, or null if not yet generated */
+    readonly result: TOutput | null;
+    /** Whether a generation is currently in progress */
+    readonly isLoading: boolean;
+    /** Current error, if any */
+    readonly error: Error | undefined;
+    /** Current state of the generation client */
+    readonly status: GenerationClientState;
+    /** Trigger a generation request */
+    generate: (input: Record<string, any>) => 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 generation instance for Svelte 5.
+ *
+ * This is the base function used by `createGenerateImage`, `createGenerateSpeech`,
+ * `createTranscription`, and `createSummarize`. You can also use it directly
+ * for custom generation types.
+ *
+ * @template TInput - The input type for the generation request
+ * @template TResult - The result type returned by the generation
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { createGeneration, fetchServerSentEvents } from '@tanstack/ai-svelte'
+ *
+ *   const gen = createGeneration({
+ *     connection: fetchServerSentEvents('/api/generate/custom'),
+ *   })
+ * </script>
+ *
+ * <div>
+ *   <button onclick={() => gen.generate({ prompt: 'Hello' })}>Generate</button>
+ *   {#if gen.isLoading}
+ *     <p>Generating...</p>
+ *   {/if}
+ *   {#if gen.result}
+ *     <p>{JSON.stringify(gen.result)}</p>
+ *   {/if}
+ * </div>
+ * ```
+ */
+export declare function createGeneration<TInput extends Record<string, any>, TResult, TOnResult extends ((result: TResult) => any) | undefined = undefined>(options: Omit<CreateGenerationOptions<TInput, TResult>, 'onResult'> & {
+    onResult?: TOnResult;
+}): CreateGenerationReturn<InferGenerationOutput<TResult, TOnResult>>;