@tanstack/ai-preact 0.8.2 → 0.9.2

package/dist/esm/use-chat.js

@@ -17,17 +17,21 @@ function useChat(options) {
     options.initialMessages || []
   );
   const isFirstMountRef = useRef(true);
+  const activeClientRef = useRef(null);
+  const cleanupInvalidationRef = useRef(
+    null
+  );
   const optionsRef = useRef(options);
   optionsRef.current = options;
   useEffect(() => {
     messagesRef.current = messages;
   }, [messages]);
   const client = useMemo(() => {
-    const messagesToUse = isFirstMountRef.current ? options.initialMessages || [] : messagesRef.current;
+    const messagesToUse = options.initialMessages || [];
     isFirstMountRef.current = false;
     const initialOptions = optionsRef.current;
     const transport = initialOptions.connection ? { connection: initialOptions.connection } : { fetcher: initialOptions.fetcher };
-    return new ChatClient({
+    const instance = new ChatClient({
       devtoolsBridgeFactory: createChatDevtoolsBridge,
       ...transport,
       id: clientId,
@@ -36,6 +40,9 @@ function useChat(options) {
       ...initialOptions.forwardedProps !== void 0 && {
         forwardedProps: initialOptions.forwardedProps
       },
+      ...initialOptions.persistence !== void 0 && {
+        persistence: initialOptions.persistence
+      },
       ...initialOptions.context !== void 0 && {
         context: initialOptions.context
       },
@@ -48,15 +55,26 @@ function useChat(options) {
       // Wrap every callback so the latest options are read at call time.
       // Capturing the function reference directly would freeze it to whatever
       // the parent passed on the first render.
-      onResponse: (response) => optionsRef.current.onResponse?.(response),
-      onChunk: (chunk) => optionsRef.current.onChunk?.(chunk),
+      onResponse: (response) => {
+        if (activeClientRef.current !== instance) return;
+        return optionsRef.current.onResponse?.(response);
+      },
+      onChunk: (chunk) => {
+        if (activeClientRef.current !== instance) return;
+        optionsRef.current.onChunk?.(chunk);
+      },
       onFinish: (message) => {
+        if (activeClientRef.current !== instance) return;
         optionsRef.current.onFinish?.(message);
       },
       onError: (err) => {
+        if (activeClientRef.current !== instance) return;
         optionsRef.current.onError?.(err);
       },
-      onCustomEvent: (eventType, data, context) => optionsRef.current.onCustomEvent?.(eventType, data, context),
+      onCustomEvent: (eventType, data, context) => {
+        if (activeClientRef.current !== instance) return;
+        optionsRef.current.onCustomEvent?.(eventType, data, context);
+      },
       ...initialOptions.tools !== void 0 && {
         tools: initialOptions.tools
       },
@@ -64,28 +82,43 @@ function useChat(options) {
         streamProcessor: options.streamProcessor
       },
       onMessagesChange: (newMessages) => {
+        if (activeClientRef.current !== instance) return;
         setMessages(newMessages);
       },
       onLoadingChange: (newIsLoading) => {
+        if (activeClientRef.current !== instance) return;
         setIsLoading(newIsLoading);
       },
       onStatusChange: (newStatus) => {
+        if (activeClientRef.current !== instance) return;
         setStatus(newStatus);
       },
       onErrorChange: (newError) => {
+        if (activeClientRef.current !== instance) return;
         setError(newError);
       },
       onSubscriptionChange: (nextIsSubscribed) => {
+        if (activeClientRef.current !== instance) return;
         setIsSubscribed(nextIsSubscribed);
       },
       onConnectionStatusChange: (nextStatus) => {
+        if (activeClientRef.current !== instance) return;
         setConnectionStatus(nextStatus);
       },
       onSessionGeneratingChange: (isGenerating) => {
+        if (activeClientRef.current !== instance) return;
         setSessionGenerating(isGenerating);
       }
     });
+    activeClientRef.current = instance;
+    return instance;
   }, [clientId]);
+  useEffect(() => {
+    const clientMessages = client.getMessages();
+    if (clientMessages !== messagesRef.current) {
+      setMessages(clientMessages);
+    }
+  }, [client]);
   useEffect(() => {
     client.updateOptions({
       body: options.body,
@@ -95,11 +128,6 @@ function useChat(options) {
       context: options.context
     });
   }, [client, options.body, options.forwardedProps, options.context]);
-  useEffect(() => {
-    if (options.initialMessages && options.initialMessages.length && !messages.length) {
-      client.setMessagesManually(options.initialMessages);
-    }
-  }, []);
   useEffect(() => {
     if (options.live) {
       client.subscribe();
@@ -108,8 +136,19 @@ function useChat(options) {
     }
   }, [client, options.live]);
   useEffect(() => {
+    if (cleanupInvalidationRef.current) {
+      clearTimeout(cleanupInvalidationRef.current);
+      cleanupInvalidationRef.current = null;
+    }
+    activeClientRef.current = client;
     client.mountDevtools();
     return () => {
+      cleanupInvalidationRef.current = setTimeout(() => {
+        if (activeClientRef.current === client) {
+          activeClientRef.current = null;
+        }
+        cleanupInvalidationRef.current = null;
+      }, 0);
       if (optionsRef.current.live) {
         client.unsubscribe();
       } else {
@@ -157,8 +196,9 @@ function useChat(options) {
     },
     [client]
   );
+  const renderedMessages = client.getMessages();
   return {
-    messages,
+    messages: renderedMessages,
     sendMessage,
     append,
     reload,

package/dist/esm/use-chat.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-chat.js","sources":["../../src/use-chat.ts"],"sourcesContent":["import { ChatClient } from '@tanstack/ai-client'\nimport { createChatDevtoolsBridge } from '@tanstack/ai-client/devtools'\nimport {\n  useCallback,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n} from 'preact/hooks'\nimport type {\n  ChatClientState,\n  ConnectionStatus,\n  InferredClientContext,\n} from '@tanstack/ai-client'\nimport type { AnyClientTool, ModelMessage } from '@tanstack/ai'\n\nimport type {\n  MultimodalContent,\n  UIMessage,\n  UseChatOptions,\n  UseChatReturn,\n} from './types'\n\nexport function useChat<\n  TTools extends ReadonlyArray<AnyClientTool> = any,\n  TContext = InferredClientContext<TTools>,\n>(options: UseChatOptions<TTools, TContext>): UseChatReturn<TTools> {\n  const hookId = useId()\n  const clientId = options.id || hookId\n\n  const [messages, setMessages] = useState<Array<UIMessage<TTools>>>(\n    options.initialMessages || [],\n  )\n  const [isLoading, setIsLoading] = useState(false)\n  const [error, setError] = useState<Error | undefined>(undefined)\n  const [status, setStatus] = useState<ChatClientState>('ready')\n  const [isSubscribed, setIsSubscribed] = useState(false)\n  const [connectionStatus, setConnectionStatus] =\n    useState<ConnectionStatus>('disconnected')\n  const [sessionGenerating, setSessionGenerating] = useState(false)\n\n  // Track current messages in a ref to preserve them when client is recreated\n  const messagesRef = useRef<Array<UIMessage<TTools>>>(\n    options.initialMessages || [],\n  )\n  const isFirstMountRef = useRef(true)\n  const optionsRef = useRef<UseChatOptions<TTools, TContext>>(options)\n\n  optionsRef.current = options\n\n  useEffect(() => {\n    messagesRef.current = messages\n  }, [messages])\n\n  const client = useMemo(() => {\n    // On first mount, use initialMessages. On subsequent recreations, preserve existing messages.\n    const messagesToUse = isFirstMountRef.current\n      ? options.initialMessages || []\n      : messagesRef.current\n\n    isFirstMountRef.current = false\n\n    // Build options with conditional spreads for fields whose source\n    // type is `T | undefined` but the ChatClient target uses a strict\n    // optional (`field?: T`) — `exactOptionalPropertyTypes` rejects\n    // assigning `undefined` to those, so we omit the key when absent.\n    const initialOptions = optionsRef.current\n    const transport = initialOptions.connection\n      ? { connection: initialOptions.connection }\n      : { fetcher: initialOptions.fetcher }\n\n    return new ChatClient<TTools, TContext>({\n      devtoolsBridgeFactory: createChatDevtoolsBridge,\n      ...transport,\n      id: clientId,\n      initialMessages: messagesToUse,\n      ...(initialOptions.body !== undefined && { body: initialOptions.body }),\n      ...(initialOptions.forwardedProps !== undefined && {\n        forwardedProps: initialOptions.forwardedProps,\n      }),\n      ...(initialOptions.context !== undefined && {\n        context: initialOptions.context,\n      }),\n      devtools: {\n        ...initialOptions.devtools,\n        framework: 'preact',\n        hookName: 'useChat',\n        outputKind: initialOptions.outputSchema ? 'structured' : 'chat',\n      },\n      // Wrap every callback so the latest options are read at call time.\n      // Capturing the function reference directly would freeze it to whatever\n      // the parent passed on the first render.\n      onResponse: (response) => optionsRef.current.onResponse?.(response),\n      onChunk: (chunk) => optionsRef.current.onChunk?.(chunk),\n      onFinish: (message) => {\n        optionsRef.current.onFinish?.(message)\n      },\n      onError: (err) => {\n        optionsRef.current.onError?.(err)\n      },\n      onCustomEvent: (eventType, data, context) =>\n        optionsRef.current.onCustomEvent?.(eventType, data, context),\n      ...(initialOptions.tools !== undefined && {\n        tools: initialOptions.tools,\n      }),\n      ...(options.streamProcessor !== undefined && {\n        streamProcessor: options.streamProcessor,\n      }),\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      onSubscriptionChange: (nextIsSubscribed: boolean) => {\n        setIsSubscribed(nextIsSubscribed)\n      },\n      onConnectionStatusChange: (nextStatus: ConnectionStatus) => {\n        setConnectionStatus(nextStatus)\n      },\n      onSessionGeneratingChange: (isGenerating: boolean) => {\n        setSessionGenerating(isGenerating)\n      },\n    })\n  }, [clientId])\n\n  // Sync body / forwardedProps changes to the client.\n  // Both populate the same wire payload; `forwardedProps` is preferred\n  // and `body` is deprecated but still supported.\n  useEffect(() => {\n    // Conditional spread: `updateOptions` declares strict-optional\n    // fields and rejects explicit `undefined` under EOPT.\n    client.updateOptions({\n      body: options.body,\n      ...(options.forwardedProps !== undefined && {\n        forwardedProps: options.forwardedProps,\n      }),\n      context: options.context,\n    })\n  }, [client, options.body, options.forwardedProps, options.context])\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 Preact state is in sync\n  useEffect(() => {\n    if (\n      options.initialMessages &&\n      options.initialMessages.length &&\n      !messages.length\n    ) {\n      client.setMessagesManually(options.initialMessages)\n    }\n  }, [])\n\n  useEffect(() => {\n    if (options.live) {\n      client.subscribe()\n    } else {\n      client.unsubscribe()\n    }\n  }, [client, options.live])\n\n  // Cleanup on unmount: stop any in-flight requests\n  // Note: We only cleanup when client changes or component unmounts.\n  // DO NOT include isLoading in dependencies - that would cause the cleanup\n  // to run when isLoading changes, aborting continuation requests.\n  useEffect(() => {\n    client.mountDevtools()\n\n    return () => {\n      // Subscribe/unsubscribe on `options.live` is owned by the dedicated\n      // effect above. This cleanup only fires on unmount or client swap,\n      // so read `live` through the ref to avoid disposing the client every\n      // time `live` toggles.\n      if (optionsRef.current.live) {\n        client.unsubscribe()\n      } else {\n        client.stop()\n      }\n      client.dispose()\n    }\n  }, [client])\n\n  // All callback options are read through optionsRef at call time, so fresh\n  // closures from each render are picked up without recreating the client.\n  const sendMessage = useCallback(\n    async (content: string | MultimodalContent) => {\n      await client.sendMessage(content)\n    },\n    [client],\n  )\n\n  const append = useCallback(\n    async (message: ModelMessage | UIMessage) => {\n      await client.append(message)\n    },\n    [client],\n  )\n\n  const reload = useCallback(async () => {\n    await client.reload()\n  }, [client])\n\n  const stop = useCallback(() => {\n    client.stop()\n  }, [client])\n\n  const clear = useCallback(() => {\n    client.clear()\n  }, [client])\n\n  const setMessagesManually = useCallback(\n    (newMessages: Array<UIMessage<TTools>>) => {\n      client.setMessagesManually(newMessages)\n    },\n    [client],\n  )\n\n  const addToolResult = useCallback(\n    async (result: {\n      toolCallId: string\n      tool: string\n      output: unknown\n      state?: 'output-available' | 'output-error'\n      errorText?: string\n    }) => {\n      await client.addToolResult(result)\n    },\n    [client],\n  )\n\n  const addToolApprovalResponse = useCallback(\n    async (response: { id: string; approved: boolean }) => {\n      await client.addToolApprovalResponse(response)\n    },\n    [client],\n  )\n\n  return {\n    messages,\n    sendMessage,\n    append,\n    reload,\n    stop,\n    isLoading,\n    error,\n    status,\n    isSubscribed,\n    connectionStatus,\n    sessionGenerating,\n    setMessages: setMessagesManually,\n    clear,\n    addToolResult,\n    addToolApprovalResponse,\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"use-chat.js","sources":["../../src/use-chat.ts"],"sourcesContent":["import { ChatClient } from '@tanstack/ai-client'\nimport { createChatDevtoolsBridge } from '@tanstack/ai-client/devtools'\nimport {\n  useCallback,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n} from 'preact/hooks'\nimport type {\n  ChatClientState,\n  ConnectionStatus,\n  InferredClientContext,\n} from '@tanstack/ai-client'\nimport type { AnyClientTool, ModelMessage } from '@tanstack/ai'\n\nimport type {\n  MultimodalContent,\n  UIMessage,\n  UseChatOptions,\n  UseChatReturn,\n} from './types'\n\nexport function useChat<\n  TTools extends ReadonlyArray<AnyClientTool> = any,\n  TContext = InferredClientContext<TTools>,\n>(options: UseChatOptions<TTools, TContext>): UseChatReturn<TTools> {\n  const hookId = useId()\n  const clientId = options.id || hookId\n\n  const [messages, setMessages] = useState<Array<UIMessage<TTools>>>(\n    options.initialMessages || [],\n  )\n  const [isLoading, setIsLoading] = useState(false)\n  const [error, setError] = useState<Error | undefined>(undefined)\n  const [status, setStatus] = useState<ChatClientState>('ready')\n  const [isSubscribed, setIsSubscribed] = useState(false)\n  const [connectionStatus, setConnectionStatus] =\n    useState<ConnectionStatus>('disconnected')\n  const [sessionGenerating, setSessionGenerating] = useState(false)\n\n  // Track current messages in a ref to preserve them when client is recreated\n  const messagesRef = useRef<Array<UIMessage<TTools>>>(\n    options.initialMessages || [],\n  )\n  const isFirstMountRef = useRef(true)\n  const activeClientRef = useRef<ChatClient | null>(null)\n  const cleanupInvalidationRef = useRef<ReturnType<typeof setTimeout> | null>(\n    null,\n  )\n  const optionsRef = useRef<UseChatOptions<TTools, TContext>>(options)\n\n  optionsRef.current = options\n\n  useEffect(() => {\n    messagesRef.current = messages\n  }, [messages])\n\n  const client = useMemo(() => {\n    const messagesToUse = options.initialMessages || []\n    isFirstMountRef.current = false\n\n    // Build options with conditional spreads for fields whose source\n    // type is `T | undefined` but the ChatClient target uses a strict\n    // optional (`field?: T`) — `exactOptionalPropertyTypes` rejects\n    // assigning `undefined` to those, so we omit the key when absent.\n    const initialOptions = optionsRef.current\n    const transport = initialOptions.connection\n      ? { connection: initialOptions.connection }\n      : { fetcher: initialOptions.fetcher }\n\n    const instance = new ChatClient<TTools, TContext>({\n      devtoolsBridgeFactory: createChatDevtoolsBridge,\n      ...transport,\n      id: clientId,\n      initialMessages: messagesToUse,\n      ...(initialOptions.body !== undefined && { body: initialOptions.body }),\n      ...(initialOptions.forwardedProps !== undefined && {\n        forwardedProps: initialOptions.forwardedProps,\n      }),\n      ...(initialOptions.persistence !== undefined && {\n        persistence: initialOptions.persistence,\n      }),\n      ...(initialOptions.context !== undefined && {\n        context: initialOptions.context,\n      }),\n      devtools: {\n        ...initialOptions.devtools,\n        framework: 'preact',\n        hookName: 'useChat',\n        outputKind: initialOptions.outputSchema ? 'structured' : 'chat',\n      },\n      // Wrap every callback so the latest options are read at call time.\n      // Capturing the function reference directly would freeze it to whatever\n      // the parent passed on the first render.\n      onResponse: (response) => {\n        if (activeClientRef.current !== instance) return\n        return optionsRef.current.onResponse?.(response)\n      },\n      onChunk: (chunk) => {\n        if (activeClientRef.current !== instance) return\n        optionsRef.current.onChunk?.(chunk)\n      },\n      onFinish: (message) => {\n        if (activeClientRef.current !== instance) return\n        optionsRef.current.onFinish?.(message)\n      },\n      onError: (err) => {\n        if (activeClientRef.current !== instance) return\n        optionsRef.current.onError?.(err)\n      },\n      onCustomEvent: (eventType, data, context) => {\n        if (activeClientRef.current !== instance) return\n        optionsRef.current.onCustomEvent?.(eventType, data, context)\n      },\n      ...(initialOptions.tools !== undefined && {\n        tools: initialOptions.tools,\n      }),\n      ...(options.streamProcessor !== undefined && {\n        streamProcessor: options.streamProcessor,\n      }),\n      onMessagesChange: (newMessages: Array<UIMessage<TTools>>) => {\n        if (activeClientRef.current !== instance) return\n        setMessages(newMessages)\n      },\n      onLoadingChange: (newIsLoading: boolean) => {\n        if (activeClientRef.current !== instance) return\n        setIsLoading(newIsLoading)\n      },\n      onStatusChange: (newStatus: ChatClientState) => {\n        if (activeClientRef.current !== instance) return\n        setStatus(newStatus)\n      },\n      onErrorChange: (newError: Error | undefined) => {\n        if (activeClientRef.current !== instance) return\n        setError(newError)\n      },\n      onSubscriptionChange: (nextIsSubscribed: boolean) => {\n        if (activeClientRef.current !== instance) return\n        setIsSubscribed(nextIsSubscribed)\n      },\n      onConnectionStatusChange: (nextStatus: ConnectionStatus) => {\n        if (activeClientRef.current !== instance) return\n        setConnectionStatus(nextStatus)\n      },\n      onSessionGeneratingChange: (isGenerating: boolean) => {\n        if (activeClientRef.current !== instance) return\n        setSessionGenerating(isGenerating)\n      },\n    })\n    activeClientRef.current = instance\n    return instance\n  }, [clientId])\n\n  useEffect(() => {\n    const clientMessages = client.getMessages()\n    if (clientMessages !== messagesRef.current) {\n      setMessages(clientMessages)\n    }\n  }, [client])\n\n  // Sync body / forwardedProps changes to the client.\n  // Both populate the same wire payload; `forwardedProps` is preferred\n  // and `body` is deprecated but still supported.\n  useEffect(() => {\n    // Conditional spread: `updateOptions` declares strict-optional\n    // fields and rejects explicit `undefined` under EOPT.\n    client.updateOptions({\n      body: options.body,\n      ...(options.forwardedProps !== undefined && {\n        forwardedProps: options.forwardedProps,\n      }),\n      context: options.context,\n    })\n  }, [client, options.body, options.forwardedProps, options.context])\n\n  useEffect(() => {\n    if (options.live) {\n      client.subscribe()\n    } else {\n      client.unsubscribe()\n    }\n  }, [client, options.live])\n\n  // Cleanup on unmount: stop any in-flight requests\n  // Note: We only cleanup when client changes or component unmounts.\n  // DO NOT include isLoading in dependencies - that would cause the cleanup\n  // to run when isLoading changes, aborting continuation requests.\n  useEffect(() => {\n    if (cleanupInvalidationRef.current) {\n      clearTimeout(cleanupInvalidationRef.current)\n      cleanupInvalidationRef.current = null\n    }\n    activeClientRef.current = client\n    client.mountDevtools()\n\n    return () => {\n      cleanupInvalidationRef.current = setTimeout(() => {\n        if (activeClientRef.current === client) {\n          activeClientRef.current = null\n        }\n        cleanupInvalidationRef.current = null\n      }, 0)\n      // Subscribe/unsubscribe on `options.live` is owned by the dedicated\n      // effect above. This cleanup only fires on unmount or client swap,\n      // so read `live` through the ref to avoid disposing the client every\n      // time `live` toggles.\n      if (optionsRef.current.live) {\n        client.unsubscribe()\n      } else {\n        client.stop()\n      }\n      client.dispose()\n    }\n  }, [client])\n\n  // All callback options are read through optionsRef at call time, so fresh\n  // closures from each render are picked up without recreating the client.\n  const sendMessage = useCallback(\n    async (content: string | MultimodalContent) => {\n      await client.sendMessage(content)\n    },\n    [client],\n  )\n\n  const append = useCallback(\n    async (message: ModelMessage | UIMessage) => {\n      await client.append(message)\n    },\n    [client],\n  )\n\n  const reload = useCallback(async () => {\n    await client.reload()\n  }, [client])\n\n  const stop = useCallback(() => {\n    client.stop()\n  }, [client])\n\n  const clear = useCallback(() => {\n    client.clear()\n  }, [client])\n\n  const setMessagesManually = useCallback(\n    (newMessages: Array<UIMessage<TTools>>) => {\n      client.setMessagesManually(newMessages)\n    },\n    [client],\n  )\n\n  const addToolResult = useCallback(\n    async (result: {\n      toolCallId: string\n      tool: string\n      output: unknown\n      state?: 'output-available' | 'output-error'\n      errorText?: string\n    }) => {\n      await client.addToolResult(result)\n    },\n    [client],\n  )\n\n  const addToolApprovalResponse = useCallback(\n    async (response: { id: string; approved: boolean }) => {\n      await client.addToolApprovalResponse(response)\n    },\n    [client],\n  )\n\n  const renderedMessages = client.getMessages()\n\n  return {\n    messages: renderedMessages,\n    sendMessage,\n    append,\n    reload,\n    stop,\n    isLoading,\n    error,\n    status,\n    isSubscribed,\n    connectionStatus,\n    sessionGenerating,\n    setMessages: setMessagesManually,\n    clear,\n    addToolResult,\n    addToolApprovalResponse,\n  }\n}\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/ai-preact",
-  "version": "0.8.2",
+  "version": "0.9.2",
   "description": "Preact hooks for TanStack AI streaming chat and typed messages.",
   "author": "",
   "license": "MIT",
@@ -34,7 +34,7 @@
     "tool-calling"
   ],
   "dependencies": {
-    "@tanstack/ai-client": "0.15.2"
+    "@tanstack/ai-client": "0.16.2"
   },
   "devDependencies": {
     "@testing-library/preact": "^3.2.4",
@@ -45,7 +45,7 @@
   },
   "peerDependencies": {
     "preact": ">=10.11.0",
-    "@tanstack/ai": "^0.26.0"
+    "@tanstack/ai": "^0.27.0"
   },
   "scripts": {
     "clean": "premove ./build ./dist",

package/src/use-chat.ts

@@ -45,6 +45,10 @@ export function useChat<
     options.initialMessages || [],
   )
   const isFirstMountRef = useRef(true)
+  const activeClientRef = useRef<ChatClient | null>(null)
+  const cleanupInvalidationRef = useRef<ReturnType<typeof setTimeout> | null>(
+    null,
+  )
   const optionsRef = useRef<UseChatOptions<TTools, TContext>>(options)
 
   optionsRef.current = options
@@ -54,11 +58,7 @@ export function useChat<
   }, [messages])
 
   const client = useMemo(() => {
-    // On first mount, use initialMessages. On subsequent recreations, preserve existing messages.
-    const messagesToUse = isFirstMountRef.current
-      ? options.initialMessages || []
-      : messagesRef.current
-
+    const messagesToUse = options.initialMessages || []
     isFirstMountRef.current = false
 
     // Build options with conditional spreads for fields whose source
@@ -70,7 +70,7 @@ export function useChat<
       ? { connection: initialOptions.connection }
       : { fetcher: initialOptions.fetcher }
 
-    return new ChatClient<TTools, TContext>({
+    const instance = new ChatClient<TTools, TContext>({
       devtoolsBridgeFactory: createChatDevtoolsBridge,
       ...transport,
       id: clientId,
@@ -79,6 +79,9 @@ export function useChat<
       ...(initialOptions.forwardedProps !== undefined && {
         forwardedProps: initialOptions.forwardedProps,
       }),
+      ...(initialOptions.persistence !== undefined && {
+        persistence: initialOptions.persistence,
+      }),
       ...(initialOptions.context !== undefined && {
         context: initialOptions.context,
       }),
@@ -91,16 +94,26 @@ export function useChat<
       // Wrap every callback so the latest options are read at call time.
       // Capturing the function reference directly would freeze it to whatever
       // the parent passed on the first render.
-      onResponse: (response) => optionsRef.current.onResponse?.(response),
-      onChunk: (chunk) => optionsRef.current.onChunk?.(chunk),
+      onResponse: (response) => {
+        if (activeClientRef.current !== instance) return
+        return optionsRef.current.onResponse?.(response)
+      },
+      onChunk: (chunk) => {
+        if (activeClientRef.current !== instance) return
+        optionsRef.current.onChunk?.(chunk)
+      },
       onFinish: (message) => {
+        if (activeClientRef.current !== instance) return
         optionsRef.current.onFinish?.(message)
       },
       onError: (err) => {
+        if (activeClientRef.current !== instance) return
         optionsRef.current.onError?.(err)
       },
-      onCustomEvent: (eventType, data, context) =>
-        optionsRef.current.onCustomEvent?.(eventType, data, context),
+      onCustomEvent: (eventType, data, context) => {
+        if (activeClientRef.current !== instance) return
+        optionsRef.current.onCustomEvent?.(eventType, data, context)
+      },
       ...(initialOptions.tools !== undefined && {
         tools: initialOptions.tools,
       }),
@@ -108,29 +121,45 @@ export function useChat<
         streamProcessor: options.streamProcessor,
       }),
       onMessagesChange: (newMessages: Array<UIMessage<TTools>>) => {
+        if (activeClientRef.current !== instance) return
         setMessages(newMessages)
       },
       onLoadingChange: (newIsLoading: boolean) => {
+        if (activeClientRef.current !== instance) return
         setIsLoading(newIsLoading)
       },
       onStatusChange: (newStatus: ChatClientState) => {
+        if (activeClientRef.current !== instance) return
         setStatus(newStatus)
       },
       onErrorChange: (newError: Error | undefined) => {
+        if (activeClientRef.current !== instance) return
         setError(newError)
       },
       onSubscriptionChange: (nextIsSubscribed: boolean) => {
+        if (activeClientRef.current !== instance) return
         setIsSubscribed(nextIsSubscribed)
       },
       onConnectionStatusChange: (nextStatus: ConnectionStatus) => {
+        if (activeClientRef.current !== instance) return
         setConnectionStatus(nextStatus)
       },
       onSessionGeneratingChange: (isGenerating: boolean) => {
+        if (activeClientRef.current !== instance) return
         setSessionGenerating(isGenerating)
       },
     })
+    activeClientRef.current = instance
+    return instance
   }, [clientId])
 
+  useEffect(() => {
+    const clientMessages = client.getMessages()
+    if (clientMessages !== messagesRef.current) {
+      setMessages(clientMessages)
+    }
+  }, [client])
+
   // Sync body / forwardedProps changes to the client.
   // Both populate the same wire payload; `forwardedProps` is preferred
   // and `body` is deprecated but still supported.
@@ -146,19 +175,6 @@ export function useChat<
     })
   }, [client, options.body, options.forwardedProps, options.context])
 
-  // Sync initial messages on mount only
-  // Note: initialMessages are passed to ChatClient constructor, but we also
-  // set them here to ensure Preact state is in sync
-  useEffect(() => {
-    if (
-      options.initialMessages &&
-      options.initialMessages.length &&
-      !messages.length
-    ) {
-      client.setMessagesManually(options.initialMessages)
-    }
-  }, [])
-
   useEffect(() => {
     if (options.live) {
       client.subscribe()
@@ -172,9 +188,20 @@ export function useChat<
   // DO NOT include isLoading in dependencies - that would cause the cleanup
   // to run when isLoading changes, aborting continuation requests.
   useEffect(() => {
+    if (cleanupInvalidationRef.current) {
+      clearTimeout(cleanupInvalidationRef.current)
+      cleanupInvalidationRef.current = null
+    }
+    activeClientRef.current = client
     client.mountDevtools()
 
     return () => {
+      cleanupInvalidationRef.current = setTimeout(() => {
+        if (activeClientRef.current === client) {
+          activeClientRef.current = null
+        }
+        cleanupInvalidationRef.current = null
+      }, 0)
       // Subscribe/unsubscribe on `options.live` is owned by the dedicated
       // effect above. This cleanup only fires on unmount or client swap,
       // so read `live` through the ref to avoid disposing the client every
@@ -243,8 +270,10 @@ export function useChat<
     [client],
   )
 
+  const renderedMessages = client.getMessages()
+
   return {
-    messages,
+    messages: renderedMessages,
     sendMessage,
     append,
     reload,