@copilotkit/react-core 1.76.0 → 1.77.1

package/dist/{copilotkit-dHdNF7H5.cjs → copilotkit-BG1d4-qU.cjs}

@@ -171,6 +171,25 @@ const CopilotChatConfigurationProvider = ({ children, labels, agentId, threadId,
 		parentConfig?.threadId,
 		activeThreadOverride
 	]);
+	const copilotkit = (0, react.useContext)(_copilotkit_react_core_v2_context.CopilotKitContext)?.copilotkit;
+	const openThreadRef = (0, react.useRef)(null);
+	const latestThreadIdRef = (0, react.useRef)(resolvedThreadId);
+	latestThreadIdRef.current = resolvedThreadId;
+	(0, react.useEffect)(() => {
+		if (copilotkit === void 0) return;
+		const registration = copilotkit.registerOpenThread({
+			agentId: resolvedAgentId,
+			threadId: latestThreadIdRef.current
+		});
+		openThreadRef.current = registration;
+		return () => {
+			registration.unregister();
+			openThreadRef.current = null;
+		};
+	}, [copilotkit, resolvedAgentId]);
+	(0, react.useEffect)(() => {
+		openThreadRef.current?.update(resolvedThreadId);
+	}, [resolvedThreadId]);
 	const resolvedHasExplicitThreadId = (threadIdPropIsAuthoritative ? true : activeThreadOverride?.explicit ?? hasExplicitThreadId ?? false) || !!parentConfig?.hasExplicitThreadId;
 	const [internalModalOpen, setInternalModalOpen] = (0, react.useState)(isModalDefaultOpen ?? true);
 	const hasExplicitDefault = isModalDefaultOpen !== void 0;
