@copilotkit/react-core 1.56.4-canary.1777659843 → 1.56.5-canary.1777664617

package/dist/{copilotkit-DHEUlli6.mjs → copilotkit-CPe2-340.mjs}

@@ -16,8 +16,8 @@ import { z } from "zod";
 import { createComponent } from "@lit-labs/react";
 import { A2UIProvider, A2UIRenderer, A2UI_SCHEMA_CONTEXT_DESCRIPTION, DEFAULT_SURFACE_ID, buildCatalogContextValue, extractCatalogComponentSchemas, initializeDefaultCatalog, injectStyles, useA2UIActions, useA2UIError, viewerTheme } from "@copilotkit/a2ui-renderer";
 import { zodToJsonSchema } from "zod-to-json-schema";
-import { useVirtualizer } from "@tanstack/react-virtual";
 import { createPortal, flushSync } from "react-dom";
+import { useVirtualizer } from "@tanstack/react-virtual";
 import { StickToBottom, useStickToBottomContext } from "use-stick-to-bottom";
 import ReactMarkdown from "react-markdown";
 
@@ -4302,15 +4302,19 @@ function useConfigureSuggestions(config, deps) {
 		return consumer;
 	}, [normalizedConfig, resolvedConsumerAgentId]);
 	const isGlobalConfig = rawConsumerAgentId === void 0 || rawConsumerAgentId === "*";
+	const isDynamicConfigType = useMemo(() => !!normalizedConfig && "instructions" in normalizedConfig, [normalizedConfig]);
 	const requestReload = useCallback(() => {
 		if (!normalizedConfig) return;
 		if (isGlobalConfig) {
+			const seen = /* @__PURE__ */ new Set();
 			const agents = Object.values(copilotkit.agents ?? {});
 			for (const entry of agents) {
 				const agentId = entry.agentId;
 				if (!agentId) continue;
+				seen.add(agentId);
 				if (!entry.isRunning) copilotkit.reloadSuggestions(agentId);
 			}
+			if (targetAgentId && !seen.has(targetAgentId)) copilotkit.reloadSuggestions(targetAgentId);
 			return;
 		}
 		if (!targetAgentId) return;
@@ -4355,6 +4359,26 @@ function useConfigureSuggestions(config, deps) {
 		requestReload,
 		...extraDeps
 	]);
+	useEffect(() => {
+		if (!normalizedConfig || !isDynamicConfigType) return;
+		if (!targetAgentId) return;
+		if (!!copilotkit.getAgent(targetAgentId)) return;
+		const subscription = copilotkit.subscribe({ onAgentsChanged: () => {
+			if (copilotkit.getAgent(targetAgentId)) {
+				requestReload();
+				subscription.unsubscribe();
+			}
+		} });
+		return () => {
+			subscription.unsubscribe();
+		};
+	}, [
+		copilotkit,
+		normalizedConfig,
+		isDynamicConfigType,
+		targetAgentId,
+		requestReload
+	]);
 }
 function isDynamicConfig(config) {
 	return "instructions" in config;
@@ -4619,6 +4643,16 @@ function useThreads$1({ agentId, includeArchived, limit }) {
 		};
 	}, [store]);
 	const runtimeStatus = copilotkit.runtimeConnectionStatus;
