@copilotkit/react-core 1.70.1 → 1.70.3

package/dist/v2/index.umd.js

@@ -283,6 +283,62 @@ _radix_ui_react_dropdown_menu = __toESM(_radix_ui_react_dropdown_menu);
 	const useCopilotChatConfiguration = () => {
 		return (0, react.useContext)(CopilotChatConfiguration);
 	};
+	/**
+	* Reports modal open/close requests to the host, and — when `open` is
+	* supplied — makes the modal state of an already-established chat
+	* configuration **controlled** for the subtree it wraps.
+	*
+	* This is deliberately a scope component rather than another mode inside
+	* {@link CopilotChatConfigurationProvider}. The provider resolves modal state
+	* across a nested chain (own state, parent sync, drawer mutual-exclusion, the
+	* modal-closer registry); a controlled branch inside that resolution would add
+	* a fourth interacting mode. Overriding the context for the subtree instead
+	* leaves every one of those paths untouched:
+	*
+	* - `isModalOpen` is replaced with the host's `open`, so the rendered surface
+	*   follows the prop from the very first frame (no open-then-close flash).
+	* - `setModalOpen` still calls the underlying setter, so the existing
+	*   parent-sync and drawer mutual-exclusion side effects continue to run, and
+	*   *then* reports the request through `onOpenChange`.
+	* - The wrapped setter is registered as the modal closer, so the drawer's
+	*   mobile mutual-exclusion reaches the host instead of silently flipping
+	*   state that nothing displays.
+	*
+	* A host that supplies `open` and ignores `onOpenChange` gets a modal pinned
+	* to `open`, which is the standard controlled-component contract. A host that
+	* supplies only `onOpenChange` is notified while the modal keeps managing
+	* itself.
+	*
+	* Renders `children` unchanged when no chat configuration is in scope.
+	*/
+	const ControlledModalOpenScope = ({ children, open, onOpenChange }) => {
+		const parentConfig = (0, react.useContext)(CopilotChatConfiguration);
+		const parentSetModalOpen = parentConfig?.setModalOpen;
+		const registerModalCloser = parentConfig?.ɵregisterModalCloser;
+		const setModalOpen = (0, react.useCallback)((next) => {
+			parentSetModalOpen?.(next);
+			onOpenChange?.(next);
+		}, [parentSetModalOpen, onOpenChange]);
+		(0, react.useEffect)(() => {
+			if (!registerModalCloser) return;
+			return registerModalCloser(setModalOpen);
+		}, [registerModalCloser, setModalOpen]);
+		const configurationValue = (0, react.useMemo)(() => parentConfig ? {
+			...parentConfig,
+			isModalOpen: open ?? parentConfig.isModalOpen,
+			setModalOpen
+		} : null, [
+			parentConfig,
+			open,
+			setModalOpen
+		]);
+		if (!configurationValue) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children });
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CopilotChatConfiguration.Provider, {
+			value: configurationValue,
+			children
+		});
+	};
+	ControlledModalOpenScope.displayName = "ControlledModalOpenScope";
 
 //#endregion
 //#region src/v2/lib/utils.ts
@@ -1604,6 +1660,29 @@ _radix_ui_react_dropdown_menu = __toESM(_radix_ui_react_dropdown_menu);
 		if (prevProps.RenderComponent !== nextProps.RenderComponent) return false;
 		return true;
 	});
+	const IS_DEVELOPMENT$1 = process.env.NODE_ENV !== "production";
+	/**
+	* Reports tool calls that resolved to no renderer.
+	*
+	* A tool call with no renderer paints an empty message container and says
+	* nothing else, so the only signal a developer gets today is a blank space in
+	* the chat. This names the call and the renderers that *are* registered, which
+	* is the whole diagnosis when the cause is a name that does not match.
+	*
+	* @param toolNames - The unmatched tool names collected during render.
+	* @param registered - The registry as it stands now, re-read at report time.
+	* @param alreadyWarned - Names already reported, mutated to keep this once per name.
+	*/
+	function warnAboutUnrenderedToolCalls(toolNames, registered, alreadyWarned) {
+		const registeredNames = Array.from(new Set(registered.map((rc) => rc.name)));
+		const hasWildcard = registeredNames.includes("*");
+		for (const toolName of toolNames) {
+			if (hasWildcard || registeredNames.includes(toolName)) continue;
+			if (alreadyWarned.has(toolName)) continue;
+			alreadyWarned.add(toolName);
+			console.warn(`[CopilotKit] The agent called the tool "${toolName}", and no renderer is registered for it, so that message rendered nothing. ` + (registeredNames.length === 0 ? "No tool-call renderers are registered. " : `Registered renderers: ${registeredNames.map((name) => `"${name}"`).join(", ")}. `) + `Register one with useRenderTool({ name: "${toolName}", ... }), or call useDefaultRenderTool() for a built-in card that covers every tool the agent calls. This warning is development-only.`);
+		}
+	}
 	/**
 	* Hook that returns a function to render tool calls based on the render functions
 	* defined in CopilotKitProvider.
@@ -1613,13 +1692,18 @@ _radix_ui_react_dropdown_menu = __toESM(_radix_ui_react_dropdown_menu);
 	function useRenderToolCall() {
 		const { copilotkit, executingToolCallIds } = useCopilotKit();
 		const agentId = useCopilotChatConfiguration()?.agentId ?? _copilotkit_shared.DEFAULT_AGENT_ID;
+		const unrenderedToolNames = (0, react.useRef)(/* @__PURE__ */ new Set());
+		const warnedToolNames = (0, react.useRef)(/* @__PURE__ */ new Set());
 		const renderToolCalls = (0, react.useSyncExternalStore)((callback) => {
 			return copilotkit.subscribe({ onRenderToolCallsChanged: callback }).unsubscribe;
 		}, () => copilotkit.renderToolCalls, () => copilotkit.renderToolCalls);
