@runtypelabs/persona 3.10.0 → 3.10.1

package/dist/theme-editor.cjs

@@ -13406,6 +13406,15 @@ function getClipboardImageFiles(clipboardData) {
   }
   return imageFiles;
 }
+function dataTransferHasFiles(dataTransfer) {
+  if (!dataTransfer) return false;
+  const types = dataTransfer.types;
+  if (!types) return false;
+  if (typeof types.contains === "function") {
+    return types.contains("Files");
+  }
+  return Array.from(types).includes("Files");
+}
 function normalizePersistStateConfig(config) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i;
   if (!config) return null;
@@ -13497,8 +13506,36 @@ var buildPostprocessor = (cfg, actionManager, onResubmitRequested) => {
     return sanitize ? sanitize(html) : html;
   };
 };
+function buildDropOverlay(dropCfg) {
+  var _a, _b, _c, _d;
+  const overlay = createElement("div", "persona-attachment-drop-overlay");
+  if (dropCfg == null ? void 0 : dropCfg.background) overlay.style.setProperty("--persona-drop-overlay-bg", dropCfg.background);
+  if ((dropCfg == null ? void 0 : dropCfg.backdropBlur) !== void 0) overlay.style.setProperty("--persona-drop-overlay-blur", dropCfg.backdropBlur);
+  if (dropCfg == null ? void 0 : dropCfg.border) overlay.style.setProperty("--persona-drop-overlay-border", dropCfg.border);
+  if (dropCfg == null ? void 0 : dropCfg.borderRadius) overlay.style.setProperty("--persona-drop-overlay-radius", dropCfg.borderRadius);
+  if (dropCfg == null ? void 0 : dropCfg.inset) overlay.style.setProperty("--persona-drop-overlay-inset", dropCfg.inset);
+  if (dropCfg == null ? void 0 : dropCfg.labelSize) overlay.style.setProperty("--persona-drop-overlay-label-size", dropCfg.labelSize);
+  if (dropCfg == null ? void 0 : dropCfg.labelColor) overlay.style.setProperty("--persona-drop-overlay-label-color", dropCfg.labelColor);
+  const iconName = (_a = dropCfg == null ? void 0 : dropCfg.iconName) != null ? _a : "upload";
+  const iconSize = (_b = dropCfg == null ? void 0 : dropCfg.iconSize) != null ? _b : "48px";
+  const iconColor = (_c = dropCfg == null ? void 0 : dropCfg.iconColor) != null ? _c : "rgba(59, 130, 246, 0.6)";
+  const iconStrokeWidth = (_d = dropCfg == null ? void 0 : dropCfg.iconStrokeWidth) != null ? _d : 0.5;
+  const iconSvg = renderLucideIcon(iconName, iconSize, iconColor, iconStrokeWidth);
+  if (iconSvg) overlay.appendChild(iconSvg);
+  if (dropCfg == null ? void 0 : dropCfg.label) {
+    const labelEl = createElement("span", "persona-drop-overlay-label");
+    labelEl.textContent = dropCfg.label;
+    overlay.appendChild(labelEl);
+  }
+  return overlay;
+}
 var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L, _M, _N;
+  if (mount == null) {
+    throw new Error(
+      'createAgentExperience: mount must be a non-null HTMLElement (e.g. pass document.getElementById("my-root") after the node exists).'
+    );
+  }
   if (mount.id && !mount.getAttribute("data-persona-instance")) {
     mount.setAttribute("data-persona-instance", mount.id);
   }
@@ -13902,8 +13939,22 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
         return composerElements.footer;
       },
       onSubmit: (text) => {
-        if (session && !session.isStreaming()) {
-          session.sendMessage(text);
+        var _a2;
+        if (!session || session.isStreaming()) return;
+        const value = text.trim();
+        const hasAttachments = (_a2 = attachmentManager == null ? void 0 : attachmentManager.hasAttachments()) != null ? _a2 : false;
+        if (!value && !hasAttachments) return;
+        let contentParts;
+        if (hasAttachments) {
+          contentParts = [];
+          contentParts.push(...attachmentManager.getContentParts());
+          if (value) {
+            contentParts.push(createTextPart(value));
+          }
+        }
+        session.sendMessage(value, { contentParts });
+        if (hasAttachments) {
+          attachmentManager.clearAttachments();
         }
       },
       streaming: false,
@@ -13982,6 +14033,9 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
       attachmentManager == null ? void 0 : attachmentManager.handleFileSelect(target.files);
       target.value = "";
     });
