@copilotkit/react-core 1.55.0-next.9 → 1.55.1-next.0

package/dist/v2/index.umd.js

@@ -1,10 +1,10 @@
 "use client";
 
 (function(global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ?  factory(exports, require('./index.css'), require('@copilotkit/core'), require('@ag-ui/client'), require('react'), require('tailwind-merge'), require('lucide-react'), require('@copilotkit/shared'), require('react/jsx-runtime'), require('@radix-ui/react-slot'), require('class-variance-authority'), require('clsx'), require('@radix-ui/react-tooltip'), require('@radix-ui/react-dropdown-menu'), require('streamdown'), require('zod'), require('@lit-labs/react'), require('@copilotkit/a2ui-renderer'), require('use-stick-to-bottom'), require('ts-deepmerge'), require('react-dom')) :
-  typeof define === 'function' && define.amd ? define(['exports', './index.css', '@copilotkit/core', '@ag-ui/client', 'react', 'tailwind-merge', 'lucide-react', '@copilotkit/shared', 'react/jsx-runtime', '@radix-ui/react-slot', 'class-variance-authority', 'clsx', '@radix-ui/react-tooltip', '@radix-ui/react-dropdown-menu', 'streamdown', 'zod', '@lit-labs/react', '@copilotkit/a2ui-renderer', 'use-stick-to-bottom', 'ts-deepmerge', 'react-dom'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.CopilotKitReactCoreV2 = {}), global.src_v2_index_css,global.CopilotKitCore,global.AgUIClient,global.React,global.tailwindMerge,global.lucideReact,global.CopilotKitShared,global.ReactJsxRuntime,global.RadixReactSlot,global.classVarianceAuthority,global.clsx,global.RadixReactTooltip,global.RadixReactDropdownMenu,global.streamdown,global.Zod,global.LitLabsReact,global.CopilotKitA2UIRenderer,global.useStickToBottom,global.tsDeepmerge,global.ReactDOM));
-})(this, function(exports, src_v2_index_css, _copilotkit_core, _ag_ui_client, react, tailwind_merge, lucide_react, _copilotkit_shared, react_jsx_runtime, _radix_ui_react_slot, class_variance_authority, clsx, _radix_ui_react_tooltip, _radix_ui_react_dropdown_menu, streamdown, zod, _lit_labs_react, _copilotkit_a2ui_renderer, use_stick_to_bottom, ts_deepmerge, react_dom) {
+  typeof exports === 'object' && typeof module !== 'undefined' ?  factory(exports, require('./index.css'), require('@copilotkit/core'), require('@ag-ui/client'), require('react'), require('tailwind-merge'), require('lucide-react'), require('@copilotkit/shared'), require('react/jsx-runtime'), require('@radix-ui/react-slot'), require('class-variance-authority'), require('clsx'), require('@radix-ui/react-tooltip'), require('@radix-ui/react-dropdown-menu'), require('streamdown'), require('zod'), require('@lit-labs/react'), require('@copilotkit/a2ui-renderer'), require('zod-to-json-schema'), require('@tanstack/react-virtual'), require('react-dom'), require('use-stick-to-bottom')) :
+  typeof define === 'function' && define.amd ? define(['exports', './index.css', '@copilotkit/core', '@ag-ui/client', 'react', 'tailwind-merge', 'lucide-react', '@copilotkit/shared', 'react/jsx-runtime', '@radix-ui/react-slot', 'class-variance-authority', 'clsx', '@radix-ui/react-tooltip', '@radix-ui/react-dropdown-menu', 'streamdown', 'zod', '@lit-labs/react', '@copilotkit/a2ui-renderer', 'zod-to-json-schema', '@tanstack/react-virtual', 'react-dom', 'use-stick-to-bottom'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.CopilotKitReactCoreV2 = {}), global.src_v2_index_css,global.CopilotKitCore,global.AgUIClient,global.React,global.tailwindMerge,global.lucideReact,global.CopilotKitShared,global.ReactJsxRuntime,global.RadixReactSlot,global.classVarianceAuthority,global.clsx,global.RadixReactTooltip,global.RadixReactDropdownMenu,global.streamdown,global.Zod,global.LitLabsReact,global.CopilotKitA2UIRenderer,global.zod_to_json_schema,global._tanstack_react_virtual,global.ReactDOM,global.useStickToBottom));
+})(this, function(exports, src_v2_index_css, _copilotkit_core, _ag_ui_client, react, tailwind_merge, lucide_react, _copilotkit_shared, react_jsx_runtime, _radix_ui_react_slot, class_variance_authority, clsx, _radix_ui_react_tooltip, _radix_ui_react_dropdown_menu, streamdown, zod, _lit_labs_react, _copilotkit_a2ui_renderer, zod_to_json_schema, _tanstack_react_virtual, react_dom, use_stick_to_bottom) {
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 //#region \0rolldown/runtime.js
 	var __create = Object.create;
@@ -37,13 +37,113 @@ react = __toESM(react);
 _radix_ui_react_tooltip = __toESM(_radix_ui_react_tooltip);
 _radix_ui_react_dropdown_menu = __toESM(_radix_ui_react_dropdown_menu);
 
+//#region src/v2/lib/slots.tsx
+/**
+	* Shallow equality comparison for objects.
+	*/
+	function shallowEqual(obj1, obj2) {
+		const keys1 = Object.keys(obj1);
+		const keys2 = Object.keys(obj2);
+		if (keys1.length !== keys2.length) return false;
+		for (const key of keys1) if (obj1[key] !== obj2[key]) return false;
+		return true;
+	}
+	/**
+	* Returns true only for plain JS objects (`{}`), excluding arrays, Dates,
+	* class instances, and other exotic objects that happen to have typeof "object".
+	*/
+	function isPlainObject(obj) {
+		return obj !== null && typeof obj === "object" && Object.prototype.toString.call(obj) === "[object Object]";
+	}
+	/**
+	* Returns the same reference as long as the value is shallowly equal to the
+	* previous render's value.
+	*
+	* - Identical references bail out immediately (O(1)).
+	* - Plain objects ({}) are shallow-compared key-by-key.
+	* - Arrays, Dates, class instances, functions, and primitives are compared by
+	*   reference only — shallowEqual is never called on non-plain objects, which
+	*   avoids incorrect equality for e.g. [1,2] vs [1,2] (different arrays).
+	*
+	* Typical use: stabilize inline slot props so MemoizedSlotWrapper's shallow
+	* equality check isn't defeated by a new object reference on every render.
+	*/
+	function useShallowStableRef(value) {
+		const ref = (0, react.useRef)(value);
+		if (ref.current === value) return ref.current;
+		if (isPlainObject(ref.current) && isPlainObject(value)) {
+			if (shallowEqual(ref.current, value)) return ref.current;
+		}
+		ref.current = value;
+		return ref.current;
+	}
+	/**
+	* Check if a value is a React component type (function, class, forwardRef, memo, etc.)
+	*/
+	function isReactComponentType(value) {
+		if (typeof value === "function") return true;
+		if (value && typeof value === "object" && "$$typeof" in value && !react.default.isValidElement(value)) return true;
+		return false;
+	}
+	/**
+	* Internal function to render a slot value as a React element (non-memoized).
+	*/
+	function renderSlotElement(slot, DefaultComponent, props) {
+		if (typeof slot === "string") {
+			const existingClassName = props.className;
+			return react.default.createElement(DefaultComponent, {
+				...props,
+				className: (0, tailwind_merge.twMerge)(existingClassName, slot)
+			});
+		}
+		if (isReactComponentType(slot)) return react.default.createElement(slot, props);
+		if (slot && typeof slot === "object" && !react.default.isValidElement(slot)) return react.default.createElement(DefaultComponent, {
+			...props,
+			...slot
+		});
+		return react.default.createElement(DefaultComponent, props);
+	}
+	/**
+	* Internal memoized wrapper component for renderSlot.
+	* Uses forwardRef to support ref forwarding.
+	*/
+	const MemoizedSlotWrapper = react.default.memo(react.default.forwardRef(function MemoizedSlotWrapper(props, ref) {
+		const { $slot, $component, ...rest } = props;
+		return renderSlotElement($slot, $component, ref !== null ? {
+			...rest,
+			ref
+		} : rest);
+	}), (prev, next) => {
+		if (prev.$slot !== next.$slot) return false;
+		if (prev.$component !== next.$component) return false;
+		const { $slot: _ps, $component: _pc, ...prevRest } = prev;
+		const { $slot: _ns, $component: _nc, ...nextRest } = next;
+		return shallowEqual(prevRest, nextRest);
+	});
+	/**
+	* Renders a slot value as a memoized React element.
+	* Automatically prevents unnecessary re-renders using shallow prop comparison.
+	* Supports ref forwarding.
+	*
+	* @example
+	* renderSlot(customInput, CopilotChatInput, { onSubmit: handleSubmit })
+	*/
+	function renderSlot(slot, DefaultComponent, props) {
+		return react.default.createElement(MemoizedSlotWrapper, {
+			...props,
+			$slot: slot,
+			$component: DefaultComponent
+		});
+	}
+
+//#endregion
 //#region src/v2/providers/CopilotChatConfigurationProvider.tsx
 	const CopilotChatDefaultLabels = {
 		chatInputPlaceholder: "Type a message...",
 		chatInputToolbarStartTranscribeButtonLabel: "Transcribe",
 		chatInputToolbarCancelTranscribeButtonLabel: "Cancel",
 		chatInputToolbarFinishTranscribeButtonLabel: "Finish",
-		chatInputToolbarAddButtonLabel: "Add photos or files",
+		chatInputToolbarAddButtonLabel: "Add attachments",
 		chatInputToolbarToolsButtonLabel: "Tools",
 		assistantMessageToolbarCopyCodeLabel: "Copy",
 		assistantMessageToolbarCopyCodeCopiedLabel: "Copied",
@@ -64,14 +164,15 @@ _radix_ui_react_dropdown_menu = __toESM(_radix_ui_react_dropdown_menu);
 	const CopilotChatConfigurationProvider = ({ children, labels, agentId, threadId, isModalDefaultOpen }) => {
 		var _ref, _parentConfig$isModal, _parentConfig$setModa;
 		const parentConfig = (0, react.useContext)(CopilotChatConfiguration);
+		const stableLabels = useShallowStableRef(labels);
 		const mergedLabels = (0, react.useMemo)(() => {
 			var _parentConfig$labels;
 			return {
 				...CopilotChatDefaultLabels,
 				...(_parentConfig$labels = parentConfig === null || parentConfig === void 0 ? void 0 : parentConfig.labels) !== null && _parentConfig$labels !== void 0 ? _parentConfig$labels : {},
-				...labels !== null && labels !== void 0 ? labels : {}
+				...stableLabels !== null && stableLabels !== void 0 ? stableLabels : {}
 			};
-		}, [labels, parentConfig === null || parentConfig === void 0 ? void 0 : parentConfig.labels]);
+		}, [stableLabels, parentConfig === null || parentConfig === void 0 ? void 0 : parentConfig.labels]);
 		const resolvedAgentId = (_ref = agentId !== null && agentId !== void 0 ? agentId : parentConfig === null || parentConfig === void 0 ? void 0 : parentConfig.agentId) !== null && _ref !== void 0 ? _ref : _copilotkit_shared.DEFAULT_AGENT_ID;
 		const resolvedThreadId = (0, react.useMemo)(() => {
 			if (threadId) return threadId;
@@ -120,9 +221,9 @@ _radix_ui_react_dropdown_menu = __toESM(_radix_ui_react_dropdown_menu);
 
 //#endregion
 //#region src/v2/lib/utils.ts
-	const twMerge$8 = (0, tailwind_merge.extendTailwindMerge)({ prefix: "cpk" });
+	const twMerge$7 = (0, tailwind_merge.extendTailwindMerge)({ prefix: "cpk" });
 	function cn(...inputs) {
-		return twMerge$8((0, clsx.clsx)(inputs));
+		return twMerge$7((0, clsx.clsx)(inputs));
 	}
 
 //#endregion
@@ -496,82 +597,11 @@ _radix_ui_react_dropdown_menu = __toESM(_radix_ui_react_dropdown_menu);
 	});
 	CopilotChatAudioRecorder.displayName = "CopilotChatAudioRecorder";
 
-//#endregion
-//#region src/v2/lib/slots.tsx
-/**
-	* Shallow equality comparison for objects.
-	*/
-	function shallowEqual(obj1, obj2) {
-		const keys1 = Object.keys(obj1);
-		const keys2 = Object.keys(obj2);
-		if (keys1.length !== keys2.length) return false;
-		for (const key of keys1) if (obj1[key] !== obj2[key]) return false;
-		return true;
-	}
-	/**
-	* Check if a value is a React component type (function, class, forwardRef, memo, etc.)
-	*/
-	function isReactComponentType(value) {
-		if (typeof value === "function") return true;
-		if (value && typeof value === "object" && "$$typeof" in value && !react.default.isValidElement(value)) return true;
-		return false;
-	}
-	/**
-	* Internal function to render a slot value as a React element (non-memoized).
-	*/
-	function renderSlotElement(slot, DefaultComponent, props) {
-		if (typeof slot === "string") {
-			const existingClassName = props.className;
-			return react.default.createElement(DefaultComponent, {
-				...props,
-				className: (0, tailwind_merge.twMerge)(existingClassName, slot)
-			});
-		}
-		if (isReactComponentType(slot)) return react.default.createElement(slot, props);
-		if (slot && typeof slot === "object" && !react.default.isValidElement(slot)) return react.default.createElement(DefaultComponent, {
-			...props,
-			...slot
-		});
-		return react.default.createElement(DefaultComponent, props);
-	}
-	/**
-	* Internal memoized wrapper component for renderSlot.
-	* Uses forwardRef to support ref forwarding.
-	*/
-	const MemoizedSlotWrapper = react.default.memo(react.default.forwardRef(function MemoizedSlotWrapper(props, ref) {
-		const { $slot, $component, ...rest } = props;
-		return renderSlotElement($slot, $component, ref !== null ? {
-			...rest,
-			ref
-		} : rest);
-	}), (prev, next) => {
-		if (prev.$slot !== next.$slot) return false;
-		if (prev.$component !== next.$component) return false;
-		const { $slot: _ps, $component: _pc, ...prevRest } = prev;
-		const { $slot: _ns, $component: _nc, ...nextRest } = next;
-		return shallowEqual(prevRest, nextRest);
-	});
-	/**
-	* Renders a slot value as a memoized React element.
-	* Automatically prevents unnecessary re-renders using shallow prop comparison.
-	* Supports ref forwarding.
-	*
-	* @example
-	* renderSlot(customInput, CopilotChatInput, { onSubmit: handleSubmit })
-	*/
-	function renderSlot(slot, DefaultComponent, props) {
-		return react.default.createElement(MemoizedSlotWrapper, {
-			...props,
-			$slot: slot,
-			$component: DefaultComponent
-		});
-	}
-
 //#endregion
 //#region src/v2/components/chat/CopilotChatInput.tsx
 	const SLASH_MENU_MAX_VISIBLE_ITEMS = 5;
 	const SLASH_MENU_ITEM_HEIGHT_PX = 40;
-	function CopilotChatInput({ mode = "input", onSubmitMessage, onStop, isRunning = false, onStartTranscribe, onCancelTranscribe, onFinishTranscribe, onFinishTranscribeWithAudio, onAddFile, onChange, value, toolsMenu, autoFocus = true, positioning = "static", keyboardHeight = 0, containerRef, showDisclaimer, textArea, sendButton, startTranscribeButton, cancelTranscribeButton, finishTranscribeButton, addMenuButton, audioRecorder, disclaimer, children, className, ...props }) {
+	function CopilotChatInput({ mode = "input", onSubmitMessage, onStop, isRunning = false, onStartTranscribe, onCancelTranscribe, onFinishTranscribe, onFinishTranscribeWithAudio, onAddFile, onChange, value, toolsMenu, autoFocus = false, positioning = "static", keyboardHeight = 0, containerRef, showDisclaimer, textArea, sendButton, startTranscribeButton, cancelTranscribeButton, finishTranscribeButton, addMenuButton, audioRecorder, disclaimer, children, className, ...props }) {
 		var _config$labels;
 		const isControlled = value !== void 0;
 		const [internalValue, setInternalValue] = (0, react.useState)(() => value !== null && value !== void 0 ? value : "");
@@ -601,6 +631,7 @@ _radix_ui_react_dropdown_menu = __toESM(_radix_ui_react_dropdown_menu);
 			paddingLeft: 0,
 			paddingRight: 0
 		});
+		const containerCacheRef = (0, react.useRef)(null);
 		const commandItems = (0, react.useMemo)(() => {
 			const entries = [];
 			const seen = /* @__PURE__ */ new Set();
@@ -647,7 +678,7 @@ _radix_ui_react_dropdown_menu = __toESM(_radix_ui_react_dropdown_menu);
 			}
 			if ((config === null || config === void 0 ? void 0 : config.isModalOpen) && !previousModalStateRef.current) {
 				var _inputRef$current;
-				(_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
+				(_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus({ preventScroll: true });
 			}
 			previousModalStateRef.current = config === null || config === void 0 ? void 0 : config.isModalOpen;
 		}, [config === null || config === void 0 ? void 0 : config.isModalOpen, autoFocus]);
@@ -894,6 +925,25 @@ _radix_ui_react_dropdown_menu = __toESM(_radix_ui_react_dropdown_menu);
 				return nextLayout;
 			});
 		}, []);
