@copilotkitnext/react 1.52.0-next.6 → 1.52.0-next.8

package/dist/index.umd.js

@@ -1018,6 +1018,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]"),
 			onClick: handleContainerClick,
 			"data-layout": isExpanded ? "expanded" : "compact",
@@ -1066,6 +1067,7 @@ _radix_ui_react_dropdown_menu = __toESM(_radix_ui_react_dropdown_menu);
 			className: "cpk:mr-[10px]",
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
 				type: "button",
+				"data-testid": "copilot-send-button",
 				variant: "chatInputToolbarPrimary",
 				size: "chatInputToolbarIcon",
 				className,
@@ -1093,18 +1095,21 @@ _radix_ui_react_dropdown_menu = __toESM(_radix_ui_react_dropdown_menu);
 			})] });
 		};
 		_CopilotChatInput.StartTranscribeButton = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarButton, {
+			"data-testid": "copilot-start-transcribe-button",
 			icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Mic, { className: "cpk:size-[18px]" }),
 			labelKey: "chatInputToolbarStartTranscribeButtonLabel",
 			defaultClassName: "cpk:mr-2",
 			...props
 		});
 		_CopilotChatInput.CancelTranscribeButton = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarButton, {
+			"data-testid": "copilot-cancel-transcribe-button",
 			icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.X, { className: "cpk:size-[18px]" }),
 			labelKey: "chatInputToolbarCancelTranscribeButtonLabel",
 			defaultClassName: "cpk:mr-2",
 			...props
 		});
 		_CopilotChatInput.FinishTranscribeButton = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarButton, {
+			"data-testid": "copilot-finish-transcribe-button",
 			icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Check, { className: "cpk:size-[18px]" }),
 			labelKey: "chatInputToolbarFinishTranscribeButtonLabel",
 			defaultClassName: "cpk:mr-[10px]",
@@ -1150,6 +1155,7 @@ _radix_ui_react_dropdown_menu = __toESM(_radix_ui_react_dropdown_menu);
 					asChild: true,
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
 						type: "button",
+						"data-testid": "copilot-add-menu-button",
 						variant: "chatInputToolbarSecondary",
 						size: "chatInputToolbarIcon",
 						className: (0, tailwind_merge.twMerge)("cpk:ml-1", className),
@@ -1201,6 +1207,7 @@ _radix_ui_react_dropdown_menu = __toESM(_radix_ui_react_dropdown_menu);
 			}, [autoFocus]);
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("textarea", {
 				ref: internalTextareaRef,
+				"data-testid": "copilot-chat-textarea",
 				placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : labels.chatInputPlaceholder,
 				className: (0, tailwind_merge.twMerge)("cpk:bg-transparent cpk:outline-none cpk:antialiased cpk:font-regular cpk:leading-relaxed cpk:text-[16px] cpk:placeholder:text-[#00000077] cpk:dark:placeholder:text-[#fffc]", className),
 				style: {
@@ -1798,6 +1805,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 			_defineProperty(this, "_renderToolCalls", []);
 			_defineProperty(this, "_renderCustomMessages", []);
 			_defineProperty(this, "_renderActivityMessages", []);
+			_defineProperty(this, "_interruptElement", null);
 			this._renderToolCalls = (_config$renderToolCal = config.renderToolCalls) !== null && _config$renderToolCal !== void 0 ? _config$renderToolCal : [];
 			this._renderCustomMessages = (_config$renderCustomM = config.renderCustomMessages) !== null && _config$renderCustomM !== void 0 ? _config$renderCustomM : [];
 			this._renderActivityMessages = (_config$renderActivit = config.renderActivityMessages) !== null && _config$renderActivit !== void 0 ? _config$renderActivit : [];
@@ -1821,6 +1829,20 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 				});
 			}, "Subscriber onRenderToolCallsChanged error:");
 		}
