@copilotz/chat-ui 0.9.14 → 0.9.16

package/dist/index.cjs

@@ -74,6 +74,9 @@ var defaultChatConfig = {
     attachFiles: "Attach Files",
     attachFileTooltip: "Attach file",
     fileTooLarge: "File too large. Max allowed: {{maxSize}}MB",
+    fileProcessError: "Failed to process file",
+    dropFiles: "Drop files to attach",
+    dropFilesHelp: "Up to {{remaining}} more files",
     attachmentsCount: "{{count}}/{{max}} attachments",
     voiceEnter: "Voice input",
     voiceExit: "Use keyboard",
@@ -4323,6 +4326,9 @@ function formatLabel(template, fallback, values) {
     (_, key) => String(values[key] ?? "")
   );
 }
+function hasDraggedFiles(dataTransfer) {
+  return Array.from(dataTransfer.types || []).includes("Files");
+}
 function resolveTargetFromMentions(value, agents) {
   const matches = value.matchAll(/(^|\s)@([\w.-]+)/g);
   for (const match of matches) {
@@ -4586,8 +4592,10 @@ var ChatInput = (0, import_react8.memo)(function ChatInput2({
   const [voiceError, setVoiceError] = (0, import_react8.useState)(null);
   const [activeMention, setActiveMention] = (0, import_react8.useState)(null);
   const [activeMentionIndex, setActiveMentionIndex] = (0, import_react8.useState)(0);
+  const [isDraggingFiles, setIsDraggingFiles] = (0, import_react8.useState)(false);
   const textareaRef = (0, import_react8.useRef)(null);
   const fileInputRef = (0, import_react8.useRef)(null);
+  const dragDepthRef = (0, import_react8.useRef)(0);
   const voiceProviderRef = (0, import_react8.useRef)(null);
   const voiceDraftRef = (0, import_react8.useRef)(null);
   const voiceAppendBaseRef = (0, import_react8.useRef)(null);
@@ -4713,7 +4721,7 @@ var ChatInput = (0, import_react8.memo)(function ChatInput2({
       handleSubmit(e);
     }
   };
-  const processFile = async (file) => {
+  const processFile = (0, import_react8.useCallback)(async (file) => {
     if (file.size > maxFileSize) {
       alert(formatLabel(
         config?.labels?.fileTooLarge,
@@ -4778,39 +4786,63 @@ var ChatInput = (0, import_react8.memo)(function ChatInput2({
         newMap.delete(fileId);
         return newMap;
       });
-      alert("Failed to process file");
+      alert(config?.labels?.fileProcessError || "Failed to process file");
       return null;
     }
-  };
-  const handleFileSelect = async (e) => {
-    const files = e.target.files;
-    if (!files) return;
+  }, [config?.labels?.fileProcessError, config?.labels?.fileTooLarge, maxFileSize, setContext]);
+  const processFiles = (0, import_react8.useCallback)(async (files) => {
+    if (!enableFileUpload || disabled || files.length === 0) return;
     const remainingSlots = maxAttachments - attachments.length;
-    const filesToProcess = Array.from(files).slice(0, remainingSlots);
+    if (remainingSlots <= 0) return;
+    const filesToProcess = files.slice(0, remainingSlots);
+    const nextAttachments = [];
     for (const file of filesToProcess) {
       const attachment = await processFile(file);
       if (attachment) {
-        onAttachmentsChange([...attachments, attachment]);
+        nextAttachments.push(attachment);
       }
     }
+    if (nextAttachments.length > 0) {
+      onAttachmentsChange([...attachments, ...nextAttachments]);
+    }
+  }, [attachments, disabled, enableFileUpload, maxAttachments, onAttachmentsChange, processFile]);
+  const handleFileSelect = async (e) => {
+    const files = e.target.files;
+    if (!files) return;
+    await processFiles(Array.from(files));
     e.target.value = "";
   };
   const handleDrop = (0, import_react8.useCallback)(async (e) => {
+    if (!enableFileUpload || !hasDraggedFiles(e.dataTransfer)) return;
     e.preventDefault();
-    if (!enableFileUpload) return;
-    const files = Array.from(e.dataTransfer.files);
-    const remainingSlots = maxAttachments - attachments.length;
-    const filesToProcess = files.slice(0, remainingSlots);
-    for (const file of filesToProcess) {
-      const attachment = await processFile(file);
-      if (attachment) {
-        onAttachmentsChange([...attachments, attachment]);
-      }
+    dragDepthRef.current = 0;
+    setIsDraggingFiles(false);
+    await processFiles(Array.from(e.dataTransfer.files));
+  }, [enableFileUpload, processFiles]);
+  const handleDragEnter = (0, import_react8.useCallback)((e) => {
+    if (!enableFileUpload || !hasDraggedFiles(e.dataTransfer)) return;
+    e.preventDefault();
+    dragDepthRef.current += 1;
+    if (attachments.length < maxAttachments) {
+      setIsDraggingFiles(true);
     }
-  }, [attachments, enableFileUpload, maxAttachments, onAttachmentsChange]);
+  }, [attachments.length, enableFileUpload, maxAttachments]);
   const handleDragOver = (0, import_react8.useCallback)((e) => {
+    if (!enableFileUpload || !hasDraggedFiles(e.dataTransfer)) return;
     e.preventDefault();
-  }, []);
+    e.dataTransfer.dropEffect = attachments.length < maxAttachments ? "copy" : "none";
+    if (attachments.length < maxAttachments) {
+      setIsDraggingFiles(true);
+    }
+  }, [attachments.length, enableFileUpload, maxAttachments]);
+  const handleDragLeave = (0, import_react8.useCallback)((e) => {
+    if (!enableFileUpload || !hasDraggedFiles(e.dataTransfer)) return;
+    e.preventDefault();
+    dragDepthRef.current = Math.max(0, dragDepthRef.current - 1);
+    if (dragDepthRef.current === 0) {
+      setIsDraggingFiles(false);
+    }
+  }, [enableFileUpload]);
   const resetVoiceComposerState = (0, import_react8.useCallback)((nextState = "idle") => {
     setVoiceState(nextState);
     setVoiceDraft(null);
@@ -5163,10 +5195,21 @@ var ChatInput = (0, import_react8.memo)(function ChatInput2({
     ) }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("form", { onSubmit: handleSubmit, className: "mb-1", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
       "div",
       {
-        className: "group/composer flex w-full flex-col gap-2 rounded-3xl border border-border/80 bg-card/95 p-2.5 shadow-sm transition-[border-color,box-shadow,background-color] focus-within:border-ring/60 focus-within:bg-card focus-within:shadow-md focus-within:ring-2 focus-within:ring-ring/15",
+        className: `group/composer relative flex w-full flex-col gap-2 overflow-hidden rounded-3xl border border-border/80 bg-card/95 p-2.5 shadow-sm transition-[border-color,box-shadow,background-color] focus-within:border-ring/60 focus-within:bg-card focus-within:shadow-md focus-within:ring-2 focus-within:ring-ring/15 ${isDraggingFiles ? "border-primary/60 bg-primary/5 shadow-md ring-2 ring-primary/15" : ""}`,
         onDrop: handleDrop,
+        onDragEnter: handleDragEnter,
         onDragOver: handleDragOver,
+        onDragLeave: handleDragLeave,
         children: [
+          isDraggingFiles && enableFileUpload && canAddMoreAttachments && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "pointer-events-none absolute inset-0 z-20 flex items-center justify-center rounded-3xl border-2 border-dashed border-primary/60 bg-primary/10 text-primary backdrop-blur-[1px]", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex flex-col items-center gap-2 px-4 text-center", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "flex h-11 w-11 items-center justify-center rounded-full bg-primary/15", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react12.UploadCloud, { className: "h-5 w-5" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "text-sm font-semibold", children: config?.labels?.dropFiles || "Drop files to attach" }),
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "text-xs text-muted-foreground", children: formatLabel(
+              config?.labels?.dropFilesHelp,
+              "Up to {{remaining}} more files",
+              { remaining: Math.max(0, maxAttachments - attachments.length) }
+            ) })
+          ] }) }),
           /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "relative min-w-0", children: [
             /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
               Textarea,