@tanstack/ai-solid 0.2.2 → 0.4.0

package/dist/types.d.ts

@@ -1,5 +1,5 @@
 import { Accessor } from "solid-js";
-import { ChatClientOptions, ChatRequestBody, UIMessage } from "@tanstack/ai-client";
+import { ChatClientOptions, ChatClientState, ChatRequestBody, UIMessage } from "@tanstack/ai-client";
 import { AnyClientTool, ModelMessage } from "@tanstack/ai";
 
 //#region src/types.d.ts
@@ -12,6 +12,7 @@ import { AnyClientTool, ModelMessage } from "@tanstack/ai";
  * - `onMessagesChange` - Managed by Solid signal (exposed as `messages`)
  * - `onLoadingChange` - Managed by Solid signal (exposed as `isLoading`)
  * - `onErrorChange` - Managed by Solid signal (exposed as `error`)
+ * - `onStatusChange` - Managed by Solid signal (exposed as `status`)
  *
  * All other callbacks (onResponse, onChunk, onFinish, onError) are
  * passed through to the underlying ChatClient and can be used for side effects.
@@ -19,7 +20,7 @@ import { AnyClientTool, ModelMessage } from "@tanstack/ai";
  * Note: Connection and body changes will recreate the ChatClient instance.
  * To update these options, remount the component or use a key prop.
  */
-type UseChatOptions<TTools extends ReadonlyArray<AnyClientTool> = any> = Omit<ChatClientOptions<TTools>, 'onMessagesChange' | 'onLoadingChange' | 'onErrorChange'>;
+type UseChatOptions<TTools extends ReadonlyArray<AnyClientTool> = any> = Omit<ChatClientOptions<TTools>, 'onMessagesChange' | 'onLoadingChange' | 'onErrorChange' | 'onStatusChange'>;
 interface UseChatReturn<TTools extends ReadonlyArray<AnyClientTool> = any> {
   /**
    * Current messages in the conversation
@@ -74,6 +75,10 @@ interface UseChatReturn<TTools extends ReadonlyArray<AnyClientTool> = any> {
    * Clear all messages
    */
   clear: () => void;
+  /**
+   * Current generation status
+   */
+  status: Accessor<ChatClientState>;
 }
 //#endregion
 export { type ChatRequestBody, type UIMessage, UseChatOptions, UseChatReturn };

package/dist/use-chat.js

