@cadraos/sdk 0.1.6 → 0.1.7

package/dist/chat/index.cjs

@@ -3221,8 +3221,9 @@ function useAgentChat(options) {
     [adapter, handleExecutionLog, updateStreamingMessage, updateToolCall, handleClarification, handleComplete, handleError]
   );
   const sendMessage = react.useCallback(
-    async (content) => {
+    async (content, options2) => {
       if (!content.trim()) return;
+      const attachmentUuids = options2?.attachmentUuids;
       lastMessageContentRef.current = content;
       setIsLoading(true);
       setError(null);
@@ -3253,7 +3254,8 @@ function useAgentChat(options) {
           agentId,
           teamId,
           sessionId: currentSessionId ?? void 0,
-          content: content.trim()
+          content: content.trim(),
+          attachmentUuids
         });
         console.log("[useAgentChat] Execution started:", result);
         if (!currentSessionId && result.sessionId) {
@@ -3462,6 +3464,222 @@ function useAgentChat(options) {
     loadSession
   };
 }
+
+// src/chat/utils/compress-image.ts
+var DEFAULT_TARGET_SIZE_KB = 150;
+var MAX_DIMENSION = 1920;
+var QUALITY_START = 0.85;
+var QUALITY_STEP = 0.05;
+var QUALITY_MIN = 0.1;
+function loadImage(file) {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    const url = URL.createObjectURL(file);
+    img.onload = () => {
+      URL.revokeObjectURL(url);
+      resolve(img);
+    };
+    img.onerror = () => {
+      URL.revokeObjectURL(url);
+      reject(new Error(`Failed to load image: ${file.name}`));
+    };
+    img.src = url;
+  });
+}
+function getScaledDimensions(width, height, maxDim) {
+  if (width <= maxDim && height <= maxDim) {
+    return { width, height };
+  }
+  const ratio = Math.min(maxDim / width, maxDim / height);
+  return {
+    width: Math.round(width * ratio),
+    height: Math.round(height * ratio)
+  };
+}
+function canvasToBlob(img, width, height, format, quality) {
+  return new Promise((resolve, reject) => {
+    const canvas = document.createElement("canvas");
+    canvas.width = width;
+    canvas.height = height;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) {
+      reject(new Error("Failed to get canvas 2d context"));
+      return;
+    }
+    ctx.drawImage(img, 0, 0, width, height);
+    canvas.toBlob(
+      (blob) => {
+        if (!blob) {
+          reject(new Error("Canvas toBlob returned null"));
+          return;
+        }
+        resolve(blob);
+      },
+      format,
+      quality
+    );
+  });
+}
+var webpSupported = null;
+function supportsWebP() {
+  if (webpSupported !== null) return webpSupported;
+  try {
+    const canvas = document.createElement("canvas");
+    canvas.width = 1;
+    canvas.height = 1;
+    webpSupported = canvas.toDataURL("image/webp").startsWith("data:image/webp");
+  } catch {
+    webpSupported = false;
+  }
+  return webpSupported;
+}
+function getOutputFormat(_originalType) {
+  if (supportsWebP()) {
+    return { mime: "image/webp", ext: ".webp" };
+  }
+  return { mime: "image/jpeg", ext: ".jpg" };
+}
+function replaceExtension(filename, newExt) {
+  const dotIndex = filename.lastIndexOf(".");
+  if (dotIndex === -1) return filename + newExt;
+  return filename.substring(0, dotIndex) + newExt;
+}
+async function compressImage(file, targetSizeKB = DEFAULT_TARGET_SIZE_KB) {
+  if (!file.type.startsWith("image/")) {
+    return file;
+  }
+  if (file.type === "image/svg+xml") {
+    return file;
+  }
+  if (file.type === "image/gif") {
+    return file;
+  }
+  const targetBytes = targetSizeKB * 1024;
+  if (file.size <= targetBytes) {
+    return file;
+  }
+  const img = await loadImage(file);
+  const { width, height } = getScaledDimensions(
+    img.naturalWidth,
+    img.naturalHeight,
+    MAX_DIMENSION
+  );
+  const { mime, ext } = getOutputFormat(file.type);
+  let quality = QUALITY_START;
+  let blob = null;
+  while (quality >= QUALITY_MIN) {
+    blob = await canvasToBlob(img, width, height, mime, quality);
+    if (blob.size <= targetBytes) {
+      break;
+    }
+    quality -= QUALITY_STEP;
+  }
+  if (!blob) {
+    blob = await canvasToBlob(img, width, height, mime, QUALITY_MIN);
+  }
+  if (blob.size >= file.size) {
+    return file;
+  }
+  const newFilename = replaceExtension(file.name, ext);
+  return new File([blob], newFilename, {
+    type: mime,
+    lastModified: Date.now()
+  });
+}
+
+// src/chat/hooks/useFileAttachments.ts
+function useFileAttachments(options) {
+  const { onUpload, onConfirmUpload, onSubmitUpload, onError, maxFiles = 10, maxTotalSizeMB = 100 } = options;
+  const [files, setFiles] = react.useState([]);
+  const filesRef = react.useRef(files);
+  filesRef.current = files;
+  const onFilesChange = react.useCallback((newFiles) => {
+    filesRef.current = newFiles;
+    setFiles(newFiles);
+  }, []);
+  const removeFile = react.useCallback((uuid) => {
+    setFiles((prev) => {
+      const file = prev.find((f) => f.uuid === uuid);
+      if (file?.previewUrl) {
+        URL.revokeObjectURL(file.previewUrl);
+      }
+      return prev.filter((f) => f.uuid !== uuid);
+    });
+  }, []);
+  const getReadyUuids = react.useCallback(() => {
+    return filesRef.current.filter((f) => f.status === "ready").map((f) => f.uuid);
+  }, []);
+  const getReadyUrls = react.useCallback(() => {
+    return filesRef.current.filter((f) => f.status === "ready").map((f) => f.uuid);
+  }, []);
+  const prepareForSubmit = react.useCallback(async () => {
+    const readyFiles = filesRef.current.filter((f) => f.status === "ready");
+    console.log("[useFileAttachments] prepareForSubmit - readyFiles:", readyFiles.length, "hasSubmitUpload:", !!onSubmitUpload);
+    if (readyFiles.length === 0) return [];
+    if (!onSubmitUpload) {
+      return readyFiles.map((f) => f.uuid);
+    }
+    const aiUuids = [];
+    for (const attachment of readyFiles) {
+      try {
+        let fileToSend = attachment.file;
+        if (attachment.category === "image") {
+          try {
+            fileToSend = await compressImage(attachment.file);
+          } catch {
+          }
+        }
+        console.log("[useFileAttachments] Uploading to AI service:", attachment.file.name, "localUuid:", attachment.uuid.substring(0, 40));
+        const aiUuid = await onSubmitUpload(
+          fileToSend,
+          attachment.uuid,
+          { filename: fileToSend.name, mimeType: fileToSend.type, size: fileToSend.size }
+        );
+        console.log("[useFileAttachments] AI service returned UUID:", aiUuid);
+        aiUuids.push(aiUuid);
+      } catch (err) {
+        const msg = err instanceof Error ? err.message : "Submit upload failed";
+        console.error("[useFileAttachments] Submit upload failed for:", attachment.file.name, msg);
+        onError?.(msg);
+      }
+    }
+    console.log("[useFileAttachments] prepareForSubmit result:", aiUuids);
+    return aiUuids;
+  }, [onSubmitUpload, onError]);
+  const clear = react.useCallback(() => {
+    for (const file of filesRef.current) {
+      if (file.previewUrl) {
+        URL.revokeObjectURL(file.previewUrl);
+      }
+    }
+    setFiles([]);
+  }, []);
+  const isUploading = files.some(
+    (f) => f.status === "uploading" || f.status === "pending" || f.status === "processing"
+  );
+  const hasReadyFiles = files.some((f) => f.status === "ready");
+  const dropZoneProps = {
+    files,
+    onFilesChange,
+    onUpload,
+    onConfirmUpload,
+    onError,
+    maxFiles,
+    maxTotalSizeMB
+  };
+  return {
+    files,
+    dropZoneProps,
+    removeFile,
+    getReadyUuids,
+    getReadyUrls,
+    prepareForSubmit,
+    clear,
+    isUploading,
+    hasReadyFiles,
+    fileCount: files.length
+  };
+}
 function cn(...classes) {
   return classes.filter(Boolean).join(" ");
 }
