@epicbagel/saas-kit 1.1.0 → 1.2.1

package/dist/chunk-M7FYGAGO.js

@@ -0,0 +1,416 @@
+"use client";
+import {
+  Text
+} from "./chunk-EIY5LLSP.js";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger
+} from "./chunk-ZRLUUZHK.js";
+import {
+  Button
+} from "./chunk-HQRWRRZJ.js";
+import {
+  cn
+} from "./chunk-G6SRSWXB.js";
+
+// src/primitives/file-dropzone.tsx
+import { FileUp, Loader2 } from "lucide-react";
+import { createPortal } from "react-dom";
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useRef,
+  useState
+} from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function FileDropzone({
+  onFile,
+  onFiles,
+  multiple = false,
+  accept,
+  disabled = false,
+  busy: externalBusy = false,
+  label = "Drop a file, or choose one",
+  description,
+  busyLabel = "Reading file\u2026",
+  icon,
+  variant = "dropzone",
+  className
+}) {
+  const inputRef = useRef(null);
+  const [dragging, setDragging] = useState(false);
+  const [internalBusy, setInternalBusy] = useState(false);
+  const busy = externalBusy || internalBusy;
+  useFileDropGuard();
+  async function select(files) {
+    if (files.length === 0 || disabled || busy) return;
+    setInternalBusy(true);
+    try {
+      if (multiple) {
+        await onFiles?.(files);
+      } else {
+        const first = files[0];
+        if (first) await onFile?.(first);
+      }
+    } finally {
+      setInternalBusy(false);
+      if (inputRef.current) inputRef.current.value = "";
+    }
+  }
+  function onDrop(event) {
+    event.preventDefault();
+    setDragging(false);
+    void select(Array.from(event.dataTransfer.files ?? []));
+  }
+  const trigger = /* @__PURE__ */ jsx(
+    Button,
+    {
+      type: "button",
+      "data-file-dropzone": "true",
+      variant: "outline",
+      size: variant === "icon" ? "icon" : "default",
+      "aria-label": variant === "icon" ? String(busy ? busyLabel : label) : void 0,
+      disabled: disabled || busy,
+      onClick: () => inputRef.current?.click(),
+      onDragEnter: (event) => {
+        event.preventDefault();
+        setDragging(true);
+      },
+      onDragOver: (event) => {
+        event.preventDefault();
+        setDragging(true);
+      },
+      onDragLeave: () => setDragging(false),
+      onDrop,
+      className: cn(
+        variant === "dropzone" ? "h-auto w-full flex-col whitespace-normal border-2 border-dashed px-6 py-8 text-center" : variant === "button" ? "w-fit" : "",
+        dragging && "border-primary bg-primary/5",
+        className
+      ),
+      children: /* @__PURE__ */ jsx(
+        FileDropPrompt,
+        {
+          variant,
+          icon: busy ? /* @__PURE__ */ jsx(Loader2, { className: "h-5 w-5 animate-spin" }) : icon ?? /* @__PURE__ */ jsx(FileUp, { className: "h-5 w-5" }),
+          label: busy ? busyLabel : label,
+          description
+        }
+      )
+    }
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: inputRef,
+        type: "file",
+        accept,
+        multiple,
+        disabled: disabled || busy,
+        onChange: (event) => void select(Array.from(event.target.files ?? [])),
+        className: "sr-only",
+        tabIndex: -1,
+        "aria-hidden": "true"
+      }
+    ),
+    variant === "icon" && description ? /* @__PURE__ */ jsxs(Tooltip, { children: [
+      /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: trigger }),
+      /* @__PURE__ */ jsx(TooltipContent, { children: description })
+    ] }) : trigger
+  ] });
+}
+function carriesFiles(data) {
+  if (!data) return false;
+  return Array.from(data.types ?? []).includes("Files") || (data.files?.length ?? 0) > 0;
+}
+function isNativeFileInput(target) {
+  const element = target;
+  return element?.tagName === "INPUT" && element.type === "file";
+}
+var inPageDrag = false;
+var inPageDragUsers = 0;
+var markInPageDrag = () => {
+  inPageDrag = true;
+};
+var clearInPageDrag = () => {
+  inPageDrag = false;
+};
+var clearAfterDrop = () => {
+  window.setTimeout(clearInPageDrag, 0);
+};
+var clearOnMove = () => {
+  if (inPageDrag) inPageDrag = false;
+};
+function trackInPageDrags() {
+  if (inPageDragUsers++ === 0) {
+    window.addEventListener("dragstart", markInPageDrag, true);
+    window.addEventListener("dragend", clearInPageDrag, true);
+    window.addEventListener("drop", clearAfterDrop);
+    window.addEventListener("mousemove", clearOnMove, { passive: true });
+  }
+  return () => {
+    if (--inPageDragUsers > 0) return;
+    window.removeEventListener("dragstart", markInPageDrag, true);
+    window.removeEventListener("dragend", clearInPageDrag, true);
+    window.removeEventListener("drop", clearAfterDrop);
+    window.removeEventListener("mousemove", clearOnMove);
+    inPageDrag = false;
+  };
+}
+function isUnclaimedFileDrag(event) {
+  return !event.defaultPrevented && !inPageDrag && carriesFiles(event.dataTransfer) && !isNativeFileInput(event.target);
+}
+function installFileDropGuard() {
+  if (typeof window === "undefined") return () => void 0;
+  const release = trackInPageDrags();
+  const onDragOver = (event) => {
+    if (!isUnclaimedFileDrag(event)) return;
+    event.preventDefault();
+    if (event.dataTransfer) event.dataTransfer.dropEffect = "none";
+  };
+  const onDrop = (event) => {
+    if (isUnclaimedFileDrag(event)) event.preventDefault();
+  };
+  window.addEventListener("dragover", onDragOver);
+  window.addEventListener("drop", onDrop);
+  let installed = true;
+  return () => {
+    if (!installed) return;
+    installed = false;
+    window.removeEventListener("dragover", onDragOver);
+    window.removeEventListener("drop", onDrop);
+    release();
+  };
+}
+function useFileDropGuard(enabled = true) {
+  useEffect(() => enabled ? installFileDropGuard() : void 0, [enabled]);
+}
+function FileDropPrompt({
+  icon,
+  label,
+  description,
+  variant = "dropzone"
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { className: cn(
+      "flex items-center justify-center text-muted-foreground",
+      variant === "dropzone" && "mb-2 h-10 w-10 rounded-full bg-muted"
+    ), children: icon }),
+    /* @__PURE__ */ jsx("span", { className: variant === "icon" ? "sr-only" : "font-medium", children: label }),
+    description && variant === "dropzone" && /* @__PURE__ */ jsx(Text, { variant: "muted", className: "mt-1 max-w-md text-xs", children: description })
+  ] });
+}
+var DRAG_HEARTBEAT_MS = 1e3;
+function visibleBand(element) {
+  const rect = element.getBoundingClientRect();
+  const viewport = window.innerHeight;
+  if (rect.top >= 0 && rect.bottom <= viewport) return null;
+  const top = Math.max(rect.top, 0);
+  const bottom = Math.min(rect.bottom, viewport);
+  return bottom > top ? { top: top - rect.top, height: bottom - top } : null;
+}
+var FileDropArea = forwardRef(function FileDropArea2({
+  onFiles,
+  disabled = false,
+  scope = "area",
+  label = "Drop to attach",
+  description,
+  icon,
+  className,
+  children,
+  onDragEnter,
+  onDragOver,
+  onDragLeave,
+  ...props
+}, ref) {
+  const active = Boolean(onFiles) && !disabled;
+  const [dragging, setDragging] = useState(false);
+  const [band, setBand] = useState(null);
+  const root = useRef(null);
+  const entered = useRef([]);
+  useFileDropGuard(Boolean(onFiles));
+  const setRoot = useCallback(
+    (node) => {
+      root.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    },
+    [ref]
+  );
+  const reset = useCallback(() => {
+    entered.current = [];
+    setDragging(false);
+  }, []);
+  const enter = useCallback((target) => {
+    if (target && !entered.current.includes(target)) entered.current.push(target);
+    setDragging(true);
+  }, []);
+  const leave = useCallback((target, container) => {
+    entered.current = entered.current.filter(
+      (node) => node !== target && node instanceof Node && node.isConnected && container.contains(node)
+    );
+    if (entered.current.length === 0) setDragging(false);
+  }, []);
+  const deliver = useCallback(
+    (data) => {
+      const files = Array.from(data?.files ?? []);
+      if (files.length > 0) void onFiles?.(files);
+    },
+    [onFiles]
+  );
+  useEffect(() => {
+    if (scope !== "page" || !active) return;
+    const onEnter = (event) => {
+      if (!isUnclaimedFileDrag(event)) return;
+      event.preventDefault();
+      enter(event.target);
+    };
+    const onOver = (event) => {
+      if (!isUnclaimedFileDrag(event)) return;
+      event.preventDefault();
+      if (event.dataTransfer) event.dataTransfer.dropEffect = "copy";
+      if (entered.current.length === 0) enter(event.target);
+    };
+    const onLeave = (event) => leave(event.target, document);
+    const onDrop = (event) => {
+      reset();
+      if (!isUnclaimedFileDrag(event)) return;
+      event.preventDefault();
+      deliver(event.dataTransfer);
+    };
+    document.addEventListener("dragenter", onEnter);
+    document.addEventListener("dragover", onOver);
+    document.addEventListener("dragleave", onLeave);
+    document.addEventListener("drop", onDrop);
+    return () => {
+      document.removeEventListener("dragenter", onEnter);
+      document.removeEventListener("dragover", onOver);
+      document.removeEventListener("dragleave", onLeave);
+      document.removeEventListener("drop", onDrop);
+    };
+  }, [active, deliver, enter, leave, reset, scope]);
+  useEffect(() => {
+    if (!dragging) return;
+    let heartbeat = window.setTimeout(reset, DRAG_HEARTBEAT_MS);
+    const onDragOverAnywhere = () => {
+      window.clearTimeout(heartbeat);
+      heartbeat = window.setTimeout(reset, DRAG_HEARTBEAT_MS);
+    };
+    const onLeaveWindow = (event) => {
+      if (event.relatedTarget) return;
+      const { clientX: x, clientY: y } = event;
+      if (x <= 0 || y <= 0 || x >= window.innerWidth || y >= window.innerHeight) reset();
+    };
+    window.addEventListener("dragover", onDragOverAnywhere, true);
+    window.addEventListener("drop", reset);
+    window.addEventListener("dragend", reset);
+    window.addEventListener("dragleave", onLeaveWindow);
+    window.addEventListener("mousemove", reset, { passive: true });
+    return () => {
+      window.clearTimeout(heartbeat);
+      window.removeEventListener("dragover", onDragOverAnywhere, true);
+      window.removeEventListener("drop", reset);
+      window.removeEventListener("dragend", reset);
+      window.removeEventListener("dragleave", onLeaveWindow);
+      window.removeEventListener("mousemove", reset);
+    };
+  }, [dragging, reset]);
+  const showOverlay = dragging && active;
+  useEffect(() => {
+    if (!showOverlay || scope !== "area") return;
+    const measure = () => {
+      if (root.current) setBand(visibleBand(root.current));
+    };
+    measure();
+    window.addEventListener("scroll", measure, { capture: true, passive: true });
+    window.addEventListener("resize", measure);
+    return () => {
+      window.removeEventListener("scroll", measure, { capture: true });
+      window.removeEventListener("resize", measure);
+      setBand(null);
+    };
+  }, [scope, showOverlay]);
+  const handlesHere = active && scope === "area";
+  const prompt = /* @__PURE__ */ jsx(FileDropPrompt, { icon: icon ?? /* @__PURE__ */ jsx(FileUp, { className: "h-5 w-5" }), label, description });
+  let overlay = null;
+  if (showOverlay && scope === "page" && typeof document !== "undefined") {
+    overlay = createPortal(
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          "data-slot": "file-drop-overlay",
+          "data-scope": "page",
+          "aria-hidden": "true",
+          className: "pointer-events-none fixed inset-0 z-50 bg-background/80 p-3 supports-backdrop-filter:backdrop-blur-sm motion-safe:animate-in motion-safe:fade-in-0",
+          children: /* @__PURE__ */ jsx("div", { className: "flex h-full flex-col items-center justify-center rounded-xl border-2 border-dashed border-primary p-6 text-center text-sm", children: prompt })
+        }
+      ),
+      document.body
+    );
+  } else if (showOverlay && scope === "area") {
+    overlay = /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-slot": "file-drop-overlay",
+        "data-scope": "area",
+        "aria-hidden": "true",
+        className: "absolute inset-0 z-30 rounded-[inherit] border-2 border-dashed border-primary bg-background/90 text-sm supports-backdrop-filter:backdrop-blur-sm motion-safe:animate-in motion-safe:fade-in-0 [&_*]:pointer-events-none",
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-slot": "file-drop-prompt",
+            className: "absolute inset-x-0 flex flex-col items-center justify-center p-6 text-center",
+            style: band ?? { top: 0, height: "100%" },
+            children: prompt
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: setRoot,
+      "data-file-drop": showOverlay ? "active" : void 0,
+      className: cn("relative", className),
+      ...props,
+      onDragEnter: (event) => {
+        onDragEnter?.(event);
+        if (!handlesHere || !isUnclaimedFileDrag(event.nativeEvent)) return;
+        event.preventDefault();
+        enter(event.target);
+      },
+      onDragOver: (event) => {
+        onDragOver?.(event);
+        if (!handlesHere || !isUnclaimedFileDrag(event.nativeEvent)) return;
+        event.preventDefault();
+        event.dataTransfer.dropEffect = "copy";
+        if (entered.current.length === 0) enter(event.target);
+      },
+      onDragLeave: (event) => {
+        onDragLeave?.(event);
+        if (scope === "area") leave(event.target, event.currentTarget);
+      },
+      onDrop: (event) => {
+        if (scope !== "area") return;
+        reset();
+        if (!onFiles || !isUnclaimedFileDrag(event.nativeEvent)) return;
+        event.preventDefault();
+        if (!disabled) deliver(event.dataTransfer);
+      },
+      children: [
+        children,
+        overlay
+      ]
+    }
+  );
+});
+
+export {
+  FileDropzone,
+  installFileDropGuard,
+  useFileDropGuard,
+  FileDropArea
+};