+		const updateContainerCache = (0, react.useCallback)(() => {
+			const grid = gridRef.current;
+			const addContainer = addButtonContainerRef.current;
+			const actionsContainer = actionsContainerRef.current;
+			if (!grid || !addContainer || !actionsContainer) return null;
+			const gridStyles = window.getComputedStyle(grid);
+			const paddingLeft = parseFloat(gridStyles.paddingLeft) || 0;
+			const paddingRight = parseFloat(gridStyles.paddingRight) || 0;
+			const columnGap = parseFloat(gridStyles.columnGap) || 0;
+			const gridAvailableWidth = grid.clientWidth - paddingLeft - paddingRight;
+			if (gridAvailableWidth <= 0) return null;
+			const addWidth = addContainer.getBoundingClientRect().width;
+			const actionsWidth = actionsContainer.getBoundingClientRect().width;
+			const compactWidth = Math.max(gridAvailableWidth - addWidth - actionsWidth - columnGap * 2, 0);
+			if (compactWidth <= 0) return null;
+			const result = { compactWidth };
+			containerCacheRef.current = result;
+			return result;
+		}, []);
 		const evaluateLayout = (0, react.useCallback)(() => {
 			if (mode !== "input") {
 				updateLayout("compact");
@@ -919,32 +969,33 @@ _radix_ui_react_dropdown_menu = __toESM(_radix_ui_react_dropdown_menu);
 			const renderedMultiline = baseline > 0 ? scrollHeight > baseline + 1 : false;
 			let shouldExpand = hasExplicitBreak || renderedMultiline;
 			if (!shouldExpand) {
-				const gridStyles = window.getComputedStyle(grid);
-				const paddingLeft = parseFloat(gridStyles.paddingLeft) || 0;
-				const paddingRight = parseFloat(gridStyles.paddingRight) || 0;
-				const columnGap = parseFloat(gridStyles.columnGap) || 0;
-				const gridAvailableWidth = grid.clientWidth - paddingLeft - paddingRight;
-				if (gridAvailableWidth > 0) {
-					var _measurementCanvasRef;
-					const addWidth = addContainer.getBoundingClientRect().width;
-					const actionsWidth = actionsContainer.getBoundingClientRect().width;
-					const compactWidth = Math.max(gridAvailableWidth - addWidth - actionsWidth - columnGap * 2, 0);
-					const canvas = (_measurementCanvasRef = measurementCanvasRef.current) !== null && _measurementCanvasRef !== void 0 ? _measurementCanvasRef : document.createElement("canvas");
-					if (!measurementCanvasRef.current) measurementCanvasRef.current = canvas;
-					const context = canvas.getContext("2d");
-					if (context) {
+				var _containerCacheRef$cu;
+				const cache = (_containerCacheRef$cu = containerCacheRef.current) !== null && _containerCacheRef$cu !== void 0 ? _containerCacheRef$cu : updateContainerCache();
+				if (cache && cache.compactWidth > 0) {
+					const compactInnerWidth = Math.max(cache.compactWidth - (measurementsRef.current.paddingLeft || 0) - (measurementsRef.current.paddingRight || 0), 0);
+					if (compactInnerWidth > 0) {
 						const textareaStyles = window.getComputedStyle(textarea);
-						context.font = textareaStyles.font || `${textareaStyles.fontStyle} ${textareaStyles.fontVariant} ${textareaStyles.fontWeight} ${textareaStyles.fontSize}/${textareaStyles.lineHeight} ${textareaStyles.fontFamily}`;
-						const compactInnerWidth = Math.max(compactWidth - (measurementsRef.current.paddingLeft || 0) - (measurementsRef.current.paddingRight || 0), 0);
-						if (compactInnerWidth > 0) {
-							const lines = resolvedValue.length > 0 ? resolvedValue.split("\n") : [""];
-							let longestWidth = 0;
-							for (const line of lines) {
-								const metrics = context.measureText(line || " ");
-								if (metrics.width > longestWidth) longestWidth = metrics.width;
-							}
-							if (longestWidth > compactInnerWidth) shouldExpand = true;
+						let font = textareaStyles.font;
+						if (!font) {
+							const { fontStyle, fontVariant, fontWeight, fontSize, lineHeight, fontFamily } = textareaStyles;
+							if (fontSize && fontFamily) font = `${fontStyle} ${fontVariant} ${fontWeight} ${fontSize}/${lineHeight} ${fontFamily}`;
 						}
+						if (font === null || font === void 0 ? void 0 : font.trim()) {
+							var _measurementCanvasRef;
+							const canvas = (_measurementCanvasRef = measurementCanvasRef.current) !== null && _measurementCanvasRef !== void 0 ? _measurementCanvasRef : document.createElement("canvas");
+							if (!measurementCanvasRef.current) measurementCanvasRef.current = canvas;
+							const context = canvas.getContext("2d");
+							if (context) {
+								context.font = font;
+								const lines = resolvedValue.length > 0 ? resolvedValue.split("\n") : [""];
+								let longestWidth = 0;
+								for (const line of lines) {
+									const metrics = context.measureText(line || " ");
+									if (metrics.width > longestWidth) longestWidth = metrics.width;
+								}
+								if (longestWidth > compactInnerWidth) shouldExpand = true;
+							} else if (process.env.NODE_ENV !== "production") console.warn("[CopilotChatInput] canvas.getContext('2d') returned null. Text-width-based expansion will be unavailable.");
+						} else if (process.env.NODE_ENV !== "production") console.warn("[CopilotChatInput] Could not resolve textarea font for layout measurement. Text-width-based expansion will be skipped until the next evaluation.");
 					}
 				}
 			}
@@ -954,6 +1005,7 @@ _radix_ui_react_dropdown_menu = __toESM(_radix_ui_react_dropdown_menu);
 			ensureMeasurements,
 			mode,
 			resolvedValue,
+			updateContainerCache,
 			updateLayout
 		]);
 		(0, react.useLayoutEffect)(() => {
@@ -966,11 +1018,17 @@ _radix_ui_react_dropdown_menu = __toESM(_radix_ui_react_dropdown_menu);
 			const addContainer = addButtonContainerRef.current;
 			const actionsContainer = actionsContainerRef.current;
 			if (!textarea || !grid || !addContainer || !actionsContainer) return;
-			const scheduleEvaluation = () => {
+			const containerTargets = new Set([
+				grid,
+				addContainer,
+				actionsContainer
+			]);
+			const scheduleEvaluation = (invalidateCache) => {
 				if (ignoreResizeRef.current) {
 					ignoreResizeRef.current = false;
 					return;
 				}
+				if (invalidateCache) containerCacheRef.current = null;
 				if (typeof window === "undefined") {
 					evaluateLayout();
 					return;
@@ -981,8 +1039,13 @@ _radix_ui_react_dropdown_menu = __toESM(_radix_ui_react_dropdown_menu);
 					evaluateLayout();
 				});
 			};
-			const observer = new ResizeObserver(() => {
-				scheduleEvaluation();
+			const observer = new ResizeObserver((entries) => {
+				let shouldInvalidate = false;
+				for (const entry of entries) if (containerTargets.has(entry.target)) {
+					shouldInvalidate = true;
+					break;
+				}
+				scheduleEvaluation(shouldInvalidate);
 			});
 			observer.observe(grid);
 			observer.observe(addContainer);
@@ -1133,6 +1196,8 @@ _radix_ui_react_dropdown_menu = __toESM(_radix_ui_react_dropdown_menu);
 			var _config$labels3;
 			const config = useCopilotChatConfiguration();
 			const labels = (_config$labels3 = config === null || config === void 0 ? void 0 : config.labels) !== null && _config$labels3 !== void 0 ? _config$labels3 : CopilotChatDefaultLabels;
+			const [mounted, setMounted] = (0, react.useState)(false);
+			(0, react.useEffect)(() => setMounted(true), []);
 			const menuItems = (0, react.useMemo)(() => {
 				const items = [];
 				if (onAddFile) items.push({
@@ -1163,26 +1228,28 @@ _radix_ui_react_dropdown_menu = __toESM(_radix_ui_react_dropdown_menu);
 			}), []);
 			const hasMenuItems = menuItems.length > 0;
 			const isDisabled = disabled || !hasMenuItems;
+			const button = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
+				type: "button",
+				"data-testid": "copilot-add-menu-button",
+				variant: "chatInputToolbarSecondary",
+				size: "chatInputToolbarIcon",
+				className: (0, tailwind_merge.twMerge)("cpk:ml-1", className),
+				disabled: isDisabled,
+				...props,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Plus, { className: "cpk:size-[20px]" })
+			});
+			if (!mounted) return button;
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DropdownMenu, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Tooltip, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipTrigger, {
 				asChild: true,
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DropdownMenuTrigger, {
 					asChild: true,
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
-						type: "button",
-						"data-testid": "copilot-add-menu-button",
-						variant: "chatInputToolbarSecondary",
-						size: "chatInputToolbarIcon",
-						className: (0, tailwind_merge.twMerge)("cpk:ml-1", className),
-						disabled: isDisabled,
-						...props,
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Plus, { className: "cpk:size-[20px]" })
-					})
+					children: button
 				})
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipContent, {
 				side: "bottom",
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
 					className: "cpk:flex cpk:items-center cpk:gap-1 cpk:text-xs cpk:font-medium",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: "Add files and more" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("code", {
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: "Add attachments" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("code", {
 						className: "cpk:rounded cpk:bg-[#4a4a4a] cpk:px-1 cpk:py-[1px] cpk:font-mono cpk:text-[11px] cpk:text-white cpk:dark:bg-[#e0e0e0] cpk:dark:text-black",
 						children: "/"
 					})]
@@ -1199,24 +1266,10 @@ _radix_ui_react_dropdown_menu = __toESM(_radix_ui_react_dropdown_menu);
 			const config = useCopilotChatConfiguration();
 			const labels = (_config$labels4 = config === null || config === void 0 ? void 0 : config.labels) !== null && _config$labels4 !== void 0 ? _config$labels4 : CopilotChatDefaultLabels;
 			(0, react.useImperativeHandle)(ref, () => internalTextareaRef.current);
-			(0, react.useEffect)(() => {
-				const textarea = internalTextareaRef.current;
-				if (!textarea) return;
-				const handleFocus = () => {
-					setTimeout(() => {
-						textarea.scrollIntoView({
-							behavior: "smooth",
-							block: "nearest"
-						});
-					}, 300);
-				};
-				textarea.addEventListener("focus", handleFocus);
-				return () => textarea.removeEventListener("focus", handleFocus);
-			}, []);
 			(0, react.useEffect)(() => {
 				if (autoFocus) {
 					var _internalTextareaRef$;
-					(_internalTextareaRef$ = internalTextareaRef.current) === null || _internalTextareaRef$ === void 0 || _internalTextareaRef$.focus();
+					(_internalTextareaRef$ = internalTextareaRef.current) === null || _internalTextareaRef$ === void 0 || _internalTextareaRef$.focus({ preventScroll: true });
 				}
 			}, [autoFocus]);
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("textarea", {
@@ -1935,8 +1988,417 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 		});
 	};
 
+//#endregion
+//#region src/v2/providers/SandboxFunctionsContext.ts
+	const SandboxFunctionsContext = (0, react.createContext)([]);
+	function useSandboxFunctions() {
+		return (0, react.useContext)(SandboxFunctionsContext);
+	}
+
+//#endregion
+//#region src/v2/lib/processPartialHtml.ts
+/**
+	* Extracts all complete `<style>` blocks from the raw HTML.
+	* Returns the concatenated style tags, suitable for injection into `<head>`.
+	*/
+	function extractCompleteStyles(html) {
+		const matches = html.match(/<style\b[^>]*>[\s\S]*?<\/style>/gi);
+		return matches ? matches.join("") : "";
+	}
+	/**
+	* Processes raw accumulated HTML for safe preview via innerHTML injection.
+	* Pure function, no DOM dependencies.
+	*
+	* Pipeline (order matters):
+	* 1. Strip incomplete tag at end
+	* 2. Strip complete <style>, <script>, and <head> blocks
+	* 3. Strip incomplete <style>/<script>/<head> blocks
+	* 4. Strip incomplete HTML entities
+	* 5. Extract body content (or use full string if no <body>)
+	*/
+	function processPartialHtml(html) {
+		let result = html;
+		result = result.replace(/<[^>]*$/, "");
+		result = result.replace(/<(style|script|head)\b[^>]*>[\s\S]*?<\/\1>/gi, "");
+		result = result.replace(/<(style|script|head)\b[^>]*>[\s\S]*$/gi, "");
+		result = result.replace(/&[a-zA-Z0-9#]*$/, "");
+		const bodyMatch = result.match(/<body[^>]*>([\s\S]*)/i);
+		if (bodyMatch) {
+			result = bodyMatch[1];
+			result = result.replace(/<\/body>[\s\S]*/i, "");
+		}
+		return result;
+	}
+
+//#endregion
+//#region src/v2/components/OpenGenerativeUIRenderer.tsx
+	const OpenGenerativeUIActivityType = "open-generative-ui";
+	const OpenGenerativeUIContentSchema = zod.z.object({
+		initialHeight: zod.z.number().optional(),
+		generating: zod.z.boolean().optional(),
+		css: zod.z.string().optional(),
+		cssComplete: zod.z.boolean().optional(),
+		html: zod.z.array(zod.z.string()).optional(),
+		htmlComplete: zod.z.boolean().optional(),
+		jsFunctions: zod.z.string().optional(),
+		jsFunctionsComplete: zod.z.boolean().optional(),
+		jsExpressions: zod.z.array(zod.z.string()).optional(),
+		jsExpressionsComplete: zod.z.boolean().optional()
+	});
+	/**
+	* Schema for the generateSandboxedUi tool call arguments.
+	* Used by the frontend tool renderer to display placeholder messages.
+	*/
+	const GenerateSandboxedUiArgsSchema = zod.z.object({
+		initialHeight: zod.z.number().optional(),
+		placeholderMessages: zod.z.array(zod.z.string()).optional(),
+		css: zod.z.string().optional(),
+		html: zod.z.string().optional(),
+		jsFunctions: zod.z.string().optional(),
+		jsExpressions: zod.z.array(zod.z.string()).optional()
+	});
+	const THROTTLE_MS = 1e3;
+	/**
+	* Returns true when the inner component should re-render immediately
+	* (no throttle delay).
+	*/
+	function shouldFlushImmediately(prev, next) {
+		var _next$jsExpressions$l, _next$jsExpressions, _prev$jsExpressions$l, _prev$jsExpressions, _next$html, _prev$html;
+		if (next.cssComplete && (!prev || !prev.cssComplete)) return true;
+		if (next.htmlComplete) return true;
+		if (next.generating === false) return true;
+		if (next.jsFunctions && (!prev || !prev.jsFunctions)) return true;
+		if (((_next$jsExpressions$l = (_next$jsExpressions = next.jsExpressions) === null || _next$jsExpressions === void 0 ? void 0 : _next$jsExpressions.length) !== null && _next$jsExpressions$l !== void 0 ? _next$jsExpressions$l : 0) > ((_prev$jsExpressions$l = prev === null || prev === void 0 || (_prev$jsExpressions = prev.jsExpressions) === null || _prev$jsExpressions === void 0 ? void 0 : _prev$jsExpressions.length) !== null && _prev$jsExpressions$l !== void 0 ? _prev$jsExpressions$l : 0)) return true;
+		if (((_next$html = next.html) === null || _next$html === void 0 ? void 0 : _next$html.length) && (!prev || !((_prev$html = prev.html) === null || _prev$html === void 0 ? void 0 : _prev$html.length))) return true;
+		return false;
+	}
+	/**
+	* Outer wrapper — absorbs every parent re-render but only forwards
+	* throttled content snapshots to the memoized inner component.
+	*/
+	const OpenGenerativeUIActivityRenderer = function OpenGenerativeUIActivityRenderer({ content }) {
+		const latestContentRef = (0, react.useRef)(content);
+		latestContentRef.current = content;
+		const [throttledContent, setThrottledContent] = (0, react.useState)(content);
+		const throttledContentRef = (0, react.useRef)(throttledContent);
+		const timerRef = (0, react.useRef)(null);
+		if (throttledContentRef.current !== content) {
+			if (shouldFlushImmediately(throttledContentRef.current, content)) {
+				if (timerRef.current !== null) {
+					clearTimeout(timerRef.current);
+					timerRef.current = null;
+				}
+				throttledContentRef.current = content;
+				setThrottledContent(content);
+			}
+		}
+		const flush = (0, react.useCallback)(() => {
+			timerRef.current = null;
+			const latest = latestContentRef.current;
+			throttledContentRef.current = latest;
+			setThrottledContent(latest);
+		}, []);
+		(0, react.useEffect)(() => {
+			if (throttledContentRef.current === content) return;
+			if (timerRef.current === null) timerRef.current = setTimeout(flush, THROTTLE_MS);
+		}, [content, flush]);
+		(0, react.useEffect)(() => {
+			return () => {
+				if (timerRef.current !== null) clearTimeout(timerRef.current);
+			};
+		}, []);
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(OpenGenerativeUIActivityRendererInner, { content: throttledContent });
+	};
+	function ensureHead(html) {
+		if (/<head[\s>]/i.test(html)) return html;
+		return `<head></head>${html}`;
+	}
+	function injectCssIntoHtml(html, css) {
+		const headCloseIdx = html.indexOf("</head>");
+		if (headCloseIdx !== -1) return html.slice(0, headCloseIdx) + `<style>${css}</style>` + html.slice(headCloseIdx);
+		return `<head><style>${css}</style></head>${html}`;
+	}
+	const OpenGenerativeUIActivityRendererInner = react.default.memo(function OpenGenerativeUIActivityRendererInner({ content }) {
+		var _content$initialHeigh, _content$html, _content$html2, _content$jsExpression;
+		const initialHeight = (_content$initialHeigh = content.initialHeight) !== null && _content$initialHeigh !== void 0 ? _content$initialHeigh : 200;
+		const [autoHeight, setAutoHeight] = (0, react.useState)(null);
+		const sandboxFunctions = useSandboxFunctions();
+		const localApi = (0, react.useMemo)(() => {
+			const api = {};
+			for (const fn of sandboxFunctions) api[fn.name] = fn.handler;
+			return api;
+		}, [sandboxFunctions]);
+		const fullHtml = content.htmlComplete && ((_content$html = content.html) === null || _content$html === void 0 ? void 0 : _content$html.length) ? content.html.join("") : void 0;
+		const css = content.cssComplete ? content.css : void 0;
+		const cssReady = !!content.cssComplete;
+		const partialHtml = !content.htmlComplete && ((_content$html2 = content.html) === null || _content$html2 === void 0 ? void 0 : _content$html2.length) ? content.html.join("") : void 0;
+		const previewBody = partialHtml ? processPartialHtml(partialHtml) : void 0;
+		const previewStyles = partialHtml ? extractCompleteStyles(partialHtml) : "";
+		const hasPreview = cssReady && !!(previewBody === null || previewBody === void 0 ? void 0 : previewBody.trim());
+		const hasVisibleSandbox = !!fullHtml || hasPreview;
+		const containerRef = (0, react.useRef)(null);
+		const sandboxRef = (0, react.useRef)(null);
+		const previewSandboxRef = (0, react.useRef)(null);
+		const previewReadyRef = (0, react.useRef)(false);
+		const sandboxReadyRef = (0, react.useRef)(false);
+		const executedIndexRef = (0, react.useRef)(0);
+		const pendingQueueRef = (0, react.useRef)([]);
+		const jsFunctionsInjectedRef = (0, react.useRef)(false);
+		(0, react.useEffect)(() => {
+			const container = containerRef.current;
+			if (!container || fullHtml || !hasPreview || previewSandboxRef.current) return;
+			let cancelled = false;
+			import("@jetbrains/websandbox").then((mod) => {
+				var _mod$default$default, _mod$default;
+				if (cancelled) return;
+				const sandbox = ((_mod$default$default = (_mod$default = mod.default) === null || _mod$default === void 0 ? void 0 : _mod$default.default) !== null && _mod$default$default !== void 0 ? _mod$default$default : mod.default).create({}, {
+					frameContainer: container,
+					frameContent: "<head></head><body></body>",
+					allowAdditionalAttributes: ""
+				});
+				previewSandboxRef.current = sandbox;
+				sandbox.iframe.style.width = "100%";
+				sandbox.iframe.style.height = "100%";
+				sandbox.iframe.style.border = "none";
+				sandbox.iframe.style.backgroundColor = "transparent";
+				sandbox.promise.then(() => {
+					if (cancelled) return;
+					previewReadyRef.current = true;
+					sandbox.run(`
+            var s = document.createElement('style');
+            s.textContent = 'html, body { overflow: hidden !important; }';
+            document.head.appendChild(s);
+          `);
+					const headParts = [];
+					if (css) headParts.push(`<style>${css}</style>`);
+					if (previewStyles) headParts.push(previewStyles);
+					if (headParts.length) sandbox.run(`document.head.innerHTML = ${JSON.stringify(headParts.join(""))}`);
+					if (previewBody) sandbox.run(`document.body.innerHTML = ${JSON.stringify(previewBody)}`);
+				});
+			}).catch((err) => {
+				console.error("[OpenGenerativeUI] Failed to load sandbox module:", err);
+			});
+			return () => {
+				cancelled = true;
+			};
+		}, [hasPreview, fullHtml]);
+		(0, react.useEffect)(() => {
+			if (!previewSandboxRef.current || !previewReadyRef.current) return;
+			const headParts = [];
+			if (css) headParts.push(`<style>${css}</style>`);
+			if (previewStyles) headParts.push(previewStyles);
+			if (headParts.length) previewSandboxRef.current.run(`document.head.innerHTML = ${JSON.stringify(headParts.join(""))}`);
+			if (!previewBody) return;
+			previewSandboxRef.current.run(`document.body.innerHTML = ${JSON.stringify(previewBody)}`);
+		}, [
+			previewBody,
+			previewStyles,
+			css
+		]);
+		(0, react.useEffect)(() => {
+			const container = containerRef.current;
+			if (!container || !fullHtml) return;
+			if (previewSandboxRef.current) {
+				previewSandboxRef.current.destroy();
+				previewSandboxRef.current = null;
+				previewReadyRef.current = false;
+			}
+			let cancelled = false;
+			executedIndexRef.current = 0;
+			jsFunctionsInjectedRef.current = false;
+			sandboxReadyRef.current = false;
+			pendingQueueRef.current = [];
+			const htmlContent = css ? injectCssIntoHtml(fullHtml, css) : fullHtml;
+			import("@jetbrains/websandbox").then((mod) => {
+				var _mod$default$default2, _mod$default2;
+				if (cancelled) return;
+				const sandbox = ((_mod$default$default2 = (_mod$default2 = mod.default) === null || _mod$default2 === void 0 ? void 0 : _mod$default2.default) !== null && _mod$default$default2 !== void 0 ? _mod$default$default2 : mod.default).create(localApi, {
+					frameContainer: container,
+					frameContent: ensureHead(htmlContent),
+					allowAdditionalAttributes: ""
+				});
+				sandboxRef.current = sandbox;
+				sandbox.iframe.style.width = "100%";
+				sandbox.iframe.style.height = "100%";
+				sandbox.iframe.style.border = "none";
+				sandbox.iframe.style.backgroundColor = "transparent";
+				sandbox.promise.then(() => {
+					if (cancelled) return;
+					sandboxReadyRef.current = true;
+					sandbox.run(`
+            var s = document.createElement('style');
+            s.textContent = 'html, body { overflow: hidden !important; }';
+            document.head.appendChild(s);
+          `);
+					const queue = pendingQueueRef.current;
+					pendingQueueRef.current = [];
+					for (const code of queue) sandbox.run(code);
+				});
+			}).catch((err) => {
+				console.error("[OpenGenerativeUI] Failed to load sandbox module:", err);
+			});
+			return () => {
+				cancelled = true;
+				if (previewSandboxRef.current) {
+					previewSandboxRef.current.destroy();
+					previewSandboxRef.current = null;
+					previewReadyRef.current = false;
+				}
+				if (sandboxRef.current) {
+					sandboxRef.current.destroy();
+					sandboxRef.current = null;
+				}
+				sandboxReadyRef.current = false;
+				setAutoHeight(null);
+			};
+		}, [
+			fullHtml,
+			css,
+			localApi
+		]);
+		(0, react.useEffect)(() => {
+			if (!content.jsFunctions || jsFunctionsInjectedRef.current) return;
+			jsFunctionsInjectedRef.current = true;
+			const sandbox = sandboxRef.current;
+			if (sandboxReadyRef.current && sandbox) sandbox.run(content.jsFunctions);
+			else pendingQueueRef.current.push(content.jsFunctions);
+		}, [content.jsFunctions]);
+		(0, react.useEffect)(() => {
+			const expressions = content.jsExpressions;
+			if (!expressions || expressions.length === 0) return;
+			const startIndex = executedIndexRef.current;
+			if (startIndex >= expressions.length) return;
+			const newExprs = expressions.slice(startIndex);
+			executedIndexRef.current = expressions.length;
+			const sandbox = sandboxRef.current;
+			if (sandboxReadyRef.current && sandbox) (async () => {
+				for (const expr of newExprs) await sandbox.run(expr);
+			})();
+			else pendingQueueRef.current.push(...newExprs);
+		}, [(_content$jsExpression = content.jsExpressions) === null || _content$jsExpression === void 0 ? void 0 : _content$jsExpression.length]);
+		const generationDone = content.generating === false;
+		(0, react.useEffect)(() => {
+			const sandbox = sandboxRef.current;
+			if (!generationDone || !sandbox) return;
+			let handled = false;
+			const onMessage = (e) => {
+				var _e$data;
+				if (handled) return;
+				if (e.source === sandbox.iframe.contentWindow && ((_e$data = e.data) === null || _e$data === void 0 ? void 0 : _e$data.type) === "__ck_resize") {
+					handled = true;
+					setAutoHeight(e.data.height);
+					window.removeEventListener("message", onMessage);
+				}
+			};
+			window.addEventListener("message", onMessage);
+			const measureOnce = `
+        (function() {
+          var s = document.createElement('style');
+          s.textContent = 'body { height: auto !important; min-height: 0 !important; }';
+          document.head.appendChild(s);
+          var h = document.body.scrollHeight;
+          var cs = getComputedStyle(document.body);
+          h += parseFloat(cs.marginTop) || 0;
+          h += parseFloat(cs.marginBottom) || 0;
+          s.remove();
+          parent.postMessage({ type: "__ck_resize", height: Math.ceil(h) }, "*");
+        })();
+      `;
+			if (sandboxReadyRef.current) sandbox.run(measureOnce);
+			else pendingQueueRef.current.push(measureOnce);
+			return () => {
+				window.removeEventListener("message", onMessage);
+			};
+		}, [generationDone]);
+		const height = autoHeight !== null && autoHeight !== void 0 ? autoHeight : initialHeight;
+		const isGenerating = content.generating !== false;
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			ref: containerRef,
+			style: {
+				position: "relative",
+				width: "100%",
+				height: `${height}px`,
+				borderRadius: "8px",
+				backgroundColor: hasVisibleSandbox ? "transparent" : "#f5f5f5",
+				border: hasVisibleSandbox ? "none" : "1px solid #e0e0e0",
+				display: hasVisibleSandbox ? "block" : "flex",
+				alignItems: hasVisibleSandbox ? void 0 : "center",
+				justifyContent: hasVisibleSandbox ? void 0 : "center",
+				overflow: "hidden"
+			},
+			children: isGenerating && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				style: {
+					position: "absolute",
+					inset: 0,
+					zIndex: 10,
+					pointerEvents: "all",
+					backgroundColor: "rgba(255, 255, 255, 0.5)",
+					display: "flex",
+					alignItems: "center",
+					justifyContent: "center"
+				},
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+					width: "48",
+					height: "48",
+					viewBox: "0 0 24 24",
+					fill: "none",
+					style: { animation: "ck-spin 1s linear infinite" },
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+						cx: "12",
+						cy: "12",
+						r: "10",
+						stroke: "#e0e0e0",
+						strokeWidth: "3"
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+						d: "M12 2a10 10 0 0 1 10 10",
+						stroke: "#999",
+						strokeWidth: "3",
+						strokeLinecap: "round"
+					})]
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("style", { children: `@keyframes ck-spin { to { transform: rotate(360deg) } }` })]
+			})
+		});
+	}, (prev, next) => prev.content === next.content);
+	/**
+	* Frontend tool renderer for generateSandboxedUi.
+	* Displays placeholder messages while the UI is being generated.
+	*/
+	const OpenGenerativeUIToolRenderer = function OpenGenerativeUIToolRenderer(props) {
+		var _messages$visibleMess;
+		const [visibleMessageIndex, setVisibleMessageIndex] = (0, react.useState)(0);
+		const prevMessageCountRef = (0, react.useRef)(0);
+		const messages = props.args.placeholderMessages;
+		(0, react.useEffect)(() => {
+			if (!messages || messages.length === 0) return;
+			if (messages.length !== prevMessageCountRef.current) {
+				prevMessageCountRef.current = messages.length;
+				setVisibleMessageIndex(messages.length - 1);
+			}
+			if (props.status === _copilotkit_core.ToolCallStatus.Complete) return;
+			const timer = setInterval(() => {
+				setVisibleMessageIndex((i) => (i + 1) % messages.length);
+			}, 5e3);
+			return () => clearInterval(timer);
+		}, [messages === null || messages === void 0 ? void 0 : messages.length, props.status]);
+		if (props.status === _copilotkit_core.ToolCallStatus.Complete) return null;
+		if (!messages || messages.length === 0) return null;
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			style: {
+				padding: "8px 12px",
+				color: "#999",
+				fontSize: "14px"
+			},
+			children: (_messages$visibleMess = messages[visibleMessageIndex]) !== null && _messages$visibleMess !== void 0 ? _messages$visibleMess : messages[0]
+		});
+	};
+
 //#endregion
 //#region src/v2/a2ui/A2UIMessageRenderer.tsx
