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

package/dist/index.mjs

@@ -4,7 +4,7 @@ import * as React$1 from "react";
 import React, { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { defaultCopilotContextCategories, shouldShowDevConsole, useCopilotChatInternal, useCopilotChatSuggestions as useCopilotChatSuggestions$1, useCopilotContext, useCopilotMessagesContext } from "@copilotkit/react-core";
-import { COPILOTKIT_VERSION, CopilotKitError, CopilotKitErrorCode, ErrorVisibility, Severity, isMacOS, randomUUID, styledConsole } from "@copilotkit/shared";
+import { COPILOTKIT_VERSION, CopilotKitError, CopilotKitErrorCode, ErrorVisibility, Severity, exceedsMaxSize, formatFileSize, formatFileSize as formatFileSize$1, generateVideoThumbnail, getDocumentIcon, getModalityFromMimeType, getSourceUrl, isMacOS, matchesAcceptFilter, randomUUID, readFileAsBase64, styledConsole } from "@copilotkit/shared";
 import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/react";
 import ReactMarkdown from "react-markdown";
 import { Light, Prism } from "react-syntax-highlighter";
@@ -885,6 +885,89 @@ const Header = ({}) => {
 	});
 };
 
+//#endregion
+//#region src/components/chat/AttachmentRenderer.tsx
+const ImageAttachment = memo(function ImageAttachment({ src, className }) {
+	const [error, setError] = useState(false);
+	if (error) return /* @__PURE__ */ jsx("div", {
+		className: `copilotKitImageRendering copilotKitImageRenderingError ${className ?? ""}`,
+		children: /* @__PURE__ */ jsx("div", {
+			className: "copilotKitImageRenderingErrorMessage",
+			children: "Failed to load image"
+		})
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: `copilotKitImageRendering ${className ?? ""}`,
+		children: /* @__PURE__ */ jsx("img", {
+			src,
+			alt: "Image attachment",
+			className: "copilotKitImageRenderingImage",
+			onError: () => setError(true)
+		})
+	});
+});
+const AudioAttachment = memo(function AudioAttachment({ src, filename, className }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: `copilotKitAttachment copilotKitAttachmentAudio ${className ?? ""}`,
+		children: [/* @__PURE__ */ jsx("audio", {
+			src,
+			controls: true,
+			preload: "metadata"
+		}), filename && /* @__PURE__ */ jsx("span", {
+			className: "copilotKitAttachmentFilename",
+			children: filename
+		})]
+	});
+});
+const VideoAttachment = memo(function VideoAttachment({ src, className }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: `copilotKitAttachment copilotKitAttachmentVideo ${className ?? ""}`,
+		children: /* @__PURE__ */ jsx("video", {
+			src,
+			controls: true,
+			preload: "metadata"
+		})
+	});
+});
+const DocumentAttachment = memo(function DocumentAttachment({ source, filename, className }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: `copilotKitAttachment copilotKitAttachmentDocument ${className ?? ""}`,
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "copilotKitAttachmentDocIcon",
+			children: getDocumentIcon(source.mimeType ?? "")
+		}), /* @__PURE__ */ jsx("div", {
+			className: "copilotKitAttachmentDocInfo",
+			children: /* @__PURE__ */ jsx("span", {
+				className: "copilotKitAttachmentDocName",
+				children: filename || source.mimeType || "Unknown type"
+			})
+		})]
+	});
+});
+const AttachmentRenderer = ({ type, source, filename, className }) => {
+	const src = getSourceUrl(source);
+	switch (type) {
+		case "image": return /* @__PURE__ */ jsx(ImageAttachment, {
+			src,
+			className
+		});
+		case "audio": return /* @__PURE__ */ jsx(AudioAttachment, {
+			src,
+			filename,
+			className
+		});
+		case "video": return /* @__PURE__ */ jsx(VideoAttachment, {
+			src,
+			className
+		});
+		case "document": return /* @__PURE__ */ jsx(DocumentAttachment, {
+			source,
+			filename,
+			className
+		});
+	}
+};
+
 //#endregion
 //#region src/components/chat/messages/UserMessage.tsx
 const getTextContent = (content) => {
@@ -894,22 +977,35 @@ const getTextContent = (content) => {
 		if (part.type === "text") return part.text;
 	}).filter((value) => typeof value === "string" && value.length > 0).join(" ").trim() || void 0;
 };
