@copilotkit/react-core 1.60.1 → 1.60.2

package/dist/v2/index.umd.js

@@ -1414,9 +1414,14 @@ _radix_ui_react_dropdown_menu = __toESM(_radix_ui_react_dropdown_menu);
 		const [, forceUpdate] = (0, react.useReducer)((x) => x + 1, 0);
 		if (!context) throw new Error("useCopilotKit must be used within CopilotKitProvider");
 		(0, react.useEffect)(() => {
-			const subscription = context.copilotkit.subscribe({ onRuntimeConnectionStatusChanged: () => {
-				forceUpdate();
-			} });
+			const subscription = context.copilotkit.subscribe({
+				onRuntimeConnectionStatusChanged: () => {
+					forceUpdate();
+				},
+				onHeadersChanged: () => {
+					forceUpdate();
+				}
+			});
 			return () => {
 				subscription.unsubscribe();
 			};
@@ -1623,9 +1628,8 @@ _radix_ui_react_dropdown_menu = __toESM(_radix_ui_react_dropdown_menu);
 		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";
-		const badgeColor = isActive ? "#92400e" : isComplete ? "#065f46" : "#3f3f46";
+		const dotClassName = isActive ? "cpk:bg-amber-500" : isComplete ? "cpk:bg-emerald-500" : "cpk:bg-zinc-400";
+		const badgeClassName = isActive ? "cpk:bg-amber-100 cpk:text-amber-800 cpk:dark:bg-amber-500/15 cpk:dark:text-amber-400" : isComplete ? "cpk:bg-emerald-100 cpk:text-emerald-800 cpk:dark:bg-emerald-500/15 cpk:dark:text-emerald-400" : "cpk:bg-zinc-100 cpk:text-zinc-800 cpk:dark:bg-zinc-700/40 cpk:dark:text-zinc-300";
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			"data-testid": "copilot-tool-render",
 			"data-tool-name": name,
@@ -1633,54 +1637,20 @@ _radix_ui_react_dropdown_menu = __toESM(_radix_ui_react_dropdown_menu);
 			"data-status": status,
 			"data-args": safeStringifyForAttr(parameters),
 			"data-result": safeStringifyForAttr(result),
-			style: {
-				marginTop: "8px",
-				paddingBottom: "8px"
-			},
+			className: "cpk:mt-2 cpk:pb-2",
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				style: {
-					borderRadius: "12px",
-					border: "1px solid #e4e4e7",
-					backgroundColor: "#fafafa",
-					padding: "14px 16px"
-				},
+				className: "cpk:rounded-xl cpk:border cpk:border-zinc-200/60 cpk:bg-white/70 cpk:p-4 cpk:shadow-sm cpk:backdrop-blur cpk:dark:border-zinc-800/60 cpk:dark:bg-zinc-900/50",
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 					type: "button",
 					"aria-expanded": isExpanded,
 					onClick: () => setIsExpanded(!isExpanded),
-					style: {
-						display: "flex",
-						alignItems: "center",
-						justifyContent: "space-between",
-						gap: "10px",
-						cursor: "pointer",
-						userSelect: "none",
-						width: "100%",
-						border: "none",
-						padding: 0,
-						margin: 0,
-						background: "transparent",
-						textAlign: "left",
-						font: "inherit",
-						color: "inherit"
-					},
+					className: "cpk:flex cpk:w-full cpk:cursor-pointer cpk:select-none cpk:items-center cpk:justify-between cpk:gap-2.5 cpk:border-none cpk:bg-transparent cpk:p-0 cpk:m-0 cpk:text-left cpk:text-inherit",
+					style: { font: "inherit" },
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						style: {
-							display: "flex",
-							alignItems: "center",
-							gap: "8px",
-							minWidth: 0
-						},
+						className: "cpk:flex cpk:min-w-0 cpk:items-center cpk:gap-2",
 						children: [
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
-								style: {
-									height: "14px",
-									width: "14px",
-									color: "#71717a",
-									transition: "transform 0.15s",
-									transform: isExpanded ? "rotate(90deg)" : "rotate(0deg)",
-									flexShrink: 0
-								},
+								className: `cpk:h-3.5 cpk:w-3.5 cpk:flex-shrink-0 cpk:text-zinc-500 cpk:transition-transform cpk:dark:text-zinc-400 ${isExpanded ? "cpk:rotate-90" : ""}`,
 								fill: "none",
 								viewBox: "0 0 24 24",
 								strokeWidth: 2,
@@ -1691,93 +1661,31 @@ _radix_ui_react_dropdown_menu = __toESM(_radix_ui_react_dropdown_menu);
 									d: "M8.25 4.5l7.5 7.5-7.5 7.5"
 								})
 							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { style: {
-								display: "inline-block",
-								height: "8px",
-								width: "8px",
-								borderRadius: "50%",
-								backgroundColor: dotColor,
-								flexShrink: 0
-							} }),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: `cpk:inline-block cpk:h-2 cpk:w-2 cpk:flex-shrink-0 cpk:rounded-full ${dotClassName}` }),
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 								"data-testid": "copilot-tool-render-name",
-								style: {
-									fontSize: "13px",
-									fontWeight: 600,
-									color: "#18181b",
-									overflow: "hidden",
-									textOverflow: "ellipsis",
-									whiteSpace: "nowrap"
-								},
+								className: "cpk:truncate cpk:text-[13px] cpk:font-semibold cpk:text-zinc-900 cpk:dark:text-zinc-100",
 								children: name
 							})
 						]
 					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 						"data-testid": "copilot-tool-render-status",
