@copilotkit/react-ui 1.55.0-next.8 → 1.55.0

package/dist/index.umd.js

@@ -913,6 +913,90 @@ rehype_raw = __toESM(rehype_raw);
 		});
 	};
 
+//#endregion
+//#region src/components/chat/AttachmentRenderer.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: `copilotKitImageRendering copilotKitImageRenderingError ${className !== null && className !== void 0 ? className : ""}`,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "copilotKitImageRenderingErrorMessage",
+				children: "Failed to load image"
+			})
+		});
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: `copilotKitImageRendering ${className !== null && className !== void 0 ? className : ""}`,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+				src,
+				alt: "Image attachment",
+				className: "copilotKitImageRenderingImage",
+				onError: () => setError(true)
+			})
+		});
+	});
+	const AudioAttachment = (0, react.memo)(function AudioAttachment({ src, filename, className }) {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: `copilotKitAttachment copilotKitAttachmentAudio ${className !== null && className !== void 0 ? className : ""}`,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("audio", {
+				src,
+				controls: true,
+				preload: "metadata"
+			}), filename && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "copilotKitAttachmentFilename",
+				children: filename
+			})]
+		});
+	});
+	const VideoAttachment = (0, react.memo)(function VideoAttachment({ src, className }) {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: `copilotKitAttachment copilotKitAttachmentVideo ${className !== null && className !== void 0 ? className : ""}`,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("video", {
+				src,
+				controls: true,
+				preload: "metadata"
+			})
+		});
+	});
+	const DocumentAttachment = (0, react.memo)(function DocumentAttachment({ source, filename, className }) {
+		var _source$mimeType;
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: `copilotKitAttachment copilotKitAttachmentDocument ${className !== null && className !== void 0 ? className : ""}`,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "copilotKitAttachmentDocIcon",
+				children: (0, _copilotkit_shared.getDocumentIcon)((_source$mimeType = source.mimeType) !== null && _source$mimeType !== void 0 ? _source$mimeType : "")
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "copilotKitAttachmentDocInfo",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "copilotKitAttachmentDocName",
+					children: filename || source.mimeType || "Unknown type"
+				})
+			})]
+		});
+	});
+	const AttachmentRenderer = ({ 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/components/chat/messages/UserMessage.tsx
 	const getTextContent = (content) => {
@@ -922,22 +1006,35 @@ rehype_raw = __toESM(rehype_raw);
 			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 === null || message === void 0 ? void 0 : message.content;
 		if (message && "image" in message && Boolean(message.image)) {
-			const imageMessage = message;
-			const content = getTextContent(imageMessage === null || imageMessage === void 0 ? void 0 : imageMessage.content);
+			const legacyImage = message.image;
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: "copilotKitMessage copilotKitUserMessage",
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ImageRenderer, {
-					image: imageMessage.image,
-					content
+					image: legacyImage,
+					content: getTextContent(content)
 				})
 			});
 		}
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		const textContent = getTextContent(content);
+		const mediaParts = getMediaParts(content);
+		if (mediaParts.length === 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "copilotKitMessage copilotKitUserMessage",
+			children: textContent
+		});
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "copilotKitMessage copilotKitUserMessage",
-			children: getTextContent(message === null || message === void 0 ? void 0 : message.content)
+			children: [textContent && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: textContent }), mediaParts.map((part, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AttachmentRenderer, {
+				type: part.type,
+				source: part.source
+			}, index))]
 		});
 	};
 
@@ -1409,16 +1506,18 @@ rehype_raw = __toESM(rehype_raw);
 //#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] = (0, react.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__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: `copilotKitImageRendering copilotKitImageRenderingError ${className}`,
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -1435,7 +1534,7 @@ rehype_raw = __toESM(rehype_raw);
 				src: imageSrc,
 				alt: altText,
 				className: "copilotKitImageRenderingImage",