+	useEffect(() => {
+		copilotkit.registerThreadStore(agentId, store);
+		return () => {
+			copilotkit.unregisterThreadStore(agentId);
+		};
+	}, [
+		copilotkit,
+		agentId,
+		store
+	]);
 	useEffect(() => {
 		if (!copilotkit.runtimeUrl) {
 			store.setContext(null);
@@ -4642,7 +4676,6 @@ function useThreads$1({ agentId, includeArchived, limit }) {
 		headersKey,
 		copilotkit.intelligence?.wsUrl,
 		agentId,
-		copilotkit.headers,
 		includeArchived,
 		limit
 	]);
@@ -5006,20 +5039,101 @@ CopilotChatAssistantMessage.ReadAloudButton.displayName = "CopilotChatAssistantM
 CopilotChatAssistantMessage.RegenerateButton.displayName = "CopilotChatAssistantMessage.RegenerateButton";
 var CopilotChatAssistantMessage_default = CopilotChatAssistantMessage;
 
+//#endregion
+//#region src/v2/components/chat/Lightbox.tsx
+function Lightbox({ onClose, children }) {
+	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 createPortal(/* @__PURE__ */ 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__ */ 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__ */ jsx(X, { className: "cpk:w-5 cpk:h-5" })
+		}), /* @__PURE__ */ 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 = useRef(null);
+	const [open, setOpen] = useState(false);
+	const vtName = useId();
+	return {
+		thumbnailRef,
+		vtName,
+		open,
+		openLightbox: useCallback(() => {
+			const thumb = thumbnailRef.current;
+			const doc = document;
+			if (doc.startViewTransition && thumb) {
+				thumb.style.viewTransitionName = vtName;
+				doc.startViewTransition(() => {
+					thumb.style.viewTransitionName = "";
+					flushSync(() => setOpen(true));
+				});
+			} else setOpen(true);
+		}, [vtName]),
+		closeLightbox: useCallback(() => {
+			const thumb = thumbnailRef.current;
+			const doc = document;
+			if (doc.startViewTransition && thumb) doc.startViewTransition(() => {
+				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 = memo(function ImageAttachment({ src, className }) {
 	const [error, setError] = useState(false);
+	const { thumbnailRef, vtName, open, openLightbox, closeLightbox } = useLightbox();
 	if (error) return /* @__PURE__ */ 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__ */ jsx("span", { children: "Failed to load image" })
 	});
-	return /* @__PURE__ */ jsx("img", {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ 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__ */ jsx(Lightbox, {
+		onClose: closeLightbox,
+		children: /* @__PURE__ */ 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 = memo(function AudioAttachment({ src, filename, className }) {
 	return /* @__PURE__ */ jsxs("div", {
@@ -5144,15 +5258,15 @@ function CopilotChatUserMessage({ message, onEditMessage, branchIndex, numberOfB
 		"data-message-id": message.id,
 		...props,
 		children: [
-			BoundMessageRenderer,
 			mediaParts.length > 0 && /* @__PURE__ */ 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__ */ jsx(CopilotChatAttachmentRenderer, {
 					type: part.type,
 					source: part.source,
 					filename: getFilename(part)
 				}, index))
 			}),
+			BoundMessageRenderer,
 			BoundToolbar
 		]
 	});
@@ -5856,73 +5970,6 @@ function AttachmentPreview({ attachment }) {
 		case "document": return /* @__PURE__ */ jsx(DocumentPreview, { attachment });
 	}
 }
-function Lightbox({ onClose, children }) {
-	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 createPortal(/* @__PURE__ */ 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__ */ 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__ */ jsx(X, { className: "cpk:w-5 cpk:h-5" })
-		}), /* @__PURE__ */ 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 = useRef(null);
-	const [open, setOpen] = useState(false);
-	const vtName = useId();
-	return {
-		thumbnailRef,
-		vtName,
-		open,
-		openLightbox: useCallback(() => {
-			const thumb = thumbnailRef.current;
-			const doc = document;
-			if (doc.startViewTransition && thumb) {
-				thumb.style.viewTransitionName = vtName;
-				doc.startViewTransition(() => {
-					thumb.style.viewTransitionName = "";
-					flushSync(() => setOpen(true));
-				});
-			} else setOpen(true);
-		}, []),
-		closeLightbox: useCallback(() => {
-			const thumb = thumbnailRef.current;
-			const doc = document;
-			if (doc.startViewTransition && thumb) doc.startViewTransition(() => {
-				flushSync(() => setOpen(false));
-				thumb.style.viewTransitionName = vtName;
-			}).finished.then(() => {
-				thumb.style.viewTransitionName = "";
-			}).catch(() => {
-				thumb.style.viewTransitionName = "";
-			});
-			else setOpen(false);
-		}, [])
-	};
-}
 function ImagePreview({ attachment }) {
 	const src = getSourceUrl(attachment.source);
 	const { thumbnailRef, vtName, open, openLightbox, closeLightbox } = useLightbox();
@@ -6188,40 +6235,55 @@ const LastUserMessageContext = React.createContext({
 
 //#endregion
 //#region src/v2/hooks/use-pin-to-send.ts
-function usePinToSend({ scrollRef, contentRef, topOffset = 16 }) {
+function usePinToSend({ scrollRef, contentRef, spacerRef, topOffset = 16 }) {
 	const { id, sendNonce } = useContext(LastUserMessageContext);
 	const lastNonceRef = useRef(-1);
+	const currentSpacerHeightRef = useRef(0);
 	useEffect(() => {
 		if (sendNonce === lastNonceRef.current) return;
 		lastNonceRef.current = sendNonce;
 		if (!id) return;
 		const scrollEl = scrollRef.current;
 		const contentEl = contentRef.current;
-		if (!scrollEl || !contentEl) return;
+		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 userMsgOffsetInScroll = computeOffsetTop(targetEl, scrollEl);
-		const requiredScrollHeight = userMsgOffsetInScroll + paddingTop + viewportHeight - topOffset;
-		contentEl.style.minHeight = `${Math.max(0, requiredScrollHeight)}px`;
+		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 = userMsgOffsetInScroll + paddingTop - topOffset;
+			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);
-			contentEl.style.minHeight = "";
+			ro.disconnect();
 		};
 	}, [
 		id,
 		sendNonce,
 		scrollRef,
 		contentRef,
+		spacerRef,
 		topOffset
 	]);
 }
@@ -6247,14 +6309,17 @@ function DropOverlay() {
 	});
 }
 function CopilotChatView({ messageView, input, scrollView, suggestionView, welcomeScreen, messages = [], autoScroll = true, isRunning = false, suggestions, suggestionLoadingIndexes, onSelectSuggestion, onSubmitMessage, onStop, inputMode, inputValue, onInputChange, onStartTranscribe, onCancelTranscribe, onFinishTranscribe, onFinishTranscribeWithAudio, attachments, onRemoveAttachment, onAddFile, dragOver, onDragOver, onDragLeave, onDrop, isConnecting = false, hasExplicitThreadId = false, disclaimer, children, className, ...props }) {
-	const inputContainerRef = useRef(null);
+	const [inputContainerEl, setInputContainerEl] = useState(null);
 	const [inputContainerHeight, setInputContainerHeight] = useState(0);
 	const [isResizing, setIsResizing] = useState(false);
 	const resizeTimeoutRef = useRef(null);
 	const { isKeyboardOpen, keyboardHeight, availableHeight } = useKeyboardHeight();
 	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;
@@ -6277,7 +6342,7 @@ function CopilotChatView({ messageView, input, scrollView, suggestionView, welco
 			resizeObserver.disconnect();
 			if (resizeTimeoutRef.current) clearTimeout(resizeTimeoutRef.current);
 		};
-	}, []);
+	}, [inputContainerEl]);
 	const BoundMessageView = renderSlot(messageView, CopilotChatMessageView, {
 		messages,
 		isRunning
@@ -6388,7 +6453,7 @@ function CopilotChatView({ messageView, input, scrollView, suggestionView, welco
 			dragOver && /* @__PURE__ */ jsx(DropOverlay, {}),
 			BoundScrollView,
 			/* @__PURE__ */ jsxs("div", {
-				ref: inputContainerRef,
+				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__ */ jsx("div", {
@@ -6435,9 +6500,11 @@ function CopilotChatView({ messageView, input, scrollView, suggestionView, welco
 		});
 	};
 	const PinToSendScrollContainer = ({ children, scrollRef, contentRef, scrollToBottom, scrollToBottomButton, feather, inputContainerHeight, isResizing, nonAutoScrollEl, nonAutoScrollRefCallback, showScrollButton, className, ...props }) => {
+		const spacerRef = useRef(null);
 		usePinToSend({
 			scrollRef,
 			contentRef,
+			spacerRef,
 			topOffset: 16
 		});
 		const BoundFeather = renderSlot(feather, CopilotChatView.Feather, {});
@@ -6446,16 +6513,23 @@ function CopilotChatView({ messageView, input, scrollView, suggestionView, welco
 			children: /* @__PURE__ */ 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__ */ jsx("div", {
+					/* @__PURE__ */ jsxs("div", {
 						ref: nonAutoScrollRefCallback,
 						className: "cpk:flex-1 cpk:min-h-0 cpk:overflow-y-auto cpk:overflow-x-hidden",
 						...props,
-						children: /* @__PURE__ */ jsx("div", {
+						children: [/* @__PURE__ */ jsx("div", {
 							ref: contentRef,
-							"data-pin-to-send-content": true,
 							className: "cpk:px-4 cpk:sm:px-0 cpk:[div[data-sidebar-chat]_&]:px-8 cpk:[div[data-popup-chat]_&]:px-6",
 							children
-						})
+						}), /* @__PURE__ */ jsx("div", {
+							ref: spacerRef,
+							"data-pin-to-send-spacer": true,
+							"aria-hidden": "true",
+							style: {
+								height: 0,
+								flex: "0 0 auto"
+							}
+						})]
 					}),
 					BoundFeather,
 					showScrollButton && !isResizing && /* @__PURE__ */ jsx("div", {
@@ -9729,4 +9803,4 @@ function validateProps(props) {
 
 //#endregion
 export { CopilotKitProvider as $, CopilotChatSuggestionView as A, useConfigureSuggestions as B, CopilotChatToggleButton as C, CopilotChatView_default as D, CopilotChat as E, CopilotChatAssistantMessage_default as F, useRenderTool as G, useCapabilities as H, CopilotChatToolCallsView as I, useRenderActivityMessage as J, useComponent as K, useAttachments as L, CopilotChatReasoningMessage_default as M, CopilotChatUserMessage_default as N, CopilotChatAttachmentQueue as O, CopilotChatAttachmentRenderer as P, useRenderToolCall as Q, useThreads$1 as R, CopilotModalHeader as S, DefaultOpenIcon as T, useHumanInTheLoop as U, useSuggestions as V, useDefaultRenderTool as W, UseAgentUpdate as X, useRenderCustomMessages as Y, useAgent as Z, WildcardToolCallRender as _, ThreadsProvider as a, SandboxFunctionsContext as at, CopilotPopupView as b, CoAgentStateRendersProvider as c, MCPAppsActivityRenderer as ct, shouldShowDevConsole as d, CopilotChatInput_default as dt, useCopilotKit as et, useToast as f, AudioRecorderError as ft, useCopilotContext as g, CopilotContext as h, useCopilotChatConfiguration as ht, ThreadsContext as i, createA2UIMessageRenderer as it, CopilotChatSuggestionPill as j, CopilotChatMessageView as k, useCoAgentStateRenders as l, MCPAppsActivityType as lt, useCopilotMessagesContext as m, CopilotChatConfigurationProvider as mt, defaultCopilotContextCategories as n, useAgentContext as nt, useThreads as o, useSandboxFunctions as ot, CopilotMessagesContext as p, CopilotChatAudioRecorder as pt, useFrontendTool as q, CoAgentStateRenderBridge as r, defineToolCallRenderer as rt, CoAgentStateRendersContext as s, MCPAppsActivityContentSchema as st, CopilotKit as t, CopilotKitCoreReact as tt, useAsyncCallback as u, CopilotKitInspector as ut, CopilotPopup as v, DefaultCloseIcon as w, CopilotSidebarView as x, CopilotSidebar as y, useInterrupt as z };
-//# sourceMappingURL=copilotkit-DHEUlli6.mjs.map
+//# sourceMappingURL=copilotkit-CPe2-340.mjs.map