@@ -1636,7 +1655,7 @@ function useRenderToolCall() {
 
 //#endregion
 //#region package.json
-var version = "1.76.0";
+var version = "1.77.1";
 
 //#endregion
 //#region src/v2/components/CopilotKitInspector.tsx
@@ -1872,12 +1891,14 @@ function InlineFeatureWarning({ featureName }) {
 * Fetches resource content on-demand via proxied MCP requests. The React shell
 * owns the iframe; `bindMcpApp` owns the protocol.
 */
-const MCPAppsActivityRenderer = function MCPAppsActivityRenderer({ content, agent }) {
+const MCPAppsActivityRenderer = function MCPAppsActivityRenderer({ content, message, agent }) {
 	const { copilotkit } = (0, _copilotkit_react_core_v2_context.useCopilotKit)();
+	const messageId = message?.id;
 	const containerRef = (0, react.useRef)(null);
 	const iframeRef = (0, react.useRef)(null);
 	const sessionRef = (0, react.useRef)(null);
 	const [error, setError] = (0, react.useState)(null);
+	const [contentError, setContentError] = (0, react.useState)(null);
 	const [isLoading, setIsLoading] = (0, react.useState)(true);
 	const [iframeSize, setIframeSize] = (0, react.useState)({});
 	const [fetchedResource, setFetchedResource] = (0, react.useState)(null);
@@ -1896,6 +1917,7 @@ const MCPAppsActivityRenderer = function MCPAppsActivityRenderer({ content, agen
 		let mounted = true;
 		setIsLoading(true);
 		setError(null);
+		setContentError(null);
 		const iframe = document.createElement("iframe");
 		iframe.style.width = "100%";
 		iframe.style.height = "100px";
@@ -1918,6 +1940,7 @@ const MCPAppsActivityRenderer = function MCPAppsActivityRenderer({ content, agen
 					getContent: () => contentRef.current,
 					getAgent: () => agentRef.current,
 					host: copilotkit,
+					messageId,
 					hooks: {
 						onResource: (resource) => {
 							if (!mounted) return;
@@ -1927,6 +1950,9 @@ const MCPAppsActivityRenderer = function MCPAppsActivityRenderer({ content, agen
 						onSizeChanged: (size) => {
 							if (mounted) setIframeSize(size);
 						},
+						onContentError: (err) => {
+							if (mounted) setContentError(err);
+						},
 						onError: (err) => {
 							if (!mounted) return;
 							setError(err);
@@ -1935,9 +1961,7 @@ const MCPAppsActivityRenderer = function MCPAppsActivityRenderer({ content, agen
 					}
 				});
 				sessionRef.current = session;
-				const current = contentRef.current;
-				if (current.toolInput) session.sendToolInput(current.toolInput);
-				if (current.result) session.sendToolResult(current.result);
+				session.syncContent(contentRef.current);
 			} catch (err) {
 				console.error("[MCPAppsRenderer] Setup error:", err);
 				if (mounted) {
@@ -1957,6 +1981,7 @@ const MCPAppsActivityRenderer = function MCPAppsActivityRenderer({ content, agen
 	}, [
 		agent,
 		copilotkit,
+		messageId,
 		content.resourceUri,
 		content.serverHash,
 		content.serverId
@@ -1971,11 +1996,8 @@ const MCPAppsActivityRenderer = function MCPAppsActivityRenderer({ content, agen
 		}
 	}, [iframeSize]);
 	(0, react.useEffect)(() => {
-		if (content.toolInput) sessionRef.current?.sendToolInput(content.toolInput);
-	}, [content.toolInput]);
-	(0, react.useEffect)(() => {
-		if (content.result) sessionRef.current?.sendToolResult(content.result);
-	}, [content.result]);
+		sessionRef.current?.syncContent(contentRef.current);
+	}, [content.toolInput, content.result]);
 	const borderStyle = fetchedResource?._meta?.ui?.prefersBorder === true ? {
 		borderRadius: "8px",
 		backgroundColor: "#f9f9f9",
@@ -1997,12 +2019,12 @@ const MCPAppsActivityRenderer = function MCPAppsActivityRenderer({ content, agen
 				color: "#666"
 			},
 			children: "Loading..."
-		}), error && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		}), (error ?? contentError) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			style: {
 				color: "red",
 				padding: "1rem"
 			},
-			children: ["Error: ", error.message]
+			children: ["Error: ", (error ?? contentError).message]
 		})]
 	});
 };
@@ -3390,7 +3412,6 @@ const DEFAULT_DESIGN_SKILL = `When generating UI with generateSandboxedUi, follo
 - Use CSS Grid or Flexbox for layout. Ensure the UI looks good at any width.
 - Minimal transitions (150ms) for hover/focus states only. No decorative animations.
 - Keep the UI focused and dense — avoid excessive padding. Use compact spacing (8–12px gaps, 10–14px padding in controls).`;
-const GENERATE_SANDBOXED_UI_DESCRIPTION = "Generate sandboxed UI. IMPORTANT: The generated code runs in a sandboxed iframe WITHOUT same-origin access. Do NOT use localStorage, sessionStorage, document.cookie, IndexedDB, or fetch/XMLHttpRequest to same-origin URLs. To communicate with the host application, use Websandbox.connection.remote.<functionName>(args) which returns a Promise.\n\nYou CAN use external libraries from CDNs by including <script> or <link> tags in the HTML <head> (e.g., Chart.js, D3, Three.js, x-data-spreadsheet, etc.). CDN resources load normally inside the sandbox.\n\nPARAMETER ORDER IS CRITICAL — generate parameters in exactly this order:\n1. initialHeight + placeholderMessages (shown to user while generating)\n2. css (all styles FIRST — the user sees a placeholder until CSS is complete)\n3. html (streams in live — the user watches the UI build as HTML is generated)\n4. jsFunctions (reusable helper functions)\n5. jsExpressions (applied one-by-one — the user sees each expression take effect)";
 function useStableArrayProp(prop, warningMessage, isMeaningfulChange) {
 	const empty = (0, react.useMemo)(() => [], []);
 	const value = prop ?? empty;
@@ -3400,7 +3421,7 @@ function useStableArrayProp(prop, warningMessage, isMeaningfulChange) {
 	}, [value, warningMessage]);
 	return value;
 }
-const CopilotKitProvider = ({ children, runtimeUrl, headers: headersProp = EMPTY_HEADERS, credentials, messageFilter, publicApiKey, publicLicenseKey, licenseToken, properties = EMPTY_PROPERTIES, agents__unsafe_dev_only: agents = EMPTY_AGENTS, selfManagedAgents = EMPTY_AGENTS, renderToolCalls, renderActivityMessages, renderCustomMessages, frontendTools, humanInTheLoop, openGenerativeUI, enableInspector, agentId, useSingleEndpoint, onError, a2ui, defaultThrottleMs, debug }) => {
+const CopilotKitProvider = ({ children, runtimeUrl, headers: headersProp = EMPTY_HEADERS, credentials, messageFilter, publicApiKey, publicLicenseKey, licenseToken, properties = EMPTY_PROPERTIES, agents__unsafe_dev_only: agents = EMPTY_AGENTS, selfManagedAgents = EMPTY_AGENTS, renderToolCalls, renderActivityMessages, renderCustomMessages, frontendTools, humanInTheLoop, openGenerativeUI, enableInspector, agentId, showIntelligenceIndicator = true, useSingleEndpoint, onError, a2ui, defaultThrottleMs, debug, learning }) => {
 	const [shouldRenderInspector, setShouldRenderInspector] = (0, react.useState)(false);
 	const [inspectorVisible, setInspectorVisible] = (0, react.useState)(false);
 	(0, react.useEffect)(() => {
@@ -3583,7 +3604,7 @@ const CopilotKitProvider = ({ children, runtimeUrl, headers: headersProp = EMPTY
 		if (!openGenUIActive) return [];
 		return [{
 			name: "generateSandboxedUi",
-			description: GENERATE_SANDBOXED_UI_DESCRIPTION,
+			description: _copilotkit_shared.GENERATE_SANDBOXED_UI_DESCRIPTION,
 			parameters: GenerateSandboxedUiArgsSchema,
 			handler: async () => "UI generated",
 			followUp: true,
@@ -3635,7 +3656,8 @@ const CopilotKitProvider = ({ children, runtimeUrl, headers: headersProp = EMPTY
 			renderToolCalls: allRenderToolCalls,
 			renderActivityMessages: allActivityRenderers,
 			renderCustomMessages: renderCustomMessagesList,
-			debug
+			debug,
+			learning
 		});
 		if (defaultThrottleMs !== void 0) copilotkitRef.current.setDefaultThrottleMs(defaultThrottleMs);
 	}
@@ -3740,6 +3762,32 @@ const CopilotKitProvider = ({ children, runtimeUrl, headers: headersProp = EMPTY
 		useSingleEndpoint,
 		debug
 	]);
+	const learningEnabled = learning !== void 0;
+	const trajectoryId = learning?.trajectoryId;
+	const learningContainerIdsRef = (0, react.useRef)(learning?.learningContainerIds);
+	(0, react.useEffect)(() => {
+		copilotkit.setLearningConfig(learning);
+		learningContainerIdsRef.current = learning?.learningContainerIds;
+		if (learning?.sink === void 0 && learning?.trajectoryId === void 0 && learning?.learningContainerIds !== void 0) console.warn("[CopilotKit] learningContainerIds is supported only with a custom sink. Authenticated Trajectory capture does not assign Learning Containers; remove learningContainerIds from the capture options.");
+	}, [copilotkit, learning]);
+	(0, react.useEffect)(() => {
+		if (!learningEnabled) return;
+		let disposed = false;
+		if (trajectoryId !== void 0) copilotkit.startTrajectory({
+			trajectoryId,
+			learningContainerIds: learningContainerIdsRef.current
+		}).catch(() => {
+			if (!disposed) console.warn("[CopilotKit] Failed to start interaction capture.");
+		});
+		return () => {
+			disposed = true;
+			copilotkit.stopTrajectory();
+		};
+	}, [
+		copilotkit,
+		learningEnabled,
+		trajectoryId
+	]);
 	const didMountRef = (0, react.useRef)(false);
 	(0, react.useEffect)(() => {
 		if (!didMountRef.current) return;
@@ -3802,8 +3850,13 @@ const CopilotKitProvider = ({ children, runtimeUrl, headers: headersProp = EMPTY
 	]);
 	const contextValue = (0, react.useMemo)(() => ({
 		copilotkit,
-		executingToolCallIds
-	}), [copilotkit, executingToolCallIds]);
+		executingToolCallIds,
+		showIntelligenceIndicator
+	}), [
+		copilotkit,
+		executingToolCallIds,
+		showIntelligenceIndicator
+	]);
 	const retryableRuntimeEntitlementFailure = runtimeEntitlements?.status !== "ready" && runtimeEntitlements?.error.retryable === true;
 	const hasNonReadyRuntimeEntitlement = runtimeEntitlements !== void 0 && runtimeEntitlements.status !== "ready";
 	const hasLegacyRuntimeEntitlementFallback = runtimeLicenseStatus === "valid" || runtimeLicenseStatus === "expiring";
@@ -6037,13 +6090,23 @@ function useLearningContainersInCurrentThread({ learningContainers }) {
 //#region src/v2/components/chat/CopilotChatToolCallsView.tsx
 function CopilotChatToolCallsView({ message, messages = [] }) {
 	const renderToolCall = useRenderToolCall();
+	const { copilotkit } = (0, _copilotkit_react_core_v2_context.useCopilotKit)();
+	const subscribe = (0, react.useCallback)((onChange) => copilotkit.ɵsubscribeToLearningConfigured(onChange), [copilotkit]);
+	const getSnapshot = () => copilotkit.ɵlearningConfigured;
+	const learningConfigured = (0, react.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
 	if (!message.toolCalls || message.toolCalls.length === 0) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: message.toolCalls.map((toolCall) => {
-		const toolMessage = messages.find((m) => m.role === "tool" && m.toolCallId === toolCall.id);
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.default.Fragment, { children: renderToolCall({
+		const rendered = renderToolCall({
 			toolCall,
-			toolMessage
-		}) }, toolCall.id);
+			toolMessage: messages.find((m) => m.role === "tool" && m.toolCallId === toolCall.id)
+		});
+		if (rendered === null) return null;
+		if (!learningConfigured) return rendered;
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			"data-tool-call-id": toolCall.id,
+			style: { display: "contents" },
+			children: rendered
+		}, toolCall.id);
 	}) });
 }
 
@@ -6387,6 +6450,7 @@ function CopilotChatAssistantMessage({ message, messages, isRunning, isLatest, o
 	const shouldShowToolbar = toolbarVisible && (hasContent || showInspectorShortcut) && !(isRunning && isLatestAssistantMessage);
 	if (children) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		"data-copilotkit": true,
+		"data-message-id": message.id,
 		style: { display: "contents" },
 		children: children({
 			markdownRenderer: boundMarkdownRenderer,
@@ -7619,12 +7683,27 @@ function deduplicateMessages(messages) {
 	}
 	return [...acc.values()];
 }
+/** A row holding a single message, rendered as it would be ungrouped. */
+function messageRow(message) {
+	return {
+		type: "message",
+		message
+	};
+}
+/** A row holding a group of messages, rendered inside `wrapper`. */
+function messageGroup(group) {
+	return {
+		type: "group",
+		...group
+	};
+}
+const GROUP_ROW_KEY_PREFIX = "copilotkit-group:";
 const VIRTUALIZE_THRESHOLD = 50;
-function CopilotChatMessageView({ messages = [], assistantMessage, userMessage, reasoningMessage, cursor, intelligenceIndicator, isRunning = false, transformMessages, children, className, ...props }) {
+function CopilotChatMessageView({ messages = [], assistantMessage, userMessage, reasoningMessage, cursor, intelligenceIndicator, isRunning = false, transformMessages, groupMessages, children, className, ...props }) {
 	const isPinnedToBottom = (0, react.useContext)(ScrollPinnedContext);
 	const renderCustomMessage = useRenderCustomMessages();
 	const { renderActivityMessage } = useRenderActivityMessage();
-	const { copilotkit } = (0, _copilotkit_react_core_v2_context.useCopilotKit)();
+	const { copilotkit, showIntelligenceIndicator = true } = (0, _copilotkit_react_core_v2_context.useCopilotKit)();
 	const config = useCopilotChatConfiguration();
 	const [, forceUpdate] = (0, react.useReducer)((x) => x + 1, 0);
 	(0, react.useEffect)(() => {
@@ -7653,20 +7732,43 @@ function CopilotChatMessageView({ messages = [], assistantMessage, userMessage,
 		return copilotkit.getStateByRun(config.agentId, config.threadId, resolvedRunId);
 	};
 	const deduplicatedMessages = (0, react.useMemo)(() => deduplicateMessages(messages), [messages]);
-	const renderedMessages = (0, react.useMemo)(() => transformMessages ? transformMessages(deduplicatedMessages) : deduplicatedMessages, [deduplicatedMessages, transformMessages]);
+	const transformedMessages = (0, react.useMemo)(() => transformMessages ? transformMessages(deduplicatedMessages) : deduplicatedMessages, [deduplicatedMessages, transformMessages]);
+	const rows = (0, react.useMemo)(() => groupMessages ? groupMessages(transformedMessages) : transformedMessages.map(messageRow), [transformedMessages, groupMessages]);
+	const renderedMessages = (0, react.useMemo)(() => groupMessages ? rows.flatMap((row) => row.type === "group" ? row.messages : [row.message]) : transformedMessages, [
+		rows,
+		groupMessages,
+		transformedMessages
+	]);
 	const latestRenderedId = renderedMessages[renderedMessages.length - 1]?.id;
 	const transformDuplicateId = (0, react.useMemo)(() => {
-		if (process.env.NODE_ENV === "production" || !transformMessages) return;
+		if (process.env.NODE_ENV === "production" || !transformMessages && !groupMessages) return;
 		const seen = /* @__PURE__ */ new Set();
 		for (const message of renderedMessages) {
 			if (seen.has(message.id)) return message.id;
 			seen.add(message.id);
 		}
-	}, [renderedMessages, transformMessages]);
+	}, [
+		renderedMessages,
+		transformMessages,
+		groupMessages
+	]);
 	(0, react.useEffect)(() => {
 		if (transformDuplicateId === void 0) return;
-		console.warn(`[CopilotKit] CopilotChatMessageView: \`transformMessages\` returned more than one message with id "${transformDuplicateId}". Return each id at most once; a message you create needs its own id, stable across renders.`);
-	}, [transformDuplicateId]);
+		console.warn(groupMessages ? `[CopilotKit] CopilotChatMessageView: the message with id "${transformDuplicateId}" renders more than once. \`groupMessages\` should place each message in at most one row, and \`transformMessages\` return each id at most once.` : `[CopilotKit] CopilotChatMessageView: \`transformMessages\` returned more than one message with id "${transformDuplicateId}". Return each id at most once; a message you create needs its own id, stable across renders.`);
+	}, [transformDuplicateId, groupMessages]);
+	const duplicateGroupKey = (0, react.useMemo)(() => {
+		if (process.env.NODE_ENV === "production" || !groupMessages) return;
+		const seen = /* @__PURE__ */ new Set();
+		for (const row of rows) {
+			if (row.type !== "group") continue;
+			if (seen.has(row.key)) return row.key;
+			seen.add(row.key);
+		}
+	}, [rows, groupMessages]);
+	(0, react.useEffect)(() => {
+		if (duplicateGroupKey === void 0) return;
+		console.warn(`[CopilotKit] CopilotChatMessageView: \`groupMessages\` returned more than one group with key "${duplicateGroupKey}". Give each group its own key, stable across renders.`);
+	}, [duplicateGroupKey]);
 	const rowKeyStoreRef = (0, react.useRef)(null);
 	rowKeyStoreRef.current ??= (0, _copilotkit_shared.createRowKeyStore)();
 	const rowKeyStore = rowKeyStoreRef.current;
@@ -7674,6 +7776,31 @@ function CopilotChatMessageView({ messages = [], assistantMessage, userMessage,
 	(0, react.useLayoutEffect)(() => {
 		(0, _copilotkit_shared.commitRowKeyStore)(rowKeyStore, renderedMessages);
 	}, [rowKeyStore, renderedMessages]);
+	const stableGroupKey = (key) => rowRenderKeys.get(key) ?? key;
+	const groupStateRef = (0, react.useRef)(/* @__PURE__ */ new Map());
+	const groupSettersRef = (0, react.useRef)(/* @__PURE__ */ new Map());
+	const groupStateThreadRef = (0, react.useRef)(config?.threadId);
+	if (groupStateThreadRef.current !== config?.threadId) {
+		groupStateThreadRef.current = config?.threadId;
+		groupStateRef.current = /* @__PURE__ */ new Map();
+		groupSettersRef.current = /* @__PURE__ */ new Map();
+	}
+	const groupSetter = (key) => {
+		let setter = groupSettersRef.current.get(key);
+		if (!setter) {
+			setter = (next) => {
+				groupStateRef.current.set(key, next);
+				forceUpdate();
+			};
+			groupSettersRef.current.set(key, setter);
+		}
+		return setter;
+	};
+	(0, react.useLayoutEffect)(() => {
+		const live = /* @__PURE__ */ new Set();
+		for (const row of rows) if (row.type === "group") live.add(stableGroupKey(row.key));
+		for (const store of [groupStateRef.current, groupSettersRef.current]) for (const key of store.keys()) if (!live.has(key)) store.delete(key);
+	}, [rows, rowRenderKeys]);
 	if (process.env.NODE_ENV === "development" && deduplicatedMessages.length < messages.length) console.warn(`CopilotChatMessageView: Merged ${messages.length - deduplicatedMessages.length} message(s) with duplicate IDs.`);
 	const { Component: AssistantComponent, slotProps: assistantSlotProps } = (0, react.useMemo)(() => resolveSlotComponent(assistantMessage, CopilotChatAssistantMessage_default), [assistantMessage]);
 	const agentId = config?.agentId;
@@ -7713,7 +7840,7 @@ function CopilotChatMessageView({ messages = [], assistantMessage, userMessage,
 	(0, react.useEffect)(() => {
 		if (process.env.NODE_ENV === "production" || !childrenDisabledVirtualization || warnedChildrenRef.current) return;
 		warnedChildrenRef.current = true;
-		console.warn(`[CopilotKit] CopilotChatMessageView: the \`children\` render prop disables virtualization, so all ${renderedMessages.length} messages are mounted. ` + (transformMessages ? "`transformMessages` keeps virtualization on by itself; drop `children` to use it." : "To reshape the list and keep virtualization, use `transformMessages` instead."));
+		console.warn(`[CopilotKit] CopilotChatMessageView: the \`children\` render prop disables virtualization, so all ${renderedMessages.length} messages are mounted. ` + (transformMessages || groupMessages ? "`transformMessages` and `groupMessages` keep virtualization on by themselves; drop `children` to use them." : "To reshape the list and keep virtualization, use `transformMessages` instead, or `groupMessages` to render several messages as one row."));
 	}, [
 		childrenDisabledVirtualization,
 		renderedMessages.length,
@@ -7753,7 +7880,7 @@ function CopilotChatMessageView({ messages = [], assistantMessage, userMessage,
 		return item.start < (instance.scrollOffset ?? 0) + scrollAdjustments;
 	}, []);
 	const virtualizer = (0, _tanstack_react_virtual.useVirtualizer)({
-		count: shouldVirtualize ? renderedMessages.length : 0,
+		count: shouldVirtualize ? rows.length : 0,
 		getScrollElement: () => scrollElement,
 		estimateSize: estimateRowSize,
 		overscan: 5,
@@ -7766,8 +7893,8 @@ function CopilotChatMessageView({ messages = [], assistantMessage, userMessage,
 	isPinnedToBottomRef.current = isPinnedToBottom;
 	virtualizer.shouldAdjustScrollPositionOnItemSizeChange = shouldAdjustScrollOnResize;
 	(0, react.useLayoutEffect)(() => {
-		if (!shouldVirtualize || !renderedMessages.length) return;
-		virtualizer.scrollToIndex(renderedMessages.length - 1, { align: "end" });
+		if (!shouldVirtualize || !rows.length) return;
+		virtualizer.scrollToIndex(rows.length - 1, { align: "end" });
 	}, [shouldVirtualize, firstMessageId]);
 	const intelligenceTurnAnchors = (0, react.useMemo)(() => getIntelligenceTurnAnchors(deduplicatedMessages, renderedMessages), [deduplicatedMessages, renderedMessages]);
 	const renderMessageBlock = (message) => {
@@ -7811,7 +7938,7 @@ function CopilotChatMessageView({ messages = [], assistantMessage, userMessage,
 			renderCustomMessage,
 			stateSnapshot
 		}, `${rowKey}-custom-after`));
-		const intelligenceTurnId = intelligenceTurnAnchors.get(message.id);
+		const intelligenceTurnId = showIntelligenceIndicator ? intelligenceTurnAnchors.get(message.id) : void 0;
 		if (intelligenceTurnId !== void 0) elements.push(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(IntelligenceIndicator, {
 			message,
 			agentId: config?.agentId ?? _copilotkit_shared.DEFAULT_AGENT_ID,
@@ -7819,7 +7946,20 @@ function CopilotChatMessageView({ messages = [], assistantMessage, userMessage,
 		}, `intelligence-${intelligenceTurnId}`));
 		return elements.filter(Boolean);
 	};
-	const messageElements = shouldVirtualize ? [] : renderedMessages.flatMap(renderMessageBlock);
+	const rowKey = (row) => row.type === "group" ? `${GROUP_ROW_KEY_PREFIX}${stableGroupKey(row.key)}` : rowRenderKeys.get(row.message.id) ?? row.message.id;
+	const renderRow = (row) => {
+		if (row.type === "message") return renderMessageBlock(row.message);
+		const Wrapper = row.wrapper;
+		const stateKey = stableGroupKey(row.key);
+		return [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Wrapper, {
+			groupKey: row.key,
+			messages: row.messages,
+			state: groupStateRef.current.get(stateKey),
+			setState: groupSetter(stateKey),
+			children: row.messages.flatMap(renderMessageBlock)
+		}, rowKey(row))];
+	};
+	const messageElements = shouldVirtualize ? [] : rows.flatMap(renderRow);
 	if (children) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		"data-copilotkit": true,
 		style: { display: "contents" },
@@ -7844,7 +7984,7 @@ function CopilotChatMessageView({ messages = [], assistantMessage, userMessage,
 					position: "relative"
 				},
 				children: virtualizer.getVirtualItems().map((virtualItem) => {
-					const message = renderedMessages[virtualItem.index];
+					const row = rows[virtualItem.index];
 					return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 						"data-index": virtualItem.index,
 						ref: virtualizer.measureElement,
@@ -7855,8 +7995,8 @@ function CopilotChatMessageView({ messages = [], assistantMessage, userMessage,
 							width: "100%",
 							transform: `translateY(${virtualItem.start}px)`
 						},
-						children: renderMessageBlock(message)
-					}, rowRenderKeys.get(message.id) ?? message.id);
+						children: renderRow(row)
+					}, rowKey(row));
 				})
 			}) : messageElements,
 			interruptElement,
@@ -8924,6 +9064,29 @@ function CopilotChat({ agentId, threadId, labels, inspectorTools, chatView, isMo
 	const [lastConnectedThreadId, setLastConnectedThreadId] = (0, react.useState)(null);
 	const isConnecting = hasExplicitThreadId && lastConnectedThreadId !== resolvedThreadId;
 	const activeConnectCountRef = (0, react.useRef)(0);
+	const pendingConnectionsRef = (0, react.useRef)(/* @__PURE__ */ new Map());
+	const failedConnectionsRef = (0, react.useRef)(/* @__PURE__ */ new WeakSet());
+	const submissionQueueRef = (0, react.useRef)(Promise.resolve());
+	const trackConnection = (0, react.useCallback)((connectingAgent, connect) => {
+		const selection = previousThreadRef.current;
+		const connectingThreadId = connectingAgent.threadId;
+		let failed = false;
+		const subscription = copilotkit.subscribe({ onError: (event) => {
+			if (selection?.active && previousThreadRef.current === selection && event.context?.agentId === connectingAgent.agentId && (!event.context.threadId || event.context.threadId === connectingThreadId) && (event.code === _copilotkit_core.CopilotKitCoreErrorCode.AGENT_CONNECT_FAILED || event.code === _copilotkit_core.CopilotKitCoreErrorCode.AGENT_RUN_FAILED_EVENT)) failed = true;
+		} });
+		const pending = connect().catch((error) => {
+			failed = true;
+			console.error("CopilotChat: connection failed", error);
+		}).finally(() => {
+			subscription.unsubscribe();
+			if (pendingConnectionsRef.current.get(connectingAgent) === pending) {
+				pendingConnectionsRef.current.delete(connectingAgent);
+				if (selection?.active && previousThreadRef.current === selection) if (failed) failedConnectionsRef.current.add(connectingAgent);
+				else failedConnectionsRef.current.delete(connectingAgent);
+			}
+		});
+		pendingConnectionsRef.current.set(connectingAgent, pending);
+	}, [copilotkit]);
 	const pendingRunActivityReconnectRef = (0, react.useRef)(false);
 	const runActivityReconnectGenerationRef = (0, react.useRef)(0);
 	const activeLocalRunIdsRef = (0, react.useRef)(/* @__PURE__ */ new Set());
@@ -8983,9 +9146,12 @@ function CopilotChat({ agentId, threadId, labels, inspectorTools, chatView, isMo
 		const selection = {
 			threadId: resolvedThreadId,
 			inspectorRequestId,
-			agent
+			agent,
+			active: true
 		};
 		previousThreadRef.current = selection;
+		submissionQueueRef.current = Promise.resolve();
+		failedConnectionsRef.current.delete(agent);
 		const discardedThreadId = previousThread?.agent === agent ? previousThread.threadId : agent.threadId;
 		if (inspectorTransition) if (typeof copilotkit.stopAgent === "function") copilotkit.stopAgent({ agent });
 		else agent.abortRun?.();
@@ -9023,6 +9189,7 @@ function CopilotChat({ agentId, threadId, labels, inspectorTools, chatView, isMo
 			}
 			return () => {
 				active = false;
+				selection.active = false;
 			};
 		}
 		let detached = false;
@@ -9036,8 +9203,8 @@ function CopilotChat({ agentId, threadId, labels, inspectorTools, chatView, isMo
 				await copilotkit.connectAgent({ agent: agentToConnect });
 			} catch (error) {
 				if (detached) return;
-				console.error("CopilotChat: connectAgent failed", error);
 				if (inspectorRequestId) failInspectorOverride(inspectorRequestId);
+				throw error;
 			} finally {
 				if (!detached) (typeof requestAnimationFrame === "function" ? requestAnimationFrame : (cb) => setTimeout(cb, 16))(() => {
 					if (!detached) setLastConnectedThreadId(resolvedThreadId);
@@ -9053,8 +9220,9 @@ function CopilotChat({ agentId, threadId, labels, inspectorTools, chatView, isMo
 				}
 			}
 		};
-		connect(agent);
+		trackConnection(agent, () => connect(agent));
 		return () => {
+			selection.active = false;
 			detached = true;
 			connectAbortController.abort();
 			const detach = agent.detachActiveRun().catch(() => {});
@@ -9117,7 +9285,7 @@ function CopilotChat({ agentId, threadId, labels, inspectorTools, chatView, isMo
 				await copilotkit.connectAgent({ agent });
 				didConnect = true;
 			} catch (error) {
-				if (!detached) console.error("CopilotChat: run activity reconnect failed", error);
+				if (!detached) throw error;
 			} finally {
 				if (wakeRunId) {
 					activeWakeRunIdsRef.current.delete(wakeRunId);
@@ -9127,7 +9295,7 @@ function CopilotChat({ agentId, threadId, labels, inspectorTools, chatView, isMo
 				wakeReconnectActive = false;
 				if (!detached && runActivityReconnectGenerationRef.current === generation && activeConnectCountRef.current === 0 && pendingRunActivityReconnectRef.current) {
 					pendingRunActivityReconnectRef.current = false;
-					connect();
+					trackConnection(agent, connect);
 				}
 			}
 		};
@@ -9143,7 +9311,7 @@ function CopilotChat({ agentId, threadId, labels, inspectorTools, chatView, isMo
 				return;
 			}
 			pendingRunActivityReconnectRef.current = false;
-			connect();
+			trackConnection(agent, connect);
 		};
 		const subscription = threadStore.subscribeToRunActivity((notification) => {
 			if (notification.threadId !== resolvedThreadId) return;
@@ -9186,6 +9354,18 @@ function CopilotChat({ agentId, threadId, labels, inspectorTools, chatView, isMo
 		rememberRecentlyWakeRunId
 	]);
 	const waitForActiveRunToSettle = (0, react.useCallback)(async () => {
+		const selection = previousThreadRef.current;
+		const isCurrentSelection = () => selection?.active && previousThreadRef.current === selection;
+		let connection = pendingConnectionsRef.current.get(agent);
+		while (connection && isCurrentSelection()) {
+			await connection;
+			connection = pendingConnectionsRef.current.get(agent);
+		}
+		if (!isCurrentSelection()) return false;
+		if (failedConnectionsRef.current.has(agent)) {
+			setTranscriptionError("Could not load saved conversation. Reopen the thread and try again.");
+			return "failed";
+		}
 		const maybeAware = agent;
 		const activeRunCompletionPromise = (0, _copilotkit_core.isRunCompletionAware)(maybeAware) ? maybeAware.activeRunCompletionPromise : void 0;
 		if (agent.isRunning && activeRunCompletionPromise) try {
@@ -9193,7 +9373,18 @@ function CopilotChat({ agentId, threadId, labels, inspectorTools, chatView, isMo
 		} catch (error) {
 			console.error("CopilotChat: in-flight run rejected while queuing send", error);
 		}
+		return isCurrentSelection();
 	}, [agent]);
+	const enqueueSubmission = (0, react.useCallback)((submit) => {
+		const selection = previousThreadRef.current;
+		const pending = submissionQueueRef.current.then(async () => {
+			if (selection?.active && previousThreadRef.current === selection) await submit();
+		}).catch((error) => {
+			console.error("CopilotChat: queued submission failed", error);
+		});
+		submissionQueueRef.current = pending;
+		return pending;
+	}, []);
 	const onSubmitInput = (0, react.useCallback)(async (value) => {
 		if (selectedAttachmentsRef.current.some((a) => a.status === "uploading")) {
 			console.error("[CopilotKit] Cannot send while attachments are uploading (pre-await guard)");
@@ -9201,92 +9392,102 @@ function CopilotChat({ agentId, threadId, labels, inspectorTools, chatView, isMo
 			return;
 		}
 		setInputValue("");
-		await waitForActiveRunToSettle();
-		if (selectedAttachmentsRef.current.some((a) => a.status === "uploading")) {
-			console.error("[CopilotKit] Cannot send while attachments are uploading (post-await re-check)");
-			setTranscriptionError("Cannot send while attachments are uploading.");
-			setInputValue(value);
-			return;
-		}
-		const readyAttachments = consumeAttachments();
-		if (readyAttachments.length > 0) {
-			const contentParts = [];
-			if (value.trim()) contentParts.push({
-				type: "text",
-				text: value
-			});
-			for (const att of readyAttachments) contentParts.push((0, _copilotkit_shared.createAttachmentContent)(att));
-			agent.addMessage({
+		await enqueueSubmission(async () => {
+			const ready = await waitForActiveRunToSettle();
+			if (ready !== true) {
+				if (ready === "failed") setInputValue(value);
+				return;
+			}
+			if (selectedAttachmentsRef.current.some((a) => a.status === "uploading")) {
+				console.error("[CopilotKit] Cannot send while attachments are uploading (post-await re-check)");
+				setTranscriptionError("Cannot send while attachments are uploading.");
+				setInputValue(value);
+				return;
+			}
+			const readyAttachments = consumeAttachments();
+			if (readyAttachments.length > 0) {
+				const contentParts = [];
+				if (value.trim()) contentParts.push({
+					type: "text",
+					text: value
+				});
+				for (const att of readyAttachments) contentParts.push((0, _copilotkit_shared.createAttachmentContent)(att));
+				agent.addMessage({
+					id: (0, _copilotkit_shared.randomUUID)(),
+					role: "user",
+					content: contentParts
+				});
+			} else agent.addMessage({
 				id: (0, _copilotkit_shared.randomUUID)(),
 				role: "user",
-				content: contentParts
-			});
-		} else agent.addMessage({
-			id: (0, _copilotkit_shared.randomUUID)(),
-			role: "user",
-			content: value
-		});
-		const localRunId = hasNativeIntelligenceRunActivity ? (0, _copilotkit_shared.randomUUID)() : void 0;
-		if (localRunId) activeLocalRunIdsRef.current.add(localRunId);
-		try {
-			await copilotkit.runAgent({
-				agent,
-				...localRunId !== void 0 ? { runId: localRunId } : {}
+				content: value
 			});
-		} catch (error) {
-			console.error("CopilotChat: runAgent failed", error);
-		} finally {
-			if (localRunId) {
-				activeLocalRunIdsRef.current.delete(localRunId);
-				rememberRecentlyLocalRunId(localRunId);
-			}
-			if (pendingRunActivityReconnectRef.current && activeLocalRunIdsRef.current.size === 0 && activeConnectCountRef.current === 0) {
-				const startReconnect = startRunActivityReconnectRef.current;
-				if (startReconnect) {
-					pendingRunActivityReconnectRef.current = false;
-					startReconnect(runActivityReconnectGenerationRef.current);
+			const localRunId = hasNativeIntelligenceRunActivity ? (0, _copilotkit_shared.randomUUID)() : void 0;
+			if (localRunId) activeLocalRunIdsRef.current.add(localRunId);
+			try {
+				await copilotkit.runAgent({
+					agent,
+					...localRunId !== void 0 ? { runId: localRunId } : {}
+				});
+			} catch (error) {
+				console.error("CopilotChat: runAgent failed", error);
+			} finally {
+				if (localRunId) {
+					activeLocalRunIdsRef.current.delete(localRunId);
+					rememberRecentlyLocalRunId(localRunId);
+				}
+				if (pendingRunActivityReconnectRef.current && activeLocalRunIdsRef.current.size === 0 && activeConnectCountRef.current === 0) {
+					const startReconnect = startRunActivityReconnectRef.current;
+					if (startReconnect) {
+						pendingRunActivityReconnectRef.current = false;
+						startReconnect(runActivityReconnectGenerationRef.current);
+					}
 				}
 			}
-		}
+		});
 	}, [
 		agent,
 		consumeAttachments,
 		waitForActiveRunToSettle,
+		enqueueSubmission,
 		hasNativeIntelligenceRunActivity,
 		rememberRecentlyLocalRunId
 	]);
 	const handleSelectSuggestion = (0, react.useCallback)(async (suggestion) => {
-		await waitForActiveRunToSettle();
-		agent.addMessage({
-			id: (0, _copilotkit_shared.randomUUID)(),
-			role: "user",
-			content: suggestion.message
-		});
-		const localRunId = hasNativeIntelligenceRunActivity ? (0, _copilotkit_shared.randomUUID)() : void 0;
-		if (localRunId) activeLocalRunIdsRef.current.add(localRunId);
-		try {
-			await copilotkit.runAgent({
-				agent,
-				...localRunId !== void 0 ? { runId: localRunId } : {}
+		await enqueueSubmission(async () => {
+			if (await waitForActiveRunToSettle() !== true) return;
+			agent.addMessage({
+				id: (0, _copilotkit_shared.randomUUID)(),
+				role: "user",
+				content: suggestion.message
 			});
-		} catch (error) {
-			console.error("CopilotChat: runAgent failed after selecting suggestion", error);
-		} finally {
-			if (localRunId) {
-				activeLocalRunIdsRef.current.delete(localRunId);
-				rememberRecentlyLocalRunId(localRunId);
-			}
-			if (pendingRunActivityReconnectRef.current && activeLocalRunIdsRef.current.size === 0 && activeConnectCountRef.current === 0) {
-				const startReconnect = startRunActivityReconnectRef.current;
-				if (startReconnect) {
-					pendingRunActivityReconnectRef.current = false;
-					startReconnect(runActivityReconnectGenerationRef.current);
+			const localRunId = hasNativeIntelligenceRunActivity ? (0, _copilotkit_shared.randomUUID)() : void 0;
+			if (localRunId) activeLocalRunIdsRef.current.add(localRunId);
+			try {
+				await copilotkit.runAgent({
+					agent,
+					...localRunId !== void 0 ? { runId: localRunId } : {}
+				});
+			} catch (error) {
+				console.error("CopilotChat: runAgent failed after selecting suggestion", error);
+			} finally {
+				if (localRunId) {
+					activeLocalRunIdsRef.current.delete(localRunId);
+					rememberRecentlyLocalRunId(localRunId);
+				}
+				if (pendingRunActivityReconnectRef.current && activeLocalRunIdsRef.current.size === 0 && activeConnectCountRef.current === 0) {
+					const startReconnect = startRunActivityReconnectRef.current;
+					if (startReconnect) {
+						pendingRunActivityReconnectRef.current = false;
+						startReconnect(runActivityReconnectGenerationRef.current);
+					}
 				}
 			}
-		}
+		});
 	}, [
 		agent,
 		waitForActiveRunToSettle,
+		enqueueSubmission,
 		hasNativeIntelligenceRunActivity,
 		rememberRecentlyLocalRunId
 	]);
@@ -9938,7 +10139,7 @@ function CopilotPopupViewInternal({ header, toggleButton, width, height, clickOu
 	const popupAnimationClass = isPopupOpen && !isAnimatingOut ? "cpk:pointer-events-auto cpk:translate-y-0 cpk:opacity-100 cpk:md:scale-100" : "cpk:pointer-events-none cpk:translate-y-4 cpk:opacity-0 cpk:md:translate-y-5 cpk:md:scale-[0.95]";
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [toggleButtonElement, isRendered ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		"data-copilotkit": true,
-		className: cn("cpk:fixed cpk:inset-0 cpk:z-[1200] cpk:flex cpk:max-w-full cpk:flex-col cpk:items-stretch", "cpk:md:inset-auto cpk:md:bottom-24 cpk:md:right-6 cpk:md:items-end cpk:md:gap-4"),
+		className: cn("cpk:fixed cpk:inset-0 cpk:z-[1200] cpk:flex cpk:max-w-full cpk:flex-col cpk:items-stretch cpk:bg-transparent", "cpk:md:inset-auto cpk:md:bottom-24 cpk:md:right-6 cpk:md:items-end cpk:md:gap-4"),
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			ref: containerRef,
 			tabIndex: -1,
@@ -12955,6 +13156,18 @@ Object.defineProperty(exports, 'getIntelligenceTurnAnchors', {
     return getIntelligenceTurnAnchors;
   }
 });
+Object.defineProperty(exports, 'messageGroup', {
+  enumerable: true,
+  get: function () {
+    return messageGroup;
+  }
+});
+Object.defineProperty(exports, 'messageRow', {
+  enumerable: true,
+  get: function () {
+    return messageRow;
+  }
+});
 Object.defineProperty(exports, 'shouldShowDevConsole', {
   enumerable: true,
   get: function () {
@@ -13141,4 +13354,4 @@ Object.defineProperty(exports, 'useToast', {
     return useToast;
   }
 });
-//# sourceMappingURL=copilotkit-dHdNF7H5.cjs.map
+//# sourceMappingURL=copilotkit-BG1d4-qU.cjs.map