@tanstack/ai-svelte 0.2.2 → 0.4.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;
         },
@@ -88,6 +96,9 @@ export function createChat(options) {
     const addToolApprovalResponse = async (response) => {
         await client.addToolApprovalResponse(response);
     };
+    const updateBody = (newBody) => {
+        client.updateOptions({ body: newBody });
+    };
     // Return the chat interface with reactive getters
     // Using getters allows Svelte to track reactivity without needing $ prefix
     return {
@@ -100,6 +111,9 @@ export function createChat(options) {
         get error() {
             return error;
         },
+        get status() {
+            return status;
+        },
         sendMessage,
         append,
         reload,
@@ -108,5 +122,6 @@ export function createChat(options) {
         clear,
         addToolResult,
         addToolApprovalResponse,
+        updateBody,
     };
 }

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, UIMessage } from '@tanstack/ai-client';
+export type { ChatRequestBody, 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,7 +17,7 @@ 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)
@@ -71,4 +72,12 @@ 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)
+     */
+    updateBody: (body: Record<string, any>) => void;
 }

package/package.json

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

package/src/create-chat.svelte.ts

@@ -1,4 +1,5 @@
 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'
 
@@ -44,6 +45,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 +55,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 +69,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
     },
@@ -115,6 +124,10 @@ export function createChat<TTools extends ReadonlyArray<AnyClientTool> = any>(
     await client.addToolApprovalResponse(response)
   }
 
+  const updateBody = (newBody: Record<string, any>) => {
+    client.updateOptions({ body: newBody })
+  }
+
   // Return the chat interface with reactive getters
   // Using getters allows Svelte to track reactivity without needing $ prefix
   return {
@@ -127,6 +140,9 @@ export function createChat<TTools extends ReadonlyArray<AnyClientTool> = any>(
     get error() {
       return error
     },
+    get status() {
+      return status
+    },
     sendMessage,
     append,
     reload,
@@ -135,5 +151,6 @@ export function createChat<TTools extends ReadonlyArray<AnyClientTool> = any>(
     clear,
     addToolResult,
     addToolApprovalResponse,
+    updateBody,
   }
 }

package/src/types.ts

@@ -1,12 +1,13 @@
 import type { AnyClientTool, ModelMessage } from '@tanstack/ai'
 import type {
   ChatClientOptions,
+  ChatClientState,
   ChatRequestBody,
   UIMessage,
 } from '@tanstack/ai-client'
 
 // Re-export types from ai-client
-export type { UIMessage, ChatRequestBody }
+export type { ChatRequestBody, UIMessage }
 
 /**
  * Options for the createChat function.
@@ -16,6 +17,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 +29,7 @@ export type CreateChatOptions<
   TTools extends ReadonlyArray<AnyClientTool> = any,
 > = Omit<
   ChatClientOptions<TTools>,
-  'onMessagesChange' | 'onLoadingChange' | 'onErrorChange'
+  'onMessagesChange' | 'onLoadingChange' | 'onErrorChange' | 'onStatusChange'
 >
 
 export interface CreateChatReturn<
@@ -96,6 +98,15 @@ export interface CreateChatReturn<
    * 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)
+   */
+  updateBody: (body: Record<string, any>) => void
 }
 
 // Note: createChatClientOptions and InferChatMessages are now in @tanstack/ai-client