+/**
+	* The container key used to wrap A2UI operations for explicit detection.
+	* Must match A2UI_OPERATIONS_KEY in @ag-ui/a2ui-middleware and copilotkit.a2ui (Python).
+	*/
+	const A2UI_OPERATIONS_KEY = "a2ui_operations";
 	let initialized = false;
 	function ensureInitialized() {
 		if (!initialized) {
@@ -1946,25 +2408,23 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 		}
 	}
 	function createA2UIMessageRenderer(options) {
-		const { theme } = options;
+		const { theme, catalog, loadingComponent } = options;
 		return {
 			activityType: "a2ui-surface",
 			content: zod.z.any(),
 			render: ({ content, agent }) => {
 				ensureInitialized();
 				const [operations, setOperations] = (0, react.useState)([]);
-				const lastSignatureRef = (0, react.useRef)(null);
 				const { copilotkit } = useCopilotKit();
+				const lastContentRef = (0, react.useRef)(null);
 				(0, react.useEffect)(() => {
-					if (!content || !Array.isArray(content.operations)) {
-						lastSignatureRef.current = null;
+					if (content === lastContentRef.current) return;
+					lastContentRef.current = content;
+					const incoming = content === null || content === void 0 ? void 0 : content[A2UI_OPERATIONS_KEY];
+					if (!content || !Array.isArray(incoming)) {
 						setOperations([]);
 						return;
 					}
-					const incoming = content.operations;
-					const signature = stringifyOperations(incoming);
-					if (signature && signature === lastSignatureRef.current) return;
-					lastSignatureRef.current = signature;
 					setOperations(incoming);
 				}, [content]);
 				const groupedOperations = (0, react.useMemo)(() => {
@@ -1977,7 +2437,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 					}
 					return groups;
 				}, [operations]);
-				if (!groupedOperations.size) return null;
+				if (!groupedOperations.size) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(loadingComponent !== null && loadingComponent !== void 0 ? loadingComponent : DefaultA2UILoading, {});
 				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					className: "cpk:flex cpk:min-h-0 cpk:flex-1 cpk:flex-col cpk:gap-6 cpk:overflow-auto cpk:py-6",
 					children: Array.from(groupedOperations.entries()).map(([surfaceId, ops]) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ReactSurfaceHost, {
@@ -1985,7 +2445,8 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 						operations: ops,
 						theme,
 						agent,
-						copilotkit
+						copilotkit,
+						catalog
 					}, surfaceId))
 				});
 			}
@@ -1995,15 +2456,15 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 	* Renders a single A2UI surface using the React renderer.
 	* Wraps A2UIProvider + A2UIRenderer and bridges actions back to CopilotKit.
 	*/
-	function ReactSurfaceHost({ surfaceId, operations, theme, agent, copilotkit }) {
+	function ReactSurfaceHost({ surfaceId, operations, theme, agent, copilotkit, catalog }) {
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: "cpk:flex cpk:w-full cpk:flex-none cpk:flex-col cpk:gap-4",
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_copilotkit_a2ui_renderer.A2UIProvider, {
 				onAction: (0, react.useCallback)(async (message) => {
 					if (!agent) return;
+					message.userAction;
 					try {
 						var _copilotkit$propertie;
-						console.info("[A2UI] Action dispatched", message.userAction);
 						copilotkit.setProperties({
 							...(_copilotkit$propertie = copilotkit.properties) !== null && _copilotkit$propertie !== void 0 ? _copilotkit$propertie : {},
 							a2uiAction: message
@@ -2017,48 +2478,503 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 					}
 				}, [agent, copilotkit]),
 				theme,
+				catalog,
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SurfaceMessageProcessor, {
 					surfaceId,
 					operations
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_copilotkit_a2ui_renderer.A2UIRenderer, {
-					surfaceId,
-					className: "cpk:flex cpk:flex-1"
-				})]
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(A2UISurfaceOrError, { surfaceId })]
 			})
 		});
 	}
 	/**
+	* Renders the A2UI surface, or an error message if processing failed.
+	* Must be a child of A2UIProvider to access the error state.
+	*/
+	function A2UISurfaceOrError({ surfaceId }) {
+		const error = (0, _copilotkit_a2ui_renderer.useA2UIError)();
+		if (error) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "cpk:rounded-lg cpk:border cpk:border-red-200 cpk:bg-red-50 cpk:p-3 cpk:text-sm cpk:text-red-700",
+			children: ["A2UI render error: ", error]
+		});
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_copilotkit_a2ui_renderer.A2UIRenderer, {
+			surfaceId,
+			className: "cpk:flex cpk:flex-1"
+		});
+	}
+	/**
 	* Processes A2UI operations into the provider's message processor.
 	* Must be a child of A2UIProvider to access the actions context.
 	*/
 	function SurfaceMessageProcessor({ surfaceId, operations }) {
-		const { processMessages } = (0, _copilotkit_a2ui_renderer.useA2UIActions)();
-		const lastProcessedRef = (0, react.useRef)("");
+		const { processMessages, getSurface } = (0, _copilotkit_a2ui_renderer.useA2UIActions)();
+		const lastHashRef = (0, react.useRef)("");
 		(0, react.useEffect)(() => {
-			const key = `${surfaceId}-${JSON.stringify(operations)}`;
-			if (key === lastProcessedRef.current) return;
-			lastProcessedRef.current = key;
-			processMessages(operations);
+			const hash = JSON.stringify(operations);
+			if (hash === lastHashRef.current) return;
+			lastHashRef.current = hash;
+			processMessages(getSurface(surfaceId) ? operations.filter((op) => !(op === null || op === void 0 ? void 0 : op.createSurface)) : operations);
 		}, [
 			processMessages,
+			getSurface,
 			surfaceId,
 			operations
 		]);
 		return null;
 	}
-	function getOperationSurfaceId(operation) {
-		var _ref, _ref2, _ref3, _operation$beginRende, _operation$beginRende2, _operation$surfaceUpd, _operation$dataModelU, _operation$deleteSurf;
-		if (!operation || typeof operation !== "object") return null;
-		if (typeof operation.surfaceId === "string") return operation.surfaceId;
-		return (_ref = (_ref2 = (_ref3 = (_operation$beginRende = operation === null || operation === void 0 || (_operation$beginRende2 = operation.beginRendering) === null || _operation$beginRende2 === void 0 ? void 0 : _operation$beginRende2.surfaceId) !== null && _operation$beginRende !== void 0 ? _operation$beginRende : operation === null || operation === void 0 || (_operation$surfaceUpd = operation.surfaceUpdate) === null || _operation$surfaceUpd === void 0 ? void 0 : _operation$surfaceUpd.surfaceId) !== null && _ref3 !== void 0 ? _ref3 : operation === null || operation === void 0 || (_operation$dataModelU = operation.dataModelUpdate) === null || _operation$dataModelU === void 0 ? void 0 : _operation$dataModelU.surfaceId) !== null && _ref2 !== void 0 ? _ref2 : operation === null || operation === void 0 || (_operation$deleteSurf = operation.deleteSurface) === null || _operation$deleteSurf === void 0 ? void 0 : _operation$deleteSurf.surfaceId) !== null && _ref !== void 0 ? _ref : null;
-	}
-	function stringifyOperations(ops) {
-		try {
-			return JSON.stringify(ops);
-		} catch (error) {
-			return null;
-		}
-	}
+	/**
+	* Default loading component shown while an A2UI surface is generating.
+	* Displays an animated shimmer skeleton.
+	*/
+	function DefaultA2UILoading() {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "cpk:flex cpk:flex-col cpk:gap-3 cpk:rounded-xl cpk:border cpk:border-gray-100 cpk:bg-gray-50/50 cpk:p-5",
+			style: { minHeight: 120 },
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "cpk:flex cpk:items-center cpk:gap-2",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "cpk:h-3 cpk:w-3 cpk:rounded-full cpk:bg-gray-200",
+						style: { animation: "cpk-a2ui-pulse 1.5s ease-in-out infinite" }
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "cpk:text-xs cpk:font-medium cpk:text-gray-400",
+						children: "Generating UI..."
+					})]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "cpk:flex cpk:flex-col cpk:gap-2",
+					children: [
+						.8,
+						.6,
+						.4
+					].map((width, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "cpk:h-3 cpk:rounded cpk:bg-gray-200/70",
+						style: {
+							width: `${width * 100}%`,
+							animation: `cpk-a2ui-pulse 1.5s ease-in-out ${i * .15}s infinite`
+						}
+					}, i))
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("style", { children: `
+        @keyframes cpk-a2ui-pulse {
+          0%, 100% { opacity: 0.4; }
+          50% { opacity: 1; }
+        }
+      ` })
+			]
+		});
+	}
+	function getOperationSurfaceId(operation) {
+		var _ref, _ref2, _ref3, _operation$createSurf, _operation$createSurf2, _operation$updateComp, _operation$updateData, _operation$deleteSurf;
+		if (!operation || typeof operation !== "object") return null;
+		if (typeof operation.surfaceId === "string") return operation.surfaceId;
+		return (_ref = (_ref2 = (_ref3 = (_operation$createSurf = operation === null || operation === void 0 || (_operation$createSurf2 = operation.createSurface) === null || _operation$createSurf2 === void 0 ? void 0 : _operation$createSurf2.surfaceId) !== null && _operation$createSurf !== void 0 ? _operation$createSurf : operation === null || operation === void 0 || (_operation$updateComp = operation.updateComponents) === null || _operation$updateComp === void 0 ? void 0 : _operation$updateComp.surfaceId) !== null && _ref3 !== void 0 ? _ref3 : operation === null || operation === void 0 || (_operation$updateData = operation.updateDataModel) === null || _operation$updateData === void 0 ? void 0 : _operation$updateData.surfaceId) !== null && _ref2 !== void 0 ? _ref2 : operation === null || operation === void 0 || (_operation$deleteSurf = operation.deleteSurface) === null || _operation$deleteSurf === void 0 ? void 0 : _operation$deleteSurf.surfaceId) !== null && _ref !== void 0 ? _ref : null;
+	}
+
+//#endregion
+//#region src/v2/types/defineToolCallRenderer.ts
+	function defineToolCallRenderer(def) {
+		const argsSchema = def.name === "*" && !def.args ? zod.z.any() : def.args;
+		return {
+			name: def.name,
+			args: argsSchema,
+			render: def.render,
+			...def.agentId ? { agentId: def.agentId } : {}
+		};
+	}
+
+//#endregion
+//#region src/v2/a2ui/A2UIToolCallRenderer.tsx
+/**
+	* Tool name used by the dynamic A2UI generation secondary LLM.
+	* This renderer is auto-registered when A2UI is enabled.
+	*/
+	const RENDER_A2UI_TOOL_NAME = "render_a2ui";
+	/**
+	* Built-in progress indicator for dynamic A2UI generation.
+	* Shows a skeleton wireframe that progressively reveals as tokens stream in.
+	*
+	* Registered automatically when A2UI is enabled. Users can override by
+	* providing their own `useRenderTool({ name: "render_a2ui", ... })`.
+	*/
+	function A2UIProgressIndicator({ parameters }) {
+		const lastRef = (0, react.useRef)({
+			time: 0,
+			tokens: 0
+		});
+		const now = Date.now();
+		let { tokens } = lastRef.current;
+		if (now - lastRef.current.time > 200) {
+			const chars = JSON.stringify(parameters !== null && parameters !== void 0 ? parameters : {}).length;
+			tokens = Math.round(chars / 4);
+			lastRef.current = {
+				time: now,
+				tokens
+			};
+		}
+		const phase = tokens < 50 ? 0 : tokens < 200 ? 1 : tokens < 400 ? 2 : 3;
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			style: {
+				margin: "12px 0",
+				maxWidth: 320
+			},
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					style: {
+						position: "relative",
+						overflow: "hidden",
+						borderRadius: 12,
+						border: "1px solid rgba(228,228,231,0.8)",
+						backgroundColor: "#fff",
+						boxShadow: "0 1px 2px rgba(0,0,0,0.04)",
+						padding: "16px 18px 14px"
+					},
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							style: {
+								display: "flex",
+								alignItems: "center",
+								gap: 8,
+								marginBottom: 12
+							},
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								style: {
+									display: "flex",
+									gap: 4
+								},
+								children: [
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Dot, {}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Dot, {}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Dot, {})
+								]
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Bar, {
+								w: 64,
+								h: 6,
+								bg: "#e4e4e7",
+								opacity: phase >= 1 ? 1 : .4,
+								transition: "opacity 0.5s"
+							})]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							style: {
+								display: "grid",
+								gap: 7
+							},
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Row, {
+									show: phase >= 0,
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Bar, {
+										w: 36,
+										h: 7,
+										bg: "rgba(147,197,253,0.7)",
+										anim: 0
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Bar, {
+										w: 80,
+										h: 7,
+										bg: "rgba(219,234,254,0.8)",
+										anim: .2
+									})]
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Row, {
+									show: phase >= 0,
+									delay: .1,
+									children: [
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Spacer, {}),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Dot, {}),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Bar, {
+											w: 100,
+											h: 7,
+											bg: "rgba(24,24,27,0.2)",
+											anim: .3
+										})
+									]
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Row, {
+									show: phase >= 1,
+									delay: .15,
+									children: [
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Spacer, {}),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Bar, {
+											w: 48,
+											h: 7,
+											bg: "rgba(24,24,27,0.15)",
+											anim: .1
+										}),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Bar, {
+											w: 40,
+											h: 7,
+											bg: "rgba(153,246,228,0.6)",
+											anim: .5
+										}),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Bar, {
+											w: 56,
+											h: 7,
+											bg: "rgba(147,197,253,0.6)",
+											anim: .3
+										})
+									]
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Row, {
+									show: phase >= 1,
+									delay: .2,
+									children: [
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Spacer, {}),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Dot, {}),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Bar, {
+											w: 60,
+											h: 7,
+											bg: "rgba(24,24,27,0.15)",
+											anim: .4
+										})
+									]
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Row, {
+									show: phase >= 2,
+									delay: .25,
+									children: [
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Bar, {
+											w: 40,
+											h: 7,
+											bg: "rgba(153,246,228,0.5)",
+											anim: .2
+										}),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Dot, {}),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Bar, {
+											w: 48,
+											h: 7,
+											bg: "rgba(24,24,27,0.15)",
+											anim: .6
+										}),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Bar, {
+											w: 64,
+											h: 7,
+											bg: "rgba(147,197,253,0.5)",
+											anim: .1
+										})
+									]
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Row, {
+									show: phase >= 2,
+									delay: .3,
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Bar, {
+										w: 36,
+										h: 7,
+										bg: "rgba(147,197,253,0.6)",
+										anim: .5
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Bar, {
+										w: 36,
+										h: 7,
+										bg: "rgba(24,24,27,0.12)",
+										anim: .7
+									})]
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Row, {
+									show: phase >= 3,
+									delay: .35,
+									children: [
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Dot, {}),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Bar, {
+											w: 44,
+											h: 7,
+											bg: "rgba(24,24,27,0.18)",
+											anim: .3
+										}),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Dot, {}),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Bar, {
+											w: 56,
+											h: 7,
+											bg: "rgba(153,246,228,0.5)",
+											anim: .8
+										}),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Bar, {
+											w: 48,
+											h: 7,
+											bg: "rgba(147,197,253,0.5)",
+											anim: .4
+										})
+									]
+								})
+							]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { style: {
+							pointerEvents: "none",
+							position: "absolute",
+							inset: 0,
+							background: "linear-gradient(105deg, transparent 0%, transparent 40%, rgba(255,255,255,0.6) 50%, transparent 60%, transparent 100%)",
+							backgroundSize: "250% 100%",
+							animation: "cpk-a2ui-sweep 3s ease-in-out infinite"
+						} })
+					]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					style: {
+						display: "flex",
+						alignItems: "center",
+						justifyContent: "center",
+						gap: 8,
+						marginTop: 8
+					},
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						style: {
+							fontSize: 12,
+							color: "#a1a1aa",
+							letterSpacing: "0.025em"
+						},
+						children: "Building interface"
+					}), tokens > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+						style: {
+							fontSize: 11,
+							color: "#d4d4d8",
+							fontVariantNumeric: "tabular-nums"
+						},
+						children: [
+							"~",
+							tokens.toLocaleString(),
+							" tokens"
+						]
+					})]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("style", { children: `
+        @keyframes cpk-a2ui-fade {
+          0%, 100% { opacity: 1; }
+          50% { opacity: 0.5; }
+        }
+        @keyframes cpk-a2ui-sweep {
+          0% { background-position: 250% 0; }
+          100% { background-position: -250% 0; }
+        }
+      ` })
+			]
+		});
+	}
+	function Dot() {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { style: {
+			width: 7,
+			height: 7,
+			borderRadius: "50%",
+			backgroundColor: "#d4d4d8",
+			flexShrink: 0
+		} });
+	}
+	function Spacer() {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { style: { width: 12 } });
+	}
+	function Bar({ w, h, bg, anim, opacity, transition }) {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { style: {
+			width: w,
+			height: h,
+			borderRadius: 9999,
+			backgroundColor: bg,
+			...anim !== void 0 ? { animation: `cpk-a2ui-fade 2.4s ease-in-out ${anim}s infinite` } : {},
+			...opacity !== void 0 ? { opacity } : {},
+			...transition ? { transition } : {}
+		} });
+	}
+	function Row({ children, show, delay = 0 }) {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			style: {
+				display: "flex",
+				alignItems: "center",
+				gap: 6,
+				opacity: show ? 1 : 0,
+				transition: `opacity 0.4s ${delay}s`
+			},
+			children
+		});
+	}
+	/**
+	* Registers the built-in `render_a2ui` tool call renderer via the props-based
+	* `setRenderToolCalls` mechanism (not `useRenderTool`).
+	*
+	* This ensures user-registered `useRenderTool({ name: "render_a2ui", ... })`
+	* hooks automatically override the built-in, since the merge logic in
+	* react-core.ts gives hook-based entries priority over prop-based entries.
+	*/
+	function A2UIBuiltInToolCallRenderer() {
+		const { copilotkit } = useCopilotKit();
+		(0, react.useEffect)(() => {
+			var _renderToolCalls;
+			const renderer = defineToolCallRenderer({
+				name: RENDER_A2UI_TOOL_NAME,
+				args: zod.z.any(),
+				render: ({ status, args: parameters }) => {
+					if (status === "complete") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, {});
+					const params = parameters;
+					const items = params === null || params === void 0 ? void 0 : params.items;
+					if (Array.isArray(items) && items.length > 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, {});
+					const components = params === null || params === void 0 ? void 0 : params.components;
+					if (Array.isArray(components) && components.length > 2) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, {});
+					return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(A2UIProgressIndicator, { parameters });
+				}
+			});
+			const existing = (_renderToolCalls = copilotkit._renderToolCalls) !== null && _renderToolCalls !== void 0 ? _renderToolCalls : [];
+			copilotkit.setRenderToolCalls([...existing.filter((rc) => rc.name !== RENDER_A2UI_TOOL_NAME), renderer]);
+		}, [copilotkit]);
+		return null;
+	}
+
+//#endregion
+//#region src/v2/hooks/use-agent-context.tsx
+	function useAgentContext(context) {
+		const { description, value } = context;
+		const { copilotkit } = useCopilotKit();
+		const stringValue = (0, react.useMemo)(() => {
+			if (typeof value === "string") return value;
+			return JSON.stringify(value);
+		}, [value]);
+		(0, react.useLayoutEffect)(() => {
+			if (!copilotkit) return;
+			const id = copilotkit.addContext({
+				description,
+				value: stringValue
+			});
+			return () => {
+				copilotkit.removeContext(id);
+			};
+		}, [
+			description,
+			stringValue,
+			copilotkit
+		]);
+	}
+
+//#endregion
+//#region src/v2/a2ui/A2UICatalogContext.tsx
+/**
+	* Renders agent context describing the available A2UI catalog and custom components.
+	* Only mount this component when A2UI is enabled.
+	*
+	* When `includeSchema` is true, the full component schemas (JSON Schema) are also
+	* sent as context using the same description key as the A2UI middleware, so the
+	* middleware can optionally overwrite it with a server-side schema.
+	*/
+	function A2UICatalogContext({ catalog, includeSchema }) {
+		useAgentContext({
+			description: "A2UI catalog capabilities: available catalog IDs and custom component definitions the client can render.",
+			value: (0, _copilotkit_a2ui_renderer.buildCatalogContextValue)(catalog)
+		});
+		const { copilotkit } = useCopilotKit();
+		const schemaValue = (0, react.useMemo)(() => includeSchema !== false ? JSON.stringify((0, _copilotkit_a2ui_renderer.extractCatalogComponentSchemas)(catalog)) : null, [catalog, includeSchema]);
+		(0, react.useLayoutEffect)(() => {
+			if (!copilotkit || !schemaValue) return;
+			const ids = [];
+			ids.push(copilotkit.addContext({
+				description: _copilotkit_a2ui_renderer.A2UI_SCHEMA_CONTEXT_DESCRIPTION,
+				value: schemaValue
+			}));
+			ids.push(copilotkit.addContext({
+				description: "A2UI generation guidelines — protocol rules, tool arguments, path rules, data model format, and form/two-way-binding instructions.",
+				value: _copilotkit_shared.A2UI_DEFAULT_GENERATION_GUIDELINES
+			}));
+			ids.push(copilotkit.addContext({
+				description: "A2UI design guidelines — visual design rules, component hierarchy tips, and action handler patterns.",
+				value: _copilotkit_shared.A2UI_DEFAULT_DESIGN_GUIDELINES
+			}));
+			return () => {
+				for (const id of ids) copilotkit.removeContext(id);
+			};
+		}, [copilotkit, schemaValue]);
+		return null;
+	}
 
 //#endregion
 //#region src/v2/lib/react-core.ts
