@tanstack/ai-react 0.18.1 → 0.19.1

package/dist/esm/use-chat.js

@@ -1,279 +1,334 @@
 import { ChatClient } from "@tanstack/ai-client";
 import { createChatDevtoolsBridge } from "@tanstack/ai-client/devtools";
-import { useId, useState, useRef, useMemo, useEffect, useCallback } from "react";
+import { useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
+//#region src/use-chat.ts
+var EMPTY_INTERRUPTS = Object.freeze([]);
+var EMPTY_INTERRUPT_ERRORS = Object.freeze([]);
 function useChat(options) {
-  const hookId = useId();
-  const clientId = options.id || hookId;
-  const [messages, setMessages] = useState(
-    options.initialMessages || []
-  );
-  const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState(void 0);
-  const [status, setStatus] = useState("ready");
-  const [isSubscribed, setIsSubscribed] = useState(false);
-  const [connectionStatus, setConnectionStatus] = useState("disconnected");
-  const [sessionGenerating, setSessionGenerating] = useState(false);
-  const [queue, setQueue] = useState([]);
-  const messagesRef = useRef(
-    options.initialMessages || []
-  );
-  const isFirstMountRef = useRef(true);
-  const activeClientRef = useRef(null);
-  const cleanupInvalidationRef = useRef(
-    null
-  );
-  messagesRef.current = messages;
-  const optionsRef = useRef(options);
-  optionsRef.current = options;
-  const client = useMemo(() => {
-    const messagesToUse = options.initialMessages || [];
-    isFirstMountRef.current = false;
-    const initialOptions = optionsRef.current;
-    const transport = initialOptions.connection ? { connection: initialOptions.connection } : { fetcher: initialOptions.fetcher };
-    const instance = new ChatClient({
-      devtoolsBridgeFactory: createChatDevtoolsBridge,
-      ...transport,
-      id: clientId,
-      initialMessages: messagesToUse,
-      ...initialOptions.body !== void 0 && { body: initialOptions.body },
-      ...initialOptions.threadId !== void 0 && {
-        threadId: initialOptions.threadId
-      },
-      ...initialOptions.forwardedProps !== void 0 && {
-        forwardedProps: initialOptions.forwardedProps
-      },
-      ...initialOptions.persistence !== void 0 && {
-        persistence: initialOptions.persistence
-      },
-      ...initialOptions.context !== void 0 && {
-        context: initialOptions.context
-      },
-      devtools: {
-        ...initialOptions.devtools,
-        framework: "react",
-        hookName: "useChat",
-        outputKind: initialOptions.outputSchema ? "structured" : "chat"
-      },
-      onResponse: (response) => {
-        if (activeClientRef.current !== instance) return;
-        void 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: (error2) => {
-        if (activeClientRef.current !== instance) return;
-        optionsRef.current.onError?.(error2);
-      },
-      ...initialOptions.tools !== void 0 && {
-        tools: initialOptions.tools
-      },
-      onCustomEvent: (eventType, data, context) => {
-        if (activeClientRef.current !== instance) return;
-        optionsRef.current.onCustomEvent?.(eventType, data, context);
-      },
-      ...options.streamProcessor !== void 0 && {
-        streamProcessor: options.streamProcessor
-      },
-      onMessagesChange: (newMessages) => {
-        if (activeClientRef.current !== instance) return;
-        setMessages(newMessages);
-      },
-      onLoadingChange: (newIsLoading) => {
-        if (activeClientRef.current !== instance) return;
-        setIsLoading(newIsLoading);
-      },
-      onErrorChange: (newError) => {
-        if (activeClientRef.current !== instance) return;
-        setError(newError);
-      },
-      onStatusChange: (status2) => {
-        if (activeClientRef.current !== instance) return;
-        setStatus(status2);
-      },
-      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);
-      },
-      ...optionsRef.current.queue !== void 0 && {
-        queue: optionsRef.current.queue
-      },
-      onQueueChange: (nextQueue) => {
-        if (activeClientRef.current !== instance) return;
-        setQueue(nextQueue);
-      }
-    });
-    activeClientRef.current = instance;
-    return instance;
-  }, [clientId]);
-  useEffect(() => {
-    const clientMessages = client.getMessages();
-    if (clientMessages !== messagesRef.current) {
-      setMessages(clientMessages);
-    }
-  }, [client]);
-  useEffect(() => {
-    client.updateOptions({ body: options.body });
-  }, [client, options.body]);
-  useEffect(() => {
-    if (options.forwardedProps !== void 0) {
-      client.updateOptions({ forwardedProps: options.forwardedProps });
-    }
-  }, [client, options.forwardedProps]);
-  useEffect(() => {
-    if (options.tools !== void 0) {
-      client.updateOptions({ tools: options.tools });
-    }
-  }, [client, options.tools]);
-  useEffect(() => {
-    client.updateOptions({ context: options.context });
-  }, [client, options.context]);
-  useEffect(() => {
-    if (options.queue !== void 0) {
-      client.updateOptions({ queue: options.queue });
-    }
-  }, [client, options.queue]);
-  useEffect(() => {
-    if (options.live) {
-      client.subscribe();
-    } else {
-      client.unsubscribe();
-    }
-  }, [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 {
-        client.stop();
-      }
-      client.dispose();
-    };
-  }, [client]);
-  const sendMessage = useCallback(
-    async (content, sendOptions) => {
-      await client.sendMessage(content, void 0, sendOptions);
-    },
-    [client]
-  );
-  const cancelQueued = useCallback(
-    (id) => {
-      client.cancelQueued(id);
-    },
-    [client]
-  );
-  const append = useCallback(
-    async (message) => {
-      await client.append(message);
-    },
-    [client]
-  );
-  const reload = useCallback(async () => {
-    await client.reload();
-  }, [client]);
-  const stop = useCallback(() => {
-    client.stop();
-  }, [client]);
-  const clear = useCallback(() => {
-    client.clear();
-  }, [client]);
-  const setMessagesManually = useCallback(
-    (newMessages) => {
-      client.setMessagesManually(newMessages);
-    },
-    [client]
-  );
-  const addToolResult = useCallback(
-    async (result) => {
-      await client.addToolResult(result);
-    },
-    [client]
-  );
-  const addToolApprovalResponse = useCallback(
-    async (response) => {
-      await client.addToolApprovalResponse(response);
-    },
-    [client]
-  );
-  const renderedMessages = client.getMessages();
-  const activeStructuredPart = useMemo(() => {
-    let lastUserIndex = -1;
-    for (let i = renderedMessages.length - 1; i >= 0; i--) {
-      if (renderedMessages[i]?.role === "user") {
-        lastUserIndex = i;
-        break;
-      }
-    }
-    if (lastUserIndex === -1) return null;
-    for (let i = renderedMessages.length - 1; i > lastUserIndex; i--) {
-      const m = renderedMessages[i];
-      if (m?.role !== "assistant") continue;
-      const part = m.parts.find(
-        (p) => p.type === "structured-output"
-      );
-      if (part) return part;
-    }
-    return null;
-  }, [renderedMessages]);
-  const partial = useMemo(() => {
-    if (!activeStructuredPart) return {};
-    const v = activeStructuredPart.partial ?? activeStructuredPart.data;
-    return v ?? {};
-  }, [activeStructuredPart]);
-  const final = useMemo(() => {
-    if (!activeStructuredPart || activeStructuredPart.status !== "complete") {
-      return null;
-    }
-    return activeStructuredPart.data;
-  }, [activeStructuredPart]);
-  return {
-    messages: renderedMessages,
-    sendMessage,
-    append,
-    reload,
-    stop,
-    isLoading,
-    error,
-    status,
-    isSubscribed,
-    connectionStatus,
-    sessionGenerating,
-    setMessages: setMessagesManually,
-    clear,
-    addToolResult,
-    addToolApprovalResponse,
-    queue,
-    cancelQueued,
-    partial,
-    final
-  };
+	const hookId = useId();
+	const clientId = options.threadId ?? hookId;
+	const [messages, setMessages] = useState(options.initialMessages || []);
+	const [isLoading, setIsLoading] = useState(false);
+	const [error, setError] = useState(void 0);
+	const [status, setStatus] = useState("ready");
+	const [isSubscribed, setIsSubscribed] = useState(false);
+	const [connectionStatus, setConnectionStatus] = useState("disconnected");
+	const [sessionGenerating, setSessionGenerating] = useState(false);
+	const [queue, setQueue] = useState([]);
+	const [runId, setRunId] = useState(null);
+	const [interruptState, setInterruptState] = useState(() => ({
+		interrupts: EMPTY_INTERRUPTS,
+		pendingInterrupts: EMPTY_INTERRUPTS,
+		interruptErrors: EMPTY_INTERRUPT_ERRORS,
+		resuming: false
+	}));
+	const messagesRef = useRef(options.initialMessages || []);
+	const isFirstMountRef = useRef(true);
+	const subscribedRef = useRef(false);
+	const activeClientRef = useRef(null);
+	const cleanupInvalidationRef = useRef(null);
+	const cleanupDisposalRef = useRef(null);
+	messagesRef.current = messages;
+	const optionsRef = useRef(options);
+	optionsRef.current = options;
+	const syncResumeState = useCallback((target) => {
+		if (!target) return;
+		setRunId(target.getCurrentRunId());
+		setInterruptState(target.getInterruptState());
+	}, []);
+	const client = useMemo(() => {
+		const messagesToUse = options.initialMessages || [];
+		isFirstMountRef.current = false;
+		const initialOptions = optionsRef.current;
+		const transport = initialOptions.connection ? { connection: initialOptions.connection } : { fetcher: initialOptions.fetcher };
+		const instanceHolder = { current: void 0 };
+		const getActiveInstance = () => {
+			const currentInstance = instanceHolder.current;
+			if (!currentInstance || activeClientRef.current !== currentInstance) return;
+			return currentInstance;
+		};
+		const pendingInitializationErrors = [];
+		const instance = new ChatClient({
+			devtoolsBridgeFactory: createChatDevtoolsBridge,
+			...transport,
+			initialMessages: messagesToUse,
+			...initialOptions.body !== void 0 && { body: initialOptions.body },
+			...initialOptions.threadId !== void 0 && { threadId: initialOptions.threadId },
+			...initialOptions.forwardedProps !== void 0 && { forwardedProps: initialOptions.forwardedProps },
+			...initialOptions.persistence !== void 0 && { persistence: initialOptions.persistence },
+			...initialOptions.initialResumeSnapshot !== void 0 && { initialResumeSnapshot: initialOptions.initialResumeSnapshot },
+			...initialOptions.context !== void 0 && { context: initialOptions.context },
+			devtools: {
+				...initialOptions.devtools,
+				framework: "react",
+				hookName: "useChat",
+				outputKind: initialOptions.outputSchema ? "structured" : "chat"
+			},
+			onResponse: (response) => {
+				if (!getActiveInstance()) return;
+				optionsRef.current.onResponse?.(response);
+			},
+			onChunk: (chunk) => {
+				if (!getActiveInstance()) return;
+				optionsRef.current.onChunk?.(chunk);
+			},
+			onFinish: (message) => {
+				if (!getActiveInstance()) return;
+				optionsRef.current.onFinish?.(message);
+			},
+			onError: (error) => {
+				const currentInstance = instanceHolder.current;
+				if (!currentInstance) {
+					pendingInitializationErrors.push(error);
+					return;
+				}
+				if (activeClientRef.current !== currentInstance) return;
+				optionsRef.current.onError?.(error);
+			},
+			...initialOptions.tools !== void 0 && { tools: initialOptions.tools },
+			onCustomEvent: (eventType, data, context) => {
+				if (!getActiveInstance()) return;
+				optionsRef.current.onCustomEvent?.(eventType, data, context);
+			},
+			...options.streamProcessor !== void 0 && { streamProcessor: options.streamProcessor },
+			onMessagesChange: (newMessages) => {
+				if (!getActiveInstance()) return;
+				setMessages(newMessages);
+			},
+			onLoadingChange: (newIsLoading) => {
+				const currentInstance = getActiveInstance();
+				if (!currentInstance) return;
+				setIsLoading(newIsLoading);
+				syncResumeState(currentInstance);
+			},
+			onErrorChange: (newError) => {
+				if (!getActiveInstance()) return;
+				setError(newError);
+			},
+			onStatusChange: (status) => {
+				if (!getActiveInstance()) return;
+				setStatus(status);
+			},
+			onSubscriptionChange: (nextIsSubscribed) => {
+				if (!getActiveInstance()) return;
+				setIsSubscribed(nextIsSubscribed);
+			},
+			onConnectionStatusChange: (nextStatus) => {
+				if (!getActiveInstance()) return;
+				setConnectionStatus(nextStatus);
+			},
+			onSessionGeneratingChange: (isGenerating) => {
+				if (!getActiveInstance()) return;
+				setSessionGenerating(isGenerating);
+			},
+			...optionsRef.current.queue !== void 0 && { queue: optionsRef.current.queue },
+			onQueueChange: (nextQueue) => {
+				if (activeClientRef.current !== instance) return;
+				setQueue(nextQueue);
+			},
+			onRunIdChange: (nextRunId) => {
+				if (!getActiveInstance()) return;
+				setRunId(nextRunId);
+			},
+			onResumeStateChange: (_nextResumeState, nextPendingInterrupts) => {
+				if (!getActiveInstance()) return;
+				setInterruptState((current) => ({
+					...current,
+					interrupts: nextPendingInterrupts,
+					pendingInterrupts: nextPendingInterrupts
+				}));
+			},
+			onInterruptStateChange: (nextInterruptState) => {
+				if (!getActiveInstance()) return;
+				setInterruptState(nextInterruptState);
+				optionsRef.current.onInterruptStateChange?.(nextInterruptState);
+			}
+		});
+		instanceHolder.current = instance;
+		activeClientRef.current = instance;
+		for (const error of pendingInitializationErrors) {
+			if (activeClientRef.current !== instance) break;
+			optionsRef.current.onError?.(error);
+		}
+		return instance;
+	}, [clientId, syncResumeState]);
+	useEffect(() => {
+		const clientMessages = client.getMessages();
+		if (clientMessages !== messagesRef.current) setMessages(clientMessages);
+	}, [client]);
+	useEffect(() => {
+		client.updateOptions({ body: options.body });
+	}, [client, options.body]);
+	useEffect(() => {
+		if (options.forwardedProps !== void 0) client.updateOptions({ forwardedProps: options.forwardedProps });
+	}, [client, options.forwardedProps]);
+	useEffect(() => {
+		if (options.tools !== void 0) client.updateOptions({ tools: options.tools });
+	}, [client, options.tools]);
+	useEffect(() => {
+		client.updateOptions({ context: options.context });
+	}, [client, options.context]);
+	useEffect(() => {
+		if (options.queue !== void 0) client.updateOptions({ queue: options.queue });
+	}, [client, options.queue]);
+	useEffect(() => {
+		if (options.live) {
+			client.subscribe();
+			subscribedRef.current = true;
+		} else if (subscribedRef.current) {
+			client.unsubscribe();
+			subscribedRef.current = false;
+		}
+	}, [client, options.live]);
+	useEffect(() => {
+		client.attach();
+		return () => {
+			client.detach();
+		};
+	}, [client]);
+	useEffect(() => {
+		if (cleanupDisposalRef.current?.client === client) {
+			clearTimeout(cleanupDisposalRef.current.timeout);
+			cleanupDisposalRef.current = null;
+		}
+		if (cleanupInvalidationRef.current) {
+			clearTimeout(cleanupInvalidationRef.current);
+			cleanupInvalidationRef.current = null;
+		}
+		activeClientRef.current = client;
+		client.mountDevtools();
+		syncResumeState(client);
+		return () => {
+			cleanupInvalidationRef.current = setTimeout(() => {
+				if (activeClientRef.current === client) activeClientRef.current = null;
+				cleanupInvalidationRef.current = null;
+			}, 0);
+			const disposal = {
+				client,
+				timeout: setTimeout(() => {
+					if (optionsRef.current.live) client.unsubscribe();
+					else client.stop();
+					client.dispose();
+					if (cleanupDisposalRef.current === disposal) cleanupDisposalRef.current = null;
+				}, 0)
+			};
+			cleanupDisposalRef.current = disposal;
+		};
+	}, [client, syncResumeState]);
+	const sendMessage = useCallback(async (content, sendOptions) => {
+		try {
+			await client.sendMessage(content, void 0, sendOptions);
+		} finally {
+			syncResumeState(client);
+		}
+	}, [client, syncResumeState]);
+	const cancelQueued = useCallback((id) => {
+		client.cancelQueued(id);
+	}, [client, syncResumeState]);
+	const append = useCallback(async (message) => {
+		try {
+			await client.append(message);
+		} finally {
+			syncResumeState(client);
+		}
+	}, [client, syncResumeState]);
+	const reload = useCallback(async () => {
+		try {
+			await client.reload();
+		} finally {
+			syncResumeState(client);
+		}
+	}, [client, syncResumeState]);
+	const stop = useCallback(() => {
+		client.stop();
+	}, [client]);
+	const clear = useCallback(() => {
+		client.clear();
+		syncResumeState(client);
+	}, [client, syncResumeState]);
+	const setMessagesManually = useCallback((newMessages) => {
+		client.setMessagesManually(newMessages);
+	}, [client]);
+	const addToolResult = useCallback(async (result) => {
+		await client.addToolResult(result);
+	}, [client]);
+	const addToolApprovalResponse = useCallback(async (response) => {
+		await client.addToolApprovalResponse(response);
+		syncResumeState(client);
+	}, [client, syncResumeState]);
+	const resumeInterrupts = useCallback(async (resumeItems, state) => {
+		const result = await client.resumeInterrupts(resumeItems, state ?? void 0);
+		syncResumeState(client);
+		return result;
+	}, [client, syncResumeState]);
+	const resolveInterrupts = useCallback((resolution) => {
+		if (typeof resolution === "boolean") client.resolveInterrupts(resolution);
+		else client.resolveInterrupts(resolution);
+	}, [client]);
+	const cancelInterrupts = useCallback(() => {
+		client.cancelInterrupts();
+	}, [client]);
+	const retryInterrupts = useCallback(() => {
+		client.retryInterrupts();
+	}, [client]);
+	const resumeInterruptsUnsafe = useCallback((resumeItems, state) => client.resumeInterruptsUnsafe(resumeItems, state), [client]);
+	const renderedMessages = client.getMessages();
+	const activeStructuredPart = useMemo(() => {
+		let lastUserIndex = -1;
+		for (let i = renderedMessages.length - 1; i >= 0; i--) if (renderedMessages[i]?.role === "user") {
+			lastUserIndex = i;
+			break;
+		}
+		if (lastUserIndex === -1) return null;
+		for (let i = renderedMessages.length - 1; i > lastUserIndex; i--) {
+			const m = renderedMessages[i];
+			if (m?.role !== "assistant") continue;
+			const part = m.parts.find((p) => p.type === "structured-output");
+			if (part) return part;
+		}
+		return null;
+	}, [renderedMessages]);
+	const partial = useMemo(() => {
+		if (!activeStructuredPart) return {};
+		return activeStructuredPart.partial ?? activeStructuredPart.data ?? {};
+	}, [activeStructuredPart]);
+	const final = useMemo(() => {
+		if (!activeStructuredPart || activeStructuredPart.status !== "complete") return null;
+		return activeStructuredPart.data;
+	}, [activeStructuredPart]);
+	return {
+		messages: renderedMessages,
+		sendMessage,
+		append,
+		reload,
+		stop,
+		isLoading,
+		error,
+		status,
+		isSubscribed,
+		connectionStatus,
+		sessionGenerating,
+		setMessages: setMessagesManually,
+		clear,
+		addToolResult,
+		addToolApprovalResponse,
+		queue,
+		cancelQueued,
+		runId,
+		interrupts: interruptState.interrupts,
+		pendingInterrupts: interruptState.pendingInterrupts,
+		interruptErrors: interruptState.interruptErrors,
+		resuming: interruptState.resuming,
+		resolveInterrupts,
+		cancelInterrupts,
+		retryInterrupts,
+		resumeInterruptsUnsafe,
+		resumeInterrupts,
+		partial,
+		final
+	};
 }
-export {
-  useChat
-};
-//# sourceMappingURL=use-chat.js.map
+//#endregion
+export { useChat };
+
+//# sourceMappingURL=use-chat.js.map