@@ -4111,6 +4329,51 @@ function ChatContainer({
 function cn3(...classes) {
   return classes.filter(Boolean).join(" ");
 }
+function formatFileSize(bytes) {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+function AttachmentChip({ attachment, onRemove }) {
+  const isLoading = attachment.status === "uploading" || attachment.status === "pending" || attachment.status === "processing";
+  const isError = attachment.status === "error" || attachment.status === "failed";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn3(
+        "inline-flex items-center gap-1.5 px-2 py-1 rounded-md text-xs max-w-[180px]",
+        isError ? "bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-300 border border-red-200 dark:border-red-800" : "bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 border border-gray-200 dark:border-gray-600"
+      ),
+      children: [
+        attachment.previewUrl && /* @__PURE__ */ jsxRuntime.jsx(
+          "img",
+          {
+            src: attachment.previewUrl,
+            alt: "",
+            className: "w-5 h-5 rounded object-cover flex-shrink-0"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: attachment.file.name }),
+        isLoading ? /* @__PURE__ */ jsxRuntime.jsx(LoadingSpinner, { className: "h-3 w-3 flex-shrink-0" }) : isError ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-shrink-0 text-red-500", title: attachment.error, children: "!" }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-shrink-0 text-gray-400 dark:text-gray-500", children: formatFileSize(attachment.actualSize ?? attachment.file.size) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: (e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              onRemove(attachment.uuid);
+            },
+            className: "flex-shrink-0 p-0.5 rounded hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors",
+            "aria-label": `Remove ${attachment.file.name}`,
+            disabled: isLoading,
+            children: /* @__PURE__ */ jsxRuntime.jsx(XIcon, { className: "h-3 w-3" })
+          }
+        )
+      ]
+    }
+  );
+}
 function ChatInput({
   onSend,
   onStop,
@@ -4118,10 +4381,15 @@ function ChatInput({
   disabled = false,
   isLoading = false,
   enableAttachments = false,
+  attachments = [],
+  onRemoveAttachment,
+  dropZoneRef,
+  isUploadingAttachments = false,
   className
 }) {
   const [content, setContent] = react.useState("");
   const textareaRef = react.useRef(null);
+  const hasAttachments = enableAttachments && attachments.length > 0;
   react.useEffect(() => {
     const textarea = textareaRef.current;
     if (textarea) {
@@ -4131,10 +4399,10 @@ function ChatInput({
   }, [content]);
   const handleSubmit = react.useCallback(async () => {
     const trimmedContent = content.trim();
-    if (!trimmedContent || disabled || isLoading) return;
+    if (!trimmedContent && !hasAttachments || disabled || isLoading || isUploadingAttachments) return;
     setContent("");
     await onSend(trimmedContent);
-  }, [content, disabled, isLoading, onSend]);
+  }, [content, hasAttachments, disabled, isLoading, isUploadingAttachments, onSend]);
   const handleKeyDown = react.useCallback(
     (e) => {
       if (e.key === "Enter" && !e.shiftKey) {
@@ -4147,7 +4415,10 @@ function ChatInput({
   const handleStopClick = react.useCallback(() => {
     onStop?.();
   }, [onStop]);
-  const canSend = content.trim().length > 0 && !disabled && !isLoading;
+  const handleAttachClick = react.useCallback(() => {
+    dropZoneRef?.current?.openFileDialog();
+  }, [dropZoneRef]);
+  const canSend = (content.trim().length > 0 || hasAttachments) && !disabled && !isLoading && !isUploadingAttachments;
   const showStopButton = isLoading && onStop;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
@@ -4157,7 +4428,34 @@ function ChatInput({
         className
       ),
       children: [
+        hasAttachments && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-1.5 mb-2", children: attachments.map((attachment) => /* @__PURE__ */ jsxRuntime.jsx(
+          AttachmentChip,
+          {
+            attachment,
+            onRemove: onRemoveAttachment ?? (() => {
+            })
+          },
+          attachment.uuid
+        )) }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-end gap-2", children: [
+          enableAttachments && /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: handleAttachClick,
+              disabled: disabled || isLoading,
+              className: cn3(
+                "flex-shrink-0 p-3 rounded-lg transition-colors",
+                "text-gray-500 dark:text-gray-400",
+                "hover:bg-gray-100 dark:hover:bg-gray-700",
+                "disabled:opacity-50 disabled:cursor-not-allowed",
+                "focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+              ),
+              "aria-label": "Attach files",
+              title: "Attach files",
+              children: /* @__PURE__ */ jsxRuntime.jsx(PaperclipIcon, { className: "h-5 w-5" })
+            }
+          ),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 relative", children: /* @__PURE__ */ jsxRuntime.jsx(
             "textarea",
             {
@@ -4165,7 +4463,7 @@ function ChatInput({
               value: content,
               onChange: (e) => setContent(e.target.value),
               onKeyDown: handleKeyDown,
-              placeholder,
+              placeholder: hasAttachments && !content ? `${attachments.length} file${attachments.length > 1 ? "s" : ""} attached. Add a message or press Enter to send.` : placeholder,
               disabled,
               rows: 1,
               className: cn3(
@@ -4215,9 +4513,664 @@ function ChatInput({
     }
   );
 }
+function Upload({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
+    /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "17 8 12 3 7 8" }),
+    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", x2: "12", y1: "3", y2: "15" })
+  ] });
+}
+function X({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 6 6 18" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m6 6 12 12" })
+  ] });
+}
+function FileText({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M14 2v4a2 2 0 0 0 2 2h4" }),
+    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "16", x2: "8", y1: "13", y2: "13" }),
+    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "16", x2: "8", y1: "17", y2: "17" }),
+    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "10", x2: "8", y1: "9", y2: "9" })
+  ] });
+}
+function ImageIcon2({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", ry: "2" }),
+    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "9", cy: "9", r: "2" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" })
+  ] });
+}
+function Music({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 18V5l12-2v13" }),
+    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "6", cy: "18", r: "3" }),
+    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "18", cy: "16", r: "3" })
+  ] });
+}
+function Loader2({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }) });
+}
+function FileIcon2({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M14 2v4a2 2 0 0 0 2 2h4" })
+  ] });
+}
+function RotateCw({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 3v5h-5" })
+  ] });
+}
 function cn4(...classes) {
   return classes.filter(Boolean).join(" ");
 }
