@copilotkit/react-core 1.56.4 → 1.56.5-canary.1777664617

package/dist/v2/index.umd.js

@@ -1,10 +1,10 @@
 "use client";
 
 (function(global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ?  factory(exports, require('./index.css'), require('@copilotkit/core'), require('@ag-ui/client'), require('react'), require('tailwind-merge'), require('lucide-react'), require('@copilotkit/shared'), require('react/jsx-runtime'), require('@radix-ui/react-slot'), require('class-variance-authority'), require('clsx'), require('@radix-ui/react-tooltip'), require('@radix-ui/react-dropdown-menu'), require('streamdown'), require('zod'), require('@lit-labs/react'), require('@copilotkit/a2ui-renderer'), require('zod-to-json-schema'), require('@tanstack/react-virtual'), require('react-dom'), require('use-stick-to-bottom')) :
-  typeof define === 'function' && define.amd ? define(['exports', './index.css', '@copilotkit/core', '@ag-ui/client', 'react', 'tailwind-merge', 'lucide-react', '@copilotkit/shared', 'react/jsx-runtime', '@radix-ui/react-slot', 'class-variance-authority', 'clsx', '@radix-ui/react-tooltip', '@radix-ui/react-dropdown-menu', 'streamdown', 'zod', '@lit-labs/react', '@copilotkit/a2ui-renderer', 'zod-to-json-schema', '@tanstack/react-virtual', 'react-dom', 'use-stick-to-bottom'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.CopilotKitReactCoreV2 = {}), global.src_v2_index_css,global.CopilotKitCore,global.AgUIClient,global.React,global.tailwindMerge,global.lucideReact,global.CopilotKitShared,global.ReactJsxRuntime,global.RadixReactSlot,global.classVarianceAuthority,global.clsx,global.RadixReactTooltip,global.RadixReactDropdownMenu,global.streamdown,global.Zod,global.LitLabsReact,global.CopilotKitA2UIRenderer,global.zod_to_json_schema,global._tanstack_react_virtual,global.ReactDOM,global.useStickToBottom));
-})(this, function(exports, src_v2_index_css, _copilotkit_core, _ag_ui_client, react, tailwind_merge, lucide_react, _copilotkit_shared, react_jsx_runtime, _radix_ui_react_slot, class_variance_authority, clsx, _radix_ui_react_tooltip, _radix_ui_react_dropdown_menu, streamdown, zod, _lit_labs_react, _copilotkit_a2ui_renderer, zod_to_json_schema, _tanstack_react_virtual, react_dom, use_stick_to_bottom) {
+  typeof exports === 'object' && typeof module !== 'undefined' ?  factory(exports, require('./index.css'), require('@copilotkit/core'), require('@ag-ui/client'), require('react'), require('tailwind-merge'), require('lucide-react'), require('@copilotkit/shared'), require('react/jsx-runtime'), require('@radix-ui/react-slot'), require('class-variance-authority'), require('clsx'), require('@radix-ui/react-tooltip'), require('@radix-ui/react-dropdown-menu'), require('streamdown'), require('zod'), require('@lit-labs/react'), require('@copilotkit/a2ui-renderer'), require('zod-to-json-schema'), require('react-dom'), require('@tanstack/react-virtual'), require('use-stick-to-bottom')) :
+  typeof define === 'function' && define.amd ? define(['exports', './index.css', '@copilotkit/core', '@ag-ui/client', 'react', 'tailwind-merge', 'lucide-react', '@copilotkit/shared', 'react/jsx-runtime', '@radix-ui/react-slot', 'class-variance-authority', 'clsx', '@radix-ui/react-tooltip', '@radix-ui/react-dropdown-menu', 'streamdown', 'zod', '@lit-labs/react', '@copilotkit/a2ui-renderer', 'zod-to-json-schema', 'react-dom', '@tanstack/react-virtual', 'use-stick-to-bottom'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.CopilotKitReactCoreV2 = {}), global.src_v2_index_css,global.CopilotKitCore,global.AgUIClient,global.React,global.tailwindMerge,global.lucideReact,global.CopilotKitShared,global.ReactJsxRuntime,global.RadixReactSlot,global.classVarianceAuthority,global.clsx,global.RadixReactTooltip,global.RadixReactDropdownMenu,global.streamdown,global.Zod,global.LitLabsReact,global.CopilotKitA2UIRenderer,global.zod_to_json_schema,global.ReactDOM,global._tanstack_react_virtual,global.useStickToBottom));
+})(this, function(exports, src_v2_index_css, _copilotkit_core, _ag_ui_client, react, tailwind_merge, lucide_react, _copilotkit_shared, react_jsx_runtime, _radix_ui_react_slot, class_variance_authority, clsx, _radix_ui_react_tooltip, _radix_ui_react_dropdown_menu, streamdown, zod, _lit_labs_react, _copilotkit_a2ui_renderer, zod_to_json_schema, react_dom, _tanstack_react_virtual, use_stick_to_bottom) {
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 //#region \0rolldown/runtime.js
 	var __create = Object.create;
@@ -4393,16 +4393,20 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 			return consumer;
 		}, [normalizedConfig, resolvedConsumerAgentId]);
 		const isGlobalConfig = rawConsumerAgentId === void 0 || rawConsumerAgentId === "*";
