@copilotkit/react-core 1.56.1 → 1.56.2-canary.pin-to-send

package/dist/v2/index.umd.js

@@ -599,7 +599,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 +1134,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 +1362,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 +1405,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 +3397,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 +3618,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 +3681,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 +3694,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 +4682,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 +4703,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 +4713,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,
@@ -6308,9 +6296,97 @@ 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 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
+	});
 	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,7 +6399,7 @@ 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 }) {
+	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 [inputContainerHeight, setInputContainerHeight] = (0, react.useState)(0);
 		const [isResizing, setIsResizing] = (0, react.useState)(false);
@@ -6375,9 +6451,10 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 			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 && !isRunning && Array.isArray(suggestions) && suggestions.length > 0;
 		const BoundSuggestionView = hasSuggestions ? renderSlot(suggestionView, CopilotChatSuggestionView, {
 			suggestions,
 			loadingIndexes: suggestionLoadingIndexes,
@@ -6399,7 +6476,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,
@@ -6507,9 +6584,60 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 				] })
 			});
 		};
-		_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, PinToSendSoftFeather, {});
+			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 + PIN_TO_SEND_FEATHER_HEIGHT + 16}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 +6648,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 +6662,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 +6670,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,
@@ -6566,6 +6694,21 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 					})
 				});
 			}
+			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",
@@ -6762,10 +6905,8 @@ 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 { agent } = useAgent({
 			agentId: resolvedAgentId,
 			threadId: resolvedThreadId,
@@ -6807,7 +6948,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 = !!providedThreadId && lastConnectedThreadId !== resolvedThreadId;
 		(0, react.useEffect)(() => {
+			if (!providedThreadId) return;
 			let detached = false;
 			const connectAbortController = new AbortController();
 			if (agent instanceof _ag_ui_client.HttpAgent) agent.abortController = connectAbortController;
@@ -6817,6 +6961,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 +6976,8 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 		}, [
 			resolvedThreadId,
 			agent,
-			resolvedAgentId
+			resolvedAgentId,
+			providedThreadId
 		]);
 		const onSubmitInput = (0, react.useCallback)(async (value) => {
 			if (selectedAttachments.some((a) => a.status === "uploading")) {
@@ -6985,6 +7134,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,7 +7168,9 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 			dragOver,
 			onDragOver: handleDragOver,
 			onDragLeave: handleDragLeave,
-			onDrop: handleDrop
+			onDrop: handleDrop,
+			isConnecting,
+			hasExplicitThreadId: !!providedThreadId
 		});
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CopilotChatConfigurationProvider, {
 			agentId: resolvedAgentId,
@@ -7038,7 +7205,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
+					})
 				]
 			})
 		});