@copilotkitnext/react 1.52.0-next.5 → 1.52.0-next.7

package/dist/index.umd.js

@@ -107,65 +107,66 @@ _radix_ui_react_dropdown_menu = __toESM(_radix_ui_react_dropdown_menu);
 
 //#endregion
 //#region src/lib/utils.ts
+	const twMerge$8 = (0, tailwind_merge.extendTailwindMerge)({ prefix: "cpk" });
 	function cn(...inputs) {
-		return (0, tailwind_merge.twMerge)((0, clsx.clsx)(inputs));
+		return twMerge$8((0, clsx.clsx)(inputs));
 	}
 
 //#endregion
 //#region src/components/ui/button.tsx
-	const buttonVariants = (0, class_variance_authority.cva)("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", {
+	const buttonVariants = (0, class_variance_authority.cva)("cpk:inline-flex cpk:items-center cpk:justify-center cpk:gap-2 cpk:whitespace-nowrap cpk:rounded-md cpk:text-sm cpk:font-medium cpk:transition-all cpk:disabled:pointer-events-none cpk:disabled:opacity-50 cpk:[&_svg]:pointer-events-none cpk:[&_svg:not([class*='size-'])]:size-4 cpk:shrink-0 cpk:[&_svg]:shrink-0 cpk:outline-none cpk:focus-visible:border-ring cpk:focus-visible:ring-ring/50 cpk:focus-visible:ring-[3px] cpk:aria-invalid:ring-destructive/20 cpk:dark:aria-invalid:ring-destructive/40 cpk:aria-invalid:border-destructive", {
 		variants: {
 			variant: {
-				default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
-				destructive: "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
-				outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
-				secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
-				ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50 cursor-pointer",
-				link: "text-primary underline-offset-4 hover:underline",
+				default: "cpk:bg-primary cpk:text-primary-foreground cpk:shadow-xs cpk:hover:bg-primary/90",
+				destructive: "cpk:bg-destructive cpk:text-white cpk:shadow-xs cpk:hover:bg-destructive/90 cpk:focus-visible:ring-destructive/20 cpk:dark:focus-visible:ring-destructive/40 cpk:dark:bg-destructive/60",
+				outline: "cpk:border cpk:bg-background cpk:shadow-xs cpk:hover:bg-accent cpk:hover:text-accent-foreground cpk:dark:bg-input/30 cpk:dark:border-input cpk:dark:hover:bg-input/50",
+				secondary: "cpk:bg-secondary cpk:text-secondary-foreground cpk:shadow-xs cpk:hover:bg-secondary/80",
+				ghost: "cpk:hover:bg-accent cpk:hover:text-accent-foreground cpk:dark:hover:bg-accent/50 cpk:cursor-pointer",
+				link: "cpk:text-primary cpk:underline-offset-4 cpk:hover:underline",
 				assistantMessageToolbarButton: [
-					"cursor-pointer",
-					"p-0 text-[rgb(93,93,93)] hover:bg-[#E8E8E8]",
-					"dark:text-[rgb(243,243,243)] dark:hover:bg-[#303030]",
-					"h-8 w-8",
-					"transition-colors",
-					"hover:text-[rgb(93,93,93)]",
-					"dark:hover:text-[rgb(243,243,243)]"
+					"cpk:cursor-pointer",
+					"cpk:p-0 cpk:text-[rgb(93,93,93)] cpk:hover:bg-[#E8E8E8]",
+					"cpk:dark:text-[rgb(243,243,243)] cpk:dark:hover:bg-[#303030]",
+					"cpk:h-8 cpk:w-8",
+					"cpk:transition-colors",
+					"cpk:hover:text-[rgb(93,93,93)]",
+					"cpk:dark:hover:text-[rgb(243,243,243)]"
 				],
 				chatInputToolbarPrimary: [
-					"cursor-pointer",
-					"bg-black text-white",
-					"dark:bg-white dark:text-black dark:focus-visible:outline-white",
-					"rounded-full",
-					"transition-colors",
-					"focus:outline-none",
-					"hover:opacity-70 disabled:hover:opacity-100",
-					"disabled:cursor-not-allowed disabled:bg-[#00000014] disabled:text-[rgb(13,13,13)]",
-					"dark:disabled:bg-[#454545] dark:disabled:text-white "
+					"cpk:cursor-pointer",
+					"cpk:bg-black cpk:text-white",
+					"cpk:dark:bg-white cpk:dark:text-black cpk:dark:focus-visible:outline-white",
+					"cpk:rounded-full",
+					"cpk:transition-colors",
+					"cpk:focus:outline-none",
+					"cpk:hover:opacity-70 cpk:disabled:hover:opacity-100",
+					"cpk:disabled:cursor-not-allowed cpk:disabled:bg-[#00000014] cpk:disabled:text-[rgb(13,13,13)]",
+					"cpk:dark:disabled:bg-[#454545] cpk:dark:disabled:text-white "
 				],
 				chatInputToolbarSecondary: [
-					"cursor-pointer",
-					"bg-transparent text-[#444444]",
-					"dark:text-white dark:border-[#404040]",
-					"rounded-full",
-					"transition-colors",
-					"focus:outline-none",
-					"hover:bg-[#f8f8f8] hover:text-[#333333]",
-					"dark:hover:bg-[#404040] dark:hover:text-[#FFFFFF]",
-					"disabled:cursor-not-allowed disabled:opacity-50",
-					"disabled:hover:bg-transparent disabled:hover:text-[#444444]",
-					"dark:disabled:hover:bg-transparent dark:disabled:hover:text-[#CCCCCC]"
+					"cpk:cursor-pointer",
+					"cpk:bg-transparent cpk:text-[#444444]",
+					"cpk:dark:text-white cpk:dark:border-[#404040]",
+					"cpk:rounded-full",
+					"cpk:transition-colors",
+					"cpk:focus:outline-none",
+					"cpk:hover:bg-[#f8f8f8] cpk:hover:text-[#333333]",
+					"cpk:dark:hover:bg-[#404040] cpk:dark:hover:text-[#FFFFFF]",
+					"cpk:disabled:cursor-not-allowed cpk:disabled:opacity-50",
+					"cpk:disabled:hover:bg-transparent cpk:disabled:hover:text-[#444444]",
+					"cpk:dark:disabled:hover:bg-transparent cpk:dark:disabled:hover:text-[#CCCCCC]"
 				]
 			},
 			size: {
-				default: "h-9 px-4 py-2 has-[>svg]:px-3",
-				sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
-				lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
-				icon: "size-9",
-				chatInputToolbarIcon: ["h-9 w-9 rounded-full"],
+				default: "cpk:h-9 cpk:px-4 cpk:py-2 cpk:has-[>svg]:px-3",
+				sm: "cpk:h-8 cpk:rounded-md cpk:gap-1.5 cpk:px-3 cpk:has-[>svg]:px-2.5",
+				lg: "cpk:h-10 cpk:rounded-md cpk:px-6 cpk:has-[>svg]:px-4",
+				icon: "cpk:size-9",
+				chatInputToolbarIcon: ["cpk:h-9 cpk:w-9 cpk:rounded-full"],
 				chatInputToolbarIconLabel: [
-					"h-9 px-3 rounded-full",
-					"gap-2",
-					"font-normal"
+					"cpk:h-9 cpk:px-3 cpk:rounded-full",
+					"cpk:gap-2",
+					"cpk:font-normal"
 				]
 			}
 		},
@@ -209,11 +210,12 @@ _radix_ui_react_dropdown_menu = __toESM(_radix_ui_react_dropdown_menu);
 	}
 	function TooltipContent({ className, sideOffset = 0, children, ...props }) {
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_tooltip.Portal, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_radix_ui_react_tooltip.Content, {
+			"data-copilotkit": true,
 			"data-slot": "tooltip-content",
 			sideOffset,
-			className: cn("bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance", className),
+			className: cn("cpk:bg-primary cpk:text-primary-foreground cpk:animate-in cpk:fade-in-0 cpk:zoom-in-95 cpk:data-[state=closed]:animate-out cpk:data-[state=closed]:fade-out-0 cpk:data-[state=closed]:zoom-out-95 cpk:data-[side=bottom]:slide-in-from-top-2 cpk:data-[side=left]:slide-in-from-right-2 cpk:data-[side=right]:slide-in-from-left-2 cpk:data-[side=top]:slide-in-from-bottom-2 cpk:z-50 cpk:w-fit cpk:origin-(--radix-tooltip-content-transform-origin) cpk:rounded-md cpk:px-3 cpk:py-1.5 cpk:text-xs cpk:text-balance", className),
 			...props,
-			children: [children, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_tooltip.Arrow, { className: "bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" })]
+			children: [children, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_tooltip.Arrow, { className: "cpk:bg-primary cpk:fill-primary cpk:z-50 cpk:size-2.5 cpk:translate-y-[calc(-50%_-_2px)] cpk:rotate-45 cpk:rounded-[2px]" })]
 		}) });
 	}
 
@@ -233,9 +235,10 @@ _radix_ui_react_dropdown_menu = __toESM(_radix_ui_react_dropdown_menu);
 	}
 	function DropdownMenuContent({ className, sideOffset = 4, ...props }) {
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dropdown_menu.Portal, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dropdown_menu.Content, {
+			"data-copilotkit": true,
 			"data-slot": "dropdown-menu-content",
 			sideOffset,
-			className: cn("bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md", className),
+			className: cn("cpk:bg-popover cpk:text-popover-foreground cpk:data-[state=open]:animate-in cpk:data-[state=closed]:animate-out cpk:data-[state=closed]:fade-out-0 cpk:data-[state=open]:fade-in-0 cpk:data-[state=closed]:zoom-out-95 cpk:data-[state=open]:zoom-in-95 cpk:data-[side=bottom]:slide-in-from-top-2 cpk:data-[side=left]:slide-in-from-right-2 cpk:data-[side=right]:slide-in-from-left-2 cpk:data-[side=top]:slide-in-from-bottom-2 cpk:z-50 cpk:max-h-(--radix-dropdown-menu-content-available-height) cpk:min-w-[8rem] cpk:origin-(--radix-dropdown-menu-content-transform-origin) cpk:overflow-x-hidden cpk:overflow-y-auto cpk:rounded-md cpk:border cpk:p-1 cpk:shadow-md", className),
 			...props
 		}) });
 	}
@@ -244,14 +247,14 @@ _radix_ui_react_dropdown_menu = __toESM(_radix_ui_react_dropdown_menu);
 			"data-slot": "dropdown-menu-item",
 			"data-inset": inset,
 			"data-variant": variant,