@@ -8,6 +8,7 @@ function useChat(options = {}) {
 	const [messages, setMessages] = createSignal(options.initialMessages || []);
 	const [isLoading, setIsLoading] = createSignal(false);
 	const [error, setError] = createSignal(void 0);
+	const [status, setStatus] = createSignal("ready");
 	const client = createMemo(() => {
 		return new ChatClient({
 			connection: options.connection,
@@ -16,8 +17,12 @@ function useChat(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) => {
@@ -26,11 +31,18 @@ function useChat(options = {}) {
 			onLoadingChange: (newIsLoading) => {
 				setIsLoading(newIsLoading);
 			},
+			onStatusChange: (newStatus) => {
+				setStatus(newStatus);
+			},
 			onErrorChange: (newError) => {
 				setError(newError);
 			}
 		});
 	}, [clientId]);
+	createEffect(() => {
+		const currentBody = options.body;
+		client().updateOptions({ body: currentBody });
+	});
 	createEffect(() => {
 		if (options.initialMessages && options.initialMessages.length > 0) {
 			if (messages().length === 0) client().setMessagesManually(options.initialMessages);
@@ -73,6 +85,7 @@ function useChat(options = {}) {
 		stop,
 		isLoading,
 		error,
+		status,
 		setMessages: setMessagesManually,
 		clear,
 		addToolResult,

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} from 'solid-js'\nimport { ChatClient } from '@tanstack/ai-client'\nimport type { AnyClientTool, ModelMessage } from '@tanstack/ai'\nimport type { UIMessage, UseChatOptions, UseChatReturn } 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\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: options.onFinish,\n      onError: options.onError,\n      tools: options.tools,\n      streamProcessor: options.streamProcessor,\n      onMessagesChange: (newMessages: Array<UIMessage<TTools>>) => {\n        setMessages(newMessages)\n      },\n      onLoadingChange: (newIsLoading: boolean) => {\n        setIsLoading(newIsLoading)\n      },\n      onErrorChange: (newError: Error | undefined) => {\n        setError(newError)\n      },\n    })\n    // Only recreate when clientId changes\n    // Connection and other options are captured at creation time\n  }, [clientId])\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  // Cleanup on unmount: stop any in-flight requests\n  // Note: We use createEffect with a cleanup return to handle component unmount.\n  // The cleanup only runs on disposal (unmount), not on signal changes.\n  createEffect(() => {\n    return () => {\n      // Stop any active generation when component unmounts\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) => {\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    setMessages: setMessagesManually,\n    clear,\n    addToolResult,\n    addToolApprovalResponse,\n  }\n}\n"],"mappings":";;;;AAUA,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;CAMpE,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,UAAU,QAAQ;GAClB,SAAS,QAAQ;GACjB,OAAO,QAAQ;GACf,iBAAiB,QAAQ;GACzB,mBAAmB,gBAA0C;AAC3D,gBAAY,YAAY;;GAE1B,kBAAkB,iBAA0B;AAC1C,iBAAa,aAAa;;GAE5B,gBAAgB,aAAgC;AAC9C,aAAS,SAAS;;GAErB,CAAC;IAGD,CAAC,SAAS,CAAC;AAKd,oBAAmB;AACjB,MAAI,QAAQ,mBAAmB,QAAQ,gBAAgB,SAAS,GAE9D;OAAI,UAAU,CAAC,WAAW,EACxB,SAAQ,CAAC,oBAAoB,QAAQ,gBAAgB;;GAGzD;AAKF,oBAAmB;AACjB,eAAa;AAEX,WAAQ,CAAC,MAAM;;GAEjB;CAMF,MAAM,cAAc,OAAO,YAAoB;AAC7C,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,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} from 'solid-js'\n\nimport { ChatClient } from '@tanstack/ai-client'\nimport type { ChatClientState } from '@tanstack/ai-client'\nimport type { AnyClientTool, ModelMessage } from '@tanstack/ai'\nimport type { UIMessage, UseChatOptions, UseChatReturn } 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\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      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    })\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  // Cleanup on unmount: stop any in-flight requests\n  // Note: We use createEffect with a cleanup return to handle component unmount.\n  // The cleanup only runs on disposal (unmount), not on signal changes.\n  createEffect(() => {\n    return () => {\n      // Stop any active generation when component unmounts\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) => {\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    setMessages: setMessagesManually,\n    clear,\n    addToolResult,\n    addToolApprovalResponse,\n  }\n}\n"],"mappings":";;;;AAYA,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;CAMlE,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,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;;GAErB,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;AAKF,oBAAmB;AACjB,eAAa;AAEX,WAAQ,CAAC,MAAM;;GAEjB;CAMF,MAAM,cAAc,OAAO,YAAoB;AAC7C,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,aAAa;EACb;EACA;EACA;EACD"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/ai-solid",
-  "version": "0.2.2",
+  "version": "0.4.0",
   "description": "Solid hooks for TanStack AI",
   "author": "",
   "license": "MIT",
@@ -31,11 +31,11 @@
     "streaming"
   ],
   "dependencies": {
-    "@tanstack/ai-client": "0.2.2"
+    "@tanstack/ai-client": "0.4.0"
   },
   "peerDependencies": {
     "solid-js": ">=1.9.10",
-    "@tanstack/ai": "^0.2.2"
+    "@tanstack/ai": "^0.3.1"
   },
   "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.2.2"
+    "@tanstack/ai": "0.3.1"
   },
   "scripts": {
     "clean": "premove ./build ./dist",

package/src/types.ts

@@ -1,13 +1,14 @@
-import type { Accessor } from 'solid-js'
 import type { AnyClientTool, ModelMessage } from '@tanstack/ai'
 import type {
   ChatClientOptions,
+  ChatClientState,
   ChatRequestBody,
   UIMessage,
 } from '@tanstack/ai-client'
+import type { Accessor } from 'solid-js'
 
 // Re-export types from ai-client
-export type { UIMessage, ChatRequestBody }
+export type { ChatRequestBody, UIMessage }
 
 /**
  * Options for the useChat hook.
@@ -17,6 +18,7 @@ export type { UIMessage, ChatRequestBody }
  * - `onMessagesChange` - Managed by Solid signal (exposed as `messages`)
  * - `onLoadingChange` - Managed by Solid signal (exposed as `isLoading`)
  * - `onErrorChange` - Managed by Solid signal (exposed as `error`)
+ * - `onStatusChange` - Managed by Solid signal (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 { UIMessage, ChatRequestBody }
 export type UseChatOptions<TTools extends ReadonlyArray<AnyClientTool> = any> =
   Omit<
     ChatClientOptions<TTools>,
-    'onMessagesChange' | 'onLoadingChange' | 'onErrorChange'
+    'onMessagesChange' | 'onLoadingChange' | 'onErrorChange' | 'onStatusChange'
   >
 
 export interface UseChatReturn<
@@ -96,6 +98,11 @@ export interface UseChatReturn<
    * Clear all messages
    */
   clear: () => void
+
+  /**
+   * Current generation status
+   */
+  status: Accessor<ChatClientState>
 }
 
 // Note: createChatClientOptions and InferChatMessages are now in @tanstack/ai-client

package/src/use-chat.ts

@@ -4,7 +4,9 @@ import {
   createSignal,
   createUniqueId,
 } from 'solid-js'
+
 import { ChatClient } from '@tanstack/ai-client'
+import type { ChatClientState } from '@tanstack/ai-client'
 import type { AnyClientTool, ModelMessage } from '@tanstack/ai'
 import type { UIMessage, UseChatOptions, UseChatReturn } from './types'
 
@@ -19,6 +21,7 @@ export function useChat<TTools extends ReadonlyArray<AnyClientTool> = any>(
   )
   const [isLoading, setIsLoading] = createSignal(false)
   const [error, setError] = createSignal<Error | undefined>(undefined)
+  const [status, setStatus] = createSignal<ChatClientState>('ready')
 
   // Create ChatClient instance with callbacks to sync state
   // Note: Options are captured at client creation time.
@@ -32,8 +35,12 @@ export function useChat<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>>) => {
@@ -42,6 +49,9 @@ export function useChat<TTools extends ReadonlyArray<AnyClientTool> = any>(
       onLoadingChange: (newIsLoading: boolean) => {
         setIsLoading(newIsLoading)
       },
+      onStatusChange: (newStatus: ChatClientState) => {
+        setStatus(newStatus)
+      },
       onErrorChange: (newError: Error | undefined) => {
         setError(newError)
       },
@@ -50,6 +60,13 @@ export function useChat<TTools extends ReadonlyArray<AnyClientTool> = any>(
     // Connection and other options are captured at creation time
   }, [clientId])
 
+  // Sync body changes to the client
+  // This allows dynamic body values (like model selection) to be updated without recreating the client
+  createEffect(() => {
+    const currentBody = options.body
+    client().updateOptions({ body: currentBody })
+  })
+
   // Sync initial messages on mount only
   // Note: initialMessages are passed to ChatClient constructor, but we also
   // set them here to ensure React state is in sync
@@ -125,6 +142,7 @@ export function useChat<TTools extends ReadonlyArray<AnyClientTool> = any>(
     stop,
     isLoading,
     error,
+    status,
     setMessages: setMessagesManually,
     clear,
     addToolResult,