@copilotkit/react-core 1.59.1 → 1.59.3

package/dist/{copilotkit-DKPrBplZ.cjs → copilotkit-DhONbYmz.cjs}

@@ -794,7 +794,7 @@ function CopilotChatInput({ mode = "input", onSubmitMessage, onStop, isRunning =
 		}
 		if (e.key === "Enter" && !e.shiftKey) {
 			e.preventDefault();
-			if (isProcessing) onStop?.();
+			if (isProcessing && !canSend) onStop?.();
 			else send();
 		}
 	};
@@ -1532,6 +1532,47 @@ function useRenderTool(config, deps) {
 //#endregion
 //#region src/v2/hooks/use-default-render-tool.tsx
 /**
+* Module-level dedup set so an unknown status value only emits a console
+* warning the FIRST time we encounter it. Otherwise a stuck/unmapped status
+* would log on every re-render (potentially many per second).
+*/
+const warnedUnknownStatuses = /* @__PURE__ */ new Set();
+/**
+* Map a {@link ToolCallStatus} enum value to the documented string-union
+* status the {@link DefaultRenderProps} contract exposes. Unknown / future
+* enum members log a warning (once per distinct value) and fall back to
+* `"inProgress"`.
+*/
+function mapToolCallStatus(status) {
+	switch (status) {
+		case _copilotkit_core.ToolCallStatus.Complete: return "complete";
+		case _copilotkit_core.ToolCallStatus.Executing: return "executing";
+		case _copilotkit_core.ToolCallStatus.InProgress: return "inProgress";
+		default: {
+			const key = String(status);
+			if (!warnedUnknownStatuses.has(key)) {
+				warnedUnknownStatuses.add(key);
+				console.warn(`[CopilotKit] Unknown ToolCallStatus "${key}" in default tool-call renderer; falling back to "inProgress".`);
+			}
+			return "inProgress";
+		}
+	}
+}
+/**
+* Convert the framework-internal renderer props (`args`, enum status) into
+* the documented {@link DefaultRenderProps} shape (`parameters`, string-union
+* status) so a user `config.render` always sees the documented contract.
+*/
+function adaptRendererProps(props) {
+	return {
+		name: props.name,
+		toolCallId: props.toolCallId,
+		parameters: props.args,
+		status: mapToolCallStatus(props.status),
+		result: props.result
+	};
+}
+/**
 * Registers a wildcard (`"*"`) tool-call renderer via `useRenderTool`.
 *
 * - Call with no config to use CopilotKit's built-in default tool-call card.
@@ -1568,16 +1609,33 @@ function useRenderTool(config, deps) {
 * ```
 */
 function useDefaultRenderTool(config, deps) {
+	const userRender = config?.render;
 	useRenderTool({
 		name: "*",
-		render: config?.render ?? DefaultToolCallRenderer
+		render: userRender ? (raw) => userRender(adaptRendererProps(raw)) : (raw) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DefaultToolCallRenderer, { ...adaptRendererProps(raw) })
 	}, deps);
 }
