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

package/dist/{copilotkit-By2G6-Zx.cjs → copilotkit-BAkj3zUc.cjs}

@@ -45,8 +45,8 @@ let zod = require("zod");
 let _lit_labs_react = require("@lit-labs/react");
 let _copilotkit_a2ui_renderer = require("@copilotkit/a2ui-renderer");
 let zod_to_json_schema = require("zod-to-json-schema");
-let _tanstack_react_virtual = require("@tanstack/react-virtual");
 let react_dom = require("react-dom");
+let _tanstack_react_virtual = require("@tanstack/react-virtual");
 let use_stick_to_bottom = require("use-stick-to-bottom");
 let react_markdown = require("react-markdown");
 react_markdown = __toESM(react_markdown);
@@ -5036,20 +5036,101 @@ CopilotChatAssistantMessage.ReadAloudButton.displayName = "CopilotChatAssistantM
 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", {
@@ -5174,15 +5255,15 @@ function CopilotChatUserMessage({ message, onEditMessage, branchIndex, numberOfB
 		"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
 		]
 	});
@@ -5851,6 +5932,7 @@ CopilotChatMessageView.Cursor = function Cursor({ className, ...props }) {
 const CopilotChatAttachmentQueue = ({ attachments, onRemoveAttachment, className }) => {
 	if (attachments.length === 0) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-testid": "copilot-attachment-queue",
 		className: cn("cpk:flex cpk:flex-wrap cpk:gap-2 cpk:p-2", className),
 		children: attachments.map((attachment) => {
 			const isMedia = attachment.type === "image" || attachment.type === "video";
@@ -5885,73 +5967,6 @@ function AttachmentPreview({ attachment }) {
 		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();
@@ -6277,13 +6292,7 @@ function computeOffsetTop(el, stopAt) {
 
 //#endregion
 //#region src/v2/components/chat/CopilotChatView.tsx
-const FEATHER_HEIGHT = 96;
-const PIN_TO_SEND_FEATHER_HEIGHT = 48;
-const PinToSendSoftFeather = ({ className, style, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-	className: cn("cpk:absolute cpk:bottom-0 cpk:left-0 cpk:right-4 cpk:h-12 cpk:pointer-events-none cpk:z-10 cpk:bg-gradient-to-t", "cpk:from-white cpk:to-transparent", "cpk:dark:from-[rgb(33,33,33)]", className),
-	style,
-	...props
-});
+const SCROLL_BUTTON_OFFSET = 16;
 function DropOverlay() {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: cn("cpk:absolute cpk:inset-0 cpk:z-50 cpk:pointer-events-none", "cpk:flex cpk:items-center cpk:justify-center", "cpk:bg-primary/5 cpk:backdrop-blur-[2px]", "cpk:border-2 cpk:border-dashed cpk:border-primary/40 cpk:rounded-lg cpk:m-2"),
@@ -6297,14 +6306,17 @@ function DropOverlay() {
 	});
 }
 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;
@@ -6327,7 +6339,7 @@ function CopilotChatView({ messageView, input, scrollView, suggestionView, welco
 			resizeObserver.disconnect();
 			if (resizeTimeoutRef.current) clearTimeout(resizeTimeoutRef.current);
 		};
-	}, []);
+	}, [inputContainerEl]);
 	const BoundMessageView = renderSlot(messageView, CopilotChatMessageView, {
 		messages,
 		isRunning
@@ -6346,12 +6358,11 @@ function CopilotChatView({ messageView, input, scrollView, suggestionView, welco
 		onAddFile,
 		positioning: "static",
 		keyboardHeight: isKeyboardOpen ? keyboardHeight : 0,
-		containerRef: inputContainerRef,
 		showDisclaimer: true,
 		bottomAnchored: true,
 		...disclaimer !== void 0 ? { disclaimer } : {}
 	});
-	const hasSuggestions = !isConnecting && !isRunning && Array.isArray(suggestions) && suggestions.length > 0;
+	const hasSuggestions = !isConnecting && Array.isArray(suggestions) && suggestions.length > 0;
 	const BoundSuggestionView = hasSuggestions ? renderSlot(suggestionView, CopilotChatSuggestionView, {
 		suggestions,
 		loadingIndexes: suggestionLoadingIndexes,
@@ -6363,7 +6374,8 @@ function CopilotChatView({ messageView, input, scrollView, suggestionView, welco
 		inputContainerHeight,
 		isResizing,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			style: { paddingBottom: `${hasSuggestions ? 4 : 32}px` },
+			"data-testid": "copilot-scroll-content",
+			style: { paddingBottom: `${inputContainerHeight + (hasSuggestions ? 4 : 32)}px` },
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "cpk:max-w-3xl cpk:mx-auto",
 				children: [BoundMessageView, hasSuggestions ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -6437,15 +6449,19 @@ function CopilotChatView({ messageView, input, scrollView, suggestionView, welco
 		children: [
 			dragOver && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DropOverlay, {}),
 			BoundScrollView,
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "cpk:max-w-3xl cpk:mx-auto cpk:w-full",
-				children: attachments && attachments.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CopilotChatAttachmentQueue, {
-					attachments,
-					onRemoveAttachment: (id) => onRemoveAttachment?.(id),
-					className: "cpk:px-4"
-				})
-			}),
-			BoundInput
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				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", {
+					className: "cpk:max-w-3xl cpk:mx-auto cpk:w-full cpk:pointer-events-auto",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CopilotChatAttachmentQueue, {
+						attachments,
+						onRemoveAttachment: (id) => onRemoveAttachment?.(id),
+						className: "cpk:px-4"
+					})
+				}), BoundInput]
+			})
 		]
 	});
 }
@@ -6474,7 +6490,7 @@ function CopilotChatView({ messageView, input, scrollView, suggestionView, welco
 				BoundFeather,
 				!isAtBottom && !isResizing && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					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` },
+					style: { bottom: `${inputContainerHeight + SCROLL_BUTTON_OFFSET}px` },
 					children: renderSlot(scrollToBottomButton, CopilotChatView.ScrollToBottomButton, { onClick: () => scrollToBottom() })
 				})
 			] })
@@ -6488,7 +6504,7 @@ function CopilotChatView({ messageView, input, scrollView, suggestionView, welco
 			spacerRef,
 			topOffset: 16
 		});
-		const BoundFeather = renderSlot(feather, PinToSendSoftFeather, {});
+		const BoundFeather = renderSlot(feather, CopilotChatView.Feather, {});
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ScrollElementContext.Provider, {
 			value: nonAutoScrollEl,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -6515,7 +6531,7 @@ function CopilotChatView({ messageView, input, scrollView, suggestionView, welco
 					BoundFeather,
 					showScrollButton && !isResizing && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 						className: "cpk:absolute cpk:inset-x-0 cpk:flex cpk:justify-center cpk:z-30 cpk:pointer-events-none",
-						style: { bottom: `${inputContainerHeight + PIN_TO_SEND_FEATHER_HEIGHT + 16}px` },
+						style: { bottom: `${inputContainerHeight + SCROLL_BUTTON_OFFSET}px` },
 						children: renderSlot(scrollToBottomButton, CopilotChatView.ScrollToBottomButton, { onClick: () => scrollToBottom() })
 					})
 				]
@@ -6583,7 +6599,7 @@ function CopilotChatView({ messageView, input, scrollView, suggestionView, welco
 						BoundFeather,
 						showScrollButton && !isResizing && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 							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` },
+							style: { bottom: `${inputContainerHeight + SCROLL_BUTTON_OFFSET}px` },
 							children: renderSlot(scrollToBottomButton, CopilotChatView.ScrollToBottomButton, { onClick: () => scrollToBottom() })
 						})
 					]
@@ -6627,9 +6643,8 @@ function CopilotChatView({ messageView, input, scrollView, suggestionView, welco
 		...props,
 		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("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,
+	_CopilotChatView.Feather = ({ className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className,
 		...props
 	});
 	_CopilotChatView.WelcomeMessage = ({ className, ...props }) => {
@@ -10204,4 +10219,4 @@ Object.defineProperty(exports, 'useToast', {
     return useToast;
   }
 });
-//# sourceMappingURL=copilotkit-By2G6-Zx.cjs.map
+//# sourceMappingURL=copilotkit-BAkj3zUc.cjs.map