+		get interruptElement() {
+			return this._interruptElement;
+		}
+		setInterruptElement(element) {
+			this._interruptElement = element;
+			this.notifySubscribers((subscriber) => {
+				var _reactSubscriber$onIn;
+				const reactSubscriber = subscriber;
+				(_reactSubscriber$onIn = reactSubscriber.onInterruptElementChanged) === null || _reactSubscriber$onIn === void 0 || _reactSubscriber$onIn.call(reactSubscriber, {
+					copilotkit: this,
+					interruptElement: this._interruptElement
+				});
+			}, "Subscriber onInterruptElementChanged error:");
+		}
 		subscribe(subscriber) {
 			return super.subscribe(subscriber);
 		}
@@ -2956,6 +2978,170 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 		});
 	}
 
+//#endregion
+//#region src/hooks/use-interrupt.tsx
+	const INTERRUPT_EVENT_NAME = "on_interrupt";
+	function isPromiseLike(value) {
+		return (typeof value === "object" || typeof value === "function") && value !== null && typeof Reflect.get(value, "then") === "function";
+	}
+	/**
+	* Handles agent interrupts (`on_interrupt`) with optional filtering, preprocessing, and resume behavior.
+	*
+	* The hook listens to custom events on the active agent, stores interrupt payloads per run,
+	* and surfaces a render callback once the run finalizes. Call `resolve` from your UI to resume
+	* execution with user-provided data.
+	*
+	* - `renderInChat: true` (default): the element is published into `<CopilotChat>` and this hook returns `void`.
+	* - `renderInChat: false`: the hook returns the interrupt element so you can place it anywhere in your component tree.
+	*
+	* `event.value` is typed as `any` since the interrupt payload shape depends on your agent.
+	* Type-narrow it in your callbacks (e.g. `handler`, `enabled`, `render`) as needed.
+	*
+	* @typeParam TResult - Inferred from `handler` return type. Exposed as `result` in `render`.
+	* @param config - Interrupt configuration (renderer, optional handler/filter, and render mode).
+	* @returns When `renderInChat` is `false`, returns the interrupt element (or `null` when idle).
+	* Otherwise returns `void` and publishes the element into chat. In `render`, `result` is always
+	* either the handler's resolved return value or `null` (including when no handler is provided,
+	* when filtering skips the interrupt, or when handler execution fails).
+	*
+	* @example
+	* ```tsx
+	* import { useInterrupt } from "@copilotkitnext/react";
+	*
+	* function InterruptUI() {
+	*   useInterrupt({
+	*     render: ({ event, resolve }) => (
+	*       <div>
+	*         <p>{event.value.question}</p>
+	*         <button onClick={() => resolve({ approved: true })}>Approve</button>
+	*         <button onClick={() => resolve({ approved: false })}>Reject</button>
+	*       </div>
+	*     ),
+	*   });
+	*
+	*   return null;
+	* }
+	* ```
+	*
+	* @example
+	* ```tsx
+	* import { useInterrupt } from "@copilotkitnext/react";
+	*
+	* function CustomPanel() {
+	*   const interruptElement = useInterrupt({
+	*     renderInChat: false,
+	*     enabled: (event) => event.value.startsWith("approval:"),
+	*     handler: async ({ event }) => ({ label: event.value.toUpperCase() }),
+	*     render: ({ event, result, resolve }) => (
+	*       <aside>
+	*         <strong>{result?.label ?? ""}</strong>
+	*         <button onClick={() => resolve({ value: event.value })}>Continue</button>
+	*       </aside>
+	*     ),
+	*   });
+	*
+	*   return <>{interruptElement}</>;
+	* }
+	* ```
+	*/
+	function useInterrupt(config) {
+		const { copilotkit } = useCopilotKit();
+		const { agent } = useAgent({ agentId: config.agentId });
+		const [pendingEvent, setPendingEvent] = (0, react.useState)(null);
+		const [handlerResult, setHandlerResult] = (0, react.useState)(null);
+		(0, react.useEffect)(() => {
+			let localInterrupt = null;
+			const subscription = agent.subscribe({
+				onCustomEvent: ({ event }) => {
+					if (event.name === INTERRUPT_EVENT_NAME) localInterrupt = {
+						name: event.name,
+						value: event.value
+					};
+				},
+				onRunStartedEvent: () => {
+					localInterrupt = null;
+					setPendingEvent(null);
+				},
+				onRunFinalized: () => {
+					if (localInterrupt) {
+						setPendingEvent(localInterrupt);
+						localInterrupt = null;
+					}
+				},
+				onRunFailed: () => {
+					localInterrupt = null;
+				}
+			});
+			return () => subscription.unsubscribe();
+		}, [agent]);
+		const resolve = (0, react.useCallback)((response) => {
+			setPendingEvent(null);
+			copilotkit.runAgent({
+				agent,
+				forwardedProps: { command: { resume: response } }
+			});
+		}, [agent, copilotkit]);
+		(0, react.useEffect)(() => {
+			if (!pendingEvent) {
+				setHandlerResult(null);
+				return;
+			}
+			if (config.enabled && !config.enabled(pendingEvent)) {
+				setHandlerResult(null);
+				return;
+			}
+			const handler = config.handler;
+			if (!handler) {
+				setHandlerResult(null);
+				return;
+			}
+			let cancelled = false;
+			const maybePromise = handler({
+				event: pendingEvent,
+				resolve
+			});
+			if (isPromiseLike(maybePromise)) Promise.resolve(maybePromise).then((resolved) => {
+				if (!cancelled) setHandlerResult(resolved);
+			}).catch(() => {
+				if (!cancelled) setHandlerResult(null);
+			});
+			else setHandlerResult(maybePromise);
+			return () => {
+				cancelled = true;
+			};
+		}, [
+			pendingEvent,
+			config.enabled,
+			config.handler,
+			resolve
+		]);
+		const element = (0, react.useMemo)(() => {
+			if (!pendingEvent) return null;
+			if (config.enabled && !config.enabled(pendingEvent)) return null;
+			return config.render({
+				event: pendingEvent,
+				result: handlerResult,
+				resolve
+			});
+		}, [
+			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
+		]);
+		if (config.renderInChat === false) return element;
+	}
+
 //#endregion
 //#region src/components/chat/CopilotChatToolCallsView.tsx
 	function CopilotChatToolCallsView({ message, messages = [] }) {
@@ -3029,6 +3215,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),
 			...props,
 			"data-message-id": message.id,