-			className: cn("focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+			className: cn("cpk:focus:bg-accent cpk:focus:text-accent-foreground cpk:data-[variant=destructive]:text-destructive cpk:data-[variant=destructive]:focus:bg-destructive/10 cpk:dark:data-[variant=destructive]:focus:bg-destructive/20 cpk:data-[variant=destructive]:focus:text-destructive cpk:data-[variant=destructive]:*:[svg]:!text-destructive cpk:[&_svg:not([class*='text-'])]:text-muted-foreground cpk:relative cpk:flex cpk:cursor-default cpk:items-center cpk:gap-2 cpk:rounded-sm cpk:px-2 cpk:py-1.5 cpk:text-sm cpk:outline-hidden cpk:select-none cpk:data-[disabled]:pointer-events-none cpk:data-[disabled]:opacity-50 cpk:data-[inset]:pl-8 cpk:[&_svg]:pointer-events-none cpk:[&_svg]:shrink-0 cpk:[&_svg:not([class*='size-'])]:size-4", className),
 			...props
 		});
 	}
 	function DropdownMenuSeparator({ className, ...props }) {
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dropdown_menu.Separator, {
 			"data-slot": "dropdown-menu-separator",
-			className: cn("bg-border -mx-1 my-1 h-px", className),
+			className: cn("cpk:bg-border cpk:-mx-1 cpk:my-1 cpk:h-px", className),
 			...props
 		});
 	}
@@ -265,15 +268,15 @@ _radix_ui_react_dropdown_menu = __toESM(_radix_ui_react_dropdown_menu);
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_radix_ui_react_dropdown_menu.SubTrigger, {
 			"data-slot": "dropdown-menu-sub-trigger",
 			"data-inset": inset,
-			className: cn("focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8", className),
+			className: cn("cpk:focus:bg-accent cpk:focus:text-accent-foreground cpk:data-[state=open]:bg-accent cpk:data-[state=open]:text-accent-foreground cpk:flex cpk:cursor-default cpk:items-center cpk:rounded-sm cpk:px-2 cpk:py-1.5 cpk:text-sm cpk:outline-hidden cpk:select-none cpk:data-[inset]:pl-8", className),
 			...props,
-			children: [children, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronRightIcon, { className: "ml-auto size-4" })]
+			children: [children, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronRightIcon, { className: "cpk:ml-auto cpk:size-4" })]
 		});
 	}
 	function DropdownMenuSubContent({ className, ...props }) {
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dropdown_menu.SubContent, {
 			"data-slot": "dropdown-menu-sub-content",
-			className: cn("bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg", className),
+			className: cn("cpk:bg-popover cpk:text-popover-foreground cpk:data-[state=open]:animate-in cpk:data-[state=closed]:animate-out cpk:data-[state=closed]:fade-out-0 cpk:data-[state=open]:fade-in-0 cpk:data-[state=closed]:zoom-out-95 cpk:data-[state=open]:zoom-in-95 cpk:data-[side=bottom]:slide-in-from-top-2 cpk:data-[side=left]:slide-in-from-right-2 cpk:data-[side=right]:slide-in-from-left-2 cpk:data-[side=top]:slide-in-from-bottom-2 cpk:z-50 cpk:min-w-[8rem] cpk:origin-(--radix-dropdown-menu-content-transform-origin) cpk:overflow-hidden cpk:rounded-md cpk:border cpk:p-1 cpk:shadow-lg", className),
 			...props
 		});
 	}
@@ -470,11 +473,11 @@ _radix_ui_react_dropdown_menu = __toESM(_radix_ui_react_dropdown_menu);
 			cleanup
 		]);
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: (0, tailwind_merge.twMerge)("w-full py-3 px-5", className),
+			className: (0, tailwind_merge.twMerge)("cpk:w-full cpk:py-3 cpk:px-5", className),
 			...divProps,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("canvas", {
 				ref: canvasRef,
-				className: "block w-full h-[26px]"
+				className: "cpk:block cpk:w-full cpk:h-[26px]"
 			})
 		});
 	});
@@ -762,7 +765,7 @@ _radix_ui_react_dropdown_menu = __toESM(_radix_ui_react_dropdown_menu);
 			onChange: handleChange,
 			onKeyDown: handleKeyDown,
 			autoFocus,
-			className: (0, tailwind_merge.twMerge)("w-full py-3", isExpanded ? "px-5" : "pr-5")
+			className: (0, tailwind_merge.twMerge)("cpk:w-full cpk:py-3", isExpanded ? "cpk:px-5" : "cpk:pr-5")
 		});
 		const isProcessing = mode !== "transcribe" && isRunning;
 		const canSend = resolvedValue.trim().length > 0 && !!onSubmitMessage;
@@ -778,7 +781,7 @@ _radix_ui_react_dropdown_menu = __toESM(_radix_ui_react_dropdown_menu);
 		const BoundSendButton = renderSlot(sendButton, CopilotChatInput.SendButton, {
 			onClick: handleSendButtonClick,
 			disabled: isProcessing ? !canStop : !canSend,
-			children: isProcessing && canStop ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Square, { className: "size-[18px] fill-current" }) : void 0
+			children: isProcessing && canStop ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Square, { className: "cpk:size-[18px] cpk:fill-current" }) : void 0
 		});
 		const BoundStartTranscribeButton = renderSlot(startTranscribeButton, CopilotChatInput.StartTranscribeButton, { onClick: onStartTranscribe });
 		const BoundCancelTranscribeButton = renderSlot(cancelTranscribeButton, CopilotChatInput.CancelTranscribeButton, { onClick: onCancelTranscribe });
@@ -800,29 +803,36 @@ _radix_ui_react_dropdown_menu = __toESM(_radix_ui_react_dropdown_menu);
 		});
 		const BoundDisclaimer = renderSlot(disclaimer, CopilotChatInput.Disclaimer, {});
 		const shouldShowDisclaimer = showDisclaimer !== null && showDisclaimer !== void 0 ? showDisclaimer : positioning === "absolute";
-		if (children) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: children({
-			textArea: BoundTextArea,
-			audioRecorder: BoundAudioRecorder,
-			sendButton: BoundSendButton,
-			startTranscribeButton: BoundStartTranscribeButton,
-			cancelTranscribeButton: BoundCancelTranscribeButton,
-			finishTranscribeButton: BoundFinishTranscribeButton,
-			addMenuButton: BoundAddMenuButton,
-			disclaimer: BoundDisclaimer,
-			onSubmitMessage,
-			onStop,
-			isRunning,
-			onStartTranscribe,
-			onCancelTranscribe,
-			onFinishTranscribe,
-			onAddFile,
-			mode,
-			toolsMenu,
-			autoFocus,
-			positioning,
-			keyboardHeight,
-			showDisclaimer: shouldShowDisclaimer
-		}) });
+		if (children) {
+			const childProps = {
+				textArea: BoundTextArea,
+				audioRecorder: BoundAudioRecorder,
+				sendButton: BoundSendButton,
+				startTranscribeButton: BoundStartTranscribeButton,
+				cancelTranscribeButton: BoundCancelTranscribeButton,
+				finishTranscribeButton: BoundFinishTranscribeButton,
+				addMenuButton: BoundAddMenuButton,
+				disclaimer: BoundDisclaimer,
+				onSubmitMessage,
+				onStop,
+				isRunning,
+				onStartTranscribe,
+				onCancelTranscribe,
+				onFinishTranscribe,
+				onAddFile,
+				mode,
+				toolsMenu,
+				autoFocus,
+				positioning,
+				keyboardHeight,
+				showDisclaimer: shouldShowDisclaimer
+			};
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				"data-copilotkit": true,
+				style: { display: "contents" },
+				children: children(childProps)
+			});
+		}
 		const handleContainerClick = (e) => {
 			const target = e.target;
 			if (target.tagName !== "BUTTON" && !target.closest("button") && inputRef.current && mode === "input") inputRef.current.focus();
@@ -984,10 +994,10 @@ _radix_ui_react_dropdown_menu = __toESM(_radix_ui_react_dropdown_menu);
 			role: "listbox",
 			"aria-label": "Slash commands",
 			ref: slashMenuRef,
-			className: "absolute bottom-full left-0 right-0 z-30 mb-2 max-h-64 overflow-y-auto rounded-lg border border-border bg-white shadow-lg dark:border-[#3a3a3a] dark:bg-[#1f1f1f]",
+			className: "cpk:absolute cpk:bottom-full cpk:left-0 cpk:right-0 cpk:z-30 cpk:mb-2 cpk:max-h-64 cpk:overflow-y-auto cpk:rounded-lg cpk:border cpk:border-border cpk:bg-white cpk:shadow-lg cpk:dark:border-[#3a3a3a] cpk:dark:bg-[#1f1f1f]",
 			style: { maxHeight: `${SLASH_MENU_MAX_VISIBLE_ITEMS * SLASH_MENU_ITEM_HEIGHT_PX}px` },
 			children: filteredCommands.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "px-3 py-2 text-sm text-muted-foreground",
+				className: "cpk:px-3 cpk:py-2 cpk:text-sm cpk:text-muted-foreground",
 				children: "No commands found"
 			}) : filteredCommands.map((item, index) => {
 				const isActive = index === slashHighlightIndex;
@@ -997,7 +1007,7 @@ _radix_ui_react_dropdown_menu = __toESM(_radix_ui_react_dropdown_menu);
 					"aria-selected": isActive,
 					"data-active": isActive ? "true" : void 0,
 					"data-slash-index": index,
-					className: (0, tailwind_merge.twMerge)("w-full px-3 py-2 text-left text-sm transition-colors", "hover:bg-muted dark:hover:bg-[#2f2f2f]", isActive ? "bg-muted dark:bg-[#2f2f2f]" : "bg-transparent"),
+					className: (0, tailwind_merge.twMerge)("cpk:w-full cpk:px-3 cpk:py-2 cpk:text-left cpk:text-sm cpk:transition-colors", "cpk:hover:bg-muted cpk:dark:hover:bg-[#2f2f2f]", isActive ? "cpk:bg-muted cpk:dark:bg-[#2f2f2f]" : "cpk:bg-transparent"),
 					onMouseEnter: () => setSlashHighlightIndex(index),
 					onMouseDown: (event) => {
 						event.preventDefault();
@@ -1008,58 +1018,59 @@ _radix_ui_react_dropdown_menu = __toESM(_radix_ui_react_dropdown_menu);
 			})
 		}) : null;
 		const inputPill = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: (0, tailwind_merge.twMerge)("flex w-full flex-col items-center justify-center", "cursor-text", "overflow-visible bg-clip-padding contain-inline-size", "bg-white dark:bg-[#303030]", "shadow-[0_4px_4px_0_#0000000a,0_0_1px_0_#0000009e] rounded-[28px]"),