-function DefaultToolCallRenderer({ name, parameters, status, result }) {
+/**
+* Guarded JSON.stringify used inside the expanded `<pre>` blocks. A circular
+* reference would otherwise crash the entire React tree on render.
+*/
+function safeStringifyForPre(value) {
+	try {
+		return JSON.stringify(value, null, 2);
+	} catch (err) {
+		console.warn("[CopilotKit] Failed to JSON.stringify tool-call payload for default renderer; falling back to String():", err);
+		try {
+			return String(value);
+		} catch (innerErr) {
+			console.warn("[CopilotKit] safeStringifyForPre: value could not be stringified:", innerErr);
+			return "[unserializable]";
+		}
+	}
+}
+function DefaultToolCallRenderer({ name, toolCallId, parameters, status, result }) {
 	const [isExpanded, setIsExpanded] = (0, react.useState)(false);
-	const statusString = String(status);
-	const isActive = statusString === "inProgress" || statusString === "executing";
-	const isComplete = statusString === "complete";
+	const isActive = status === "inProgress" || status === "executing";
+	const isComplete = status === "complete";
 	const statusLabel = isActive ? "Running" : isComplete ? "Done" : status;
 	const dotColor = isActive ? "#f59e0b" : isComplete ? "#10b981" : "#a1a1aa";
 	const badgeBg = isActive ? "#fef3c7" : isComplete ? "#d1fae5" : "#f4f4f5";
@@ -1585,7 +1643,8 @@ function DefaultToolCallRenderer({ name, parameters, status, result }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		"data-testid": "copilot-tool-render",
 		"data-tool-name": name,
-		"data-status": statusString,
+		"data-tool-call-id": toolCallId,
+		"data-status": status,
 		"data-args": safeStringifyForAttr(parameters),
 		"data-result": safeStringifyForAttr(result),
 		style: {
@@ -1599,7 +1658,9 @@ function DefaultToolCallRenderer({ name, parameters, status, result }) {
 				backgroundColor: "#fafafa",
 				padding: "14px 16px"
 			},
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+				type: "button",
+				"aria-expanded": isExpanded,
 				onClick: () => setIsExpanded(!isExpanded),
 				style: {
 					display: "flex",
@@ -1607,7 +1668,15 @@ function DefaultToolCallRenderer({ name, parameters, status, result }) {
 					justifyContent: "space-between",
 					gap: "10px",
 					cursor: "pointer",
-					userSelect: "none"
+					userSelect: "none",
+					width: "100%",
+					border: "none",
+					padding: 0,
+					margin: 0,
+					background: "transparent",
+					textAlign: "left",
+					font: "inherit",
+					color: "inherit"
 				},
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					style: {
@@ -1700,7 +1769,7 @@ function DefaultToolCallRenderer({ name, parameters, status, result }) {
 						whiteSpace: "pre-wrap",
 						wordBreak: "break-word"
 					},
-					children: JSON.stringify(parameters ?? {}, null, 2)
+					children: safeStringifyForPre(parameters ?? {})
 				})] }), result !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					style: {
 						fontSize: "10px",
@@ -1723,7 +1792,7 @@ function DefaultToolCallRenderer({ name, parameters, status, result }) {
 						whiteSpace: "pre-wrap",
 						wordBreak: "break-word"
 					},
-					children: typeof result === "string" ? result : JSON.stringify(result, null, 2)
+					children: typeof result === "string" ? result : safeStringifyForPre(result)
 				})] })]
 			})]
 		})
@@ -1734,8 +1803,14 @@ function safeStringifyForAttr(value) {
 	if (typeof value === "string") return value;
 	try {
 		return JSON.stringify(value);
-	} catch {
-		return String(value);
+	} catch (err) {
+		console.warn("[CopilotKit] Failed to JSON.stringify tool-call payload for data-* attribute; falling back to String():", err);
+		try {
+			return String(value);
+		} catch (innerErr) {
+			console.warn("[CopilotKit] safeStringifyForAttr: value could not be stringified:", innerErr);
+			return "";
+		}
 	}
 }
 
@@ -1806,11 +1881,11 @@ function useRenderToolCall() {
 	]);
 }
 function defaultToolCallRenderAdapter(props) {
-	const status = props.status === _copilotkit_core.ToolCallStatus.Complete ? "complete" : props.status === _copilotkit_core.ToolCallStatus.Executing ? "executing" : "inProgress";
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DefaultToolCallRenderer, {
 		name: props.name,
+		toolCallId: props.toolCallId,
 		parameters: props.args,
-		status,
+		status: mapToolCallStatus(props.status),
 		result: props.result
 	});
 }