@@ -3049,6 +3236,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 			children: content !== null && content !== void 0 ? content : ""
 		});
 		_CopilotChatAssistantMessage.Toolbar = ({ className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			"data-testid": "copilot-assistant-toolbar",
 			className: (0, tailwind_merge.twMerge)("cpk:w-full cpk:bg-transparent cpk:flex cpk:items-center cpk:-ml-[5px] cpk:-mt-[0px]", className),
 			...props
 		});
@@ -3078,6 +3266,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 				if (onClick) onClick(event);
 			};
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarButton, {
+				"data-testid": "copilot-copy-button",
 				title: title || labels.assistantMessageToolbarCopyMessageLabel,
 				onClick: handleClick,
 				className,
@@ -3090,6 +3279,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 			const config = useCopilotChatConfiguration();
 			const labels = (_config$labels2 = config === null || config === void 0 ? void 0 : config.labels) !== null && _config$labels2 !== void 0 ? _config$labels2 : CopilotChatDefaultLabels;
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarButton, {
+				"data-testid": "copilot-thumbs-up-button",
 				title: title || labels.assistantMessageToolbarThumbsUpLabel,
 				...props,
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ThumbsUp, { className: "cpk:size-[18px]" })
@@ -3100,6 +3290,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 			const config = useCopilotChatConfiguration();
 			const labels = (_config$labels3 = config === null || config === void 0 ? void 0 : config.labels) !== null && _config$labels3 !== void 0 ? _config$labels3 : CopilotChatDefaultLabels;
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarButton, {
+				"data-testid": "copilot-thumbs-down-button",
 				title: title || labels.assistantMessageToolbarThumbsDownLabel,
 				...props,
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ThumbsDown, { className: "cpk:size-[18px]" })
@@ -3110,6 +3301,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 			const config = useCopilotChatConfiguration();
 			const labels = (_config$labels4 = config === null || config === void 0 ? void 0 : config.labels) !== null && _config$labels4 !== void 0 ? _config$labels4 : CopilotChatDefaultLabels;
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarButton, {
+				"data-testid": "copilot-read-aloud-button",
 				title: title || labels.assistantMessageToolbarReadAloudLabel,
 				...props,
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Volume2, { className: "cpk:size-[20px]" })
@@ -3120,6 +3312,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 			const config = useCopilotChatConfiguration();
 			const labels = (_config$labels5 = config === null || config === void 0 ? void 0 : config.labels) !== null && _config$labels5 !== void 0 ? _config$labels5 : CopilotChatDefaultLabels;
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarButton, {
+				"data-testid": "copilot-regenerate-button",
 				title: title || labels.assistantMessageToolbarRegenerateLabel,
 				...props,
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.RefreshCw, { className: "cpk:size-[18px]" })
@@ -3189,6 +3382,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),
 			"data-message-id": message.id,
 			...props,