package/dist/primitives/chat.cjs

@@ -40,7 +40,8 @@ var _chunkKENBU3NVcjs = require('../chunk-KENBU3NV.cjs');
 require('../chunk-ELPV44S6.cjs');
 
 
-var _chunkI5UQSBBZcjs = require('../chunk-I5UQSBBZ.cjs');
+
+var _chunkKADJ56AHcjs = require('../chunk-KADJ56AH.cjs');
 
 
 
@@ -149,7 +150,7 @@ var ChatThread = _react.forwardRef.call(void 0,
             _chunkXABXUP6Lcjs.MessageScrollerContent,
             {
               className: _chunkKWLSBTB2cjs.cn.call(void 0, 
-                workspace ? "mx-auto w-full max-w-3xl gap-7 px-4 py-6 md:px-6 md:py-8" : "gap-2.5 px-px py-px"
+                workspace ? "mx-auto w-full max-w-3xl gap-10 px-4 py-6 md:px-6 md:py-8" : "gap-2.5 px-px py-px"
               ),
               children: [
                 messages.map((m, index) => {
@@ -163,7 +164,7 @@ var ChatThread = _react.forwardRef.call(void 0,
                     {
                       messageId: m.id,
                       scrollAnchor: m.id === anchorId,
-                      className: "flex flex-col gap-3",
+                      className: _chunkKWLSBTB2cjs.cn.call(void 0, "flex flex-col", workspace ? "gap-5" : "gap-3"),
                       children: [
                         startsTimelineSection ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TimelineMarker, { label: relativeTime }) : null,
                         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk2AU7ZRGXcjs.Message, { align: isUser ? "end" : "start", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunk2AU7ZRGXcjs.MessageContent, { children: [
@@ -608,6 +609,9 @@ var Chat = _react.forwardRef.call(void 0, function Chat2({
   emptyFileDropzone = false,
   emptyFileDropzoneLabel = "Drop files here, or choose them",
   emptyFileDropzoneDescription,
+  fileDrop = "conversation",
+  fileDropLabel,
+  fileDropDescription,
   voice = true,
   voiceTitle,
   activeVoiceTitle,
@@ -660,21 +664,34 @@ var Chat = _react.forwardRef.call(void 0, function Chat2({
     }),
     []
   );
+  const dropFiles = _react.useCallback.call(void 0, 
+    (files) => {
+      if (!conversationStarted && mode === "voice") setUserMode("text");
+      return _optionalChain([onFilesSelected, 'optionalCall', _16 => _16(files)]);
+    },
+    [conversationStarted, mode, onFilesSelected]
+  );
   const application = layout === "application";
   const workspace = layout === "workspace";
   const showEmptyFileDropzone = emptyFileDropzone && Boolean(onFilesSelected) && attachments.length === 0;
+  const showEmptyPending = !conversationStarted && pending && Boolean(emptyPendingContent);
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    "div",
+    _chunkKADJ56AHcjs.FileDropArea,
     {
       "data-slot": "chat",
       "data-layout": layout,
+      onFiles: onFilesSelected ? dropFiles : void 0,
+      disabled: fileDrop === false || showEmptyPending,
+      scope: fileDrop === "page" ? "page" : "area",
+      label: fileDropLabel,
+      description: fileDropDescription,
       className: _chunkKWLSBTB2cjs.cn.call(void 0, 
         "w-full",
         application && "flex min-h-[calc(100svh-4rem)] flex-1 flex-col md:block md:min-h-0",
         workspace && "flex h-full min-h-0 flex-1 flex-col overflow-hidden",
         className
       ),
-      children: !conversationStarted && pending && emptyPendingContent ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      children: showEmptyPending ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         "div",
         {
           "data-slot": "chat-empty-pending",
@@ -727,7 +744,7 @@ var Chat = _react.forwardRef.call(void 0, function Chat2({
                 ),
                 children: [
                   showEmptyFileDropzone && onFilesSelected && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                    _chunkI5UQSBBZcjs.FileDropzone,
+                    _chunkKADJ56AHcjs.FileDropzone,
                     {
                       multiple: true,
                       onFiles: onFilesSelected,

package/dist/primitives/chat.d.cts

@@ -251,6 +251,21 @@ interface ChatProps {
     emptyFileDropzoneLabel?: ReactNode;
     /** Supporting file type or workflow copy inside the drop target. */
     emptyFileDropzoneDescription?: ReactNode;
+    /**
+     * Where a dragged file can be dropped. With `onFilesSelected`, a file
+     * dragged over the conversation raises a "Drop to attach" overlay, and a
+     * drop hands every file to `onFilesSelected`, exactly as the composer's
+     * file menu does: same validation, same staged files, same errors.
+     * `"conversation"` (the default) takes drops on the whole Chat, `"page"`
+     * anywhere in the document (its overlay then covers the viewport), and
+     * `false` none. Either way a file dropped where nothing takes it never
+     * opens in the browser.
+     */
+    fileDrop?: "conversation" | "page" | false;
+    /** The drop overlay's label. Defaults to "Drop to attach". */
+    fileDropLabel?: ReactNode;
+    /** A muted line under the overlay's label, such as the accepted types and limits. */
+    fileDropDescription?: ReactNode;
     /** Enable voice dictation. Defaults to true. */
     voice?: boolean;
     /** Title shown inside the voice overlay. */
@@ -318,6 +333,10 @@ interface ChatHandle {
  * **Active state** (messages exist) — always the compact text input;
  * the mic stays as an accessory icon.
  *
+ * **Files** — with `onFilesSelected`, the composer's menu picks files and a
+ * file dragged anywhere on the conversation can be dropped (`fileDrop`);
+ * both hand the files to `onFilesSelected`, which validates and stages them.
+ *
  * Stateless w.r.t. the conversation — pass `messages` and handle
  * `onSend` from the parent. The input text is managed internally.
  */

package/dist/primitives/chat.d.ts

@@ -251,6 +251,21 @@ interface ChatProps {
     emptyFileDropzoneLabel?: ReactNode;
     /** Supporting file type or workflow copy inside the drop target. */
     emptyFileDropzoneDescription?: ReactNode;
+    /**
+     * Where a dragged file can be dropped. With `onFilesSelected`, a file
+     * dragged over the conversation raises a "Drop to attach" overlay, and a
+     * drop hands every file to `onFilesSelected`, exactly as the composer's
+     * file menu does: same validation, same staged files, same errors.
+     * `"conversation"` (the default) takes drops on the whole Chat, `"page"`
+     * anywhere in the document (its overlay then covers the viewport), and
+     * `false` none. Either way a file dropped where nothing takes it never
+     * opens in the browser.
+     */
+    fileDrop?: "conversation" | "page" | false;
+    /** The drop overlay's label. Defaults to "Drop to attach". */
+    fileDropLabel?: ReactNode;
+    /** A muted line under the overlay's label, such as the accepted types and limits. */
+    fileDropDescription?: ReactNode;
     /** Enable voice dictation. Defaults to true. */
     voice?: boolean;
     /** Title shown inside the voice overlay. */
@@ -318,6 +333,10 @@ interface ChatHandle {
  * **Active state** (messages exist) — always the compact text input;
  * the mic stays as an accessory icon.
  *
+ * **Files** — with `onFilesSelected`, the composer's menu picks files and a
+ * file dragged anywhere on the conversation can be dropped (`fileDrop`);
+ * both hand the files to `onFilesSelected`, which validates and stages them.
+ *
  * Stateless w.r.t. the conversation — pass `messages` and handle
  * `onSend` from the parent. The input text is managed internally.
  */

package/dist/primitives/chat.js

@@ -39,8 +39,9 @@ import {
 } from "../chunk-VY5U4VGV.js";
 import "../chunk-INNGGLMZ.js";
 import {
+  FileDropArea,
   FileDropzone
-} from "../chunk-6V4XMQ6D.js";
+} from "../chunk-M7FYGAGO.js";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -149,7 +150,7 @@ var ChatThread = forwardRef(
             MessageScrollerContent,
             {
               className: cn(
-                workspace ? "mx-auto w-full max-w-3xl gap-7 px-4 py-6 md:px-6 md:py-8" : "gap-2.5 px-px py-px"
+                workspace ? "mx-auto w-full max-w-3xl gap-10 px-4 py-6 md:px-6 md:py-8" : "gap-2.5 px-px py-px"
               ),
               children: [
                 messages.map((m, index) => {
@@ -163,7 +164,7 @@ var ChatThread = forwardRef(
                     {
                       messageId: m.id,
                       scrollAnchor: m.id === anchorId,
-                      className: "flex flex-col gap-3",
+                      className: cn("flex flex-col", workspace ? "gap-5" : "gap-3"),
                       children: [
                         startsTimelineSection ? /* @__PURE__ */ jsx(TimelineMarker, { label: relativeTime }) : null,
                         /* @__PURE__ */ jsx(Message, { align: isUser ? "end" : "start", children: /* @__PURE__ */ jsxs(MessageContent, { children: [
@@ -608,6 +609,9 @@ var Chat = forwardRef(function Chat2({
   emptyFileDropzone = false,
   emptyFileDropzoneLabel = "Drop files here, or choose them",
   emptyFileDropzoneDescription,
+  fileDrop = "conversation",
+  fileDropLabel,
+  fileDropDescription,
   voice = true,
   voiceTitle,
   activeVoiceTitle,
@@ -660,21 +664,34 @@ var Chat = forwardRef(function Chat2({
     }),
     []
   );
+  const dropFiles = useCallback(
+    (files) => {
+      if (!conversationStarted && mode === "voice") setUserMode("text");
+      return onFilesSelected?.(files);
+    },
+    [conversationStarted, mode, onFilesSelected]
+  );
   const application = layout === "application";
   const workspace = layout === "workspace";
   const showEmptyFileDropzone = emptyFileDropzone && Boolean(onFilesSelected) && attachments.length === 0;
+  const showEmptyPending = !conversationStarted && pending && Boolean(emptyPendingContent);
   return /* @__PURE__ */ jsx(
-    "div",
+    FileDropArea,
     {
       "data-slot": "chat",
       "data-layout": layout,
+      onFiles: onFilesSelected ? dropFiles : void 0,
+      disabled: fileDrop === false || showEmptyPending,
+      scope: fileDrop === "page" ? "page" : "area",
+      label: fileDropLabel,
+      description: fileDropDescription,
       className: cn(
         "w-full",
         application && "flex min-h-[calc(100svh-4rem)] flex-1 flex-col md:block md:min-h-0",
         workspace && "flex h-full min-h-0 flex-1 flex-col overflow-hidden",
         className
       ),
-      children: !conversationStarted && pending && emptyPendingContent ? /* @__PURE__ */ jsx(
+      children: showEmptyPending ? /* @__PURE__ */ jsx(
         "div",
         {
           "data-slot": "chat-empty-pending",

package/dist/primitives/file-dropzone.cjs

@@ -2,11 +2,17 @@
 "use client";
 
 
-var _chunkI5UQSBBZcjs = require('../chunk-I5UQSBBZ.cjs');
+
+
+
+var _chunkKADJ56AHcjs = require('../chunk-KADJ56AH.cjs');
 require('../chunk-373W6VAD.cjs');
 require('../chunk-U2NES7VR.cjs');
 require('../chunk-L4DH72UF.cjs');
 require('../chunk-KWLSBTB2.cjs');
 
 
-exports.FileDropzone = _chunkI5UQSBBZcjs.FileDropzone;
+
+
+
+exports.FileDropArea = _chunkKADJ56AHcjs.FileDropArea; exports.FileDropzone = _chunkKADJ56AHcjs.FileDropzone; exports.installFileDropGuard = _chunkKADJ56AHcjs.installFileDropGuard; exports.useFileDropGuard = _chunkKADJ56AHcjs.useFileDropGuard;