@copilotkit/react-core 0.0.0-main-20260403195251 → 0.0.0-main-20260407163127

package/dist/{copilotkit-CDZGGOIB.cjs → copilotkit-B3Eeystj.cjs}

@@ -44,9 +44,10 @@ let streamdown = require("streamdown");
 let zod = require("zod");
 let _lit_labs_react = require("@lit-labs/react");
 let _copilotkit_a2ui_renderer = require("@copilotkit/a2ui-renderer");
+let _tanstack_react_virtual = require("@tanstack/react-virtual");
+let react_dom = require("react-dom");
 let use_stick_to_bottom = require("use-stick-to-bottom");
 let ts_deepmerge = require("ts-deepmerge");
-let react_dom = require("react-dom");
 let react_markdown = require("react-markdown");
 react_markdown = __toESM(react_markdown);
 
@@ -56,7 +57,7 @@ const CopilotChatDefaultLabels = {
 	chatInputToolbarStartTranscribeButtonLabel: "Transcribe",
 	chatInputToolbarCancelTranscribeButtonLabel: "Cancel",
 	chatInputToolbarFinishTranscribeButtonLabel: "Finish",
-	chatInputToolbarAddButtonLabel: "Add photos or files",
+	chatInputToolbarAddButtonLabel: "Add attachments",
 	chatInputToolbarToolsButtonLabel: "Tools",
 	assistantMessageToolbarCopyCodeLabel: "Copy",
 	assistantMessageToolbarCopyCodeCopiedLabel: "Copied",
@@ -578,7 +579,7 @@ function renderSlot(slot, DefaultComponent, props) {
 //#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 }) {
 	const isControlled = value !== void 0;
 	const [internalValue, setInternalValue] = (0, react.useState)(() => value ?? "");
 	(0, react.useEffect)(() => {
@@ -651,7 +652,7 @@ function CopilotChatInput({ mode = "input", onSubmitMessage, onStop, isRunning =
 			previousModalStateRef.current = config?.isModalOpen;
 			return;
 		}
-		if (config?.isModalOpen && !previousModalStateRef.current) inputRef.current?.focus();
+		if (config?.isModalOpen && !previousModalStateRef.current) inputRef.current?.focus({ preventScroll: true });
 		previousModalStateRef.current = config?.isModalOpen;
 	}, [config?.isModalOpen, autoFocus]);
 	(0, react.useEffect)(() => {
@@ -1175,7 +1176,7 @@ function CopilotChatInput({ mode = "input", onSubmitMessage, onStop, isRunning =
 			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: "/"
 				})]
@@ -1191,21 +1192,7 @@ function CopilotChatInput({ mode = "input", onSubmitMessage, onStop, isRunning =
 		const labels = useCopilotChatConfiguration()?.labels ?? 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) internalTextareaRef.current?.focus();
+			if (autoFocus) internalTextareaRef.current?.focus({ preventScroll: true });
 		}, [autoFocus]);
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("textarea", {
 			ref: internalTextareaRef,
@@ -2149,7 +2136,7 @@ function useStableArrayProp(prop, warningMessage, isMeaningfulChange) {
 	}, [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, showDevConsole = false, useSingleEndpoint, onError, a2ui }) => {
 	const [shouldRenderInspector, setShouldRenderInspector] = (0, react.useState)(false);
 	const [runtimeA2UIEnabled, setRuntimeA2UIEnabled] = (0, react.useState)(false);
 	const [runtimeLicenseStatus, setRuntimeLicenseStatus] = (0, react.useState)(void 0);
@@ -2263,7 +2250,7 @@ const CopilotKitProvider = ({ children, runtimeUrl, headers = {}, credentials, p
 	const copilotkitRef = (0, react.useRef)(null);
 	if (copilotkitRef.current === null) copilotkitRef.current = new CopilotKitCoreReact({
 		runtimeUrl: chatApiEndpoint,
-		runtimeTransport: useSingleEndpoint ? "single" : "rest",
+		runtimeTransport: useSingleEndpoint === true ? "single" : useSingleEndpoint === false ? "rest" : "auto",
 		headers: mergedHeaders,
 		credentials,
 		properties,
@@ -2335,7 +2322,7 @@ const CopilotKitProvider = ({ children, runtimeUrl, headers = {}, credentials, p
 	}, [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);
@@ -2701,7 +2688,8 @@ function useRenderCustomMessages() {
 //#region src/v2/hooks/use-render-activity-message.tsx
 function useRenderActivityMessage() {
 	const { copilotkit } = useCopilotKit();
-	const agentId = useCopilotChatConfiguration()?.agentId ?? _copilotkit_shared.DEFAULT_AGENT_ID;
+	const config = useCopilotChatConfiguration();
+	const agentId = config?.agentId ?? _copilotkit_shared.DEFAULT_AGENT_ID;
 	const renderers = copilotkit.renderActivityMessages;
 	const findRenderer = (0, react.useCallback)((activityType) => {
 		if (!renderers.length) return null;
@@ -2717,7 +2705,8 @@ function useRenderActivityMessage() {
 			return null;
 		}
 		const Component = renderer.render;
-		const agent = copilotkit.getAgent(agentId);
+		const registryAgent = copilotkit.getAgent(agentId);
+		const agent = getThreadClone(registryAgent, config?.threadId) ?? registryAgent;
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, {
 			activityType: message.activityType,
 			content: parseResult.data,
@@ -2726,6 +2715,7 @@ function useRenderActivityMessage() {
 		}, message.id);
 	}, [
 		agentId,
+		config?.threadId,
 		copilotkit,
 		findRenderer
 	]);
@@ -3611,11 +3601,19 @@ function useThreadStoreSelector(store, selector) {
 function useThreads$1({ agentId, includeArchived, limit }) {
 	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)(() => {
 		return JSON.stringify(Object.entries(copilotkit.headers ?? {}).sort(([left], [right]) => left.localeCompare(right)));
 	}, [copilotkit.headers]);
@@ -3658,15 +3656,173 @@ function useThreads$1({ agentId, includeArchived, limit }) {
 		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 }) {
+	const enabled = 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) => {
+		const cfg = configRef.current;
+		const accept = cfg?.accept ?? "*/*";
+		const maxSize = cfg?.maxSize ?? 20 * 1024 * 1024;
+		const rejectedFiles = files.filter((file) => !(0, _copilotkit_shared.matchesAcceptFilter)(file, accept));
+		for (const file of rejectedFiles) cfg?.onUploadFailed?.({
+			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)) {
+				cfg?.onUploadFailed?.({
+					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?.onUpload) {
+					const { metadata: meta, ...uploadSource } = await cfg.onUpload(file);
+					source = uploadSource;
+					uploadMetadata = meta;
+				} else source = {
+					type: "data",
+					value: await (0, _copilotkit_shared.readFileAsBase64)(file),
+					mimeType: file.type
+				};
+				let thumbnail;
+				if (modality === "video") thumbnail = await (0, _copilotkit_shared.generateVideoThumbnail)(file);
+				setAttachments((prev) => prev.map((att) => att.id === placeholderId ? {
+					...att,
+					source,
+					status: "ready",
+					thumbnail,
+					metadata: uploadMetadata
+				} : att));
+			} catch (error) {
+				setAttachments((prev) => prev.filter((att) => att.id !== placeholderId));
+				console.error(`[CopilotKit] Failed to upload "${file.name}":`, error);
+				cfg?.onUploadFailed?.({
+					reason: "upload-failed",
+					file,
+					message: error instanceof Error ? error.message : `Failed to upload "${file.name}"`
+				});
+			}
+		}
+	}, []);
+	const handleFileUpload = (0, react.useCallback)(async (e) => {
+		if (!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) => {
+		if (!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) => {
+		e.preventDefault();
+		e.stopPropagation();
+		setDragOver(false);
+		if (!configRef.current?.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) => {
+			const target = e.target;
+			if (!target || !containerRef.current?.contains(target)) return;
+			const accept = configRef.current?.accept ?? "*/*";
+			const fileItems = Array.from(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 = [] }) {
@@ -3783,9 +3939,19 @@ function CopilotChatAssistantMessage({ message, messages, isRunning, onThumbsUp,
 	_CopilotChatAssistantMessage.CopyButton = ({ className, title, onClick, ...props }) => {
 		const labels = useCopilotChatConfiguration()?.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, {
@@ -3843,6 +4009,79 @@ CopilotChatAssistantMessage.ReadAloudButton.displayName = "CopilotChatAssistantM
 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 }) {
+	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 ?? "")
+		}), /* @__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) {
@@ -3853,8 +4092,17 @@ function flattenUserMessageContent(content) {
 		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 {
@@ -3901,7 +4149,18 @@ function CopilotChatUserMessage({ message, onEditMessage, branchIndex, numberOfB
 		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) {
@@ -4235,9 +4494,43 @@ const CopilotChatSuggestionView = react.default.forwardRef(function CopilotChatS
 });
 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 }) {
@@ -4256,7 +4549,6 @@ const MemoizedAssistantMessage = react.default.memo(function MemoizedAssistantMe
 	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;
 	}
@@ -4335,6 +4627,7 @@ const MemoizedCustomMessage = react.default.memo(function MemoizedCustomMessage(
 	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 }) {
 	const renderCustomMessage = useRenderCustomMessages();
 	const { renderActivityMessage } = useRenderActivityMessage();
@@ -4368,9 +4661,34 @@ function CopilotChatMessageView({ messages = [], assistantMessage, userMessage,
 		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) => el?.getBoundingClientRect().height ?? 0,
+		initialRect: {
+			width: 0,
+			height: 600
+		}
+	});
+	const firstMessageId = deduplicatedMessages[0]?.id;
+	(0, react.useLayoutEffect)(() => {
+		if (!shouldVirtualize || !deduplicatedMessages.length) return;
+		virtualizer.scrollToIndex(deduplicatedMessages.length - 1, { align: "end" });
+	}, [shouldVirtualize, firstMessageId]);
+	const renderMessageBlock = (message) => {
 		const elements = [];
 		const stateSnapshot = getStateSnapshotForMessage(message.id);
 		if (renderCustomMessage) elements.push(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(MemoizedCustomMessage, {
@@ -4379,58 +4697,38 @@ function CopilotChatMessageView({ messages = [], assistantMessage, userMessage,
 			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" },
@@ -4449,7 +4747,27 @@ function CopilotChatMessageView({ messages = [], assistantMessage, userMessage,
 		className: (0, tailwind_merge.twMerge)("copilotKitMessages cpk:flex cpk:flex-col", className),
 		...props,
 		children: [
-			messageElements,
+			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",
@@ -4466,6 +4784,312 @@ CopilotChatMessageView.Cursor = function Cursor({ 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 {
+				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", {
+		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: [
+			/* @__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 ?? "")
+			}),
+			/* @__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"
+			})
+		]
+	});
+}
+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 ?? "")
+		}), /* @__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
 /**
@@ -4510,7 +5134,19 @@ function useKeyboardHeight() {
 //#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);
@@ -4557,6 +5193,7 @@ function CopilotChatView({ messageView, input, scrollView, suggestionView, welco
 		onCancelTranscribe,
 		onFinishTranscribe,
 		onFinishTranscribeWithAudio,
+		onAddFile,
 		positioning: "static",
 		keyboardHeight: isKeyboardOpen ? keyboardHeight : 0,
 		containerRef: inputContainerRef,
@@ -4597,21 +5234,34 @@ function CopilotChatView({ messageView, input, scrollView, suggestionView, welco
 			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?.(id),
+				className: "cpk:mb-2"
+			}), BoundInputForWelcome]
+		});
+		const BoundWelcomeScreen = renderSlot(welcomeScreenSlot, CopilotChatView.WelcomeScreen, {
+			input: inputWithAttachments,
 			suggestionView: 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", {
@@ -4628,39 +5278,66 @@ function CopilotChatView({ messageView, input, scrollView, suggestionView, welco
 		"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?.(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)(() => {
+			setScrollEl(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);
 		}, []);
@@ -4689,23 +5366,26 @@ function CopilotChatView({ messageView, input, scrollView, suggestionView, welco
 		});
 		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, {
@@ -4897,7 +5577,7 @@ async function transcribeAudio(core, audioBlob, filename = "recording.webm") {
 
 //#endregion
 //#region src/v2/components/chat/CopilotChat.tsx
-function CopilotChat({ agentId, threadId, labels, chatView, isModalDefaultOpen, onError, ...props }) {
+function CopilotChat({ agentId, threadId, labels, chatView, isModalDefaultOpen, attachments: attachmentsConfig, onError, ...props }) {
 	const existingConfig = useCopilotChatConfiguration();
 	const resolvedAgentId = agentId ?? existingConfig?.agentId ?? _copilotkit_shared.DEFAULT_AGENT_ID;
 	const resolvedThreadId = (0, react.useMemo)(() => threadId ?? existingConfig?.threadId ?? (0, _copilotkit_shared.randomUUID)(), [threadId, existingConfig?.threadId]);
@@ -4933,6 +5613,7 @@ function CopilotChat({ agentId, threadId, labels, chatView, isModalDefaultOpen,
 	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;
@@ -4960,7 +5641,31 @@ function CopilotChat({ agentId, threadId, labels, chatView, isModalDefaultOpen,
 		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
@@ -4971,7 +5676,11 @@ function CopilotChat({ agentId, threadId, labels, chatView, isModalDefaultOpen,
 		} 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)(),
@@ -5072,7 +5781,11 @@ function CopilotChat({ agentId, threadId, labels, chatView, isModalDefaultOpen,
 	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)]),
+		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) => `${tc.id}:${tc.function?.arguments?.length ?? 0}`).join(";") : "";
+			return `${m.id}:${m.role}:${contentKey}:${toolCallsKey}`;
+		}).join(",")]),
 		onSubmitMessage: onSubmitInput,
 		onStop: effectiveStopHandler,
 		inputMode: effectiveMode,
@@ -5081,32 +5794,55 @@ function CopilotChat({ agentId, threadId, labels, chatView, isModalDefaultOpen,
 		onStartTranscribe: showTranscription ? handleStartTranscribe : void 0,
 		onCancelTranscribe: showTranscription ? handleCancelTranscribe : void 0,
 		onFinishTranscribe: showTranscription ? handleFinishTranscribe : void 0,
-		onFinishTranscribeWithAudio: showTranscription ? handleFinishTranscribeWithAudio : void 0
+		onFinishTranscribeWithAudio: showTranscription ? handleFinishTranscribeWithAudio : void 0,
+		attachments: selectedAttachments,
+		onRemoveAttachment: removeAttachment,
+		onAddFile: attachmentsEnabled ? () => {
+			setTimeout(() => {
+				fileInputRef.current?.click();
+			}, 100);
+		} : void 0,
+		dragOver,
+		onDragOver: handleDragOver,
+		onDragLeave: handleDragLeave,
+		onDrop: handleDrop
 	}));
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(CopilotChatConfigurationProvider, {
+	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?.accept ?? "*/*",
+					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) {
@@ -7723,6 +8459,18 @@ Object.defineProperty(exports, 'CopilotChatAssistantMessage_default', {
     return CopilotChatAssistantMessage_default;
   }
 });
+Object.defineProperty(exports, 'CopilotChatAttachmentQueue', {
+  enumerable: true,
+  get: function () {
+    return CopilotChatAttachmentQueue;
+  }
+});
+Object.defineProperty(exports, 'CopilotChatAttachmentRenderer', {
+  enumerable: true,
+  get: function () {
+    return CopilotChatAttachmentRenderer;
+  }
+});
 Object.defineProperty(exports, 'CopilotChatAudioRecorder', {
   enumerable: true,
   get: function () {
@@ -7957,6 +8705,12 @@ Object.defineProperty(exports, 'useAsyncCallback', {
     return useAsyncCallback;
   }
 });
+Object.defineProperty(exports, 'useAttachments', {
+  enumerable: true,
+  get: function () {
+    return useAttachments;
+  }
+});
 Object.defineProperty(exports, 'useCoAgentStateRenders', {
   enumerable: true,
   get: function () {
@@ -8071,4 +8825,4 @@ Object.defineProperty(exports, 'useToast', {
     return useToast;
   }
 });
-//# sourceMappingURL=copilotkit-CDZGGOIB.cjs.map
+//# sourceMappingURL=copilotkit-B3Eeystj.cjs.map