+		const isDynamicConfigType = (0, react.useMemo)(() => !!normalizedConfig && "instructions" in normalizedConfig, [normalizedConfig]);
 		const requestReload = (0, react.useCallback)(() => {
 			if (!normalizedConfig) return;
 			if (isGlobalConfig) {
 				var _copilotkit$agents;
+				const seen = /* @__PURE__ */ new Set();
 				const agents = Object.values((_copilotkit$agents = copilotkit.agents) !== null && _copilotkit$agents !== void 0 ? _copilotkit$agents : {});
 				for (const entry of agents) {
 					const agentId = entry.agentId;
 					if (!agentId) continue;
+					seen.add(agentId);
 					if (!entry.isRunning) copilotkit.reloadSuggestions(agentId);
 				}
+				if (targetAgentId && !seen.has(targetAgentId)) copilotkit.reloadSuggestions(targetAgentId);
 				return;
 			}
 			if (!targetAgentId) return;
@@ -4447,6 +4451,26 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 			requestReload,
 			...extraDeps
 		]);
+		(0, react.useEffect)(() => {
+			if (!normalizedConfig || !isDynamicConfigType) return;
+			if (!targetAgentId) return;
+			if (!!copilotkit.getAgent(targetAgentId)) return;
+			const subscription = copilotkit.subscribe({ onAgentsChanged: () => {
+				if (copilotkit.getAgent(targetAgentId)) {
+					requestReload();
+					subscription.unsubscribe();
+				}
+			} });
+			return () => {
+				subscription.unsubscribe();
+			};
+		}, [
+			copilotkit,
+			normalizedConfig,
+			isDynamicConfigType,
+			targetAgentId,
+			requestReload
+		]);
 	}
 	function isDynamicConfig(config) {
 		return "instructions" in config;
@@ -4717,6 +4741,16 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 			};
 		}, [store]);
 		const runtimeStatus = copilotkit.runtimeConnectionStatus;