-						style: {
-							display: "inline-flex",
-							alignItems: "center",
-							borderRadius: "9999px",
-							padding: "2px 8px",
-							fontSize: "11px",
-							fontWeight: 500,
-							backgroundColor: badgeBg,
-							color: badgeColor,
-							flexShrink: 0
-						},
+						className: `cpk:inline-flex cpk:flex-shrink-0 cpk:items-center cpk:rounded-full cpk:px-2 cpk:py-0.5 cpk:text-[11px] cpk:font-medium ${badgeClassName}`,
 						children: statusLabel
 					})]
 				}), isExpanded && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					style: {
-						marginTop: "12px",
-						display: "grid",
-						gap: "12px"
-					},
+					className: "cpk:mt-3 cpk:grid cpk:gap-3",
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						style: {
-							fontSize: "10px",
-							textTransform: "uppercase",
-							letterSpacing: "0.05em",
-							color: "#71717a"
-						},
+						className: "cpk:text-[10px] cpk:uppercase cpk:text-zinc-500 cpk:dark:text-zinc-400",
 						children: "Arguments"
 					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("pre", {
-						style: {
-							marginTop: "6px",
-							maxHeight: "200px",
-							overflow: "auto",
-							borderRadius: "6px",
-							backgroundColor: "#f4f4f5",
-							padding: "10px",
-							fontSize: "11px",
-							lineHeight: 1.6,
-							color: "#27272a",
-							whiteSpace: "pre-wrap",
-							wordBreak: "break-word"
-						},
+						className: "cpk:mt-1.5 cpk:max-h-[200px] cpk:overflow-auto cpk:rounded-md cpk:bg-zinc-100 cpk:p-2.5 cpk:text-[11px] cpk:leading-relaxed cpk:text-zinc-800 cpk:whitespace-pre-wrap cpk:break-words cpk:dark:bg-zinc-800/60 cpk:dark:text-zinc-200",
 						children: safeStringifyForPre(parameters ?? {})
 					})] }), result !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						style: {
-							fontSize: "10px",
-							textTransform: "uppercase",
-							letterSpacing: "0.05em",
-							color: "#71717a"
-						},
+						className: "cpk:text-[10px] cpk:uppercase cpk:text-zinc-500 cpk:dark:text-zinc-400",
 						children: "Result"
 					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("pre", {
-						style: {
-							marginTop: "6px",
-							maxHeight: "200px",
-							overflow: "auto",
-							borderRadius: "6px",
-							backgroundColor: "#f4f4f5",
-							padding: "10px",
-							fontSize: "11px",
-							lineHeight: 1.6,
-							color: "#27272a",
-							whiteSpace: "pre-wrap",
-							wordBreak: "break-word"
-						},
+						className: "cpk:mt-1.5 cpk:max-h-[200px] cpk:overflow-auto cpk:rounded-md cpk:bg-zinc-100 cpk:p-2.5 cpk:text-[11px] cpk:leading-relaxed cpk:text-zinc-800 cpk:whitespace-pre-wrap cpk:break-words cpk:dark:bg-zinc-800/60 cpk:dark:text-zinc-200",
 						children: typeof result === "string" ? result : safeStringifyForPre(result)
 					})] })]
 				})]