-		return (0, react.useCallback)(({ toolCall, toolMessage }) => {
+		const renderToolCall = (0, react.useCallback)(({ toolCall, toolMessage }) => {
 			const exactMatches = renderToolCalls.filter((rc) => rc.name === toolCall.function.name);
 			const renderConfig = exactMatches.find((rc) => rc.agentId === agentId) || exactMatches.find((rc) => !rc.agentId) || exactMatches[0] || renderToolCalls.find((rc) => rc.name === "*");
-			if (!renderConfig) return null;
+			if (!renderConfig) {
+				if (IS_DEVELOPMENT$1) unrenderedToolNames.current.add(toolCall.function.name);
+				return null;
+			}
 			const RenderComponent = renderConfig.render;
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolCallRenderer, {
 				toolCall,
@@ -1632,6 +1716,17 @@ _radix_ui_react_dropdown_menu = __toESM(_radix_ui_react_dropdown_menu);
 			executingToolCallIds,
 			agentId
 		]);
+		(0, react.useEffect)(() => {
+			if (!IS_DEVELOPMENT$1) return;
+			if (unrenderedToolNames.current.size === 0) return;
+			const timer = setTimeout(() => {
+				const pending = Array.from(unrenderedToolNames.current);
+				unrenderedToolNames.current.clear();
+				warnAboutUnrenderedToolCalls(pending, copilotkit.renderToolCalls, warnedToolNames.current);
+			}, 0);
+			return () => clearTimeout(timer);
+		});
+		return renderToolCall;
 	}
 
 //#endregion
@@ -3110,6 +3205,95 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 		a2ui_operations: zod.z.array(zod.z.any()).optional(),
 		...A2UILifecycleFields
 	}).passthrough();