+			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",
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				ref: gridRef,
-				className: (0, tailwind_merge.twMerge)("grid w-full gap-x-3 gap-y-3 px-3 py-2", isExpanded ? "grid-cols-[auto_minmax(0,1fr)_auto] grid-rows-[auto_auto]" : "grid-cols-[auto_minmax(0,1fr)_auto] items-center"),
+				className: (0, tailwind_merge.twMerge)("cpk:grid cpk:w-full cpk:gap-x-3 cpk:gap-y-3 cpk:px-3 cpk:py-2", isExpanded ? "cpk:grid-cols-[auto_minmax(0,1fr)_auto] cpk:grid-rows-[auto_auto]" : "cpk:grid-cols-[auto_minmax(0,1fr)_auto] cpk:items-center"),
 				"data-layout": isExpanded ? "expanded" : "compact",
 				children: [
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 						ref: addButtonContainerRef,
-						className: (0, tailwind_merge.twMerge)("flex items-center", isExpanded ? "row-start-2" : "row-start-1", "col-start-1"),
+						className: (0, tailwind_merge.twMerge)("cpk:flex cpk:items-center", isExpanded ? "cpk:row-start-2" : "cpk:row-start-1", "cpk:col-start-1"),
 						children: BoundAddMenuButton
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: (0, tailwind_merge.twMerge)("relative flex min-w-0 flex-col min-h-[50px] justify-center", isExpanded ? "col-span-3 row-start-1" : "col-start-2 row-start-1"),
+						className: (0, tailwind_merge.twMerge)("cpk:relative cpk:flex cpk:min-w-0 cpk:flex-col cpk:min-h-[50px] cpk:justify-center", isExpanded ? "cpk:col-span-3 cpk:row-start-1" : "cpk:col-start-2 cpk:row-start-1"),
 						children: mode === "transcribe" ? BoundAudioRecorder : mode === "processing" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: "flex w-full items-center justify-center py-3 px-5",
-							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Loader2, { className: "size-[26px] animate-spin text-muted-foreground" })
+							className: "cpk:flex cpk:w-full cpk:items-center cpk:justify-center cpk:py-3 cpk:px-5",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Loader2, { className: "cpk:size-[26px] cpk:animate-spin cpk:text-muted-foreground" })
 						}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [BoundTextArea, slashMenu] })
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 						ref: actionsContainerRef,
-						className: (0, tailwind_merge.twMerge)("flex items-center justify-end gap-2", isExpanded ? "col-start-3 row-start-2" : "col-start-3 row-start-1"),
+						className: (0, tailwind_merge.twMerge)("cpk:flex cpk:items-center cpk:justify-end cpk:gap-2", isExpanded ? "cpk:col-start-3 cpk:row-start-2" : "cpk:col-start-3 cpk:row-start-1"),
 						children: mode === "transcribe" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [onCancelTranscribe && BoundCancelTranscribeButton, onFinishTranscribe && BoundFinishTranscribeButton] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [onStartTranscribe && BoundStartTranscribeButton, BoundSendButton] })
 					})
 				]
 			})
 		});
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			"data-copilotkit": true,
 			ref: containerRef,
-			className: cn(positioning === "absolute" && "absolute bottom-0 left-0 right-0 z-20 pointer-events-none", className),
+			className: cn(positioning === "absolute" && "cpk:absolute cpk:bottom-0 cpk:left-0 cpk:right-0 cpk:z-20 cpk:pointer-events-none", className),
 			style: {
 				transform: keyboardHeight > 0 ? `translateY(-${keyboardHeight}px)` : void 0,
 				transition: "transform 0.2s ease-out"
 			},
 			...props,
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "max-w-3xl mx-auto py-0 px-4 sm:px-0 [div[data-sidebar-chat]_&]:px-8 [div[data-popup-chat]_&]:px-4 pointer-events-auto",
+				className: "cpk:max-w-3xl cpk:mx-auto cpk:py-0 cpk:px-4 cpk:sm:px-0 cpk:[div[data-sidebar-chat]_&]:px-8 cpk:[div[data-popup-chat]_&]:px-4 cpk:pointer-events-auto",
 				children: inputPill
 			}), shouldShowDisclaimer && BoundDisclaimer]
 		});
 	}
 	(function(_CopilotChatInput) {
 		_CopilotChatInput.SendButton = ({ className, children, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "mr-[10px]",
+			className: "cpk:mr-[10px]",
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
 				type: "button",
 				variant: "chatInputToolbarPrimary",
 				size: "chatInputToolbarIcon",
 				className,
 				...props,
-				children: children !== null && children !== void 0 ? children : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ArrowUp, { className: "size-[18px]" })
+				children: children !== null && children !== void 0 ? children : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ArrowUp, { className: "cpk:size-[18px]" })
 			})
 		});
 		const ToolbarButton = _CopilotChatInput.ToolbarButton = ({ icon, labelKey, defaultClassName, className, ...props }) => {
@@ -1082,21 +1093,21 @@ _radix_ui_react_dropdown_menu = __toESM(_radix_ui_react_dropdown_menu);
 			})] });
 		};
 		_CopilotChatInput.StartTranscribeButton = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarButton, {
-			icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Mic, { className: "size-[18px]" }),
+			icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Mic, { className: "cpk:size-[18px]" }),
 			labelKey: "chatInputToolbarStartTranscribeButtonLabel",
-			defaultClassName: "mr-2",
+			defaultClassName: "cpk:mr-2",
 			...props
 		});
 		_CopilotChatInput.CancelTranscribeButton = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarButton, {
-			icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.X, { className: "size-[18px]" }),
+			icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.X, { className: "cpk:size-[18px]" }),
 			labelKey: "chatInputToolbarCancelTranscribeButtonLabel",
-			defaultClassName: "mr-2",
+			defaultClassName: "cpk:mr-2",
 			...props
 		});
 		_CopilotChatInput.FinishTranscribeButton = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarButton, {
-			icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Check, { className: "size-[18px]" }),
+			icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Check, { className: "cpk:size-[18px]" }),
 			labelKey: "chatInputToolbarFinishTranscribeButtonLabel",
-			defaultClassName: "mr-[10px]",
+			defaultClassName: "cpk:mr-[10px]",
 			...props
 		});
 		_CopilotChatInput.AddMenuButton = ({ className, toolsMenu, onAddFile, disabled, ...props }) => {
@@ -1141,18 +1152,18 @@ _radix_ui_react_dropdown_menu = __toESM(_radix_ui_react_dropdown_menu);
 						type: "button",
 						variant: "chatInputToolbarSecondary",
 						size: "chatInputToolbarIcon",
-						className: (0, tailwind_merge.twMerge)("ml-1", className),
+						className: (0, tailwind_merge.twMerge)("cpk:ml-1", className),
 						disabled: isDisabled,
 						...props,
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Plus, { className: "size-[20px]" })
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Plus, { className: "cpk:size-[20px]" })
 					})
 				})
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipContent, {
 				side: "bottom",
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
-					className: "flex items-center gap-1 text-xs font-medium",
+					className: "cpk:flex cpk:items-center cpk:gap-1 cpk:text-xs cpk:font-medium",
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: "Add files and more" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("code", {
-						className: "rounded bg-[#4a4a4a] px-1 py-[1px] font-mono text-[11px] text-white dark:bg-[#e0e0e0] dark:text-black",
+						className: "cpk:rounded cpk:bg-[#4a4a4a] cpk:px-1 cpk:py-[1px] cpk:font-mono cpk:text-[11px] cpk:text-white cpk:dark:bg-[#e0e0e0] cpk:dark:text-black",
 						children: "/"
 					})]
 				})
@@ -1191,7 +1202,7 @@ _radix_ui_react_dropdown_menu = __toESM(_radix_ui_react_dropdown_menu);
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("textarea", {
 				ref: internalTextareaRef,
 				placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : labels.chatInputPlaceholder,
-				className: (0, tailwind_merge.twMerge)("bg-transparent outline-none antialiased font-regular leading-relaxed text-[16px] placeholder:text-[#00000077] dark:placeholder:text-[#fffc]", className),
+				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: {
 					overflow: "auto",
 					resize: "none",
@@ -1207,7 +1218,7 @@ _radix_ui_react_dropdown_menu = __toESM(_radix_ui_react_dropdown_menu);
 			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)("div", {
-				className: cn("text-center text-xs text-muted-foreground py-3 px-4 max-w-3xl mx-auto", className),
+				className: cn("cpk:text-center cpk:text-xs cpk:text-muted-foreground cpk:py-3 cpk:px-4 cpk:max-w-3xl cpk:mx-auto", className),
 				...props,
 				children: labels.chatDisclaimerText
 			});
@@ -1787,6 +1798,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 : [];
@@ -1810,6 +1822,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);
 		}
@@ -2237,21 +2263,34 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 	* This hook is a convenience wrapper around `useFrontendTool` that:
 	* - builds a model-facing tool description,
 	* - forwards optional Zod parameters,
-	* - renders your component with tool call args.
+	* - renders your component with tool call parameters.
 	*
 	* Use this when you want to display a typed visual component for a tool call
 	* without manually wiring a full frontend tool object.
 	*
-	* @typeParam T - Shape of tool args expected by the component.
+	* When `parameters` is provided, render props are inferred from the schema
+	* via `z.infer`. When omitted, the render component may accept any props.
+	*
+	* @typeParam TSchema - Zod schema describing tool parameters, or `undefined` when no schema is given.
 	* @param config - Tool registration config.
 	* @param deps - Optional dependencies to refresh registration (same semantics as `useEffect`).
 	*
 	* @example
 	* ```tsx
+	* // Without parameters — render accepts any props
+	* useComponent({
+	*   name: "showGreeting",
+	*   render: ({ message }: { message: string }) => <div>{message}</div>,
+	* });
+	* ```
+	*
+	* @example
+	* ```tsx
+	* // With parameters — render props inferred from schema
 	* useComponent({
 	*   name: "showWeatherCard",
 	*   parameters: z.object({ city: z.string() }),
-	*   component: ({ city }: { city: string }) => <div>{city}</div>,
+	*   render: ({ city }) => <div>{city}</div>,
 	* });
 	* ```
 	*