+		(0, react.useEffect)(() => {
+			copilotkit.registerThreadStore(agentId, store);
+			return () => {
+				copilotkit.unregisterThreadStore(agentId);
+			};
+		}, [
+			copilotkit,
+			agentId,
+			store
+		]);
 		(0, react.useEffect)(() => {
 			var _copilotkit$intellige;
 			if (!copilotkit.runtimeUrl) {
@@ -4741,7 +4775,6 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 			headersKey,
 			(_copilotkit$intellige2 = copilotkit.intelligence) === null || _copilotkit$intellige2 === void 0 ? void 0 : _copilotkit$intellige2.wsUrl,
 			agentId,
-			copilotkit.headers,
 			includeArchived,
 			limit
 		]);
@@ -5127,20 +5160,101 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 	CopilotChatAssistantMessage.RegenerateButton.displayName = "CopilotChatAssistantMessage.RegenerateButton";
 	var CopilotChatAssistantMessage_default = CopilotChatAssistantMessage;
 
+//#endregion
+//#region src/v2/components/chat/Lightbox.tsx
+	function Lightbox({ onClose, children }) {
+		(0, react.useEffect)(() => {
+			const handleKey = (e) => {
+				if (e.key === "Escape") onClose();
+			};
+			document.addEventListener("keydown", handleKey);
+			return () => document.removeEventListener("keydown", handleKey);
+		}, [onClose]);
+		if (typeof document === "undefined") return null;
+		return (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "cpk:fixed cpk:inset-0 cpk:z-[9999] cpk:flex cpk:items-center cpk:justify-center cpk:bg-black/80 cpk:animate-fade-in",
+			onClick: onClose,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				onClick: onClose,
+				className: "cpk:absolute cpk:top-4 cpk:right-4 cpk:text-white cpk:bg-white/10 cpk:hover:bg-white/20 cpk:rounded-full cpk:w-10 cpk:h-10 cpk:flex cpk:items-center cpk:justify-center cpk:cursor-pointer cpk:border-none cpk:z-10",
+				"aria-label": "Close preview",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.X, { className: "cpk:w-5 cpk:h-5" })
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				onClick: (e) => e.stopPropagation(),
+				children
+			})]
+		}), document.body);
+	}
+	/**
+	* Hook that manages lightbox open/close and uses the View Transition API to
+	* morph the thumbnail into fullscreen content.
+	*
+	* The trick: `view-transition-name` must live on exactly ONE element at a time.
+	* - Old state (thumbnail visible): name is on the thumbnail.
+	* - New state (lightbox visible): name moves to the lightbox content.
+	* `flushSync` ensures React commits the DOM change synchronously inside the
+	* `startViewTransition` callback so the API can snapshot old → new correctly.
+	*/
+	function useLightbox() {
+		const thumbnailRef = (0, react.useRef)(null);
+		const [open, setOpen] = (0, react.useState)(false);
+		const vtName = (0, react.useId)();
+		return {
+			thumbnailRef,
+			vtName,
+			open,
+			openLightbox: (0, react.useCallback)(() => {
+				const thumb = thumbnailRef.current;
+				const doc = document;
+				if (doc.startViewTransition && thumb) {
+					thumb.style.viewTransitionName = vtName;
+					doc.startViewTransition(() => {
+						thumb.style.viewTransitionName = "";
+						(0, react_dom.flushSync)(() => setOpen(true));
+					});
+				} else setOpen(true);
+			}, [vtName]),
+			closeLightbox: (0, react.useCallback)(() => {
+				const thumb = thumbnailRef.current;
+				const doc = document;
+				if (doc.startViewTransition && thumb) doc.startViewTransition(() => {
+					(0, react_dom.flushSync)(() => setOpen(false));
+					thumb.style.viewTransitionName = vtName;
+				}).finished.then(() => {
+					thumb.style.viewTransitionName = "";
+				}).catch(() => {
+					thumb.style.viewTransitionName = "";
+				});
+				else setOpen(false);
+			}, [vtName])
+		};
+	}
+
 //#endregion
 //#region src/v2/components/chat/CopilotChatAttachmentRenderer.tsx
 	const ImageAttachment = (0, react.memo)(function ImageAttachment({ src, className }) {
 		const [error, setError] = (0, react.useState)(false);
+		const { thumbnailRef, vtName, open, openLightbox, closeLightbox } = useLightbox();
 		if (error) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: cn("cpk:flex cpk:flex-col cpk:items-center cpk:justify-center cpk:rounded-lg cpk:bg-muted cpk:p-4 cpk:text-sm cpk:text-muted-foreground", className),
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: "Failed to load image" })
 		});
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+			ref: thumbnailRef,
 			src,
 			alt: "Image attachment",
-			className: cn("cpk:max-w-full cpk:h-auto cpk:rounded-lg", className),
+			className: cn("cpk:max-w-[80px] cpk:max-h-[80px] cpk:w-auto cpk:h-auto cpk:rounded-xl cpk:object-cover cpk:cursor-pointer cpk:bg-muted", className),
+			onClick: openLightbox,
 			onError: () => setError(true)
-		});
+		}), open && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Lightbox, {
+			onClose: closeLightbox,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+				style: { viewTransitionName: vtName },
+				src,
+				alt: "Image attachment",
+				className: "cpk:max-w-[90vw] cpk:max-h-[90vh] cpk:object-contain cpk:rounded-lg"
+			})
+		})] });
 	});
 	const AudioAttachment = (0, react.memo)(function AudioAttachment({ src, filename, className }) {
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -5266,15 +5380,15 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 			"data-message-id": message.id,
 			...props,
 			children: [
-				BoundMessageRenderer,
 				mediaParts.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "cpk:flex cpk:flex-col cpk:items-end cpk:gap-2 cpk:mt-2",
+					className: "cpk:flex cpk:flex-row cpk:flex-wrap cpk:justify-end cpk:gap-2 cpk:mb-2",
 					children: mediaParts.map((part, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CopilotChatAttachmentRenderer, {
 						type: part.type,
 						source: part.source,
 						filename: getFilename(part)
 					}, index))
 				}),
+				BoundMessageRenderer,
 				BoundToolbar
 			]
 		});
@@ -5992,73 +6106,6 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 			case "document": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DocumentPreview, { attachment });
 		}
 	}
