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

package/dist/{copilotkit-Cvb6WpAX.cjs → copilotkit-D5JT2Pu3.cjs}

@@ -299,8 +299,9 @@ const buttonVariants = (0, class_variance_authority.cva)("cpk:inline-flex cpk:it
 		size: "default"
 	}
 });
-function Button({ className, variant, size, asChild = false, ...props }) {
+const Button = react.forwardRef(function Button({ className, variant, size, asChild = false, ...props }, ref) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(asChild ? _radix_ui_react_slot.Slot : "button", {
+		ref,
 		"data-slot": "button",
 		className: cn(buttonVariants({
 			variant,
@@ -309,7 +310,7 @@ function Button({ className, variant, size, asChild = false, ...props }) {
 		})),
 		...props
 	});
-}
+});
 
 //#endregion
 //#region src/v2/components/ui/tooltip.tsx
@@ -609,7 +610,7 @@ CopilotChatAudioRecorder.displayName = "CopilotChatAudioRecorder";
 //#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 }) {
 	const isControlled = value !== void 0;
 	const [internalValue, setInternalValue] = (0, react.useState)(() => value ?? "");
 	(0, react.useEffect)(() => {
@@ -751,6 +752,7 @@ function CopilotChatInput({ mode = "input", onSubmitMessage, onStop, isRunning =
 		});
 	}, [clearInputValue]);
 	const handleKeyDown = (e) => {
+		if (e.nativeEvent.isComposing || e.keyCode === 229) return;
 		if (commandQuery !== null && mode === "input") {
 			if (e.key === "ArrowDown") {
 				if (filteredCommands.length > 0) {
@@ -798,10 +800,8 @@ function CopilotChatInput({ mode = "input", onSubmitMessage, onStop, isRunning =
 		const trimmed = resolvedValue.trim();
 		if (!trimmed) return;
 		onSubmitMessage(trimmed);
-		if (!isControlled) {
-			setInternalValue("");
-			onChange?.("");
-		}
+		if (!isControlled) setInternalValue("");
+		onChange?.("");
 		if (inputRef.current) inputRef.current.focus();
 	};
 	const BoundTextArea = renderSlot(textArea, CopilotChatInput.TextArea, {
@@ -809,6 +809,12 @@ function CopilotChatInput({ mode = "input", onSubmitMessage, onStop, isRunning =
 		value: resolvedValue,
 		onChange: handleChange,
 		onKeyDown: handleKeyDown,
+		onCompositionStart: () => {
+			isComposingRef.current = true;
+		},
+		onCompositionEnd: () => {
+			isComposingRef.current = false;
+		},
 		autoFocus,
 		className: (0, tailwind_merge.twMerge)("cpk:w-full cpk:py-3", isExpanded ? "cpk:px-5" : "cpk:pr-5")
 	});
@@ -883,9 +889,10 @@ function CopilotChatInput({ mode = "input", onSubmitMessage, onStop, isRunning =
 		const target = e.target;
 		if (target.tagName !== "BUTTON" && !target.closest("button") && inputRef.current && mode === "input") inputRef.current.focus();
 	};
+	const isComposingRef = (0, react.useRef)(false);
 	const ensureMeasurements = (0, react.useCallback)(() => {
 		const textarea = inputRef.current;
-		if (!textarea) return;
+		if (!textarea || isComposingRef.current) return;
 		const previousValue = textarea.value;
 		const previousHeight = textarea.style.height;
 		textarea.style.height = "auto";
@@ -1127,7 +1134,8 @@ function CopilotChatInput({ mode = "input", onSubmitMessage, onStop, isRunning =
 		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", {
@@ -1342,6 +1350,8 @@ CopilotKitInspector.displayName = "CopilotKitInspector";
 
 //#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",
@@ -1383,6 +1393,14 @@ function getSeverityStyle(severity) {
 	}
 }
 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,
@@ -3335,7 +3353,6 @@ const CopilotKitProvider = ({ children, runtimeUrl, headers: headersProp = {}, c
 		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?.designSkill ?? DEFAULT_DESIGN_SKILL;
@@ -3433,18 +3450,21 @@ const ToolCallRenderer = react.default.memo(function ToolCallRenderer({ toolCall
 	const toolName = toolCall.function.name;
 	if (toolMessage) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RenderComponent, {
 		name: toolName,
+		toolCallId: toolCall.id,
 		args,
 		status: _copilotkit_core.ToolCallStatus.Complete,
 		result: toolMessage.content
 	});
 	else if (isExecuting) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RenderComponent, {
 		name: toolName,
+		toolCallId: toolCall.id,
 		args,
 		status: _copilotkit_core.ToolCallStatus.Executing,
 		result: void 0
 	});
 	else return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RenderComponent, {
 		name: toolName,
+		toolCallId: toolCall.id,
 		args,
 		status: _copilotkit_core.ToolCallStatus.InProgress,
 		result: void 0
@@ -3549,15 +3569,6 @@ function useAgent({ agentId, threadId, updates, throttleMs } = {}) {
 	const providerThrottleMs = copilotkit.defaultThrottleMs;
 	const chatConfig = useCopilotChatConfiguration();
 	threadId ??= chatConfig?.threadId;
-	const effectiveThrottleMs = (0, react.useMemo)(() => {
-		const resolved = throttleMs ?? providerThrottleMs ?? 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 ?? ALL_UPDATES, [JSON.stringify(updates)]);
 	const provisionalAgentCache = (0, react.useRef)(/* @__PURE__ */ new Map());
@@ -3620,9 +3631,8 @@ function useAgent({ agentId, threadId, updates, throttleMs } = {}) {
 	]);
 	(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;
@@ -3634,46 +3644,24 @@ function useAgent({ agentId, threadId, updates, throttleMs } = {}) {
 				});
 			}
 		};
-		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)(() => {
@@ -3701,7 +3689,7 @@ function useRenderCustomMessages() {
 		const runId = resolvedRunId ?? `missing-run-id:${message.id}`;
 		const registryAgent = copilotkit.getAgent(agentId);
 		const agent = getThreadClone(registryAgent, threadId) ?? registryAgent;
-		if (!agent) throw new Error("Agent not found");
+		if (!agent) return null;
 		const messagesIdsInRun = resolvedRunId ? agent.messages.filter((msg) => copilotkit.getRunIdForMessage(agentId, threadId, msg.id) === resolvedRunId).map((msg) => msg.id) : [message.id];
 		const rawMessageIndex = agent.messages.findIndex((msg) => msg.id === message.id);
 		const messageIndex = rawMessageIndex >= 0 ? rawMessageIndex : 0;
@@ -4627,13 +4615,14 @@ function useThreads$1({ agentId, includeArchived, limit }) {
 	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);
@@ -4646,7 +4635,9 @@ function useThreads$1({ agentId, includeArchived, limit }) {
 		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 ?? storeError;
 	(0, react.useEffect)(() => {
 		store.start();
@@ -4654,19 +4645,27 @@ function useThreads$1({ agentId, includeArchived, limit }) {
 			store.stop();
 		};
 	}, [store]);
+	const runtimeStatus = copilotkit.runtimeConnectionStatus;
 	(0, react.useEffect)(() => {
-		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.intelligence?.wsUrl,
 			agentId,
 			includeArchived,
 			limit
-		} : null;
+		};
 		store.setContext(context);
+		setHasDispatchedContext(true);
 	}, [
 		store,
 		copilotkit.runtimeUrl,
+		runtimeStatus,
 		headersKey,
 		copilotkit.intelligence?.wsUrl,
 		agentId,
@@ -4871,10 +4870,10 @@ function CopilotChatAssistantMessage({ message, messages, isRunning, onThumbsUp,
 		if (message.content) return await (0, _copilotkit_shared.copyToClipboard)(message.content);
 		return false;
 	} });
-	const boundThumbsUpButton = renderSlot(thumbsUpButton, CopilotChatAssistantMessage.ThumbsUpButton, { onClick: onThumbsUp });
-	const boundThumbsDownButton = renderSlot(thumbsDownButton, CopilotChatAssistantMessage.ThumbsDownButton, { onClick: onThumbsDown });
-	const boundReadAloudButton = renderSlot(readAloudButton, CopilotChatAssistantMessage.ReadAloudButton, { onClick: onReadAloud });
-	const boundRegenerateButton = renderSlot(regenerateButton, CopilotChatAssistantMessage.RegenerateButton, { onClick: onRegenerate });
+	const boundThumbsUpButton = renderSlot(thumbsUpButton, CopilotChatAssistantMessage.ThumbsUpButton, { onClick: onThumbsUp ? () => onThumbsUp(message) : void 0 });
+	const boundThumbsDownButton = renderSlot(thumbsDownButton, CopilotChatAssistantMessage.ThumbsDownButton, { onClick: onThumbsDown ? () => onThumbsDown(message) : void 0 });
+	const boundReadAloudButton = renderSlot(readAloudButton, CopilotChatAssistantMessage.ReadAloudButton, { onClick: onReadAloud ? () => onReadAloud(message) : void 0 });
+	const boundRegenerateButton = renderSlot(regenerateButton, CopilotChatAssistantMessage.RegenerateButton, { onClick: onRegenerate ? () => onRegenerate(message) : void 0 });
 	const boundToolbar = renderSlot(toolbar, CopilotChatAssistantMessage.Toolbar, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "cpk:flex cpk:items-center cpk:gap-1",
 		children: [
@@ -6191,9 +6190,97 @@ function useKeyboardHeight() {
 	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"),
@@ -6206,7 +6293,7 @@ function DropOverlay() {
 		})
 	});
 }
-function CopilotChatView({ messageView, input, scrollView, suggestionView, welcomeScreen, messages = [], autoScroll = true, isRunning = false, suggestions, suggestionLoadingIndexes, onSelectSuggestion, onSubmitMessage, onStop, inputMode, inputValue, onInputChange, onStartTranscribe, onCancelTranscribe, onFinishTranscribe, onFinishTranscribeWithAudio, attachments, onRemoveAttachment, onAddFile, dragOver, onDragOver, onDragLeave, onDrop, 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);
@@ -6258,9 +6345,10 @@ function CopilotChatView({ messageView, input, scrollView, suggestionView, welco
 		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,
@@ -6282,7 +6370,7 @@ function CopilotChatView({ messageView, input, scrollView, suggestionView, welco
 			})
 		})
 	});
-	if (messages.length === 0 && !(welcomeScreen === false)) {
+	if (messages.length === 0 && !(welcomeScreen === false) && !isConnecting && !hasExplicitThreadId) {
 		const BoundInputForWelcome = renderSlot(input, CopilotChatInput_default, {
 			onSubmitMessage,
 			onStop,
@@ -6389,9 +6477,60 @@ function CopilotChatView({ messageView, input, scrollView, suggestionView, welco
 			] })
 		});
 	};
-	_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) => {
@@ -6402,7 +6541,7 @@ function CopilotChatView({ messageView, input, scrollView, suggestionView, welco
 			setHasMounted(true);
 		}, []);
 		(0, react.useEffect)(() => {
-			if (autoScroll) return;
+			if (mode === "pin-to-bottom") return;
 			const scrollElement = scrollRef.current;
 			if (!scrollElement) return;
 			const checkScroll = () => {
@@ -6416,7 +6555,7 @@ function CopilotChatView({ messageView, input, scrollView, suggestionView, welco
 				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", {
@@ -6424,7 +6563,7 @@ function CopilotChatView({ messageView, input, scrollView, suggestionView, welco
 				children
 			})
 		});
-		if (!autoScroll) {
+		if (mode === "none") {
 			const BoundFeather = renderSlot(feather, CopilotChatView.Feather, {});
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ScrollElementContext.Provider, {
 				value: nonAutoScrollEl,
@@ -6448,6 +6587,21 @@ function CopilotChatView({ messageView, input, scrollView, suggestionView, welco
 				})
 			});
 		}
+		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",
@@ -6640,7 +6794,8 @@ async function transcribeAudio(core, audioBlob, filename = "recording.webm") {
 function CopilotChat({ agentId, threadId, labels, chatView, isModalDefaultOpen, attachments: attachmentsConfig, onError, throttleMs, ...props }) {
 	const existingConfig = useCopilotChatConfiguration();
 	const resolvedAgentId = agentId ?? existingConfig?.agentId ?? _copilotkit_shared.DEFAULT_AGENT_ID;
-	const resolvedThreadId = (0, react.useMemo)(() => threadId ?? existingConfig?.threadId ?? (0, _copilotkit_shared.randomUUID)(), [threadId, existingConfig?.threadId]);
+	const providedThreadId = threadId ?? existingConfig?.threadId;
+	const resolvedThreadId = (0, react.useMemo)(() => providedThreadId ?? (0, _copilotkit_shared.randomUUID)(), [providedThreadId]);
 	const { agent } = useAgent({
 		agentId: resolvedAgentId,
 		threadId: resolvedThreadId,
@@ -6678,7 +6833,10 @@ function CopilotChat({ agentId, threadId, labels, chatView, isModalDefaultOpen,
 	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;
@@ -6688,6 +6846,10 @@ function CopilotChat({ agentId, threadId, labels, chatView, isModalDefaultOpen,
 			} 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);
@@ -6699,7 +6861,8 @@ function CopilotChat({ agentId, threadId, labels, chatView, isModalDefaultOpen,
 	}, [
 		resolvedThreadId,
 		agent,
-		resolvedAgentId
+		resolvedAgentId,
+		providedThreadId
 	]);
 	const onSubmitInput = (0, react.useCallback)(async (value) => {
 		if (selectedAttachments.some((a) => a.status === "uploading")) {
@@ -6852,6 +7015,22 @@ function CopilotChat({ agentId, threadId, labels, chatView, isModalDefaultOpen,
 		const toolCallsKey = "toolCalls" in m && Array.isArray(m.toolCalls) ? m.toolCalls.map((tc) => `${tc.id}:${tc.function?.arguments?.length ?? 0}`).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,
@@ -6870,7 +7049,9 @@ function CopilotChat({ agentId, threadId, labels, chatView, isModalDefaultOpen,
 		dragOver,
 		onDragOver: handleDragOver,
 		onDragLeave: handleDragLeave,
-		onDrop: handleDrop
+		onDrop: handleDrop,
+		isConnecting,
+		hasExplicitThreadId: !!providedThreadId
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CopilotChatConfigurationProvider, {
 		agentId: resolvedAgentId,
@@ -6905,7 +7086,10 @@ function CopilotChat({ agentId, threadId, labels, chatView, isModalDefaultOpen,
 					},
 					children: transcriptionError
 				}),
-				RenderedChatView
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(LastUserMessageContext.Provider, {
+					value: lastUserMessageState,
+					children: RenderedChatView
+				})
 			]
 		})
 	});
@@ -9043,12 +9227,17 @@ const usePredictStateSubscription = (agent) => {
 		};
 	}, [agent, getSubscriber]);
 };
-function CopilotListeners() {
-	const { copilotkit } = useCopilotKit();
+function CopilotListenersAgentSubscription() {
 	const resolvedAgentId = useCopilotChatConfiguration()?.agentId;
-	const { setBannerError } = useToast();
 	const { agent } = useAgent({ agentId: resolvedAgentId });
 	usePredictStateSubscription(agent);
+	return null;
+}
+function CopilotListeners() {
+	const { copilotkit } = useCopilotKit();
+	const { setBannerError } = useToast();
+	const hasAgents = Object.keys(copilotkit.agents ?? {}).length > 0;
+	const hasRuntime = copilotkit.runtimeUrl !== void 0;
 	(0, react.useEffect)(() => {
 		const subscription = copilotkit.subscribe({ onError: ({ error, code, context }) => {
 			if (error.name === "AbortError" || error.message === "Fetch is aborted" || error.message === "signal is aborted without reason" || error.message === "component unmounted" || !error.message) return;
@@ -9070,7 +9259,7 @@ function CopilotListeners() {
 			subscription.unsubscribe();
 		};
 	}, [copilotkit?.subscribe]);
-	return null;
+	return hasAgents || hasRuntime ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CopilotListenersAgentSubscription, {}) : null;
 }
 
 //#endregion
@@ -10002,4 +10191,4 @@ Object.defineProperty(exports, 'useToast', {
     return useToast;
   }
 });
-//# sourceMappingURL=copilotkit-Cvb6WpAX.cjs.map
+//# sourceMappingURL=copilotkit-D5JT2Pu3.cjs.map