@@ -2261,7 +2300,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 	*   {
 	*     name: "renderProfile",
 	*     parameters: z.object({ userId: z.string() }),
-	*     component: ProfileCard,
+	*     render: ProfileCard,
 	*     agentId: "support-agent",
 	*   },
 	*   [selectedAgentId],
@@ -2276,7 +2315,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 			description: fullDescription,
 			parameters: config.parameters,
 			render: ({ args }) => {
-				const Component = config.component;
+				const Component = config.render;
 				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, { ...args });
 			},
 			agentId: config.agentId
@@ -2306,7 +2345,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 	* - keeps renderer entries on cleanup so historical chat tool calls can still render,
 	* - refreshes registration when `deps` change.
 	*
-	* @typeParam S - Zod schema type describing tool call args.
+	* @typeParam S - Zod schema type describing tool call parameters.
 	* @param config - Renderer config for wildcard or named tools.
 	* @param deps - Optional dependencies to refresh registration.
 	*
@@ -2315,9 +2354,9 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 	* useRenderTool(
 	*   {
 	*     name: "searchDocs",
-	*     args: z.object({ query: z.string() }),
-	*     render: ({ status, args, result }) => {
-	*       if (status === "executing") return <div>Searching {args.query}</div>;
+	*     parameters: z.object({ query: z.string() }),
+	*     render: ({ status, parameters, result }) => {
+	*       if (status === "executing") return <div>Searching {parameters.query}</div>;
 	*       if (status === "complete") return <div>{result}</div>;
 	*       return <div>Preparing...</div>;
 	*     },
@@ -2331,7 +2370,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 	* useRenderTool(
 	*   {
 	*     name: "summarize",
-	*     args: z.object({ text: z.string() }),
+	*     parameters: z.object({ text: z.string() }),
 	*     agentId: "research-agent",
 	*     render: ({ name, status }) => <div>{name}: {status}</div>,
 	*   },
@@ -2343,14 +2382,20 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 		const { copilotkit } = useCopilotKit();
 		const extraDeps = deps !== null && deps !== void 0 ? deps : EMPTY_DEPS;
 		(0, react.useEffect)(() => {
-			const renderer = config.name === "*" && !config.args ? defineToolCallRenderer({
+			const renderer = config.name === "*" && !config.parameters ? defineToolCallRenderer({
 				name: "*",
-				render: config.render,
+				render: (props) => config.render({
+					...props,
+					parameters: props.args
+				}),
 				...config.agentId ? { agentId: config.agentId } : {}
 			}) : defineToolCallRenderer({
 				name: config.name,
-				args: config.args,
-				render: config.render,
+				args: config.parameters,
+				render: (props) => config.render({
+					...props,
+					parameters: props.args
+				}),
 				...config.agentId ? { agentId: config.agentId } : {}
 			});
 			const keyOf = (rc) => {
@@ -2415,7 +2460,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 			render: (_config$render = config === null || config === void 0 ? void 0 : config.render) !== null && _config$render !== void 0 ? _config$render : DefaultToolCallRenderer
 		}, deps);
 	}
-	function DefaultToolCallRenderer({ name, args, status, result }) {
+	function DefaultToolCallRenderer({ name, parameters, status, result }) {
 		const [isExpanded, setIsExpanded] = (0, react.useState)(false);
 		const statusString = String(status);
 		const isActive = statusString === "inProgress" || statusString === "executing";
@@ -2531,7 +2576,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 							whiteSpace: "pre-wrap",
 							wordBreak: "break-word"
 						},
-						children: JSON.stringify(args !== null && args !== void 0 ? args : {}, null, 2)
+						children: JSON.stringify(parameters !== null && parameters !== void 0 ? parameters : {}, null, 2)
 					})] }), result !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 						style: {
 							fontSize: "10px",
@@ -2926,6 +2971,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 = [] }) {
@@ -2957,7 +3166,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 		const boundReadAloudButton = renderSlot(readAloudButton, CopilotChatAssistantMessage.ReadAloudButton, { onClick: onReadAloud });
 		const boundRegenerateButton = renderSlot(regenerateButton, CopilotChatAssistantMessage.RegenerateButton, { onClick: onRegenerate });
 		const boundToolbar = renderSlot(toolbar, CopilotChatAssistantMessage.Toolbar, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "flex items-center gap-1",
+			className: "cpk:flex cpk:items-center cpk:gap-1",
 			children: [
 				boundCopyButton,
 				(onThumbsUp || thumbsUpButton) && boundThumbsUpButton,
@@ -2974,31 +3183,39 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 		const hasContent = !!(message.content && message.content.trim().length > 0);
 		const isLatestAssistantMessage = message.role === "assistant" && (messages === null || messages === void 0 || (_messages = messages[messages.length - 1]) === null || _messages === void 0 ? void 0 : _messages.id) === message.id;
 		const shouldShowToolbar = toolbarVisible && hasContent && !(isRunning && isLatestAssistantMessage);
-		if (children) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: children({
-			markdownRenderer: boundMarkdownRenderer,
-			toolbar: boundToolbar,
-			toolCallsView: boundToolCallsView,
-			copyButton: boundCopyButton,
-			thumbsUpButton: boundThumbsUpButton,
-			thumbsDownButton: boundThumbsDownButton,
-			readAloudButton: boundReadAloudButton,
-			regenerateButton: boundRegenerateButton,
-			message,
-			messages,
-			isRunning,
-			onThumbsUp,
-			onThumbsDown,
-			onReadAloud,
-			onRegenerate,
-			additionalToolbarItems,
-			toolbarVisible: shouldShowToolbar
-		}) });
+		if (children) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			"data-copilotkit": true,
+			style: { display: "contents" },
+			children: children({
+				markdownRenderer: boundMarkdownRenderer,
+				toolbar: boundToolbar,
+				toolCallsView: boundToolCallsView,
+				copyButton: boundCopyButton,
+				thumbsUpButton: boundThumbsUpButton,
+				thumbsDownButton: boundThumbsDownButton,
+				readAloudButton: boundReadAloudButton,
+				regenerateButton: boundRegenerateButton,
+				message,
+				messages,
+				isRunning,
+				onThumbsUp,
+				onThumbsDown,
+				onReadAloud,
+				onRegenerate,
+				additionalToolbarItems,
+				toolbarVisible: shouldShowToolbar
+			})
+		});
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: (0, tailwind_merge.twMerge)("prose max-w-full break-words dark:prose-invert", className),
+			"data-copilotkit": true,
+			className: (0, tailwind_merge.twMerge)(className),
 			...props,
 			"data-message-id": message.id,
 			children: [
-				boundMarkdownRenderer,
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "cpk:prose cpk:max-w-full cpk:break-words cpk:dark:prose-invert",
+					children: boundMarkdownRenderer
+				}),
 				boundToolCallsView,
 				shouldShowToolbar && boundToolbar
 			]
@@ -3011,7 +3228,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", {
-			className: (0, tailwind_merge.twMerge)("w-full bg-transparent flex items-center -ml-[5px] -mt-[0px]", className),
+			className: (0, tailwind_merge.twMerge)("cpk:w-full cpk:bg-transparent cpk:flex cpk:items-center cpk:-ml-[5px] cpk:-mt-[0px]", className),
 			...props
 		});
 		const ToolbarButton = _CopilotChatAssistantMessage.ToolbarButton = ({ title, children, ...props }) => {
@@ -3044,7 +3261,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 				onClick: handleClick,
 				className,
 				...props,
-				children: copied ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Check, { className: "size-[18px]" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Copy, { className: "size-[18px]" })
+				children: copied ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Check, { className: "cpk:size-[18px]" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Copy, { className: "cpk:size-[18px]" })
 			});
 		};
 		_CopilotChatAssistantMessage.ThumbsUpButton = ({ title, ...props }) => {
@@ -3054,7 +3271,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarButton, {
 				title: title || labels.assistantMessageToolbarThumbsUpLabel,
 				...props,
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ThumbsUp, { className: "size-[18px]" })
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ThumbsUp, { className: "cpk:size-[18px]" })
 			});
 		};
 		_CopilotChatAssistantMessage.ThumbsDownButton = ({ title, ...props }) => {
@@ -3064,7 +3281,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarButton, {
 				title: title || labels.assistantMessageToolbarThumbsDownLabel,
 				...props,
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ThumbsDown, { className: "size-[18px]" })
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ThumbsDown, { className: "cpk:size-[18px]" })
 			});
 		};
 		_CopilotChatAssistantMessage.ReadAloudButton = ({ title, ...props }) => {
@@ -3074,7 +3291,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarButton, {
 				title: title || labels.assistantMessageToolbarReadAloudLabel,
 				...props,
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Volume2, { className: "size-[20px]" })
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Volume2, { className: "cpk:size-[20px]" })
 			});
 		};
 		_CopilotChatAssistantMessage.RegenerateButton = ({ title, ...props }) => {
@@ -3084,7 +3301,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarButton, {
 				title: title || labels.assistantMessageToolbarRegenerateLabel,
 				...props,
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.RefreshCw, { className: "size-[18px]" })
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.RefreshCw, { className: "cpk:size-[18px]" })
 			});
 		};
 	})(CopilotChatAssistantMessage || (CopilotChatAssistantMessage = {}));
@@ -3126,7 +3343,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 		});
 		const showBranchNavigation = numberOfBranches && numberOfBranches > 1 && onSwitchToBranch;
 		const BoundToolbar = renderSlot(toolbar, CopilotChatUserMessage.Toolbar, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "flex items-center gap-1 justify-end",
+			className: "cpk:flex cpk:items-center cpk:gap-1 cpk:justify-end",
 			children: [
 				additionalToolbarItems,
 				BoundCopyButton,
@@ -3134,19 +3351,24 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 				showBranchNavigation && BoundBranchNavigation
 			]
 		}) });
