@copilotz/chat-ui 0.9.15 → 0.9.17

package/dist/index.d.cts

@@ -173,6 +173,9 @@ interface ChatConfig {
         attachFiles?: string;
         attachFileTooltip?: string;
         fileTooLarge?: string;
+        fileProcessError?: string;
+        dropFiles?: string;
+        dropFilesHelp?: string;
         attachmentsCount?: string;
         voiceEnter?: string;
         voiceExit?: string;

package/dist/index.d.ts

@@ -173,6 +173,9 @@ interface ChatConfig {
         attachFiles?: string;
         attachFileTooltip?: string;
         fileTooLarge?: string;
+        fileProcessError?: string;
+        dropFiles?: string;
+        dropFilesHelp?: string;
         attachmentsCount?: string;
         voiceEnter?: string;
         voiceExit?: string;

package/dist/index.js

@@ -35,6 +35,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",
@@ -4321,7 +4324,8 @@ import {
   Square as Square2,
   Play,
   Pause,
-  Loader2 as Loader22
+  Loader2 as Loader22,
+  UploadCloud
 } from "lucide-react";
 import { Fragment as Fragment6, jsx as jsx25, jsxs as jsxs15 } from "react/jsx-runtime";
 function getActiveMentionMatch(value, caret) {
@@ -4341,6 +4345,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) {
@@ -4604,8 +4611,10 @@ var ChatInput = memo4(function ChatInput2({
   const [voiceError, setVoiceError] = useState7(null);
   const [activeMention, setActiveMention] = useState7(null);
   const [activeMentionIndex, setActiveMentionIndex] = useState7(0);
+  const [isDraggingFiles, setIsDraggingFiles] = useState7(false);
   const textareaRef = useRef5(null);
   const fileInputRef = useRef5(null);
+  const dragDepthRef = useRef5(0);
   const voiceProviderRef = useRef5(null);
   const voiceDraftRef = useRef5(null);
   const voiceAppendBaseRef = useRef5(null);
@@ -4731,7 +4740,7 @@ var ChatInput = memo4(function ChatInput2({
       handleSubmit(e);
     }
   };
-  const processFile = async (file) => {
+  const processFile = useCallback3(async (file) => {
     if (file.size > maxFileSize) {
       alert(formatLabel(
         config?.labels?.fileTooLarge,
@@ -4796,39 +4805,63 @@ var ChatInput = memo4(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 = useCallback3(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 = useCallback3(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 = useCallback3((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 = useCallback3((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 = useCallback3((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 = useCallback3((nextState = "idle") => {
     setVoiceState(nextState);
     setVoiceDraft(null);
@@ -5181,10 +5214,21 @@ var ChatInput = memo4(function ChatInput2({
     ) }) : /* @__PURE__ */ jsx25("form", { onSubmit: handleSubmit, className: "mb-1", children: /* @__PURE__ */ jsxs15(
       "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-visible 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__ */ jsx25("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__ */ jsxs15("div", { className: "flex flex-col items-center gap-2 px-4 text-center", children: [
+            /* @__PURE__ */ jsx25("span", { className: "flex h-11 w-11 items-center justify-center rounded-full bg-primary/15", children: /* @__PURE__ */ jsx25(UploadCloud, { className: "h-5 w-5" }) }),
+            /* @__PURE__ */ jsx25("span", { className: "text-sm font-semibold", children: config?.labels?.dropFiles || "Drop files to attach" }),
+            /* @__PURE__ */ jsx25("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__ */ jsxs15("div", { className: "relative min-w-0", children: [
             /* @__PURE__ */ jsx25(
               Textarea,
@@ -5211,7 +5255,7 @@ var ChatInput = memo4(function ChatInput2({
                 rows: 1
               }
             ),
-            isMentionMenuOpen && /* @__PURE__ */ jsx25("div", { className: "absolute bottom-full left-0 right-0 mb-2 overflow-hidden rounded-md border bg-popover shadow-md", children: /* @__PURE__ */ jsx25("div", { className: "p-1", children: filteredMentionAgents.map((agent, index) => /* @__PURE__ */ jsxs15(
+            isMentionMenuOpen && /* @__PURE__ */ jsx25("div", { className: "absolute bottom-full left-0 right-0 z-30 mb-2 overflow-hidden rounded-md border bg-popover shadow-md", children: /* @__PURE__ */ jsx25("div", { className: "p-1", children: filteredMentionAgents.map((agent, index) => /* @__PURE__ */ jsxs15(
               "button",
               {
                 type: "button",