+    const dropCfg = config.attachments.dropOverlay;
+    const overlay = buildDropOverlay(dropCfg);
+    container.appendChild(overlay);
   }
   const renderSlots = () => {
     var _a2, _b2;
@@ -14775,6 +14829,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
   let lastScrollTop = 0;
   let scrollRAF = null;
   let isAutoScrolling = false;
+  let hasPendingAutoScroll = false;
   const USER_SCROLL_THRESHOLD = 1;
   const BOTTOM_THRESHOLD = 8;
   const messageState = /* @__PURE__ */ new Map();
@@ -14867,6 +14922,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
       cancelAnimationFrame(scrollRAF);
       scrollRAF = null;
     }
+    hasPendingAutoScroll = false;
     cancelSmoothScroll();
   };
   const syncScrollToBottomButton = () => {
@@ -14896,9 +14952,14 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
   const scheduleAutoScroll = (force = false) => {
     if (!autoFollow.isFollowing()) return;
     if (!force && !isStreaming) return;
-    cancelAutoScroll();
+    if (scrollRAF !== null) {
+      cancelAnimationFrame(scrollRAF);
+      scrollRAF = null;
+    }
+    hasPendingAutoScroll = true;
     scrollRAF = requestAnimationFrame(() => {
       scrollRAF = null;
+      hasPendingAutoScroll = false;
       if (!autoFollow.isFollowing()) return;
       smoothScrollToBottom(getScrollableContainer(), force ? 220 : 140);
     });
@@ -16217,7 +16278,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
       lastScrollTop,
       nearBottom: isElementNearBottom(body, BOTTOM_THRESHOLD),
       userScrollThreshold: USER_SCROLL_THRESHOLD,
-      isAutoScrolling,
+      isAutoScrolling: isAutoScrolling || hasPendingAutoScroll,
       pauseOnUpwardScroll: true,
       pauseWhenAwayFromBottom: false,
       resumeRequiresDownwardScroll: true
@@ -16332,6 +16393,61 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
   }
   textarea == null ? void 0 : textarea.addEventListener("keydown", handleInputEnter);
   textarea == null ? void 0 : textarea.addEventListener("paste", handleInputPaste);
+  const ATTACHMENT_DROP_ACTIVE_CLASS = "persona-attachment-drop-active";
+  let attachmentFileDragDepth = 0;
+  const clearAttachmentDropVisual = () => {
+    attachmentFileDragDepth = 0;
+    container.classList.remove(ATTACHMENT_DROP_ACTIVE_CLASS);
+  };
+  const attachmentDropHandlingActive = () => {
+    var _a2;
+    return ((_a2 = config.attachments) == null ? void 0 : _a2.enabled) === true && attachmentManager !== null;
+  };
+  const handleAttachmentDragEnterCapture = (e) => {
+    if (!dataTransferHasFiles(e.dataTransfer) || !attachmentDropHandlingActive()) return;
+    attachmentFileDragDepth++;
+    if (attachmentFileDragDepth === 1) {
+      container.classList.add(ATTACHMENT_DROP_ACTIVE_CLASS);
+    }
+  };
+  const handleAttachmentDragLeaveCapture = (e) => {
+    if (!dataTransferHasFiles(e.dataTransfer) || !attachmentDropHandlingActive()) return;
+    attachmentFileDragDepth--;
+    if (attachmentFileDragDepth <= 0) {
+      clearAttachmentDropVisual();
+    }
+  };
+  const handleAttachmentDragOverCapture = (e) => {
+    if (!dataTransferHasFiles(e.dataTransfer) || !attachmentDropHandlingActive()) return;
+    e.preventDefault();
+    e.dataTransfer.dropEffect = "copy";
+  };
+  const handleAttachmentDropCapture = (e) => {
+    var _a2;
+    if (!dataTransferHasFiles(e.dataTransfer) || !attachmentDropHandlingActive()) return;
+    e.preventDefault();
+    e.stopPropagation();
+    clearAttachmentDropVisual();
+    const files = Array.from((_a2 = e.dataTransfer.files) != null ? _a2 : []);
+    if (files.length === 0) return;
+    void attachmentManager.handleFiles(files);
+  };
+  const attachmentDropCapture = true;
+  container.addEventListener("dragenter", handleAttachmentDragEnterCapture, attachmentDropCapture);
+  container.addEventListener("dragleave", handleAttachmentDragLeaveCapture, attachmentDropCapture);
+  mount.addEventListener("dragover", handleAttachmentDragOverCapture, attachmentDropCapture);
+  mount.addEventListener("drop", handleAttachmentDropCapture, attachmentDropCapture);
+  const ownerDoc = mount.ownerDocument;
+  const handleDocDragOver = (e) => {
+    if (!attachmentDropHandlingActive()) return;
+    e.preventDefault();
+  };
+  const handleDocDrop = (e) => {
+    if (!attachmentDropHandlingActive()) return;
+    e.preventDefault();
+  };
+  ownerDoc.addEventListener("dragover", handleDocDragOver);
+  ownerDoc.addEventListener("drop", handleDocDrop);
   destroyCallbacks.push(() => {
     if (composerForm) {
       composerForm.removeEventListener("submit", handleSubmit);
@@ -16339,6 +16455,15 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
     textarea == null ? void 0 : textarea.removeEventListener("keydown", handleInputEnter);
     textarea == null ? void 0 : textarea.removeEventListener("paste", handleInputPaste);
   });
+  destroyCallbacks.push(() => {
+    container.removeEventListener("dragenter", handleAttachmentDragEnterCapture, attachmentDropCapture);
+    container.removeEventListener("dragleave", handleAttachmentDragLeaveCapture, attachmentDropCapture);
+    mount.removeEventListener("dragover", handleAttachmentDragOverCapture, attachmentDropCapture);
+    mount.removeEventListener("drop", handleAttachmentDropCapture, attachmentDropCapture);
+    ownerDoc.removeEventListener("dragover", handleDocDragOver);
+    ownerDoc.removeEventListener("drop", handleDocDrop);
+    clearAttachmentDropVisual();
+  });
   destroyCallbacks.push(() => {
     session.cancel();
   });
@@ -16353,7 +16478,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
   }
   const controller = {
     update(nextConfig) {
-      var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k2, _l2, _m2, _n2, _o2, _p2, _q2, _r2, _s2, _t2, _u2, _v2, _w2, _x2, _y2, _z2, _A2, _B2, _C2, _D2, _E2, _F2, _G2, _H2, _I2, _J2, _K2, _L2, _M2, _N2, _O, _P, _Q, _R, _S, _T, _U, _V, _W, _X, _Y, _Z, __, _$, _aa, _ba, _ca, _da, _ea, _fa, _ga, _ha, _ia, _ja, _ka, _la, _ma, _na, _oa, _pa, _qa, _ra, _sa, _ta, _ua, _va, _wa, _xa, _ya, _za, _Aa, _Ba, _Ca, _Da, _Ea, _Fa, _Ga, _Ha, _Ia, _Ja, _Ka, _La, _Ma, _Na, _Oa, _Pa, _Qa, _Ra, _Sa, _Ta, _Ua, _Va, _Wa, _Xa, _Ya, _Za, __a, _$a;
+      var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k2, _l2, _m2, _n2, _o2, _p2, _q2, _r2, _s2, _t2, _u2, _v2, _w2, _x2, _y2, _z2, _A2, _B2, _C2, _D2, _E2, _F2, _G2, _H2, _I2, _J2, _K2, _L2, _M2, _N2, _O, _P, _Q, _R, _S, _T, _U, _V, _W, _X, _Y, _Z, __, _$, _aa, _ba, _ca, _da, _ea, _fa, _ga, _ha, _ia, _ja, _ka, _la, _ma, _na, _oa, _pa, _qa, _ra, _sa, _ta, _ua, _va, _wa, _xa, _ya, _za, _Aa, _Ba, _Ca, _Da, _Ea, _Fa, _Ga, _Ha, _Ia, _Ja, _Ka, _La, _Ma, _Na, _Oa, _Pa, _Qa, _Ra, _Sa, _Ta, _Ua, _Va, _Wa, _Xa, _Ya, _Za, __a, _$a, _ab;
       const previousToolCallConfig = config.toolCall;
       const previousMessageActions = config.messageActions;
       const previousLayoutMessages = (_a2 = config.layout) == null ? void 0 : _a2.messages;
@@ -17111,6 +17236,9 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
               }
             });
           }