@@ -2167,6 +3083,17 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 //#region src/v2/providers/CopilotKitProvider.tsx
 	const HEADER_NAME = "X-CopilotCloud-Public-Api-Key";
 	const COPILOT_CLOUD_CHAT_URL$1 = "https://api.cloud.copilotkit.ai/copilotkit/v1";
+	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.
+- Neutral base palette: white backgrounds, zinc/slate gray text (#09090b for headings, #71717a for secondary text). One accent color for interactive elements.
+- Use system font stacks (system-ui, -apple-system, sans-serif) at readable sizes (14px body, 600 weight for headings). Tight line-heights.
+- Small, consistent border-radius (6–8px). Cards and containers use border, not shadow, for separation.
+- Buttons: solid fill for primary (dark bg, white text), outline for secondary (border + transparent bg). Subtle hover state (slight opacity or background shift).
+- 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)";
 	const CopilotKitContext = (0, react.createContext)({
 		copilotkit: null,
 		executingToolCallIds: /* @__PURE__ */ new Set()
@@ -2182,9 +3109,12 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 		}, [value, warningMessage]);
 		return value;
 	}
-	const CopilotKitProvider = ({ children, runtimeUrl, headers = {}, credentials, publicApiKey, publicLicenseKey, licenseToken, properties = {}, agents__unsafe_dev_only: agents = {}, selfManagedAgents = {}, renderToolCalls, renderActivityMessages, renderCustomMessages, frontendTools, humanInTheLoop, showDevConsole = false, useSingleEndpoint = false, onError, a2ui }) => {
+	const CopilotKitProvider = ({ children, runtimeUrl, headers = {}, credentials, publicApiKey, publicLicenseKey, licenseToken, properties = {}, agents__unsafe_dev_only: agents = {}, selfManagedAgents = {}, renderToolCalls, renderActivityMessages, renderCustomMessages, frontendTools, humanInTheLoop, openGenerativeUI, showDevConsole = false, useSingleEndpoint, onError, a2ui, defaultThrottleMs, inspectorDefaultAnchor }) => {
+		var _openGenerativeUI$des;
 		const [shouldRenderInspector, setShouldRenderInspector] = (0, react.useState)(false);
 		const [runtimeA2UIEnabled, setRuntimeA2UIEnabled] = (0, react.useState)(false);
+		const [runtimeOpenGenUIEnabled, setRuntimeOpenGenUIEnabled] = (0, react.useState)(false);
+		const openGenUIActive = runtimeOpenGenUIEnabled || !!openGenerativeUI;
 		const [runtimeLicenseStatus, setRuntimeLicenseStatus] = (0, react.useState)(void 0);
 		(0, react.useEffect)(() => {
 			if (typeof window === "undefined") return;
@@ -2213,12 +3143,25 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 				content: MCPAppsActivityContentSchema,
 				render: MCPAppsActivityRenderer
 			}];
+			if (openGenUIActive) renderers.push({
+				activityType: OpenGenerativeUIActivityType,
+				content: OpenGenerativeUIContentSchema,
+				render: OpenGenerativeUIActivityRenderer
+			});
 			if (runtimeA2UIEnabled) {
 				var _a2ui$theme;
-				renderers.unshift(createA2UIMessageRenderer({ theme: (_a2ui$theme = a2ui === null || a2ui === void 0 ? void 0 : a2ui.theme) !== null && _a2ui$theme !== void 0 ? _a2ui$theme : _copilotkit_a2ui_renderer.viewerTheme }));
+				renderers.unshift(createA2UIMessageRenderer({
+					theme: (_a2ui$theme = a2ui === null || a2ui === void 0 ? void 0 : a2ui.theme) !== null && _a2ui$theme !== void 0 ? _a2ui$theme : _copilotkit_a2ui_renderer.viewerTheme,
+					catalog: a2ui === null || a2ui === void 0 ? void 0 : a2ui.catalog,
+					loadingComponent: a2ui === null || a2ui === void 0 ? void 0 : a2ui.loadingComponent
+				}));
 			}
 			return renderers;
-		}, [runtimeA2UIEnabled, a2ui]);
+		}, [
+			runtimeA2UIEnabled,
+			openGenUIActive,
+			a2ui
+		]);
 		const allActivityRenderers = (0, react.useMemo)(() => {
 			return [...renderActivityMessagesList, ...builtInActivityRenderers];
 		}, [renderActivityMessagesList, builtInActivityRenderers]);
@@ -2244,6 +3187,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 		const chatApiEndpoint = runtimeUrl !== null && runtimeUrl !== void 0 ? 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.");
 		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 === null || openGenerativeUI === void 0 ? void 0 : openGenerativeUI.sandboxFunctions, "openGenerativeUI.sandboxFunctions must be a stable array.");
 		const processedHumanInTheLoopTools = (0, react.useMemo)(() => {
 			const processedTools = [];
 			const processedRenderToolCalls = [];
@@ -2274,15 +3218,31 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 				renderToolCalls: processedRenderToolCalls
 			};
 		}, [humanInTheLoopList]);
+		const builtInFrontendTools = (0, react.useMemo)(() => {
+			if (!openGenUIActive) return [];
+			return [{
+				name: "generateSandboxedUi",
+				description: GENERATE_SANDBOXED_UI_DESCRIPTION,
+				parameters: GenerateSandboxedUiArgsSchema,
+				handler: async () => "UI generated",
+				followUp: true,
+				render: OpenGenerativeUIToolRenderer
+			}];
+		}, [openGenUIActive]);
 		const allTools = (0, react.useMemo)(() => {
 			const tools = [];
 			tools.push(...frontendToolsList);
+			tools.push(...builtInFrontendTools);
 			tools.push(...processedHumanInTheLoopTools.tools);
 			return tools;
-		}, [frontendToolsList, processedHumanInTheLoopTools]);
+		}, [
+			frontendToolsList,
+			builtInFrontendTools,
+			processedHumanInTheLoopTools
+		]);
 		const allRenderToolCalls = (0, react.useMemo)(() => {
 			const combined = [...renderToolCallsList];
-			frontendToolsList.forEach((tool) => {
+			[...frontendToolsList, ...builtInFrontendTools].forEach((tool) => {
 				if (tool.render) {
 					const args = tool.parameters || (tool.name === "*" ? zod.z.any() : void 0);
 					if (args) combined.push({
@@ -2297,25 +3257,31 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 		}, [
 			renderToolCallsList,
 			frontendToolsList,
+			builtInFrontendTools,
 			processedHumanInTheLoopTools
 		]);
 		const copilotkitRef = (0, react.useRef)(null);
-		if (copilotkitRef.current === null) copilotkitRef.current = new CopilotKitCoreReact({
-			runtimeUrl: chatApiEndpoint,
-			runtimeTransport: useSingleEndpoint ? "single" : "rest",
-			headers: mergedHeaders,
-			credentials,
-			properties,
-			agents__unsafe_dev_only: mergedAgents,
-			tools: allTools,
-			renderToolCalls: allRenderToolCalls,
-			renderActivityMessages: allActivityRenderers,
-			renderCustomMessages: renderCustomMessagesList
-		});
+		if (copilotkitRef.current === null) {
+			copilotkitRef.current = new CopilotKitCoreReact({
+				runtimeUrl: chatApiEndpoint,
+				runtimeTransport: useSingleEndpoint === true ? "single" : useSingleEndpoint === false ? "rest" : "auto",
+				headers: mergedHeaders,
+				credentials,
+				properties,
+				agents__unsafe_dev_only: mergedAgents,
+				tools: allTools,
+				renderToolCalls: allRenderToolCalls,
+				renderActivityMessages: allActivityRenderers,
+				renderCustomMessages: renderCustomMessagesList
+			});
+			if (defaultThrottleMs !== void 0) copilotkitRef.current.setDefaultThrottleMs(defaultThrottleMs);
+		}
 		const copilotkit = copilotkitRef.current;
 		(0, react.useEffect)(() => {
+			setRuntimeA2UIEnabled(copilotkit.a2uiEnabled);
 			const subscription = copilotkit.subscribe({ onRuntimeConnectionStatusChanged: () => {
 				setRuntimeA2UIEnabled(copilotkit.a2uiEnabled);
+				setRuntimeOpenGenUIEnabled(copilotkit.openGenerativeUIEnabled);
 				setRuntimeLicenseStatus(copilotkit.licenseStatus);
 			} });
 			return () => {
@@ -2375,7 +3341,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 		}, [copilotkit]);
 		(0, react.useEffect)(() => {
 			copilotkit.setRuntimeUrl(chatApiEndpoint);
-			copilotkit.setRuntimeTransport(useSingleEndpoint ? "single" : "rest");
+			copilotkit.setRuntimeTransport(useSingleEndpoint === true ? "single" : useSingleEndpoint === false ? "rest" : "auto");
 			copilotkit.setHeaders(mergedHeaders);
 			copilotkit.setCredentials(credentials);
 			copilotkit.setProperties(properties);
@@ -2409,23 +3375,75 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 		(0, react.useEffect)(() => {
 			didMountRef.current = true;
 		}, []);
+		(0, react.useEffect)(() => {
+			if (defaultThrottleMs !== void 0 && (!Number.isFinite(defaultThrottleMs) || defaultThrottleMs < 0)) console.error(`CopilotKitProvider: defaultThrottleMs must be a non-negative finite number, got ${defaultThrottleMs}. useAgent hooks without an explicit throttleMs will fall back to unthrottled.`);
+			copilotkit.setDefaultThrottleMs(defaultThrottleMs);
+		}, [copilotkit, defaultThrottleMs]);
+		const designSkill = (_openGenerativeUI$des = openGenerativeUI === null || openGenerativeUI === void 0 ? void 0 : openGenerativeUI.designSkill) !== null && _openGenerativeUI$des !== void 0 ? _openGenerativeUI$des : DEFAULT_DESIGN_SKILL;
+		(0, react.useLayoutEffect)(() => {
+			if (!copilotkit || !openGenUIActive) return;
+			const id = copilotkit.addContext({
+				description: "Design guidelines for the generateSandboxedUi tool. Follow these when building UI.",
+				value: designSkill
+			});
+			return () => {
+				copilotkit.removeContext(id);
+			};
+		}, [
+			copilotkit,
+			designSkill,
+			openGenUIActive
+		]);
+		const sandboxFunctionsDescriptors = (0, react.useMemo)(() => {
+			if (sandboxFunctionsList.length === 0) return null;
+			return JSON.stringify(sandboxFunctionsList.map((fn) => ({
+				name: fn.name,
+				description: fn.description,
+				parameters: (0, _copilotkit_shared.schemaToJsonSchema)(fn.parameters, { zodToJsonSchema: zod_to_json_schema.zodToJsonSchema })
+			})));
+		}, [sandboxFunctionsList]);
+		(0, react.useLayoutEffect)(() => {
+			if (!copilotkit || !sandboxFunctionsDescriptors || !openGenUIActive) return;
+			const id = copilotkit.addContext({
+				description: "Sandbox functions available in generated sandboxed UI code. Call via: await Websandbox.connection.remote.<functionName>(args)",
+				value: sandboxFunctionsDescriptors
+			});
+			return () => {
+				copilotkit.removeContext(id);
+			};
+		}, [
+			copilotkit,
+			sandboxFunctionsDescriptors,
+			openGenUIActive
+		]);
 		const contextValue = (0, react.useMemo)(() => ({
 			copilotkit,
 			executingToolCallIds
 		}), [copilotkit, executingToolCallIds]);
 		const licenseContextValue = (0, react.useMemo)(() => (0, _copilotkit_shared.createLicenseContextValue)(null), []);
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CopilotKitContext.Provider, {
-			value: contextValue,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(LicenseContext.Provider, {
-				value: licenseContextValue,
-				children: [
-					children,
-					shouldRenderInspector ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CopilotKitInspector, { core: copilotkit }) : null,
-					runtimeLicenseStatus === "none" && !resolvedPublicKey && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LicenseWarningBanner, { type: "no_license" }),
-					runtimeLicenseStatus === "expired" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LicenseWarningBanner, { type: "expired" }),
-					runtimeLicenseStatus === "invalid" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LicenseWarningBanner, { type: "invalid" }),
-					runtimeLicenseStatus === "expiring" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LicenseWarningBanner, { type: "expiring" })
-				]
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SandboxFunctionsContext.Provider, {
+			value: sandboxFunctionsList,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CopilotKitContext.Provider, {
+				value: contextValue,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(LicenseContext.Provider, {
+					value: licenseContextValue,
+					children: [
+						runtimeA2UIEnabled && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(A2UIBuiltInToolCallRenderer, {}),
+						runtimeA2UIEnabled && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(A2UICatalogContext, {
+							catalog: a2ui === null || a2ui === void 0 ? void 0 : a2ui.catalog,
+							includeSchema: a2ui === null || a2ui === void 0 ? void 0 : a2ui.includeSchema
+						}),
+						children,
+						shouldRenderInspector ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CopilotKitInspector, {
+							core: copilotkit,
+							defaultAnchor: inspectorDefaultAnchor
+						}) : null,
+						runtimeLicenseStatus === "none" && !resolvedPublicKey && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LicenseWarningBanner, { type: "no_license" }),
+						runtimeLicenseStatus === "expired" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LicenseWarningBanner, { type: "expired" }),
+						runtimeLicenseStatus === "invalid" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LicenseWarningBanner, { type: "invalid" }),
+						runtimeLicenseStatus === "expiring" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LicenseWarningBanner, { type: "expiring" })
+					]
+				})
 			})
 		});
 	};
@@ -2570,12 +3588,23 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 		byThread.set(threadId, clone);
 		return clone;
 	}
