@runtypelabs/persona 3.10.0 → 3.11.0

package/dist/theme-editor.js

@@ -124,7 +124,8 @@ var DEFAULT_WIDGET_CONFIG = {
       activePreview: false,
       grouped: false,
       previewMaxLines: 3,
-      expandable: true
+      expandable: true,
+      loadingAnimation: "none"
     },
     reasoningDisplay: {
       activePreview: false,
@@ -3236,6 +3237,62 @@ var describeToolTitle = (tool) => {
   }
   return "Using tool...";
 };
+var formatElapsedMs = (ms) => {
+  const seconds = ms / 1e3;
+  if (seconds < 0.1) return "<0.1s";
+  if (seconds >= 10) return `${Math.round(seconds)}s`;
+  return `${seconds.toFixed(1).replace(/\.0$/, "")}s`;
+};
+var computeToolElapsed = (tool) => {
+  var _a, _b, _c;
+  const durationMs = typeof tool.duration === "number" ? tool.duration : typeof tool.durationMs === "number" ? tool.durationMs : Math.max(
+    0,
+    ((_a = tool.completedAt) != null ? _a : Date.now()) - ((_c = (_b = tool.startedAt) != null ? _b : tool.completedAt) != null ? _c : Date.now())
+  );
+  return formatElapsedMs(durationMs);
+};
+var resolveToolHeaderText = (tool, template, fallback) => {
+  var _a;
+  if (!template) return fallback;
+  const toolName = ((_a = tool.name) == null ? void 0 : _a.trim()) || "tool";
+  const duration = computeToolElapsed(tool);
+  return template.replace(/\{toolName\}/g, toolName).replace(/\{duration\}/g, duration);
+};
+var parseFormattedTemplate = (template, toolName) => {
+  const resolved = template.replace(/\{toolName\}/g, toolName);
+  const segments = [];
+  const regex = /\*\*(.+?)\*\*|\*(.+?)\*|~(.+?)~/g;
+  let lastIndex = 0;
+  let match;
+  while ((match = regex.exec(resolved)) !== null) {
+    if (match.index > lastIndex) {
+      pushSegments(segments, resolved.slice(lastIndex, match.index), []);
+    }
+    if (match[1] !== void 0) {
+      pushSegments(segments, match[1], ["bold"]);
+    } else if (match[2] !== void 0) {
+      pushSegments(segments, match[2], ["italic"]);
+    } else if (match[3] !== void 0) {
+      pushSegments(segments, match[3], ["dim"]);
+    }
+    lastIndex = match.index + match[0].length;
+  }
+  if (lastIndex < resolved.length) {
+    pushSegments(segments, resolved.slice(lastIndex), []);
+  }
+  return segments;
+};
+var pushSegments = (segments, text, styles) => {
+  const parts = text.split("{duration}");
+  for (let i = 0; i < parts.length; i++) {
+    if (parts[i]) {
+      segments.push({ text: parts[i], styles });
+    }
+    if (i < parts.length - 1) {
+      segments.push({ text: "{duration}", styles, isDuration: true });
+    }
+  }
+};
 var createRegexJsonParserInternal = () => {
   let extractedText = null;
   let processedLength = 0;
@@ -7853,10 +7910,16 @@ var morphMessages = (container, newContent, options = {}) => {
   Idiomorph.morph(container, newContent.innerHTML, {
     morphStyle: "innerHTML",
     callbacks: {
-      beforeNodeMorphed(oldNode, _newNode) {
+      beforeNodeMorphed(oldNode, newNode) {
         if (!(oldNode instanceof HTMLElement)) return;
         if (preserveTypingAnimation) {
-          if (oldNode.classList.contains("persona-animate-typing") || oldNode.hasAttribute("data-preserve-animation")) {
+          if (oldNode.classList.contains("persona-animate-typing")) {
+            return false;
+          }
+          if (oldNode.hasAttribute("data-preserve-animation")) {
+            if (newNode instanceof HTMLElement && !newNode.hasAttribute("data-preserve-animation")) {
+              return;
+            }
             return false;
           }
         }
@@ -10173,7 +10236,7 @@ var getToolPreviewText = (message, maxLines) => {
   return argsText.split(/\r?\n/).map((line) => line.trim()).filter(Boolean).slice(0, maxLines).join("\n");
 };
 var getToolSummaryText = (message, config) => {
-  var _a, _b, _c, _d;
+  var _a, _b, _c, _d, _e;
   const tool = message.toolCall;
   const toolDisplayConfig = (_a = config == null ? void 0 : config.features) == null ? void 0 : _a.toolCallDisplay;
   const collapsedMode = (_b = toolDisplayConfig == null ? void 0 : toolDisplayConfig.collapsedMode) != null ? _b : "tool-call";
@@ -10183,12 +10246,18 @@ var getToolSummaryText = (message, config) => {
     return { summary: defaultSummary, previewText, isActive: false };
   }
   const isActive = tool.status !== "complete";
+  const toolCallConfig = (_d = config == null ? void 0 : config.toolCall) != null ? _d : {};
   let summary = defaultSummary;
   if (collapsedMode === "tool-name") {
-    summary = ((_d = tool.name) == null ? void 0 : _d.trim()) || defaultSummary;
+    summary = ((_e = tool.name) == null ? void 0 : _e.trim()) || defaultSummary;
   } else if (collapsedMode === "tool-preview" && previewText) {
     summary = previewText;
   }
+  if (isActive && toolCallConfig.activeTextTemplate) {
+    summary = resolveToolHeaderText(tool, toolCallConfig.activeTextTemplate, summary);
+  } else if (!isActive && toolCallConfig.completeTextTemplate) {
+    summary = resolveToolHeaderText(tool, toolCallConfig.completeTextTemplate, summary);
+  }
   return { summary, previewText, isActive };
 };
 var updateToolBubbleUI = (messageId, bubble, config) => {
@@ -10218,7 +10287,7 @@ var updateToolBubbleUI = (messageId, bubble, config) => {
   }
 };
 var createToolBubble = (message, config) => {
-  var _a, _b, _c, _d, _e, _f;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i;
   const tool = message.toolCall;
   const toolCallConfig = (_a = config == null ? void 0 : config.toolCall) != null ? _a : {};
   const bubble = createElement(
@@ -10286,14 +10355,23 @@ var createToolBubble = (message, config) => {
   if (toolCallConfig.headerTextColor) {
     title.style.color = toolCallConfig.headerTextColor;
   }
-  const customSummary = (_e = toolCallConfig.renderCollapsedSummary) == null ? void 0 : _e.call(toolCallConfig, {
+  const startedAt = String((_d = tool.startedAt) != null ? _d : Date.now());
+  const createElapsedSpan = () => {
+    const span = createElement("span", "");
+    span.setAttribute("data-tool-elapsed", startedAt);
+    span.textContent = computeToolElapsed(tool);
+    return span;
+  };
+  const customSummary = (_f = toolCallConfig.renderCollapsedSummary) == null ? void 0 : _f.call(toolCallConfig, {
     message,
     toolCall: tool,
     defaultSummary: summary,
     previewText,
-    collapsedMode: (_d = toolDisplayConfig.collapsedMode) != null ? _d : "tool-call",
+    collapsedMode: (_e = toolDisplayConfig.collapsedMode) != null ? _e : "tool-call",
     isActive,
-    config: config != null ? config : {}
+    config: config != null ? config : {},
+    elapsed: computeToolElapsed(tool),
+    createElapsedElement: createElapsedSpan
   });
   if (typeof customSummary === "string" && customSummary.trim()) {
     title.textContent = customSummary;
@@ -10304,6 +10382,79 @@ var createToolBubble = (message, config) => {
     title.textContent = summary;
     headerContent.appendChild(title);
   }
+  const loadingAnimation = (_g = toolDisplayConfig.loadingAnimation) != null ? _g : "none";
+  const activeTemplate = toolCallConfig.activeTextTemplate;
+  const completeTemplate = toolCallConfig.completeTextTemplate;
+  const currentTemplate = isActive ? activeTemplate : completeTemplate;
+  const skipCustomElement = customSummary instanceof HTMLElement;
+  const appendCharSpans = (container, text, startIndex) => {
+    let idx = startIndex;
+    for (const char of text) {
+      const span = createElement("span", "persona-tool-char");
+      span.style.setProperty("--char-index", String(idx));
+      span.textContent = char === " " ? "\xA0" : char;
+      container.appendChild(span);
+      idx++;
+    }
+    return idx;
+  };
+  const renderFormattedTitle = (template, animated) => {
+    var _a2;
+    title.textContent = "";
+    const toolName = ((_a2 = tool.name) == null ? void 0 : _a2.trim()) || "tool";
+    const segments = parseFormattedTemplate(template, toolName);
+    let charIndex = 0;
+    for (const seg of segments) {
+      const parent = seg.styles.length > 0 ? (() => {
+        const w = createElement("span", seg.styles.map((s) => `persona-tool-text-${s}`).join(" "));
+        title.appendChild(w);
+        return w;
+      })() : title;
+      if (seg.isDuration && isActive) {
+        parent.appendChild(createElapsedSpan());
+      } else {
+        const text = seg.isDuration ? computeToolElapsed(tool) : seg.text;
+        if (animated) {
+          charIndex = appendCharSpans(parent, text, charIndex);
+        } else {
+          parent.appendChild(document.createTextNode(text));
+        }
+      }
+    }
+  };
+  if (!skipCustomElement) {
+    if (isActive && loadingAnimation !== "none") {
+      const animDuration = (_h = toolCallConfig.loadingAnimationDuration) != null ? _h : 2e3;
+      title.setAttribute("data-preserve-animation", "true");
+      if (loadingAnimation === "pulse") {
+        title.classList.add("persona-tool-loading-pulse");
+        title.style.setProperty("--persona-tool-anim-duration", `${animDuration}ms`);
+        if (currentTemplate) {
+          renderFormattedTitle(currentTemplate, false);
+        }
+      } else {
+        title.classList.add(`persona-tool-loading-${loadingAnimation}`);
+        title.style.setProperty("--persona-tool-anim-duration", `${animDuration}ms`);
+        if (loadingAnimation === "shimmer-color") {
+          if (toolCallConfig.loadingAnimationColor) {
+            title.style.setProperty("--persona-tool-anim-color", toolCallConfig.loadingAnimationColor);
+          }
+          if (toolCallConfig.loadingAnimationSecondaryColor) {
+            title.style.setProperty("--persona-tool-anim-secondary-color", toolCallConfig.loadingAnimationSecondaryColor);
+          }
+        }
+        if (currentTemplate) {
+          renderFormattedTitle(currentTemplate, true);
+        } else {
+          const text = title.textContent || summary;
+          title.textContent = "";
+          appendCharSpans(title, text, 0);
+        }
+      }
+    } else if (currentTemplate) {
+      renderFormattedTitle(currentTemplate, false);
+    }
+  }
   let toggleIcon = null;
   if (expandable) {
     toggleIcon = createElement("div", "persona-flex persona-items-center");
@@ -10328,7 +10479,7 @@ var createToolBubble = (message, config) => {
   collapsedPreview.style.display = "none";
   collapsedPreview.style.whiteSpace = "pre-wrap";
   if (!expanded && isActive && toolDisplayConfig.activePreview && previewText) {
-    const renderedPreview = (_f = toolCallConfig.renderCollapsedPreview) == null ? void 0 : _f.call(toolCallConfig, {
+    const renderedPreview = (_i = toolCallConfig.renderCollapsedPreview) == null ? void 0 : _i.call(toolCallConfig, {
       message,
       toolCall: tool,
       defaultPreview: previewText,
@@ -13297,6 +13448,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 +13548,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 +13981,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 +14075,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,8 +14871,10 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
   let lastScrollTop = 0;
   let scrollRAF = null;
   let isAutoScrolling = false;
-  const USER_SCROLL_THRESHOLD = 1;
-  const BOTTOM_THRESHOLD = 8;
+  let hasPendingAutoScroll = false;
+  const USER_SCROLL_THRESHOLD = 4;
+  const BOTTOM_THRESHOLD = 24;
+  const AUTO_SCROLL_SNAP_THRESHOLD = 80;
   const messageState = /* @__PURE__ */ new Map();
   const voiceState = {
     active: false,
@@ -14758,6 +14965,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
       cancelAnimationFrame(scrollRAF);
       scrollRAF = null;
     }
+    hasPendingAutoScroll = false;
     cancelSmoothScroll();
   };
   const syncScrollToBottomButton = () => {
@@ -14787,9 +14995,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);
     });
@@ -14802,6 +15015,14 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
       lastScrollTop = element.scrollTop;
       return;
     }
+    if (Math.abs(distance) >= AUTO_SCROLL_SNAP_THRESHOLD) {
+      cancelSmoothScroll();
+      isAutoScrolling = true;
+      element.scrollTop = target;
+      lastScrollTop = element.scrollTop;
+      isAutoScrolling = false;
+      return;
+    }
     cancelSmoothScroll();
     const startTime = performance.now();
     isAutoScrolling = true;
@@ -15410,9 +15631,28 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
       }
     };
   }
+  let toolElapsedTimerId = null;
+  const ensureToolElapsedTimer = () => {
+    if (toolElapsedTimerId != null) return;
+    toolElapsedTimerId = setInterval(() => {
+      const spans = messagesWrapper.querySelectorAll("[data-tool-elapsed]");
+      if (spans.length === 0) {
+        clearInterval(toolElapsedTimerId);
+        toolElapsedTimerId = null;
+        return;
+      }
+      const now = Date.now();
+      spans.forEach((span) => {
+        const startedAt = Number(span.getAttribute("data-tool-elapsed"));
+        if (!startedAt) return;
+        span.textContent = formatElapsedMs(now - startedAt);
+      });
+    }, 100);
+  };
   session = new AgentWidgetSession(config, {
     onMessagesChanged(messages) {
       renderMessagesWithPlugins(messagesWrapper, messages, postprocess);
+      ensureToolElapsedTimer();
       if (session) {
         const hasUserMessage = messages.some((msg) => msg.role === "user");
         if (hasUserMessage) {
@@ -16108,7 +16348,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 +16463,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 +16525,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 +16548,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 +17306,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 +17331,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 +17376,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 +17436,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 +17468,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();
@@ -17507,6 +17815,10 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
       return session.submitNPSFeedback(rating, comment);
     },
     destroy() {
+      if (toolElapsedTimerId != null) {
+        clearInterval(toolElapsedTimerId);
+        toolElapsedTimerId = null;
+      }
       destroyCallbacks.forEach((cb) => cb());
       wrapper.remove();
       launcherButtonInstance == null ? void 0 : launcherButtonInstance.destroy();