-	function Lightbox({ onClose, children }) {
-		(0, react.useEffect)(() => {
-			const handleKey = (e) => {
-				if (e.key === "Escape") onClose();
-			};
-			document.addEventListener("keydown", handleKey);
-			return () => document.removeEventListener("keydown", handleKey);
-		}, [onClose]);
-		if (typeof document === "undefined") return null;
-		return (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "cpk:fixed cpk:inset-0 cpk:z-[9999] cpk:flex cpk:items-center cpk:justify-center cpk:bg-black/80 cpk:animate-fade-in",
-			onClick: onClose,
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-				onClick: onClose,
-				className: "cpk:absolute cpk:top-4 cpk:right-4 cpk:text-white cpk:bg-white/10 cpk:hover:bg-white/20 cpk:rounded-full cpk:w-10 cpk:h-10 cpk:flex cpk:items-center cpk:justify-center cpk:cursor-pointer cpk:border-none cpk:z-10",
-				"aria-label": "Close preview",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.X, { className: "cpk:w-5 cpk:h-5" })
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				onClick: (e) => e.stopPropagation(),
-				children
-			})]
-		}), document.body);
-	}
-	/**
-	* Hook that manages lightbox open/close and uses the View Transition API to
-	* morph the thumbnail into fullscreen content.
-	*
-	* The trick: `view-transition-name` must live on exactly ONE element at a time.
-	* - Old state (thumbnail visible): name is on the thumbnail.
-	* - New state (lightbox visible): name moves to the lightbox content.
-	* `flushSync` ensures React commits the DOM change synchronously inside the
-	* `startViewTransition` callback so the API can snapshot old → new correctly.
-	*/
-	function useLightbox() {
-		const thumbnailRef = (0, react.useRef)(null);
-		const [open, setOpen] = (0, react.useState)(false);
-		const vtName = (0, react.useId)();
-		return {
-			thumbnailRef,
-			vtName,
-			open,
-			openLightbox: (0, react.useCallback)(() => {
-				const thumb = thumbnailRef.current;
-				const doc = document;
-				if (doc.startViewTransition && thumb) {
-					thumb.style.viewTransitionName = vtName;
-					doc.startViewTransition(() => {
-						thumb.style.viewTransitionName = "";
-						(0, react_dom.flushSync)(() => setOpen(true));
-					});
-				} else setOpen(true);
-			}, []),
-			closeLightbox: (0, react.useCallback)(() => {
-				const thumb = thumbnailRef.current;
-				const doc = document;
-				if (doc.startViewTransition && thumb) doc.startViewTransition(() => {
-					(0, react_dom.flushSync)(() => setOpen(false));
-					thumb.style.viewTransitionName = vtName;
-				}).finished.then(() => {
-					thumb.style.viewTransitionName = "";
-				}).catch(() => {
-					thumb.style.viewTransitionName = "";
-				});
-				else setOpen(false);
-			}, [])
-		};
-	}
 	function ImagePreview({ attachment }) {
 		const src = (0, _copilotkit_shared.getSourceUrl)(attachment.source);
 		const { thumbnailRef, vtName, open, openLightbox, closeLightbox } = useLightbox();
@@ -6398,14 +6445,17 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 		});
 	}
 	function CopilotChatView({ messageView, input, scrollView, suggestionView, welcomeScreen, messages = [], autoScroll = true, isRunning = false, suggestions, suggestionLoadingIndexes, onSelectSuggestion, onSubmitMessage, onStop, inputMode, inputValue, onInputChange, onStartTranscribe, onCancelTranscribe, onFinishTranscribe, onFinishTranscribeWithAudio, attachments, onRemoveAttachment, onAddFile, dragOver, onDragOver, onDragLeave, onDrop, isConnecting = false, hasExplicitThreadId = false, disclaimer, children, className, ...props }) {
-		const inputContainerRef = (0, react.useRef)(null);
+		const [inputContainerEl, setInputContainerEl] = (0, react.useState)(null);
 		const [inputContainerHeight, setInputContainerHeight] = (0, react.useState)(0);
 		const [isResizing, setIsResizing] = (0, react.useState)(false);
 		const resizeTimeoutRef = (0, react.useRef)(null);
 		const { isKeyboardOpen, keyboardHeight, availableHeight } = useKeyboardHeight();
 		(0, react.useEffect)(() => {
-			const element = inputContainerRef.current;
-			if (!element) return;
+			const element = inputContainerEl;
+			if (!element) {
+				setInputContainerHeight(0);
+				return;
+			}
 			const resizeObserver = new ResizeObserver((entries) => {
 				for (const entry of entries) {
 					const newHeight = entry.contentRect.height;
@@ -6428,7 +6478,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 				resizeObserver.disconnect();
 				if (resizeTimeoutRef.current) clearTimeout(resizeTimeoutRef.current);
 			};
-		}, []);
+		}, [inputContainerEl]);
 		const BoundMessageView = renderSlot(messageView, CopilotChatMessageView, {
 			messages,
 			isRunning
@@ -6539,7 +6589,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 				dragOver && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DropOverlay, {}),
 				BoundScrollView,
 				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					ref: inputContainerRef,
+					ref: setInputContainerEl,
 					"data-testid": "copilot-input-overlay",
 					className: "cpk:absolute cpk:bottom-0 cpk:left-0 cpk:right-0 cpk:z-20 cpk:pointer-events-none",
 					children: [attachments && attachments.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {