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

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;
@@ -161,7 +161,7 @@ _radix_ui_react_dropdown_menu = __toESM(_radix_ui_react_dropdown_menu);
 		welcomeMessageText: "How can I help you today?"
 	};
 	const CopilotChatConfiguration = (0, react.createContext)(null);
-	const CopilotChatConfigurationProvider = ({ children, labels, agentId, threadId, isModalDefaultOpen }) => {
+	const CopilotChatConfigurationProvider = ({ children, labels, agentId, threadId, hasExplicitThreadId, isModalDefaultOpen }) => {
 		var _ref, _parentConfig$isModal, _parentConfig$setModa;
 		const parentConfig = (0, react.useContext)(CopilotChatConfiguration);
 		const stableLabels = useShallowStableRef(labels);
@@ -176,6 +176,7 @@ _radix_ui_react_dropdown_menu = __toESM(_radix_ui_react_dropdown_menu);
 			if (parentConfig === null || parentConfig === void 0 ? void 0 : parentConfig.threadId) return parentConfig.threadId;
 			return (0, _copilotkit_shared.randomUUID)();
 		}, [threadId, parentConfig === null || parentConfig === void 0 ? void 0 : parentConfig.threadId]);
+		const resolvedHasExplicitThreadId = (hasExplicitThreadId !== void 0 ? hasExplicitThreadId : !!threadId) || !!(parentConfig === null || parentConfig === void 0 ? void 0 : parentConfig.hasExplicitThreadId);
 		const [internalModalOpen, setInternalModalOpen] = (0, react.useState)(isModalDefaultOpen !== null && isModalDefaultOpen !== void 0 ? isModalDefaultOpen : true);
 		const hasExplicitDefault = isModalDefaultOpen !== void 0;
 		const setAndSync = (0, react.useCallback)((open) => {
@@ -198,12 +199,14 @@ _radix_ui_react_dropdown_menu = __toESM(_radix_ui_react_dropdown_menu);
 			labels: mergedLabels,
 			agentId: resolvedAgentId,
 			threadId: resolvedThreadId,
+			hasExplicitThreadId: resolvedHasExplicitThreadId,
 			isModalOpen: resolvedIsModalOpen,
 			setModalOpen: resolvedSetModalOpen
 		}), [
 			mergedLabels,
 			resolvedAgentId,
 			resolvedThreadId,
+			resolvedHasExplicitThreadId,
 			resolvedIsModalOpen,
 			resolvedSetModalOpen
 		]);
@@ -599,7 +602,7 @@ _radix_ui_react_dropdown_menu = __toESM(_radix_ui_react_dropdown_menu);
 //#region src/v2/components/chat/CopilotChatInput.tsx
 	const SLASH_MENU_MAX_VISIBLE_ITEMS = 5;
 	const SLASH_MENU_ITEM_HEIGHT_PX = 40;
-	function CopilotChatInput({ mode = "input", onSubmitMessage, onStop, isRunning = false, onStartTranscribe, onCancelTranscribe, onFinishTranscribe, onFinishTranscribeWithAudio, onAddFile, onChange, value, toolsMenu, autoFocus = false, positioning = "static", keyboardHeight = 0, containerRef, showDisclaimer, textArea, sendButton, startTranscribeButton, cancelTranscribeButton, finishTranscribeButton, addMenuButton, audioRecorder, disclaimer, children, className, ...props }) {
+	function CopilotChatInput({ mode = "input", onSubmitMessage, onStop, isRunning = false, onStartTranscribe, onCancelTranscribe, onFinishTranscribe, onFinishTranscribeWithAudio, onAddFile, onChange, value, toolsMenu, autoFocus = false, positioning = "static", keyboardHeight = 0, containerRef, showDisclaimer, bottomAnchored = false, textArea, sendButton, startTranscribeButton, cancelTranscribeButton, finishTranscribeButton, addMenuButton, audioRecorder, disclaimer, children, className, ...props }) {
 		var _config$labels;
 		const isControlled = value !== void 0;
 		const [internalValue, setInternalValue] = (0, react.useState)(() => value !== null && value !== void 0 ? value : "");
@@ -1134,7 +1137,8 @@ _radix_ui_react_dropdown_menu = __toESM(_radix_ui_react_dropdown_menu);
 			className: cn("cpk:pointer-events-none cpk:relative cpk:z-20", positioning === "absolute" && "cpk:absolute cpk:bottom-0 cpk:left-0 cpk:right-0", className),
 			style: {
 				transform: keyboardHeight > 0 ? `translateY(-${keyboardHeight}px)` : void 0,
-				transition: "transform 0.2s ease-out"
+				transition: "transform 0.2s ease-out",
+				...positioning === "absolute" || bottomAnchored ? { paddingBottom: "var(--copilotkit-license-banner-offset, 0px)" } : {}
 			},
 			...props,
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -1361,6 +1365,8 @@ _radix_ui_react_dropdown_menu = __toESM(_radix_ui_react_dropdown_menu);
 
 //#endregion
 //#region src/v2/components/license-warning-banner.tsx
+	const LICENSE_BANNER_OFFSET_PX = 52;
+	const LICENSE_BANNER_OFFSET_VAR = "--copilotkit-license-banner-offset";
 	const BANNER_STYLES = {
 		base: {
 			position: "fixed",
@@ -1402,6 +1408,14 @@ _radix_ui_react_dropdown_menu = __toESM(_radix_ui_react_dropdown_menu);
 		}
 	}
 	function BannerShell({ severity, message, actionLabel, actionUrl, onDismiss }) {
+		(0, react.useEffect)(() => {
+			if (typeof document === "undefined") return;
+			const root = document.documentElement;
+			root.style.setProperty(LICENSE_BANNER_OFFSET_VAR, `${LICENSE_BANNER_OFFSET_PX}px`);
+			return () => {
+				root.style.removeProperty(LICENSE_BANNER_OFFSET_VAR);
+			};
+		}, []);
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			style: {
 				...BANNER_STYLES.base,
@@ -3386,7 +3400,6 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 			didMountRef.current = true;
 		}, []);
 		(0, react.useEffect)(() => {
-			if (defaultThrottleMs !== void 0 && (!Number.isFinite(defaultThrottleMs) || defaultThrottleMs < 0)) console.error(`CopilotKitProvider: defaultThrottleMs must be a non-negative finite number, got ${defaultThrottleMs}. useAgent hooks without an explicit throttleMs will fall back to unthrottled.`);
 			copilotkit.setDefaultThrottleMs(defaultThrottleMs);
 		}, [copilotkit, defaultThrottleMs]);
 		const designSkill = (_openGenerativeUI$des = openGenerativeUI === null || openGenerativeUI === void 0 ? void 0 : openGenerativeUI.designSkill) !== null && _openGenerativeUI$des !== void 0 ? _openGenerativeUI$des : DEFAULT_DESIGN_SKILL;
@@ -3608,16 +3621,6 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 		const providerThrottleMs = copilotkit.defaultThrottleMs;
 		const chatConfig = useCopilotChatConfiguration();
 		(_threadId = threadId) !== null && _threadId !== void 0 || (threadId = chatConfig === null || chatConfig === void 0 ? void 0 : chatConfig.threadId);
-		const effectiveThrottleMs = (0, react.useMemo)(() => {
-			var _ref;
-			const resolved = (_ref = throttleMs !== null && throttleMs !== void 0 ? throttleMs : providerThrottleMs) !== null && _ref !== void 0 ? _ref : 0;
-			if (!Number.isFinite(resolved) || resolved < 0) {
-				const source = throttleMs !== void 0 ? "hook-level throttleMs" : "provider-level defaultThrottleMs";
-				console.error(`useAgent: ${source} must be a non-negative finite number, got ${resolved}. Falling back to unthrottled.`);
-				return 0;
-			}
-			return resolved;
-		}, [throttleMs, providerThrottleMs]);
 		const [, forceUpdate] = (0, react.useReducer)((x) => x + 1, 0);
 		const updateFlags = (0, react.useMemo)(() => updates !== null && updates !== void 0 ? updates : ALL_UPDATES, [JSON.stringify(updates)]);
 		const provisionalAgentCache = (0, react.useRef)(/* @__PURE__ */ new Map());
@@ -3681,9 +3684,8 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 		]);
 		(0, react.useEffect)(() => {
 			if (updateFlags.length === 0) return;
-			const handlers = {};
-			let timerId = null;
 			let active = true;
+			const handlers = {};
 			let batchScheduled = false;
 			const batchedForceUpdate = () => {
 				if (!active) return;
@@ -3695,46 +3697,24 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 					});
 				}
 			};
-			if (updateFlags.includes(UseAgentUpdate.OnMessagesChanged)) {
-				const ms = effectiveThrottleMs;
-				if (ms > 0) {
-					let throttleActive = false;
-					let pending = false;
-					const throttledNotify = () => {
-						if (!active) return;
-						if (!throttleActive) {
-							throttleActive = true;
-							pending = false;
-							forceUpdate();
-							timerId = setTimeout(function trailingEdge() {
-								timerId = null;
-								if (active && pending) {
-									pending = false;
-									forceUpdate();
-									timerId = setTimeout(trailingEdge, ms);
-								} else throttleActive = false;
-							}, ms);
-						} else pending = true;
-					};
-					handlers.onMessagesChanged = throttledNotify;
-				} else handlers.onMessagesChanged = forceUpdate;
-			}
+			if (updateFlags.includes(UseAgentUpdate.OnMessagesChanged)) handlers.onMessagesChanged = forceUpdate;
 			if (updateFlags.includes(UseAgentUpdate.OnStateChanged)) handlers.onStateChanged = batchedForceUpdate;
 			if (updateFlags.includes(UseAgentUpdate.OnRunStatusChanged)) {
 				handlers.onRunInitialized = batchedForceUpdate;
 				handlers.onRunFinalized = batchedForceUpdate;
 				handlers.onRunFailed = batchedForceUpdate;
+				handlers.onRunErrorEvent = batchedForceUpdate;
 			}
-			const subscription = agent.subscribe(handlers);
+			const subscription = copilotkit.subscribeToAgentWithOptions(agent, handlers, { throttleMs });
 			return () => {
 				active = false;
-				if (timerId !== null) clearTimeout(timerId);
 				subscription.unsubscribe();
 			};
 		}, [
 			agent,
 			forceUpdate,
-			effectiveThrottleMs,
+			throttleMs,
+			providerThrottleMs,
 			updateFlags
 		]);
 		(0, react.useEffect)(() => {
@@ -4705,13 +4685,14 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 		const { copilotkit } = useCopilotKit();
 		const [store] = (0, react.useState)(() => (0, _copilotkit_core.ɵcreateThreadStore)({ fetch: globalThis.fetch }));
 		const coreThreads = useThreadStoreSelector(store, _copilotkit_core.ɵselectThreads);
-		const threads = (0, react.useMemo)(() => coreThreads.map(({ id, agentId, name, archived, createdAt, updatedAt }) => ({
+		const threads = (0, react.useMemo)(() => coreThreads.map(({ id, agentId, name, archived, createdAt, updatedAt, lastRunAt }) => ({
 			id,
 			agentId,
 			name,
 			archived,
 			createdAt,
-			updatedAt
+			updatedAt,
+			...lastRunAt !== void 0 ? { lastRunAt } : {}
 		})), [coreThreads]);
 		const storeIsLoading = useThreadStoreSelector(store, _copilotkit_core.ɵselectThreadsIsLoading);
 		const storeError = useThreadStoreSelector(store, _copilotkit_core.ɵselectThreadsError);
@@ -4725,7 +4706,9 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 			if (copilotkit.runtimeUrl) return null;
 			return /* @__PURE__ */ new Error("Runtime URL is not configured");
 		}, [copilotkit.runtimeUrl]);
-		const isLoading = runtimeError ? false : storeIsLoading;
+		const [hasDispatchedContext, setHasDispatchedContext] = (0, react.useState)(false);
+		const preConnectLoading = !!copilotkit.runtimeUrl && !hasDispatchedContext;
+		const isLoading = runtimeError ? false : preConnectLoading || storeIsLoading;
 		const error = runtimeError !== null && runtimeError !== void 0 ? runtimeError : storeError;
 		(0, react.useEffect)(() => {
 			store.start();
@@ -4733,20 +4716,28 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 				store.stop();
 			};
 		}, [store]);
+		const runtimeStatus = copilotkit.runtimeConnectionStatus;
 		(0, react.useEffect)(() => {
 			var _copilotkit$intellige;
-			const context = copilotkit.runtimeUrl ? {
+			if (!copilotkit.runtimeUrl) {
+				store.setContext(null);
+				return;
+			}
+			if (runtimeStatus !== _copilotkit_core.CopilotKitCoreRuntimeConnectionStatus.Connected) return;
+			const context = {
 				runtimeUrl: copilotkit.runtimeUrl,
 				headers: { ...copilotkit.headers },
 				wsUrl: (_copilotkit$intellige = copilotkit.intelligence) === null || _copilotkit$intellige === void 0 ? void 0 : _copilotkit$intellige.wsUrl,
 				agentId,
 				includeArchived,
 				limit
-			} : null;
+			};
 			store.setContext(context);
+			setHasDispatchedContext(true);
 		}, [
 			store,
 			copilotkit.runtimeUrl,
+			runtimeStatus,
 			headersKey,
 			(_copilotkit$intellige2 = copilotkit.intelligence) === null || _copilotkit$intellige2 === void 0 ? void 0 : _copilotkit$intellige2.wsUrl,
 			agentId,
@@ -5136,20 +5127,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", {
@@ -5275,15 +5347,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
 			]
 		});
@@ -5966,6 +6038,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";
@@ -6000,73 +6073,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();
@@ -6308,9 +6314,91 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 		return keyboardState;
 	}
 
+//#endregion
+//#region src/v2/components/chat/normalize-auto-scroll.ts
+	const VALID = [
+		"pin-to-bottom",
+		"pin-to-send",
+		"none"
+	];
+	function normalizeAutoScroll(value) {
+		if (value === void 0) return "pin-to-bottom";
+		if (value === true) return "pin-to-bottom";
+		if (value === false) return "none";
+		if (VALID.includes(value)) return value;
+		return "pin-to-bottom";
+	}
+
+//#endregion
+//#region src/v2/components/chat/last-user-message-context.ts
+	const LastUserMessageContext = react.default.createContext({
+		id: null,
+		sendNonce: 0
+	});
+
+//#endregion
+//#region src/v2/hooks/use-pin-to-send.ts
+	function usePinToSend({ scrollRef, contentRef, spacerRef, topOffset = 16 }) {
+		const { id, sendNonce } = (0, react.useContext)(LastUserMessageContext);
+		const lastNonceRef = (0, react.useRef)(-1);
+		const currentSpacerHeightRef = (0, react.useRef)(0);
+		(0, react.useEffect)(() => {
+			if (sendNonce === lastNonceRef.current) return;
+			lastNonceRef.current = sendNonce;
+			if (!id) return;
+			const scrollEl = scrollRef.current;
+			const contentEl = contentRef.current;
+			const spacerEl = spacerRef.current;
+			if (!scrollEl || !contentEl || !spacerEl) return;
+			const escaped = typeof CSS !== "undefined" && CSS.escape ? CSS.escape(id) : id.replace(/[!"#$%&'()*+,./:;<=>?@[\\\]^`{|}~]/g, "\\$&");
+			const targetEl = contentEl.querySelector(`[data-message-id="${escaped}"]`);
+			if (!targetEl) return;
+			const viewportHeight = scrollEl.clientHeight;
+			const userMessageHeight = targetEl.getBoundingClientRect().height;
+			const paddingTop = parseFloat(getComputedStyle(targetEl).paddingTop) || 0;
+			const bubbleHeight = Math.max(0, userMessageHeight - paddingTop);
+			const spacerHeight = Math.max(0, viewportHeight - bubbleHeight - topOffset);
+			spacerEl.style.height = `${spacerHeight}px`;
+			currentSpacerHeightRef.current = spacerHeight;
+			const raf = requestAnimationFrame(() => {
+				const targetTop = computeOffsetTop(targetEl, scrollEl) + paddingTop - topOffset;
+				scrollEl.scrollTo({
+					top: Math.max(0, targetTop),
+					behavior: "smooth"
+				});
+			});
+			const ro = new ResizeObserver(() => {
+				if (!contentEl || !spacerEl || !scrollEl) return;
+				const consumedBelow = contentEl.getBoundingClientRect().height - computeOffsetTop(targetEl, contentEl) - userMessageHeight;
+				const remaining = Math.max(0, spacerHeight - consumedBelow);
+				if (remaining < currentSpacerHeightRef.current) {
+					spacerEl.style.height = `${remaining}px`;
+					currentSpacerHeightRef.current = remaining;
+				}
+			});
+			ro.observe(contentEl);
+			return () => {
+				cancelAnimationFrame(raf);
+				ro.disconnect();
+			};
+		}, [
+			id,
+			sendNonce,
+			scrollRef,
+			contentRef,
+			spacerRef,
+			topOffset
+		]);
+	}
+	function computeOffsetTop(el, stopAt) {
+		const elRect = el.getBoundingClientRect();
+		const stopRect = stopAt.getBoundingClientRect();
+		return elRect.top - stopRect.top + stopAt.scrollTop;
+	}
+
 //#endregion
 //#region src/v2/components/chat/CopilotChatView.tsx
-	const FEATHER_HEIGHT = 96;
+	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"),
@@ -6323,15 +6411,18 @@ 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, disclaimer, children, className, ...props }) {
-		const inputContainerRef = (0, react.useRef)(null);
+	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 [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;
@@ -6354,7 +6445,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
@@ -6373,11 +6464,11 @@ 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 } : {}
 		});