-		if (children) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: children({
-			messageRenderer: BoundMessageRenderer,
-			toolbar: BoundToolbar,
-			copyButton: BoundCopyButton,
-			editButton: BoundEditButton,
-			branchNavigation: BoundBranchNavigation,
-			message,
-			branchIndex,
-			numberOfBranches,
-			additionalToolbarItems
-		}) });
+		if (children) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			"data-copilotkit": true,
+			style: { display: "contents" },
+			children: children({
+				messageRenderer: BoundMessageRenderer,
+				toolbar: BoundToolbar,
+				copyButton: BoundCopyButton,
+				editButton: BoundEditButton,
+				branchNavigation: BoundBranchNavigation,
+				message,
+				branchIndex,
+				numberOfBranches,
+				additionalToolbarItems
+			})
+		});
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: (0, tailwind_merge.twMerge)("flex flex-col items-end group pt-10", className),
+			"data-copilotkit": true,
+			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,
 			children: [BoundMessageRenderer, BoundToolbar]
@@ -3154,16 +3376,16 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 	}
 	(function(_CopilotChatUserMessage) {
 		_CopilotChatUserMessage.Container = ({ children, className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: (0, tailwind_merge.twMerge)("flex flex-col items-end group", className),
+			className: (0, tailwind_merge.twMerge)("cpk:flex cpk:flex-col cpk:items-end cpk:group", className),
 			...props,
 			children
 		});
 		_CopilotChatUserMessage.MessageRenderer = ({ content, className }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: (0, tailwind_merge.twMerge)("prose dark:prose-invert bg-muted relative max-w-[80%] rounded-[18px] px-4 py-1.5 data-[multiline]:py-3 inline-block whitespace-pre-wrap", className),
+			className: (0, tailwind_merge.twMerge)("cpk:prose cpk:dark:prose-invert cpk:bg-muted cpk:relative cpk:max-w-[80%] cpk:rounded-[18px] cpk:px-4 cpk:py-1.5 cpk:data-[multiline]:py-3 cpk:inline-block cpk:whitespace-pre-wrap", className),
 			children: content
 		});
 		_CopilotChatUserMessage.Toolbar = ({ className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: (0, tailwind_merge.twMerge)("w-full bg-transparent flex items-center justify-end -mr-[5px] mt-[4px] invisible group-hover:visible", className),
+			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
 		});
 		const ToolbarButton = _CopilotChatUserMessage.ToolbarButton = ({ title, children, className, ...props }) => {
@@ -3197,7 +3419,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 				onClick: handleClick,
 				className,
 				...props,
-				children: copied ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Check, { className: "size-[18px]" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Copy, { className: "size-[18px]" })
+				children: copied ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Check, { className: "cpk:size-[18px]" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Copy, { className: "cpk:size-[18px]" })
 			});
 		};
 		_CopilotChatUserMessage.EditButton = ({ className, title, ...props }) => {
@@ -3208,7 +3430,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 				title: title || labels.userMessageToolbarEditMessageLabel,
 				className,
 				...props,
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Edit, { className: "size-[18px]" })
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Edit, { className: "cpk:size-[18px]" })
 			});
 		};
 		_CopilotChatUserMessage.BranchNavigation = ({ className, currentBranch = 0, numberOfBranches = 1, onSwitchToBranch, message, ...props }) => {
@@ -3216,7 +3438,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", {
-				className: (0, tailwind_merge.twMerge)("flex items-center gap-1", className),
+				className: (0, tailwind_merge.twMerge)("cpk:flex cpk:items-center cpk:gap-1", className),
 				...props,
 				children: [
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
@@ -3228,11 +3450,11 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 							message
 						}),
 						disabled: !canGoPrev,
-						className: "h-6 w-6 p-0",
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronLeft, { className: "size-[20px]" })
+						className: "cpk:h-6 cpk:w-6 cpk:p-0",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronLeft, { className: "cpk:size-[20px]" })
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-						className: "text-sm text-muted-foreground px-0 font-medium",
+						className: "cpk:text-sm cpk:text-muted-foreground cpk:px-0 cpk:font-medium",
 						children: [
 							currentBranch + 1,
 							"/",
@@ -3248,8 +3470,8 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 							message
 						}),
 						disabled: !canGoNext,
-						className: "h-6 w-6 p-0",
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronRight, { className: "size-[20px]" })
+						className: "cpk:h-6 cpk:w-6 cpk:p-0",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronRight, { className: "cpk:size-[20px]" })
 					})
 				]
 			});
@@ -3318,16 +3540,20 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 			isOpen,
 			children: boundContent
 		});
-		if (children) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: children({
-			header: boundHeader,
-			contentView: boundContent,
-			toggle: boundToggle,
-			message,
-			messages,
-			isRunning
-		}) });
+		if (children) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			"data-copilotkit": true,
+			style: { display: "contents" },
+			children: children({
+				header: boundHeader,
+				contentView: boundContent,
+				toggle: boundToggle,
+				message,
+				messages,
+				isRunning
+			})
+		});
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: (0, tailwind_merge.twMerge)("my-1", className),
+			className: (0, tailwind_merge.twMerge)("cpk:my-1", className),
 			"data-message-id": message.id,
 			...props,
 			children: [boundHeader, boundToggle]
@@ -3338,44 +3564,44 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 			const isExpandable = !!hasContent;
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 				type: "button",
-				className: (0, tailwind_merge.twMerge)("inline-flex items-center gap-1 py-1 text-sm text-muted-foreground transition-colors select-none", isExpandable ? "hover:text-foreground cursor-pointer" : "cursor-default", className),
+				className: (0, tailwind_merge.twMerge)("cpk:inline-flex cpk:items-center cpk:gap-1 cpk:py-1 cpk:text-sm cpk:text-muted-foreground cpk:transition-colors cpk:select-none", isExpandable ? "cpk:hover:text-foreground cpk:cursor-pointer" : "cpk:cursor-default", className),
 				"aria-expanded": isExpandable ? isOpen : void 0,
 				...headerProps,
 				children: [
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: "font-medium",
+						className: "cpk:font-medium",
 						children: label
 					}),
 					isStreaming && !hasContent && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: "inline-flex items-center ml-1",
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "w-1.5 h-1.5 rounded-full bg-muted-foreground animate-pulse" })
+						className: "cpk:inline-flex cpk:items-center cpk:ml-1",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "cpk:w-1.5 cpk:h-1.5 cpk:rounded-full cpk:bg-muted-foreground cpk:animate-pulse" })
 					}),
 					headerChildren,
-					isExpandable && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronRight, { className: (0, tailwind_merge.twMerge)("size-3.5 shrink-0 transition-transform duration-200", isOpen && "rotate-90") })
+					isExpandable && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronRight, { className: (0, tailwind_merge.twMerge)("cpk:size-3.5 cpk:shrink-0 cpk:transition-transform cpk:duration-200", isOpen && "cpk:rotate-90") })
 				]
 			});
 		};
 		_CopilotChatReasoningMessage.Content = ({ isStreaming, hasContent, className, children: contentChildren, ...contentProps }) => {
 			if (!hasContent && !isStreaming) return null;
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: (0, tailwind_merge.twMerge)("pb-2 pt-1", className),
+				className: (0, tailwind_merge.twMerge)("cpk:pb-2 cpk:pt-1", className),
 				...contentProps,
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "text-sm text-muted-foreground",
+					className: "cpk:text-sm cpk:text-muted-foreground",
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(streamdown.Streamdown, { children: typeof contentChildren === "string" ? contentChildren : "" }), isStreaming && hasContent && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: "inline-flex items-center ml-1 align-middle",
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "w-2 h-2 rounded-full bg-muted-foreground animate-pulse-cursor" })
+						className: "cpk:inline-flex cpk:items-center cpk:ml-1 cpk:align-middle",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "cpk:w-2 cpk:h-2 cpk:rounded-full cpk:bg-muted-foreground cpk:animate-pulse-cursor" })
 					})]
 				})
 			});
 		};
 		_CopilotChatReasoningMessage.Toggle = ({ isOpen, className, children: toggleChildren, ...toggleProps }) => {
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: (0, tailwind_merge.twMerge)("grid transition-[grid-template-rows] duration-200 ease-in-out", className),
+				className: (0, tailwind_merge.twMerge)("cpk:grid cpk:transition-[grid-template-rows] cpk:duration-200 cpk:ease-in-out", className),
 				style: { gridTemplateRows: isOpen ? "1fr" : "0fr" },
 				...toggleProps,
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "overflow-hidden",
+					className: "cpk:overflow-hidden",
 					children: toggleChildren
 				})
 			});
@@ -3388,12 +3614,13 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 
 //#endregion
 //#region src/components/chat/CopilotChatSuggestionPill.tsx
-	const baseClasses = "group inline-flex h-7 sm:h-8 items-center gap-1 sm:gap-1.5 rounded-full border border-border/60 bg-background px-2.5 sm:px-3 text-[11px] sm:text-xs leading-none text-foreground transition-colors cursor-pointer hover:bg-accent/60 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:text-muted-foreground disabled:hover:bg-background disabled:hover:text-muted-foreground pointer-events-auto";
-	const labelClasses = "whitespace-nowrap font-medium leading-none";
+	const baseClasses = "group cpk:inline-flex cpk:h-7 cpk:sm:h-8 cpk:items-center cpk:gap-1 cpk:sm:gap-1.5 cpk:rounded-full cpk:border cpk:border-border/60 cpk:bg-background cpk:px-2.5 cpk:sm:px-3 cpk:text-[11px] cpk:sm:text-xs cpk:leading-none cpk:text-foreground cpk:transition-colors cpk:cursor-pointer cpk:hover:bg-accent/60 cpk:hover:text-foreground cpk:focus-visible:outline-none cpk:focus-visible:ring-2 cpk:focus-visible:ring-ring cpk:focus-visible:ring-offset-2 cpk:focus-visible:ring-offset-background cpk:disabled:cursor-not-allowed cpk:disabled:text-muted-foreground cpk:disabled:hover:bg-background cpk:disabled:hover:text-muted-foreground cpk:pointer-events-auto";
+	const labelClasses = "cpk:whitespace-nowrap cpk:font-medium cpk:leading-none";
 	const CopilotChatSuggestionPill = react.default.forwardRef(function CopilotChatSuggestionPill({ className, children, icon, isLoading, type, ...props }, ref) {
 		const showIcon = !isLoading && icon;
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 			ref,
+			"data-copilotkit": true,
 			"data-slot": "suggestion-pill",
 			className: cn(baseClasses, className),
 			type: type !== null && type !== void 0 ? type : "button",
@@ -3401,13 +3628,13 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 			disabled: isLoading || props.disabled,
 			...props,
 			children: [isLoading ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: "flex h-3.5 sm:h-4 w-3.5 sm:w-4 items-center justify-center text-muted-foreground",
+				className: "cpk:flex cpk:h-3.5 cpk:sm:h-4 cpk:w-3.5 cpk:sm:w-4 cpk:items-center cpk:justify-center cpk:text-muted-foreground",
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Loader2, {
-					className: "h-3.5 sm:h-4 w-3.5 sm:w-4 animate-spin",
+					className: "cpk:h-3.5 cpk:sm:h-4 cpk:w-3.5 cpk:sm:w-4 cpk:animate-spin",
 					"aria-hidden": "true"
 				})
 			}) : showIcon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: "flex h-3.5 sm:h-4 w-3.5 sm:w-4 items-center justify-center text-muted-foreground",
