@copilotkit/react-core 1.76.0 → 1.77.1

package/dist/v2/index.umd.js

@@ -282,6 +282,25 @@ _radix_ui_react_dropdown_menu = __toESM(_radix_ui_react_dropdown_menu);
 			parentConfig?.threadId,
 			activeThreadOverride
 		]);
+		const copilotkit = (0, react.useContext)(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;
@@ -1747,7 +1766,7 @@ _radix_ui_react_dropdown_menu = __toESM(_radix_ui_react_dropdown_menu);
 
 //#endregion
 //#region package.json
-	var version = "1.76.0";
+	var version = "1.77.1";
 
 //#endregion
 //#region src/v2/components/CopilotKitInspector.tsx
@@ -1983,12 +2002,14 @@ _radix_ui_react_dropdown_menu = __toESM(_radix_ui_react_dropdown_menu);
 	* 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 } = 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);
@@ -2007,6 +2028,7 @@ _radix_ui_react_dropdown_menu = __toESM(_radix_ui_react_dropdown_menu);
 			let mounted = true;
 			setIsLoading(true);
 			setError(null);
+			setContentError(null);
 			const iframe = document.createElement("iframe");
 			iframe.style.width = "100%";
 			iframe.style.height = "100px";
@@ -2029,6 +2051,7 @@ _radix_ui_react_dropdown_menu = __toESM(_radix_ui_react_dropdown_menu);
 						getContent: () => contentRef.current,
 						getAgent: () => agentRef.current,
 						host: copilotkit,
+						messageId,
 						hooks: {
 							onResource: (resource) => {
 								if (!mounted) return;
@@ -2038,6 +2061,9 @@ _radix_ui_react_dropdown_menu = __toESM(_radix_ui_react_dropdown_menu);
 							onSizeChanged: (size) => {
 								if (mounted) setIframeSize(size);
 							},
+							onContentError: (err) => {
+								if (mounted) setContentError(err);
+							},
 							onError: (err) => {
 								if (!mounted) return;
 								setError(err);
@@ -2046,9 +2072,7 @@ _radix_ui_react_dropdown_menu = __toESM(_radix_ui_react_dropdown_menu);
 						}
 					});
 					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) {
@@ -2068,6 +2092,7 @@ _radix_ui_react_dropdown_menu = __toESM(_radix_ui_react_dropdown_menu);
 		}, [
 			agent,
 			copilotkit,
+			messageId,
 			content.resourceUri,
 			content.serverHash,
 			content.serverId
@@ -2082,11 +2107,8 @@ _radix_ui_react_dropdown_menu = __toESM(_radix_ui_react_dropdown_menu);
 			}
 		}, [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",
@@ -2108,12 +2130,12 @@ _radix_ui_react_dropdown_menu = __toESM(_radix_ui_react_dropdown_menu);
 					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]
 			})]
 		});
 	};
@@ -3405,7 +3427,6 @@ _radix_ui_react_dropdown_menu = __toESM(_radix_ui_react_dropdown_menu);
 - 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;
@@ -3415,7 +3436,7 @@ _radix_ui_react_dropdown_menu = __toESM(_radix_ui_react_dropdown_menu);
 		}, [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)(() => {
@@ -3598,7 +3619,7 @@ _radix_ui_react_dropdown_menu = __toESM(_radix_ui_react_dropdown_menu);
 			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,
@@ -3650,7 +3671,8 @@ _radix_ui_react_dropdown_menu = __toESM(_radix_ui_react_dropdown_menu);
 				renderToolCalls: allRenderToolCalls,
 				renderActivityMessages: allActivityRenderers,
 				renderCustomMessages: renderCustomMessagesList,
-				debug
+				debug,
+				learning
 			});
 			if (defaultThrottleMs !== void 0) copilotkitRef.current.setDefaultThrottleMs(defaultThrottleMs);
 		}
@@ -3755,6 +3777,32 @@ _radix_ui_react_dropdown_menu = __toESM(_radix_ui_react_dropdown_menu);
 			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;
@@ -3817,8 +3865,13 @@ _radix_ui_react_dropdown_menu = __toESM(_radix_ui_react_dropdown_menu);
 		]);
 		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";
@@ -6052,13 +6105,23 @@ _radix_ui_react_dropdown_menu = __toESM(_radix_ui_react_dropdown_menu);
 //#region src/v2/components/chat/CopilotChatToolCallsView.tsx
 	function CopilotChatToolCallsView({ message, messages = [] }) {
 		const renderToolCall = useRenderToolCall();
+		const { copilotkit } = 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);
 		}) });
 	}
 
@@ -6402,6 +6465,7 @@ _radix_ui_react_dropdown_menu = __toESM(_radix_ui_react_dropdown_menu);
 		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,
@@ -7634,12 +7698,27 @@ _radix_ui_react_dropdown_menu = __toESM(_radix_ui_react_dropdown_menu);
 		}
 		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 } = useCopilotKit();
+		const { copilotkit, showIntelligenceIndicator = true } = useCopilotKit();
 		const config = useCopilotChatConfiguration();
 		const [, forceUpdate] = (0, react.useReducer)((x) => x + 1, 0);
 		(0, react.useEffect)(() => {
@@ -7668,20 +7747,43 @@ _radix_ui_react_dropdown_menu = __toESM(_radix_ui_react_dropdown_menu);
 			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 ?? (rowKeyStoreRef.current = (0, _copilotkit_shared.createRowKeyStore)());
 		const rowKeyStore = rowKeyStoreRef.current;
@@ -7689,6 +7791,31 @@ _radix_ui_react_dropdown_menu = __toESM(_radix_ui_react_dropdown_menu);
 		(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;
@@ -7728,7 +7855,7 @@ _radix_ui_react_dropdown_menu = __toESM(_radix_ui_react_dropdown_menu);
 		(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,
@@ -7768,7 +7895,7 @@ _radix_ui_react_dropdown_menu = __toESM(_radix_ui_react_dropdown_menu);
 			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,
@@ -7781,8 +7908,8 @@ _radix_ui_react_dropdown_menu = __toESM(_radix_ui_react_dropdown_menu);
 		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) => {
@@ -7826,7 +7953,7 @@ _radix_ui_react_dropdown_menu = __toESM(_radix_ui_react_dropdown_menu);
 				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,
@@ -7834,7 +7961,20 @@ _radix_ui_react_dropdown_menu = __toESM(_radix_ui_react_dropdown_menu);
 			}, `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" },
@@ -7859,7 +7999,7 @@ _radix_ui_react_dropdown_menu = __toESM(_radix_ui_react_dropdown_menu);
 						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,
@@ -7870,8 +8010,8 @@ _radix_ui_react_dropdown_menu = __toESM(_radix_ui_react_dropdown_menu);
 								width: "100%",
 								transform: `translateY(${virtualItem.start}px)`
 							},
-							children: renderMessageBlock(message)
-						}, rowRenderKeys.get(message.id) ?? message.id);
+							children: renderRow(row)
+						}, rowKey(row));
 					})
 				}) : messageElements,
 				interruptElement,
@@ -8939,6 +9079,29 @@ _radix_ui_react_dropdown_menu = __toESM(_radix_ui_react_dropdown_menu);
 		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());
@@ -8998,9 +9161,12 @@ _radix_ui_react_dropdown_menu = __toESM(_radix_ui_react_dropdown_menu);
 			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?.();
@@ -9038,6 +9204,7 @@ _radix_ui_react_dropdown_menu = __toESM(_radix_ui_react_dropdown_menu);
 				}
 				return () => {
 					active = false;
+					selection.active = false;
 				};
 			}
 			let detached = false;
@@ -9051,8 +9218,8 @@ _radix_ui_react_dropdown_menu = __toESM(_radix_ui_react_dropdown_menu);
 					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);
@@ -9068,8 +9235,9 @@ _radix_ui_react_dropdown_menu = __toESM(_radix_ui_react_dropdown_menu);
 					}
 				}
 			};
-			connect(agent);
+			trackConnection(agent, () => connect(agent));
 			return () => {
+				selection.active = false;
 				detached = true;
 				connectAbortController.abort();
 				const detach = agent.detachActiveRun().catch(() => {});
@@ -9132,7 +9300,7 @@ _radix_ui_react_dropdown_menu = __toESM(_radix_ui_react_dropdown_menu);
 					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);
@@ -9142,7 +9310,7 @@ _radix_ui_react_dropdown_menu = __toESM(_radix_ui_react_dropdown_menu);
 					wakeReconnectActive = false;
 					if (!detached && runActivityReconnectGenerationRef.current === generation && activeConnectCountRef.current === 0 && pendingRunActivityReconnectRef.current) {
 						pendingRunActivityReconnectRef.current = false;
-						connect();
+						trackConnection(agent, connect);
 					}
 				}
 			};
@@ -9158,7 +9326,7 @@ _radix_ui_react_dropdown_menu = __toESM(_radix_ui_react_dropdown_menu);
 					return;
 				}
 				pendingRunActivityReconnectRef.current = false;
-				connect();
+				trackConnection(agent, connect);
 			};
 			const subscription = threadStore.subscribeToRunActivity((notification) => {
 				if (notification.threadId !== resolvedThreadId) return;
@@ -9201,6 +9369,18 @@ _radix_ui_react_dropdown_menu = __toESM(_radix_ui_react_dropdown_menu);
 			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 {
@@ -9208,7 +9388,18 @@ _radix_ui_react_dropdown_menu = __toESM(_radix_ui_react_dropdown_menu);
 			} 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)");
@@ -9216,92 +9407,102 @@ _radix_ui_react_dropdown_menu = __toESM(_radix_ui_react_dropdown_menu);
 				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
+					content: value
 				});
-			} 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 } : {}
-				});
-			} 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
 		]);
@@ -9953,7 +10154,7 @@ _radix_ui_react_dropdown_menu = __toESM(_radix_ui_react_dropdown_menu);
 		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,
@@ -13682,6 +13883,8 @@ Object.defineProperty(exports, 'mergeMetadata', {
     return _ag_ui_client.mergeMetadata;
   }
 });
+exports.messageGroup = messageGroup;
+exports.messageRow = messageRow;
 Object.defineProperty(exports, 'ofType', {
   enumerable: true,
   get: function () {