-	function useAgent({ agentId, threadId, updates } = {}) {
+	function useAgent({ agentId, threadId, updates, throttleMs } = {}) {
 		var _agentId, _threadId;
 		(_agentId = agentId) !== null && _agentId !== void 0 || (agentId = _copilotkit_shared.DEFAULT_AGENT_ID);
 		const { copilotkit } = useCopilotKit();
+		const providerThrottleMs = copilotkit.defaultThrottleMs;
 		const chatConfig = useCopilotChatConfiguration();
 		(_threadId = threadId) !== null && _threadId !== void 0 || (threadId = chatConfig === null || chatConfig === void 0 ? void 0 : chatConfig.threadId);
+		const effectiveThrottleMs = (0, react.useMemo)(() => {
+			var _ref;
+			const resolved = (_ref = throttleMs !== null && throttleMs !== void 0 ? throttleMs : providerThrottleMs) !== null && _ref !== void 0 ? _ref : 0;
+			if (!Number.isFinite(resolved) || resolved < 0) {
+				const source = throttleMs !== void 0 ? "hook-level throttleMs" : "provider-level defaultThrottleMs";
+				console.error(`useAgent: ${source} must be a non-negative finite number, got ${resolved}. Falling back to unthrottled.`);
+				return 0;
+			}
+			return resolved;
+		}, [throttleMs, providerThrottleMs]);
 		const [, forceUpdate] = (0, react.useReducer)((x) => x + 1, 0);
 		const updateFlags = (0, react.useMemo)(() => updates !== null && updates !== void 0 ? updates : ALL_UPDATES, [JSON.stringify(updates)]);
 		const provisionalAgentCache = (0, react.useRef)(/* @__PURE__ */ new Map());
@@ -2640,9 +3669,32 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 		(0, react.useEffect)(() => {
 			if (updateFlags.length === 0) return;
 			const handlers = {};
-			if (updateFlags.includes(UseAgentUpdate.OnMessagesChanged)) handlers.onMessagesChanged = () => {
-				forceUpdate();
-			};
+			let timerId = null;
+			let active = true;
+			if (updateFlags.includes(UseAgentUpdate.OnMessagesChanged)) {
+				const ms = effectiveThrottleMs;
+				if (ms > 0) {
+					let throttleActive = false;
+					let pending = false;
+					const throttledNotify = () => {
+						if (!active) return;
+						if (!throttleActive) {
+							throttleActive = true;
+							pending = false;
+							forceUpdate();
+							timerId = setTimeout(function trailingEdge() {
+								timerId = null;
+								if (active && pending) {
+									pending = false;
+									forceUpdate();
+									timerId = setTimeout(trailingEdge, ms);
+								} else throttleActive = false;
+							}, ms);
+						} else pending = true;
+					};
+					handlers.onMessagesChanged = throttledNotify;
+				} else handlers.onMessagesChanged = forceUpdate;
+			}
 			if (updateFlags.includes(UseAgentUpdate.OnStateChanged)) handlers.onStateChanged = forceUpdate;
 			if (updateFlags.includes(UseAgentUpdate.OnRunStatusChanged)) {
 				handlers.onRunInitialized = forceUpdate;
@@ -2650,11 +3702,16 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 				handlers.onRunFailed = forceUpdate;
 			}
 			const subscription = agent.subscribe(handlers);
-			return () => subscription.unsubscribe();
+			return () => {
+				active = false;
+				if (timerId !== null) clearTimeout(timerId);
+				subscription.unsubscribe();
+			};
 		}, [
 			agent,
 			forceUpdate,
-			JSON.stringify(updateFlags)
+			effectiveThrottleMs,
+			updateFlags
 		]);
 		(0, react.useEffect)(() => {
 			if (agent instanceof _ag_ui_client.HttpAgent) agent.headers = { ...copilotkit.headers };
@@ -2724,6 +3781,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 			return (_ref = (_ref2 = (_matches$find = matches.find((candidate) => candidate.agentId === agentId)) !== null && _matches$find !== void 0 ? _matches$find : matches.find((candidate) => candidate.agentId === void 0)) !== null && _ref2 !== void 0 ? _ref2 : renderers.find((candidate) => candidate.activityType === "*")) !== null && _ref !== void 0 ? _ref : null;
 		}, [agentId, renderers]);
 		const renderActivityMessage = (0, react.useCallback)((message) => {
+			var _getThreadClone;
 			const renderer = findRenderer(message.activityType);
 			if (!renderer) return null;
 			const parseResult = renderer.content.safeParse(message.content);
@@ -2732,7 +3790,8 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 				return null;
 			}
 			const Component = renderer.render;
-			const agent = copilotkit.getAgent(agentId);
+			const registryAgent = copilotkit.getAgent(agentId);
+			const agent = (_getThreadClone = getThreadClone(registryAgent, config === null || config === void 0 ? void 0 : config.threadId)) !== null && _getThreadClone !== void 0 ? _getThreadClone : registryAgent;
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, {
 				activityType: message.activityType,
 				content: parseResult.data,
@@ -2741,6 +3800,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 			}, message.id);
 		}, [
 			agentId,
+			config === null || config === void 0 ? void 0 : config.threadId,
 			copilotkit,
 			findRenderer
 		]);
@@ -2766,7 +3826,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 				copilotkit.removeTool(name, tool.agentId);
 			}
 			copilotkit.addTool(tool);
-			if (tool.render && tool.parameters) copilotkit.addHookRenderToolCall({
+			if (tool.render) copilotkit.addHookRenderToolCall({
 				name,
 				args: tool.parameters,
 				agentId: tool.agentId,
@@ -2851,18 +3911,6 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 		}, deps);
 	}
 
-//#endregion
-//#region src/v2/types/defineToolCallRenderer.ts
-	function defineToolCallRenderer(def) {
-		const argsSchema = def.name === "*" && !def.args ? zod.z.any() : def.args;
-		return {
-			name: def.name,
-			args: argsSchema,
-			render: def.render,
-			...def.agentId ? { agentId: def.agentId } : {}
-		};
-	}
-
 //#endregion
 //#region src/v2/hooks/use-render-tool.tsx
 	const EMPTY_DEPS = [];
@@ -3193,31 +4241,6 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 		]);
 	}
 
-//#endregion
-//#region src/v2/hooks/use-agent-context.tsx
-	function useAgentContext(context) {
-		const { description, value } = context;
-		const { copilotkit } = useCopilotKit();
-		const stringValue = (0, react.useMemo)(() => {
-			if (typeof value === "string") return value;
-			return JSON.stringify(value);
-		}, [value]);
-		(0, react.useLayoutEffect)(() => {
-			if (!copilotkit) return;
-			const id = copilotkit.addContext({
-				description,
-				value: stringValue
-			});
-			return () => {
-				copilotkit.removeContext(id);
-			};
-		}, [
-			description,
-			stringValue,
-			copilotkit
-		]);
-	}
-
 //#endregion
 //#region src/v2/hooks/use-suggestions.tsx
 	function useSuggestions({ agentId } = {}) {
@@ -3639,11 +4662,19 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 		var _copilotkit$intellige2;
 		const { copilotkit } = useCopilotKit();
 		const [store] = (0, react.useState)(() => (0, _copilotkit_core.ɵcreateThreadStore)({ fetch: globalThis.fetch }));
-		const threads = useThreadStoreSelector(store, _copilotkit_core.ɵselectThreads);
+		const coreThreads = useThreadStoreSelector(store, _copilotkit_core.ɵselectThreads);
+		const threads = (0, react.useMemo)(() => coreThreads.map(({ id, agentId, name, archived, createdAt, updatedAt }) => ({
+			id,
+			agentId,
+			name,
+			archived,
+			createdAt,
+			updatedAt
+		})), [coreThreads]);
 		const storeIsLoading = useThreadStoreSelector(store, _copilotkit_core.ɵselectThreadsIsLoading);
 		const storeError = useThreadStoreSelector(store, _copilotkit_core.ɵselectThreadsError);
-		const hasNextPage = useThreadStoreSelector(store, _copilotkit_core.ɵselectHasNextPage);
-		const isFetchingNextPage = useThreadStoreSelector(store, _copilotkit_core.ɵselectIsFetchingNextPage);
+		const hasMoreThreads = useThreadStoreSelector(store, _copilotkit_core.ɵselectHasNextPage);
+		const isFetchingMoreThreads = useThreadStoreSelector(store, _copilotkit_core.ɵselectIsFetchingNextPage);
 		const headersKey = (0, react.useMemo)(() => {
 			var _copilotkit$headers;
 			return JSON.stringify(Object.entries((_copilotkit$headers = copilotkit.headers) !== null && _copilotkit$headers !== void 0 ? _copilotkit$headers : {}).sort(([left], [right]) => left.localeCompare(right)));
@@ -3688,15 +4719,184 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 			threads,
 			isLoading,
 			error,
-			hasNextPage,
-			isFetchingNextPage,
-			fetchNextPage: (0, react.useCallback)(() => store.fetchNextPage(), [store]),
+			hasMoreThreads,
+			isFetchingMoreThreads,
+			fetchMoreThreads: (0, react.useCallback)(() => store.fetchNextPage(), [store]),
 			renameThread,
 			archiveThread,
 			deleteThread
 		};
 	}
 
+//#endregion
+//#region src/v2/hooks/use-attachments.tsx
+/**
+	* 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.
+	*/
+	function useAttachments({ config }) {
+		var _config$enabled;
+		const enabled = (_config$enabled = config === null || config === void 0 ? void 0 : config.enabled) !== null && _config$enabled !== void 0 ? _config$enabled : false;
+		const [attachments, setAttachments] = (0, react.useState)([]);
+		const [dragOver, setDragOver] = (0, react.useState)(false);
+		const fileInputRef = (0, react.useRef)(null);
+		const containerRef = (0, react.useRef)(null);
+		const configRef = (0, react.useRef)(config);
+		configRef.current = config;
+		const attachmentsRef = (0, react.useRef)([]);
+		attachmentsRef.current = attachments;
+		const processFiles = (0, react.useCallback)(async (files) => {
+			var _cfg$accept, _cfg$maxSize;
+			const cfg = configRef.current;
+			const accept = (_cfg$accept = cfg === null || cfg === void 0 ? void 0 : cfg.accept) !== null && _cfg$accept !== void 0 ? _cfg$accept : "*/*";
+			const maxSize = (_cfg$maxSize = cfg === null || cfg === void 0 ? void 0 : cfg.maxSize) !== null && _cfg$maxSize !== void 0 ? _cfg$maxSize : 20 * 1024 * 1024;
+			const rejectedFiles = files.filter((file) => !(0, _copilotkit_shared.matchesAcceptFilter)(file, accept));
+			for (const file of rejectedFiles) {
+				var _cfg$onUploadFailed;
+				cfg === null || cfg === void 0 || (_cfg$onUploadFailed = cfg.onUploadFailed) === null || _cfg$onUploadFailed === void 0 || _cfg$onUploadFailed.call(cfg, {
+					reason: "invalid-type",
+					file,
+					message: `File "${file.name}" is not accepted. Supported types: ${accept}`
+				});
+			}
+			const validFiles = files.filter((file) => (0, _copilotkit_shared.matchesAcceptFilter)(file, accept));
+			for (const file of validFiles) {
+				if ((0, _copilotkit_shared.exceedsMaxSize)(file, maxSize)) {
+					var _cfg$onUploadFailed2;
+					cfg === null || cfg === void 0 || (_cfg$onUploadFailed2 = cfg.onUploadFailed) === null || _cfg$onUploadFailed2 === void 0 || _cfg$onUploadFailed2.call(cfg, {
+						reason: "file-too-large",
+						file,
+						message: `File "${file.name}" exceeds the maximum size of ${(0, _copilotkit_shared.formatFileSize)(maxSize)}`
+					});
+					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 === null || cfg === void 0 ? void 0 : 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) {
+					var _cfg$onUploadFailed3;
+					setAttachments((prev) => prev.filter((att) => att.id !== placeholderId));
+					console.error(`[CopilotKit] Failed to upload "${file.name}":`, error);
+					cfg === null || cfg === void 0 || (_cfg$onUploadFailed3 = cfg.onUploadFailed) === null || _cfg$onUploadFailed3 === void 0 || _cfg$onUploadFailed3.call(cfg, {
+						reason: "upload-failed",
+						file,
+						message: error instanceof Error ? error.message : `Failed to upload "${file.name}"`
+					});
+				}
+			}
+		}, []);
+		const handleFileUpload = (0, react.useCallback)(async (e) => {
+			var _e$target$files;
+			if (!((_e$target$files = e.target.files) === null || _e$target$files === void 0 ? void 0 : _e$target$files.length)) return;
+			try {
+				await processFiles(Array.from(e.target.files));
+			} catch (error) {
+				console.error("[CopilotKit] Upload error:", error);
+			}
+		}, [processFiles]);
+		const handleDragOver = (0, react.useCallback)((e) => {
+			var _configRef$current;
+			if (!((_configRef$current = configRef.current) === null || _configRef$current === void 0 ? void 0 : _configRef$current.enabled)) return;
+			e.preventDefault();
+			e.stopPropagation();
+			setDragOver(true);
+		}, []);
+		const handleDragLeave = (0, react.useCallback)((e) => {
+			e.preventDefault();
+			e.stopPropagation();
+			setDragOver(false);
+		}, []);
+		const handleDrop = (0, react.useCallback)(async (e) => {
+			var _configRef$current2;
+			e.preventDefault();
+			e.stopPropagation();
+			setDragOver(false);
+			if (!((_configRef$current2 = configRef.current) === null || _configRef$current2 === void 0 ? void 0 : _configRef$current2.enabled)) return;
+			const files = Array.from(e.dataTransfer.files);
+			if (files.length > 0) try {
+				await processFiles(files);
+			} catch (error) {
+				console.error("[CopilotKit] Drop error:", error);
+			}
+		}, [processFiles]);
+		(0, react.useEffect)(() => {
+			if (!enabled) return;
+			const handlePaste = async (e) => {
+				var _containerRef$current, _configRef$current$ac, _configRef$current3, _e$clipboardData;
+				const target = e.target;
+				if (!target || !((_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.contains(target))) return;
+				const accept = (_configRef$current$ac = (_configRef$current3 = configRef.current) === null || _configRef$current3 === void 0 ? void 0 : _configRef$current3.accept) !== null && _configRef$current$ac !== void 0 ? _configRef$current$ac : "*/*";
+				const fileItems = Array.from(((_e$clipboardData = e.clipboardData) === null || _e$clipboardData === void 0 ? void 0 : _e$clipboardData.items) || []).filter((item) => item.kind === "file" && item.getAsFile() !== null && (0, _copilotkit_shared.matchesAcceptFilter)(item.getAsFile(), accept));
+				if (fileItems.length === 0) return;
+				e.preventDefault();
+				const files = fileItems.map((item) => item.getAsFile()).filter((f) => f !== null);
+				try {
+					await processFiles(files);
+				} catch (error) {
+					console.error("[CopilotKit] Paste error:", error);
+				}
+			};
+			document.addEventListener("paste", handlePaste);
+			return () => document.removeEventListener("paste", handlePaste);
+		}, [enabled, processFiles]);
+		return {
+			attachments,
+			enabled,
+			dragOver,
+			fileInputRef,
+			containerRef,
+			processFiles,
+			handleFileUpload,
+			handleDragOver,
+			handleDragLeave,
+			handleDrop,
+			removeAttachment: (0, react.useCallback)((id) => {
+				setAttachments((prev) => prev.filter((a) => a.id !== id));
+			}, []),
+			consumeAttachments: (0, react.useCallback)(() => {
+				const ready = attachmentsRef.current.filter((a) => a.status === "ready");
+				if (ready.length === 0) return ready;
+				setAttachments((prev) => prev.filter((a) => a.status !== "ready"));
+				if (fileInputRef.current) fileInputRef.current.value = "";
+				return ready;
+			}, [])
+		};
+	}
+
 //#endregion
 //#region src/v2/components/chat/CopilotChatToolCallsView.tsx
 	function CopilotChatToolCallsView({ message, messages = [] }) {
@@ -3816,9 +5016,19 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 			const config = useCopilotChatConfiguration();
 			const labels = (_config$labels = config === null || config === void 0 ? void 0 : config.labels) !== null && _config$labels !== void 0 ? _config$labels : CopilotChatDefaultLabels;
 			const [copied, setCopied] = (0, react.useState)(false);
+			const timerRef = (0, react.useRef)(null);
+			(0, react.useEffect)(() => {
+				return () => {
+					if (timerRef.current !== null) clearTimeout(timerRef.current);
+				};
+			}, []);
 			const handleClick = (event) => {
 				setCopied(true);
-				setTimeout(() => setCopied(false), 2e3);
+				if (timerRef.current !== null) clearTimeout(timerRef.current);
+				timerRef.current = setTimeout(() => {
+					timerRef.current = null;
+					setCopied(false);
+				}, 2e3);
 				if (onClick) onClick(event);
 			};
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarButton, {
@@ -3884,6 +5094,80 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 	CopilotChatAssistantMessage.RegenerateButton.displayName = "CopilotChatAssistantMessage.RegenerateButton";
 	var CopilotChatAssistantMessage_default = CopilotChatAssistantMessage;
 
+//#endregion
+//#region src/v2/components/chat/CopilotChatAttachmentRenderer.tsx
+	const ImageAttachment = (0, react.memo)(function ImageAttachment({ src, className }) {
+		const [error, setError] = (0, react.useState)(false);
+		if (error) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: cn("cpk:flex cpk:flex-col cpk:items-center cpk:justify-center cpk:rounded-lg cpk:bg-muted cpk:p-4 cpk:text-sm cpk:text-muted-foreground", className),
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: "Failed to load image" })
+		});
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+			src,
+			alt: "Image attachment",
+			className: cn("cpk:max-w-full cpk:h-auto cpk:rounded-lg", className),
+			onError: () => setError(true)
+		});
+	});
+	const AudioAttachment = (0, react.memo)(function AudioAttachment({ src, filename, className }) {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: cn("cpk:flex cpk:flex-col cpk:gap-1", className),
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("audio", {
+				src,
+				controls: true,
+				preload: "metadata",
+				className: "cpk:max-w-[300px] cpk:w-full cpk:h-10"
+			}), filename && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "cpk:text-xs cpk:text-muted-foreground cpk:truncate cpk:max-w-[300px]",
+				children: filename
+			})]
+		});
+	});
+	const VideoAttachment = (0, react.memo)(function VideoAttachment({ src, className }) {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("video", {
+			src,
+			controls: true,
+			preload: "metadata",
+			className: cn("cpk:max-w-[400px] cpk:w-full cpk:rounded-lg", className)
+		});
+	});
+	const DocumentAttachment = (0, react.memo)(function DocumentAttachment({ source, filename, className }) {
+		var _source$mimeType;
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: cn("cpk:inline-flex cpk:items-center cpk:gap-2 cpk:px-3 cpk:py-2 cpk:border cpk:border-border cpk:rounded-lg cpk:bg-muted", className),
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "cpk:text-xs cpk:font-bold cpk:uppercase",
+				children: (0, _copilotkit_shared.getDocumentIcon)((_source$mimeType = source.mimeType) !== null && _source$mimeType !== void 0 ? _source$mimeType : "")
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "cpk:text-sm cpk:text-muted-foreground cpk:truncate",
+				children: filename || source.mimeType || "Unknown type"
+			})]
+		});
+	});
+	const CopilotChatAttachmentRenderer = ({ type, source, filename, className }) => {
+		const src = (0, _copilotkit_shared.getSourceUrl)(source);
+		switch (type) {
+			case "image": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ImageAttachment, {
+				src,
+				className
+			});
+			case "audio": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AudioAttachment, {
+				src,
+				filename,
+				className
+			});
+			case "video": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(VideoAttachment, {
+				src,
+				className
+			});
+			case "document": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DocumentAttachment, {
+				source,
+				filename,
+				className
+			});
+		}
+	};
+
 //#endregion
 //#region src/v2/components/chat/CopilotChatUserMessage.tsx
 	function flattenUserMessageContent(content) {
@@ -3894,8 +5178,17 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 			return "";
 		}).filter((text) => text.length > 0).join("\n");
 	}