+	const IS_DEVELOPMENT = process.env.NODE_ENV !== "production";
+	/**
+	* How long to wait for a surface to report its first paint before giving up on
+	* the loader cross-over. Reaching it also means `onReady` never fired, which is
+	* the signal the warning below reports.
+	*/
+	const PAINT_FALLBACK_MS = 8e3;
+	/**
+	* Names the operation kinds a surface received, for a warning that has to say
+	* what did arrive as well as what did not.
+	*
+	* @param operations - The operations grouped under one surface.
+	* @returns A comma-separated list of operation keys, or "none".
+	*/
+	function describeOperationKinds(operations) {
+		const kinds = /* @__PURE__ */ new Set();
+		for (const operation of operations) {
+			if (!operation || typeof operation !== "object") continue;
+			for (const key of Object.keys(operation)) if (key !== "version") kinds.add(key);
+		}
+		return kinds.size === 0 ? "none" : Array.from(kinds).join(", ");
+	}
+	/**
+	* Reports surfaces that received operations and never painted.
+	*
+	* Reaching {@link PAINT_FALLBACK_MS} with no `onReady` means the operations were
+	* accepted, were not malformed enough to raise the provider's error state, and
+	* still put nothing on screen. Left alone that is invisible: the loader drops,
+	* the turn finishes, and the only trace is an empty placeholder above the reply.
+	*
+	* `surfaceHasRenderableContent` already knows which half is missing, so the
+	* warning says which rather than making the reader re-derive it.
+	*
+	* @param grouped - Operations grouped by surface id.
+	*/
+	function warnAboutUnpaintedSurfaces(grouped) {
+		for (const [surfaceId, operations] of grouped) {
+			if (surfaceHasRenderableContent(operations)) continue;
+			const cause = operations.filter((o) => o?.updateComponents).length === 0 ? "no updateComponents operation arrived, so the surface was never given anything to draw" : "its components address their values by \"path\" and no updateDataModel carried a non-empty value, so every bound component drew empty";
+			console.warn(`[CopilotKit] A2UI surface "${surfaceId}" received operations and never painted after ${String(PAINT_FALLBACK_MS)}ms: ${cause}. Operations received: ${describeOperationKinds(operations)}. The payload was accepted, so check what the agent sent rather than the client wiring. This warning is development-only.`);
+		}
+	}
+	/**
+	* Names the component ids a surface was sent, for a warning about the one id
+	* that is missing.
+	*
+	* @param operations - The operations grouped under one surface.
+	* @returns A quoted, comma-separated list of ids, or "none".
+	*/
+	function describeComponentIds(operations) {
+		const ids = [];
+		for (const operation of operations) {
+			const components = operation?.updateComponents?.components;
+			if (!Array.isArray(components)) continue;
+			for (const component of components) {
+				const id = component?.id;
+				if (typeof id === "string" && !ids.includes(id)) ids.push(id);
+			}
+		}
+		return ids.length === 0 ? "none" : ids.map((id) => `"${id}"`).join(", ");
+	}
+	/**
+	* Reports a surface that is still waiting for its {@link ROOT_COMPONENT_ID}
+	* component once its operations have stopped arriving.
+	*
+	* Both renderers begin walking a surface at that one id, and treat an id they
+	* cannot find as not arrived yet — an animated placeholder. That is right while
+	* operations stream. Once they have stopped it is not waiting, it is stuck, and
+	* every other check calls it healthy: the surface exists, `processMessages` did
+	* not throw, the component types were never reached, and
+	* `surfaceHasRenderableContent` says yes on the strength of components plus a
+	* data model, so `onReady` fires and the never-painted report is suppressed.
+	* A complete, accepted payload therefore animates a grey box forever in silence.
+	*
+	* Reads the live components model rather than scanning the operations for the
+	* id, so it covers every way the root can fail to resolve — not only a payload
+	* that never named one.
+	*
+	* @param surfaceId - The surface the operations were addressed to.
+	* @param operations - The operations processed for that surface.
+	* @param surface - The live surface model, already known to exist.
+	*/
+	function warnAboutUnresolvedRoot(surfaceId, operations, surface) {
+		if (surface?.componentsModel?.get?.(_copilotkit_a2ui_renderer.ROOT_COMPONENT_ID)) return;
+		const componentOps = operations.filter((o) => o?.updateComponents);
+		if (componentOps.length === 0) return;
+		const cause = componentOps.some((o) => o.updateComponents?.components?.some?.((c) => c?.id === _copilotkit_a2ui_renderer.ROOT_COMPONENT_ID)) ? `a component with id "${_copilotkit_a2ui_renderer.ROOT_COMPONENT_ID}" WAS sent, so the components did not reach the surface's model — check for an A2UI render error above, or a catalog that took none of them` : `the components it received are named ${describeComponentIds(operations)}, and none of them is "${_copilotkit_a2ui_renderer.ROOT_COMPONENT_ID}" — rename the entry-point component to "${_copilotkit_a2ui_renderer.ROOT_COMPONENT_ID}", and make every other component reachable from it through child/children`;
+		console.warn(`[CopilotKit] A2UI surface "${surfaceId}" has no "${_copilotkit_a2ui_renderer.ROOT_COMPONENT_ID}" component ${String(PAINT_FALLBACK_MS)}ms after its last operations were processed, so it is showing the placeholder for a component that has not arrived yet and will keep showing it: ${cause}. Operations received: ${describeOperationKinds(operations)}. This warning is development-only.`);
+	}
 	function createA2UIMessageRenderer(options) {
 		const { theme, catalog, loadingComponent, recovery, onAction } = options;
 		const showAfterMs = recovery?.showAfterMs ?? 2e3;
@@ -3143,6 +3327,8 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 					return groups;
 				}, [operations]);
 				const hasOps = groupedOperations.size > 0;
+				const groupedOperationsRef = (0, react.useRef)(groupedOperations);
+				groupedOperationsRef.current = groupedOperations;
 				const renderLifecycle = (c) => {
 					const status = c?.status;
 					const debugExposure = resolveDebugExposure(c, optionDebugExposure);
@@ -3174,7 +3360,10 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 						readyRef.current = false;
 						return;
 					}
-					const t = setTimeout(() => setSurfaceReady(true), 8e3);
+					const t = setTimeout(() => {
+						setSurfaceReady(true);
+						if (IS_DEVELOPMENT && !readyRef.current) warnAboutUnpaintedSurfaces(groupedOperationsRef.current);
+					}, PAINT_FALLBACK_MS);
 					return () => clearTimeout(t);
 				}, [hasOps]);
 				if (!hasOps) return renderLifecycle(content);
@@ -3298,8 +3487,21 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 			const hash = JSON.stringify(operations);
 			if (hash === lastHashRef.current) return;
 			lastHashRef.current = hash;
-			processMessages(getSurface(surfaceId) ? operations.filter((op) => !op?.createSurface) : operations);
+			const ops = getSurface(surfaceId) ? operations.filter((op) => !op?.createSurface) : operations;
+			processMessages(ops);
 			if (onReady && surfaceHasRenderableContent(operations)) onReady();
