@copilotkitnext/react 1.52.2-next.2 → 1.52.2-next.4

package/dist/index.umd.js

@@ -1017,7 +1017,7 @@ _radix_ui_react_dropdown_menu = __toESM(_radix_ui_react_dropdown_menu);
 		}) : null;
 		const inputPill = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			"data-testid": "copilot-chat-input",
-			className: (0, tailwind_merge.twMerge)("cpk:flex cpk:w-full cpk:flex-col cpk:items-center cpk:justify-center", "cpk:cursor-text", "cpk:overflow-visible cpk:bg-clip-padding cpk:contain-inline-size", "cpk:bg-white cpk:dark:bg-[#303030]", "cpk:shadow-[0_4px_4px_0_#0000000a,0_0_1px_0_#0000009e] cpk:rounded-[28px]"),
+			className: (0, tailwind_merge.twMerge)("copilotKitInput", "cpk:flex cpk:w-full cpk:flex-col cpk:items-center cpk:justify-center", "cpk:cursor-text", "cpk:overflow-visible cpk:bg-clip-padding cpk:contain-inline-size", "cpk:bg-white cpk:dark:bg-[#303030]", "cpk:shadow-[0_4px_4px_0_#0000000a,0_0_1px_0_#0000009e] cpk:rounded-[28px]"),
 			onClick: handleContainerClick,
 			"data-layout": isExpanded ? "expanded" : "compact",
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -1817,6 +1817,12 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 		get renderToolCalls() {
 			return this._renderToolCalls;
 		}
+		setRenderActivityMessages(renderers) {
+			this._renderActivityMessages = renderers;
+		}
+		setRenderCustomMessages(renderers) {
+			this._renderCustomMessages = renderers;
+		}
 		setRenderToolCalls(renderToolCalls) {
 			this._renderToolCalls = renderToolCalls;
 			this.notifySubscribers((subscriber) => {
@@ -1863,7 +1869,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 		}, [value, warningMessage]);
 		return value;
 	}
-	const CopilotKitProvider = ({ children, runtimeUrl, headers = {}, credentials, publicApiKey, publicLicenseKey, properties = {}, agents__unsafe_dev_only: agents = {}, selfManagedAgents = {}, renderToolCalls, renderActivityMessages, renderCustomMessages, frontendTools, humanInTheLoop, showDevConsole = false, useSingleEndpoint = false }) => {
+	const CopilotKitProvider = ({ children, runtimeUrl, headers = {}, credentials, publicApiKey, publicLicenseKey, properties = {}, agents__unsafe_dev_only: agents = {}, selfManagedAgents = {}, renderToolCalls, renderActivityMessages, renderCustomMessages, frontendTools, humanInTheLoop, showDevConsole = false, useSingleEndpoint = false, onError }) => {
 		const [shouldRenderInspector, setShouldRenderInspector] = (0, react.useState)(false);
 		(0, react.useEffect)(() => {
 			if (typeof window === "undefined") return;
@@ -1971,26 +1977,20 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 			frontendToolsList,
 			processedHumanInTheLoopTools
 		]);
-		const copilotkit = (0, react.useMemo)(() => {
-			return new CopilotKitCoreReact({
-				runtimeUrl: chatApiEndpoint,
-				runtimeTransport: useSingleEndpoint ? "single" : "rest",
-				headers: mergedHeaders,
-				credentials,
-				properties,
-				agents__unsafe_dev_only: mergedAgents,
-				tools: allTools,
-				renderToolCalls: allRenderToolCalls,
-				renderActivityMessages: allActivityRenderers,
-				renderCustomMessages: renderCustomMessagesList
-			});
-		}, [
-			allTools,
-			allRenderToolCalls,
-			allActivityRenderers,
-			renderCustomMessagesList,
-			useSingleEndpoint
-		]);
+		const copilotkitRef = (0, react.useRef)(null);
+		if (copilotkitRef.current === null) copilotkitRef.current = new CopilotKitCoreReact({
+			runtimeUrl: chatApiEndpoint,
+			runtimeTransport: useSingleEndpoint ? "single" : "rest",
+			headers: mergedHeaders,
+			credentials,
+			properties,
+			agents__unsafe_dev_only: mergedAgents,
+			tools: allTools,
+			renderToolCalls: allRenderToolCalls,
+			renderActivityMessages: allActivityRenderers,
+			renderCustomMessages: renderCustomMessagesList
+		});
+		const copilotkit = copilotkitRef.current;
 		const [, forceUpdate] = (0, react.useReducer)((x) => x + 1, 0);
 		(0, react.useEffect)(() => {
 			const subscription = copilotkit.subscribe({ onRenderToolCallsChanged: () => {
@@ -2024,6 +2024,24 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 				subscription.unsubscribe();
 			};
 		}, [copilotkit]);
+		const onErrorRef = (0, react.useRef)(onError);
+		(0, react.useEffect)(() => {
+			onErrorRef.current = onError;
+		}, [onError]);
+		(0, react.useEffect)(() => {
+			if (!onErrorRef.current) return;
+			const subscription = copilotkit.subscribe({ onError: (event) => {
+				var _onErrorRef$current;
+				(_onErrorRef$current = onErrorRef.current) === null || _onErrorRef$current === void 0 || _onErrorRef$current.call(onErrorRef, {
+					error: event.error,
+					code: event.code,
+					context: event.context
+				});
+			} });
+			return () => {
+				subscription.unsubscribe();
+			};
+		}, [copilotkit]);
 		(0, react.useEffect)(() => {
 			copilotkit.setRuntimeUrl(chatApiEndpoint);
 			copilotkit.setRuntimeTransport(useSingleEndpoint ? "single" : "rest");
@@ -2032,6 +2050,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 			copilotkit.setProperties(properties);
 			copilotkit.setAgents__unsafe_dev_only(mergedAgents);
 		}, [
+			copilotkit,
 			chatApiEndpoint,
 			mergedHeaders,
 			credentials,
@@ -2039,11 +2058,32 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 			mergedAgents,
 			useSingleEndpoint
 		]);
+		const didMountRef = (0, react.useRef)(false);
+		(0, react.useEffect)(() => {
+			if (!didMountRef.current) return;
+			copilotkit.setTools(allTools);
+		}, [copilotkit, allTools]);
+		(0, react.useEffect)(() => {
+			if (!didMountRef.current) return;
+			copilotkit.setRenderToolCalls(allRenderToolCalls);
+		}, [copilotkit, allRenderToolCalls]);
+		(0, react.useEffect)(() => {
+			if (!didMountRef.current) return;
+			copilotkit.setRenderActivityMessages(allActivityRenderers);
+		}, [copilotkit, allActivityRenderers]);
+		(0, react.useEffect)(() => {
+			if (!didMountRef.current) return;
+			copilotkit.setRenderCustomMessages(renderCustomMessagesList);
+		}, [copilotkit, renderCustomMessagesList]);
+		(0, react.useEffect)(() => {
+			didMountRef.current = true;
+		}, []);
+		const contextValue = (0, react.useMemo)(() => ({
+			copilotkit,
+			executingToolCallIds
+		}), [copilotkit, executingToolCallIds]);
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(CopilotKitContext.Provider, {
-			value: {
-				copilotkit,
-				executingToolCallIds
-			},
+			value: contextValue,
 			children: [children, shouldRenderInspector ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CopilotKitInspector, { core: copilotkit }) : null]
 		});
 	};
@@ -2708,13 +2748,32 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 		const { copilotkit } = useCopilotKit();
 		const [, forceUpdate] = (0, react.useReducer)((x) => x + 1, 0);
 		const updateFlags = (0, react.useMemo)(() => updates !== null && updates !== void 0 ? updates : ALL_UPDATES, [JSON.stringify(updates)]);
+		const provisionalAgentCache = (0, react.useRef)(/* @__PURE__ */ new Map());
 		const agent = (0, react.useMemo)(() => {
 			var _copilotkit$agents;
 			const existing = copilotkit.getAgent(agentId);
-			if (existing) return existing;
+			if (existing) {
+				provisionalAgentCache.current.delete(agentId);
+				return existing;
+			}
 			const isRuntimeConfigured = copilotkit.runtimeUrl !== void 0;
 			const status = copilotkit.runtimeConnectionStatus;
 			if (isRuntimeConfigured && (status === _copilotkitnext_core.CopilotKitCoreRuntimeConnectionStatus.Disconnected || status === _copilotkitnext_core.CopilotKitCoreRuntimeConnectionStatus.Connecting)) {
+				const cached = provisionalAgentCache.current.get(agentId);
+				if (cached) {
+					cached.headers = { ...copilotkit.headers };
+					return cached;
+				}
+				const provisional = new _copilotkitnext_core.ProxiedCopilotRuntimeAgent({
+					runtimeUrl: copilotkit.runtimeUrl,
+					agentId,
+					transport: copilotkit.runtimeTransport
+				});
+				provisional.headers = { ...copilotkit.headers };
+				provisionalAgentCache.current.set(agentId, provisional);
+				return provisional;
+			}
+			if (isRuntimeConfigured && status === _copilotkitnext_core.CopilotKitCoreRuntimeConnectionStatus.Error) {
 				const provisional = new _copilotkitnext_core.ProxiedCopilotRuntimeAgent({
 					runtimeUrl: copilotkit.runtimeUrl,
 					agentId,
@@ -2732,8 +2791,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 			copilotkit.runtimeConnectionStatus,
 			copilotkit.runtimeUrl,
 			copilotkit.runtimeTransport,
-			JSON.stringify(copilotkit.headers),
-			copilotkit
+			JSON.stringify(copilotkit.headers)
 		]);
 		(0, react.useEffect)(() => {
 			if (updateFlags.length === 0) return;
@@ -3218,7 +3276,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			"data-copilotkit": true,
 			"data-testid": "copilot-assistant-message",
-			className: (0, tailwind_merge.twMerge)(className),
+			className: (0, tailwind_merge.twMerge)("copilotKitMessage copilotKitAssistantMessage", className),
 			...props,
 			"data-message-id": message.id,
 			children: [
@@ -3385,7 +3443,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			"data-copilotkit": true,
 			"data-testid": "copilot-user-message",
-			className: (0, tailwind_merge.twMerge)("cpk:flex cpk:flex-col cpk:items-end cpk:group cpk:pt-10", className),
+			className: (0, tailwind_merge.twMerge)("copilotKitMessage copilotKitUserMessage cpk:flex cpk:flex-col cpk:items-end cpk:group cpk:pt-10", className),
 			"data-message-id": message.id,
 			...props,
 			children: [BoundMessageRenderer, BoundToolbar]
@@ -3940,7 +3998,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			"data-copilotkit": true,
 			"data-testid": "copilot-message-list",
-			className: (0, tailwind_merge.twMerge)("cpk:flex cpk:flex-col", className),
+			className: (0, tailwind_merge.twMerge)("copilotKitMessages cpk:flex cpk:flex-col", className),
 			...props,
 			children: [
 				messageElements,
@@ -4103,7 +4161,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 				"data-copilotkit": true,
 				"data-testid": "copilot-chat",
 				"data-copilot-running": isRunning ? "true" : "false",
-				className: (0, tailwind_merge.twMerge)("cpk:relative cpk:h-full cpk:flex cpk:flex-col", className),
+				className: (0, tailwind_merge.twMerge)("copilotKitChat cpk:relative cpk:h-full cpk:flex cpk:flex-col", className),
 				...props,
 				children: BoundWelcomeScreen
 			});
@@ -4122,7 +4180,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 			"data-copilotkit": true,
 			"data-testid": "copilot-chat",
 			"data-copilot-running": isRunning ? "true" : "false",
-			className: (0, tailwind_merge.twMerge)("cpk:relative cpk:h-full", className),
+			className: (0, tailwind_merge.twMerge)("copilotKitChat cpk:relative cpk:h-full", className),
 			...props,
 			children: [BoundScrollView, BoundInput]
 		});
@@ -4395,7 +4453,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 
 //#endregion
 //#region src/components/chat/CopilotChat.tsx
-	function CopilotChat({ agentId, threadId, labels, chatView, ...props }) {
+	function CopilotChat({ agentId, threadId, labels, chatView, onError, ...props }) {
 		var _ref;
 		const existingConfig = useCopilotChatConfiguration();
 		const resolvedAgentId = (_ref = agentId !== null && agentId !== void 0 ? agentId : existingConfig === null || existingConfig === void 0 ? void 0 : existingConfig.agentId) !== null && _ref !== void 0 ? _ref : _copilotkitnext_shared.DEFAULT_AGENT_ID;
@@ -4406,6 +4464,27 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 		const { agent } = useAgent({ agentId: resolvedAgentId });
 		const { copilotkit } = useCopilotKit();
 		const { suggestions: autoSuggestions } = useSuggestions({ agentId: resolvedAgentId });
+		const onErrorRef = (0, react.useRef)(onError);
+		(0, react.useEffect)(() => {
+			onErrorRef.current = onError;
+		}, [onError]);
+		(0, react.useEffect)(() => {
+			if (!onErrorRef.current) return;
+			const subscription = copilotkit.subscribe({ onError: (event) => {
+				var _event$context, _event$context2;
+				if (((_event$context = event.context) === null || _event$context === void 0 ? void 0 : _event$context.agentId) === resolvedAgentId || !((_event$context2 = event.context) === null || _event$context2 === void 0 ? void 0 : _event$context2.agentId)) {
+					var _onErrorRef$current;
+					(_onErrorRef$current = onErrorRef.current) === null || _onErrorRef$current === void 0 || _onErrorRef$current.call(onErrorRef, {
+						error: event.error,
+						code: event.code,
+						context: event.context
+					});
+				}
+			} });
+			return () => {
+				subscription.unsubscribe();
+			};
+		}, [copilotkit, resolvedAgentId]);
 		const [transcribeMode, setTranscribeMode] = (0, react.useState)("input");
 		const [inputValue, setInputValue] = (0, react.useState)("");
 		const [transcriptionError, setTranscriptionError] = (0, react.useState)(null);
@@ -4414,20 +4493,27 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 		const isMediaRecorderSupported = typeof window !== "undefined" && typeof MediaRecorder !== "undefined";
 		const { messageView: providedMessageView, suggestionView: providedSuggestionView, onStop: providedStopHandler, ...restProps } = props;
 		(0, react.useEffect)(() => {
+			let detached = false;
+			const connectAbortController = new AbortController();
+			if (agent instanceof _ag_ui_client.HttpAgent) agent.abortController = connectAbortController;
 			const connect = async (agent) => {
 				try {
 					await copilotkit.connectAgent({ agent });
 				} catch (error) {
-					if (error instanceof _ag_ui_client.AGUIConnectNotImplementedError) {} else throw error;
+					if (detached) return;
+					console.error("CopilotChat: connectAgent failed", error);
 				}
 			};
 			agent.threadId = resolvedThreadId;
 			connect(agent);
-			return () => {};
+			return () => {
+				detached = true;
+				connectAbortController.abort();
+				agent.detachActiveRun();
+			};
 		}, [
 			resolvedThreadId,
 			agent,
-			copilotkit,
 			resolvedAgentId
 		]);
 		const onSubmitInput = (0, react.useCallback)(async (value) => {
@@ -4442,7 +4528,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 			} catch (error) {
 				console.error("CopilotChat: runAgent failed", error);
 			}
-		}, [agent, copilotkit]);
+		}, [agent]);
 		const handleSelectSuggestion = (0, react.useCallback)(async (suggestion) => {
 			agent.addMessage({
 				id: (0, _copilotkitnext_shared.randomUUID)(),
@@ -4454,7 +4540,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 			} catch (error) {
 				console.error("CopilotChat: runAgent failed after selecting suggestion", error);
 			}
-		}, [agent, copilotkit]);
+		}, [agent]);
 		const stopCurrentRun = (0, react.useCallback)(() => {
 			try {
 				copilotkit.stopAgent({ agent });
@@ -4466,7 +4552,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 					console.error("CopilotChat: abortRun fallback failed", abortError);
 				}
 			}
-		}, [agent, copilotkit]);
+		}, [agent]);
 		const handleStartTranscribe = (0, react.useCallback)(() => {
 			setTranscriptionError(null);
 			setTranscribeMode("transcribe");
@@ -4520,7 +4606,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 			} finally {
 				setIsTranscribing(false);
 			}
-		}, [copilotkit]);
+		}, []);
 		(0, react.useEffect)(() => {
 			if (transcriptionError) {
 				const timer = setTimeout(() => {
@@ -4596,7 +4682,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 	DefaultCloseIcon.displayName = "CopilotChatToggleButton.CloseIcon";
 	const ICON_TRANSITION_STYLE = Object.freeze({ transition: "opacity 120ms ease-out, transform 260ms cubic-bezier(0.22, 1, 0.36, 1)" });
 	const ICON_WRAPPER_BASE = "cpk:pointer-events-none cpk:absolute cpk:inset-0 cpk:flex cpk:items-center cpk:justify-center cpk:will-change-transform";
-	const BUTTON_BASE_CLASSES = cn("cpk:fixed cpk:bottom-6 cpk:right-6 cpk:z-[1100] cpk:flex cpk:h-14 cpk:w-14 cpk:items-center cpk:justify-center", "cpk:rounded-full cpk:border cpk:border-primary cpk:bg-primary cpk:text-primary-foreground", "cpk:shadow-sm cpk:transition-all cpk:duration-200 cpk:ease-out", "cpk:hover:scale-[1.04] cpk:hover:shadow-md", "cpk:cursor-pointer", "cpk:active:scale-[0.96]", "cpk:focus-visible:outline-none cpk:focus-visible:ring-2 cpk:focus-visible:ring-primary/50 cpk:focus-visible:ring-offset-2 cpk:focus-visible:ring-offset-background", "cpk:disabled:pointer-events-none cpk:disabled:opacity-60");
+	const BUTTON_BASE_CLASSES = cn("copilotKitButton", "cpk:fixed cpk:bottom-6 cpk:right-6 cpk:z-[1100] cpk:flex cpk:h-14 cpk:w-14 cpk:items-center cpk:justify-center", "cpk:rounded-full cpk:border cpk:border-primary cpk:bg-primary cpk:text-primary-foreground", "cpk:shadow-sm cpk:transition-all cpk:duration-200 cpk:ease-out", "cpk:hover:scale-[1.04] cpk:hover:shadow-md", "cpk:cursor-pointer", "cpk:active:scale-[0.96]", "cpk:focus-visible:outline-none cpk:focus-visible:ring-2 cpk:focus-visible:ring-primary/50 cpk:focus-visible:ring-offset-2 cpk:focus-visible:ring-offset-background", "cpk:disabled:pointer-events-none cpk:disabled:opacity-60");
 	const CopilotChatToggleButton = react.default.forwardRef(function CopilotChatToggleButton({ openIcon, closeIcon, className, ...buttonProps }, ref) {
 		var _configuration$labels, _configuration$isModa, _configuration$setMod;
 		const { onClick, type, disabled, ...restProps } = buttonProps;
@@ -4683,7 +4769,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("header", {
 			"data-testid": "copilot-modal-header",
 			"data-slot": "copilot-modal-header",
-			className: cn("cpk:flex cpk:items-center cpk:justify-between cpk:border-b cpk:border-border cpk:px-4 cpk:py-4", "cpk:bg-background/95 cpk:backdrop-blur cpk:supports-[backdrop-filter]:bg-background/80", className),
+			className: cn("copilotKitHeader", "cpk:flex cpk:items-center cpk:justify-between cpk:border-b cpk:border-border cpk:px-4 cpk:py-4", "cpk:bg-background/95 cpk:backdrop-blur cpk:supports-[backdrop-filter]:bg-background/80", className),
 			...rest,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "cpk:flex cpk:w-full cpk:items-center cpk:gap-2",
@@ -4796,7 +4882,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 			"data-copilotkit": true,
 			"data-testid": "copilot-sidebar",
 			"data-copilot-sidebar": true,
-			className: cn("cpk:fixed cpk:right-0 cpk:top-0 cpk:z-[1200] cpk:flex", "cpk:h-[100vh] cpk:h-[100dvh] cpk:max-h-screen", "cpk:w-full", "cpk:border-l cpk:border-border cpk:bg-background cpk:text-foreground cpk:shadow-xl", "cpk:transition-transform cpk:duration-300 cpk:ease-out", isSidebarOpen ? "cpk:translate-x-0" : "cpk:translate-x-full cpk:pointer-events-none"),
+			className: cn("copilotKitSidebar copilotKitWindow", "cpk:fixed cpk:right-0 cpk:top-0 cpk:z-[1200] cpk:flex", "cpk:h-[100vh] cpk:h-[100dvh] cpk:max-h-screen", "cpk:w-full", "cpk:border-l cpk:border-border cpk:bg-background cpk:text-foreground cpk:shadow-xl", "cpk:transition-transform cpk:duration-300 cpk:ease-out", isSidebarOpen ? "cpk:translate-x-0" : "cpk:translate-x-full cpk:pointer-events-none"),
 			style: {
 				["--sidebar-width"]: widthToCss(sidebarWidth),
 				paddingTop: "env(safe-area-inset-top)",
@@ -4960,7 +5046,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 				"aria-label": labels.modalHeaderTitle,
 				"data-testid": "copilot-popup",
 				"data-copilot-popup": true,
-				className: cn("cpk:relative cpk:flex cpk:h-full cpk:w-full cpk:flex-col cpk:overflow-hidden cpk:bg-background cpk:text-foreground", "cpk:origin-bottom cpk:focus:outline-none cpk:transform-gpu cpk:transition-transform cpk:transition-opacity cpk:duration-200 cpk:ease-out", "cpk:md:transition-transform cpk:md:transition-opacity", "cpk:rounded-none cpk:border cpk:border-border/0 cpk:shadow-none cpk:ring-0", "cpk:md:h-[var(--copilot-popup-height)] cpk:md:w-[var(--copilot-popup-width)]", "cpk:md:max-h-[var(--copilot-popup-max-height)] cpk:md:max-w-[var(--copilot-popup-max-width)]", "cpk:md:origin-bottom-right cpk:md:rounded-2xl cpk:md:border-border cpk:md:shadow-xl cpk:md:ring-1 cpk:md:ring-border/40", popupAnimationClass),
+				className: cn("copilotKitPopup copilotKitWindow", "cpk:relative cpk:flex cpk:h-full cpk:w-full cpk:flex-col cpk:overflow-hidden cpk:bg-background cpk:text-foreground", "cpk:origin-bottom cpk:focus:outline-none cpk:transform-gpu cpk:transition-transform cpk:transition-opacity cpk:duration-200 cpk:ease-out", "cpk:md:transition-transform cpk:md:transition-opacity", "cpk:rounded-none cpk:border cpk:border-border/0 cpk:shadow-none cpk:ring-0", "cpk:md:h-[var(--copilot-popup-height)] cpk:md:w-[var(--copilot-popup-width)]", "cpk:md:max-h-[var(--copilot-popup-max-height)] cpk:md:max-w-[var(--copilot-popup-max-width)]", "cpk:md:origin-bottom-right cpk:md:rounded-2xl cpk:md:border-border cpk:md:shadow-xl cpk:md:ring-1 cpk:md:ring-border/40", popupAnimationClass),
 				style: popupStyle,
 				children: [headerElement, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					className: "cpk:flex-1 cpk:overflow-hidden",