+				className: "cpk:flex cpk:h-3.5 cpk:sm:h-4 cpk:w-3.5 cpk:sm:w-4 cpk:items-center cpk:justify-center cpk:text-muted-foreground",
 				children: icon
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 				className: labelClasses,
@@ -3422,7 +3649,8 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 	const DefaultContainer = react.default.forwardRef(function DefaultContainer({ className, ...props }, ref) {
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			ref,
-			className: cn("flex flex-wrap items-center gap-1.5 sm:gap-2 pl-0 pr-4 sm:px-0 pointer-events-none", className),
+			"data-copilotkit": true,
+			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
 		});
 	});
@@ -3449,21 +3677,30 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 		const boundContainer = react.default.cloneElement(ContainerElement, void 0, suggestionElements);
 		if (typeof children === "function") {
 			var _suggestions$0$title, _suggestions$, _suggestions$2;
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: children({
-				container: boundContainer,
-				suggestion: renderSlot(suggestionSlot, CopilotChatSuggestionPill, {
-					children: (_suggestions$0$title = (_suggestions$ = suggestions[0]) === null || _suggestions$ === void 0 ? void 0 : _suggestions$.title) !== null && _suggestions$0$title !== void 0 ? _suggestions$0$title : "",
-					isLoading: suggestions.length > 0 ? loadingSet.has(0) || ((_suggestions$2 = suggestions[0]) === null || _suggestions$2 === void 0 ? void 0 : _suggestions$2.isLoading) === true : false,
-					type: "button"
-				}),
-				suggestions,
-				onSelectSuggestion,
-				loadingIndexes,
-				className,
-				...restProps
-			}) });
+			const sampleSuggestion = renderSlot(suggestionSlot, CopilotChatSuggestionPill, {
+				children: (_suggestions$0$title = (_suggestions$ = suggestions[0]) === null || _suggestions$ === void 0 ? void 0 : _suggestions$.title) !== null && _suggestions$0$title !== void 0 ? _suggestions$0$title : "",
+				isLoading: suggestions.length > 0 ? loadingSet.has(0) || ((_suggestions$2 = suggestions[0]) === null || _suggestions$2 === void 0 ? void 0 : _suggestions$2.isLoading) === true : false,
+				type: "button"
+			});
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				"data-copilotkit": true,
+				style: { display: "contents" },
+				children: children({
+					container: boundContainer,
+					suggestion: sampleSuggestion,
+					suggestions,
+					onSelectSuggestion,
+					loadingIndexes,
+					className,
+					...restProps
+				})
+			});
 		}
-		if (children) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [boundContainer, children] });
+		if (children) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			"data-copilotkit": true,
+			style: { display: "contents" },
+			children: [boundContainer, children]
+		});
 		return boundContainer;
 	});
 	CopilotChatSuggestionView.displayName = "CopilotChatSuggestionView";
@@ -3587,6 +3824,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;
@@ -3655,25 +3900,35 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 			}, `${message.id}-custom-after`));
 			return elements;
 		}).filter(Boolean);
-		if (children) return children({
-			messageElements,
-			messages,
-			isRunning
+		if (children) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			"data-copilotkit": true,
+			style: { display: "contents" },
+			children: children({
+				messageElements,
+				messages,
+				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", {
-			className: (0, tailwind_merge.twMerge)("flex flex-col", className),
+			"data-copilotkit": true,
+			className: (0, tailwind_merge.twMerge)("cpk:flex cpk:flex-col", className),
 			...props,
-			children: [messageElements, showCursor && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "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", {
-			className: (0, tailwind_merge.twMerge)("w-[11px] h-[11px] rounded-full bg-foreground animate-pulse-cursor ml-1", className),
+			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
 		});
 	};
@@ -3779,7 +4034,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 			suggestions,
 			loadingIndexes: suggestionLoadingIndexes,
 			onSelectSuggestion,
-			className: "mb-3 lg:ml-4 lg:mr-4 ml-0 mr-0"
+			className: "cpk:mb-3 cpk:lg:ml-4 cpk:lg:mr-4 cpk:ml-0 cpk:mr-0"
 		}) : null;
 		const BoundScrollView = renderSlot(scrollView, CopilotChatView.ScrollView, {
 			autoScroll,
@@ -3788,9 +4043,9 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				style: { paddingBottom: `${inputContainerHeight + FEATHER_HEIGHT + (hasSuggestions ? 4 : 32)}px` },
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "max-w-3xl mx-auto",
+					className: "cpk:max-w-3xl cpk:mx-auto",
 					children: [BoundMessageView, hasSuggestions ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: "pl-0 pr-4 sm:px-0 mt-4",
+						className: "cpk:pl-0 cpk:pr-4 cpk:sm:px-0 cpk:mt-4",
 						children: BoundSuggestionView
 					}) : null]
 				})
@@ -3816,19 +4071,25 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 				suggestionView: BoundSuggestionView !== null && BoundSuggestionView !== void 0 ? BoundSuggestionView : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, {})
 			});
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: (0, tailwind_merge.twMerge)("relative h-full flex flex-col", className),
+				"data-copilotkit": true,
+				className: (0, tailwind_merge.twMerge)("cpk:relative cpk:h-full cpk:flex cpk:flex-col", className),
 				...props,
 				children: BoundWelcomeScreen
 			});
 		}
-		if (children) return children({
-			messageView: BoundMessageView,
-			input: BoundInput,
-			scrollView: BoundScrollView,
-			suggestionView: BoundSuggestionView !== null && BoundSuggestionView !== void 0 ? BoundSuggestionView : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, {})
+		if (children) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			"data-copilotkit": true,
+			style: { display: "contents" },
+			children: children({
+				messageView: BoundMessageView,
+				input: BoundInput,
+				scrollView: BoundScrollView,
+				suggestionView: BoundSuggestionView !== null && BoundSuggestionView !== void 0 ? BoundSuggestionView : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, {})
+			})
 		});
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: (0, tailwind_merge.twMerge)("relative h-full", className),
+			"data-copilotkit": true,
+			className: (0, tailwind_merge.twMerge)("cpk:relative cpk:h-full", className),
 			...props,
 			children: [BoundScrollView, BoundInput]
 		});
@@ -3839,19 +4100,19 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 			const BoundFeather = renderSlot(feather, CopilotChatView.Feather, {});
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(use_stick_to_bottom.StickToBottom.Content, {
-					className: "overflow-y-scroll overflow-x-hidden",
+					className: "cpk:overflow-y-scroll cpk:overflow-x-hidden",
 					style: {
 						flex: "1 1 0%",
 						minHeight: 0
 					},
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: "px-4 sm:px-0 [div[data-sidebar-chat]_&]:px-8 [div[data-popup-chat]_&]:px-6",
+						className: "cpk:px-4 cpk:sm:px-0 cpk:[div[data-sidebar-chat]_&]:px-8 cpk:[div[data-popup-chat]_&]:px-6",
 						children
 					})
 				}),
 				BoundFeather,
 				!isAtBottom && !isResizing && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "absolute inset-x-0 flex justify-center z-30 pointer-events-none",
+					className: "cpk:absolute cpk:inset-x-0 cpk:flex cpk:justify-center cpk:z-30 cpk:pointer-events-none",
 					style: { bottom: `${inputContainerHeight + FEATHER_HEIGHT + 16}px` },
 					children: renderSlot(scrollToBottomButton, CopilotChatView.ScrollToBottomButton, { onClick: () => scrollToBottom() })
 				})
@@ -3881,9 +4142,9 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 				};
 			}, [scrollRef, autoScroll]);
 			if (!hasMounted) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "h-full max-h-full flex flex-col min-h-0 overflow-y-scroll overflow-x-hidden",
+				className: "cpk:h-full cpk:max-h-full cpk:flex cpk:flex-col cpk:min-h-0 cpk:overflow-y-scroll cpk:overflow-x-hidden",
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "px-4 sm:px-0 [div[data-sidebar-chat]_&]:px-8 [div[data-popup-chat]_&]:px-6",
+					className: "cpk:px-4 cpk:sm:px-0 cpk:[div[data-sidebar-chat]_&]:px-8 cpk:[div[data-popup-chat]_&]:px-6",
 					children
 				})
 			});
@@ -3891,17 +4152,17 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 				const BoundFeather = renderSlot(feather, CopilotChatView.Feather, {});
 				return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					ref: scrollRef,
-					className: cn("h-full max-h-full flex flex-col min-h-0 overflow-y-scroll overflow-x-hidden relative", className),
+					className: cn("cpk:h-full cpk:max-h-full cpk:flex cpk:flex-col cpk:min-h-0 cpk:overflow-y-scroll cpk:overflow-x-hidden cpk:relative", className),
 					...props,
 					children: [
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 							ref: contentRef,
-							className: "px-4 sm:px-0 [div[data-sidebar-chat]_&]:px-8 [div[data-popup-chat]_&]:px-6",
+							className: "cpk:px-4 cpk:sm:px-0 cpk:[div[data-sidebar-chat]_&]:px-8 cpk:[div[data-popup-chat]_&]:px-6",
 							children
 						}),
 						BoundFeather,
 						showScrollButton && !isResizing && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: "absolute inset-x-0 flex justify-center z-30 pointer-events-none",
+							className: "cpk:absolute cpk:inset-x-0 cpk:flex cpk:justify-center cpk:z-30 cpk:pointer-events-none",
 							style: { bottom: `${inputContainerHeight + FEATHER_HEIGHT + 16}px` },
 							children: renderSlot(scrollToBottomButton, CopilotChatView.ScrollToBottomButton, { onClick: () => scrollToBottom() })
 						})