+	function getMediaParts(content) {
+		if (!content || typeof content === "string") return [];
+		return content.filter((part) => part.type === "image" || part.type === "audio" || part.type === "video" || part.type === "document");
+	}
+	function getFilename(part) {
+		const meta = part.metadata;
+		if (meta != null && typeof meta === "object" && "filename" in meta && typeof meta.filename === "string") return meta.filename;
+	}
 	function CopilotChatUserMessage({ message, onEditMessage, branchIndex, numberOfBranches, onSwitchToBranch, additionalToolbarItems, messageRenderer, toolbar, copyButton, editButton, branchNavigation, children, className, ...props }) {
 		const flattenedContent = (0, react.useMemo)(() => flattenUserMessageContent(message.content), [message.content]);
+		const mediaParts = (0, react.useMemo)(() => getMediaParts(message.content), [message.content]);
 		const BoundMessageRenderer = renderSlot(messageRenderer, CopilotChatUserMessage.MessageRenderer, { content: flattenedContent });
 		const BoundCopyButton = renderSlot(copyButton, CopilotChatUserMessage.CopyButton, { onClick: async () => {
 			if (flattenedContent) try {
@@ -3942,7 +5235,18 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 			className: (0, tailwind_merge.twMerge)("copilotKitMessage copilotKitUserMessage cpk:flex cpk:flex-col cpk:items-end cpk:group cpk:pt-10", className),
 			"data-message-id": message.id,
 			...props,
-			children: [BoundMessageRenderer, BoundToolbar]
+			children: [
+				BoundMessageRenderer,
+				mediaParts.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "cpk:flex cpk:flex-col cpk:items-end cpk:gap-2 cpk:mt-2",
+					children: mediaParts.map((part, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CopilotChatAttachmentRenderer, {
+						type: part.type,
+						source: part.source,
+						filename: getFilename(part)
+					}, index))
+				}),
+				BoundToolbar
+			]
 		});
 	}
 	(function(_CopilotChatUserMessage) {
@@ -4245,6 +5549,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 			const isLoading = loadingSet.has(index) || suggestion.isLoading === true;
 			const pill = renderSlot(suggestionSlot, CopilotChatSuggestionPill, {
 				children: suggestion.title,
+				className: suggestion.className,
 				isLoading,
 				type: "button",
 				onClick: () => onSelectSuggestion === null || onSelectSuggestion === void 0 ? void 0 : onSelectSuggestion(suggestion, index)
@@ -4282,9 +5587,43 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 	});
 	CopilotChatSuggestionView.displayName = "CopilotChatSuggestionView";
 
+//#endregion
+//#region src/v2/components/chat/scroll-element-context.ts
+/**
+	* Provides the scroll container element to child components that need it for
+	* virtualization. Set by CopilotChatView.ScrollView; consumed by
+	* CopilotChatMessageView to feed useVirtualizer's getScrollElement.
+	*
+	* Carries the element itself (not a ref) so that context consumers re-render
+	* reactively when the scroll container is first mounted.
+	*/
+	const ScrollElementContext = react.default.createContext(null);
+
 //#endregion
 //#region src/v2/components/chat/CopilotChatMessageView.tsx
 /**
+	* Resolves a slot value into a { Component, slotProps } pair, handling the three
+	* slot forms: a component type, a className string, or a partial-props object.
+	*/
+	function resolveSlotComponent(slot, DefaultComponent) {
+		if (isReactComponentType(slot)) return {
+			Component: slot,
+			slotProps: void 0
+		};
+		if (typeof slot === "string") return {
+			Component: DefaultComponent,
+			slotProps: { className: slot }
+		};
+		if (slot && typeof slot === "object") return {
+			Component: DefaultComponent,
+			slotProps: slot
+		};
+		return {
+			Component: DefaultComponent,
+			slotProps: void 0
+		};
+	}
+	/**
 	* Memoized wrapper for assistant messages to prevent re-renders when other messages change.
 	*/
 	const MemoizedAssistantMessage = react.default.memo(function MemoizedAssistantMessage({ message, messages, isRunning, AssistantMessageComponent, slotProps }) {
@@ -4304,7 +5643,6 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 		if (prevToolCalls && nextToolCalls) for (let i = 0; i < prevToolCalls.length; i++) {
 			const prevTc = prevToolCalls[i];
 			const nextTc = nextToolCalls[i];
-			if (!prevTc || !nextTc) return false;
 			if (prevTc.id !== nextTc.id) return false;
 			if (prevTc.function.arguments !== nextTc.function.arguments) return false;
 		}
@@ -4384,7 +5722,9 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 		if (JSON.stringify(prevProps.stateSnapshot) !== JSON.stringify(nextProps.stateSnapshot)) return false;
 		return true;
 	});
+	const VIRTUALIZE_THRESHOLD = 50;
 	function CopilotChatMessageView({ messages = [], assistantMessage, userMessage, reasoningMessage, cursor, isRunning = false, children, className, ...props }) {
+		var _deduplicatedMessages;
 		const renderCustomMessage = useRenderCustomMessages();
 		const { renderActivityMessage } = useRenderActivityMessage();
 		const { copilotkit } = useCopilotKit();
@@ -4419,9 +5759,36 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 			if (!resolvedRunId) return void 0;
 			return copilotkit.getStateByRun(config.agentId, config.threadId, resolvedRunId);
 		};
-		const deduplicatedMessages = [...new Map(messages.map((m) => [m.id, m])).values()];
+		const deduplicatedMessages = (0, react.useMemo)(() => [...new Map(messages.map((m) => [m.id, m])).values()], [messages]);
 		if (process.env.NODE_ENV === "development" && deduplicatedMessages.length < messages.length) console.warn(`CopilotChatMessageView: Deduplicated ${messages.length - deduplicatedMessages.length} message(s) with duplicate IDs.`);
-		const messageElements = deduplicatedMessages.flatMap((message) => {
+		const { Component: AssistantComponent, slotProps: assistantSlotProps } = (0, react.useMemo)(() => resolveSlotComponent(assistantMessage, CopilotChatAssistantMessage_default), [assistantMessage]);
+		const { Component: UserComponent, slotProps: userSlotProps } = (0, react.useMemo)(() => resolveSlotComponent(userMessage, CopilotChatUserMessage_default), [userMessage]);
+		const { Component: ReasoningComponent, slotProps: reasoningSlotProps } = (0, react.useMemo)(() => resolveSlotComponent(reasoningMessage, CopilotChatReasoningMessage_default), [reasoningMessage]);
+		const scrollElementFromCtx = (0, react.useContext)(ScrollElementContext);
+		const scrollElement = scrollElementFromCtx && scrollElementFromCtx.clientHeight > 0 ? scrollElementFromCtx : null;
+		(0, react.useEffect)(() => {
+			if (process.env.NODE_ENV !== "production" && scrollElementFromCtx && scrollElementFromCtx.clientHeight === 0) console.warn("[CopilotKit] Chat scroll container has clientHeight=0 — virtualization disabled. Ensure the chat is rendered in a visible container with a non-zero height.");
+		}, [scrollElementFromCtx]);
+		const shouldVirtualize = !!scrollElement && !children && deduplicatedMessages.length > VIRTUALIZE_THRESHOLD;
+		const virtualizer = (0, _tanstack_react_virtual.useVirtualizer)({
+			count: shouldVirtualize ? deduplicatedMessages.length : 0,
+			getScrollElement: () => scrollElement,
+			estimateSize: () => 100,
+			overscan: 5,
+			measureElement: (el) => {
+				var _el$getBoundingClient;
+				return (_el$getBoundingClient = el === null || el === void 0 ? void 0 : el.getBoundingClientRect().height) !== null && _el$getBoundingClient !== void 0 ? _el$getBoundingClient : 0;
+			},
+			initialRect: {
+				width: 0,
+				height: 600
+			}
+		});
+		(0, react.useLayoutEffect)(() => {
+			if (!shouldVirtualize || !deduplicatedMessages.length) return;
+			virtualizer.scrollToIndex(deduplicatedMessages.length - 1, { align: "end" });
+		}, [shouldVirtualize, (_deduplicatedMessages = deduplicatedMessages[0]) === null || _deduplicatedMessages === void 0 ? void 0 : _deduplicatedMessages.id]);
+		const renderMessageBlock = (message) => {
 			const elements = [];
 			const stateSnapshot = getStateSnapshotForMessage(message.id);
 			if (renderCustomMessage) elements.push(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(MemoizedCustomMessage, {
@@ -4430,58 +5797,38 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 				renderCustomMessage,
 				stateSnapshot
 			}, `${message.id}-custom-before`));
-			if (message.role === "assistant") {
-				let AssistantComponent = CopilotChatAssistantMessage_default;
-				let assistantSlotProps;
-				if (isReactComponentType(assistantMessage)) AssistantComponent = assistantMessage;
-				else if (typeof assistantMessage === "string") assistantSlotProps = { className: assistantMessage };
-				else if (assistantMessage && typeof assistantMessage === "object") assistantSlotProps = assistantMessage;
-				elements.push(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(MemoizedAssistantMessage, {
-					message,
-					messages,
-					isRunning,
-					AssistantMessageComponent: AssistantComponent,
-					slotProps: assistantSlotProps
-				}, message.id));
-			} else if (message.role === "user") {
-				let UserComponent = CopilotChatUserMessage_default;
-				let userSlotProps;
-				if (isReactComponentType(userMessage)) UserComponent = userMessage;
-				else if (typeof userMessage === "string") userSlotProps = { className: userMessage };
-				else if (userMessage && typeof userMessage === "object") userSlotProps = userMessage;
-				elements.push(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(MemoizedUserMessage, {
-					message,
-					UserMessageComponent: UserComponent,
-					slotProps: userSlotProps
-				}, message.id));
-			} else if (message.role === "activity") {
-				const activityMsg = message;
-				elements.push(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(MemoizedActivityMessage, {
-					message: activityMsg,
-					renderActivityMessage
-				}, message.id));
-			} else if (message.role === "reasoning") {
-				let ReasoningComponent = CopilotChatReasoningMessage_default;
-				let reasoningSlotProps;
-				if (isReactComponentType(reasoningMessage)) ReasoningComponent = reasoningMessage;
-				else if (typeof reasoningMessage === "string") reasoningSlotProps = { className: reasoningMessage };
-				else if (reasoningMessage && typeof reasoningMessage === "object") reasoningSlotProps = reasoningMessage;
-				elements.push(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(MemoizedReasoningMessage, {
-					message,
-					messages,
-					isRunning,
-					ReasoningMessageComponent: ReasoningComponent,
-					slotProps: reasoningSlotProps
-				}, message.id));
-			}
+			if (message.role === "assistant") elements.push(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(MemoizedAssistantMessage, {
+				message,
+				messages,
+				isRunning,
+				AssistantMessageComponent: AssistantComponent,
+				slotProps: assistantSlotProps
+			}, message.id));
+			else if (message.role === "user") elements.push(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(MemoizedUserMessage, {
+				message,
+				UserMessageComponent: UserComponent,
+				slotProps: userSlotProps
+			}, message.id));
+			else if (message.role === "activity") elements.push(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(MemoizedActivityMessage, {
+				message,
+				renderActivityMessage
+			}, message.id));
+			else if (message.role === "reasoning") elements.push(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(MemoizedReasoningMessage, {
+				message,
+				messages,
+				isRunning,
+				ReasoningMessageComponent: ReasoningComponent,
+				slotProps: reasoningSlotProps
+			}, message.id));
 			if (renderCustomMessage) elements.push(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(MemoizedCustomMessage, {
 				message,
 				position: "after",
 				renderCustomMessage,
 				stateSnapshot
 			}, `${message.id}-custom-after`));
-			return elements;
-		}).filter(Boolean);
+			return elements.filter(Boolean);
+		};
+		const messageElements = shouldVirtualize ? [] : deduplicatedMessages.flatMap(renderMessageBlock);
 		if (children) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			"data-copilotkit": true,
 			style: { display: "contents" },
@@ -4492,30 +5839,356 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 				interruptElement
 			})
 		});
-		const lastMessage = messages[messages.length - 1];
-		const showCursor = isRunning && (lastMessage === null || lastMessage === void 0 ? void 0 : lastMessage.role) !== "reasoning";
+		const lastMessage = messages[messages.length - 1];
+		const showCursor = isRunning && (lastMessage === null || lastMessage === void 0 ? void 0 : lastMessage.role) !== "reasoning";
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			"data-copilotkit": true,
+			"data-testid": "copilot-message-list",
+			className: (0, tailwind_merge.twMerge)("copilotKitMessages cpk:flex cpk:flex-col", className),
+			...props,
+			children: [
+				shouldVirtualize ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					style: {
+						height: virtualizer.getTotalSize(),
+						position: "relative"
+					},
+					children: virtualizer.getVirtualItems().map((virtualItem) => {
+						const message = deduplicatedMessages[virtualItem.index];
+						return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							"data-index": virtualItem.index,
+							ref: virtualizer.measureElement,
+							style: {
+								position: "absolute",
+								top: 0,
+								left: 0,
+								width: "100%",
+								transform: `translateY(${virtualItem.start}px)`
+							},
+							children: renderMessageBlock(message)
+						}, message.id);
+					})
+				}) : messageElements,
+				interruptElement,
+				showCursor && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "cpk:mt-2",
+					children: renderSlot(cursor, CopilotChatMessageView.Cursor, {})
+				})
+			]
+		});
+	}
+	CopilotChatMessageView.Cursor = function Cursor({ className, ...props }) {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			"data-testid": "copilot-loading-cursor",
+			className: (0, tailwind_merge.twMerge)("cpk:w-[11px] cpk:h-[11px] cpk:rounded-full cpk:bg-foreground cpk:animate-pulse-cursor cpk:ml-1", className),
+			...props
+		});
+	};
+
+//#endregion
+//#region src/v2/components/chat/CopilotChatAttachmentQueue.tsx
+	const CopilotChatAttachmentQueue = ({ attachments, onRemoveAttachment, className }) => {
+		if (attachments.length === 0) return null;
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: cn("cpk:flex cpk:flex-wrap cpk:gap-2 cpk:p-2", className),
+			children: attachments.map((attachment) => {
+				const isMedia = attachment.type === "image" || attachment.type === "video";
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: cn("cpk:relative cpk:inline-flex cpk:rounded-lg cpk:overflow-hidden cpk:border cpk:border-border", isMedia ? "cpk:w-[72px] cpk:h-[72px]" : attachment.type === "audio" ? "cpk:min-w-[200px] cpk:max-w-[280px] cpk:flex-col cpk:p-1 cpk:pr-8" : "cpk:p-2 cpk:px-3 cpk:pr-8 cpk:max-w-[240px]"),
+					children: [
+						attachment.status === "uploading" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(UploadingOverlay, {}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(AttachmentPreview, { attachment }),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							onClick: () => onRemoveAttachment(attachment.id),
+							className: cn("cpk:absolute cpk:bg-black/60 cpk:text-white cpk:border-none cpk:rounded-full cpk:w-5 cpk:h-5 cpk:flex cpk:items-center cpk:justify-center cpk:cursor-pointer cpk:text-[10px] cpk:z-20", isMedia ? "cpk:top-1 cpk:right-1" : "cpk:top-1.5 cpk:right-1.5"),
+							"aria-label": "Remove attachment",
+							children: "✕"
+						})
+					]
+				}, attachment.id);
+			})
+		});
+	};
+	function UploadingOverlay() {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "cpk:absolute cpk:inset-0 cpk:flex cpk:items-center cpk:justify-center cpk:bg-black/40 cpk:z-10",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "cpk:w-5 cpk:h-5 cpk:border-2 cpk:border-white cpk:border-t-transparent cpk:rounded-full cpk:animate-spin" })
+		});
+	}
+	function AttachmentPreview({ attachment }) {
+		if (attachment.status === "uploading") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "cpk:w-full cpk:h-full" });
+		switch (attachment.type) {
+			case "image": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ImagePreview, { attachment });
+			case "audio": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AudioPreview, { attachment });
+			case "video": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(VideoPreview, { attachment });
+			case "document": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DocumentPreview, { attachment });
+		}
+	}
+	function Lightbox({ onClose, children }) {
+		(0, react.useEffect)(() => {
+			const handleKey = (e) => {
+				if (e.key === "Escape") onClose();
+			};
+			document.addEventListener("keydown", handleKey);
+			return () => document.removeEventListener("keydown", handleKey);
+		}, [onClose]);
+		if (typeof document === "undefined") return null;
+		return (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "cpk:fixed cpk:inset-0 cpk:z-[9999] cpk:flex cpk:items-center cpk:justify-center cpk:bg-black/80 cpk:animate-fade-in",
+			onClick: onClose,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				onClick: onClose,
+				className: "cpk:absolute cpk:top-4 cpk:right-4 cpk:text-white cpk:bg-white/10 cpk:hover:bg-white/20 cpk:rounded-full cpk:w-10 cpk:h-10 cpk:flex cpk:items-center cpk:justify-center cpk:cursor-pointer cpk:border-none cpk:z-10",
+				"aria-label": "Close preview",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.X, { className: "cpk:w-5 cpk:h-5" })
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				onClick: (e) => e.stopPropagation(),
+				children
+			})]
+		}), document.body);
+	}
+	/**
+	* Hook that manages lightbox open/close and uses the View Transition API to
+	* morph the thumbnail into fullscreen content.
+	*
+	* The trick: `view-transition-name` must live on exactly ONE element at a time.
+	* - Old state (thumbnail visible): name is on the thumbnail.
+	* - New state (lightbox visible): name moves to the lightbox content.
+	* `flushSync` ensures React commits the DOM change synchronously inside the
+	* `startViewTransition` callback so the API can snapshot old → new correctly.
+	*/
+	function useLightbox() {
+		const thumbnailRef = (0, react.useRef)(null);
+		const [open, setOpen] = (0, react.useState)(false);
+		const vtName = (0, react.useId)();
+		return {
+			thumbnailRef,
+			vtName,
+			open,
+			openLightbox: (0, react.useCallback)(() => {
+				const thumb = thumbnailRef.current;
+				const doc = document;
+				if (doc.startViewTransition && thumb) {
+					thumb.style.viewTransitionName = vtName;
+					doc.startViewTransition(() => {
+						thumb.style.viewTransitionName = "";
+						(0, react_dom.flushSync)(() => setOpen(true));
+					});
+				} else setOpen(true);
+			}, []),
+			closeLightbox: (0, react.useCallback)(() => {
+				const thumb = thumbnailRef.current;
+				const doc = document;
+				if (doc.startViewTransition && thumb) doc.startViewTransition(() => {
+					(0, react_dom.flushSync)(() => setOpen(false));
+					thumb.style.viewTransitionName = vtName;
+				}).finished.then(() => {
+					thumb.style.viewTransitionName = "";
+				}).catch(() => {
+					thumb.style.viewTransitionName = "";
+				});
+				else setOpen(false);
+			}, [])
+		};
+	}
+	function ImagePreview({ attachment }) {
+		const src = (0, _copilotkit_shared.getSourceUrl)(attachment.source);
+		const { thumbnailRef, vtName, open, openLightbox, closeLightbox } = useLightbox();
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+			ref: thumbnailRef,
+			src,
+			alt: attachment.filename || "Image attachment",
+			className: "cpk:w-full cpk:h-full cpk:object-cover cpk:cursor-pointer",
+			onClick: openLightbox
+		}), open && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Lightbox, {
+			onClose: closeLightbox,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+				style: { viewTransitionName: vtName },
+				src,
+				alt: attachment.filename || "Image attachment",
+				className: "cpk:max-w-[90vw] cpk:max-h-[90vh] cpk:object-contain cpk:rounded-lg"
+			})
+		})] });
+	}
+	function AudioPreview({ attachment }) {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "cpk:flex cpk:flex-col cpk:gap-1 cpk:w-full",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("audio", {
+				src: (0, _copilotkit_shared.getSourceUrl)(attachment.source),
+				controls: true,
+				preload: "metadata",
+				className: "cpk:w-full cpk:h-8"
+			}), attachment.filename && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "cpk:text-xs cpk:font-medium cpk:overflow-hidden cpk:text-ellipsis cpk:whitespace-nowrap",
+				children: attachment.filename
+			})]
+		});
+	}
+	function VideoPreview({ attachment }) {
+		const src = (0, _copilotkit_shared.getSourceUrl)(attachment.source);
+		const { thumbnailRef, vtName, open, openLightbox, closeLightbox } = useLightbox();
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				ref: thumbnailRef,
+				className: "cpk:w-full cpk:h-full",
+				children: attachment.thumbnail ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+					src: attachment.thumbnail,
+					alt: attachment.filename || "Video thumbnail",
+					className: "cpk:w-full cpk:h-full cpk:object-cover"
+				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("video", {
+					src,
+					preload: "metadata",
+					muted: true,
+					className: "cpk:w-full cpk:h-full cpk:object-cover"
+				})
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				onClick: openLightbox,
+				className: "cpk:absolute cpk:inset-0 cpk:flex cpk:items-center cpk:justify-center cpk:z-10 cpk:cursor-pointer cpk:bg-black/20 cpk:border-none cpk:p-0",
+				"aria-label": "Play video",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "cpk:w-8 cpk:h-8 cpk:rounded-full cpk:bg-black/60 cpk:flex cpk:items-center cpk:justify-center",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Play, { className: "cpk:w-4 cpk:h-4 cpk:text-white cpk:ml-0.5" })
+				})
+			}),
+			open && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Lightbox, {
+				onClose: closeLightbox,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("video", {
+					style: { viewTransitionName: vtName },
+					src,
+					controls: true,
+					autoPlay: true,
+					className: "cpk:max-w-[90vw] cpk:max-h-[90vh] cpk:rounded-lg"
+				})
+			})
+		] });
+	}
+	function isPdf(mimeType) {
+		return !!mimeType && mimeType.includes("pdf");
+	}
+	function isText(mimeType) {
+		return !!mimeType && mimeType.startsWith("text/");
+	}
+	function canPreviewInBrowser(mimeType) {
+		return isPdf(mimeType) || isText(mimeType);
+	}
+	/**
+	* Convert a base64-encoded data source to a blob: URL that browsers will
+	* render inside an iframe (data: URLs are blocked for PDFs in most browsers).
+	*/
+	function useBlobUrl(attachment) {
+		const [url, setUrl] = (0, react.useState)(null);
+		(0, react.useEffect)(() => {
+			if (attachment.source.type !== "data") return;
+			try {
+				const binary = atob(attachment.source.value);
+				const bytes = new Uint8Array(binary.length);
+				for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i);
+				const blob = new Blob([bytes], { type: attachment.source.mimeType || "application/octet-stream" });
+				const blobUrl = URL.createObjectURL(blob);
+				setUrl(blobUrl);
+				return () => URL.revokeObjectURL(blobUrl);
+			} catch (error) {
+				console.error("[CopilotKit] Failed to decode attachment data:", error);
+				setUrl(null);
+			}
+		}, [
+			attachment.source.type,
+			attachment.source.value,
+			attachment.source.mimeType
+		]);
+		if (attachment.source.type === "url") return attachment.source.value;
+		return url;
+	}
+	function DocumentLightboxContent({ attachment, vtName }) {
+		const mimeType = attachment.source.mimeType;
+		const blobUrl = useBlobUrl(attachment);
+		if (isPdf(mimeType)) {
+			if (!blobUrl) return null;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("iframe", {
+				style: { viewTransitionName: vtName },
+				src: blobUrl,
+				title: attachment.filename || "PDF preview",
+				className: "cpk:w-[90vw] cpk:h-[90vh] cpk:max-w-[1000px] cpk:rounded-lg cpk:bg-white"
+			});
+		}
+		if (isText(mimeType)) {
+			const textContent = attachment.source.type === "data" ? (() => {
+				try {
+					return atob(attachment.source.value);
+				} catch (_unused) {
+					return attachment.source.value;
+				}
+			})() : null;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				style: { viewTransitionName: vtName },
+				className: "cpk:w-[90vw] cpk:max-w-[800px] cpk:max-h-[90vh] cpk:overflow-auto cpk:rounded-lg cpk:bg-white cpk:dark:bg-gray-900 cpk:p-6",
+				children: [attachment.filename && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "cpk:text-sm cpk:font-medium cpk:text-gray-500 cpk:dark:text-gray-400 cpk:mb-4 cpk:pb-2 cpk:border-b cpk:border-gray-200 cpk:dark:border-gray-700",
+					children: attachment.filename
+				}), textContent ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("pre", {
+					className: "cpk:text-sm cpk:whitespace-pre-wrap cpk:break-words cpk:text-gray-800 cpk:dark:text-gray-200 cpk:font-mono cpk:m-0",
+					children: textContent
+				}) : blobUrl ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("iframe", {
+					src: blobUrl,
+					title: attachment.filename || "Text preview",
+					className: "cpk:w-full cpk:h-[80vh] cpk:border-none"
+				}) : null]
+			});
+		}
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			"data-copilotkit": true,
-			"data-testid": "copilot-message-list",
-			className: (0, tailwind_merge.twMerge)("copilotKitMessages cpk:flex cpk:flex-col", className),
-			...props,
+			style: { viewTransitionName: vtName },
+			className: "cpk:flex cpk:flex-col cpk:items-center cpk:gap-4 cpk:p-8 cpk:rounded-lg cpk:bg-white cpk:dark:bg-gray-900",
 			children: [
-				messageElements,
-				interruptElement,
-				showCursor && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "cpk:mt-2",
-					children: renderSlot(cursor, CopilotChatMessageView.Cursor, {})
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "cpk:w-16 cpk:h-16 cpk:rounded-xl cpk:bg-primary cpk:text-primary-foreground cpk:flex cpk:items-center cpk:justify-center cpk:text-xl cpk:font-bold",
+					children: (0, _copilotkit_shared.getDocumentIcon)(mimeType !== null && mimeType !== void 0 ? mimeType : "")
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "cpk:text-center",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "cpk:text-base cpk:font-medium cpk:text-gray-800 cpk:dark:text-gray-200",
+						children: attachment.filename || "Document"
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "cpk:text-sm cpk:text-gray-500 cpk:dark:text-gray-400 cpk:mt-1",
+						children: [mimeType || "Unknown type", attachment.size != null && ` · ${(0, _copilotkit_shared.formatFileSize)(attachment.size)}`]
+					})]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "cpk:text-xs cpk:text-gray-400 cpk:dark:text-gray-500",
+					children: "No preview available for this file type"
 				})
 			]
 		});
 	}