+          if (!container.querySelector(".persona-attachment-drop-overlay")) {
+            container.appendChild(buildDropOverlay(attachmentsConfig.dropOverlay));
+          }
         } else {
           attachmentButtonWrapper.style.display = "";
           const attachmentsConfig = (_Oa = config.attachments) != null ? _Oa : {};
@@ -17133,14 +17261,15 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
         if (attachmentManager) {
           attachmentManager.clearAttachments();
         }
+        (_Ra = container.querySelector(".persona-attachment-drop-overlay")) == null ? void 0 : _Ra.remove();
       }
-      const sendButtonConfig = (_Ra = config.sendButton) != null ? _Ra : {};
-      const useIcon = (_Sa = sendButtonConfig.useIcon) != null ? _Sa : false;
-      const iconText = (_Ta = sendButtonConfig.iconText) != null ? _Ta : "\u2191";
+      const sendButtonConfig = (_Sa = config.sendButton) != null ? _Sa : {};
+      const useIcon = (_Ta = sendButtonConfig.useIcon) != null ? _Ta : false;
+      const iconText = (_Ua = sendButtonConfig.iconText) != null ? _Ua : "\u2191";
       const iconName = sendButtonConfig.iconName;
-      const tooltipText = (_Ua = sendButtonConfig.tooltipText) != null ? _Ua : "Send message";
-      const showTooltip = (_Va = sendButtonConfig.showTooltip) != null ? _Va : false;
-      const buttonSize = (_Wa = sendButtonConfig.size) != null ? _Wa : "40px";
+      const tooltipText = (_Va = sendButtonConfig.tooltipText) != null ? _Va : "Send message";
+      const showTooltip = (_Wa = sendButtonConfig.showTooltip) != null ? _Wa : false;
+      const buttonSize = (_Xa = sendButtonConfig.size) != null ? _Xa : "40px";
       const backgroundColor = sendButtonConfig.backgroundColor;
       const textColor = sendButtonConfig.textColor;
       if (useIcon) {
@@ -17177,7 +17306,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
           sendButton.classList.add("persona-bg-persona-primary");
         }
       } else {
-        sendButton.textContent = (_Ya = (_Xa = config.copy) == null ? void 0 : _Xa.sendButtonLabel) != null ? _Ya : "Send";
+        sendButton.textContent = (_Za = (_Ya = config.copy) == null ? void 0 : _Ya.sendButtonLabel) != null ? _Za : "Send";
         sendButton.style.width = "";
         sendButton.style.height = "";
         sendButton.style.minWidth = "";
@@ -17237,7 +17366,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
       } else if (tooltip) {
         tooltip.style.display = "none";
       }
-      const updatedContentMaxWidth = (_Za = config.layout) == null ? void 0 : _Za.contentMaxWidth;
+      const updatedContentMaxWidth = (__a = config.layout) == null ? void 0 : __a.contentMaxWidth;
       if (updatedContentMaxWidth) {
         messagesWrapper.style.maxWidth = updatedContentMaxWidth;
         messagesWrapper.style.marginLeft = "auto";
@@ -17269,8 +17398,8 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
           suggestions.style.marginRight = "";
         }
       }
-      const statusIndicatorConfig = (__a = config.statusIndicator) != null ? __a : {};
-      const isVisible = (_$a = statusIndicatorConfig.visible) != null ? _$a : true;
+      const statusIndicatorConfig = (_$a = config.statusIndicator) != null ? _$a : {};
+      const isVisible = (_ab = statusIndicatorConfig.visible) != null ? _ab : true;
       statusText.style.display = isVisible ? "" : "none";
       if (session) {
         const currentStatus = session.getStatus();

package/dist/theme-editor.d.cts

@@ -2412,6 +2412,35 @@ type AgentWidgetAttachmentsConfig = {
      * Callback when a file is rejected (wrong type or too large).
      */
     onFileRejected?: (file: File, reason: 'type' | 'size' | 'count') => void;
+    /**
+     * Customize the drag-and-drop overlay that appears when files are dragged over the widget.
+     */
+    dropOverlay?: {
+        /** Background color/value of the overlay. @default 'rgba(59, 130, 246, 0.08)' */
+        background?: string;
+        /** Backdrop blur applied behind the overlay (CSS value). @default '8px' */
+        backdropBlur?: string;
+        /** Border style shown during drag. @default '2px dashed rgba(59, 130, 246, 0.4)' */
+        border?: string;
+        /** Border radius of the overlay. @default 'inherit' */
+        borderRadius?: string;
+        /** Inset/margin pulling the overlay away from the container edges (CSS value). @default '0' */
+        inset?: string;
+        /** Lucide icon name displayed in the center. @default 'upload' */
+        iconName?: string;
+        /** Icon size (CSS value). @default '48px' */
+        iconSize?: string;
+        /** Icon stroke color. @default 'rgba(59, 130, 246, 0.6)' */
+        iconColor?: string;
+        /** Icon stroke width. @default 0.5 */
+        iconStrokeWidth?: number;
+        /** Optional label text shown below the icon. */
+        label?: string;
+        /** Label font size. @default '0.875rem' */
+        labelSize?: string;
+        /** Label color. @default 'rgba(59, 130, 246, 0.8)' */
+        labelColor?: string;
+    };
 };
 /**
  * Configuration for persisting widget state across page navigations.

package/dist/theme-editor.d.ts

@@ -2412,6 +2412,35 @@ type AgentWidgetAttachmentsConfig = {
      * Callback when a file is rejected (wrong type or too large).
      */
     onFileRejected?: (file: File, reason: 'type' | 'size' | 'count') => void;
+    /**
+     * Customize the drag-and-drop overlay that appears when files are dragged over the widget.
+     */
+    dropOverlay?: {
+        /** Background color/value of the overlay. @default 'rgba(59, 130, 246, 0.08)' */
+        background?: string;
+        /** Backdrop blur applied behind the overlay (CSS value). @default '8px' */
+        backdropBlur?: string;
+        /** Border style shown during drag. @default '2px dashed rgba(59, 130, 246, 0.4)' */
+        border?: string;
+        /** Border radius of the overlay. @default 'inherit' */
+        borderRadius?: string;
+        /** Inset/margin pulling the overlay away from the container edges (CSS value). @default '0' */
+        inset?: string;
+        /** Lucide icon name displayed in the center. @default 'upload' */
+        iconName?: string;
+        /** Icon size (CSS value). @default '48px' */
+        iconSize?: string;
+        /** Icon stroke color. @default 'rgba(59, 130, 246, 0.6)' */
+        iconColor?: string;
+        /** Icon stroke width. @default 0.5 */
+        iconStrokeWidth?: number;
+        /** Optional label text shown below the icon. */
+        label?: string;
+        /** Label font size. @default '0.875rem' */
+        labelSize?: string;
+        /** Label color. @default 'rgba(59, 130, 246, 0.8)' */
+        labelColor?: string;
+    };
 };
 /**
  * Configuration for persisting widget state across page navigations.

package/dist/theme-editor.js

@@ -13297,6 +13297,15 @@ function getClipboardImageFiles(clipboardData) {
   }
   return imageFiles;
 }
+function dataTransferHasFiles(dataTransfer) {
+  if (!dataTransfer) return false;
+  const types = dataTransfer.types;
+  if (!types) return false;
+  if (typeof types.contains === "function") {
+    return types.contains("Files");
+  }
+  return Array.from(types).includes("Files");
+}
 function normalizePersistStateConfig(config) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i;
   if (!config) return null;
@@ -13388,8 +13397,36 @@ var buildPostprocessor = (cfg, actionManager, onResubmitRequested) => {
     return sanitize ? sanitize(html) : html;
   };
 };
+function buildDropOverlay(dropCfg) {
+  var _a, _b, _c, _d;
+  const overlay = createElement("div", "persona-attachment-drop-overlay");
+  if (dropCfg == null ? void 0 : dropCfg.background) overlay.style.setProperty("--persona-drop-overlay-bg", dropCfg.background);
+  if ((dropCfg == null ? void 0 : dropCfg.backdropBlur) !== void 0) overlay.style.setProperty("--persona-drop-overlay-blur", dropCfg.backdropBlur);
+  if (dropCfg == null ? void 0 : dropCfg.border) overlay.style.setProperty("--persona-drop-overlay-border", dropCfg.border);
+  if (dropCfg == null ? void 0 : dropCfg.borderRadius) overlay.style.setProperty("--persona-drop-overlay-radius", dropCfg.borderRadius);
+  if (dropCfg == null ? void 0 : dropCfg.inset) overlay.style.setProperty("--persona-drop-overlay-inset", dropCfg.inset);
+  if (dropCfg == null ? void 0 : dropCfg.labelSize) overlay.style.setProperty("--persona-drop-overlay-label-size", dropCfg.labelSize);
+  if (dropCfg == null ? void 0 : dropCfg.labelColor) overlay.style.setProperty("--persona-drop-overlay-label-color", dropCfg.labelColor);
+  const iconName = (_a = dropCfg == null ? void 0 : dropCfg.iconName) != null ? _a : "upload";
+  const iconSize = (_b = dropCfg == null ? void 0 : dropCfg.iconSize) != null ? _b : "48px";
+  const iconColor = (_c = dropCfg == null ? void 0 : dropCfg.iconColor) != null ? _c : "rgba(59, 130, 246, 0.6)";
+  const iconStrokeWidth = (_d = dropCfg == null ? void 0 : dropCfg.iconStrokeWidth) != null ? _d : 0.5;
+  const iconSvg = renderLucideIcon(iconName, iconSize, iconColor, iconStrokeWidth);
+  if (iconSvg) overlay.appendChild(iconSvg);
+  if (dropCfg == null ? void 0 : dropCfg.label) {
+    const labelEl = createElement("span", "persona-drop-overlay-label");
+    labelEl.textContent = dropCfg.label;
+    overlay.appendChild(labelEl);
+  }
+  return overlay;
+}
 var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L, _M, _N;
+  if (mount == null) {
+    throw new Error(
+      'createAgentExperience: mount must be a non-null HTMLElement (e.g. pass document.getElementById("my-root") after the node exists).'
+    );
+  }
   if (mount.id && !mount.getAttribute("data-persona-instance")) {
     mount.setAttribute("data-persona-instance", mount.id);
   }
@@ -13793,8 +13830,22 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
         return composerElements.footer;
       },
       onSubmit: (text) => {
-        if (session && !session.isStreaming()) {
-          session.sendMessage(text);
+        var _a2;
+        if (!session || session.isStreaming()) return;
+        const value = text.trim();
+        const hasAttachments = (_a2 = attachmentManager == null ? void 0 : attachmentManager.hasAttachments()) != null ? _a2 : false;
+        if (!value && !hasAttachments) return;
+        let contentParts;
+        if (hasAttachments) {
+          contentParts = [];
+          contentParts.push(...attachmentManager.getContentParts());
+          if (value) {
+            contentParts.push(createTextPart(value));
+          }
+        }
+        session.sendMessage(value, { contentParts });
+        if (hasAttachments) {
+          attachmentManager.clearAttachments();
         }
       },
       streaming: false,
@@ -13873,6 +13924,9 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
       attachmentManager == null ? void 0 : attachmentManager.handleFileSelect(target.files);
       target.value = "";
     });
+    const dropCfg = config.attachments.dropOverlay;
+    const overlay = buildDropOverlay(dropCfg);
+    container.appendChild(overlay);
   }
   const renderSlots = () => {
     var _a2, _b2;
@@ -14666,6 +14720,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
   let lastScrollTop = 0;
   let scrollRAF = null;
   let isAutoScrolling = false;
+  let hasPendingAutoScroll = false;
   const USER_SCROLL_THRESHOLD = 1;
   const BOTTOM_THRESHOLD = 8;
   const messageState = /* @__PURE__ */ new Map();
@@ -14758,6 +14813,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
       cancelAnimationFrame(scrollRAF);
       scrollRAF = null;
     }
+    hasPendingAutoScroll = false;
     cancelSmoothScroll();
   };
   const syncScrollToBottomButton = () => {
@@ -14787,9 +14843,14 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
   const scheduleAutoScroll = (force = false) => {
     if (!autoFollow.isFollowing()) return;
     if (!force && !isStreaming) return;
-    cancelAutoScroll();
+    if (scrollRAF !== null) {
+      cancelAnimationFrame(scrollRAF);
+      scrollRAF = null;
+    }
+    hasPendingAutoScroll = true;
     scrollRAF = requestAnimationFrame(() => {
       scrollRAF = null;
+      hasPendingAutoScroll = false;
       if (!autoFollow.isFollowing()) return;
       smoothScrollToBottom(getScrollableContainer(), force ? 220 : 140);
     });
@@ -16108,7 +16169,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
       lastScrollTop,
       nearBottom: isElementNearBottom(body, BOTTOM_THRESHOLD),
       userScrollThreshold: USER_SCROLL_THRESHOLD,
-      isAutoScrolling,
+      isAutoScrolling: isAutoScrolling || hasPendingAutoScroll,
       pauseOnUpwardScroll: true,
       pauseWhenAwayFromBottom: false,
       resumeRequiresDownwardScroll: true
@@ -16223,6 +16284,61 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
   }
   textarea == null ? void 0 : textarea.addEventListener("keydown", handleInputEnter);
   textarea == null ? void 0 : textarea.addEventListener("paste", handleInputPaste);
+  const ATTACHMENT_DROP_ACTIVE_CLASS = "persona-attachment-drop-active";
+  let attachmentFileDragDepth = 0;
+  const clearAttachmentDropVisual = () => {
+    attachmentFileDragDepth = 0;
+    container.classList.remove(ATTACHMENT_DROP_ACTIVE_CLASS);
+  };
+  const attachmentDropHandlingActive = () => {
+    var _a2;
+    return ((_a2 = config.attachments) == null ? void 0 : _a2.enabled) === true && attachmentManager !== null;
+  };
+  const handleAttachmentDragEnterCapture = (e) => {
+    if (!dataTransferHasFiles(e.dataTransfer) || !attachmentDropHandlingActive()) return;
+    attachmentFileDragDepth++;
+    if (attachmentFileDragDepth === 1) {
+      container.classList.add(ATTACHMENT_DROP_ACTIVE_CLASS);
+    }
+  };
+  const handleAttachmentDragLeaveCapture = (e) => {
+    if (!dataTransferHasFiles(e.dataTransfer) || !attachmentDropHandlingActive()) return;
+    attachmentFileDragDepth--;
+    if (attachmentFileDragDepth <= 0) {
+      clearAttachmentDropVisual();
+    }
+  };
+  const handleAttachmentDragOverCapture = (e) => {
+    if (!dataTransferHasFiles(e.dataTransfer) || !attachmentDropHandlingActive()) return;
+    e.preventDefault();
+    e.dataTransfer.dropEffect = "copy";
+  };
+  const handleAttachmentDropCapture = (e) => {
+    var _a2;
+    if (!dataTransferHasFiles(e.dataTransfer) || !attachmentDropHandlingActive()) return;
+    e.preventDefault();
+    e.stopPropagation();
+    clearAttachmentDropVisual();
+    const files = Array.from((_a2 = e.dataTransfer.files) != null ? _a2 : []);
+    if (files.length === 0) return;
+    void attachmentManager.handleFiles(files);
+  };
+  const attachmentDropCapture = true;
+  container.addEventListener("dragenter", handleAttachmentDragEnterCapture, attachmentDropCapture);
+  container.addEventListener("dragleave", handleAttachmentDragLeaveCapture, attachmentDropCapture);
+  mount.addEventListener("dragover", handleAttachmentDragOverCapture, attachmentDropCapture);
+  mount.addEventListener("drop", handleAttachmentDropCapture, attachmentDropCapture);
+  const ownerDoc = mount.ownerDocument;
+  const handleDocDragOver = (e) => {
+    if (!attachmentDropHandlingActive()) return;
+    e.preventDefault();
+  };
+  const handleDocDrop = (e) => {
+    if (!attachmentDropHandlingActive()) return;
+    e.preventDefault();
+  };
+  ownerDoc.addEventListener("dragover", handleDocDragOver);
+  ownerDoc.addEventListener("drop", handleDocDrop);
   destroyCallbacks.push(() => {
     if (composerForm) {
       composerForm.removeEventListener("submit", handleSubmit);
@@ -16230,6 +16346,15 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
     textarea == null ? void 0 : textarea.removeEventListener("keydown", handleInputEnter);
     textarea == null ? void 0 : textarea.removeEventListener("paste", handleInputPaste);
   });
+  destroyCallbacks.push(() => {
+    container.removeEventListener("dragenter", handleAttachmentDragEnterCapture, attachmentDropCapture);
+    container.removeEventListener("dragleave", handleAttachmentDragLeaveCapture, attachmentDropCapture);
+    mount.removeEventListener("dragover", handleAttachmentDragOverCapture, attachmentDropCapture);
+    mount.removeEventListener("drop", handleAttachmentDropCapture, attachmentDropCapture);
+    ownerDoc.removeEventListener("dragover", handleDocDragOver);
+    ownerDoc.removeEventListener("drop", handleDocDrop);
+    clearAttachmentDropVisual();
+  });
   destroyCallbacks.push(() => {
     session.cancel();
   });
@@ -16244,7 +16369,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
   }
   const controller = {
     update(nextConfig) {
-      var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k2, _l2, _m2, _n2, _o2, _p2, _q2, _r2, _s2, _t2, _u2, _v2, _w2, _x2, _y2, _z2, _A2, _B2, _C2, _D2, _E2, _F2, _G2, _H2, _I2, _J2, _K2, _L2, _M2, _N2, _O, _P, _Q, _R, _S, _T, _U, _V, _W, _X, _Y, _Z, __, _$, _aa, _ba, _ca, _da, _ea, _fa, _ga, _ha, _ia, _ja, _ka, _la, _ma, _na, _oa, _pa, _qa, _ra, _sa, _ta, _ua, _va, _wa, _xa, _ya, _za, _Aa, _Ba, _Ca, _Da, _Ea, _Fa, _Ga, _Ha, _Ia, _Ja, _Ka, _La, _Ma, _Na, _Oa, _Pa, _Qa, _Ra, _Sa, _Ta, _Ua, _Va, _Wa, _Xa, _Ya, _Za, __a, _$a;
+      var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k2, _l2, _m2, _n2, _o2, _p2, _q2, _r2, _s2, _t2, _u2, _v2, _w2, _x2, _y2, _z2, _A2, _B2, _C2, _D2, _E2, _F2, _G2, _H2, _I2, _J2, _K2, _L2, _M2, _N2, _O, _P, _Q, _R, _S, _T, _U, _V, _W, _X, _Y, _Z, __, _$, _aa, _ba, _ca, _da, _ea, _fa, _ga, _ha, _ia, _ja, _ka, _la, _ma, _na, _oa, _pa, _qa, _ra, _sa, _ta, _ua, _va, _wa, _xa, _ya, _za, _Aa, _Ba, _Ca, _Da, _Ea, _Fa, _Ga, _Ha, _Ia, _Ja, _Ka, _La, _Ma, _Na, _Oa, _Pa, _Qa, _Ra, _Sa, _Ta, _Ua, _Va, _Wa, _Xa, _Ya, _Za, __a, _$a, _ab;
       const previousToolCallConfig = config.toolCall;
       const previousMessageActions = config.messageActions;
       const previousLayoutMessages = (_a2 = config.layout) == null ? void 0 : _a2.messages;
@@ -17002,6 +17127,9 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
               }
             });
           }
+          if (!container.querySelector(".persona-attachment-drop-overlay")) {
+            container.appendChild(buildDropOverlay(attachmentsConfig.dropOverlay));
+          }
         } else {
           attachmentButtonWrapper.style.display = "";
           const attachmentsConfig = (_Oa = config.attachments) != null ? _Oa : {};
@@ -17024,14 +17152,15 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
         if (attachmentManager) {
           attachmentManager.clearAttachments();
         }
+        (_Ra = container.querySelector(".persona-attachment-drop-overlay")) == null ? void 0 : _Ra.remove();
       }
-      const sendButtonConfig = (_Ra = config.sendButton) != null ? _Ra : {};
-      const useIcon = (_Sa = sendButtonConfig.useIcon) != null ? _Sa : false;
-      const iconText = (_Ta = sendButtonConfig.iconText) != null ? _Ta : "\u2191";
+      const sendButtonConfig = (_Sa = config.sendButton) != null ? _Sa : {};
+      const useIcon = (_Ta = sendButtonConfig.useIcon) != null ? _Ta : false;
+      const iconText = (_Ua = sendButtonConfig.iconText) != null ? _Ua : "\u2191";
       const iconName = sendButtonConfig.iconName;
-      const tooltipText = (_Ua = sendButtonConfig.tooltipText) != null ? _Ua : "Send message";
-      const showTooltip = (_Va = sendButtonConfig.showTooltip) != null ? _Va : false;
-      const buttonSize = (_Wa = sendButtonConfig.size) != null ? _Wa : "40px";
+      const tooltipText = (_Va = sendButtonConfig.tooltipText) != null ? _Va : "Send message";
+      const showTooltip = (_Wa = sendButtonConfig.showTooltip) != null ? _Wa : false;
+      const buttonSize = (_Xa = sendButtonConfig.size) != null ? _Xa : "40px";
       const backgroundColor = sendButtonConfig.backgroundColor;
       const textColor = sendButtonConfig.textColor;
       if (useIcon) {
@@ -17068,7 +17197,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
           sendButton.classList.add("persona-bg-persona-primary");
         }
       } else {
-        sendButton.textContent = (_Ya = (_Xa = config.copy) == null ? void 0 : _Xa.sendButtonLabel) != null ? _Ya : "Send";
+        sendButton.textContent = (_Za = (_Ya = config.copy) == null ? void 0 : _Ya.sendButtonLabel) != null ? _Za : "Send";
         sendButton.style.width = "";
         sendButton.style.height = "";
         sendButton.style.minWidth = "";
@@ -17128,7 +17257,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
       } else if (tooltip) {
         tooltip.style.display = "none";
       }