@@ -3206,6 +3400,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 			children: content
 		});
 		_CopilotChatUserMessage.Toolbar = ({ className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			"data-testid": "copilot-user-toolbar",
 			className: (0, tailwind_merge.twMerge)("cpk:w-full cpk:bg-transparent cpk:flex cpk:items-center cpk:justify-end cpk:-mr-[5px] cpk:mt-[4px] cpk:invisible cpk:group-hover:visible", className),
 			...props
 		});
@@ -3236,6 +3431,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 				if (onClick) onClick(event);
 			};
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarButton, {
+				"data-testid": "copilot-user-copy-button",
 				title: title || labels.userMessageToolbarCopyMessageLabel,
 				onClick: handleClick,
 				className,
@@ -3248,6 +3444,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 			const config = useCopilotChatConfiguration();
 			const labels = (_config$labels2 = config === null || config === void 0 ? void 0 : config.labels) !== null && _config$labels2 !== void 0 ? _config$labels2 : CopilotChatDefaultLabels;
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarButton, {
+				"data-testid": "copilot-edit-button",
 				title: title || labels.userMessageToolbarEditMessageLabel,
 				className,
 				...props,
@@ -3259,6 +3456,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 			const canGoPrev = currentBranch > 0;
 			const canGoNext = currentBranch < numberOfBranches - 1;
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				"data-testid": "copilot-branch-navigation",
 				className: (0, tailwind_merge.twMerge)("cpk:flex cpk:items-center cpk:gap-1", className),
 				...props,
 				children: [
@@ -3442,6 +3640,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 			ref,
 			"data-copilotkit": true,
+			"data-testid": "copilot-suggestion",
 			"data-slot": "suggestion-pill",
 			className: cn(baseClasses, className),
 			type: type !== null && type !== void 0 ? type : "button",
@@ -3471,6 +3670,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			ref,
 			"data-copilotkit": true,
+			"data-testid": "copilot-suggestions",
 			className: cn("cpk:flex cpk:flex-wrap cpk:items-center cpk:gap-1.5 cpk:sm:gap-2 cpk:pl-0 cpk:pr-4 cpk:sm:px-0 cpk:pointer-events-none", className),
 			...props
 		});
@@ -3645,6 +3845,14 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 			copilotkit,
 			forceUpdate
 		]);
+		const [interruptElement, setInterruptElement] = (0, react.useState)(null);
+		(0, react.useEffect)(() => {
+			setInterruptElement(copilotkit.interruptElement);
+			const subscription = copilotkit.subscribe({ onInterruptElementChanged: ({ interruptElement }) => {
+				setInterruptElement(interruptElement);
+			} });
+			return () => subscription.unsubscribe();
+		}, [copilotkit]);
 		const getStateSnapshotForMessage = (messageId) => {
 			var _copilotkit$getRunIdF;
 			if (!config) return void 0;
@@ -3719,23 +3927,30 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 			children: children({
 				messageElements,
 				messages,
-				isRunning
+				isRunning,
+				interruptElement
 			})
 		});
 		const lastMessage = messages[messages.length - 1];
 		const showCursor = isRunning && (lastMessage === null || lastMessage === void 0 ? void 0 : lastMessage.role) !== "reasoning";
 		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),
 			...props,