+			if (!IS_DEVELOPMENT) return;
+			if (!getSurface(surfaceId)) {
+				const missingSurfaceCheck = setTimeout(() => {
+					if (getSurface(surfaceId)) return;
+					console.warn(`[CopilotKit] A2UI processed ${String(ops.length)} operation(s) addressed to surface "${surfaceId}" and no surface by that id exists, so this card rendered nothing. Operations received: ${describeOperationKinds(ops)}. A createSurface for "${surfaceId}" has to arrive before, or with, the operations that target it. This warning is development-only.`);
+				}, 0);
+				return () => clearTimeout(missingSurfaceCheck);
+			}
+			const unresolvedRootCheck = setTimeout(() => {
+				warnAboutUnresolvedRoot(surfaceId, operations, getSurface(surfaceId));
+			}, PAINT_FALLBACK_MS);
+			return () => clearTimeout(unresolvedRootCheck);
 		}, [
 			processMessages,
 			getSurface,
@@ -3326,10 +3528,26 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 			return Object.values(v).some((x) => Array.isArray(x) ? x.length > 0 : x !== null && x !== void 0 && x !== "");
 		});
 	}
+	/**
+	* Resolves the surface an operation addresses.
+	*
+	* The nested v0.9 `surfaceId` wins, because that is the id `MessageProcessor`
+	* creates the surface under. Grouping by a top-level `surfaceId` instead files
+	* the operations against a surface that never exists, which paints nothing —
+	* the silence the missing-surface report above now names. A top-level
+	* `surfaceId` is not the v0.9 shape, so it is honoured only when no nested id is
+	* present. `getSurfaceId` in `@copilotkit/a2ui-renderer`'s web-components path
+	* resolves it in the same order; the two disagreeing is what OSS-1048 recorded.
+	*
+	* @param operation - One A2UI operation, of any shape.
+	* @returns The surface id, or null when the operation names none.
+	*/
 	function getOperationSurfaceId(operation) {
 		if (!operation || typeof operation !== "object") return null;
+		const nested = operation?.createSurface?.surfaceId ?? operation?.updateComponents?.surfaceId ?? operation?.updateDataModel?.surfaceId ?? operation?.deleteSurface?.surfaceId;
+		if (typeof nested === "string") return nested;
 		if (typeof operation.surfaceId === "string") return operation.surfaceId;
-		return operation?.createSurface?.surfaceId ?? operation?.updateComponents?.surfaceId ?? operation?.updateDataModel?.surfaceId ?? operation?.deleteSurface?.surfaceId ?? null;
+		return null;
 	}
 
 //#endregion
@@ -3447,6 +3665,9 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 	const EMPTY_HEADERS = Object.freeze({});
 	const EMPTY_PROPERTIES = Object.freeze({});
 	const EMPTY_AGENTS = Object.freeze({});