-	CopilotChatMessageView.Cursor = function Cursor({ className, ...props }) {
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			"data-testid": "copilot-loading-cursor",
-			className: (0, tailwind_merge.twMerge)("cpk:w-[11px] cpk:h-[11px] cpk:rounded-full cpk:bg-foreground cpk:animate-pulse-cursor cpk:ml-1", className),
-			...props
-		});
-	};
+	function DocumentPreview({ attachment }) {
+		const { thumbnailRef, vtName, open, openLightbox, closeLightbox } = useLightbox();
+		const mimeType = attachment.source.mimeType;
+		const previewable = canPreviewInBrowser(mimeType);
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			ref: thumbnailRef,
+			className: cn("cpk:flex cpk:items-center cpk:gap-2", previewable && "cpk:cursor-pointer"),
+			onClick: previewable ? openLightbox : void 0,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "cpk:w-8 cpk:h-8 cpk:rounded-md cpk:bg-primary cpk:text-primary-foreground cpk:flex cpk:items-center cpk:justify-center cpk:text-[10px] cpk:font-semibold cpk:shrink-0",
+				children: (0, _copilotkit_shared.getDocumentIcon)(mimeType !== null && mimeType !== void 0 ? mimeType : "")
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "cpk:flex cpk:flex-col cpk:min-w-0",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "cpk:text-xs cpk:font-medium cpk:break-all cpk:leading-tight",
+					children: attachment.filename || "Document"
+				}), attachment.size != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "cpk:text-[11px] cpk:text-muted-foreground",
+					children: (0, _copilotkit_shared.formatFileSize)(attachment.size)
+				})]
+			})]
+		}), open && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Lightbox, {
+			onClose: closeLightbox,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DocumentLightboxContent, {
+				attachment,
+				vtName
+			})
+		})] });
+	}
 
 //#endregion
 //#region src/v2/hooks/use-keyboard-height.tsx
@@ -4561,7 +6234,19 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 //#endregion
 //#region src/v2/components/chat/CopilotChatView.tsx
 	const FEATHER_HEIGHT = 96;
-	function CopilotChatView({ messageView, input, scrollView, suggestionView, welcomeScreen, messages = [], autoScroll = true, isRunning = false, suggestions, suggestionLoadingIndexes, onSelectSuggestion, onSubmitMessage, onStop, inputMode, inputValue, onInputChange, onStartTranscribe, onCancelTranscribe, onFinishTranscribe, onFinishTranscribeWithAudio, disclaimer, children, className, ...props }) {
+	function DropOverlay() {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: cn("cpk:absolute cpk:inset-0 cpk:z-50 cpk:pointer-events-none", "cpk:flex cpk:items-center cpk:justify-center", "cpk:bg-primary/5 cpk:backdrop-blur-[2px]", "cpk:border-2 cpk:border-dashed cpk:border-primary/40 cpk:rounded-lg cpk:m-2"),
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "cpk:flex cpk:flex-col cpk:items-center cpk:gap-2 cpk:text-primary/70",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Upload, { className: "cpk:w-8 cpk:h-8" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "cpk:text-sm cpk:font-medium",
+					children: "Drop files here"
+				})]
+			})
+		});
+	}
+	function CopilotChatView({ messageView, input, scrollView, suggestionView, welcomeScreen, messages = [], autoScroll = true, isRunning = false, suggestions, suggestionLoadingIndexes, onSelectSuggestion, onSubmitMessage, onStop, inputMode, inputValue, onInputChange, onStartTranscribe, onCancelTranscribe, onFinishTranscribe, onFinishTranscribeWithAudio, attachments, onRemoveAttachment, onAddFile, dragOver, onDragOver, onDragLeave, onDrop, disclaimer, children, className, ...props }) {
 		const inputContainerRef = (0, react.useRef)(null);
 		const [inputContainerHeight, setInputContainerHeight] = (0, react.useState)(0);
 		const [isResizing, setIsResizing] = (0, react.useState)(false);
@@ -4608,6 +6293,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 			onCancelTranscribe,
 			onFinishTranscribe,
 			onFinishTranscribeWithAudio,
+			onAddFile,
 			positioning: "static",
 			keyboardHeight: isKeyboardOpen ? keyboardHeight : 0,
 			containerRef: inputContainerRef,
@@ -4648,21 +6334,34 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 				onCancelTranscribe,
 				onFinishTranscribe,
 				onFinishTranscribeWithAudio,
+				onAddFile,
 				positioning: "static",
 				showDisclaimer: true,
 				...disclaimer !== void 0 ? { disclaimer } : {}
 			});
-			const BoundWelcomeScreen = renderSlot(welcomeScreen === true ? void 0 : welcomeScreen, CopilotChatView.WelcomeScreen, {
-				input: BoundInputForWelcome,
+			const welcomeScreenSlot = welcomeScreen === true ? void 0 : welcomeScreen;
+			const inputWithAttachments = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "cpk:w-full",
+				children: [attachments && attachments.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CopilotChatAttachmentQueue, {
+					attachments,
+					onRemoveAttachment: (id) => onRemoveAttachment === null || onRemoveAttachment === void 0 ? void 0 : onRemoveAttachment(id),
+					className: "cpk:mb-2"
+				}), BoundInputForWelcome]
+			});
+			const BoundWelcomeScreen = renderSlot(welcomeScreenSlot, CopilotChatView.WelcomeScreen, {
+				input: inputWithAttachments,
 				suggestionView: BoundSuggestionView !== null && BoundSuggestionView !== void 0 ? BoundSuggestionView : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, {})
 			});
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				"data-copilotkit": true,
 				"data-testid": "copilot-chat",
 				"data-copilot-running": isRunning ? "true" : "false",
-				className: (0, tailwind_merge.twMerge)("copilotKitChat cpk:relative cpk:h-full cpk:flex cpk:flex-col", className),
+				onDragOver,
+				onDragLeave,
+				onDrop,
+				className: cn("copilotKitChat cpk:relative cpk:h-full cpk:flex cpk:flex-col", className),
 				...props,
-				children: BoundWelcomeScreen
+				children: [dragOver && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DropOverlay, {}), BoundWelcomeScreen]
 			});
 		}
 		if (children) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -4679,39 +6378,67 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 			"data-copilotkit": true,
 			"data-testid": "copilot-chat",
 			"data-copilot-running": isRunning ? "true" : "false",
-			className: (0, tailwind_merge.twMerge)("copilotKitChat cpk:relative cpk:h-full cpk:flex cpk:flex-col", className),
+			onDragOver,
+			onDragLeave,
+			onDrop,
+			className: cn("copilotKitChat cpk:relative cpk:h-full cpk:flex cpk:flex-col", className),
 			...props,