-			children: [messageElements, showCursor && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "cpk:mt-2",
-				children: renderSlot(cursor, CopilotChatMessageView.Cursor, {})
-			})]
+			children: [
+				messageElements,
+				interruptElement,
+				showCursor && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "cpk:mt-2",
+					children: renderSlot(cursor, CopilotChatMessageView.Cursor, {})
+				})
+			]
 		});
 	}
 	CopilotChatMessageView.Cursor = function Cursor({ className, ...props }) {
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			"data-testid": "copilot-loading-cursor",
 			className: (0, tailwind_merge.twMerge)("cpk:w-[11px] cpk:h-[11px] cpk:rounded-full cpk:bg-foreground cpk:animate-pulse-cursor cpk:ml-1", className),
 			...props
 		});
@@ -3880,6 +4095,8 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 			});
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				"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),
 				...props,
 				children: BoundWelcomeScreen
@@ -3897,6 +4114,8 @@ 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-chat",
+			"data-copilot-running": isRunning ? "true" : "false",
 			className: (0, tailwind_merge.twMerge)("cpk:relative cpk:h-full", className),
 			...props,
 			children: [BoundScrollView, BoundInput]
@@ -3992,6 +4211,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 			});
 		};
 		_CopilotChatView.ScrollToBottomButton = ({ className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
+			"data-testid": "copilot-scroll-to-bottom",
 			variant: "outline",
 			size: "sm",
 			className: (0, tailwind_merge.twMerge)("cpk:rounded-full cpk:w-10 cpk:h-10 cpk:p-0 cpk:pointer-events-auto", "cpk:bg-white cpk:dark:bg-gray-900", "cpk:shadow-lg cpk:border cpk:border-gray-200 cpk:dark:border-gray-700", "cpk:hover:bg-gray-50 cpk:dark:hover:bg-gray-800", "cpk:flex cpk:items-center cpk:justify-center cpk:cursor-pointer", className),
@@ -4027,6 +4247,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 				})
 			});
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				"data-testid": "copilot-welcome-screen",
 				className: cn("cpk:flex-1 cpk:flex cpk:flex-col cpk:items-center cpk:justify-center cpk:px-4", className),
 				...props,
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -4420,6 +4641,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 			ref,
 			type: type !== null && type !== void 0 ? type : "button",
 			"data-copilotkit": true,
+			"data-testid": "copilot-chat-toggle",
 			"data-slot": "chat-toggle-button",
 			"data-state": isOpen ? "open" : "closed",
 			className: cn(BUTTON_BASE_CLASSES, className),
@@ -4453,6 +4675,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 			...rest
 		});
 		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),
 			...rest,
@@ -4478,12 +4701,14 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 	CopilotModalHeader.displayName = "CopilotModalHeader";
 	(function(_CopilotModalHeader) {
 		_CopilotModalHeader.Title = ({ children, className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			"data-testid": "copilot-header-title",
 			className: cn("cpk:w-full cpk:text-base cpk:font-medium cpk:leading-none cpk:tracking-tight cpk:text-foreground", className),
 			...props,
 			children
 		});
 		_CopilotModalHeader.CloseButton = ({ className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 			type: "button",
+			"data-testid": "copilot-close-button",
 			className: cn("cpk:inline-flex cpk:size-8 cpk:items-center cpk:justify-center cpk:rounded-full cpk:text-muted-foreground cpk:transition cpk:cursor-pointer", "cpk:hover:bg-muted cpk:hover:text-foreground cpk:focus-visible:outline-none cpk:focus-visible:ring-2 cpk:focus-visible:ring-ring", className),
 			"aria-label": "Close",
 			...props,
@@ -4563,6 +4788,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [renderSlot(toggleButton, CopilotChatToggleButton, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("aside", {
 			ref: sidebarRef,
 			"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"),
 			style: {
@@ -4726,6 +4952,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 				tabIndex: -1,
 				role: "dialog",
 				"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),
 				style: popupStyle,
@@ -4952,6 +5179,7 @@ exports.useCopilotKit = useCopilotKit;
 exports.useDefaultRenderTool = useDefaultRenderTool;
 exports.useFrontendTool = useFrontendTool;
 exports.useHumanInTheLoop = useHumanInTheLoop;
+exports.useInterrupt = useInterrupt;
 exports.useRenderActivityMessage = useRenderActivityMessage;
 exports.useRenderCustomMessages = useRenderCustomMessages;
 exports.useRenderTool = useRenderTool;