@copilotkit/react-core 1.77.0 → 1.77.1

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

@@ -1655,7 +1655,7 @@ function useRenderToolCall() {
 
 //#endregion
 //#region package.json
-var version = "1.77.0";
+var version = "1.77.1";
 
 //#endregion
 //#region src/v2/components/CopilotKitInspector.tsx
@@ -3412,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;
@@ -3605,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,
@@ -7684,8 +7683,23 @@ 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();
@@ -7718,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;
@@ -7739,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;
@@ -7778,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,
@@ -7818,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,
@@ -7831,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) => {
@@ -7884,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" },
@@ -7909,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,
@@ -7920,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,
@@ -8989,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());
@@ -9048,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?.();
@@ -9088,6 +9189,7 @@ function CopilotChat({ agentId, threadId, labels, inspectorTools, chatView, isMo
 			}
 			return () => {
 				active = false;
+				selection.active = false;
 			};
 		}
 		let detached = false;
@@ -9101,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);
@@ -9118,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(() => {});
@@ -9182,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);
@@ -9192,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);
 				}
 			}
 		};
@@ -9208,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;
@@ -9251,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 {
@@ -9258,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)");
@@ -9266,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
 	]);
@@ -13020,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 () {
@@ -13206,4 +13354,4 @@ Object.defineProperty(exports, 'useToast', {
     return useToast;
   }
 });
-//# sourceMappingURL=copilotkit-CFPkj9B9.cjs.map
+//# sourceMappingURL=copilotkit-BG1d4-qU.cjs.map