@copilotkit/react-core 1.56.4-canary.1777529757 → 1.56.4-canary.1777538870

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('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) {
+  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) {
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 //#region \0rolldown/runtime.js
 	var __create = Object.create;
@@ -5127,101 +5127,20 @@ 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.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
-			ref: thumbnailRef,
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
 			src,
 			alt: "Image attachment",
-			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,
+			className: cn("cpk:max-w-full cpk:h-auto cpk:rounded-lg", className),
 			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", {
@@ -5347,15 +5266,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-row cpk:flex-wrap cpk:justify-end cpk:gap-2 cpk:mb-2",
+					className: "cpk:flex cpk:flex-col cpk:items-end cpk:gap-2 cpk:mt-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
 			]
 		});
@@ -6073,6 +5992,73 @@ 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();
@@ -6412,17 +6398,14 @@ 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 [inputContainerEl, setInputContainerEl] = (0, react.useState)(null);
+		const inputContainerRef = (0, react.useRef)(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 = inputContainerEl;
-			if (!element) {
-				setInputContainerHeight(0);
-				return;
-			}
+			const element = inputContainerRef.current;
+			if (!element) return;
 			const resizeObserver = new ResizeObserver((entries) => {
 				for (const entry of entries) {
 					const newHeight = entry.contentRect.height;
@@ -6445,7 +6428,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
@@ -6468,7 +6451,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 			bottomAnchored: true,
 			...disclaimer !== void 0 ? { disclaimer } : {}
 		});
-		const hasSuggestions = !isConnecting && Array.isArray(suggestions) && suggestions.length > 0;
+		const hasSuggestions = !isConnecting && !isRunning && Array.isArray(suggestions) && suggestions.length > 0;
 		const BoundSuggestionView = hasSuggestions ? renderSlot(suggestionView, CopilotChatSuggestionView, {
 			suggestions,
 			loadingIndexes: suggestionLoadingIndexes,
@@ -6556,7 +6539,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: setInputContainerEl,
+					ref: inputContainerRef,
 					"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", {