-				onError: handleImageError
+				onError: () => setImageError(true)
 			}), content && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: "copilotKitImageRenderingContent",
 				children: content
@@ -1960,61 +2059,104 @@ rehype_raw = __toESM(rehype_raw);
 	};
 
 //#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__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: `copilotKitImageUploadQueue ${className}`,
-			style: {
-				display: "flex",
-				flexWrap: "wrap",
-				gap: "8px",
-				margin: "8px",
-				padding: "8px"
-			},
-			children: images.map((image, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "copilotKitImageUploadQueueItem",
-				style: {
-					position: "relative",
-					display: "inline-block",
-					width: "60px",
-					height: "60px",
-					borderRadius: "4px",
-					overflow: "hidden"
-				},
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
-					src: `data:${image.contentType};base64,${image.bytes}`,
-					alt: `Selected image ${index + 1}`,
-					style: {
-						width: "100%",
-						height: "100%",
-						objectFit: "cover"
-					}
-				}), /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: `copilotKitAttachmentQueueItem copilotKitAttachmentQueueItem--${attachment.type}`,
+				children: [
+					attachment.status === "uploading" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "copilotKitAttachmentQueueOverlay",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "copilotKitAttachmentQueueSpinner" })
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(AttachmentPreview, { attachment }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						onClick: () => onRemoveAttachment(attachment.id),
+						className: "copilotKitAttachmentQueueRemoveButton",
+						"aria-label": "Remove attachment",
+						children: "✕"
+					})
+				]
+			}, attachment.id))
 		});
 	};