+var SUPPORTED_TYPES = {
+  document: {
+    mimeTypes: [
+      "application/pdf",
+      "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+      "application/msword",
+      "text/plain",
+      "text/markdown",
+      "text/csv",
+      "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+      "application/vnd.ms-excel"
+    ],
+    extensions: [
+      ".pdf",
+      ".docx",
+      ".doc",
+      ".txt",
+      ".md",
+      ".csv",
+      ".xlsx",
+      ".xls"
+    ],
+    maxSizeMB: 25,
+    label: "Documents"
+  },
+  image: {
+    mimeTypes: [
+      "image/png",
+      "image/jpeg",
+      "image/gif",
+      "image/webp",
+      "image/svg+xml"
+    ],
+    extensions: [".png", ".jpg", ".jpeg", ".gif", ".webp", ".svg"],
+    maxSizeMB: 10,
+    label: "Images"
+  },
+  audio: {
+    mimeTypes: [
+      "audio/mpeg",
+      "audio/wav",
+      "audio/mp4",
+      "audio/ogg",
+      "audio/webm"
+    ],
+    extensions: [".mp3", ".wav", ".m4a", ".ogg", ".webm"],
+    maxSizeMB: 50,
+    label: "Audio"
+  }
+};
+var MAX_FILES_PER_DROP = 10;
+var MAX_TOTAL_SIZE_MB = 100;
+function categorizeFile(mimeType) {
+  for (const [category, config] of Object.entries(SUPPORTED_TYPES)) {
+    if (config.mimeTypes.includes(mimeType)) {
+      return category;
+    }
+  }
+  return null;
+}
+function validateFile(file) {
+  const category = categorizeFile(file.type);
+  if (!category) {
+    return {
+      valid: false,
+      error: `Unsupported file type: ${file.type || file.name.split(".").pop()}`
+    };
+  }
+  const config = SUPPORTED_TYPES[category];
+  const maxSizeBytes = config.maxSizeMB * 1024 * 1024;
+  if (file.size > maxSizeBytes) {
+    return {
+      valid: false,
+      error: `${file.name} exceeds ${config.maxSizeMB}MB limit for ${config.label.toLowerCase()}`
+    };
+  }
+  return { valid: true, category };
+}
+function formatFileSize2(bytes) {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+function getCategoryIcon(category) {
+  switch (category) {
+    case "document":
+      return FileText;
+    case "image":
+      return ImageIcon2;
+    case "audio":
+      return Music;
+    default:
+      return FileIcon2;
+  }
+}
+var FileDropZone = react.forwardRef(
+  function FileDropZone2({
+    onFilesChange,
+    files,
+    onUpload,
+    onConfirmUpload,
+    onError,
+    maxFiles = MAX_FILES_PER_DROP,
+    maxTotalSizeMB = MAX_TOTAL_SIZE_MB,
+    disabled = false,
+    className,
+    accept,
+    compact = false,
+    children
+  }, ref) {
+    const [isDragging, setIsDragging] = react.useState(false);
+    const fileInputRef = react.useRef(null);
+    const dropZoneRef = react.useRef(null);
+    const dragCounter = react.useRef(0);
+    react.useImperativeHandle(
+      ref,
+      () => ({
+        openFileDialog: () => {
+          if (!disabled) {
+            fileInputRef.current?.click();
+          }
+        }
+      }),
+      [disabled]
+    );
+    const currentTotalSize = files.reduce((sum, f) => sum + f.file.size, 0);
+    const uploadFile = react.useCallback(
+      async (file, _tempId) => {
+        const result = await onUpload(file, {
+          filename: file.name,
+          mimeType: file.type,
+          size: file.size
+        });
+        if (result.uploadUrl) {
+          const uploadResponse = await fetch(result.uploadUrl, {
+            method: "PUT",
+            body: file,
+            headers: { "Content-Type": file.type }
+          });
+          if (!uploadResponse.ok) {
+            throw new Error(`Upload failed: ${uploadResponse.statusText}`);
+          }
+        }
+        if (onConfirmUpload) {
+          await onConfirmUpload(result.uuid);
+        }
+        return result.uuid;
+      },
+      [onUpload, onConfirmUpload]
+    );
+    const handleFiles = react.useCallback(
+      async (selectedFiles) => {
+        if (disabled) return;
+        if (files.length + selectedFiles.length > maxFiles) {
+          onError?.(`Maximum ${maxFiles} files allowed`);
+          return;
+        }
+        const validFiles = [];
+        let newTotalSize = currentTotalSize;
+        for (const file of selectedFiles) {
+          const validation = validateFile(file);
+          if (!validation.valid) {
+            onError?.(validation.error);
+            continue;
+          }
+          newTotalSize += file.size;
+          if (newTotalSize > maxTotalSizeMB * 1024 * 1024) {
+            onError?.(`Total upload size exceeds ${maxTotalSizeMB}MB`);
+            break;
+          }
+          validFiles.push({ file, category: validation.category });
+        }
+        if (validFiles.length === 0) return;
+        const processedFiles = [];
+        for (const entry of validFiles) {
+          if (entry.category === "image") {
+            try {
+              const compressed = await compressImage(entry.file);
+              processedFiles.push({ file: compressed, category: entry.category });
+            } catch (err) {
+              console.warn("Image compression failed, using original:", err);
+              processedFiles.push(entry);
+            }
+          } else {
+            processedFiles.push(entry);
+          }
+        }
+        const newAttachments = processedFiles.map(
+          ({ file, category }) => {
+            const tempId = `temp-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+            return {
+              uuid: tempId,
+              file,
+              status: "pending",
+              progress: 0,
+              category,
+              previewUrl: category === "image" ? URL.createObjectURL(file) : void 0
+            };
+          }
+        );
+        let currentFiles = [...files, ...newAttachments];
+        onFilesChange(currentFiles);
+        for (const attachment of newAttachments) {
+          try {
+            currentFiles = currentFiles.map(
+              (f) => f.uuid === attachment.uuid ? { ...f, status: "uploading", progress: 10 } : f
+            );
+            onFilesChange(currentFiles);
+            const realUuid = await uploadFile(attachment.file, attachment.uuid);
+            currentFiles = currentFiles.map(
+              (f) => f.uuid === attachment.uuid ? {
+                ...f,
+                uuid: realUuid,
+                status: "ready",
+                progress: 100,
+                hasThumbnail: f.category === "image"
+              } : f
+            );
+            onFilesChange(currentFiles);
+          } catch (error) {
+            console.error("Upload error:", error);
+            currentFiles = currentFiles.map(
+              (f) => f.uuid === attachment.uuid ? {
+                ...f,
+                status: "error",
+                error: error instanceof Error ? error.message : "Upload failed"
+              } : f
+            );
+            onFilesChange(currentFiles);
+            onError?.(`Failed to upload ${attachment.file.name}`);
+          }
+        }
+      },
+      [
+        disabled,
+        files,
+        maxFiles,
+        currentTotalSize,
+        maxTotalSizeMB,
+        onFilesChange,
+        uploadFile,
+        onError
+      ]
+    );
+    const handleRemove = react.useCallback(
+      (uuid) => {
+        const file = files.find((f) => f.uuid === uuid);
+        if (file?.previewUrl) {
+          URL.revokeObjectURL(file.previewUrl);
+        }
+        onFilesChange(files.filter((f) => f.uuid !== uuid));
+      },
+      [files, onFilesChange]
+    );
+    const handleRetry = react.useCallback(
+      async (uuid) => {
+        const attachment = files.find((f) => f.uuid === uuid);
+        if (!attachment || attachment.status !== "error") return;
+        let currentFiles = files.map(
+          (f) => f.uuid === uuid ? { ...f, status: "pending", progress: 0, error: void 0 } : f
+        );
+        onFilesChange(currentFiles);
+        try {
+          currentFiles = currentFiles.map(
+            (f) => f.uuid === uuid ? { ...f, status: "uploading", progress: 10 } : f
+          );
+          onFilesChange(currentFiles);
+          const realUuid = await uploadFile(attachment.file, uuid);
+          currentFiles = currentFiles.map(
+            (f) => f.uuid === uuid ? {
+              ...f,
+              uuid: realUuid,
+              status: "ready",
+              progress: 100,
+              hasThumbnail: f.category === "image"
+            } : f
+          );
+          onFilesChange(currentFiles);
+        } catch (error) {
+          console.error("Retry upload error:", error);
+          currentFiles = currentFiles.map(
+            (f) => f.uuid === uuid ? {
+              ...f,
+              status: "error",
+              error: error instanceof Error ? error.message : "Upload failed"
+            } : f
+          );
+          onFilesChange(currentFiles);
+          onError?.(`Failed to upload ${attachment.file.name}`);
+        }
+      },
+      [files, onFilesChange, uploadFile, onError]
+    );
+    const hasDraggedFiles = react.useCallback((e) => {
+      if (e.dataTransfer.types) {
+        for (const type of e.dataTransfer.types) {
+          if (type === "Files") return true;
+        }
+      }
+      return false;
+    }, []);
+    const handleDragEnter = react.useCallback(
+      (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (!hasDraggedFiles(e)) return;
+        dragCounter.current++;
+        if (!disabled && dragCounter.current === 1) {
+          setIsDragging(true);
+        }
+      },
+      [disabled, hasDraggedFiles]
+    );
+    const handleDragOver = react.useCallback(
+      (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (hasDraggedFiles(e)) {
+          e.dataTransfer.dropEffect = disabled ? "none" : "copy";
+        }
+      },
+      [disabled, hasDraggedFiles]
+    );
+    const handleDragLeave = react.useCallback((e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      if (dragCounter.current > 0) {
+        dragCounter.current--;
+        if (dragCounter.current === 0) {
+          setIsDragging(false);
+        }
+      }
+    }, []);
+    const handleDrop = react.useCallback(
+      (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        dragCounter.current = 0;
+        setIsDragging(false);
+        if (disabled) return;
+        const droppedFiles = Array.from(e.dataTransfer.files);
+        if (droppedFiles.length > 0) {
+          handleFiles(droppedFiles);
+        }
+      },
+      [handleFiles, disabled]
+    );
+    const handleFileSelect = react.useCallback(
+      (e) => {
+        const selectedFiles = e.target.files;
+        if (selectedFiles) {
+          handleFiles(Array.from(selectedFiles));
+        }
+        if (fileInputRef.current) {
+          fileInputRef.current.value = "";
+        }
+      },
+      [handleFiles]
+    );
+    const handleClick = react.useCallback(() => {
+      if (!disabled) {
+        fileInputRef.current?.click();
+      }
+    }, [disabled]);
+    const checkDataTransferHasFiles = react.useCallback(
+      (dataTransfer) => {
+        if (!dataTransfer?.types) return false;
+        for (let i = 0; i < dataTransfer.types.length; i++) {
+          if (dataTransfer.types[i] === "Files") return true;
+        }
+        return false;
+      },
+      []
+    );
+    react.useEffect(() => {
+      if (!children || !dropZoneRef.current) return;
+      const element = dropZoneRef.current;
+      let enterCounter = 0;
+      const handleDragEnterNative = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (!checkDataTransferHasFiles(e.dataTransfer)) return;
+        enterCounter++;
+        if (enterCounter === 1 && !disabled) {
+          setIsDragging(true);
+        }
+      };
+      const handleDragLeaveNative = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (!checkDataTransferHasFiles(e.dataTransfer)) return;
+        enterCounter--;
+        if (enterCounter <= 0) {
+          enterCounter = 0;
+          setIsDragging(false);
+        }
+      };
+      const handleDragOverNative = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (checkDataTransferHasFiles(e.dataTransfer) && !disabled && e.dataTransfer) {
+          e.dataTransfer.dropEffect = "copy";
+        }
+      };
+      const handleDropNative = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        enterCounter = 0;
+        setIsDragging(false);
+        if (disabled) return;
+        const droppedFiles = e.dataTransfer?.files;
+        if (droppedFiles && droppedFiles.length > 0) {
+          handleFiles(Array.from(droppedFiles));
+        }
+      };
+      element.addEventListener("dragenter", handleDragEnterNative, true);
+      element.addEventListener("dragleave", handleDragLeaveNative, true);
+      element.addEventListener("dragover", handleDragOverNative, true);
+      element.addEventListener("drop", handleDropNative, true);
+      return () => {
+        element.removeEventListener("dragenter", handleDragEnterNative, true);
+        element.removeEventListener("dragleave", handleDragLeaveNative, true);
+        element.removeEventListener("dragover", handleDragOverNative, true);
+        element.removeEventListener("drop", handleDropNative, true);
+      };
+    }, [children, disabled, handleFiles, checkDataTransferHasFiles]);
+    react.useEffect(() => {
+      if (disabled) {
+        dragCounter.current = 0;
+        setIsDragging(false);
+      }
+    }, [disabled]);
+    const acceptTypes = accept || Object.values(SUPPORTED_TYPES).flatMap((t) => [...t.mimeTypes, ...t.extensions]).join(",");
+    const hasFiles = files.length > 0;
+    const isUploading = files.some((f) => f.status === "uploading");
+    if (children) {
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          ref: dropZoneRef,
+          "data-dropzone": "wrapper",
+          className: cn4("relative w-full h-full", className),
+          style: { minHeight: "inherit" },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                ref: fileInputRef,
+                type: "file",
+                multiple: true,
+                accept: acceptTypes,
+                onChange: handleFileSelect,
+                className: "hidden",
+                disabled
+              }
+            ),
+            children,
+            isDragging && !disabled && /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: "absolute inset-0 z-50 bg-primary/10 border-2 border-dashed border-primary rounded-xl flex flex-col items-center justify-center backdrop-blur-sm transition-opacity duration-200",
+                style: { pointerEvents: "none" },
+                children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-background/80 rounded-xl p-8 flex flex-col items-center shadow-lg", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(Upload, { className: "h-12 w-12 text-primary mb-4 animate-bounce" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-lg font-medium text-primary", children: "Drop files here" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground mt-2", children: "Documents, images, or audio files" })
+                ] })
+              }
+            )
+          ]
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn4("w-full", className), children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          ref: fileInputRef,
+          type: "file",
+          multiple: true,
+          accept: acceptTypes,
+          onChange: handleFileSelect,
+          className: "hidden",
+          disabled
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          onDragEnter: handleDragEnter,
+          onDragOver: handleDragOver,
+          onDragLeave: handleDragLeave,
+          onDrop: handleDrop,
+          onClick: handleClick,
+          className: cn4(
+            "relative rounded-lg border-2 border-dashed transition-all cursor-pointer",
+            "flex flex-col items-center justify-center",
+            compact ? "p-2 min-h-[60px]" : "p-4 min-h-[100px]",
+            isDragging && !disabled ? "border-primary bg-primary/5" : "border-muted-foreground/25",
+            disabled ? "opacity-50 cursor-not-allowed" : "hover:border-primary/50 hover:bg-muted/25"
+          ),
+          children: [
+            isUploading ? /* @__PURE__ */ jsxRuntime.jsx(
+              Loader2,
+              {
+                className: cn4(
+                  "animate-spin text-muted-foreground",
+                  compact ? "h-5 w-5 mb-1" : "h-8 w-8 mb-2"
+                )
+              }
+            ) : /* @__PURE__ */ jsxRuntime.jsx(
+              Upload,
+              {
+                className: cn4(
+                  "text-muted-foreground",
+                  compact ? "h-5 w-5 mb-1" : "h-8 w-8 mb-2"
+                )
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "p",
+              {
+                className: cn4(
+                  "font-medium text-center text-muted-foreground",
+                  compact ? "text-xs" : "text-sm"
+                ),
+                children: isDragging ? "Drop files here" : isUploading ? "Uploading..." : "Click to upload or drag and drop"
+              }
+            ),
+            !compact && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground/70 text-center mt-1", children: "Documents, images, or audio files" })
+          ]
+        }
+      ),
+      hasFiles && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn4("space-y-2", compact ? "mt-2" : "mt-3"), children: files.map((attachment) => {
+        const Icon = getCategoryIcon(attachment.category);
+        const isError = attachment.status === "error";
+        const isLoading = attachment.status === "uploading" || attachment.status === "processing";
+        return /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn4(
+              "flex items-center gap-3 p-2 rounded-lg border",
+              isError ? "border-destructive/50 bg-destructive/5" : "border-border bg-muted/25"
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex-shrink-0 w-10 h-10 rounded overflow-hidden bg-muted flex items-center justify-center", children: [
+                attachment.previewUrl ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "img",
+                  {
+                    src: attachment.previewUrl,
+                    alt: attachment.file.name,
+                    className: "w-full h-full object-cover"
+                  }
+                ) : /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "h-5 w-5 text-muted-foreground" }),
+                isLoading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-background/80 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(Loader2, { className: "h-4 w-4 animate-spin" }) })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium truncate", children: attachment.file.name }),
+                /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs text-muted-foreground", children: [
+                  formatFileSize2(attachment.file.size),
+                  isError && attachment.error && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-destructive ml-2", children: attachment.error })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0", children: isLoading ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-muted-foreground", children: [
+                attachment.progress,
+                "%"
+              ] }) : attachment.status === "ready" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-green-600", children: "Ready" }) : null }),
+              isError && /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "flex-shrink-0 h-8 w-8 inline-flex items-center justify-center rounded-md text-primary hover:bg-muted transition-colors",
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    handleRetry(attachment.uuid);
+                  },
+                  title: "Retry upload",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(RotateCw, { className: "h-4 w-4" })
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "flex-shrink-0 h-8 w-8 inline-flex items-center justify-center rounded-md hover:bg-muted transition-colors disabled:opacity-50",
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    handleRemove(attachment.uuid);
+                  },
+                  disabled: isLoading,
+                  children: /* @__PURE__ */ jsxRuntime.jsx(X, { className: "h-4 w-4" })
+                }
+              )
+            ]
+          },
+          attachment.uuid
+        );
+      }) })
+    ] });
+  }
+);
+function cn5(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
 function AskUserPrompt({
   question,
   options,
@@ -4251,7 +5204,7 @@ function AskUserPrompt({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: cn4(
+      className: cn5(
         "rounded-lg border p-4 space-y-3",
         status === "waiting" ? "border-blue-200 bg-blue-50/50 dark:border-blue-800 dark:bg-blue-950/20" : "border-green-200 bg-green-50/50 dark:border-green-800 dark:bg-green-950/20",
         className
@@ -4263,7 +5216,7 @@ function AskUserPrompt({
           /* @__PURE__ */ jsxRuntime.jsx(
             "span",
             {
-              className: cn4(
+              className: cn5(
                 "ml-auto text-xs px-2 py-1 rounded-full font-medium",
                 status === "waiting" ? "bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300" : "bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300"
               ),
@@ -4278,7 +5231,7 @@ function AskUserPrompt({
             type: "button",
             onClick: () => handleOptionSelect(option),
             disabled,
-            className: cn4(
+            className: cn5(
               "px-3 py-1.5 text-sm rounded-md border transition-all",
               selectedOption === option ? "bg-blue-600 text-white border-blue-600 hover:bg-blue-700" : "bg-white dark:bg-gray-800 border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300",
               disabled && "opacity-50 cursor-not-allowed"
@@ -4298,7 +5251,7 @@ function AskUserPrompt({
               },
               onKeyDown: handleKeyDown,
               placeholder: options?.length ? "Or type a custom response..." : "Type your response...",
-              className: cn4(
+              className: cn5(
                 "flex-1 min-h-[60px] px-3 py-2 text-sm resize-none rounded-md border",
                 "border-gray-300 dark:border-gray-600",
                 "bg-white dark:bg-gray-800",
@@ -4316,7 +5269,7 @@ function AskUserPrompt({
               type: "button",
               onClick: handleSubmit,
               disabled: isSubmitDisabled,
-              className: cn4(
+              className: cn5(
                 "self-end px-4 py-2 rounded-md text-white transition-colors",
                 "bg-blue-600 hover:bg-blue-700",
                 "disabled:opacity-50 disabled:cursor-not-allowed"
@@ -4337,7 +5290,7 @@ function AskUserPrompt({
     }
   );
 }
-function cn5(...classes) {
+function cn6(...classes) {
   return classes.filter(Boolean).join(" ");
 }
 function MarkdownContent({
@@ -4398,7 +5351,7 @@ function MarkdownContent({
         if (isCodeBlock) {
           return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative my-2", children: [
             language && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-0 right-0 px-2 py-1 text-xs font-mono text-gray-500 dark:text-gray-400 bg-gray-100 dark:bg-gray-800 rounded-bl rounded-tr border-b border-l border-gray-200 dark:border-gray-700", children: language }),
-            /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "bg-gray-100 dark:bg-gray-800 rounded-lg p-4 overflow-x-auto text-sm", children: /* @__PURE__ */ jsxRuntime.jsx("code", { className: cn5("font-mono", codeClassName), ...props, children }) })
+            /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "bg-gray-100 dark:bg-gray-800 rounded-lg p-4 overflow-x-auto text-sm", children: /* @__PURE__ */ jsxRuntime.jsx("code", { className: cn6("font-mono", codeClassName), ...props, children }) })
           ] });
         }
         return /* @__PURE__ */ jsxRuntime.jsx(
@@ -4445,7 +5398,7 @@ function MarkdownContent({
     () => customComponents ? { ...defaultComponents, ...customComponents } : defaultComponents,
     [defaultComponents, customComponents]
   );
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn5("prose prose-sm dark:prose-invert max-w-none", className), children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn6("prose prose-sm dark:prose-invert max-w-none", className), children: /* @__PURE__ */ jsxRuntime.jsx(
     ReactMarkdown__default.default,
     {
       remarkPlugins: [remarkGfm__default.default],
@@ -4455,7 +5408,7 @@ function MarkdownContent({
     }
   ) });
 }
-function cn6(...classes) {
+function cn7(...classes) {
   return classes.filter(Boolean).join(" ");
 }
 function formatToolName(toolName) {
@@ -4603,7 +5556,7 @@ function ToolCallEntry({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: cn6(
+      className: cn7(
         "rounded-lg border text-sm",
         statusColor,
         className
@@ -4624,7 +5577,7 @@ function ToolCallEntry({
             ]
           }
         ),
-        hasImages && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 pb-2", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn6(
+        hasImages && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 pb-2", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn7(
           "grid gap-2",
           resultImages.length === 1 ? "grid-cols-1" : "grid-cols-2"
         ), children: resultImages.map((img, idx) => {
@@ -4683,7 +5636,7 @@ function ToolCallEntry({
     }
   );
 }
-function cn7(...classes) {
+function cn8(...classes) {
   return classes.filter(Boolean).join(" ");
 }
 function ChatMessage({
@@ -4705,7 +5658,7 @@ function ChatMessage({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: cn7(
+      className: cn8(
         "flex gap-3 p-4",
         isUser ? "flex-row-reverse" : "flex-row",
         className
@@ -4714,7 +5667,7 @@ function ChatMessage({
         /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
-            className: cn7(
+            className: cn8(
               "flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center",
               isUser ? "bg-blue-500 text-white" : "bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-300"
             ),
@@ -4724,7 +5677,7 @@ function ChatMessage({
         /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
-            className: cn7(
+            className: cn8(
               "flex-1 min-w-0 space-y-2",
               isUser ? "text-right" : "text-left"
             ),
@@ -4732,7 +5685,7 @@ function ChatMessage({
               /* @__PURE__ */ jsxRuntime.jsxs(
                 "div",
                 {
-                  className: cn7(
+                  className: cn8(
                     "flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400",
                     isUser ? "justify-end" : "justify-start"
                   ),
@@ -4765,7 +5718,7 @@ function ChatMessage({
               message.content && /* @__PURE__ */ jsxRuntime.jsx(
                 "div",
                 {
-                  className: cn7(
+                  className: cn8(
                     "rounded-lg p-3",
                     isUser ? "bg-blue-500 text-white" : "bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100"
                   ),
@@ -4795,7 +5748,7 @@ function ChatMessage({
     }
   );
 }
-function cn8(...classes) {
+function cn9(...classes) {
   return classes.filter(Boolean).join(" ");
 }
 function MessageList({
@@ -4825,7 +5778,7 @@ function MessageList({
     "div",
     {
       ref: scrollRef,
-      className: cn8(
+      className: cn9(
         "flex-1 overflow-y-auto",
         className
       ),
@@ -4918,6 +5871,7 @@ function AgentChat({
     isStreaming,
     isLoadingHistory,
     error,
+    sessionId: currentSessionId,
     clarification,
     sendMessage,
     respondToClarification,
@@ -4938,8 +5892,59 @@ function AgentChat({
     onToolResult,
     onClarification
   });
+  const dropZoneRef = react.useRef(null);
+  const attachments = useFileAttachments({
+    onUpload: enableAttachments && adapter ? async (_file, meta) => {
+      const result = await adapter.getUploadUrl({
+        sessionId: currentSessionId ?? "",
+        ...meta
+      });
+      return { uuid: result.attachmentUuid, uploadUrl: result.uploadUrl };
+    } : async () => ({ uuid: "", uploadUrl: "" }),
+    onConfirmUpload: enableAttachments && adapter ? (uuid) => adapter.confirmUpload(uuid) : void 0,
+    onError: (msg) => {
+      console.error("[AgentChat] Attachment error:", msg);
+    }
+  });
+  const handleSend = react.useCallback(
+    async (content) => {
+      if (enableAttachments && attachments.hasReadyFiles) {
+        const uuids = attachments.getReadyUuids();
+        await sendMessage(content, { attachmentUuids: uuids });
+        attachments.clear();
+      } else {
+        await sendMessage(content);
+      }
+    },
+    [enableAttachments, attachments, sendMessage]
+  );
   return /* @__PURE__ */ jsxRuntime.jsxs(ChatContainer, { maxHeight, className, theme, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
+    enableAttachments ? /* @__PURE__ */ jsxRuntime.jsx(
+      FileDropZone,
+      {
+        ref: dropZoneRef,
+        ...attachments.dropZoneProps,
+        disabled: isLoading || !!clarification || isLoadingHistory,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          MessageList,
+          {
+            messages,
+            welcomeMessage,
+            renderWelcome,
+            isLoading,
+            isStreaming,
+            isLoadingHistory,
+            enableMarkdown,
+            showToolCalls,
+            markdownComponents,
+            markdownUrlTransform,
+            markdownContentTransform,
+            onImageClick,
+            sendMessage: handleSend
+          }
+        )
+      }
+    ) : /* @__PURE__ */ jsxRuntime.jsx(
       MessageList,
       {
         messages,
@@ -4954,7 +5959,7 @@ function AgentChat({
         markdownUrlTransform,
         markdownContentTransform,
         onImageClick,
-        sendMessage
+        sendMessage: handleSend
       }
     ),
     clarification && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-t border-gray-200 dark:border-gray-700 p-4", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -4969,17 +5974,21 @@ function AgentChat({
     /* @__PURE__ */ jsxRuntime.jsx(
       ChatInput,
       {
-        onSend: sendMessage,
+        onSend: handleSend,
         onStop: isStreaming ? cancel : void 0,
         placeholder,
         disabled: !!clarification || isLoadingHistory,
         isLoading,
-        enableAttachments
+        enableAttachments,
+        attachments: enableAttachments ? attachments.files : void 0,
+        onRemoveAttachment: enableAttachments ? attachments.removeFile : void 0,
+        dropZoneRef: enableAttachments ? dropZoneRef : void 0,
+        isUploadingAttachments: enableAttachments ? attachments.isUploading : void 0
       }
     )
   ] });
 }
-function cn9(...classes) {
+function cn10(...classes) {
   return classes.filter(Boolean).join(" ");
 }
 function TodoList({
@@ -5008,7 +6017,7 @@ function TodoList({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: cn9(
+      className: cn10(
         "rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden",
         className
       ),
@@ -5016,7 +6025,7 @@ function TodoList({
         /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
-            className: cn9(
+            className: cn10(
               "flex items-center gap-2 px-3 py-2 bg-gray-50 dark:bg-gray-800/50",
               collapsible && "cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800"
             ),
@@ -5047,7 +6056,7 @@ function TodoList({
         !isCollapsed && /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "divide-y divide-gray-100 dark:divide-gray-700", children: todos.map((todo, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
           "li",
           {
-            className: cn9(
+            className: cn10(
               "px-3 py-2 flex items-start gap-2 text-sm",
               todo.status === "in_progress" && "bg-blue-50/50 dark:bg-blue-950/20",
               todo.status === "completed" && "opacity-60"
@@ -5057,7 +6066,7 @@ function TodoList({
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsxRuntime.jsx(
                 "p",
                 {
-                  className: cn9(
+                  className: cn10(
                     "text-gray-700 dark:text-gray-300",
                     todo.status === "completed" && "line-through"
                   ),
@@ -5094,6 +6103,7 @@ exports.CopyIcon = CopyIcon;
 exports.DatabaseIcon = DatabaseIcon;
 exports.DownloadIcon = DownloadIcon;
 exports.ExternalLinkIcon = ExternalLinkIcon;
+exports.FileDropZone = FileDropZone;
 exports.FileIcon = FileIcon;
 exports.FileTextIcon = FileTextIcon;
 exports.HelpCircleIcon = HelpCircleIcon;
@@ -5116,10 +6126,12 @@ exports.UserIcon = UserIcon;
 exports.XIcon = XIcon;
 exports.ZoomInIcon = ZoomInIcon;
 exports.ZoomOutIcon = ZoomOutIcon;
+exports.compressImage = compressImage;
 exports.createDefaultAdapter = createDefaultAdapter;
 exports.useAgentChat = useAgentChat;
 exports.useChatConfig = useChatConfig;
 exports.useChatConfigOptional = useChatConfigOptional;
 exports.useExecutionStream = useExecutionStream;
+exports.useFileAttachments = useFileAttachments;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map