@tanstack/ai-svelte 0.3.0 → 0.5.0

package/README.md

@@ -65,8 +65,8 @@ This library uses Svelte 5 runes (`$state`) internally, providing a clean API wh
 
 ```svelte
 <script>
-  const chat = createChat({ ... })
-  
+  const chat = createChat({})
+
   // No $ needed - these are reactive getters!
   console.log(chat.messages)
   console.log(chat.isLoading)

package/dist/create-chat.svelte.js

@@ -37,6 +37,7 @@ export function createChat(options) {
     let messages = $state(options.initialMessages || []);
     let isLoading = $state(false);
     let error = $state(undefined);
+    let status = $state('ready');
     // Create ChatClient instance
     const client = new ChatClient({
         connection: options.connection,
@@ -45,8 +46,12 @@ export function createChat(options) {
         body: options.body,
         onResponse: options.onResponse,
         onChunk: options.onChunk,
-        onFinish: options.onFinish,
-        onError: options.onError,
+        onFinish: (message) => {
+            options.onFinish?.(message);
+        },
+        onError: (err) => {
+            options.onError?.(err);
+        },
         tools: options.tools,
         streamProcessor: options.streamProcessor,
         onMessagesChange: (newMessages) => {
@@ -55,6 +60,9 @@ export function createChat(options) {
         onLoadingChange: (newIsLoading) => {
             isLoading = newIsLoading;
         },
+        onStatusChange: (newStatus) => {
+            status = newStatus;
+        },
         onErrorChange: (newError) => {
             error = newError;
         },
@@ -103,6 +111,9 @@ export function createChat(options) {
         get error() {
             return error;
         },
+        get status() {
+            return status;
+        },
         sendMessage,
         append,
         reload,

package/dist/types.d.ts

@@ -1,6 +1,6 @@
 import type { AnyClientTool, ModelMessage } from '@tanstack/ai';
-import type { ChatClientOptions, ChatRequestBody, UIMessage } from '@tanstack/ai-client';
-export type { UIMessage, ChatRequestBody };
+import type { ChatClientOptions, ChatClientState, ChatRequestBody, MultimodalContent, UIMessage } from '@tanstack/ai-client';
+export type { ChatRequestBody, MultimodalContent, UIMessage };
 /**
  * Options for the createChat function.
  *
@@ -9,6 +9,7 @@ export type { UIMessage, ChatRequestBody };
  * - `onMessagesChange` - Managed by Svelte state (exposed as `messages`)
  * - `onLoadingChange` - Managed by Svelte state (exposed as `isLoading`)
  * - `onErrorChange` - Managed by Svelte state (exposed as `error`)
+ * - `onStatusChange` - Managed by Svelte state (exposed as `status`)
  *
  * All other callbacks (onResponse, onChunk, onFinish, onError) are
  * passed through to the underlying ChatClient and can be used for side effects.
@@ -16,16 +17,17 @@ export type { UIMessage, ChatRequestBody };
  * Note: Connection and body changes will recreate the ChatClient instance.
  * To update these options, remount the component or use a key prop.
  */
-export type CreateChatOptions<TTools extends ReadonlyArray<AnyClientTool> = any> = Omit<ChatClientOptions<TTools>, 'onMessagesChange' | 'onLoadingChange' | 'onErrorChange'>;
+export type CreateChatOptions<TTools extends ReadonlyArray<AnyClientTool> = any> = Omit<ChatClientOptions<TTools>, 'onMessagesChange' | 'onLoadingChange' | 'onErrorChange' | 'onStatusChange'>;
 export interface CreateChatReturn<TTools extends ReadonlyArray<AnyClientTool> = any> {
     /**
      * Current messages in the conversation (reactive getter)
      */
     readonly messages: Array<UIMessage<TTools>>;
     /**
-     * Send a message and get a response
+     * Send a message and get a response.
+     * Can be a simple string or multimodal content with images, audio, etc.
      */
-    sendMessage: (content: string) => Promise<void>;
+    sendMessage: (content: string | MultimodalContent) => Promise<void>;
     /**
      * Append a message to the conversation
      */
@@ -71,6 +73,10 @@ export interface CreateChatReturn<TTools extends ReadonlyArray<AnyClientTool> =
      * Clear all messages
      */
     clear: () => void;
+    /**
+     * Current generation status (reactive getter)
+     */
+    readonly status: ChatClientState;
     /**
      * Update the body sent with requests (e.g., for changing model selection)
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/ai-svelte",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "description": "Svelte bindings for TanStack AI",
   "author": "",
   "license": "MIT",
@@ -33,11 +33,11 @@
     "streaming"
   ],
   "dependencies": {
-    "@tanstack/ai-client": "0.3.0"
+    "@tanstack/ai-client": "0.4.1"
   },
   "peerDependencies": {
     "svelte": "^5.0.0",
-    "@tanstack/ai": "^0.3.0"
+    "@tanstack/ai": "^0.4.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.3.0"
+    "@tanstack/ai": "0.4.0"
   },
   "scripts": {
     "clean": "rm -rf ./dist",

package/src/create-chat.svelte.ts

@@ -1,6 +1,12 @@
 import { ChatClient } from '@tanstack/ai-client'
+import type { ChatClientState } from '@tanstack/ai-client'
 import type { AnyClientTool, ModelMessage } from '@tanstack/ai'
-import type { CreateChatOptions, CreateChatReturn, UIMessage } from './types'
+import type {
+  CreateChatOptions,
+  CreateChatReturn,
+  MultimodalContent,
+  UIMessage,
+} from './types'
 
 /**
  * Creates a reactive chat instance for Svelte 5.
@@ -44,6 +50,7 @@ export function createChat<TTools extends ReadonlyArray<AnyClientTool> = any>(
   let messages = $state<Array<UIMessage<TTools>>>(options.initialMessages || [])
   let isLoading = $state(false)
   let error = $state<Error | undefined>(undefined)
+  let status = $state<ChatClientState>('ready')
 
   // Create ChatClient instance
   const client = new ChatClient({
@@ -53,8 +60,12 @@ export function createChat<TTools extends ReadonlyArray<AnyClientTool> = any>(
     body: options.body,
     onResponse: options.onResponse,
     onChunk: options.onChunk,
-    onFinish: options.onFinish,
-    onError: options.onError,
+    onFinish: (message) => {
+      options.onFinish?.(message)
+    },
+    onError: (err) => {
+      options.onError?.(err)
+    },
     tools: options.tools,
     streamProcessor: options.streamProcessor,
     onMessagesChange: (newMessages: Array<UIMessage<TTools>>) => {
@@ -63,6 +74,9 @@ export function createChat<TTools extends ReadonlyArray<AnyClientTool> = any>(
     onLoadingChange: (newIsLoading: boolean) => {
       isLoading = newIsLoading
     },
+    onStatusChange: (newStatus: ChatClientState) => {
+      status = newStatus
+    },
     onErrorChange: (newError: Error | undefined) => {
       error = newError
     },
@@ -74,7 +88,7 @@ export function createChat<TTools extends ReadonlyArray<AnyClientTool> = any>(
   // Users should call chat.stop() in their component's cleanup if needed.
 
   // Define methods
-  const sendMessage = async (content: string) => {
+  const sendMessage = async (content: string | MultimodalContent) => {
     await client.sendMessage(content)
   }
 
@@ -131,6 +145,9 @@ export function createChat<TTools extends ReadonlyArray<AnyClientTool> = any>(
     get error() {
       return error
     },
+    get status() {
+      return status
+    },
     sendMessage,
     append,
     reload,

package/src/types.ts

@@ -1,12 +1,14 @@
 import type { AnyClientTool, ModelMessage } from '@tanstack/ai'
 import type {
   ChatClientOptions,
+  ChatClientState,
   ChatRequestBody,
+  MultimodalContent,
   UIMessage,
 } from '@tanstack/ai-client'
 
 // Re-export types from ai-client
-export type { UIMessage, ChatRequestBody }
+export type { ChatRequestBody, MultimodalContent, UIMessage }
 
 /**
  * Options for the createChat function.
@@ -16,6 +18,7 @@ export type { UIMessage, ChatRequestBody }
  * - `onMessagesChange` - Managed by Svelte state (exposed as `messages`)
  * - `onLoadingChange` - Managed by Svelte state (exposed as `isLoading`)
  * - `onErrorChange` - Managed by Svelte state (exposed as `error`)
+ * - `onStatusChange` - Managed by Svelte state (exposed as `status`)
  *
  * All other callbacks (onResponse, onChunk, onFinish, onError) are
  * passed through to the underlying ChatClient and can be used for side effects.
@@ -27,7 +30,7 @@ export type CreateChatOptions<
   TTools extends ReadonlyArray<AnyClientTool> = any,
 > = Omit<
   ChatClientOptions<TTools>,
-  'onMessagesChange' | 'onLoadingChange' | 'onErrorChange'
+  'onMessagesChange' | 'onLoadingChange' | 'onErrorChange' | 'onStatusChange'
 >
 
 export interface CreateChatReturn<
@@ -39,9 +42,10 @@ export interface CreateChatReturn<
   readonly messages: Array<UIMessage<TTools>>
 
   /**
-   * Send a message and get a response
+   * Send a message and get a response.
+   * Can be a simple string or multimodal content with images, audio, etc.
    */
-  sendMessage: (content: string) => Promise<void>
+  sendMessage: (content: string | MultimodalContent) => Promise<void>
 
   /**
    * Append a message to the conversation
@@ -97,6 +101,10 @@ export interface CreateChatReturn<
    */
   clear: () => void
 
+  /**
+   * Current generation status (reactive getter)
+   */
+  readonly status: ChatClientState
   /**
    * Update the body sent with requests (e.g., for changing model selection)
    */