+	/** Registration name of a catch-all tool: handles any otherwise-unhandled call. */
+	const WILDCARD_TOOL_NAME$1 = "*";
+	const HUMAN_IN_THE_LOOP_ABORTED_MESSAGE = "Human-in-the-loop interaction aborted";
 	const DEFAULT_DESIGN_SKILL = `When generating UI with generateSandboxedUi, follow these design principles inspired by shadcn/ui:
 
 - Use a minimal, flat aesthetic. Avoid drop shadows and gradients — rely on subtle borders (1px solid, light gray like #e5e7eb) to define surfaces.
@@ -3565,6 +3786,11 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 		}
 		const chatApiEndpoint = runtimeUrl ?? (resolvedPublicKey ? COPILOT_CLOUD_CHAT_URL$1 : void 0);
 		const frontendToolsList = useStableArrayProp(frontendTools, "frontendTools must be a stable array. If you want to dynamically add or remove tools, use `useFrontendTool` instead.");
+		/**
+		* A `humanInTheLoop` prop tool call that is parked, waiting on the user.
+		* Keyed by tool call id, so parallel calls of one tool stay independent.
+		*/
+		const pendingHumanInTheLoopRef = (0, react.useRef)(/* @__PURE__ */ new Map());
 		const humanInTheLoopList = useStableArrayProp(humanInTheLoop, "humanInTheLoop must be a stable array. If you want to dynamically add or remove human-in-the-loop tools, use `useHumanInTheLoop` instead.");
 		const sandboxFunctionsList = useStableArrayProp(openGenerativeUI?.sandboxFunctions, "openGenerativeUI.sandboxFunctions must be a stable array.");
 		const processedHumanInTheLoopTools = (0, react.useMemo)(() => {
@@ -3577,20 +3803,52 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 					parameters: tool.parameters,
 					followUp: tool.followUp,
 					...tool.agentId && { agentId: tool.agentId },
-					handler: async () => {
-						return new Promise((resolve) => {
-							console.warn(`Human-in-the-loop tool '${tool.name}' called but no interactive handler is set up.`);
-							resolve(void 0);
+					handler: async (_args, context) => {
+						const signal = context?.signal;
+						const key = context?.toolCall?.id ?? tool.name;
+						return new Promise((resolve, reject) => {
+							if (signal?.aborted) {
+								reject(new Error(HUMAN_IN_THE_LOOP_ABORTED_MESSAGE));
+								return;
+							}
+							const pending = { resolve };
+							pendingHumanInTheLoopRef.current.set(key, pending);
+							if (signal) {
+								const onAbort = () => {
+									pendingHumanInTheLoopRef.current.delete(key);
+									reject(new Error(HUMAN_IN_THE_LOOP_ABORTED_MESSAGE));
+								};
+								signal.addEventListener("abort", onAbort, { once: true });
+								pending.detachAbort = () => {
+									signal.removeEventListener("abort", onAbort);
+								};
+							}
 						});
 					}
 				};
 				processedTools.push(frontendTool);
-				if (tool.render) processedRenderToolCalls.push({
-					name: tool.name,
-					args: tool.parameters,
-					render: tool.render,
-					...tool.agentId && { agentId: tool.agentId }
-				});
+				if (tool.render) {
+					const ToolComponent = tool.render;
+					const RenderComponent = (props) => (0, react.createElement)(ToolComponent, {
+						...props,
+						name: tool.name === WILDCARD_TOOL_NAME$1 ? props.name : tool.name,
+						description: tool.description || "",
+						agentId: tool.agentId,
+						respond: props.status === _copilotkit_core.ToolCallStatus.Executing ? async (result) => {
+							const pending = pendingHumanInTheLoopRef.current.get(props.toolCallId);
+							if (!pending) return;
+							pending.detachAbort?.();
+							pendingHumanInTheLoopRef.current.delete(props.toolCallId);
+							pending.resolve(result);
+						} : void 0
+					});
+					processedRenderToolCalls.push({
+						name: tool.name,
+						args: tool.parameters,
+						render: RenderComponent,
+						...tool.agentId && { agentId: tool.agentId }
+					});
+				}
 			});
 			return {
 				tools: processedTools,
@@ -5439,7 +5697,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 	*         at the call site.
 	*/
 	async function recordAnnotation(args) {
-		const { runtimeUrl, headers, type, payload, threadId, occurredAt } = args;
+		const { runtimeUrl, headers, type, payload, threadId, occurredAt, fetch: fetchImplementation = globalThis.fetch } = args;
 		const body = {
 			type,
 			threadId,
@@ -5447,7 +5705,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 			...payload !== void 0 ? { payload } : {},
 			...occurredAt !== void 0 ? { occurredAt } : {}
 		};
-		const response = await fetch(`${runtimeUrl}/annotate`, {
+		const response = await fetchImplementation(`${runtimeUrl}/annotate`, {
 			method: "POST",
 			headers: {
 				"Content-Type": "application/json",
@@ -5516,6 +5774,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 				...input.data !== void 0 ? { data: input.data } : {}
 			};
 			return recordAnnotation({
+				fetch: copilotkit.ɵruntimeFetch,
 				runtimeUrl,
 				headers: copilotkit.headers ?? {},
 				type: "user_action",
@@ -5585,7 +5844,22 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 
 //#endregion
 //#region src/v2/hooks/use-attachments.tsx
-/**
+	const DEFAULT_MAX_SIZE = 20 * 1024 * 1024;
+	/**
+	* How many uploads run at once when `maxConcurrentUploads` is unset. One, because
+	* `onUpload` is a public callback an app may have written expecting the previous
+	* file to have finished — concurrency is something the app asks for.
+	*/
+	const DEFAULT_MAX_CONCURRENT_UPLOADS = 1;
+	/**
+	* At least one upload at a time, whole files only; `NaN` or a non-number falls back to the
+	* default, and `Infinity` means "no limit" — bounded in practice by how many files are queued.
+	*/
+	function resolveMaxConcurrentUploads(configured) {
+		if (typeof configured !== "number" || Number.isNaN(configured)) return DEFAULT_MAX_CONCURRENT_UPLOADS;
+		return Math.max(1, Math.floor(configured));
+	}
+	/**
 	* Hook that manages file attachment state — uploads, drag-and-drop, paste,
 	* and lifecycle. All returned callbacks are referentially stable across
 	* renders (via useCallback) to avoid destabilizing downstream memoization.
@@ -5600,10 +5874,62 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 		configRef.current = config;
 		const attachmentsRef = (0, react.useRef)([]);
 		attachmentsRef.current = attachments;
+		const uploadQueueRef = (0, react.useRef)([]);
+		const activeWorkersRef = (0, react.useRef)(0);
+		const uploadFile = (0, react.useCallback)(async (file, placeholder, cfg) => {
+			try {
+				let source;
+				let uploadMetadata;
+				if (cfg?.onUpload) {
+					const { metadata: meta, ...uploadSource } = await cfg.onUpload(file);
+					source = uploadSource;
+					uploadMetadata = meta;
+				} else source = {
+					type: "data",
+					value: await (0, _copilotkit_shared.readFileAsBase64)(file),
+					mimeType: file.type
+				};
+				let thumbnail;
+				if (placeholder.type === "video") thumbnail = await (0, _copilotkit_shared.generateVideoThumbnail)(file);
+				setAttachments((prev) => prev.map((att) => att.id === placeholder.id ? {
+					...att,
+					source,
+					status: "ready",
+					thumbnail,
+					metadata: uploadMetadata
+				} : att));
+			} catch (error) {
+				setAttachments((prev) => prev.filter((att) => att.id !== placeholder.id));
+				console.error(`[CopilotKit] Failed to upload "${file.name}":`, error);
+				cfg?.onUploadFailed?.({
+					reason: "upload-failed",
+					file,
+					message: error instanceof Error ? error.message : `Failed to upload "${file.name}"`
+				});
+			}
+		}, []);
+		const drainUploadQueue = (0, react.useCallback)(async () => {
+			activeWorkersRef.current++;
+			try {
+				for (;;) {
+					const item = uploadQueueRef.current.shift();
+					if (!item) return;
+					try {
+						await uploadFile(item.file, item.placeholder, item.cfg);
+					} catch (error) {
+						console.error("[CopilotKit] Upload worker error:", error);
+					} finally {
+						item.settle();
+					}
+				}
+			} finally {
+				activeWorkersRef.current--;
+			}
+		}, [uploadFile]);
 		const processFiles = (0, react.useCallback)(async (files) => {
 			const cfg = configRef.current;
 			const accept = cfg?.accept ?? "*/*";
-			const maxSize = cfg?.maxSize ?? 20 * 1024 * 1024;
+			const maxSize = cfg?.maxSize ?? DEFAULT_MAX_SIZE;
 			const rejectedFiles = files.filter((file) => !(0, _copilotkit_shared.matchesAcceptFilter)(file, accept));
 			for (const file of rejectedFiles) cfg?.onUploadFailed?.({
 				reason: "invalid-type",
@@ -5611,6 +5937,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 				message: `File "${file.name}" is not accepted. Supported types: ${accept}`
 			});
 			const validFiles = files.filter((file) => (0, _copilotkit_shared.matchesAcceptFilter)(file, accept));
+			const queued = [];
 			for (const file of validFiles) {
 				if ((0, _copilotkit_shared.exceedsMaxSize)(file, maxSize)) {
 					cfg?.onUploadFailed?.({
@@ -5620,53 +5947,37 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 					});
 					continue;
 				}
-				const modality = (0, _copilotkit_shared.getModalityFromMimeType)(file.type);
-				const placeholderId = (0, _copilotkit_shared.randomUUID)();
-				const placeholder = {
-					id: placeholderId,
-					type: modality,
-					source: {
-						type: "data",
-						value: "",
-						mimeType: file.type
-					},
-					filename: file.name,
-					size: file.size,
-					status: "uploading"
-				};
-				setAttachments((prev) => [...prev, placeholder]);
-				try {
-					let source;
-					let uploadMetadata;
-					if (cfg?.onUpload) {
-						const { metadata: meta, ...uploadSource } = await cfg.onUpload(file);
-						source = uploadSource;
-						uploadMetadata = meta;
-					} else source = {
-						type: "data",
-						value: await (0, _copilotkit_shared.readFileAsBase64)(file),
-						mimeType: file.type
-					};
-					let thumbnail;
-					if (modality === "video") thumbnail = await (0, _copilotkit_shared.generateVideoThumbnail)(file);
-					setAttachments((prev) => prev.map((att) => att.id === placeholderId ? {
-						...att,
-						source,
-						status: "ready",
-						thumbnail,
-						metadata: uploadMetadata
-					} : att));
-				} catch (error) {
-					setAttachments((prev) => prev.filter((att) => att.id !== placeholderId));
-					console.error(`[CopilotKit] Failed to upload "${file.name}":`, error);
-					cfg?.onUploadFailed?.({
-						reason: "upload-failed",
-						file,
-						message: error instanceof Error ? error.message : `Failed to upload "${file.name}"`
-					});
-				}
+				queued.push({
+					file,
+					placeholder: {
+						id: (0, _copilotkit_shared.randomUUID)(),
+						type: (0, _copilotkit_shared.getModalityFromMimeType)(file.type),
+						source: {
+							type: "data",
+							value: "",
+							mimeType: file.type
+						},
+						filename: file.name,
+						size: file.size,
+						status: "uploading"
+					}
+				});
 			}
-		}, []);
+			if (queued.length === 0) return;
+			setAttachments((prev) => [...prev, ...queued.map((q) => q.placeholder)]);
+			const settled = queued.map(({ file, placeholder }) => new Promise((resolve) => {
+				uploadQueueRef.current.push({
+					file,
+					placeholder,
+					cfg,
+					settle: resolve
+				});
+			}));
+			const limit = resolveMaxConcurrentUploads(cfg?.maxConcurrentUploads);
+			const toSpawn = Math.min(uploadQueueRef.current.length, Math.max(0, limit - activeWorkersRef.current));
+			for (let i = 0; i < toSpawn; i++) drainUploadQueue();
+			await Promise.all(settled);
+		}, [drainUploadQueue]);
 		const handleFileUpload = (0, react.useCallback)(async (e) => {
 			if (!e.target.files?.length) return;
 			try {
@@ -5794,8 +6105,10 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 		const warnedMissingUrlRef = (0, react.useRef)(false);
 		const runtimeUrlRef = (0, react.useRef)(copilotkit.runtimeUrl);
 		const headersRef = (0, react.useRef)(copilotkit.headers ?? {});
+		const runtimeFetchRef = (0, react.useRef)(copilotkit.ɵruntimeFetch);
 		runtimeUrlRef.current = copilotkit.runtimeUrl;
 		headersRef.current = copilotkit.headers ?? {};
+		runtimeFetchRef.current = copilotkit.ɵruntimeFetch;
 		const key = JSON.stringify(learningContainers);
 		const defaultKey = JSON.stringify(DEFAULT_CONTAINERS);
 		(0, react.useEffect)(() => {
@@ -5815,6 +6128,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 					return;
 				}
 				recordAnnotation({
+					fetch: copilotkit.ɵruntimeFetch,
 					runtimeUrl,
 					headers,
 					type: "set_learning_containers",
@@ -5842,6 +6156,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 				const capturedRuntimeUrl = runtimeUrlRef.current;
 				const capturedHeaders = headersRef.current;
 				if (capturedRuntimeUrl) recordAnnotation({
+					fetch: runtimeFetchRef.current,
 					runtimeUrl: capturedRuntimeUrl,
 					headers: capturedHeaders,
 					type: "set_learning_containers",
@@ -9104,6 +9419,41 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 	});
 	CopilotChatToggleButton.displayName = "CopilotChatToggleButton";
 
+//#endregion
+//#region src/v2/components/chat/modal-open-control.tsx
+	const ModalOpenControlContext = (0, react.createContext)({});
+	/**
+	* Carries `open` / `onOpenChange` from a prebuilt surface down to the view that
+	* owns the modal state.
+	*
+	* A context is required rather than plain props because `<CopilotSidebar>`
+	* hands its view to `<CopilotChat>` as a `chatView` **component**. Threading a
+	* value that changes (like `open`) through that component's identity would mint
+	* a new element type on every toggle, and React unmounts and remounts the whole
+	* chat subtree when the element type changes. That is the remount class of bug
+	* already fixed for `<CopilotPopup>` on resize. Context keeps the override
+	* identity stable while still re-rendering the view when `open` changes.
+	*/
+	function ModalOpenControlProvider({ open, onOpenChange, children }) {
+		const value = (0, react.useMemo)(() => ({
+			open,
+			onOpenChange
+		}), [open, onOpenChange]);
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ModalOpenControlContext.Provider, {
+			value,
+			children
+		});
+	}
+	/**
+	* Reads the controlled open state supplied by the surrounding prebuilt
+	* surface. Returns an empty control (uncontrolled) when there is none.
+	*
+	* @returns The host's `open` / `onOpenChange` pair.
+	*/
+	function useModalOpenControl() {
+		return (0, react.useContext)(ModalOpenControlContext);
+	}
+
 //#endregion
 //#region src/v2/components/chat/CopilotModalHeader.tsx
 /**
@@ -9213,15 +9563,22 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 	const DEFAULT_SIDEBAR_WIDTH = 480;
 	const SIDEBAR_TRANSITION_MS = 260;
 	function CopilotSidebarView({ header, toggleButton, width, defaultOpen = true, position = "right", ...props }) {
+		const { open, onOpenChange } = useModalOpenControl();
+		const hasOpenControl = open !== void 0 || onOpenChange !== void 0;
+		const internal = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CopilotSidebarViewInternal, {
+			header,
+			toggleButton,
+			width,
+			position,
+			...props
+		});
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CopilotChatConfigurationProvider, {
-			isModalDefaultOpen: defaultOpen,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CopilotSidebarViewInternal, {
-				header,
-				toggleButton,
-				width,
-				position,
-				...props
-			})
+			isModalDefaultOpen: open ?? defaultOpen,
+			children: hasOpenControl ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ControlledModalOpenScope, {
+				open,
+				onOpenChange,
+				children: internal
+			}) : internal
 		});
 	}
 	function CopilotSidebarViewInternal({ header, toggleButton, width, position = "right", ...props }) {
@@ -9285,7 +9642,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 			"data-position": position,
 			className: cn("copilotKitSidebar copilotKitWindow", "cpk:fixed cpk:top-0 cpk:z-[1200] cpk:flex", position === "left" ? "cpk:left-0" : "cpk:right-0", "cpk:h-[100vh] cpk:h-[100dvh] cpk:max-h-screen", "cpk:w-full", position === "left" ? "cpk:border-r" : "cpk:border-l", "cpk:border-border cpk:bg-background cpk:text-foreground cpk:shadow-xl", "cpk:transition-transform cpk:duration-300 cpk:ease-out", isSidebarOpen ? "cpk:translate-x-0" : position === "left" ? "cpk:-translate-x-full cpk:pointer-events-none" : "cpk:translate-x-full cpk:pointer-events-none"),
 			style: {
-				["--sidebar-width"]: widthToCss(sidebarWidth),
+				"--sidebar-width": widthToCss(sidebarWidth),
 				paddingTop: "env(safe-area-inset-top)",
 				paddingBottom: "env(safe-area-inset-bottom)"
 			},
@@ -9347,17 +9704,24 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 		return `${fallback}px`;
 	};
 	function CopilotPopupView({ header, toggleButton, width, height, clickOutsideToClose, defaultOpen = true, className, ...restProps }) {
+		const { open, onOpenChange } = useModalOpenControl();
+		const hasOpenControl = open !== void 0 || onOpenChange !== void 0;
+		const internal = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CopilotPopupViewInternal, {
+			header,
+			toggleButton,
+			width,
+			height,
+			clickOutsideToClose,
+			className,
+			...restProps
+		});
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CopilotChatConfigurationProvider, {
-			isModalDefaultOpen: defaultOpen,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CopilotPopupViewInternal, {
-				header,
-				toggleButton,
-				width,
-				height,
-				clickOutsideToClose,
-				className,
-				...restProps
-			})
+			isModalDefaultOpen: open ?? defaultOpen,
+			children: hasOpenControl ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ControlledModalOpenScope, {
+				open,
+				onOpenChange,
+				children: internal
+			}) : internal
 		});
 	}
 	function CopilotPopupViewInternal({ header, toggleButton, width, height, clickOutsideToClose, className, ...restProps }) {
@@ -9490,7 +9854,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 
 //#endregion
 //#region src/v2/components/chat/CopilotSidebar.tsx
-	function CopilotSidebar({ header, toggleButton, defaultOpen, width, position, ...chatProps }) {
+	function CopilotSidebar({ header, toggleButton, defaultOpen, open, onOpenChange, width, position, ...chatProps }) {
 		const { checkFeature } = useLicenseContext();
 		const isSidebarLicensed = checkFeature("sidebar");
 		(0, react.useEffect)(() => {
@@ -9516,11 +9880,15 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 			defaultOpen,
 			position
 		]);
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [!isSidebarLicensed && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InlineFeatureWarning, { featureName: "Sidebar" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CopilotChat, {
-			welcomeScreen: CopilotSidebarView.WelcomeScreen,
-			...chatProps,
-			isModalDefaultOpen: defaultOpen,
-			chatView: SidebarViewOverride
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [!isSidebarLicensed && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InlineFeatureWarning, { featureName: "Sidebar" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ModalOpenControlProvider, {
+			open,
+			onOpenChange,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CopilotChat, {
+				welcomeScreen: CopilotSidebarView.WelcomeScreen,
+				...chatProps,
+				isModalDefaultOpen: defaultOpen,
+				chatView: SidebarViewOverride
+			})
 		})] });
 	}
 	CopilotSidebar.displayName = "CopilotSidebar";
@@ -9542,7 +9910,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 		});
 	};
 	const PopupViewOverrideWithStatics = Object.assign(PopupViewOverride, CopilotChatView_default);
-	function CopilotPopup({ header, toggleButton, defaultOpen, width, height, clickOutsideToClose, ...chatProps }) {
+	function CopilotPopup({ header, toggleButton, defaultOpen, open, onOpenChange, width, height, clickOutsideToClose, ...chatProps }) {
 		const { checkFeature } = useLicenseContext();
 		const isPopupLicensed = checkFeature("popup");
 		(0, react.useEffect)(() => {
@@ -9565,11 +9933,15 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 		]);
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [!isPopupLicensed && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InlineFeatureWarning, { featureName: "Popup" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PopupShellPropsContext.Provider, {
 			value: shellProps,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CopilotChat, {
-				welcomeScreen: CopilotPopupView_default.WelcomeScreen,
-				...chatProps,
-				isModalDefaultOpen: defaultOpen,
-				chatView: PopupViewOverrideWithStatics
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ModalOpenControlProvider, {
+				open,
+				onOpenChange,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CopilotChat, {
+					welcomeScreen: CopilotPopupView_default.WelcomeScreen,
+					...chatProps,
+					isModalDefaultOpen: defaultOpen,
+					chatView: PopupViewOverrideWithStatics
+				})
 			})
 		})] });
 	}