@@ -3909,7 +4170,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 				});
 			}
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(use_stick_to_bottom.StickToBottom, {
-				className: cn("h-full max-h-full flex flex-col min-h-0 relative", className),
+				className: cn("cpk:h-full cpk:max-h-full cpk:flex cpk:flex-col cpk:min-h-0 cpk:relative", className),
 				resize: "smooth",
 				initial: "smooth",
 				...props,
@@ -3925,12 +4186,12 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 		_CopilotChatView.ScrollToBottomButton = ({ className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
 			variant: "outline",
 			size: "sm",
-			className: (0, tailwind_merge.twMerge)("rounded-full w-10 h-10 p-0 pointer-events-auto", "bg-white dark:bg-gray-900", "shadow-lg border border-gray-200 dark:border-gray-700", "hover:bg-gray-50 dark:hover:bg-gray-800", "flex items-center justify-center cursor-pointer", className),
+			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),
 			...props,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronDown, { className: "w-4 h-4 text-gray-600 dark:text-white" })
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronDown, { className: "cpk:w-4 cpk:h-4 cpk:text-gray-600 cpk:dark:text-white" })
 		});
 		_CopilotChatView.Feather = ({ className, style, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: cn("absolute bottom-0 left-0 right-4 h-24 pointer-events-none z-10 bg-gradient-to-t", "from-white via-white to-transparent", "dark:from-[rgb(33,33,33)] dark:via-[rgb(33,33,33)]", className),
+			className: cn("cpk:absolute cpk:bottom-0 cpk:left-0 cpk:right-4 cpk:h-24 cpk:pointer-events-none cpk:z-10 cpk:bg-gradient-to-t", "cpk:from-white cpk:via-white cpk:to-transparent", "cpk:dark:from-[rgb(33,33,33)] cpk:dark:via-[rgb(33,33,33)]", className),
 			style,
 			...props
 		});
@@ -3939,36 +4200,40 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 			const config = useCopilotChatConfiguration();
 			const labels = (_config$labels = config === null || config === void 0 ? void 0 : config.labels) !== null && _config$labels !== void 0 ? _config$labels : CopilotChatDefaultLabels;
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h1", {
-				className: cn("text-xl sm:text-2xl font-medium text-foreground text-center", className),
+				className: cn("cpk:text-xl cpk:sm:text-2xl cpk:font-medium cpk:text-foreground cpk:text-center", className),
 				...props,
 				children: labels.welcomeMessageText
 			});
 		};
 		_CopilotChatView.WelcomeScreen = ({ welcomeMessage, input, suggestionView, className, children, ...props }) => {
 			const BoundWelcomeMessage = renderSlot(welcomeMessage, CopilotChatView.WelcomeMessage, {});
-			if (children) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: children({
-				welcomeMessage: BoundWelcomeMessage,
-				input,
-				suggestionView,
-				className,
-				...props
-			}) });
+			if (children) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				"data-copilotkit": true,
+				style: { display: "contents" },
+				children: children({
+					welcomeMessage: BoundWelcomeMessage,
+					input,
+					suggestionView,
+					className,
+					...props
+				})
+			});
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: cn("flex-1 flex flex-col items-center justify-center px-4", className),
+				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", {
-					className: "w-full max-w-3xl flex flex-col items-center",
+					className: "cpk:w-full cpk:max-w-3xl cpk:flex cpk:flex-col cpk:items-center",
 					children: [
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: "mb-6",
+							className: "cpk:mb-6",
 							children: BoundWelcomeMessage
 						}),
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: "w-full",
+							className: "cpk:w-full",
 							children: input
 						}),
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: "mt-4 flex justify-center",
+							className: "cpk:mt-4 cpk:flex cpk:justify-center",
 							children: suggestionView
 						})
 					]
@@ -4282,21 +4547,21 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 //#endregion
 //#region src/components/chat/CopilotChatToggleButton.tsx
 	const DefaultOpenIcon = ({ className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.MessageCircle, {
-		className: cn("h-6 w-6", className),
+		className: cn("cpk:h-6 cpk:w-6", className),
 		strokeWidth: 1.75,
 		fill: "currentColor",
 		...props
 	});
 	const DefaultCloseIcon = ({ className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.X, {
-		className: cn("h-6 w-6", className),
+		className: cn("cpk:h-6 cpk:w-6", className),
 		strokeWidth: 1.75,
 		...props
 	});
 	DefaultOpenIcon.displayName = "CopilotChatToggleButton.OpenIcon";
 	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 = "pointer-events-none absolute inset-0 flex items-center justify-center will-change-transform";
-	const BUTTON_BASE_CLASSES = cn("fixed bottom-6 right-6 z-[1100] flex h-14 w-14 items-center justify-center", "rounded-full border border-primary bg-primary text-primary-foreground", "shadow-sm transition-all duration-200 ease-out", "hover:scale-[1.04] hover:shadow-md", "cursor-pointer", "active:scale-[0.96]", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background", "disabled:pointer-events-none disabled:opacity-60");
+	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 CopilotChatToggleButton = react.default.forwardRef(function CopilotChatToggleButton({ openIcon, closeIcon, className, ...buttonProps }, ref) {
 		var _configuration$labels, _configuration$isModa, _configuration$setMod;
 		const { onClick, type, disabled, ...restProps } = buttonProps;
@@ -4312,12 +4577,12 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 			setModalOpen(!isOpen);
 		};
 		const renderedOpenIcon = renderSlot(openIcon, DefaultOpenIcon, {
-			className: "h-6 w-6",
+			className: "cpk:h-6 cpk:w-6",
 			"aria-hidden": true,
 			focusable: false
 		});
 		const renderedCloseIcon = renderSlot(closeIcon, DefaultCloseIcon, {
-			className: "h-6 w-6",
+			className: "cpk:h-6 cpk:w-6",
 			"aria-hidden": true,
 			focusable: false
 		});
@@ -4346,6 +4611,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 			ref,
 			type: type !== null && type !== void 0 ? type : "button",
+			"data-copilotkit": true,
 			"data-slot": "chat-toggle-button",
 			"data-state": isOpen ? "open" : "closed",
 			className: cn(BUTTON_BASE_CLASSES, className),
@@ -4380,21 +4646,21 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 		});
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("header", {
 			"data-slot": "copilot-modal-header",
-			className: cn("flex items-center justify-between border-b border-border px-4 py-4", "bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/80", className),
+			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,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "flex w-full items-center gap-2",
+				className: "cpk:flex cpk:w-full cpk:items-center cpk:gap-2",
 				children: [
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: "flex-1",
+						className: "cpk:flex-1",
 						"aria-hidden": "true"
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: "flex flex-1 justify-center text-center",
+						className: "cpk:flex cpk:flex-1 cpk:justify-center cpk:text-center",
 						children: BoundTitle
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: "flex flex-1 justify-end",
+						className: "cpk:flex cpk:flex-1 cpk:justify-end",
 						children: BoundCloseButton
 					})
 				]
@@ -4404,17 +4670,17 @@ 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", {
-			className: cn("w-full text-base font-medium leading-none tracking-tight text-foreground", className),
+			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",
-			className: cn("inline-flex size-8 items-center justify-center rounded-full text-muted-foreground transition cursor-pointer", "hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", className),
+			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,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.X, {
-				className: "h-4 w-4",
+				className: "cpk:h-4 cpk:w-4",
 				"aria-hidden": "true"
 			})
 		});
@@ -4468,63 +4734,74 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 			window.addEventListener("resize", updateWidth);
 			return () => window.removeEventListener("resize", updateWidth);
 		}, [width]);
+		const hasMounted = (0, react.useRef)(false);
+		(0, react.useLayoutEffect)(() => {
+			if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
+			if (!window.matchMedia("(min-width: 768px)").matches) return;
+			if (isSidebarOpen) {
+				if (hasMounted.current) document.body.style.transition = `margin-inline-end ${SIDEBAR_TRANSITION_MS}ms ease`;
+				document.body.style.marginInlineEnd = widthToMargin(sidebarWidth);
+			} else if (hasMounted.current) {
+				document.body.style.transition = `margin-inline-end ${SIDEBAR_TRANSITION_MS}ms ease`;
+				document.body.style.marginInlineEnd = "";
+			}
+			hasMounted.current = true;
+			return () => {
+				document.body.style.marginInlineEnd = "";
+				document.body.style.transition = "";
+			};
+		}, [isSidebarOpen, sidebarWidth]);
 		const headerElement = renderSlot(header, CopilotModalHeader, {});
-		const toggleButtonElement = renderSlot(toggleButton, CopilotChatToggleButton, {});
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
-			isSidebarOpen && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("style", { dangerouslySetInnerHTML: { __html: `
-            @media (min-width: 768px) {
-              body {
-                margin-inline-end: ${widthToMargin(sidebarWidth)};
-                transition: margin-inline-end ${SIDEBAR_TRANSITION_MS}ms ease;
-              }
-            }` } }),
-			toggleButtonElement,
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("aside", {
-				ref: sidebarRef,
-				"data-copilot-sidebar": true,
-				className: cn("fixed right-0 top-0 z-[1200] flex", "h-[100vh] h-[100dvh] max-h-screen", "w-full", "border-l border-border bg-background text-foreground shadow-xl", "transition-transform duration-300 ease-out", isSidebarOpen ? "translate-x-0" : "translate-x-full pointer-events-none"),
-				style: {
-					["--sidebar-width"]: widthToCss(sidebarWidth),
-					paddingTop: "env(safe-area-inset-top)",
-					paddingBottom: "env(safe-area-inset-bottom)"
-				},
-				"aria-hidden": !isSidebarOpen,
-				"aria-label": "Copilot chat sidebar",
-				role: "complementary",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "flex h-full w-full flex-col overflow-hidden",
-					children: [headerElement, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: "flex-1 overflow-hidden",
-						"data-sidebar-chat": true,
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CopilotChatView_default, { ...props })
-					})]
-				})
+		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-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: {
+				["--sidebar-width"]: widthToCss(sidebarWidth),
+				paddingTop: "env(safe-area-inset-top)",
+				paddingBottom: "env(safe-area-inset-bottom)"
+			},
+			"aria-hidden": !isSidebarOpen,
+			"aria-label": "Copilot chat sidebar",
+			role: "complementary",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "cpk:flex cpk:h-full cpk:w-full cpk:flex-col cpk:overflow-hidden",
+				children: [headerElement, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "cpk:flex-1 cpk:overflow-hidden",
+					"data-sidebar-chat": true,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CopilotChatView_default, { ...props })
+				})]
 			})