+	function AttachmentPreview({ attachment }) {
+		if (attachment.status === "uploading") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "copilotKitAttachmentQueuePreviewPlaceholder" });
+		const src = (0, _copilotkit_shared.getSourceUrl)(attachment.source);
+		switch (attachment.type) {
+			case "image": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+				src,
+				alt: attachment.filename || "Image attachment",
+				className: "copilotKitAttachmentQueuePreviewImage"
+			});
+			case "audio": return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "copilotKitAttachmentQueuePreviewAudio",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("audio", {
+					src,
+					controls: true,
+					preload: "metadata"
+				}), attachment.filename && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "copilotKitAttachmentQueueFilename",
+					children: attachment.filename
+				})]
+			});
+			case "video": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "copilotKitAttachmentQueuePreviewVideo",
+				children: attachment.thumbnail ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+					src: attachment.thumbnail,
+					alt: attachment.filename || "Video thumbnail",
+					className: "copilotKitAttachmentQueuePreviewImage"
+				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("video", {
+					src,
+					preload: "metadata",
+					muted: true,
+					className: "copilotKitAttachmentQueuePreviewImage"
+				})
+			});
+			case "document":
+				var _attachment$source$mi;
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "copilotKitAttachmentQueuePreviewDocument",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "copilotKitAttachmentQueueDocIcon",
+						children: (0, _copilotkit_shared.getDocumentIcon)((_attachment$source$mi = attachment.source.mimeType) !== null && _attachment$source$mi !== void 0 ? _attachment$source$mi : "")
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "copilotKitAttachmentQueueDocInfo",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "copilotKitAttachmentQueueFilename",
+							children: attachment.filename || "Document"
+						}), attachment.size != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "copilotKitAttachmentQueueFileSize",
+							children: (0, _copilotkit_shared.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) {
+		var _process$env;
+		if (globalSuppress || suppressedWarnings.has(key)) return;
+		if (typeof process !== "undefined" && ((_process$env = process.env) === null || _process$env === void 0 ? void 0 : _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
@@ -2117,10 +2259,26 @@ rehype_raw = __toESM(rehype_raw);
 	* ```
 	* 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$2 = 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$2 = UserMessage, ImageRenderer: ImageRenderer$1 = ImageRenderer, ErrorMessage, imageUploadsEnabled, inputFileAccept = "image/*", attachments, hideStopButton, observabilityHooks, renderError, onError, RenderTextMessage, RenderActionExecutionMessage, RenderAgentStateMessage, RenderResultMessage, RenderImageMessage }) {
+		var _resolvedAttachments$, _resolvedAttachments$2, _resolvedAttachments$3;
 		const { additionalInstructions, setChatInstructions, copilotApiConfig, setBannerError, setInternalErrorHandler, removeInternalErrorHandler } = (0, _copilotkit_react_core.useCopilotContext)();
 		const { publicApiKey, chatApiEndpoint } = copilotApiConfig;
-		const [selectedImages, setSelectedImages] = (0, react.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$ = resolvedAttachments === null || resolvedAttachments === void 0 ? void 0 : resolvedAttachments.enabled) !== null && _resolvedAttachments$ !== void 0 ? _resolvedAttachments$ : false;
+		const attachmentsAccept = (_resolvedAttachments$2 = resolvedAttachments === null || resolvedAttachments === void 0 ? void 0 : resolvedAttachments.accept) !== null && _resolvedAttachments$2 !== void 0 ? _resolvedAttachments$2 : "*/*";
+		const attachmentsMaxSize = (_resolvedAttachments$3 = resolvedAttachments === null || resolvedAttachments === void 0 ? void 0 : resolvedAttachments.maxSize) !== null && _resolvedAttachments$3 !== void 0 ? _resolvedAttachments$3 : 20 * 1024 * 1024;
+		const [selectedAttachments, setSelectedAttachments] = (0, react.useState)([]);
+		const [dragOver, setDragOver] = (0, react.useState)(false);
+		const processFilesRef = (0, react.useRef)(async () => {});
 		const [chatError, setChatError] = (0, react.useState)(null);
 		const [messageFeedback, setMessageFeedback] = (0, react.useState)({});
 		const fileInputRef = (0, react.useRef)(null);
@@ -2141,8 +2299,10 @@ rehype_raw = __toESM(rehype_raw);
 			setBannerError
 		]);
 		const triggerChatError = (0, react.useCallback)((error, operation, originalError) => {
+			const errorMessage = (error === null || error === void 0 ? void 0 : error.message) || (error === null || error === void 0 ? void 0 : error.toString()) || "An error occurred";
+			console.error(`[CopilotKit] ${operation} error:`, errorMessage, originalError !== null && originalError !== void 0 ? originalError : error);
 			setChatError({
-				message: (error === null || error === void 0 ? void 0 : error.message) || (error === null || error === void 0 ? void 0 : error.toString()) || "An error occurred",
+				message: errorMessage,
 				operation,
 				timestamp: Date.now()
 			});
@@ -2196,42 +2356,28 @@ rehype_raw = __toESM(rehype_raw);
 			removeInternalErrorHandler
 		]);
 		(0, react.useEffect)(() => {
-			if (!imageUploadsEnabled) return;
+			if (!attachmentsEnabled) return;
 			const handlePaste = async (e) => {
 				var _target$parentElement, _e$clipboardData;
 				if (!((_target$parentElement = e.target.parentElement) === null || _target$parentElement === void 0 ? void 0 : _target$parentElement.classList.contains("copilotKitInput"))) return;
-				const imageItems = Array.from(((_e$clipboardData = e.clipboardData) === null || _e$clipboardData === void 0 ? void 0 : _e$clipboardData.items) || []).filter((item) => item.type.startsWith("image/"));
-				if (imageItems.length === 0) return;
+				const fileItems = Array.from(((_e$clipboardData = e.clipboardData) === null || _e$clipboardData === void 0 ? void 0 : _e$clipboardData.items) || []).filter((item) => item.kind === "file" && item.getAsFile() !== null && (0, _copilotkit_shared.matchesAcceptFilter)(item.getAsFile(), 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) => {
-							var _e$target;
-							const base64String = (_e$target = e.target) === null || _e$target === void 0 || (_e$target = _e$target.result) === null || _e$target === void 0 ? void 0 : _e$target.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
+		]);
 		(0, react.useEffect)(() => {
 			if (!(additionalInstructions === null || additionalInstructions === void 0 ? void 0 : additionalInstructions.length)) {
 				setChatInstructions(instructions || "");
@@ -2259,9 +2405,38 @@ rehype_raw = __toESM(rehype_raw);
 			}
 		}, [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: (0, _copilotkit_shared.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: (0, _copilotkit_shared.randomUUID)(),
+					content: contentParts,
+					role: "user"
+				});
+			}
 			return sendMessage({
 				id: (0, _copilotkit_shared.randomUUID)(),
 				content: text,
@@ -2279,35 +2454,111 @@ rehype_raw = __toESM(rehype_raw);
 			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) => {
-						var _e$target2;
-						const base64String = ((_e$target2 = e.target) === null || _e$target2 === void 0 || (_e$target2 = _e$target2.result) === null || _e$target2 === void 0 ? void 0 : _e$target2.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) => (0, _copilotkit_shared.matchesAcceptFilter)(file, attachmentsAccept));
+			const rejectedFiles = files.filter((file) => !(0, _copilotkit_shared.matchesAcceptFilter)(file, attachmentsAccept));
+			for (const file of rejectedFiles) {
+				var _resolvedAttachments$4;
+				const message = `File "${file.name}" is not accepted. Supported types: ${attachmentsAccept}`;
+				triggerChatError(new Error(message), "fileUpload");
+				resolvedAttachments === null || resolvedAttachments === void 0 || (_resolvedAttachments$4 = resolvedAttachments.onUploadFailed) === null || _resolvedAttachments$4 === void 0 || _resolvedAttachments$4.call(resolvedAttachments, {
+					reason: "invalid-type",
+					file,
+					message
 				});
-			});
+			}
+			for (const file of validFiles) {
+				if ((0, _copilotkit_shared.exceedsMaxSize)(file, attachmentsMaxSize)) {
+					var _resolvedAttachments$5;
+					const message = `File "${file.name}" exceeds the maximum size of ${(0, _copilotkit_shared.formatFileSize)(attachmentsMaxSize)}`;
+					triggerChatError(new Error(message), "fileUpload");
+					resolvedAttachments === null || resolvedAttachments === void 0 || (_resolvedAttachments$5 = resolvedAttachments.onUploadFailed) === null || _resolvedAttachments$5 === void 0 || _resolvedAttachments$5.call(resolvedAttachments, {
+						reason: "file-too-large",
+						file,
+						message
+					});
+					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"
+				};
+				setSelectedAttachments((prev) => [...prev, placeholder]);
+				try {
+					let source;
+					let uploadMetadata;
+					if (resolvedAttachments === null || resolvedAttachments === void 0 ? void 0 : resolvedAttachments.onUpload) {
+						const { metadata: meta, ...uploadSource } = await resolvedAttachments.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);
+					setSelectedAttachments((prev) => prev.map((att) => att.id === placeholderId ? {
+						...att,
+						source,
+						status: "ready",
+						thumbnail,
+						metadata: uploadMetadata
+					} : att));
+				} catch (error) {
+					var _resolvedAttachments$6;
+					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 === null || resolvedAttachments === void 0 || (_resolvedAttachments$6 = resolvedAttachments.onUploadFailed) === null || _resolvedAttachments$6 === void 0 || _resolvedAttachments$6.call(resolvedAttachments, {
+						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);
@@ -2325,68 +2576,74 @@ rehype_raw = __toESM(rehype_raw);
 			}));
 			triggerObservabilityHook("onFeedbackGiven", message.id, "thumbsDown");
 		};
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(WrappedCopilotChat, {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(WrappedCopilotChat, {
 			icons,
 			labels,
 			className,
-			children: [
-				chatError && renderError && renderError({
-					...chatError,
-					onDismiss: () => setChatError(null),
-					onRetry: () => {
-						setChatError(null);
-					}
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Messages$2, {
-					AssistantMessage: AssistantMessage$2,
-					UserMessage: UserMessage$2,
-					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__ */ (0, react_jsx_runtime.jsx)(RenderSuggestionsList, {
-						onSuggestionClick: handleSendMessage,
-						suggestions: currentSuggestions,
-						isLoading: isLoadingSuggestions
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				onDragOver: handleDragOver,
+				onDragLeave: handleDragLeave,
+				onDrop: handleDrop,
+				className: dragOver ? "copilotKitDragOver" : "",
+				children: [
+					chatError && renderError && renderError({
+						...chatError,
+						onDismiss: () => setChatError(null),
+						onRetry: () => {
+							setChatError(null);
+						}
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Messages$2, {
+						AssistantMessage: AssistantMessage$2,
+						UserMessage: UserMessage$2,
+						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__ */ (0, react_jsx_runtime.jsx)(RenderSuggestionsList, {
+							onSuggestionClick: handleSendMessage,
+							suggestions: currentSuggestions,
+							isLoading: isLoadingSuggestions
+						})
+					}),
+					attachmentsEnabled && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(AttachmentQueue, {
+						attachments: selectedAttachments,
+						onRemoveAttachment: (id) => setSelectedAttachments((prev) => prev.filter((att) => att.id !== id))
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+						type: "file",
+						multiple: true,
+						ref: fileInputRef,
+						onChange: handleFileUpload,
+						accept: attachmentsAccept,
+						style: { display: "none" }
+					})] }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Input$2, {
+						inProgress: isLoading,
+						chatReady: Boolean(agent),
+						onSend: handleSendMessage,
+						isVisible,
+						onStop: stopGeneration,
+						onUpload: attachmentsEnabled ? () => {
+							var _fileInputRef$current;
+							return (_fileInputRef$current = fileInputRef.current) === null || _fileInputRef$current === void 0 ? void 0 : _fileInputRef$current.click();
+						} : void 0,
+						hideStopButton
 					})
-				}),
-				imageUploadsEnabled && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ImageUploadQueue, {
-					images: selectedImages,
-					onRemoveImage: removeSelectedImage
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-					type: "file",
-					multiple: true,
-					ref: fileInputRef,
-					onChange: handleImageUpload,
-					accept: inputFileAccept,
-					style: { display: "none" }
-				})] }),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Input$2, {
-					inProgress: isLoading,
-					chatReady: Boolean(agent),
-					onSend: handleSendMessage,
-					isVisible,
-					onStop: stopGeneration,
-					onUpload: imageUploadsEnabled ? () => {
-						var _fileInputRef$current;
-						return (_fileInputRef$current = fileInputRef.current) === null || _fileInputRef$current === void 0 ? void 0 : _fileInputRef$current.click();
-					} : void 0,
-					hideStopButton
-				})
-			]
+				]
+			})
 		});
 	}
 	function WrappedCopilotChat({ children, icons, labels, className }) {
@@ -2439,7 +2696,10 @@ rehype_raw = __toESM(rehype_raw);
 			triggerObservabilityHook
 		]);
 		const memoizedHeader = (0, react.useMemo)(() => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Header, {}), [Header]);
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [(0, react.useMemo)(() => children, [children]), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "copilotKitModalChildrenWrapper",
+			children: (0, react.useMemo)(() => children, [children])
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className,
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Window, {
 				clickOutsideToClose,
@@ -2747,6 +3007,7 @@ Object.defineProperty(exports, 'shouldShowDevConsole', {
     return _copilotkit_react_core.shouldShowDevConsole;
   }
 });
+exports.suppressDeprecationWarnings = suppressDeprecationWarnings;
 exports.useChatContext = useChatContext;
 exports.useCopilotChatSuggestions = useCopilotChatSuggestions;
 });