-		const hasSuggestions = Array.isArray(suggestions) && suggestions.length > 0;
+		const hasSuggestions = !isConnecting && Array.isArray(suggestions) && suggestions.length > 0;
 		const BoundSuggestionView = hasSuggestions ? renderSlot(suggestionView, CopilotChatSuggestionView, {
 			suggestions,
 			loadingIndexes: suggestionLoadingIndexes,
@@ -6389,7 +6480,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", {
@@ -6399,7 +6491,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 				})
 			})
 		});
-		if (messages.length === 0 && !(welcomeScreen === false)) {
+		if (messages.length === 0 && !(welcomeScreen === false) && !isConnecting && !hasExplicitThreadId) {
 			const BoundInputForWelcome = renderSlot(input, CopilotChatInput_default, {
 				onSubmitMessage,
 				onStop,
@@ -6463,15 +6555,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]
+				})
 			]
 		});
 	}
@@ -6501,15 +6597,66 @@ 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() })
 					})
 				] })
 			});
 		};
-		_CopilotChatView.ScrollView = ({ children, autoScroll = true, scrollToBottomButton, feather, inputContainerHeight = 0, isResizing = false, className, ...props }) => {
+		const PinToSendScrollContainer = ({ children, scrollRef, contentRef, scrollToBottom, scrollToBottomButton, feather, inputContainerHeight, isResizing, nonAutoScrollEl, nonAutoScrollRefCallback, showScrollButton, className, ...props }) => {
+			const spacerRef = (0, react.useRef)(null);
+			usePinToSend({
+				scrollRef,
+				contentRef,
+				spacerRef,
+				topOffset: 16
+			});
+			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", {
+					className: cn("cpk:h-full cpk:max-h-full cpk:flex cpk:flex-col cpk:min-h-0 cpk:relative", className),
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							ref: nonAutoScrollRefCallback,
+							className: "cpk:flex-1 cpk:min-h-0 cpk:overflow-y-auto cpk:overflow-x-hidden",
+							...props,
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								ref: contentRef,
+								className: "cpk:px-4 cpk:sm:px-0 cpk:[div[data-sidebar-chat]_&]:px-8 cpk:[div[data-popup-chat]_&]:px-6",
+								children
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								ref: spacerRef,
+								"data-pin-to-send-spacer": true,
+								"aria-hidden": "true",
+								style: {
+									height: 0,
+									flex: "0 0 auto"
+								}
+							})]
+						}),
+						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 + SCROLL_BUTTON_OFFSET}px` },
+							children: renderSlot(scrollToBottomButton, CopilotChatView.ScrollToBottomButton, { onClick: () => scrollToBottom() })
+						})
+					]
+				})
+			});
+		};
+		_CopilotChatView.ScrollView = ({ children, autoScroll = "pin-to-bottom", scrollToBottomButton, feather, inputContainerHeight = 0, isResizing = false, className, ...props }) => {
+			const mode = normalizeAutoScroll(autoScroll);
 			const [hasMounted, setHasMounted] = (0, react.useState)(false);
-			const { scrollRef, contentRef, scrollToBottom } = (0, use_stick_to_bottom.useStickToBottom)();
+			const scrollRef = (0, react.useRef)(null);
+			const contentRef = (0, react.useRef)(null);
+			const scrollToBottom = (0, react.useCallback)(() => {
+				const el = scrollRef.current;
+				if (el) el.scrollTo({
+					top: el.scrollHeight,
+					behavior: "smooth"
+				});
+			}, []);
 			const [showScrollButton, setShowScrollButton] = (0, react.useState)(false);
 			const [nonAutoScrollEl, setNonAutoScrollEl] = (0, react.useState)(null);
 			const nonAutoScrollRefCallback = (0, react.useCallback)((el) => {
@@ -6520,7 +6667,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 				setHasMounted(true);
 			}, []);
 			(0, react.useEffect)(() => {
-				if (autoScroll) return;
+				if (mode === "pin-to-bottom") return;
 				const scrollElement = scrollRef.current;
 				if (!scrollElement) return;
 				const checkScroll = () => {
@@ -6534,7 +6681,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 					scrollElement.removeEventListener("scroll", checkScroll);
 					resizeObserver.disconnect();
 				};
-			}, [scrollRef, autoScroll]);
+			}, [scrollRef, mode]);
 			if (!hasMounted) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: "cpk:h-full cpk:max-h-full cpk:flex cpk:flex-col cpk:min-h-0 cpk:overflow-y-auto cpk:overflow-x-hidden",
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -6542,7 +6689,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 					children
 				})
 			});
-			if (!autoScroll) {
+			if (mode === "none") {
 				const BoundFeather = renderSlot(feather, CopilotChatView.Feather, {});
 				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ScrollElementContext.Provider, {
 					value: nonAutoScrollEl,
@@ -6559,13 +6706,28 @@ 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() })
 							})
 						]
 					})
 				});
 			}
+			if (mode === "pin-to-send") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PinToSendScrollContainer, {
+				scrollRef,
+				contentRef,
+				scrollToBottom,
+				scrollToBottomButton,
+				feather,
+				inputContainerHeight,
+				isResizing,
+				nonAutoScrollEl,
+				nonAutoScrollRefCallback,
+				showScrollButton,
+				className,
+				...props,
+				children
+			});
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(use_stick_to_bottom.StickToBottom, {
 				className: cn("cpk:flex-1 cpk:max-h-full cpk:flex cpk:flex-col cpk:min-h-0", className),
 				resize: "smooth",
@@ -6588,9 +6750,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 }) => {
@@ -6762,10 +6923,9 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 		var _ref, _attachmentsConfig$ac;
 		const existingConfig = useCopilotChatConfiguration();
 		const resolvedAgentId = (_ref = agentId !== null && agentId !== void 0 ? agentId : existingConfig === null || existingConfig === void 0 ? void 0 : existingConfig.agentId) !== null && _ref !== void 0 ? _ref : _copilotkit_shared.DEFAULT_AGENT_ID;
-		const resolvedThreadId = (0, react.useMemo)(() => {
-			var _ref2;
-			return (_ref2 = threadId !== null && threadId !== void 0 ? threadId : existingConfig === null || existingConfig === void 0 ? void 0 : existingConfig.threadId) !== null && _ref2 !== void 0 ? _ref2 : (0, _copilotkit_shared.randomUUID)();
-		}, [threadId, existingConfig === null || existingConfig === void 0 ? void 0 : existingConfig.threadId]);
+		const providedThreadId = threadId !== null && threadId !== void 0 ? threadId : existingConfig === null || existingConfig === void 0 ? void 0 : existingConfig.threadId;
+		const resolvedThreadId = (0, react.useMemo)(() => providedThreadId !== null && providedThreadId !== void 0 ? providedThreadId : (0, _copilotkit_shared.randomUUID)(), [providedThreadId]);
+		const hasExplicitThreadId = !!threadId || !!(existingConfig === null || existingConfig === void 0 ? void 0 : existingConfig.hasExplicitThreadId);
 		const { agent } = useAgent({
 			agentId: resolvedAgentId,
 			threadId: resolvedThreadId,
@@ -6807,7 +6967,10 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 		const isTranscriptionEnabled = copilotkit.audioFileTranscriptionEnabled;
 		const isMediaRecorderSupported = typeof window !== "undefined" && typeof MediaRecorder !== "undefined";
 		const { messageView: providedMessageView, suggestionView: providedSuggestionView, onStop: providedStopHandler, ...restProps } = props;
+		const [lastConnectedThreadId, setLastConnectedThreadId] = (0, react.useState)(null);
+		const isConnecting = hasExplicitThreadId && lastConnectedThreadId !== resolvedThreadId;
 		(0, react.useEffect)(() => {
+			if (!hasExplicitThreadId) return;
 			let detached = false;
 			const connectAbortController = new AbortController();
 			if (agent instanceof _ag_ui_client.HttpAgent) agent.abortController = connectAbortController;
@@ -6817,6 +6980,10 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 				} catch (error) {
 					if (detached) return;
 					console.error("CopilotChat: connectAgent failed", error);
+				} finally {
+					if (!detached) (typeof requestAnimationFrame === "function" ? requestAnimationFrame : (cb) => setTimeout(cb, 16))(() => {
+						if (!detached) setLastConnectedThreadId(resolvedThreadId);
+					});
 				}
 			};
 			connect(agent);
@@ -6828,7 +6995,8 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 		}, [
 			resolvedThreadId,
 			agent,
-			resolvedAgentId
+			resolvedAgentId,
+			hasExplicitThreadId
 		]);
 		const onSubmitInput = (0, react.useCallback)(async (value) => {
 			if (selectedAttachments.some((a) => a.status === "uploading")) {
@@ -6985,6 +7153,22 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 			}).join(";") : "";
 			return `${m.id}:${m.role}:${contentKey}:${toolCallsKey}`;
 		}).join(",")]);
+		const lastUserMessageId = (0, react.useMemo)(() => {
+			for (let i = messages.length - 1; i >= 0; i--) if (messages[i].role === "user") return messages[i].id;
+			return null;
+		}, [messages]);
+		const [sendNonce, setSendNonce] = (0, react.useState)(0);
+		const prevLastUserMessageIdRef = (0, react.useRef)(lastUserMessageId);
+		(0, react.useEffect)(() => {
+			if (lastUserMessageId && lastUserMessageId !== prevLastUserMessageIdRef.current) {
+				setSendNonce((n) => n + 1);
+				prevLastUserMessageIdRef.current = lastUserMessageId;
+			}
+		}, [lastUserMessageId]);
+		const lastUserMessageState = (0, react.useMemo)(() => ({
+			id: lastUserMessageId,
+			sendNonce
+		}), [lastUserMessageId, sendNonce]);
 		const RenderedChatView = renderSlot(chatView, CopilotChatView, {
 			...mergedProps,
 			messages,
@@ -7003,11 +7187,14 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 			dragOver,
 			onDragOver: handleDragOver,
 			onDragLeave: handleDragLeave,
-			onDrop: handleDrop
+			onDrop: handleDrop,
+			isConnecting,
+			hasExplicitThreadId
 		});
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CopilotChatConfigurationProvider, {
 			agentId: resolvedAgentId,
 			threadId: resolvedThreadId,
+			hasExplicitThreadId,
 			labels,
 			isModalDefaultOpen,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -7038,7 +7225,10 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 						},
 						children: transcriptionError
 					}),
-					RenderedChatView
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(LastUserMessageContext.Provider, {
+						value: lastUserMessageState,
+						children: RenderedChatView
+					})
 				]
 			})
 		});
@@ -8663,12 +8853,19 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 //#region src/context/threads-context.tsx
 	const ThreadsContext = (0, react.createContext)(void 0);
 	function ThreadsProvider({ children, threadId: explicitThreadId }) {
-		const [internalThreadId, setThreadId] = (0, react.useState)(() => (0, _copilotkit_shared.randomUUID)());
+		const [internalThreadId, setInternalThreadId] = (0, react.useState)(() => (0, _copilotkit_shared.randomUUID)());
+		const [internalIsExplicit, setInternalIsExplicit] = (0, react.useState)(false);
 		const threadId = explicitThreadId !== null && explicitThreadId !== void 0 ? explicitThreadId : internalThreadId;
+		const isThreadIdExplicit = explicitThreadId != null || internalIsExplicit;
+		const setThreadId = (0, react.useCallback)((value) => {
+			setInternalThreadId(value);
+			setInternalIsExplicit(true);
+		}, []);
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ThreadsContext.Provider, {
 			value: {
 				threadId,
-				setThreadId
+				setThreadId,
+				isThreadIdExplicit
 			},
 			children
 		});
@@ -9388,7 +9585,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 			if (props.agent) setAgentSession({ agentName: props.agent });
 			else setAgentSession(null);
 		}, [props.agent]);
-		const { threadId, setThreadId: setInternalThreadId } = useThreads$1();
+		const { threadId, setThreadId: setInternalThreadId, isThreadIdExplicit } = useThreads$1();
 		const setThreadId = (0, react.useCallback)((value) => {
 			if (props.threadId) throw new Error("Cannot call setThreadId() when threadId is provided via props.");
 			setInternalThreadId(value);
@@ -9594,6 +9791,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CopilotChatConfigurationProvider, {
 			agentId: (_props$agent2 = props.agent) !== null && _props$agent2 !== void 0 ? _props$agent2 : "default",
 			threadId,
+			hasExplicitThreadId: isThreadIdExplicit,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(CopilotContext.Provider, {
 				value: copilotContextValue,
 				children: [