@cadraos/sdk 0.1.7 → 0.1.9

package/dist/attachments/index.js

@@ -0,0 +1,875 @@
+import { forwardRef, useState, useRef, useImperativeHandle, useCallback, useEffect } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// 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()
+  });
+}
+function Upload({ className }) {
+  return /* @__PURE__ */ 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__ */ jsx("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
+    /* @__PURE__ */ jsx("polyline", { points: "17 8 12 3 7 8" }),
+    /* @__PURE__ */ jsx("line", { x1: "12", x2: "12", y1: "3", y2: "15" })
+  ] });
+}
+function X({ className }) {
+  return /* @__PURE__ */ 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__ */ jsx("path", { d: "M18 6 6 18" }),
+    /* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })
+  ] });
+}
+function FileText({ className }) {
+  return /* @__PURE__ */ 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__ */ jsx("path", { d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" }),
+    /* @__PURE__ */ jsx("path", { d: "M14 2v4a2 2 0 0 0 2 2h4" }),
+    /* @__PURE__ */ jsx("line", { x1: "16", x2: "8", y1: "13", y2: "13" }),
+    /* @__PURE__ */ jsx("line", { x1: "16", x2: "8", y1: "17", y2: "17" }),
+    /* @__PURE__ */ jsx("line", { x1: "10", x2: "8", y1: "9", y2: "9" })
+  ] });
+}
+function ImageIcon({ className }) {
+  return /* @__PURE__ */ 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__ */ jsx("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", ry: "2" }),
+    /* @__PURE__ */ jsx("circle", { cx: "9", cy: "9", r: "2" }),
+    /* @__PURE__ */ jsx("path", { d: "m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" })
+  ] });
+}
+function Music({ className }) {
+  return /* @__PURE__ */ 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__ */ jsx("path", { d: "M9 18V5l12-2v13" }),
+    /* @__PURE__ */ jsx("circle", { cx: "6", cy: "18", r: "3" }),
+    /* @__PURE__ */ jsx("circle", { cx: "18", cy: "16", r: "3" })
+  ] });
+}
+function Loader2({ className }) {
+  return /* @__PURE__ */ 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__ */ jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }) });
+}
+function FileIcon({ className }) {
+  return /* @__PURE__ */ 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__ */ jsx("path", { d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" }),
+    /* @__PURE__ */ jsx("path", { d: "M14 2v4a2 2 0 0 0 2 2h4" })
+  ] });
+}
+function RotateCw({ className }) {
+  return /* @__PURE__ */ 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__ */ jsx("path", { d: "M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8" }),
+    /* @__PURE__ */ jsx("path", { d: "M21 3v5h-5" })
+  ] });
+}
+function cn(...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 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 getCategoryIcon(category) {
+  switch (category) {
+    case "document":
+      return FileText;
+    case "image":
+      return ImageIcon;
+    case "audio":
+      return Music;
+    default:
+      return FileIcon;
+  }
+}
+var FileDropZone = 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] = useState(false);
+    const fileInputRef = useRef(null);
+    const dropZoneRef = useRef(null);
+    const dragCounter = useRef(0);
+    useImperativeHandle(
+      ref,
+      () => ({
+        openFileDialog: () => {
+          if (!disabled) {
+            fileInputRef.current?.click();
+          }
+        }
+      }),
+      [disabled]
+    );
+    const currentTotalSize = files.reduce((sum, f) => sum + f.file.size, 0);
+    const uploadFile = 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 = 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 = 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 = 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 = useCallback((e) => {
+      if (e.dataTransfer.types) {
+        for (const type of e.dataTransfer.types) {
+          if (type === "Files") return true;
+        }
+      }
+      return false;
+    }, []);
+    const handleDragEnter = useCallback(
+      (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (!hasDraggedFiles(e)) return;
+        dragCounter.current++;
+        if (!disabled && dragCounter.current === 1) {
+          setIsDragging(true);
+        }
+      },
+      [disabled, hasDraggedFiles]
+    );
+    const handleDragOver = useCallback(
+      (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (hasDraggedFiles(e)) {
+          e.dataTransfer.dropEffect = disabled ? "none" : "copy";
+        }
+      },
+      [disabled, hasDraggedFiles]
+    );
+    const handleDragLeave = useCallback((e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      if (dragCounter.current > 0) {
+        dragCounter.current--;
+        if (dragCounter.current === 0) {
+          setIsDragging(false);
+        }
+      }
+    }, []);
+    const handleDrop = 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 = useCallback(
+      (e) => {
+        const selectedFiles = e.target.files;
+        if (selectedFiles) {
+          handleFiles(Array.from(selectedFiles));
+        }
+        if (fileInputRef.current) {
+          fileInputRef.current.value = "";
+        }
+      },
+      [handleFiles]
+    );
+    const handleClick = useCallback(() => {
+      if (!disabled) {
+        fileInputRef.current?.click();
+      }
+    }, [disabled]);
+    const checkDataTransferHasFiles = 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;
+      },
+      []
+    );
+    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]);
+    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__ */ jsxs(
+        "div",
+        {
+          ref: dropZoneRef,
+          "data-dropzone": "wrapper",
+          className: cn("relative w-full h-full", className),
+          style: { minHeight: "inherit" },
+          children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                ref: fileInputRef,
+                type: "file",
+                multiple: true,
+                accept: acceptTypes,
+                onChange: handleFileSelect,
+                className: "hidden",
+                disabled
+              }
+            ),
+            children,
+            isDragging && !disabled && /* @__PURE__ */ 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__ */ jsxs("div", { className: "bg-background/80 rounded-xl p-8 flex flex-col items-center shadow-lg", children: [
+                  /* @__PURE__ */ jsx(Upload, { className: "h-12 w-12 text-primary mb-4 animate-bounce" }),
+                  /* @__PURE__ */ jsx("p", { className: "text-lg font-medium text-primary", children: "Drop files here" }),
+                  /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mt-2", children: "Documents, images, or audio files" })
+                ] })
+              }
+            )
+          ]
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxs("div", { className: cn("w-full", className), children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref: fileInputRef,
+          type: "file",
+          multiple: true,
+          accept: acceptTypes,
+          onChange: handleFileSelect,
+          className: "hidden",
+          disabled
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          onDragEnter: handleDragEnter,
+          onDragOver: handleDragOver,
+          onDragLeave: handleDragLeave,
+          onDrop: handleDrop,
+          onClick: handleClick,
+          className: cn(
+            "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__ */ jsx(
+              Loader2,
+              {
+                className: cn(
+                  "animate-spin text-muted-foreground",
+                  compact ? "h-5 w-5 mb-1" : "h-8 w-8 mb-2"
+                )
+              }
+            ) : /* @__PURE__ */ jsx(
+              Upload,
+              {
+                className: cn(
+                  "text-muted-foreground",
+                  compact ? "h-5 w-5 mb-1" : "h-8 w-8 mb-2"
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "p",
+              {
+                className: cn(
+                  "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__ */ jsx("p", { className: "text-xs text-muted-foreground/70 text-center mt-1", children: "Documents, images, or audio files" })
+          ]
+        }
+      ),
+      hasFiles && /* @__PURE__ */ jsx("div", { className: cn("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__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "flex items-center gap-3 p-2 rounded-lg border",
+              isError ? "border-destructive/50 bg-destructive/5" : "border-border bg-muted/25"
+            ),
+            children: [
+              /* @__PURE__ */ 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__ */ jsx(
+                  "img",
+                  {
+                    src: attachment.previewUrl,
+                    alt: attachment.file.name,
+                    className: "w-full h-full object-cover"
+                  }
+                ) : /* @__PURE__ */ jsx(Icon, { className: "h-5 w-5 text-muted-foreground" }),
+                isLoading && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-background/80 flex items-center justify-center", children: /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin" }) })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+                /* @__PURE__ */ jsx("p", { className: "text-sm font-medium truncate", children: attachment.file.name }),
+                /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground", children: [
+                  formatFileSize(attachment.file.size),
+                  isError && attachment.error && /* @__PURE__ */ jsx("span", { className: "text-destructive ml-2", children: attachment.error })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "flex-shrink-0", children: isLoading ? /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground", children: [
+                attachment.progress,
+                "%"
+              ] }) : attachment.status === "ready" ? /* @__PURE__ */ jsx("span", { className: "text-xs text-green-600", children: "Ready" }) : null }),
+              isError && /* @__PURE__ */ 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__ */ jsx(RotateCw, { className: "h-4 w-4" })
+                }
+              ),
+              /* @__PURE__ */ 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__ */ jsx(X, { className: "h-4 w-4" })
+                }
+              )
+            ]
+          },
+          attachment.uuid
+        );
+      }) })
+    ] });
+  }
+);
+function useFileAttachments(options) {
+  const { onUpload, onConfirmUpload, onSubmitUpload, onError, maxFiles = 10, maxTotalSizeMB = 100 } = options;
+  const [files, setFiles] = useState([]);
+  const filesRef = useRef(files);
+  filesRef.current = files;
+  const onFilesChange = useCallback((newFiles) => {
+    filesRef.current = newFiles;
+    setFiles(newFiles);
+  }, []);
+  const removeFile = 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 = useCallback(() => {
+    return filesRef.current.filter((f) => f.status === "ready").map((f) => f.uuid);
+  }, []);
+  const getReadyUrls = useCallback(() => {
+    return filesRef.current.filter((f) => f.status === "ready").map((f) => f.uuid);
+  }, []);
+  const prepareForSubmit = 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 = 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
+  };
+}
+
+export { FileDropZone, compressImage, useFileAttachments };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map