@@ -4505,7 +4580,6 @@ function useInterrupt(config) {
 		return () => subscription.unsubscribe();
 	}, [agent]);
 	const resolve = (0, react.useCallback)((response) => {
-		setPendingEvent(null);
 		copilotkit.runAgent({
 			agent,
 			forwardedProps: { command: {
@@ -4514,44 +4588,67 @@ function useInterrupt(config) {
 			} }
 		});
 	}, [agent, copilotkit]);
+	const renderRef = (0, react.useRef)(config.render);
+	renderRef.current = config.render;
+	const enabledRef = (0, react.useRef)(config.enabled);
+	enabledRef.current = config.enabled;
+	const handlerRef = (0, react.useRef)(config.handler);
+	handlerRef.current = config.handler;
+	const resolveRef = (0, react.useRef)(resolve);
+	resolveRef.current = resolve;
+	const isEnabled = (event) => {
+		const predicate = enabledRef.current;
+		if (!predicate) return true;
+		try {
+			return predicate(event);
+		} catch (err) {
+			console.error("[CopilotKit] useInterrupt enabled predicate threw; treating interrupt as disabled:", err);
+			return false;
+		}
+	};
 	(0, react.useEffect)(() => {
 		if (!pendingEvent) {
 			setHandlerResult(null);
 			return;
 		}
-		if (config.enabled && !config.enabled(pendingEvent)) {
+		if (!isEnabled(pendingEvent)) {
 			setHandlerResult(null);
 			return;
 		}
-		const handler = config.handler;
+		const handler = handlerRef.current;
 		if (!handler) {
 			setHandlerResult(null);
 			return;
 		}
 		let cancelled = false;
-		const maybePromise = handler({
-			event: pendingEvent,
-			resolve
-		});
+		let maybePromise;
+		try {
+			maybePromise = handler({
+				event: pendingEvent,
+				resolve: resolveRef.current
+			});
+		} catch (err) {
+			console.error("[CopilotKit] useInterrupt handler threw; result will be null:", err);
+			if (!cancelled) setHandlerResult(null);
+			return () => {
+				cancelled = true;
+			};
+		}
 		if (isPromiseLike(maybePromise)) Promise.resolve(maybePromise).then((resolved) => {
 			if (!cancelled) setHandlerResult(resolved);
-		}).catch(() => {
+		}).catch((err) => {
+			console.error("[CopilotKit] useInterrupt handler rejected; result will be null:", err);
 			if (!cancelled) setHandlerResult(null);
 		});
 		else setHandlerResult(maybePromise);
 		return () => {
 			cancelled = true;
 		};
-	}, [
-		pendingEvent,
-		config.enabled,
-		config.handler,
-		resolve
-	]);
+	}, [pendingEvent]);
 	const element = (0, react.useMemo)(() => {
 		if (!pendingEvent) return null;
-		if (config.enabled && !config.enabled(pendingEvent)) return null;
-		return config.render({
+		if (!isEnabled(pendingEvent)) return null;
+		return renderRef.current({
 			event: pendingEvent,
 			result: handlerResult,
 			resolve
@@ -4559,19 +4656,22 @@ function useInterrupt(config) {
 	}, [
 		pendingEvent,
 		handlerResult,
-		config.enabled,
-		config.render,
 		resolve
 	]);
 	(0, react.useEffect)(() => {
 		if (config.renderInChat === false) return;
 		copilotkit.setInterruptElement(element);
-		return () => copilotkit.setInterruptElement(null);
 	}, [
 		element,
 		config.renderInChat,
 		copilotkit
 	]);
+	(0, react.useEffect)(() => {
+		if (config.renderInChat === false) return;
+		return () => {
+			copilotkit.setInterruptElement(null);
+		};
+	}, []);
 	if (config.renderInChat === false) return element;
 }
 
@@ -7053,6 +7153,10 @@ function CopilotChat({ agentId, threadId, labels, chatView, isModalDefaultOpen,
 	const [transcriptionError, setTranscriptionError] = (0, react.useState)(null);
 	const [isTranscribing, setIsTranscribing] = (0, react.useState)(false);
 	const { attachments: selectedAttachments, enabled: attachmentsEnabled, dragOver, fileInputRef, containerRef: chatContainerRef, handleFileUpload, handleDragOver, handleDragLeave, handleDrop, removeAttachment, consumeAttachments } = useAttachments({ config: attachmentsConfig });
+	const selectedAttachmentsRef = (0, react.useRef)(selectedAttachments);
+	(0, react.useEffect)(() => {
+		selectedAttachmentsRef.current = selectedAttachments;
+	}, [selectedAttachments]);
 	const isTranscriptionEnabled = copilotkit.audioFileTranscriptionEnabled;
 	const isMediaRecorderSupported = typeof window !== "undefined" && typeof MediaRecorder !== "undefined";
 	const { messageView: providedMessageView, suggestionView: providedSuggestionView, onStop: providedStopHandler, ...restProps } = props;
@@ -7089,8 +7193,21 @@ function CopilotChat({ agentId, threadId, labels, chatView, isModalDefaultOpen,
 		hasExplicitThreadId
 	]);
 	const onSubmitInput = (0, react.useCallback)(async (value) => {
-		if (selectedAttachments.some((a) => a.status === "uploading")) {
-			console.error("[CopilotKit] Cannot send while attachments are uploading");
+		if (selectedAttachmentsRef.current.some((a) => a.status === "uploading")) {
+			console.error("[CopilotKit] Cannot send while attachments are uploading (pre-await guard)");
+			setTranscriptionError("Cannot send while attachments are uploading.");
+			return;
+		}
+		setInputValue("");
+		if (agent.isRunning && "activeRunCompletionPromise" in agent && agent.activeRunCompletionPromise) try {
+			await agent.activeRunCompletionPromise;
+		} catch (error) {
+			console.error("CopilotChat: in-flight run rejected while queuing send", error);
+		}
+		if (selectedAttachmentsRef.current.some((a) => a.status === "uploading")) {
+			console.error("[CopilotKit] Cannot send while attachments are uploading (post-await re-check)");
+			setTranscriptionError("Cannot send while attachments are uploading.");
+			setInputValue(value);
 			return;
 		}
 		const readyAttachments = consumeAttachments();
@@ -7118,17 +7235,12 @@ function CopilotChat({ agentId, threadId, labels, chatView, isModalDefaultOpen,
 			role: "user",
 			content: value
 		});
-		setInputValue("");
 		try {
 			await copilotkit.runAgent({ agent });
 		} catch (error) {
 			console.error("CopilotChat: runAgent failed", error);
 		}
-	}, [
-		agent,
-		selectedAttachments,
-		consumeAttachments
-	]);
+	}, [agent, consumeAttachments]);
 	const handleSelectSuggestion = (0, react.useCallback)(async (suggestion) => {
 		agent.addMessage({
 			id: (0, _copilotkit_shared.randomUUID)(),
@@ -8220,6 +8332,7 @@ function BannerErrorDisplay({ bannerError, onDismiss }) {
 	const details = bannerError.details;
 	const link = extractUrl(bannerError.message);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		"data-testid": "copilot-error-banner",
 		style: {
 			position: "fixed",
 			bottom: "20px",
@@ -8420,7 +8533,7 @@ function ToastProvider({ enabled, children }) {
 	}, []);
 	const addToast = (0, react.useCallback)((toast) => {
 		if (!enabled) return;
-		const id = toast.id ?? Math.random().toString(36).substring(2, 9);
+		const id = toast.id ?? Math.random().toString(36).slice(2, 9);
 		setToasts((currentToasts) => {
 			if (currentToasts.find((toast) => toast.id === id)) return currentToasts;
 			return [...currentToasts, {
@@ -8777,6 +8890,7 @@ function UsageBanner({ severity = _copilotkit_shared.Severity.CRITICAL, message
           }
         ` }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: "usage-banner",
+		"data-testid": "copilot-error-banner",
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "banner-content",
 			children: [
@@ -10440,4 +10554,4 @@ Object.defineProperty(exports, 'useToast', {
     return useToast;
   }
 });
-//# sourceMappingURL=copilotkit-DKPrBplZ.cjs.map
+//# sourceMappingURL=copilotkit-DhONbYmz.cjs.map