-      const updatedContentMaxWidth = (_Za = config.layout) == null ? void 0 : _Za.contentMaxWidth;
+      const updatedContentMaxWidth = (__a = config.layout) == null ? void 0 : __a.contentMaxWidth;
       if (updatedContentMaxWidth) {
         messagesWrapper.style.maxWidth = updatedContentMaxWidth;
         messagesWrapper.style.marginLeft = "auto";
@@ -17160,8 +17289,8 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
           suggestions.style.marginRight = "";
         }
       }
-      const statusIndicatorConfig = (__a = config.statusIndicator) != null ? __a : {};
-      const isVisible = (_$a = statusIndicatorConfig.visible) != null ? _$a : true;
+      const statusIndicatorConfig = (_$a = config.statusIndicator) != null ? _$a : {};
+      const isVisible = (_ab = statusIndicatorConfig.visible) != null ? _ab : true;
       statusText.style.display = isVisible ? "" : "none";
       if (session) {
         const currentStatus = session.getStatus();

package/dist/widget.css

@@ -93,6 +93,35 @@
   gap: 1.5rem;
 }
 
+[data-persona-root] .persona-widget-container .persona-attachment-drop-overlay {
+  display: none;
+  position: absolute;
+  inset: var(--persona-drop-overlay-inset, 0);
+  z-index: 50;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  pointer-events: none;
+  background: var(--persona-drop-overlay-bg, rgba(59, 130, 246, 0.08));
+  -webkit-backdrop-filter: blur(var(--persona-drop-overlay-blur, 8px));
+  backdrop-filter: blur(var(--persona-drop-overlay-blur, 8px));
+  border: var(--persona-drop-overlay-border, 2px dashed rgba(59, 130, 246, 0.4));
+  border-radius: var(--persona-drop-overlay-radius, inherit);
+  transition: opacity 0.15s ease;
+}
+
+[data-persona-root] .persona-widget-container .persona-attachment-drop-overlay .persona-drop-overlay-label {
+  font-size: var(--persona-drop-overlay-label-size, 0.875rem);
+  color: var(--persona-drop-overlay-label-color, rgba(59, 130, 246, 0.8));
+  font-weight: 500;
+  user-select: none;
+}
+
+[data-persona-root] .persona-widget-container.persona-attachment-drop-active .persona-attachment-drop-overlay {
+  display: flex;
+}
+
 /* Widget CSS Variables - scoped to widget root to avoid polluting global namespace */
 [data-persona-root] {
   --persona-radius-sm: 0.125rem;
@@ -935,6 +964,7 @@
 }
 
 .persona-widget-container {
+  position: relative;
   border-radius: var(--persona-panel-radius, var(--persona-radius-xl, 0.75rem));
 }