-			children: [BoundScrollView, BoundInput]
+			children: [
+				dragOver && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DropOverlay, {}),
+				BoundScrollView,
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "cpk:max-w-3xl cpk:mx-auto cpk:w-full",
+					children: attachments && attachments.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CopilotChatAttachmentQueue, {
+						attachments,
+						onRemoveAttachment: (id) => onRemoveAttachment === null || onRemoveAttachment === void 0 ? void 0 : onRemoveAttachment(id),
+						className: "cpk:px-4"
+					})
+				}),
+				BoundInput
+			]
 		});
 	}
 	(function(_CopilotChatView) {
 		const ScrollContent = ({ children, scrollToBottomButton, feather, inputContainerHeight, isResizing }) => {
-			const { isAtBottom, scrollToBottom } = (0, use_stick_to_bottom.useStickToBottomContext)();
+			const { isAtBottom, scrollToBottom, scrollRef } = (0, use_stick_to_bottom.useStickToBottomContext)();
+			const [scrollEl, setScrollEl] = (0, react.useState)(null);
+			(0, react.useLayoutEffect)(() => {
+				var _scrollRef$current;
+				setScrollEl((_scrollRef$current = scrollRef.current) !== null && _scrollRef$current !== void 0 ? _scrollRef$current : null);
+			}, []);
 			const BoundFeather = renderSlot(feather, CopilotChatView.Feather, {});
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(use_stick_to_bottom.StickToBottom.Content, {
-					className: "cpk:overflow-y-auto cpk:overflow-x-hidden",
-					style: {
-						flex: "1 1 0%",
-						minHeight: 0
-					},
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: "cpk:px-4 cpk:sm:px-0 cpk:[div[data-sidebar-chat]_&]:px-8 cpk:[div[data-popup-chat]_&]:px-6",
-						children
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ScrollElementContext.Provider, {
+				value: scrollEl,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(use_stick_to_bottom.StickToBottom.Content, {
+						className: "cpk:overflow-y-auto cpk:overflow-x-hidden",
+						style: {
+							flex: "1 1 0%",
+							minHeight: 0
+						},
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "cpk:px-4 cpk:sm:px-0 cpk:[div[data-sidebar-chat]_&]:px-8 cpk:[div[data-popup-chat]_&]:px-6",
+							children
+						})
+					}),
+					BoundFeather,
+					!isAtBottom && !isResizing && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "cpk:absolute cpk:inset-x-0 cpk:flex cpk:justify-center cpk:z-30 cpk:pointer-events-none",
+						style: { bottom: `${inputContainerHeight + FEATHER_HEIGHT + 16}px` },
+						children: renderSlot(scrollToBottomButton, CopilotChatView.ScrollToBottomButton, { onClick: () => scrollToBottom() })
 					})
-				}),
-				BoundFeather,
-				!isAtBottom && !isResizing && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "cpk:absolute cpk:inset-x-0 cpk:flex cpk:justify-center cpk:z-30 cpk:pointer-events-none",
-					style: { bottom: `${inputContainerHeight + FEATHER_HEIGHT + 16}px` },
-					children: renderSlot(scrollToBottomButton, CopilotChatView.ScrollToBottomButton, { onClick: () => scrollToBottom() })
-				})
-			] });
+				] })
+			});
 		};
 		_CopilotChatView.ScrollView = ({ children, autoScroll = true, scrollToBottomButton, feather, inputContainerHeight = 0, isResizing = false, className, ...props }) => {
 			const [hasMounted, setHasMounted] = (0, react.useState)(false);
 			const { scrollRef, contentRef, scrollToBottom } = (0, use_stick_to_bottom.useStickToBottom)();
 			const [showScrollButton, setShowScrollButton] = (0, react.useState)(false);
+			const [nonAutoScrollEl, setNonAutoScrollEl] = (0, react.useState)(null);
+			const nonAutoScrollRefCallback = (0, react.useCallback)((el) => {
+				scrollRef.current = el;
+				setNonAutoScrollEl(el);
+			}, []);
 			(0, react.useEffect)(() => {
 				setHasMounted(true);
 			}, []);
@@ -4740,23 +6467,26 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 			});
 			if (!autoScroll) {
 				const BoundFeather = renderSlot(feather, CopilotChatView.Feather, {});
-				return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					ref: scrollRef,
-					className: cn("cpk:h-full cpk:max-h-full cpk:flex cpk:flex-col cpk:min-h-0 cpk:overflow-y-auto cpk:overflow-x-hidden cpk:relative", className),
-					...props,
-					children: [
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							ref: contentRef,
-							className: "cpk:px-4 cpk:sm:px-0 cpk:[div[data-sidebar-chat]_&]:px-8 cpk:[div[data-popup-chat]_&]:px-6",
-							children
-						}),
-						BoundFeather,
-						showScrollButton && !isResizing && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: "cpk:absolute cpk:inset-x-0 cpk:flex cpk:justify-center cpk:z-30 cpk:pointer-events-none",
-							style: { bottom: `${inputContainerHeight + FEATHER_HEIGHT + 16}px` },
-							children: renderSlot(scrollToBottomButton, CopilotChatView.ScrollToBottomButton, { onClick: () => scrollToBottom() })
-						})
-					]
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ScrollElementContext.Provider, {
+					value: nonAutoScrollEl,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						ref: nonAutoScrollRefCallback,
+						className: cn("cpk:h-full cpk:max-h-full cpk:flex cpk:flex-col cpk:min-h-0 cpk:overflow-y-auto cpk:overflow-x-hidden cpk:relative", className),
+						...props,
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								ref: contentRef,
+								className: "cpk:px-4 cpk:sm:px-0 cpk:[div[data-sidebar-chat]_&]:px-8 cpk:[div[data-popup-chat]_&]:px-6",
+								children
+							}),
+							BoundFeather,
+							showScrollButton && !isResizing && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "cpk:absolute cpk:inset-x-0 cpk:flex cpk:justify-center cpk:z-30 cpk:pointer-events-none",
+								style: { bottom: `${inputContainerHeight + FEATHER_HEIGHT + 16}px` },
+								children: renderSlot(scrollToBottomButton, CopilotChatView.ScrollToBottomButton, { onClick: () => scrollToBottom() })
+							})
+						]
+					})
 				});
 			}
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(use_stick_to_bottom.StickToBottom, {
@@ -4951,8 +6681,8 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 
 //#endregion
 //#region src/v2/components/chat/CopilotChat.tsx
-	function CopilotChat({ agentId, threadId, labels, chatView, isModalDefaultOpen, onError, ...props }) {
-		var _ref;
+	function CopilotChat({ agentId, threadId, labels, chatView, isModalDefaultOpen, attachments: attachmentsConfig, onError, throttleMs, ...props }) {
+		var _ref, _attachmentsConfig$ac;
 		const existingConfig = useCopilotChatConfiguration();
 		const resolvedAgentId = (_ref = agentId !== null && agentId !== void 0 ? agentId : existingConfig === null || existingConfig === void 0 ? void 0 : existingConfig.agentId) !== null && _ref !== void 0 ? _ref : _copilotkit_shared.DEFAULT_AGENT_ID;
 		const resolvedThreadId = (0, react.useMemo)(() => {
@@ -4961,7 +6691,8 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 		}, [threadId, existingConfig === null || existingConfig === void 0 ? void 0 : existingConfig.threadId]);
 		const { agent } = useAgent({
 			agentId: resolvedAgentId,
-			threadId: resolvedThreadId
+			threadId: resolvedThreadId,
+			throttleMs
 		});
 		const { copilotkit } = useCopilotKit();
 		const { suggestions: autoSuggestions } = useSuggestions({ agentId: resolvedAgentId });
@@ -4995,6 +6726,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 		const [inputValue, setInputValue] = (0, react.useState)("");
 		const [transcriptionError, setTranscriptionError] = (0, react.useState)(null);
 		const [isTranscribing, setIsTranscribing] = (0, react.useState)(false);
+		const { attachments: selectedAttachments, enabled: attachmentsEnabled, dragOver, fileInputRef, containerRef: chatContainerRef, handleFileUpload, handleDragOver, handleDragLeave, handleDrop, removeAttachment, consumeAttachments } = useAttachments({ config: attachmentsConfig });
 		const isTranscriptionEnabled = copilotkit.audioFileTranscriptionEnabled;
 		const isMediaRecorderSupported = typeof window !== "undefined" && typeof MediaRecorder !== "undefined";
 		const { messageView: providedMessageView, suggestionView: providedSuggestionView, onStop: providedStopHandler, ...restProps } = props;
@@ -5022,7 +6754,31 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 			resolvedAgentId
 		]);
 		const onSubmitInput = (0, react.useCallback)(async (value) => {
-			agent.addMessage({
+			if (selectedAttachments.some((a) => a.status === "uploading")) {
+				console.error("[CopilotKit] Cannot send while attachments are uploading");
+				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({
+					type: att.type,
+					source: att.source,
+					metadata: {
+						...att.filename ? { filename: att.filename } : {},
+						...att.metadata
+					}
+				});
+				agent.addMessage({
+					id: (0, _copilotkit_shared.randomUUID)(),
+					role: "user",
+					content: contentParts
+				});
+			} else agent.addMessage({
 				id: (0, _copilotkit_shared.randomUUID)(),
 				role: "user",
 				content: value
@@ -5033,7 +6789,11 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 			} catch (error) {
 				console.error("CopilotChat: runAgent failed", error);
 			}
-		}, [agent]);
+		}, [
+			agent,
+			selectedAttachments,
+			consumeAttachments
+		]);
 		const handleSelectSuggestion = (0, react.useCallback)(async (suggestion) => {
 			agent.addMessage({
 				id: (0, _copilotkit_shared.randomUUID)(),
@@ -5120,21 +6880,37 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 				return () => clearTimeout(timer);
 			}
 		}, [transcriptionError]);
-		const mergedProps = (0, ts_deepmerge.merge)({
+		const stableMessageView = useShallowStableRef(typeof providedMessageView === "string" ? { className: providedMessageView } : providedMessageView);
+		const stableSuggestionView = useShallowStableRef(providedSuggestionView);
+		const handleAddFile = (0, react.useCallback)(() => {
+			setTimeout(() => {
+				var _fileInputRef$current;
+				(_fileInputRef$current = fileInputRef.current) === null || _fileInputRef$current === void 0 || _fileInputRef$current.click();
+			}, 100);
+		}, []);
+		const mergedProps = {
 			isRunning: agent.isRunning,
 			suggestions: autoSuggestions,
 			onSelectSuggestion: handleSelectSuggestion,
-			suggestionView: providedSuggestionView
-		}, {
-			...restProps,
-			...typeof providedMessageView === "string" ? { messageView: { className: providedMessageView } } : providedMessageView !== void 0 ? { messageView: providedMessageView } : {}
-		});
+			suggestionView: stableSuggestionView,
+			...restProps
+		};
+		if (stableMessageView !== void 0) mergedProps.messageView = stableMessageView;
 		const hasMessages = agent.messages.length > 0;
 		const effectiveStopHandler = agent.isRunning && hasMessages ? providedStopHandler !== null && providedStopHandler !== void 0 ? providedStopHandler : stopCurrentRun : providedStopHandler;
 		const showTranscription = isTranscriptionEnabled && isMediaRecorderSupported;
 		const effectiveMode = isTranscribing ? "processing" : transcribeMode;
-		const RenderedChatView = renderSlot(chatView, CopilotChatView, (0, ts_deepmerge.merge)(mergedProps, {
-			messages: (0, react.useMemo)(() => [...agent.messages], [JSON.stringify(agent.messages)]),
+		const messages = (0, react.useMemo)(() => [...agent.messages], [agent.messages.map((m) => {
+			const contentKey = typeof m.content === "string" ? m.content.length : Array.isArray(m.content) ? m.content.length : 0;
+			const toolCallsKey = "toolCalls" in m && Array.isArray(m.toolCalls) ? m.toolCalls.map((tc) => {
+				var _tc$function$argument, _tc$function;
+				return `${tc.id}:${(_tc$function$argument = (_tc$function = tc.function) === null || _tc$function === void 0 || (_tc$function = _tc$function.arguments) === null || _tc$function === void 0 ? void 0 : _tc$function.length) !== null && _tc$function$argument !== void 0 ? _tc$function$argument : 0}`;
+			}).join(";") : "";
+			return `${m.id}:${m.role}:${contentKey}:${toolCallsKey}`;
+		}).join(",")]);
+		const RenderedChatView = renderSlot(chatView, CopilotChatView, {
+			...mergedProps,
+			messages,
 			onSubmitMessage: onSubmitInput,
 			onStop: effectiveStopHandler,
 			inputMode: effectiveMode,
@@ -5143,32 +6919,51 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 			onStartTranscribe: showTranscription ? handleStartTranscribe : void 0,
 			onCancelTranscribe: showTranscription ? handleCancelTranscribe : void 0,
 			onFinishTranscribe: showTranscription ? handleFinishTranscribe : void 0,
-			onFinishTranscribeWithAudio: showTranscription ? handleFinishTranscribeWithAudio : void 0
-		}));
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(CopilotChatConfigurationProvider, {
+			onFinishTranscribeWithAudio: showTranscription ? handleFinishTranscribeWithAudio : void 0,
+			attachments: selectedAttachments,
+			onRemoveAttachment: removeAttachment,
+			onAddFile: attachmentsEnabled ? handleAddFile : void 0,
+			dragOver,
+			onDragOver: handleDragOver,
+			onDragLeave: handleDragLeave,
+			onDrop: handleDrop
+		});
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CopilotChatConfigurationProvider, {
 			agentId: resolvedAgentId,
 			threadId: resolvedThreadId,
 			labels,
 			isModalDefaultOpen,
-			children: [
-				!isChatLicensed && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InlineFeatureWarning, { featureName: "Chat" }),
-				transcriptionError && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					style: {
-						position: "absolute",
-						bottom: "100px",
-						left: "50%",
-						transform: "translateX(-50%)",
-						backgroundColor: "#ef4444",
-						color: "white",
-						padding: "8px 16px",
-						borderRadius: "8px",
-						fontSize: "14px",
-						zIndex: 50
-					},
-					children: transcriptionError
-				}),
-				RenderedChatView
-			]
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				ref: chatContainerRef,
+				style: { display: "contents" },
+				children: [
+					attachmentsEnabled && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+						type: "file",
+						multiple: true,
+						ref: fileInputRef,
+						onChange: handleFileUpload,
+						accept: (_attachmentsConfig$ac = attachmentsConfig === null || attachmentsConfig === void 0 ? void 0 : attachmentsConfig.accept) !== null && _attachmentsConfig$ac !== void 0 ? _attachmentsConfig$ac : "*/*",
+						style: { display: "none" }
+					}),
+					!isChatLicensed && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InlineFeatureWarning, { featureName: "Chat" }),
+					transcriptionError && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						style: {
+							position: "absolute",
+							bottom: "100px",
+							left: "50%",
+							transform: "translateX(-50%)",
+							backgroundColor: "#ef4444",
+							color: "white",
+							padding: "8px 16px",
+							borderRadius: "8px",
+							fontSize: "14px",
+							zIndex: 50
+						},
+						children: transcriptionError
+					}),
+					RenderedChatView
+				]
+			})
 		});
 	}
 	(function(_CopilotChat) {
@@ -6035,6 +7830,227 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 		if (!context) throw new Error("useToast must be used within a ToastProvider");
 		return context;
 	}
+	function formatBannerMessage(message) {
+		const jsonMatch = message.match(/'message':\s*'([^']+)'/);
+		if (jsonMatch) return jsonMatch[1];
+		let cleaned = message.split(" - ")[0];
+		cleaned = cleaned.split(": Error code")[0];
+		cleaned = cleaned.replace(/:\s*\d{3}$/, "");
+		cleaned = cleaned.replace(/See more:.*$/g, "");
+		cleaned = cleaned.trim();
+		return cleaned || "An error occurred.";
+	}
+	function extractUrl(message) {
+		const markdownMatch = /\[([^\]]+)\]\(([^)]+)\)/.exec(message);
+		if (markdownMatch) return {
+			url: markdownMatch[2],
+			text: "See More"
+		};
+		const plainMatch = /(https?:\/\/[^\s)]+)/.exec(message);
+		if (plainMatch) return {
+			url: plainMatch[0].replace(/[.,;:'"]*$/, ""),
+			text: "See More"
+		};
+		return null;
+	}
+	function BannerErrorDisplay({ bannerError, onDismiss }) {
+		const [detailsExpanded, setDetailsExpanded] = (0, react.useState)(false);
+		const colors = getErrorColors(getErrorSeverity(bannerError));
+		const details = bannerError.details;
+		const link = extractUrl(bannerError.message);
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			style: {
+				position: "fixed",
+				bottom: "20px",
+				left: "50%",
+				transform: "translateX(-50%)",
+				zIndex: 9999,
+				backgroundColor: colors.background,
+				border: `1px solid ${colors.border}`,
+				borderLeft: `4px solid ${colors.border}`,
+				borderRadius: "8px",
+				padding: "12px 16px",
+				fontSize: "13px",
+				boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
+				backdropFilter: "blur(8px)",
+				maxWidth: "min(90vw, 700px)",
+				width: "100%",
+				boxSizing: "border-box",
+				overflow: "hidden"
+			},
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				style: {
+					display: "flex",
+					justifyContent: "space-between",
+					alignItems: "center",
+					gap: "10px"
+				},
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					style: {
+						display: "flex",
+						alignItems: "center",
+						gap: "8px",
+						flex: 1,
+						minWidth: 0
+					},
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { style: {
+						width: "12px",
+						height: "12px",
+						borderRadius: "50%",
+						backgroundColor: colors.border,
+						flexShrink: 0
+					} }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						style: {
+							display: "flex",
+							alignItems: "center",
+							gap: "10px",
+							flex: 1,
+							minWidth: 0
+						},
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								style: {
+									color: colors.text,
+									lineHeight: "1.4",
+									fontWeight: "400",
+									fontSize: "13px",
+									flex: 1,
+									wordBreak: "break-all",
+									overflowWrap: "break-word",
+									maxWidth: "550px",
+									overflow: "hidden",
+									display: "-webkit-box",
+									WebkitLineClamp: 10,
+									WebkitBoxOrient: "vertical"
+								},
+								children: formatBannerMessage(bannerError.message)
+							}),
+							link && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								onClick: () => window.open(link.url, "_blank", "noopener,noreferrer"),
+								style: {
+									background: colors.border,
+									color: "white",
+									border: "none",
+									borderRadius: "5px",
+									padding: "4px 10px",
+									fontSize: "11px",
+									fontWeight: "500",
+									cursor: "pointer",
+									transition: "all 0.2s ease",
+									flexShrink: 0
+								},
+								onMouseEnter: (e) => {
+									e.currentTarget.style.opacity = "0.9";
+									e.currentTarget.style.transform = "translateY(-1px)";
+								},
+								onMouseLeave: (e) => {
+									e.currentTarget.style.opacity = "1";
+									e.currentTarget.style.transform = "translateY(0)";
+								},
+								children: link.text
+							}),
+							details && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								onClick: () => setDetailsExpanded(!detailsExpanded),
+								style: {
+									background: "transparent",
+									border: `1px solid ${colors.border}`,
+									borderRadius: "5px",
+									padding: "4px 10px",
+									fontSize: "11px",
+									fontWeight: "500",
+									cursor: "pointer",
+									color: colors.text,
+									flexShrink: 0,
+									transition: "all 0.2s ease"
+								},
+								onMouseEnter: (e) => {
+									e.currentTarget.style.background = "rgba(0, 0, 0, 0.05)";
+								},
+								onMouseLeave: (e) => {
+									e.currentTarget.style.background = "transparent";
+								},
+								children: detailsExpanded ? "Hide Details" : "Show Details"
+							})
+						]
+					})]
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					onClick: onDismiss,
+					style: {
+						background: "transparent",
+						border: "none",
+						color: colors.text,
+						cursor: "pointer",
+						padding: "2px",
+						borderRadius: "3px",
+						fontSize: "14px",
+						lineHeight: "1",
+						opacity: .6,
+						transition: "all 0.2s ease",
+						flexShrink: 0
+					},
+					title: "Dismiss",
+					onMouseEnter: (e) => {
+						e.currentTarget.style.opacity = "1";
+						e.currentTarget.style.background = "rgba(0, 0, 0, 0.05)";
+					},
+					onMouseLeave: (e) => {
+						e.currentTarget.style.opacity = "0.6";
+						e.currentTarget.style.background = "transparent";
+					},
+					children: "x"
+				})]
+			}), detailsExpanded && details && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				style: {
+					marginTop: "10px",
+					padding: "10px",
+					background: "rgba(0, 0, 0, 0.04)",
+					borderRadius: "6px",
+					fontSize: "11px",
+					fontFamily: "monospace",
+					color: colors.text,
+					lineHeight: "1.5",
+					maxHeight: "200px",
+					overflowY: "auto",
+					whiteSpace: "pre-wrap",
+					wordBreak: "break-all"
+				},
+				children: [
+					details.code && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", { children: "Code:" }),
+						" ",
+						details.code
+					] }),
+					details.originalMessage && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						style: { marginTop: "4px" },
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", { children: "Message:" }),
+							" ",
+							details.originalMessage
+						]
+					}),
+					details.context && Object.keys(details.context).length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						style: { marginTop: "4px" },
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", { children: "Context:" }),
+							" ",
+							JSON.stringify(details.context, null, 2)
+						]
+					}),
+					details.stack && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						style: {
+							marginTop: "4px",
+							opacity: .7
+						},
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", { children: "Stack:" }),
+							"\n",
+							details.stack
+						]
+					})
+				]
+			})]
+		});
+	}
 	function ToastProvider({ enabled, children }) {
 		const [toasts, setToasts] = (0, react.useState)([]);
 		const [bannerError, setBannerErrorState] = (0, react.useState)(null);
@@ -6073,156 +8089,10 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 		};
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ToastContext.Provider, {
 			value,
-			children: [bannerError && (() => {
-				const colors = getErrorColors(getErrorSeverity(bannerError));
-				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					style: {
-						position: "fixed",
-						bottom: "20px",
-						left: "50%",
-						transform: "translateX(-50%)",
-						zIndex: 9999,
-						backgroundColor: colors.background,
-						border: `1px solid ${colors.border}`,
-						borderLeft: `4px solid ${colors.border}`,
-						borderRadius: "8px",
-						padding: "12px 16px",
-						fontSize: "13px",
-						boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
-						backdropFilter: "blur(8px)",
-						maxWidth: "min(90vw, 700px)",
-						width: "100%",
-						boxSizing: "border-box",
-						overflow: "hidden"
-					},
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						style: {
-							display: "flex",
-							justifyContent: "space-between",
-							alignItems: "center",
-							gap: "10px"
-						},
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							style: {
-								display: "flex",
-								alignItems: "center",
-								gap: "8px",
-								flex: 1,
-								minWidth: 0
-							},
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { style: {
-								width: "12px",
-								height: "12px",
-								borderRadius: "50%",
-								backgroundColor: colors.border,
-								flexShrink: 0
-							} }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-								style: {
-									display: "flex",
-									alignItems: "center",
-									gap: "10px",
-									flex: 1,
-									minWidth: 0
-								},
-								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-									style: {
-										color: colors.text,
-										lineHeight: "1.4",
-										fontWeight: "400",
-										fontSize: "13px",
-										flex: 1,
-										wordBreak: "break-all",
-										overflowWrap: "break-word",
-										maxWidth: "550px",
-										overflow: "hidden",
-										display: "-webkit-box",
-										WebkitLineClamp: 10,
-										WebkitBoxOrient: "vertical"
-									},
-									children: (() => {
-										let message = bannerError.message;
-										const jsonMatch = message.match(/'message':\s*'([^']+)'/);
-										if (jsonMatch) return jsonMatch[1];
-										message = message.split(" - ")[0];
-										message = message.split(": Error code")[0];
-										message = message.replace(/:\s*\d{3}$/, "");
-										message = message.replace(/See more:.*$/g, "");
-										message = message.trim();
-										return message || "Configuration error occurred.";
-									})()
-								}), (() => {
-									const message = bannerError.message;
-									const markdownLinkRegex = /\[([^\]]+)\]\(([^)]+)\)/g;
-									const plainUrlRegex = /(https?:\/\/[^\s)]+)/g;
-									let url = null;
-									let buttonText = "See More";
-									const markdownMatch = markdownLinkRegex.exec(message);
-									if (markdownMatch) {
-										url = markdownMatch[2];
-										buttonText = "See More";
-									} else {
-										const urlMatch = plainUrlRegex.exec(message);
-										if (urlMatch) {
-											url = urlMatch[0].replace(/[.,;:'"]*$/, "");
-											buttonText = "See More";
-										}
-									}
-									if (!url) return null;
-									return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-										onClick: () => window.open(url, "_blank", "noopener,noreferrer"),
-										style: {
-											background: colors.border,
-											color: "white",
-											border: "none",
-											borderRadius: "5px",
-											padding: "4px 10px",
-											fontSize: "11px",
-											fontWeight: "500",
-											cursor: "pointer",
-											transition: "all 0.2s ease",
-											flexShrink: 0
-										},
-										onMouseEnter: (e) => {
-											e.currentTarget.style.opacity = "0.9";
-											e.currentTarget.style.transform = "translateY(-1px)";
-										},
-										onMouseLeave: (e) => {
-											e.currentTarget.style.opacity = "1";
-											e.currentTarget.style.transform = "translateY(0)";
-										},
-										children: buttonText
-									});
-								})()]
-							})]
-						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-							onClick: () => setBannerError(null),
-							style: {
-								background: "transparent",
-								border: "none",
-								color: colors.text,
-								cursor: "pointer",
-								padding: "2px",
-								borderRadius: "3px",
-								fontSize: "14px",
-								lineHeight: "1",
-								opacity: .6,
-								transition: "all 0.2s ease",
-								flexShrink: 0
-							},
-							title: "Dismiss",
-							onMouseEnter: (e) => {
-								e.currentTarget.style.opacity = "1";
-								e.currentTarget.style.background = "rgba(0, 0, 0, 0.05)";
-							},
-							onMouseLeave: (e) => {
-								e.currentTarget.style.opacity = "0.6";
-								e.currentTarget.style.background = "transparent";
-							},
-							children: "×"
-						})]
-					})
-				});
-			})(), children]
+			children: [bannerError && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BannerErrorDisplay, {
+				bannerError,
+				onDismiss: () => setBannerError(null)
+			}), children]
 		});
 	}
 
@@ -7141,12 +9011,21 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 		const { agent } = useAgent({ agentId: resolvedAgentId });
 		usePredictStateSubscription(agent);
 		(0, react.useEffect)(() => {
-			const subscription = copilotkit.subscribe({ onError: ({ error }) => {
-				setBannerError(new _copilotkit_shared.CopilotKitLowLevelError({
+			const subscription = copilotkit.subscribe({ onError: ({ error, code, context }) => {
+				if (error.name === "AbortError" || error.message === "Fetch is aborted" || error.message === "signal is aborted without reason" || error.message === "component unmounted" || !error.message) return;
+				if (process.env.NODE_ENV === "development") console.error("[CopilotKit] Agent error:", error.message, "\n  Code:", code, "\n  Context:", context, "\n  Stack:", error.stack);
+				const ckError = new _copilotkit_shared.CopilotKitLowLevelError({
 					error,
 					message: error.message,
 					url: typeof window !== "undefined" ? window.location.href : ""
-				}));
+				});
+				ckError.details = {
+					code,
+					context,
+					stack: error.stack,
+					originalMessage: error.message
+				};
+				setBannerError(ckError);
 			} });
 			return () => {
 				subscription.unsubscribe();
@@ -7685,6 +9564,8 @@ Object.defineProperty(exports, 'CopilotChat', {
   }
 });
 exports.CopilotChatAssistantMessage = CopilotChatAssistantMessage_default;
+exports.CopilotChatAttachmentQueue = CopilotChatAttachmentQueue;
+exports.CopilotChatAttachmentRenderer = CopilotChatAttachmentRenderer;
 exports.CopilotChatAudioRecorder = CopilotChatAudioRecorder;
 exports.CopilotChatConfigurationProvider = CopilotChatConfigurationProvider;
 exports.CopilotChatInput = CopilotChatInput_default;
@@ -7725,12 +9606,20 @@ Object.defineProperty(exports, 'CopilotSidebarView', {
 exports.MCPAppsActivityContentSchema = MCPAppsActivityContentSchema;
 exports.MCPAppsActivityRenderer = MCPAppsActivityRenderer;
 exports.MCPAppsActivityType = MCPAppsActivityType;
+exports.SandboxFunctionsContext = SandboxFunctionsContext;
 exports.UseAgentUpdate = UseAgentUpdate;
 exports.WildcardToolCallRender = WildcardToolCallRender;
+Object.defineProperty(exports, 'a2uiDefaultTheme', {
+  enumerable: true,
+  get: function () {
+    return _copilotkit_a2ui_renderer.defaultTheme;
+  }
+});
 exports.createA2UIMessageRenderer = createA2UIMessageRenderer;
 exports.defineToolCallRenderer = defineToolCallRenderer;
 exports.useAgent = useAgent;
 exports.useAgentContext = useAgentContext;
+exports.useAttachments = useAttachments;
 exports.useComponent = useComponent;
 exports.useConfigureSuggestions = useConfigureSuggestions;
 exports.useCopilotChatConfiguration = useCopilotChatConfiguration;
@@ -7743,6 +9632,7 @@ exports.useRenderActivityMessage = useRenderActivityMessage;
 exports.useRenderCustomMessages = useRenderCustomMessages;
 exports.useRenderTool = useRenderTool;
 exports.useRenderToolCall = useRenderToolCall;
+exports.useSandboxFunctions = useSandboxFunctions;
 exports.useSuggestions = useSuggestions;
 exports.useThreads = useThreads;
 Object.keys(_copilotkit_core).forEach(function (k) {