@copilotkit/react-core 1.60.1 → 1.61.0

package/dist/{copilotkit-BTHcCAVQ.cjs → copilotkit-DtPCrXXd.cjs}

@@ -1428,9 +1428,14 @@ const useCopilotKit = () => {
 	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();
 		};
@@ -1637,9 +1642,8 @@ function DefaultToolCallRenderer({ name, toolCallId, parameters, status, result
 	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,
@@ -1647,54 +1651,20 @@ function DefaultToolCallRenderer({ name, toolCallId, parameters, status, result
 		"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,
@@ -1705,93 +1675,31 @@ function DefaultToolCallRenderer({ name, toolCallId, parameters, status, result
 								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)
 				})] })]
 			})]
@@ -3734,6 +3642,10 @@ const CopilotKitProvider = ({ children, runtimeUrl, headers: headersProp = EMPTY
 		...selfManagedAgents
 	}), [agents, selfManagedAgents]);
 	const hasLocalAgents = mergedAgents && Object.keys(mergedAgents).length > 0;
+	const hasSelfManagedAgents = Object.keys(selfManagedAgents).length > 0;
+	(0, react.useEffect)(() => {
+		if (hasSelfManagedAgents && !resolvedPublicKey) console.warn("[CopilotKit] `selfManagedAgents` is part of CopilotKit's Enterprise Intelligence offering. Provide a `publicLicenseKey` for production use — contact the CopilotKit team about licensing.");
+	}, [hasSelfManagedAgents, resolvedPublicKey]);
 	const headers = typeof headersProp === "function" ? headersProp() : headersProp;
 	const mergedHeaders = (0, react.useMemo)(() => {
 		if (!resolvedPublicKey) return headers;
@@ -4211,36 +4123,40 @@ function useHumanInTheLoop(tool, deps) {
 	}, []);
 	const RenderComponent = (0, react.useCallback)((props) => {
 		const ToolComponent = tool.render;
-		if (props.status === "inProgress") {
+		if (props.status === _copilotkit_core.ToolCallStatus.InProgress) {
 			const enhancedProps = {
 				...props,
 				name: tool.name,
 				description: tool.description || "",
+				agentId: tool.agentId,
 				respond: void 0
 			};
 			return react.default.createElement(ToolComponent, enhancedProps);
-		} else if (props.status === "executing") {
+		} else if (props.status === _copilotkit_core.ToolCallStatus.Executing) {
 			const enhancedProps = {
 				...props,
 				name: tool.name,
 				description: tool.description || "",
+				agentId: tool.agentId,
 				respond
 			};
 			return react.default.createElement(ToolComponent, enhancedProps);
-		} else if (props.status === "complete") {
+		} else if (props.status === _copilotkit_core.ToolCallStatus.Complete) {
 			const enhancedProps = {
 				...props,
 				name: tool.name,
 				description: tool.description || "",
+				agentId: tool.agentId,
 				respond: void 0
 			};
 			return react.default.createElement(ToolComponent, enhancedProps);
 		}
-		return react.default.createElement(ToolComponent, props);
+		return props;
 	}, [
 		tool.render,
 		tool.name,
 		tool.description,
+		tool.agentId,
 		respond
 	]);
 	useFrontendTool({
@@ -4731,18 +4647,25 @@ function useInterrupt(config) {
 			},
 			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;
@@ -7111,7 +7034,6 @@ const LastUserMessageContext = react.default.createContext({
 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;
@@ -7129,7 +7051,6 @@ function usePinToSend({ scrollRef, contentRef, spacerRef, topOffset = 16 }) {
 		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({
@@ -7141,10 +7062,7 @@ function usePinToSend({ scrollRef, contentRef, spacerRef, topOffset = 16 }) {
 			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 () => {
@@ -7438,7 +7356,7 @@ function CopilotChatView({ messageView, input, scrollView, suggestionView, welco
 		}, []);
 		(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));
@@ -7451,7 +7369,7 @@ function CopilotChatView({ messageView, input, scrollView, suggestionView, welco
 				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", {
@@ -10200,21 +10118,6 @@ function CopilotListeners() {
 
 //#endregion
 //#region src/components/copilot-provider/copilotkit.tsx
-/**
-* This component will typically wrap your entire application (or a sub-tree of your application where you want to have a copilot). It provides the copilot context to all other components and hooks.
-*
-* ## Example
-*
-* You can find more information about self-hosting CopilotKit [here](/guides/self-hosting).
-*
-* ```tsx
-* import { CopilotKit } from "@copilotkit/react-core";
-*
-* <CopilotKit runtimeUrl="<your-runtime-url>">
-*   // ... your app ...
-* </CopilotKit>
-* ```
-*/
 function CopilotKit({ children, ...props }) {
 	const enabled = shouldShowDevConsole(props.showDevConsole);
 	const showInspector = shouldShowDevConsole(props.enableInspector);
@@ -10703,7 +10606,11 @@ function formatFeatureName(featureName) {
 function validateProps(props) {
 	const cloudFeatures = Object.keys(props).filter((key) => key.endsWith("_c"));
 	const hasApiKey = props.publicApiKey || props.publicLicenseKey;
-	if (!props.runtimeUrl && !hasApiKey) throw new _copilotkit_shared.ConfigurationError("Missing required prop: 'runtimeUrl' or 'publicApiKey' or 'publicLicenseKey'");
+	const hasLocalAgents = Object.keys({
+		...props.agents__unsafe_dev_only,
+		...props.selfManagedAgents
+	}).length > 0;
+	if (!props.runtimeUrl && !hasApiKey && !hasLocalAgents) throw new _copilotkit_shared.ConfigurationError("Missing required prop: 'runtimeUrl' or 'publicApiKey' or 'publicLicenseKey'");
 	if (cloudFeatures.length > 0 && !hasApiKey) throw new _copilotkit_shared.MissingPublicApiKeyError(`Missing required prop: 'publicApiKey' or 'publicLicenseKey' to use cloud features: ${cloudFeatures.map(formatFeatureName).join(", ")}`);
 }
 
@@ -11176,4 +11083,4 @@ Object.defineProperty(exports, 'useToast', {
     return useToast;
   }
 });
-//# sourceMappingURL=copilotkit-BTHcCAVQ.cjs.map
+//# sourceMappingURL=copilotkit-DtPCrXXd.cjs.map