+const getMediaParts = (content) => {
+	if (!content || typeof content === "string") return [];
+	return content.filter((part) => part.type === "image" || part.type === "audio" || part.type === "video" || part.type === "document");
+};
 const UserMessage = (props) => {
 	const { message, ImageRenderer } = props;
+	const content = message?.content;
 	if (message && "image" in message && Boolean(message.image)) {
-		const imageMessage = message;
-		const content = getTextContent(imageMessage?.content);
+		const legacyImage = message.image;
 		return /* @__PURE__ */ jsx("div", {
 			className: "copilotKitMessage copilotKitUserMessage",
 			children: /* @__PURE__ */ jsx(ImageRenderer, {
-				image: imageMessage.image,
-				content
+				image: legacyImage,
+				content: getTextContent(content)
 			})
 		});
 	}
-	return /* @__PURE__ */ jsx("div", {
+	const textContent = getTextContent(content);
+	const mediaParts = getMediaParts(content);
+	if (mediaParts.length === 0) return /* @__PURE__ */ jsx("div", {
+		className: "copilotKitMessage copilotKitUserMessage",
+		children: textContent
+	});
+	return /* @__PURE__ */ jsxs("div", {
 		className: "copilotKitMessage copilotKitUserMessage",
-		children: getTextContent(message?.content)
+		children: [textContent && /* @__PURE__ */ jsx("div", { children: textContent }), mediaParts.map((part, index) => /* @__PURE__ */ jsx(AttachmentRenderer, {
+			type: part.type,
+			source: part.source
+		}, index))]
 	});
 };
 
@@ -1379,16 +1475,18 @@ const AssistantMessage = (props) => {
 //#endregion
 //#region src/components/chat/messages/ImageRenderer.tsx
 /**
-* Default image rendering component that can be customized by users.
-* Uses CSS classes for styling so users can override styles.
+* @deprecated Use `CopilotChatAttachmentRenderer` from `@copilotkit/react-core/v2` instead.
+* `ImageRenderer` only handles images. The v2 attachment renderer supports images, audio, video, and documents.
+* See https://docs.copilotkit.ai/migration-guides/migrate-attachments
+* @since 1.56.0
 */
-const ImageRenderer = ({ image, content, className = "" }) => {
+const ImageRenderer = ({ image, source, content, className = "" }) => {
 	const [imageError, setImageError] = useState(false);
-	const imageSrc = `data:image/${image.format};base64,${image.bytes}`;
+	let imageSrc;
+	if (source) imageSrc = source.type === "url" ? source.value : `data:${source.mimeType};base64,${source.value}`;
+	else if (image) imageSrc = `data:image/${image.format};base64,${image.bytes}`;
+	else return null;
 	const altText = content || "User uploaded image";
-	const handleImageError = () => {
-		setImageError(true);
-	};
 	if (imageError) return /* @__PURE__ */ jsxs("div", {
 		className: `copilotKitImageRendering copilotKitImageRenderingError ${className}`,
 		children: [/* @__PURE__ */ jsx("div", {
@@ -1405,7 +1503,7 @@ const ImageRenderer = ({ image, content, className = "" }) => {
 			src: imageSrc,
 			alt: altText,
 			className: "copilotKitImageRenderingImage",
-			onError: handleImageError
+			onError: () => setImageError(true)
 		}), content && /* @__PURE__ */ jsx("div", {
 			className: "copilotKitImageRenderingContent",
 			children: content
@@ -1923,61 +2021,101 @@ const Input = ({ inProgress, onSend, chatReady = false, onStop, onUpload, hideSt
 };
 
 //#endregion
-//#region src/components/chat/ImageUploadQueue.tsx
-const ImageUploadQueue = ({ images, onRemoveImage, className = "" }) => {
-	if (images.length === 0) return null;
+//#region src/components/chat/AttachmentQueue.tsx
+const AttachmentQueue = ({ attachments, onRemoveAttachment, className = "" }) => {
+	if (attachments.length === 0) return null;
 	return /* @__PURE__ */ jsx("div", {
-		className: `copilotKitImageUploadQueue ${className}`,
-		style: {
-			display: "flex",
-			flexWrap: "wrap",
-			gap: "8px",
-			margin: "8px",
-			padding: "8px"
-		},
-		children: images.map((image, index) => /* @__PURE__ */ jsxs("div", {
-			className: "copilotKitImageUploadQueueItem",
-			style: {
-				position: "relative",
-				display: "inline-block",
-				width: "60px",
-				height: "60px",
-				borderRadius: "4px",
-				overflow: "hidden"
-			},
-			children: [/* @__PURE__ */ jsx("img", {
-				src: `data:${image.contentType};base64,${image.bytes}`,
-				alt: `Selected image ${index + 1}`,
-				style: {
-					width: "100%",
-					height: "100%",
-					objectFit: "cover"
-				}
-			}), /* @__PURE__ */ jsx("button", {
-				onClick: () => onRemoveImage(index),
-				className: "copilotKitImageUploadQueueRemoveButton",
-				style: {
-					position: "absolute",
-					top: "2px",
-					right: "2px",
-					background: "rgba(0,0,0,0.6)",
-					color: "white",
-					border: "none",
-					borderRadius: "50%",
-					width: "18px",
-					height: "18px",
-					display: "flex",
-					alignItems: "center",
-					justifyContent: "center",
-					cursor: "pointer",
-					fontSize: "10px",
-					padding: 0
-				},
-				children: "✕"
-			})]
-		}, index))
+		className: `copilotKitAttachmentQueue ${className}`,
+		children: attachments.map((attachment) => /* @__PURE__ */ jsxs("div", {
+			className: `copilotKitAttachmentQueueItem copilotKitAttachmentQueueItem--${attachment.type}`,
+			children: [
+				attachment.status === "uploading" && /* @__PURE__ */ jsx("div", {
+					className: "copilotKitAttachmentQueueOverlay",
+					children: /* @__PURE__ */ jsx("div", { className: "copilotKitAttachmentQueueSpinner" })
+				}),
+				/* @__PURE__ */ jsx(AttachmentPreview, { attachment }),
+				/* @__PURE__ */ jsx("button", {
+					onClick: () => onRemoveAttachment(attachment.id),
+					className: "copilotKitAttachmentQueueRemoveButton",
+					"aria-label": "Remove attachment",
+					children: "✕"
+				})
+			]
+		}, attachment.id))
 	});
 };
+function AttachmentPreview({ attachment }) {
+	if (attachment.status === "uploading") return /* @__PURE__ */ jsx("div", { className: "copilotKitAttachmentQueuePreviewPlaceholder" });
+	const src = getSourceUrl(attachment.source);
+	switch (attachment.type) {
+		case "image": return /* @__PURE__ */ jsx("img", {
+			src,
+			alt: attachment.filename || "Image attachment",
+			className: "copilotKitAttachmentQueuePreviewImage"
+		});
+		case "audio": return /* @__PURE__ */ jsxs("div", {
+			className: "copilotKitAttachmentQueuePreviewAudio",
+			children: [/* @__PURE__ */ jsx("audio", {
+				src,
+				controls: true,
+				preload: "metadata"
+			}), attachment.filename && /* @__PURE__ */ jsx("span", {
+				className: "copilotKitAttachmentQueueFilename",
+				children: attachment.filename
+			})]
+		});
+		case "video": return /* @__PURE__ */ jsx("div", {
+			className: "copilotKitAttachmentQueuePreviewVideo",
+			children: attachment.thumbnail ? /* @__PURE__ */ jsx("img", {
+				src: attachment.thumbnail,
+				alt: attachment.filename || "Video thumbnail",
+				className: "copilotKitAttachmentQueuePreviewImage"
+			}) : /* @__PURE__ */ jsx("video", {
+				src,
+				preload: "metadata",
+				muted: true,
+				className: "copilotKitAttachmentQueuePreviewImage"
+			})
+		});
+		case "document": return /* @__PURE__ */ jsxs("div", {
+			className: "copilotKitAttachmentQueuePreviewDocument",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "copilotKitAttachmentQueueDocIcon",
+				children: getDocumentIcon(attachment.source.mimeType ?? "")
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "copilotKitAttachmentQueueDocInfo",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "copilotKitAttachmentQueueFilename",
+					children: attachment.filename || "Document"
+				}), attachment.size != null && /* @__PURE__ */ jsx("span", {
+					className: "copilotKitAttachmentQueueFileSize",
+					children: formatFileSize(attachment.size)
+				})]
+			})]
+		});
+	}
+}
+
+//#endregion
+//#region src/components/chat/attachment-utils.ts
+const suppressedWarnings = /* @__PURE__ */ new Set();
+let globalSuppress = false;
+/**
+* Issue a deprecation warning once per key per session.
+* Suppressed entirely if the user calls suppressDeprecationWarnings().
+*/
+function deprecationWarning(key, message) {
+	if (globalSuppress || suppressedWarnings.has(key)) return;
+	if (typeof process !== "undefined" && process.env?.NODE_ENV === "production") return;
+	suppressedWarnings.add(key);
+	console.warn(`[CopilotKit] Deprecation: ${message}`);
+}
+/**
+* Suppress all CopilotKit deprecation warnings.
+*/
+function suppressDeprecationWarnings() {
+	globalSuppress = true;
+}
 
 //#endregion
 //#region src/components/chat/Suggestion.tsx
@@ -2077,10 +2215,25 @@ function Suggestions({ suggestions, onSuggestionClick, isLoading }) {
 * ```
 * For more information about how to customize the styles, check out the [Customize Look & Feel](/guides/custom-look-and-feel/customize-built-in-ui-components) guide.
 */
-function CopilotChat({ instructions, suggestions = "auto", onSubmitMessage, makeSystemMessage, disableSystemMessage, onInProgress, onStopGeneration, onReloadMessages, onRegenerate, onCopy, onThumbsUp, onThumbsDown, markdownTagRenderers, Messages: Messages$2 = Messages, RenderMessage: RenderMessage$1 = RenderMessage, RenderSuggestionsList = Suggestions, Input: Input$2 = Input, className, icons, labels, AssistantMessage: AssistantMessage$2 = AssistantMessage, UserMessage: UserMessage$3 = UserMessage, ImageRenderer: ImageRenderer$1 = ImageRenderer, ErrorMessage, imageUploadsEnabled, inputFileAccept = "image/*", hideStopButton, observabilityHooks, renderError, onError, RenderTextMessage, RenderActionExecutionMessage, RenderAgentStateMessage, RenderResultMessage, RenderImageMessage }) {
+function CopilotChat({ instructions, suggestions = "auto", onSubmitMessage, makeSystemMessage, disableSystemMessage, onInProgress, onStopGeneration, onReloadMessages, onRegenerate, onCopy, onThumbsUp, onThumbsDown, markdownTagRenderers, Messages: Messages$2 = Messages, RenderMessage: RenderMessage$1 = RenderMessage, RenderSuggestionsList = Suggestions, Input: Input$2 = Input, className, icons, labels, AssistantMessage: AssistantMessage$2 = AssistantMessage, UserMessage: UserMessage$3 = UserMessage, ImageRenderer: ImageRenderer$1 = ImageRenderer, ErrorMessage, imageUploadsEnabled, inputFileAccept = "image/*", attachments, hideStopButton, observabilityHooks, renderError, onError, RenderTextMessage, RenderActionExecutionMessage, RenderAgentStateMessage, RenderResultMessage, RenderImageMessage }) {
 	const { additionalInstructions, setChatInstructions, copilotApiConfig, setBannerError, setInternalErrorHandler, removeInternalErrorHandler } = useCopilotContext();
 	const { publicApiKey, chatApiEndpoint } = copilotApiConfig;
-	const [selectedImages, setSelectedImages] = useState([]);
+	const resolvedAttachments = (() => {
+		if (attachments) return attachments;
+		if (imageUploadsEnabled) {
+			deprecationWarning("imageUploadsEnabled", "imageUploadsEnabled is deprecated. Use attachments={{ enabled: true }} instead. See https://docs.copilotkit.ai/migration-guides/migrate-attachments");
+			return {
+				enabled: true,
+				accept: inputFileAccept || "image/*"
+			};
+		}
+	})();
+	const attachmentsEnabled = resolvedAttachments?.enabled ?? false;
+	const attachmentsAccept = resolvedAttachments?.accept ?? "*/*";
+	const attachmentsMaxSize = resolvedAttachments?.maxSize ?? 20 * 1024 * 1024;
+	const [selectedAttachments, setSelectedAttachments] = useState([]);
+	const [dragOver, setDragOver] = useState(false);
+	const processFilesRef = useRef(async () => {});
 	const [chatError, setChatError] = useState(null);
 	const [messageFeedback, setMessageFeedback] = useState({});
 	const fileInputRef = useRef(null);
@@ -2101,8 +2254,10 @@ function CopilotChat({ instructions, suggestions = "auto", onSubmitMessage, make
 		setBannerError
 	]);
 	const triggerChatError = useCallback((error, operation, originalError) => {
+		const errorMessage = error?.message || error?.toString() || "An error occurred";
+		console.error(`[CopilotKit] ${operation} error:`, errorMessage, originalError ?? error);
 		setChatError({
-			message: error?.message || error?.toString() || "An error occurred",
+			message: errorMessage,
 			operation,
 			timestamp: Date.now()
 		});
@@ -2156,40 +2311,27 @@ function CopilotChat({ instructions, suggestions = "auto", onSubmitMessage, make
 		removeInternalErrorHandler
 	]);
 	useEffect(() => {
-		if (!imageUploadsEnabled) return;
+		if (!attachmentsEnabled) return;
 		const handlePaste = async (e) => {
 			if (!e.target.parentElement?.classList.contains("copilotKitInput")) return;
-			const imageItems = Array.from(e.clipboardData?.items || []).filter((item) => item.type.startsWith("image/"));
-			if (imageItems.length === 0) return;
+			const fileItems = Array.from(e.clipboardData?.items || []).filter((item) => item.kind === "file" && item.getAsFile() !== null && matchesAcceptFilter(item.getAsFile(), attachmentsAccept));
+			if (fileItems.length === 0) return;
 			e.preventDefault();
-			const imagePromises = imageItems.map((item) => {
-				const file = item.getAsFile();
-				if (!file) return Promise.resolve(null);
-				return new Promise((resolve, reject) => {
-					const reader = new FileReader();
-					reader.onload = (e) => {
-						const base64String = (e.target?.result)?.split(",")[1];
-						if (base64String) resolve({
-							contentType: file.type,
-							bytes: base64String
-						});
-						else resolve(null);
-					};
-					reader.onerror = reject;
-					reader.readAsDataURL(file);
-				});
-			});
+			const files = fileItems.map((item) => item.getAsFile()).filter((f) => f !== null);
 			try {
-				const loadedImages = (await Promise.all(imagePromises)).filter((img) => img !== null);
-				setSelectedImages((prev) => [...prev, ...loadedImages]);
+				await processFilesRef.current(files);
 			} catch (error) {
-				triggerChatError(error, "processClipboardImages", error);
-				console.error("Error processing pasted images:", error);
+				triggerChatError(error, "pasteUpload", error);
 			}
 		};
 		document.addEventListener("paste", handlePaste);
 		return () => document.removeEventListener("paste", handlePaste);
-	}, [imageUploadsEnabled, triggerChatError]);
+	}, [
+		attachmentsEnabled,
+		attachmentsAccept,
+		attachmentsMaxSize,
+		triggerChatError
+	]);
 	useEffect(() => {
 		if (!additionalInstructions?.length) {
 			setChatInstructions(instructions || "");
@@ -2217,9 +2359,38 @@ function CopilotChat({ instructions, suggestions = "auto", onSubmitMessage, make
 		}
 	}, [isLoading, triggerObservabilityHook]);
 	const handleSendMessage = (text) => {
-		setSelectedImages([]);
+		if (selectedAttachments.some((a) => a.status === "uploading")) {
+			triggerChatError(/* @__PURE__ */ new Error("Attachment(s) still uploading. Please wait."), "sendMessage");
+			return Promise.resolve({
+				id: randomUUID(),
+				content: text,
+				role: "user"
+			});
+		}
+		const currentAttachments = selectedAttachments.filter((a) => a.status === "ready");
+		setSelectedAttachments([]);
 		if (fileInputRef.current) fileInputRef.current.value = "";
 		triggerObservabilityHook("onMessageSent", text);
+		if (currentAttachments.length > 0) {
+			const contentParts = [];
+			if (text.trim()) contentParts.push({
+				type: "text",
+				text
+			});
+			for (const attachment of currentAttachments) contentParts.push({
+				type: attachment.type,
+				source: attachment.source,
+				metadata: {
+					...attachment.filename ? { filename: attachment.filename } : {},
+					...attachment.metadata
+				}
+			});
+			return sendMessage({
+				id: randomUUID(),
+				content: contentParts,
+				role: "user"
+			});
+		}
 		return sendMessage({
 			id: randomUUID(),
 			content: text,
@@ -2237,34 +2408,108 @@ function CopilotChat({ instructions, suggestions = "auto", onSubmitMessage, make
 		if (onCopy) onCopy(message);
 		triggerObservabilityHook("onMessageCopied", message);
 	};
-	const handleImageUpload = async (event) => {
-		if (!event.target.files || event.target.files.length === 0) return;
-		const files = Array.from(event.target.files).filter((file) => file.type.startsWith("image/"));
-		if (files.length === 0) return;
-		const fileReadPromises = files.map((file) => {
-			return new Promise((resolve, reject) => {
-				const reader = new FileReader();
-				reader.onload = (e) => {
-					const base64String = (e.target?.result)?.split(",")[1] || "";
-					if (base64String) resolve({
-						contentType: file.type,
-						bytes: base64String
-					});
-				};
-				reader.onerror = reject;
-				reader.readAsDataURL(file);
+	const processFiles = async (files) => {
+		const validFiles = files.filter((file) => matchesAcceptFilter(file, attachmentsAccept));
+		const rejectedFiles = files.filter((file) => !matchesAcceptFilter(file, attachmentsAccept));
+		for (const file of rejectedFiles) {
+			const message = `File "${file.name}" is not accepted. Supported types: ${attachmentsAccept}`;
+			triggerChatError(new Error(message), "fileUpload");
+			resolvedAttachments?.onUploadFailed?.({
+				reason: "invalid-type",
+				file,
+				message
 			});
-		});
+		}
+		for (const file of validFiles) {
+			if (exceedsMaxSize(file, attachmentsMaxSize)) {
+				const message = `File "${file.name}" exceeds the maximum size of ${formatFileSize$1(attachmentsMaxSize)}`;
+				triggerChatError(new Error(message), "fileUpload");
+				resolvedAttachments?.onUploadFailed?.({
+					reason: "file-too-large",
+					file,
+					message
+				});
+				continue;
+			}
+			const modality = getModalityFromMimeType(file.type);
+			const placeholderId = randomUUID();
+			const placeholder = {
+				id: placeholderId,
+				type: modality,
+				source: {
+					type: "data",
+					value: "",
+					mimeType: file.type
+				},
+				filename: file.name,
+				size: file.size,
+				status: "uploading"
+			};
+			setSelectedAttachments((prev) => [...prev, placeholder]);
+			try {
+				let source;
+				let uploadMetadata;
+				if (resolvedAttachments?.onUpload) {
+					const { metadata: meta, ...uploadSource } = await resolvedAttachments.onUpload(file);
+					source = uploadSource;
+					uploadMetadata = meta;
+				} else source = {
+					type: "data",
+					value: await readFileAsBase64(file),
+					mimeType: file.type
+				};
+				let thumbnail;
+				if (modality === "video") thumbnail = await generateVideoThumbnail(file);
+				setSelectedAttachments((prev) => prev.map((att) => att.id === placeholderId ? {
+					...att,
+					source,
+					status: "ready",
+					thumbnail,
+					metadata: uploadMetadata
+				} : att));
+			} catch (error) {
+				setSelectedAttachments((prev) => prev.filter((att) => att.id !== placeholderId));
+				const message = error instanceof Error ? error.message : String(error);
+				triggerChatError(/* @__PURE__ */ new Error(`Failed to upload "${file.name}": ${message}`), "fileUpload", error);
+				resolvedAttachments?.onUploadFailed?.({
+					reason: "upload-failed",
+					file,
+					message: `Failed to upload "${file.name}": ${message}`
+				});
+			}
+		}
+	};
+	processFilesRef.current = processFiles;
+	const handleFileUpload = async (event) => {
+		if (!event.target.files || event.target.files.length === 0) return;
 		try {
-			const loadedImages = await Promise.all(fileReadPromises);
-			setSelectedImages((prev) => [...prev, ...loadedImages]);
+			await processFiles(Array.from(event.target.files));
 		} catch (error) {
-			triggerChatError(error, "processUploadedImages", error);
-			console.error("Error reading files:", error);
+			triggerChatError(error, "fileUpload", error);
 		}
 	};
-	const removeSelectedImage = (index) => {
-		setSelectedImages((prev) => prev.filter((_, i) => i !== index));
+	const handleDragOver = (e) => {
+		if (!attachmentsEnabled) return;
+		e.preventDefault();
+		e.stopPropagation();
+		setDragOver(true);
+	};
+	const handleDragLeave = (e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		setDragOver(false);
+	};
+	const handleDrop = async (e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		setDragOver(false);
+		if (!attachmentsEnabled) return;
+		const files = Array.from(e.dataTransfer.files);
+		if (files.length > 0) try {
+			await processFiles(files);
+		} catch (error) {
+			triggerChatError(error, "dropUpload", error);
+		}
 	};
 	const handleThumbsUp = (message) => {
 		if (onThumbsUp) onThumbsUp(message);
@@ -2282,65 +2527,71 @@ function CopilotChat({ instructions, suggestions = "auto", onSubmitMessage, make
 		}));
 		triggerObservabilityHook("onFeedbackGiven", message.id, "thumbsDown");
 	};
-	return /* @__PURE__ */ jsxs(WrappedCopilotChat, {
+	return /* @__PURE__ */ jsx(WrappedCopilotChat, {
 		icons,
 		labels,
 		className,
-		children: [
-			chatError && renderError && renderError({
-				...chatError,
-				onDismiss: () => setChatError(null),
-				onRetry: () => {
-					setChatError(null);
-				}
-			}),
-			/* @__PURE__ */ jsx(Messages$2, {
-				AssistantMessage: AssistantMessage$2,
-				UserMessage: UserMessage$3,
-				RenderMessage: RenderMessage$1,
-				messages,
-				inProgress: isLoading,
-				onRegenerate: handleRegenerate,
-				onCopy: handleCopy,
-				onThumbsUp: handleThumbsUp,
-				onThumbsDown: handleThumbsDown,
-				messageFeedback,
-				markdownTagRenderers,
-				ImageRenderer: ImageRenderer$1,
-				ErrorMessage,
-				chatError,
-				RenderTextMessage,
-				RenderActionExecutionMessage,
-				RenderAgentStateMessage,
-				RenderResultMessage,
-				RenderImageMessage,
-				children: currentSuggestions.length > 0 && /* @__PURE__ */ jsx(RenderSuggestionsList, {
-					onSuggestionClick: handleSendMessage,
-					suggestions: currentSuggestions,
-					isLoading: isLoadingSuggestions
+		children: /* @__PURE__ */ jsxs("div", {
+			onDragOver: handleDragOver,
+			onDragLeave: handleDragLeave,
+			onDrop: handleDrop,
+			className: dragOver ? "copilotKitDragOver" : "",
+			children: [
+				chatError && renderError && renderError({
+					...chatError,
+					onDismiss: () => setChatError(null),
+					onRetry: () => {
+						setChatError(null);
+					}
+				}),
+				/* @__PURE__ */ jsx(Messages$2, {
+					AssistantMessage: AssistantMessage$2,
+					UserMessage: UserMessage$3,
+					RenderMessage: RenderMessage$1,
+					messages,
+					inProgress: isLoading,
+					onRegenerate: handleRegenerate,
+					onCopy: handleCopy,
+					onThumbsUp: handleThumbsUp,
+					onThumbsDown: handleThumbsDown,
+					messageFeedback,
+					markdownTagRenderers,
+					ImageRenderer: ImageRenderer$1,
+					ErrorMessage,
+					chatError,
+					RenderTextMessage,
+					RenderActionExecutionMessage,
+					RenderAgentStateMessage,
+					RenderResultMessage,
+					RenderImageMessage,
+					children: currentSuggestions.length > 0 && /* @__PURE__ */ jsx(RenderSuggestionsList, {
+						onSuggestionClick: handleSendMessage,
+						suggestions: currentSuggestions,
+						isLoading: isLoadingSuggestions
+					})
+				}),
+				attachmentsEnabled && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(AttachmentQueue, {
+					attachments: selectedAttachments,
+					onRemoveAttachment: (id) => setSelectedAttachments((prev) => prev.filter((att) => att.id !== id))
+				}), /* @__PURE__ */ jsx("input", {
+					type: "file",
+					multiple: true,
+					ref: fileInputRef,
+					onChange: handleFileUpload,
+					accept: attachmentsAccept,
+					style: { display: "none" }
+				})] }),
+				/* @__PURE__ */ jsx(Input$2, {
+					inProgress: isLoading,
+					chatReady: Boolean(agent),
+					onSend: handleSendMessage,
+					isVisible,
+					onStop: stopGeneration,
+					onUpload: attachmentsEnabled ? () => fileInputRef.current?.click() : void 0,
+					hideStopButton
 				})
-			}),
-			imageUploadsEnabled && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ImageUploadQueue, {
-				images: selectedImages,
-				onRemoveImage: removeSelectedImage
-			}), /* @__PURE__ */ jsx("input", {
-				type: "file",
-				multiple: true,
-				ref: fileInputRef,
-				onChange: handleImageUpload,
-				accept: inputFileAccept,
-				style: { display: "none" }
-			})] }),
-			/* @__PURE__ */ jsx(Input$2, {
-				inProgress: isLoading,
-				chatReady: Boolean(agent),
-				onSend: handleSendMessage,
-				isVisible,
-				onStop: stopGeneration,
-				onUpload: imageUploadsEnabled ? () => fileInputRef.current?.click() : void 0,
-				hideStopButton
-			})
-		]
+			]
+		})
 	});
 }
 function WrappedCopilotChat({ children, icons, labels, className }) {
@@ -2393,7 +2644,10 @@ const CopilotModalInner = ({ observabilityHooks, onSetOpen, clickOutsideToClose,
 		triggerObservabilityHook
 	]);
 	const memoizedHeader = useMemo(() => /* @__PURE__ */ jsx(Header, {}), [Header]);
-	return /* @__PURE__ */ jsxs(Fragment, { children: [useMemo(() => children, [children]), /* @__PURE__ */ jsxs("div", {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+		className: "copilotKitModalChildrenWrapper",
+		children: useMemo(() => children, [children])
+	}), /* @__PURE__ */ jsxs("div", {
 		className,
 		children: [/* @__PURE__ */ jsx(Button, {}), /* @__PURE__ */ jsxs(Window, {
 			clickOutsideToClose,
@@ -2684,5 +2938,5 @@ function useCopilotChatSuggestions(config, dependencies = []) {
 }
 
 //#endregion
-export { AssistantMessage, CopilotChat, CopilotDevConsole, CopilotPopup, CopilotSidebar, ImageRenderer, Markdown, Suggestion as RenderSuggestion, Suggestions as RenderSuggestionsList, UserMessage, shouldShowDevConsole, useChatContext, useCopilotChatSuggestions };
+export { AssistantMessage, CopilotChat, CopilotDevConsole, CopilotPopup, CopilotSidebar, ImageRenderer, Markdown, Suggestion as RenderSuggestion, Suggestions as RenderSuggestionsList, UserMessage, shouldShowDevConsole, suppressDeprecationWarnings, useChatContext, useCopilotChatSuggestions };
 //# sourceMappingURL=index.mjs.map