@pindai-ai/chat-widget 3.0.0 → 3.0.2

package/dist/pindai-chat-widget.js

@@ -1,18 +1,18 @@
-var d = (u, e, t) => new Promise((i, s) => {
+var d = (u, e, i) => new Promise((t, s) => {
   var a = (l) => {
     try {
-      r(t.next(l));
+      r(i.next(l));
     } catch (o) {
       s(o);
     }
   }, n = (l) => {
     try {
-      r(t.throw(l));
+      r(i.throw(l));
     } catch (o) {
       s(o);
     }
-  }, r = (l) => l.done ? i(l.value) : Promise.resolve(l.value).then(a, n);
-  r((t = t.apply(u, e)).next());
+  }, r = (l) => l.done ? t(l.value) : Promise.resolve(l.value).then(a, n);
+  r((i = i.apply(u, e)).next());
 });
 const g = {
   en: {
@@ -65,7 +65,8 @@ const g = {
     humanAgentLabel: "Support Agent",
     actionIndicator: "Performing action...",
     thinkingIndicator: "Thinking...",
-    poweredBy: "Powered by"
+    poweredBy: "Powered by",
+    waitingForAgent: "Waiting for a human agent..."
   },
   id: {
     // Widget UI
@@ -117,7 +118,8 @@ const g = {
     humanAgentLabel: "Agen Dukungan",
     actionIndicator: "Sedang memproses...",
     thinkingIndicator: "Sedang berpikir...",
-    poweredBy: "Dibuat dengan"
+    poweredBy: "Dibuat dengan",
+    waitingForAgent: "Menunggu agen manusia..."
   }
 };
 class y {
@@ -136,13 +138,13 @@ class y {
    * @param {object} params - Parameters to substitute in the translation
    * @returns {string} Translated string
    */
-  t(e, t = {}) {
+  t(e, i = {}) {
     var s;
-    let i = ((s = g[this.locale]) == null ? void 0 : s[e]) || g.en[e] || e;
-    return Object.keys(t).forEach((a) => {
+    let t = ((s = g[this.locale]) == null ? void 0 : s[e]) || g.en[e] || e;
+    return Object.keys(i).forEach((a) => {
       const n = new RegExp(`\\{${a}\\}`, "g");
-      i = i.replace(n, t[a]);
-    }), i;
+      t = t.replace(n, i[a]);
+    }), t;
   }
   /**
    * Change the current locale
@@ -169,12 +171,12 @@ class y {
 class w {
   constructor(e) {
     this.agentId = e.agentId || null, this.embedSecret = e.embedSecret || null, this.apiBaseUrl = e.apiBaseUrl ? e.apiBaseUrl.replace(/\/$/, "") : null;
-    const t = e.webhookUrl || e.n8nUrl, i = !!(this.agentId && this.embedSecret && this.apiBaseUrl);
-    if (!i && !!!t)
+    const i = e.webhookUrl || e.n8nUrl, t = !!(this.agentId && this.embedSecret && this.apiBaseUrl);
+    if (!t && !!!i)
       throw new Error(
         'PindaiChatWidget: Provide either (agentId + embedSecret + apiBaseUrl) for Pindai Agent-API mode, or "webhookUrl" for generic webhook mode.'
       );
-    this.webhookUrl = i ? `${this.apiBaseUrl}/v1/chat/${this.agentId}/message` : t, this._agentMode = i, this._embedToken = null, this.mode = e.mode || "widget", this.locale = e.locale || "id", this.i18n = new y(this.locale), this.title = e.title || this.i18n.t("title"), this.initialMessage = e.initialMessage || this.i18n.t("initialMessage"), this.launcherIconUrl = e.launcherIconUrl || this._getDefaultLauncherIcon(), this.logoUrl = e.logoUrl || "https://pindai.ai/logo.png", this.showLogo = e.showLogo !== !1, this.avatarUrl = e.avatarUrl || null, this.launcherColor = e.launcherColor || "#2563eb", this.sendButtonColor = e.sendButtonColor || "#2563eb", this.accentColor = e.accentColor || "#2563eb", this.theme = e.theme || "light", this.buttonAlignment = e.buttonAlignment || "bottom-right";
+    this.webhookUrl = t ? `${this.apiBaseUrl}/v1/chat/${this.agentId}/message` : i, this._agentMode = t, this._embedToken = null, this.mode = e.mode || "widget", this.locale = e.locale || "id", this.i18n = new y(this.locale), this.title = e.title || this.i18n.t("title"), this.initialMessage = e.initialMessage || this.i18n.t("initialMessage"), this.launcherIconUrl = e.launcherIconUrl || this._getDefaultLauncherIcon(), this.logoUrl = e.logoUrl || "https://pindai.ai/logo.png", this.showLogo = e.showLogo !== !1, this.avatarUrl = e.avatarUrl || null, this.accentColor = e.accentColor || "#2563eb", this.launcherColor = e.launcherColor || this.accentColor, this.sendButtonColor = e.sendButtonColor || this.accentColor, this.theme = e.theme || "light", this.buttonAlignment = e.buttonAlignment || "bottom-right";
     const a = e.bubbleMessages || (e.bubbleText ? [e.bubbleText] : null);
     this.bubbleMessages = a && a.length > 0 ? a : null, this.bubbleDelay = typeof e.bubbleDelay == "number" ? e.bubbleDelay : 3e3, this.bubbleInterval = typeof e.bubbleInterval == "number" ? e.bubbleInterval : 5e3, this.showBubbleOnce = e.showBubbleOnce !== !1, this._bubbleDismissed = !1, this._bubbleMsgIndex = 0, this._bubbleRotateTimer = null, this._bubbleDelayTimer = null, this.customFooter = e.customFooter || null, this.showBranding = e.showBranding !== !1, this.showActionIndicators = e.showActionIndicators !== !1, this.visitorName = e.visitorName || null, this.visitorEmail = e.visitorEmail || null, this.enableStreaming = this._agentMode && e.enableStreaming !== !1, this.enableFileUpload = e.enableFileUpload !== !1, this.allowedFileTypes = e.allowedFileTypes || [
       "image/jpeg",
@@ -193,7 +195,20 @@ class w {
       this.i18n.t("quickReply4")
     ], this.enableHistory = e.enableHistory !== !1, this.maxHistoryItems = e.maxHistoryItems || 50;
     const n = this._agentMode ? this.agentId : this.webhookUrl;
-    this.historyKey = `pindai-chat-history-${n}`, this.stateKey = `pindai-chat-state-${n}`, this.maxRetries = e.maxRetries || 3, this.retryDelay = e.retryDelay || 1e3, this.requestTimeout = e.requestTimeout || 3e4, this.rateLimit = e.rateLimit || 5, this.rateLimitWindow = e.rateLimitWindow || 6e4, this.messageTimes = [], this.container = null, this.launcher = null, this.bubblePopup = null, this.chatWindow = null, this.messageList = null, this.input = null, this.button = null, this.closeButton = null, this.pollingUrl = this._agentMode ? `${this.apiBaseUrl}/v1/chat/${this.agentId}/messages` : e.pollingUrl || null, this.pollingEnabled = !!(this.pollingUrl || e.pollingUrl), this.pollingInterval = e.pollingInterval || 3e3, this._pollingTimer = null, this._lastMessageTimestamp = null, this.sessionId = `web-session-${Date.now()}-${Math.random()}`, this.isLoading = !1, this.isOpen = !1, this.isOnline = navigator.onLine, this.loadState(), this._setupOfflineDetection(), this._applyTheme(), this.mode === "fullscreen" ? this._initChatWindow() : this._initLauncher();
+    this.historyKey = `pindai-chat-history-${n}`, this.stateKey = `pindai-chat-state-${n}`, this.maxRetries = e.maxRetries || 3, this.retryDelay = e.retryDelay || 1e3, this.requestTimeout = e.requestTimeout || 3e4, this.rateLimit = e.rateLimit || 5, this.rateLimitWindow = e.rateLimitWindow || 6e4, this.messageTimes = [], this.container = null, this.launcher = null, this.bubblePopup = null, this.chatWindow = null, this.messageList = null, this.input = null, this.button = null, this.closeButton = null, this.pollingUrl = this._agentMode ? `${this.apiBaseUrl}/v1/chat/${this.agentId}/messages` : e.pollingUrl || null, this.pollingEnabled = !!(this.pollingUrl || e.pollingUrl), this.pollingInterval = e.pollingInterval || 3e3, this._pollingTimer = null, this._lastMessageTimestamp = null;
+    const r = this._agentMode ? `pindai-session-id-${this.agentId}` : null, l = r ? (() => {
+      try {
+        return localStorage.getItem(r);
+      } catch (o) {
+        return null;
+      }
+    })() : null;
+    if (this.sessionId = l || `web-session-${Date.now()}-${Math.random()}`, r && !l)
+      try {
+        localStorage.setItem(r, this.sessionId);
+      } catch (o) {
+      }
+    this.isLoading = !1, this.isOpen = !1, this.isOnline = navigator.onLine, this.loadState(), this._setupOfflineDetection(), this._applyTheme(), this.mode === "fullscreen" ? this._initChatWindow() : this._initLauncher();
   }
   // ─────────────────────────────────────────────────────────────────────────
   // Auth helpers (Agent-API mode)
@@ -202,10 +217,10 @@ class w {
    * Convert hex string to Uint8Array
    */
   _hexToBytes(e) {
-    const t = new Uint8Array(e.length / 2);
-    for (let i = 0; i < e.length; i += 2)
-      t[i / 2] = parseInt(e.slice(i, i + 2), 16);
-    return t;
+    const i = new Uint8Array(e.length / 2);
+    for (let t = 0; t < e.length; t += 2)
+      i[t / 2] = parseInt(e.slice(t, t + 2), 16);
+    return i;
   }
   /**
    * Generate HMAC-SHA256 embed token using native crypto.subtle
@@ -220,8 +235,8 @@ class w {
         { name: "HMAC", hash: "SHA-256" },
         !1,
         ["sign"]
-      ), t = new TextEncoder().encode(`${this.agentId}:${this.sessionId}`), i = yield crypto.subtle.sign("HMAC", e, t);
-      return this._embedToken = Array.from(new Uint8Array(i)).map((s) => s.toString(16).padStart(2, "0")).join(""), this._embedToken;
+      ), i = new TextEncoder().encode(`${this.agentId}:${this.sessionId}`), t = yield crypto.subtle.sign("HMAC", e, i);
+      return this._embedToken = Array.from(new Uint8Array(t)).map((s) => s.toString(16).padStart(2, "0")).join(""), this._embedToken;
     });
   }
   // ─────────────────────────────────────────────────────────────────────────
@@ -231,13 +246,13 @@ class w {
     if (this.theme === "dark")
       document.documentElement.setAttribute("data-pindai-theme", "dark");
     else if (this.theme === "auto") {
-      const e = window.matchMedia("(prefers-color-scheme: dark)"), t = (i) => {
+      const e = window.matchMedia("(prefers-color-scheme: dark)"), i = (t) => {
         document.documentElement.setAttribute(
           "data-pindai-theme",
-          i.matches ? "dark" : "light"
+          t.matches ? "dark" : "light"
         );
       };
-      t(e), e.addEventListener("change", t);
+      i(e), e.addEventListener("change", i);
     }
   }
   // ─────────────────────────────────────────────────────────────────────────
@@ -259,12 +274,12 @@ class w {
       }, this.bubbleDelay);
     }
     this.launcher = document.createElement("div"), this.launcher.className = "n8n-chat-launcher", this.launcher.style.backgroundColor = this.launcherColor, this.launcher.setAttribute("role", "button"), this.launcher.setAttribute("aria-label", this.i18n.t("ariaOpenChat")), this.launcher.setAttribute("tabindex", "0");
-    const t = document.createElement("img");
-    t.src = this.launcherIconUrl, t.alt = "", t.onerror = () => {
-      t.onerror = null, t.src = this._getDefaultLauncherIcon();
+    const i = document.createElement("img");
+    i.src = this.launcherIconUrl, i.alt = "", i.onerror = () => {
+      i.onerror = null, i.src = this._getDefaultLauncherIcon();
     };
-    const i = document.createElement("span");
-    i.className = "n8n-chat-unread-badge", i.style.display = "none", i.textContent = "0", this.launcher.appendChild(t), this.launcher.appendChild(i), e.appendChild(this.launcher), document.body.appendChild(e), this.launcher.addEventListener("click", () => this.toggleChatWindow()), this.launcher.addEventListener("keydown", (s) => {
+    const t = document.createElement("span");
+    t.className = "n8n-chat-unread-badge", t.style.display = "none", t.textContent = "0", this.launcher.appendChild(i), this.launcher.appendChild(t), e.appendChild(this.launcher), document.body.appendChild(e), this.launcher.addEventListener("click", () => this.toggleChatWindow()), this.launcher.addEventListener("keydown", (s) => {
       (s.key === "Enter" || s.key === " ") && (s.preventDefault(), this.toggleChatWindow());
     });
   }
@@ -291,7 +306,7 @@ class w {
   // Chat Window
   // ─────────────────────────────────────────────────────────────────────────
   _initChatWindow() {
-    this.container = document.createElement("div"), this.container.className = `n8n-chat-widget ${this.mode === "fullscreen" ? "n8n-chat-widget--fullscreen" : ""}`, this.container.setAttribute("role", "dialog"), this.container.setAttribute("aria-modal", "true"), this.container.setAttribute("aria-label", this.title);
+    this.container = document.createElement("div"), this.container.className = `n8n-chat-widget ${this.mode === "fullscreen" ? "n8n-chat-widget--fullscreen" : ""}`, this.container.setAttribute("role", "dialog"), this.container.setAttribute("aria-modal", "true"), this.container.setAttribute("aria-label", this.title), this.container.style.setProperty("--pindai-primary", this.accentColor), this.container.style.setProperty("--pindai-primary-dark", this.accentColor);
     const e = this._buildFooterHtml();
     this.container.innerHTML = `
       <div class="n8n-chat-header">
@@ -320,11 +335,11 @@ class w {
         </button>
       </div>
       ${this.enableFileUpload ? '<div class="n8n-chat-file-preview" style="display: none;"></div>' : ""}
-    `, this._injectHeaderImage(), this.mode === "widget" ? document.body.appendChild(this.container) : (document.body.innerHTML = "", document.body.appendChild(this.container), document.body.style.margin = "0"), this.messageList = this.container.querySelector(".n8n-chat-messages"), this.input = this.container.querySelector('input[type="text"]'), this.button = this.container.querySelector(".n8n-chat-send-btn"), this.closeButton = this.container.querySelector(".n8n-chat-close-btn"), this.button.addEventListener("click", (t) => {
-      t.preventDefault(), this.sendMessage();
-    }), this.input.addEventListener("keypress", (t) => {
-      t.key === "Enter" && (t.preventDefault(), this.sendMessage());
-    }), this.mode === "fullscreen" ? this.closeButton.style.display = "none" : this.closeButton.addEventListener("click", () => this.toggleChatWindow()), this.enableFileUpload && this.container.querySelector('input[type="file"]').addEventListener("change", (i) => this._handleFileSelect(i)), this._setupKeyboardNavigation(), this.loadHistory(), this.messageList.children.length === 0 && this.addMessage(this.initialMessage, "ai");
+    `, this._injectHeaderImage(), this.mode === "widget" ? document.body.appendChild(this.container) : (document.body.innerHTML = "", document.body.appendChild(this.container), document.body.style.margin = "0"), this.messageList = this.container.querySelector(".n8n-chat-messages"), this.input = this.container.querySelector('input[type="text"]'), this.button = this.container.querySelector(".n8n-chat-send-btn"), this.closeButton = this.container.querySelector(".n8n-chat-close-btn"), this.button.addEventListener("click", (i) => {
+      i.preventDefault(), this.sendMessage();
+    }), this.input.addEventListener("keypress", (i) => {
+      i.key === "Enter" && (i.preventDefault(), this.sendMessage());
+    }), this.mode === "fullscreen" ? this.closeButton.style.display = "none" : this.closeButton.addEventListener("click", () => this.toggleChatWindow()), this.enableFileUpload && this.container.querySelector('input[type="file"]').addEventListener("change", (t) => this._handleFileSelect(t)), this._setupKeyboardNavigation(), this.loadHistory(), this.messageList.children.length === 0 && this.addMessage(this.initialMessage, "ai");
   }
   /**
    * Inject the header avatar/logo as a real DOM element so we can attach
@@ -335,17 +350,17 @@ class w {
   _injectHeaderImage() {
     const e = this.container.querySelector(".n8n-chat-header-content");
     if (!e) return;
-    const t = e.querySelector(".n8n-chat-title");
+    const i = e.querySelector(".n8n-chat-title");
     if (this.avatarUrl) {
-      const i = document.createElement("img");
-      i.className = "n8n-chat-header-avatar", i.alt = "", i.src = this.avatarUrl, i.onerror = () => {
-        i.onerror = null, i.remove();
-      }, e.insertBefore(i, t);
+      const t = document.createElement("img");
+      t.className = "n8n-chat-header-avatar", t.alt = "", t.src = this.avatarUrl, t.onerror = () => {
+        t.onerror = null, t.remove();
+      }, e.insertBefore(t, i);
     } else if (this.showLogo) {
-      const i = document.createElement("img");
-      i.className = "n8n-chat-logo", i.alt = "", i.src = this.logoUrl, i.onerror = () => {
-        i.onerror = null, i.remove();
-      }, e.insertBefore(i, t);
+      const t = document.createElement("img");
+      t.className = "n8n-chat-logo", t.alt = "", t.src = this.logoUrl, t.onerror = () => {
+        t.onerror = null, t.remove();
+      }, e.insertBefore(t, i);
     }
   }
   /**
@@ -373,6 +388,28 @@ class w {
   _escapeHtml(e) {
     return String(e).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
   }
+  /**
+   * Safe markdown renderer for AI messages.
+   * Supports: bold, italic, inline code, fenced code blocks, headings,
+   * unordered/ordered lists, links. Always escapes HTML first to prevent XSS.
+   */
+  _renderMarkdown(e) {
+    const i = [];
+    let t = String(e).replace(/```([\s\S]*?)```/g, (s, a) => {
+      const n = i.length;
+      return i.push(`<pre><code>${this._escapeHtml(a.replace(/^\n/, "").replace(/\n$/, ""))}</code></pre>`), `\0CODE${n}\0`;
+    });
+    return t = this._escapeHtml(t), t = t.replace(/`([^`]+)`/g, "<code>$1</code>"), t = t.replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>"), t = t.replace(/__([^_]+)__/g, "<strong>$1</strong>"), t = t.replace(/\*([^*]+)\*/g, "<em>$1</em>"), t = t.replace(/_([^_]+)_/g, "<em>$1</em>"), t = t.replace(/^### (.+)$/gm, "<h5>$1</h5>"), t = t.replace(/^## (.+)$/gm, "<h4>$1</h4>"), t = t.replace(/^# (.+)$/gm, "<h3>$1</h3>"), t = t.replace(/^(?:[*-] .+\n?)+/gm, (s) => `<ul>${s.trim().split(`
+`).map(
+      (n) => `<li>${n.replace(/^[*-] /, "")}</li>`
+    ).join("")}</ul>`), t = t.replace(/^(?:\d+\. .+\n?)+/gm, (s) => `<ol>${s.trim().split(`
+`).map(
+      (n) => `<li>${n.replace(/^\d+\. /, "")}</li>`
+    ).join("")}</ol>`), t = t.replace(
+      /\[([^\]]+)\]\((https?:\/\/[^)]+)\)/g,
+      '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>'
+    ), t = t.replace(/\n/g, "<br>"), t = t.replace(/\x00CODE(\d+)\x00/g, (s, a) => i[parseInt(a)]), t;
+  }
   // ─────────────────────────────────────────────────────────────────────────
   // Toggle open/close
   // ─────────────────────────────────────────────────────────────────────────
@@ -391,8 +428,8 @@ class w {
   // Timestamp formatting
   // ─────────────────────────────────────────────────────────────────────────
   _formatTimestamp(e) {
-    const i = /* @__PURE__ */ new Date() - e;
-    return i < 6e4 ? this.i18n.t("justNow") : i < 36e5 ? this.i18n.t("minutesAgo", { minutes: Math.floor(i / 6e4) }) : e.toLocaleTimeString(this.locale === "id" ? "id-ID" : "en-US", {
+    const t = /* @__PURE__ */ new Date() - e;
+    return t < 6e4 ? this.i18n.t("justNow") : t < 36e5 ? this.i18n.t("minutesAgo", { minutes: Math.floor(t / 6e4) }) : e.toLocaleTimeString(this.locale === "id" ? "id-ID" : "en-US", {
       hour: "2-digit",
       minute: "2-digit"
     });
@@ -400,13 +437,13 @@ class w {
   // ─────────────────────────────────────────────────────────────────────────
   // Messages
   // ─────────────────────────────────────────────────────────────────────────
-  addMessage(e, t, i = /* @__PURE__ */ new Date()) {
+  addMessage(e, i, t = /* @__PURE__ */ new Date()) {
     const s = document.createElement("div");
-    s.className = `n8n-chat-bubble n8n-chat-${t}-message`;
+    s.className = `n8n-chat-bubble n8n-chat-${i}-message`;
     const a = document.createElement("div");
-    a.className = "n8n-chat-message-text", a.textContent = e;
+    a.className = "n8n-chat-message-text", i === "ai" ? a.innerHTML = this._renderMarkdown(e) : a.textContent = e;
     const n = document.createElement("div");
-    n.className = "n8n-chat-message-timestamp", n.textContent = this._formatTimestamp(i), n.setAttribute("data-timestamp", i.toISOString()), s.appendChild(a), s.appendChild(n), this.messageList.appendChild(s), this.messageList.scrollTop = this.messageList.scrollHeight, this.saveToHistory(e, t, i), !this.isOpen && t === "ai" && this._incrementUnread();
+    n.className = "n8n-chat-message-timestamp", n.textContent = this._formatTimestamp(t), n.setAttribute("data-timestamp", t.toISOString()), s.appendChild(a), s.appendChild(n), this.messageList.appendChild(s), this.messageList.scrollTop = this.messageList.scrollHeight, this.saveToHistory(e, i, t), !this.isOpen && i === "ai" && this._incrementUnread();
   }
   /**
    * Create a streaming message bubble (text filled incrementally via SSE).
@@ -415,69 +452,69 @@ class w {
   _createStreamingBubble() {
     const e = document.createElement("div");
     e.className = "n8n-chat-bubble n8n-chat-ai-message n8n-chat-bubble--streaming";
-    const t = document.createElement("div");
-    t.className = "n8n-chat-message-text", t.textContent = "";
-    const i = document.createElement("span");
-    i.className = "n8n-chat-stream-cursor";
+    const i = document.createElement("div");
+    i.className = "n8n-chat-message-text", i.textContent = "";
+    const t = document.createElement("span");
+    t.className = "n8n-chat-stream-cursor";
     const s = document.createElement("div");
-    return s.className = "n8n-chat-message-timestamp", s.textContent = this._formatTimestamp(/* @__PURE__ */ new Date()), e.appendChild(t), e.appendChild(i), e.appendChild(s), this.messageList.appendChild(e), this.messageList.scrollTop = this.messageList.scrollHeight, { bubble: e, textNode: t, cursor: i, timeNode: s };
+    return s.className = "n8n-chat-message-timestamp", s.textContent = this._formatTimestamp(/* @__PURE__ */ new Date()), e.appendChild(i), e.appendChild(t), e.appendChild(s), this.messageList.appendChild(e), this.messageList.scrollTop = this.messageList.scrollHeight, { bubble: e, textNode: i, cursor: t, timeNode: s };
   }
-  addMessageWithoutSaving(e, t, i) {
+  addMessageWithoutSaving(e, i, t) {
     const s = document.createElement("div");
-    s.className = `n8n-chat-bubble n8n-chat-${t}-message`;
+    s.className = `n8n-chat-bubble n8n-chat-${i}-message`;
     const a = document.createElement("div");
-    a.className = "n8n-chat-message-text", a.textContent = e;
+    a.className = "n8n-chat-message-text", i === "ai" ? a.innerHTML = this._renderMarkdown(e) : a.textContent = e;
     const n = document.createElement("div");
-    n.className = "n8n-chat-message-timestamp", n.textContent = this._formatTimestamp(i), n.setAttribute("data-timestamp", i.toISOString()), s.appendChild(a), s.appendChild(n), this.messageList.appendChild(s), this.messageList.scrollTop = this.messageList.scrollHeight;
+    n.className = "n8n-chat-message-timestamp", n.textContent = this._formatTimestamp(t), n.setAttribute("data-timestamp", t.toISOString()), s.appendChild(a), s.appendChild(n), this.messageList.appendChild(s), this.messageList.scrollTop = this.messageList.scrollHeight;
   }
   // ─────────────────────────────────────────────────────────────────────────
   // Typing indicator
   // ─────────────────────────────────────────────────────────────────────────
   _showTypingIndicator(e) {
-    let t = this.messageList.querySelector(".n8n-chat-typing-indicator");
+    let i = this.messageList.querySelector(".n8n-chat-typing-indicator");
     if (e) {
-      if (!t) {
-        t = document.createElement("div"), t.className = "n8n-chat-bubble n8n-chat-ai-message n8n-chat-typing-indicator";
-        const i = "<span></span><span></span><span></span>";
-        this.showActionIndicators ? t.innerHTML = `
-            <div class="n8n-chat-typing-dots">${i}</div>
+      if (!i) {
+        i = document.createElement("div"), i.className = "n8n-chat-bubble n8n-chat-ai-message n8n-chat-typing-indicator";
+        const t = "<span></span><span></span><span></span>";
+        this.showActionIndicators ? i.innerHTML = `
+            <div class="n8n-chat-typing-dots">${t}</div>
             <span class="n8n-chat-typing-label">${this.i18n.t("thinkingIndicator")}</span>
-          ` : t.innerHTML = i, t.setAttribute("aria-label", this.i18n.t("typingIndicator")), this.messageList.appendChild(t), this.messageList.scrollTop = this.messageList.scrollHeight;
+          ` : i.innerHTML = t, i.setAttribute("aria-label", this.i18n.t("typingIndicator")), this.messageList.appendChild(i), this.messageList.scrollTop = this.messageList.scrollHeight;
       }
-    } else t && t.remove();
+    } else i && i.remove();
   }
   // ─────────────────────────────────────────────────────────────────────────
   // File upload
   // ─────────────────────────────────────────────────────────────────────────
   _handleFileSelect(e) {
-    Array.from(e.target.files).forEach((i) => {
-      if (!this.allowedFileTypes.includes(i.type)) {
-        this.addMessage(this.i18n.t("fileTypeNotSupported", { filename: i.name }), "ai");
+    Array.from(e.target.files).forEach((t) => {
+      if (!this.allowedFileTypes.includes(t.type)) {
+        this.addMessage(this.i18n.t("fileTypeNotSupported", { filename: t.name }), "ai");
         return;
       }
-      if (i.size > this.maxFileSize) {
+      if (t.size > this.maxFileSize) {
         const s = this.maxFileSize / 1024 / 1024;
-        this.addMessage(this.i18n.t("fileTooLarge", { filename: i.name, maxSize: s }), "ai");
+        this.addMessage(this.i18n.t("fileTooLarge", { filename: t.name, maxSize: s }), "ai");
         return;
       }
       if (this.uploadedFiles.length >= this.maxFiles) {
         this.addMessage(this.i18n.t("maxFilesExceeded", { maxFiles: this.maxFiles }), "ai");
         return;
       }
-      this.uploadedFiles.push(i), this._renderFilePreview(i);
+      this.uploadedFiles.push(t), this._renderFilePreview(t);
     }), e.target.value = "";
   }
   _renderFilePreview(e) {
-    const t = this.container.querySelector(".n8n-chat-file-preview");
-    if (!t) return;
-    t.style.display = "flex";
-    const i = document.createElement("div");
-    i.className = "n8n-chat-file-item", i.innerHTML = `
+    const i = this.container.querySelector(".n8n-chat-file-preview");
+    if (!i) return;
+    i.style.display = "flex";
+    const t = document.createElement("div");
+    t.className = "n8n-chat-file-item", t.innerHTML = `
       <span class="n8n-chat-file-name">${this._escapeHtml(e.name)}</span>
       <button class="n8n-chat-file-remove" aria-label="${this.i18n.t("ariaRemoveFile")}">&times;</button>
-    `, i.querySelector(".n8n-chat-file-remove").addEventListener("click", () => {
-      this.uploadedFiles = this.uploadedFiles.filter((s) => s.name !== e.name), i.remove(), this.uploadedFiles.length === 0 && (t.style.display = "none");
-    }), t.appendChild(i);
+    `, t.querySelector(".n8n-chat-file-remove").addEventListener("click", () => {
+      this.uploadedFiles = this.uploadedFiles.filter((s) => s.name !== e.name), t.remove(), this.uploadedFiles.length === 0 && (i.style.display = "none");
+    }), i.appendChild(t);
   }
   // ─────────────────────────────────────────────────────────────────────────
   // Send message — entry point
@@ -488,8 +525,8 @@ class w {
       if (!(!e && this.uploadedFiles.length === 0 || this.isLoading)) {
         try {
           this._checkRateLimit();
-        } catch (t) {
-          this.addMessage(t.message, "ai");
+        } catch (i) {
+          this.addMessage(i.message, "ai");
           return;
         }
         if (!this.isOnline) {
@@ -501,16 +538,16 @@ class w {
           if (this._agentMode && this.enableStreaming && this.uploadedFiles.length === 0)
             yield this._sendWithStreaming(e);
           else {
-            const t = yield this._sendMessageWithRetry(e, this.uploadedFiles);
-            this._showTypingIndicator(!1), this.addMessage(t, "ai"), this.showQuickReplies && this.quickReplies.length > 0 && this._renderQuickReplies();
+            const i = yield this._sendMessageWithRetry(e, this.uploadedFiles);
+            this._showTypingIndicator(!1), this.addMessage(i, "ai"), this.showQuickReplies && this.quickReplies.length > 0 && this._renderQuickReplies();
           }
-        } catch (t) {
-          this._showTypingIndicator(!1), this.addMessage(this._getErrorMessage(t), "ai");
+        } catch (i) {
+          this._showTypingIndicator(!1), this.addMessage(this._getErrorMessage(i), "ai");
         } finally {
           if (this.isLoading = !1, this.button.disabled = !1, this.input.disabled = !1, this.input.focus(), this.uploadedFiles.length > 0) {
             this.uploadedFiles = [];
-            const t = this.container.querySelector(".n8n-chat-file-preview");
-            t && (t.innerHTML = "", t.style.display = "none");
+            const i = this.container.querySelector(".n8n-chat-file-preview");
+            i && (i.innerHTML = "", i.style.display = "none");
           }
         }
       }
@@ -521,13 +558,13 @@ class w {
   // ─────────────────────────────────────────────────────────────────────────
   _sendWithStreaming(e) {
     return d(this, null, function* () {
-      const t = yield this._generateEmbedToken(), i = new URLSearchParams({
+      const i = yield this._generateEmbedToken(), t = new URLSearchParams({
         message: e,
         sessionId: this.sessionId,
-        embedToken: t
+        embedToken: i
       });
-      this.visitorName && i.set("visitor_name", this.visitorName), this.visitorEmail && i.set("visitor_email", this.visitorEmail);
-      const s = `${this.apiBaseUrl}/v1/chat/${this.agentId}/stream?${i}`;
+      this.visitorName && t.set("visitor_name", this.visitorName), this.visitorEmail && t.set("visitor_email", this.visitorEmail);
+      const s = `${this.apiBaseUrl}/v1/chat/${this.agentId}/stream?${t}`;
       return new Promise((a, n) => {
         this._showTypingIndicator(!1);
         const { bubble: r, textNode: l, cursor: o, timeNode: c } = this._createStreamingBubble();
@@ -536,7 +573,7 @@ class w {
         p.onmessage = (f) => {
           try {
             const m = JSON.parse(f.data);
-            m.delta && (h += m.delta, l.textContent = h, this.messageList.scrollTop = this.messageList.scrollHeight), m.type === "done" && (p.close(), o.remove(), r.classList.remove("n8n-chat-bubble--streaming"), c.textContent = this._formatTimestamp(/* @__PURE__ */ new Date()), b = m.status || "active", this.saveToHistory(h, "ai"), b && b !== "active" && (this._startPolling(), this.addMessage(this.i18n.t("humanAgentJoined"), "ai")), this.showQuickReplies && this.quickReplies.length > 0 && this._renderQuickReplies(), a(h));
+            m.delta && (h += m.delta, l.textContent = h, this.messageList.scrollTop = this.messageList.scrollHeight), m.type === "done" && (p.close(), o.remove(), r.classList.remove("n8n-chat-bubble--streaming"), c.textContent = this._formatTimestamp(/* @__PURE__ */ new Date()), l.innerHTML = this._renderMarkdown(h), b = m.status || "active", this.saveToHistory(h, "ai"), b && b !== "active" && (this._startPolling(), this._showHandoffBanner(!0), this.addMessage(this.i18n.t("humanAgentJoined"), "ai")), this.showQuickReplies && this.quickReplies.length > 0 && this._renderQuickReplies(), a(h));
           } catch (m) {
           }
         }, p.onerror = () => {
@@ -549,14 +586,14 @@ class w {
   // POST with retry (agent-api mode + legacy mode)
   // ─────────────────────────────────────────────────────────────────────────
   _sendMessageWithRetry(s) {
-    return d(this, arguments, function* (e, t = [], i = 0) {
+    return d(this, arguments, function* (e, i = [], t = 0) {
       try {
         const a = new AbortController(), n = setTimeout(() => a.abort(), this.requestTimeout), r = new FormData();
         if (r.append("sessionId", this.sessionId), r.append("message", e), this._agentMode) {
           const c = yield this._generateEmbedToken();
           r.append("embedToken", c), this.visitorName && r.append("visitor_name", this.visitorName), this.visitorEmail && r.append("visitor_email", this.visitorEmail);
         } else this.embedToken && r.append("embedToken", this.embedToken);
-        t.forEach((c, h) => {
+        i.forEach((c, h) => {
           r.append(`file${h}`, c);
         });
         const l = yield fetch(this.webhookUrl, {
@@ -565,39 +602,39 @@ class w {
           signal: a.signal
         });
         if (clearTimeout(n), !l.ok) {
-          if (l.status >= 500 && i < this.maxRetries)
-            return yield this._delay(this.retryDelay * (i + 1)), this._sendMessageWithRetry(e, t, i + 1);
+          if (l.status >= 500 && t < this.maxRetries)
+            return yield this._delay(this.retryDelay * (t + 1)), this._sendMessageWithRetry(e, i, t + 1);
           const c = yield l.json().catch(() => ({}));
           throw new Error(c.message || `Network error: ${l.statusText}`);
         }
         const o = yield l.json();
         if (!o.response)
           throw new Error(this.i18n.t("errorInvalidResponse"));
-        return o.status && o.status !== "active" && this.pollingUrl ? (this._startPolling(), this.addMessage(this.i18n.t("humanAgentJoined"), "ai")) : this._stopPolling(), o.response;
+        return o.status && o.status !== "active" && this.pollingUrl ? (this._startPolling(), this._showHandoffBanner(!0), this.addMessage(this.i18n.t("humanAgentJoined"), "ai")) : this._stopPolling(), o.response;
       } catch (a) {
         if (a.name === "AbortError")
           throw new Error(this.i18n.t("errorTimeout"));
-        if ((a.message.includes("NetworkError") || a.message.includes("Failed to fetch")) && i < this.maxRetries)
-          return yield this._delay(this.retryDelay * (i + 1)), this._sendMessageWithRetry(e, t, i + 1);
+        if ((a.message.includes("NetworkError") || a.message.includes("Failed to fetch")) && t < this.maxRetries)
+          return yield this._delay(this.retryDelay * (t + 1)), this._sendMessageWithRetry(e, i, t + 1);
         throw a;
       }
     });
   }
   _delay(e) {
-    return new Promise((t) => setTimeout(t, e));
+    return new Promise((i) => setTimeout(i, e));
   }
   _getErrorMessage(e) {
-    const t = e.message || "";
-    return t.includes("timeout") || t.includes("Timeout") ? this.i18n.t("errorTimeout") : t.includes("NetworkError") || t.includes("Failed to fetch") ? this.i18n.t("errorNetwork") : t.includes("500") || t.includes("503") ? this.i18n.t("errorServer") : t === this.i18n.t("streamingError") ? t : this.i18n.t("errorGeneric");
+    const i = e.message || "";
+    return i.includes("timeout") || i.includes("Timeout") ? this.i18n.t("errorTimeout") : i.includes("NetworkError") || i.includes("Failed to fetch") ? this.i18n.t("errorNetwork") : i.includes("500") || i.includes("503") ? this.i18n.t("errorServer") : i === this.i18n.t("streamingError") ? i : this.i18n.t("errorGeneric");
   }
   // ─────────────────────────────────────────────────────────────────────────
   // Rate limiting
   // ─────────────────────────────────────────────────────────────────────────
   _checkRateLimit() {
     const e = Date.now();
-    if (this.messageTimes = this.messageTimes.filter((t) => e - t < this.rateLimitWindow), this.messageTimes.length >= this.rateLimit) {
-      const t = Math.ceil((this.rateLimitWindow - (e - this.messageTimes[0])) / 1e3);
-      throw new Error(this.i18n.t("errorRateLimit", { seconds: t }));
+    if (this.messageTimes = this.messageTimes.filter((i) => e - i < this.rateLimitWindow), this.messageTimes.length >= this.rateLimit) {
+      const i = Math.ceil((this.rateLimitWindow - (e - this.messageTimes[0])) / 1e3);
+      throw new Error(this.i18n.t("errorRateLimit", { seconds: i }));
     }
     this.messageTimes.push(e);
   }
@@ -606,15 +643,15 @@ class w {
   // ─────────────────────────────────────────────────────────────────────────
   _renderQuickReplies(e = this.quickReplies) {
     if (!this.showQuickReplies || e.length === 0) return;
-    const t = this.messageList.querySelector(".n8n-chat-quick-replies");
-    t && t.remove();
-    const i = document.createElement("div");
-    i.className = "n8n-chat-quick-replies", e.forEach((s) => {
+    const i = this.messageList.querySelector(".n8n-chat-quick-replies");
+    i && i.remove();
+    const t = document.createElement("div");
+    t.className = "n8n-chat-quick-replies", e.forEach((s) => {
       const a = document.createElement("button");
       a.className = "n8n-chat-quick-reply-btn", a.textContent = s, a.addEventListener("click", () => {
-        this.input.value = s, this.sendMessage(), i.remove();
-      }), i.appendChild(a);
-    }), this.messageList.appendChild(i), this.messageList.scrollTop = this.messageList.scrollHeight;
+        this.input.value = s, this.sendMessage(), t.remove();
+      }), t.appendChild(a);
+    }), this.messageList.appendChild(t), this.messageList.scrollTop = this.messageList.scrollHeight;
   }
   // ─────────────────────────────────────────────────────────────────────────
   // Notification badge
@@ -638,19 +675,19 @@ class w {
       try {
         const e = localStorage.getItem(this.historyKey);
         if (!e) return;
-        JSON.parse(e).forEach((t) => {
-          this.addMessageWithoutSaving(t.text, t.sender, new Date(t.timestamp));
+        JSON.parse(e).forEach((i) => {
+          this.addMessageWithoutSaving(i.text, i.sender, new Date(i.timestamp));
         });
       } catch (e) {
         console.warn("Failed to load chat history:", e);
       }
   }
-  saveToHistory(e, t, i = /* @__PURE__ */ new Date()) {
+  saveToHistory(e, i, t = /* @__PURE__ */ new Date()) {
     if (this.enableHistory)
       try {
         const s = localStorage.getItem(this.historyKey);
         let a = s ? JSON.parse(s) : [];
-        a.push({ text: e, sender: t, timestamp: i.toISOString() }), a.length > this.maxHistoryItems && (a = a.slice(-this.maxHistoryItems)), localStorage.setItem(this.historyKey, JSON.stringify(a));
+        a.push({ text: e, sender: i, timestamp: t.toISOString() }), a.length > this.maxHistoryItems && (a = a.slice(-this.maxHistoryItems)), localStorage.setItem(this.historyKey, JSON.stringify(a));
       } catch (s) {
         console.warn("Failed to save chat history:", s);
       }
@@ -662,8 +699,8 @@ class w {
     try {
       const e = localStorage.getItem(this.stateKey);
       if (e) {
-        const t = JSON.parse(e);
-        this._bubbleDismissed = this.showBubbleOnce && t.bubbleDismissed || !1;
+        const i = JSON.parse(e);
+        this._bubbleDismissed = this.showBubbleOnce && i.bubbleDismissed || !1;
       }
     } catch (e) {
       console.warn("Failed to load chat state:", e);
@@ -694,8 +731,8 @@ class w {
     if (!this.container) return;
     const e = this.container.querySelector(".n8n-chat-offline-indicator");
     if (!this.isOnline && !e) {
-      const t = document.createElement("div");
-      t.className = "n8n-chat-offline-indicator", t.innerHTML = `
+      const i = document.createElement("div");
+      i.className = "n8n-chat-offline-indicator", i.innerHTML = `
         <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
           <line x1="1" y1="1" x2="23" y2="23"></line>
           <path d="M16.72 11.06A10.94 10.94 0 0 1 19 12.55"></path>
@@ -706,7 +743,7 @@ class w {
           <line x1="12" y1="20" x2="12.01" y2="20"></line>
         </svg>
         <span>${this.i18n.t("offline")}</span>
-      `, this.container.insertBefore(t, this.messageList);
+      `, this.container.insertBefore(i, this.messageList);
     } else this.isOnline && e && e.remove();
     this.button && (this.button.disabled = !this.isOnline || this.isLoading);
   }
@@ -718,10 +755,10 @@ class w {
       e.key === "Escape" && this.isOpen && this.mode === "widget" && this.toggleChatWindow();
     }), this.container.addEventListener("keydown", (e) => {
       if (e.key !== "Tab") return;
-      const t = this.container.querySelectorAll(
+      const i = this.container.querySelectorAll(
         'button:not([disabled]), input:not([disabled]), [tabindex]:not([tabindex="-1"])'
-      ), i = t[0], s = t[t.length - 1];
-      e.shiftKey && document.activeElement === i ? (e.preventDefault(), s.focus()) : !e.shiftKey && document.activeElement === s && (e.preventDefault(), i.focus());
+      ), t = i[0], s = i[i.length - 1];
+      e.shiftKey && document.activeElement === t ? (e.preventDefault(), s.focus()) : !e.shiftKey && document.activeElement === s && (e.preventDefault(), t.focus());
     });
   }
   // ─────────────────────────────────────────────────────────────────────────
@@ -736,24 +773,42 @@ class w {
             const s = yield this._generateEmbedToken();
             e.searchParams.set("embedToken", s);
           } else this.embedToken && e.searchParams.set("embedToken", this.embedToken);
-          const t = yield fetch(e.toString());
-          if (!t.ok) return;
-          const i = yield t.json();
-          if (i.messages && i.messages.length > 0) {
-            i.messages.forEach((a) => {
+          const i = yield fetch(e.toString());
+          if (!i.ok) return;
+          const t = yield i.json();
+          if (t.messages && t.messages.length > 0) {
+            t.messages.forEach((a) => {
               a.role === "human_agent" && this.addMessage(a.content, "ai");
             });
-            const s = i.messages[i.messages.length - 1];
-            this._lastMessageTimestamp = s.created_at, this.isOpen || (this.unreadCount += i.messages.filter((a) => a.role === "human_agent").length, this._updateUnreadBadge());
+            const s = t.messages[t.messages.length - 1];
+            this._lastMessageTimestamp = s.created_at, this.isOpen || (this.unreadCount += t.messages.filter((a) => a.role === "human_agent").length, this._updateUnreadBadge());
           }
-          (i.status === "active" || i.status === "resolved") && this._stopPolling();
+          (t.status === "active" || t.status === "resolved") && this._stopPolling();
         } catch (e) {
         }
       }), this.pollingInterval));
     });
   }
   _stopPolling() {
-    this._pollingTimer && (clearInterval(this._pollingTimer), this._pollingTimer = null);
+    this._pollingTimer && (clearInterval(this._pollingTimer), this._pollingTimer = null, this._showHandoffBanner(!1));
+  }
+  /**
+   * Show or hide the "Waiting for a human agent" banner above the message list.
+   * @param {boolean} show - true to show, false to remove.
+   */
+  _showHandoffBanner(e) {
+    if (!this.messageList) return;
+    const i = this.messageList.parentElement;
+    if (!i) return;
+    const t = i.querySelector(".pindai-chat-handoff-banner");
+    if (e && !t) {
+      const s = document.createElement("div");
+      s.className = "pindai-chat-handoff-banner";
+      const a = document.createElement("span");
+      a.className = "pindai-chat-handoff-pulse";
+      const n = document.createElement("span");
+      n.textContent = this.i18n.t("waitingForAgent"), s.appendChild(a), s.appendChild(n), i.insertBefore(s, this.messageList);
+    } else !e && t && t.remove();
   }
   // ─────────────────────────────────────────────────────────────────────────
   // Legacy aliases (keep public API stable)
@@ -773,8 +828,8 @@ class w {
   renderFilePreview(e) {
     return this._renderFilePreview(e);
   }
-  sendMessageWithRetry(e, t, i) {
-    return this._sendMessageWithRetry(e, t, i);
+  sendMessageWithRetry(e, i, t) {
+    return this._sendMessageWithRetry(e, i, t);
   }
   checkRateLimit() {
     return this._checkRateLimit();