@@ -4717,18 +4625,25 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 				},
 				onRunFailed: () => {
 					localInterrupt = null;
+					setPendingEvent(null);
 				}
 			});
 			return () => subscription.unsubscribe();
 		}, [agent]);
-		const resolve = (0, react.useCallback)((response) => {
-			copilotkit.runAgent({
-				agent,
-				forwardedProps: { command: {
-					resume: response,
-					interruptEvent: pendingEventRef.current?.value
-				} }
-			});
+		const resolve = (0, react.useCallback)(async (response) => {
+			try {
+				return await copilotkit.runAgent({
+					agent,
+					forwardedProps: { command: {
+						resume: response,
+						interruptEvent: pendingEventRef.current?.value
+					} }
+				});
+			} catch (err) {
+				console.error("[CopilotKit] useInterrupt resolve: runAgent rejected; clearing pending + rethrowing", err);
+				setPendingEvent(null);
+				throw err;
+			}
 		}, [agent, copilotkit]);
 		const renderRef = (0, react.useRef)(config.render);
 		renderRef.current = config.render;
@@ -7097,7 +7012,6 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 	function usePinToSend({ scrollRef, contentRef, spacerRef, topOffset = 16 }) {
 		const { id, sendNonce } = (0, react.useContext)(LastUserMessageContext);
 		const lastNonceRef = (0, react.useRef)(-1);
-		const currentSpacerHeightRef = (0, react.useRef)(0);
 		(0, react.useEffect)(() => {
 			if (sendNonce === lastNonceRef.current) return;
 			lastNonceRef.current = sendNonce;
@@ -7115,7 +7029,6 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 			const bubbleHeight = Math.max(0, userMessageHeight - paddingTop);
 			const spacerHeight = Math.max(0, viewportHeight - bubbleHeight - topOffset);
 			spacerEl.style.height = `${spacerHeight}px`;
-			currentSpacerHeightRef.current = spacerHeight;
 			const raf = requestAnimationFrame(() => {
 				const targetTop = computeOffsetTop(targetEl, scrollEl) + paddingTop - topOffset;
 				scrollEl.scrollTo({
@@ -7127,10 +7040,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 				if (!contentEl || !spacerEl || !scrollEl) return;
 				const consumedBelow = contentEl.getBoundingClientRect().height - computeOffsetTop(targetEl, contentEl) - userMessageHeight;
 				const remaining = Math.max(0, spacerHeight - consumedBelow);
-				if (remaining < currentSpacerHeightRef.current) {
-					spacerEl.style.height = `${remaining}px`;
-					currentSpacerHeightRef.current = remaining;
-				}
+				spacerEl.style.height = `${remaining}px`;
 			});
 			ro.observe(contentEl);
 			return () => {
@@ -7424,7 +7334,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 			}, []);
 			(0, react.useEffect)(() => {
 				if (mode === "pin-to-bottom") return;
-				const scrollElement = scrollRef.current;
+				const scrollElement = nonAutoScrollEl;
 				if (!scrollElement) return;
 				const checkScroll = () => {
 					setShowScrollButton(!(scrollElement.scrollHeight - scrollElement.scrollTop - scrollElement.clientHeight < 10));
@@ -7437,7 +7347,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 					scrollElement.removeEventListener("scroll", checkScroll);
 					resizeObserver.disconnect();
 				};
-			}, [scrollRef, mode]);
+			}, [nonAutoScrollEl, mode]);
 			if (!hasMounted) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: "cpk:h-full cpk:max-h-full cpk:flex cpk:flex-col cpk:min-h-0 cpk:overflow-y-auto cpk:overflow-x-hidden",
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {