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

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;
@@ -5127,20 +5151,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 +5371,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
 			]
 		});
@@ -5957,6 +6062,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 	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";
@@ -5991,73 +6097,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();
@@ -6383,13 +6422,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 
 //#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"),
@@ -6403,14 +6436,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;
@@ -6433,7 +6469,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
@@ -6452,7 +6488,6 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 			onAddFile,
 			positioning: "static",
 			keyboardHeight: isKeyboardOpen ? keyboardHeight : 0,
-			containerRef: inputContainerRef,
 			showDisclaimer: true,
 			bottomAnchored: true,
 			...disclaimer !== void 0 ? { disclaimer } : {}
@@ -6469,7 +6504,8 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 			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", {
@@ -6543,15 +6579,19 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 			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 === null || onRemoveAttachment === void 0 ? void 0 : 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 === null || onRemoveAttachment === void 0 ? void 0 : onRemoveAttachment(id),
+							className: "cpk:px-4"
+						})
+					}), BoundInput]
+				})
 			]
 		});
 	}
@@ -6581,7 +6621,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 					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() })
 					})
 				] })
@@ -6595,7 +6635,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 				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", {
@@ -6622,7 +6662,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 						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() })
 						})
 					]
@@ -6690,7 +6730,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 							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() })
 							})
 						]
@@ -6734,9 +6774,8 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 			...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 }) => {