@copilotkit/react-core 1.77.0 → 1.77.1

package/dist/v2/index.umd.js

@@ -1766,7 +1766,7 @@ _radix_ui_react_dropdown_menu = __toESM(_radix_ui_react_dropdown_menu);
 
 //#endregion
 //#region package.json
-	var version = "1.77.0";
+	var version = "1.77.1";
 
 //#endregion
 //#region src/v2/components/CopilotKitInspector.tsx
@@ -3427,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;
@@ -3620,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,
@@ -7699,8 +7698,23 @@ _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();
@@ -7733,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;
@@ -7754,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;
@@ -7793,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,
@@ -7833,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,
@@ -7846,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) => {
@@ -7899,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" },
@@ -7924,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,
@@ -7935,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,
@@ -9004,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());
@@ -9063,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?.();
@@ -9103,6 +9204,7 @@ _radix_ui_react_dropdown_menu = __toESM(_radix_ui_react_dropdown_menu);
 				}
 				return () => {
 					active = false;
+					selection.active = false;
 				};
 			}
 			let detached = false;
@@ -9116,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);
@@ -9133,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(() => {});
@@ -9197,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);
@@ -9207,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);
 					}
 				}
 			};
@@ -9223,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;
@@ -9266,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 {
@@ -9273,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)");
@@ -9281,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
-				});
-			} 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
 		]);
@@ -13747,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 () {