-		] });
+		})] });
 	}
 	CopilotSidebarView.displayName = "CopilotSidebarView";
 	(function(_CopilotSidebarView) {
 		_CopilotSidebarView.WelcomeScreen = ({ welcomeMessage, input, suggestionView, className, children, ...props }) => {
 			const BoundWelcomeMessage = renderSlot(welcomeMessage, CopilotChatView_default.WelcomeMessage, {});
-			if (children) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: children({
-				welcomeMessage: BoundWelcomeMessage,
-				input,
-				suggestionView,
-				className,
-				...props
-			}) });
+			if (children) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				"data-copilotkit": true,
+				style: { display: "contents" },
+				children: children({
+					welcomeMessage: BoundWelcomeMessage,
+					input,
+					suggestionView,
+					className,
+					...props
+				})
+			});
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: cn("h-full flex flex-col", className),
+				className: cn("cpk:h-full cpk:flex cpk:flex-col", className),
 				...props,
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "flex-1 flex flex-col items-center justify-center px-4",
+					className: "cpk:flex-1 cpk:flex cpk:flex-col cpk:items-center cpk:justify-center cpk:px-4",
 					children: BoundWelcomeMessage
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "px-8 pb-4",
+					className: "cpk:px-8 cpk:pb-4",
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "max-w-3xl mx-auto",
+						className: "cpk:max-w-3xl cpk:mx-auto",
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: "mb-4 flex justify-center",
+							className: "cpk:mb-4 cpk:flex cpk:justify-center",
 							children: suggestionView
 						}), input]
 					})
@@ -4632,23 +4909,24 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 			paddingLeft: "env(safe-area-inset-left)",
 			paddingRight: "env(safe-area-inset-right)"
 		}), [resolvedHeight, resolvedWidth]);
-		const popupAnimationClass = isPopupOpen && !isAnimatingOut ? "pointer-events-auto translate-y-0 opacity-100 md:scale-100" : "pointer-events-none translate-y-4 opacity-0 md:translate-y-5 md:scale-[0.95]";
+		const popupAnimationClass = isPopupOpen && !isAnimatingOut ? "cpk:pointer-events-auto cpk:translate-y-0 cpk:opacity-100 cpk:md:scale-100" : "cpk:pointer-events-none cpk:translate-y-4 cpk:opacity-0 cpk:md:translate-y-5 cpk:md:scale-[0.95]";
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [toggleButtonElement, isRendered ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: cn("fixed inset-0 z-[1200] flex max-w-full flex-col items-stretch", "md:inset-auto md:bottom-24 md:right-6 md:items-end md:gap-4"),
+			"data-copilotkit": true,
+			className: cn("cpk:fixed cpk:inset-0 cpk:z-[1200] cpk:flex cpk:max-w-full cpk:flex-col cpk:items-stretch", "cpk:md:inset-auto cpk:md:bottom-24 cpk:md:right-6 cpk:md:items-end cpk:md:gap-4"),
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				ref: containerRef,
 				tabIndex: -1,
 				role: "dialog",
 				"aria-label": labels.modalHeaderTitle,
 				"data-copilot-popup": true,
-				className: cn("relative flex h-full w-full flex-col overflow-hidden bg-background text-foreground", "origin-bottom focus:outline-none transform-gpu transition-transform transition-opacity duration-200 ease-out", "md:transition-transform md:transition-opacity", "rounded-none border border-border/0 shadow-none ring-0", "md:h-[var(--copilot-popup-height)] md:w-[var(--copilot-popup-width)]", "md:max-h-[var(--copilot-popup-max-height)] md:max-w-[var(--copilot-popup-max-width)]", "md:origin-bottom-right md:rounded-2xl md:border-border md:shadow-xl md:ring-1 md:ring-border/40", popupAnimationClass),
+				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,
 				children: [headerElement, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "flex-1 overflow-hidden",
+					className: "cpk:flex-1 cpk:overflow-hidden",
 					"data-popup-chat": true,
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CopilotChatView_default, {
 						...restProps,
-						className: cn("h-full min-h-0", className)
+						className: cn("cpk:h-full cpk:min-h-0", className)
 					})
 				})]
 			})
@@ -4658,21 +4936,25 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 	(function(_CopilotPopupView) {
 		_CopilotPopupView.WelcomeScreen = ({ welcomeMessage, input, suggestionView, className, children, ...props }) => {
 			const BoundWelcomeMessage = renderSlot(welcomeMessage, CopilotChatView_default.WelcomeMessage, {});
-			if (children) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: children({
-				welcomeMessage: BoundWelcomeMessage,
-				input,
-				suggestionView,
-				className,
-				...props
-			}) });
+			if (children) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				"data-copilotkit": true,
+				style: { display: "contents" },
+				children: children({
+					welcomeMessage: BoundWelcomeMessage,
+					input,
+					suggestionView,
+					className,
+					...props
+				})
+			});
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: cn("h-full flex flex-col", className),
+				className: cn("cpk:h-full cpk:flex cpk:flex-col", className),
 				...props,
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "flex-1 flex flex-col items-center justify-center px-4",
+					className: "cpk:flex-1 cpk:flex cpk:flex-col cpk:items-center cpk:justify-center cpk:px-4",
 					children: BoundWelcomeMessage
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "mb-4 flex justify-center px-4",
+					className: "cpk:mb-4 cpk:flex cpk:justify-center cpk:px-4",
 					children: suggestionView
 				}), input] })]
 			});
@@ -4750,17 +5032,17 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 			const [isExpanded, setIsExpanded] = (0, react.useState)(false);
 			const statusString = String(status);
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "mt-2 pb-2",
+				className: "cpk:mt-2 cpk:pb-2",
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "rounded-xl border border-zinc-200/60 dark:border-zinc-800/60 bg-white/70 dark:bg-zinc-900/50 shadow-sm backdrop-blur p-4",
+					className: "cpk:rounded-xl cpk:border cpk:border-zinc-200/60 cpk:dark:border-zinc-800/60 cpk:bg-white/70 cpk:dark:bg-zinc-900/50 cpk:shadow-sm cpk:backdrop-blur cpk:p-4",
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "flex items-center justify-between gap-3 cursor-pointer",
+						className: "cpk:flex cpk:items-center cpk:justify-between cpk:gap-3 cpk:cursor-pointer",
 						onClick: () => setIsExpanded(!isExpanded),
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							className: "flex items-center gap-2 min-w-0",
+							className: "cpk:flex cpk:items-center cpk:gap-2 cpk:min-w-0",
 							children: [
 								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
-									className: `h-4 w-4 text-zinc-500 dark:text-zinc-400 transition-transform ${isExpanded ? "rotate-90" : ""}`,
+									className: `cpk:h-4 cpk:w-4 cpk:text-zinc-500 cpk:dark:text-zinc-400 cpk:transition-transform ${isExpanded ? "cpk:rotate-90" : ""}`,
 									fill: "none",
 									viewBox: "0 0 24 24",
 									strokeWidth: 2,
@@ -4771,29 +5053,29 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 										d: "M8.25 4.5l7.5 7.5-7.5 7.5"
 									})
 								}),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "inline-block h-2 w-2 rounded-full bg-blue-500" }),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "cpk:inline-block cpk:h-2 cpk:w-2 cpk:rounded-full cpk:bg-blue-500" }),
 								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-									className: "truncate text-sm font-medium text-zinc-900 dark:text-zinc-100",
+									className: "cpk:truncate cpk:text-sm cpk:font-medium cpk:text-zinc-900 cpk:dark:text-zinc-100",
 									children: name
 								})
 							]
 						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							className: `inline-flex items-center rounded-full px-2 py-1 text-xs font-medium ${statusString === "inProgress" || statusString === "executing" ? "bg-amber-100 text-amber-800 dark:bg-amber-500/15 dark:text-amber-400" : statusString === "complete" ? "bg-emerald-100 text-emerald-800 dark:bg-emerald-500/15 dark:text-emerald-400" : "bg-zinc-100 text-zinc-800 dark:bg-zinc-700/40 dark:text-zinc-300"}`,
+							className: `cpk:inline-flex cpk:items-center cpk:rounded-full cpk:px-2 cpk:py-1 cpk:text-xs cpk:font-medium ${statusString === "inProgress" || statusString === "executing" ? "cpk:bg-amber-100 cpk:text-amber-800 cpk:dark:bg-amber-500/15 cpk:dark:text-amber-400" : statusString === "complete" ? "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"}`,
 							children: String(status)
 						})]
 					}), isExpanded && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "mt-3 grid gap-4",
+						className: "cpk:mt-3 cpk:grid cpk:gap-4",
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: "text-xs uppercase tracking-wide text-zinc-500 dark:text-zinc-400",
+							className: "cpk:text-xs cpk:uppercase cpk:tracking-wide cpk:text-zinc-500 cpk:dark:text-zinc-400",
 							children: "Arguments"
 						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("pre", {
-							className: "mt-2 max-h-64 overflow-auto rounded-md bg-zinc-50 dark:bg-zinc-800/60 p-3 text-xs leading-relaxed text-zinc-800 dark:text-zinc-200 whitespace-pre-wrap break-words",
+							className: "cpk:mt-2 cpk:max-h-64 cpk:overflow-auto cpk:rounded-md cpk:bg-zinc-50 cpk:dark:bg-zinc-800/60 cpk:p-3 cpk:text-xs cpk:leading-relaxed cpk:text-zinc-800 cpk:dark:text-zinc-200 cpk:whitespace-pre-wrap cpk:break-words",
 							children: JSON.stringify(args !== null && args !== void 0 ? args : {}, null, 2)
 						})] }), result !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: "text-xs uppercase tracking-wide text-zinc-500 dark:text-zinc-400",
+							className: "cpk:text-xs cpk:uppercase cpk:tracking-wide cpk:text-zinc-500 cpk:dark:text-zinc-400",
 							children: "Result"
 						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("pre", {
-							className: "mt-2 max-h-64 overflow-auto rounded-md bg-zinc-50 dark:bg-zinc-800/60 p-3 text-xs leading-relaxed text-zinc-800 dark:text-zinc-200 whitespace-pre-wrap break-words",
+							className: "cpk:mt-2 cpk:max-h-64 cpk:overflow-auto cpk:rounded-md cpk:bg-zinc-50 cpk:dark:bg-zinc-800/60 cpk:p-3 cpk:text-xs cpk:leading-relaxed cpk:text-zinc-800 cpk:dark:text-zinc-200 cpk:whitespace-pre-wrap cpk:break-words",
 							children: typeof result === "string" ? result : JSON.stringify(result, null, 2)
 						})] })]
 					})]
@@ -4862,6 +5144,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;