@paramms/chat-widget 1.0.34 → 1.0.36

package/dist/index.d.ts

@@ -47,6 +47,10 @@ export interface MountOptions {
     subject?: WidgetConfig['subject'];
     quickReplies?: string[];
     accent?: string;
+    /** Stack navigation: when set, the chatroom header shows a back chevron that
+     *  calls this. Used by `<ChatApp>` so tapping a conversation opens the room and
+     *  the back arrow returns to the list — native-app style. */
+    onBack?: () => void;
     /** If set, shows a 🌐 translate button on incoming messages that translates
      *  them into this language (ISO code or language name) via the server's
      *  /translate endpoint. Omit to disable the feature. */

package/dist/index.js

@@ -74,6 +74,8 @@ const oe = "objectchat-widget-styles", Ce = ["👍", "❤️", "😂", "😮", "
 [dir="rtl"] .ocw-input { flex-direction:row-reverse; }
 [dir="rtl"] .mine .ocw-meta { text-align:left; }
 .ocw-head { display:flex; align-items:center; gap:10px; padding:12px 14px; background:var(--ocw-card); border-bottom:1px solid var(--ocw-line); }
+.ocw-back { flex:none; width:30px; height:30px; margin:-2px -2px -2px -4px; border:none; background:none; color:var(--ocw-ink); font-size:26px; line-height:1; cursor:pointer; border-radius:50%; display:flex; align-items:center; justify-content:center; }
+.ocw-back:hover { background:var(--ocw-bg); }
 .ocw-avatar { width:34px; height:34px; border-radius:50%; background:#ffe9d6; display:flex; align-items:center; justify-content:center; font-size:17px; flex:none; }
 .ocw-head-main { flex:1; min-width:0; }
 .ocw-head-name { font-weight:700; font-size:15px; }
@@ -294,58 +296,63 @@ class Ee {
     y(this, "translationCache", /* @__PURE__ */ new Map());
     y(this, "showingTranslation", /* @__PURE__ */ new Set());
     y(this, "subjectBuilt", !1);
-    var g, h, I, T, $, A, z, P, k;
+    var m, h, I, T, $, A, P, z, k;
     this.root = e, this.me = i, this.h = s, this.cfg = a, Ie(), e.replaceChildren(), e.classList.add("ocw"), a.accent && e.style.setProperty("--ocw-accent", a.accent);
-    const c = t("div", "ocw-head"), f = t("div", "ocw-avatar");
-    if ((g = a.userInfo) != null && g.avatar) {
-      const m = document.createElement("img");
-      m.src = a.userInfo.avatar, m.alt = a.userInfo.name ?? "You", m.style.cssText = "width:100%;height:100%;border-radius:50%;object-fit:cover", f.append(m);
+    const c = t("div", "ocw-head");
+    if (this.h.onBack) {
+      const x = t("button", "ocw-back", "‹");
+      x.type = "button", x.setAttribute("aria-label", "Back"), x.addEventListener("click", () => this.h.onBack()), c.append(x);
+    }
+    const f = t("div", "ocw-avatar");
+    if ((m = a.userInfo) != null && m.avatar) {
+      const x = document.createElement("img");
+      x.src = a.userInfo.avatar, x.alt = a.userInfo.name ?? "You", x.style.cssText = "width:100%;height:100%;border-radius:50%;object-fit:cover", f.append(x);
     } else
       f.textContent = (h = a.userInfo) != null && h.name ? a.userInfo.name[0].toUpperCase() : "🧑";
     c.append(f);
     const b = t("div", "ocw-head-main");
-    this.headerName = t("div", "ocw-head-name", ((I = a.subject) == null ? void 0 : I.ownerLabel) ?? ((T = a.subject) == null ? void 0 : T.title) ?? ""), b.append(this.headerName), ($ = a.subject) != null && $.subtitle && b.append(t("div", "ocw-head-meta", a.subject.subtitle)), c.append(b), this.statusBadge = t("span", "ocw-badge", ((A = a.subject) == null ? void 0 : A.status) ?? ""), (z = a.subject) != null && z.status || (this.statusBadge.style.display = "none"), c.append(this.statusBadge), this.e2eBadge = t("span", "ocw-e2e", "🔒 E2E"), this.e2eBadge.style.display = "none", c.append(this.e2eBadge), this.connStatus = t("span", "ocw-conn-status"), this.connStatus.style.display = "none", c.append(this.connStatus), this.cobrowseBtn = t("button", "ocw-menu ocw-cobrowse-btn", "🖍"), this.cobrowseBtn.title = "Shared whiteboard — draw to point things out together", this.cobrowseBtn.addEventListener("click", () => {
+    this.headerName = t("div", "ocw-head-name", ((I = a.subject) == null ? void 0 : I.ownerLabel) ?? ((T = a.subject) == null ? void 0 : T.title) ?? ""), b.append(this.headerName), ($ = a.subject) != null && $.subtitle && b.append(t("div", "ocw-head-meta", a.subject.subtitle)), c.append(b), this.statusBadge = t("span", "ocw-badge", ((A = a.subject) == null ? void 0 : A.status) ?? ""), (P = a.subject) != null && P.status || (this.statusBadge.style.display = "none"), c.append(this.statusBadge), this.e2eBadge = t("span", "ocw-e2e", "🔒 E2E"), this.e2eBadge.style.display = "none", c.append(this.e2eBadge), this.connStatus = t("span", "ocw-conn-status"), this.connStatus.style.display = "none", c.append(this.connStatus), this.cobrowseBtn = t("button", "ocw-menu ocw-cobrowse-btn", "🖍"), this.cobrowseBtn.title = "Shared whiteboard — draw to point things out together", this.cobrowseBtn.addEventListener("click", () => {
       this.cobrowseActive = !this.cobrowseActive, this.updateCobrowseUI();
     }), c.append(this.cobrowseBtn), c.append(t("button", "ocw-menu", "⋯")), this.chips = t("div", "ocw-chiprow"), this.scroll = t("div", "ocw-scroll"), this.subjectCard = t("div", "ocw-subject"), this.typing = t("div", "ocw-typing");
     const d = t("div", "ocw-typing-bubble");
     d.append(t("div", "ocw-typing-dot"), t("div", "ocw-typing-dot"), t("div", "ocw-typing-dot")), this.typing.append(t("div", "ocw-dot", "🧑"), d), this.quick = t("div", "ocw-quick");
-    for (const m of a.quickReplies ?? []) {
-      const S = t("button", void 0, m);
+    for (const x of a.quickReplies ?? []) {
+      const S = t("button", void 0, x);
       S.addEventListener("click", () => {
-        this.h.onSend(m), this.quick.style.display = "none";
+        this.h.onSend(x), this.quick.style.display = "none";
       }), this.quick.append(S);
     }
     this.formHost = t("div", "ocw-form-host"), this.csatPanel = t("div", "ocw-csat"), this.csatPanel.style.display = "none", this.offlinePanel = t("div", "ocw-offline"), this.offlinePanel.style.display = "none", this.preChatPanel = t("div", "ocw-prechat"), this.preChatPanel.style.display = "none", this.deflectPanel = t("div", "ocw-deflect"), this.deflectPanel.style.display = "none", this.input = t("textarea", void 0), this.input.rows = 1, this.input.placeholder = "Message…";
-    const w = t("button", "ocw-sendbtn", ((P = a.i18n) == null ? void 0 : P.send) ?? "➤");
+    const w = t("button", "ocw-sendbtn", ((z = a.i18n) == null ? void 0 : z.send) ?? "➤");
     w.addEventListener("click", () => this.flushSend()), this.input.addEventListener("input", () => {
-      var m, S;
-      this.storeRef && !this.storeRef.messages().some((B) => B.senderRole === "guest") ? (S = (m = this.h).onDeflectQuery) == null || S.call(m, this.input.value) : this.hideDeflection();
-    }), this.input.addEventListener("keydown", (m) => {
-      m.isComposing || m.keyCode === 229 || (m.key === "Enter" && !m.shiftKey ? (m.preventDefault(), this.flushSend()) : this.signalTyping());
+      var x, S;
+      this.storeRef && !this.storeRef.messages().some((B) => B.senderRole === "guest") ? (S = (x = this.h).onDeflectQuery) == null || S.call(x, this.input.value) : this.hideDeflection();
+    }), this.input.addEventListener("keydown", (x) => {
+      x.isComposing || x.keyCode === 229 || (x.key === "Enter" && !x.shiftKey ? (x.preventDefault(), this.flushSend()) : this.signalTyping());
     });
     const v = t("button", "ocw-attach", "📎");
     v.title = "Attach image or file";
     const r = document.createElement("input");
     r.type = "file", r.accept = "image/*,.pdf,.txt,.doc,.docx", r.style.display = "none", v.addEventListener("click", () => r.click()), r.addEventListener("change", () => {
-      var m;
-      (m = r.files) != null && m[0] && this.h.onAttach && this.h.onAttach(r.files[0]), r.value = "";
+      var x;
+      (x = r.files) != null && x[0] && this.h.onAttach && this.h.onAttach(r.files[0]), r.value = "";
     });
     const u = t("div", "ocw-input");
     u.append(v, r, this.input, w);
     const l = t("div", "ocw-footer");
     ((k = a.i18n) == null ? void 0 : k.poweredBy) !== void 0 ? l.textContent = a.i18n.poweredBy : l.innerHTML = 'Powered by <a href="https://relay.paramms.com" target="_blank" rel="noopener">Relay</a>', this.footer = l, e.append(c, this.chips, this.scroll, this.typing, this.quick, this.formHost, this.csatPanel, this.offlinePanel, this.preChatPanel, this.deflectPanel, u, this.footer), this.cobrowseCanvas = t("canvas", "ocw-cobrowse-canvas"), this.cobrowseToolbar = t("div", "ocw-cobrowse-toolbar");
-    for (const m of ["#f5713c", "#1c1b1a", "#2563eb", "#16a34a", "#dc2626"]) {
+    for (const x of ["#f5713c", "#1c1b1a", "#2563eb", "#16a34a", "#dc2626"]) {
       const S = t("button", "ocw-cobrowse-swatch");
-      S.style.background = m, S.type = "button", m === this.cobrowseColor && S.classList.add("sel"), S.addEventListener("click", () => {
-        this.cobrowseColor = m;
+      S.style.background = x, S.type = "button", x === this.cobrowseColor && S.classList.add("sel"), S.addEventListener("click", () => {
+        this.cobrowseColor = x;
         for (const B of this.cobrowseToolbar.querySelectorAll(".ocw-cobrowse-swatch")) B.classList.remove("sel");
         S.classList.add("sel");
       }), this.cobrowseToolbar.append(S);
     }
     const C = t("button", "ocw-cobrowse-clear", "Clear");
     C.addEventListener("click", () => {
-      var m, S;
-      return (S = (m = this.h).onAnnotateClear) == null ? void 0 : S.call(m);
+      var x, S;
+      return (S = (x = this.h).onAnnotateClear) == null ? void 0 : S.call(x);
     }), this.cobrowseToolbar.append(C), this.cobrowseHint = t("div", "ocw-cobrowse-hint", "🖍 Draw to point things out — visible to both sides"), e.append(this.cobrowseCanvas, this.cobrowseToolbar, this.cobrowseHint), this.bindCobrowsePointerEvents();
   }
   /** Returns the scroll container so history.ts can attach scroll listeners. */
@@ -377,7 +384,7 @@ class Ee {
     this.h.onTyping(!0, e), this.typingTimer && clearTimeout(this.typingTimer), this.typingTimer = setTimeout(() => this.h.onTyping(!1), 2e3);
   }
   render(e) {
-    var r, u, l, C, g;
+    var r, u, l, C, m;
     if (this.storeRef = e, this.cobrowseBtn.classList.toggle("show", !!e.subject), !e.subject && this.cobrowseActive && (this.cobrowseActive = !1, this.updateCobrowseUI()), this.cobrowseActive && e.annotationVersion !== this.lastAnnotationVersion && (this.lastAnnotationVersion = e.annotationVersion, this.resizeCobrowseCanvas(), this.redrawCobrowse()), e.accent && this.root.style.setProperty("--ocw-accent", e.accent), this.e2eBadge.style.display = e.e2e ? "inline-flex" : "none", this.buildSubjectCard(e), e.subject) {
       const h = (r = this.cfg.subject) == null ? void 0 : r.ownerLabel;
       h && (this.headerName.textContent = h);
@@ -400,7 +407,7 @@ class Ee {
     const b = this.typing.querySelector(".ocw-typing-bubble");
     b && b.setAttribute("aria-label", f.length ? "typing" : ""), this.footer.style.display = e.whiteLabel ? "none" : "block";
     const d = e.messages().some((h) => h.senderRole === "guest");
-    !!((u = e.preChat) != null && u.enabled) && !this.preChatDone && !d && (e.preChat.showWhen !== "offline" || e.offline) ? (this.preChatBuilt || this.buildPreChatPanel(e.preChat), this.preChatPanel.style.display = "block", this.offlinePanel.style.display = "none", (l = this.root.querySelector(".ocw-input")) == null || l.style.setProperty("display", "none")) : (this.preChatPanel.style.display = "none", e.offline ? (this.offlinePanel.style.display === "none" && this.buildOfflinePanel(e.offlineMessage), this.offlinePanel.style.display = "block", (C = this.root.querySelector(".ocw-input")) == null || C.style.setProperty("display", "none")) : (this.offlinePanel.style.display = "none", (g = this.root.querySelector(".ocw-input")) == null || g.style.removeProperty("display")));
+    !!((u = e.preChat) != null && u.enabled) && !this.preChatDone && !d && (e.preChat.showWhen !== "offline" || e.offline) ? (this.preChatBuilt || this.buildPreChatPanel(e.preChat), this.preChatPanel.style.display = "block", this.offlinePanel.style.display = "none", (l = this.root.querySelector(".ocw-input")) == null || l.style.setProperty("display", "none")) : (this.preChatPanel.style.display = "none", e.offline ? (this.offlinePanel.style.display === "none" && this.buildOfflinePanel(e.offlineMessage), this.offlinePanel.style.display = "block", (C = this.root.querySelector(".ocw-input")) == null || C.style.setProperty("display", "none")) : (this.offlinePanel.style.display = "none", (m = this.root.querySelector(".ocw-input")) == null || m.style.removeProperty("display")));
     const v = ["resolved", "closed", "sold", "issued", "checked_out"];
     this.h.onCsat && !this.csatSubmitted && v.includes(e.state) && e.messages().length > 0 && (this.csatPanel.style.display === "none" && this.buildCsatPanel(), this.csatPanel.style.display = "block");
   }
@@ -456,7 +463,7 @@ Message: ${c.value}`), this.offlinePanel.replaceChildren(t("div", "ocw-offline-t
     }
     const b = t("button", "ocw-offline-submit", "Start chat");
     b.addEventListener("click", () => {
-      var u, l, C, g, h, I, T;
+      var u, l, C, m, h, I, T;
       const w = (u = s.email) == null ? void 0 : u.value.trim();
       if (s.email && (!w || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(w))) {
         s.email.focus();
@@ -467,7 +474,7 @@ Message: ${c.value}`), this.offlinePanel.replaceChildren(t("div", "ocw-offline-t
         (C = s.phone ?? f) == null || C.focus();
         return;
       }
-      if (a && ((g = e.topics) != null && g.length) && !a.value) {
+      if (a && ((m = e.topics) != null && m.length) && !a.value) {
         a.focus();
         return;
       }
@@ -656,10 +663,10 @@ Message: ${c.value}`), this.offlinePanel.replaceChildren(t("div", "ocw-offline-t
     } else if (e.content.kind === "appointment") {
       const u = e.content, l = t("div", "ocw-appt");
       l.append(t("div", "ocw-appt-title", `📅 ${u.title}`)), l.append(t("div", "ocw-appt-time", new Date(u.startIso).toLocaleString() + " – " + new Date(u.endIso).toLocaleTimeString())), u.location && l.append(t("div", "ocw-appt-loc", `📍 ${u.location}`)), u.description && l.append(t("div", "ocw-appt-desc", u.description));
-      const C = t("div", "ocw-appt-links"), g = document.createElement("a");
-      g.href = u.googleUrl, g.target = "_blank", g.rel = "noopener", g.className = "ocw-appt-btn", g.textContent = "📅 Add to Google Calendar";
+      const C = t("div", "ocw-appt-links"), m = document.createElement("a");
+      m.href = u.googleUrl, m.target = "_blank", m.rel = "noopener", m.className = "ocw-appt-btn", m.textContent = "📅 Add to Google Calendar";
       const h = document.createElement("a");
-      h.href = u.icalUrl, h.download = `${u.title}.ics`, h.className = "ocw-appt-btn ocw-appt-btn-sec", h.textContent = "🍎 Apple / iCal", C.append(g, h), l.append(C), d.append(l);
+      h.href = u.icalUrl, h.download = `${u.title}.ics`, h.className = "ocw-appt-btn ocw-appt-btn-sec", h.textContent = "🍎 Apple / iCal", C.append(m, h), l.append(C), d.append(l);
     } else
       w = document.createTextNode(W(e.content)), d.append(w), e.editedAt && d.append(t("span", "ocw-edited", "(edited)"));
     if (b.append(d), !s && !a && this.h.onTranslate && e.content.kind === "text" && !e.deletedAt && e.seq > 0 && w) {
@@ -671,9 +678,9 @@ Message: ${c.value}`), this.offlinePanel.replaceChildren(t("div", "ocw-offline-t
             this.showingTranslation.delete(e.id), w.textContent = u, l.textContent = "🌐", l.title = "Translate";
             return;
           }
-          const g = this.translationCache.get(e.id);
-          if (g !== void 0) {
-            this.showingTranslation.add(e.id), w.textContent = g, l.textContent = "↩", l.title = "Show original";
+          const m = this.translationCache.get(e.id);
+          if (m !== void 0) {
+            this.showingTranslation.add(e.id), w.textContent = m, l.textContent = "↩", l.title = "Show original";
             return;
           }
           l.textContent = "⏳", this.h.onTranslate(u).then((h) => {
@@ -694,8 +701,8 @@ Message: ${c.value}`), this.offlinePanel.replaceChildren(t("div", "ocw-offline-t
         const l = t("button", void 0, "✏️");
         l.title = "Edit", l.addEventListener("click", (C) => {
           C.stopPropagation();
-          const g = W(e.content), h = document.createElement("textarea");
-          h.value = g, h.rows = Math.min(4, Math.ceil(g.length / 40) + 1), h.style.cssText = "width:100%;resize:vertical;border:1px solid var(--ocw-accent);border-radius:8px;padding:6px 10px;font:inherit;font-size:14px;background:#fff;color:#1c1b1a;box-sizing:border-box";
+          const m = W(e.content), h = document.createElement("textarea");
+          h.value = m, h.rows = Math.min(4, Math.ceil(m.length / 40) + 1), h.style.cssText = "width:100%;resize:vertical;border:1px solid var(--ocw-accent);border-radius:8px;padding:6px 10px;font:inherit;font-size:14px;background:#fff;color:#1c1b1a;box-sizing:border-box";
           const I = t("button", "ocw-form-submit", "Save");
           I.style.cssText = "margin-top:6px;padding:5px 14px;font-size:13px";
           const T = t("button", "ocw-form-cancel", "Cancel");
@@ -704,12 +711,12 @@ Message: ${c.value}`), this.offlinePanel.replaceChildren(t("div", "ocw-offline-t
           $.style.cssText = "display:flex;gap:6px;justify-content:flex-end", $.append(T, I);
           const A = t("div");
           A.append(h, $), d.replaceChildren(A), h.focus(), h.select();
-          const z = () => d.replaceChildren(w ?? document.createTextNode(g));
-          T.addEventListener("click", z), I.addEventListener("click", () => {
-            const P = h.value.trim();
-            P && P !== g && this.h.onEdit(e.id, P), z();
-          }), h.addEventListener("keydown", (P) => {
-            P.key === "Enter" && !P.shiftKey && (P.preventDefault(), I.click()), P.key === "Escape" && z();
+          const P = () => d.replaceChildren(w ?? document.createTextNode(m));
+          T.addEventListener("click", P), I.addEventListener("click", () => {
+            const z = h.value.trim();
+            z && z !== m && this.h.onEdit(e.id, z), P();
+          }), h.addEventListener("keydown", (z) => {
+            z.key === "Enter" && !z.shiftKey && (z.preventDefault(), I.click()), z.key === "Escape" && P();
           });
         }), u.append(l);
       }
@@ -731,31 +738,31 @@ Message: ${c.value}`), this.offlinePanel.replaceChildren(t("div", "ocw-offline-t
             return (A = ($ = this.h).onReact) == null ? void 0 : A.call($, e.id, h, I.includes(this.me));
           }), l.append(T);
         }
-      const C = t("button", "ocw-react-btn", "＋"), g = t("div", "ocw-react-picker");
+      const C = t("button", "ocw-react-btn", "＋"), m = t("div", "ocw-react-picker");
       for (const h of Ce) {
         const I = t("button", void 0, h);
         I.addEventListener("click", (T) => {
-          var A, z, P, k;
+          var A, P, z, k;
           T.stopPropagation();
-          const $ = (z = (A = e.reactions) == null ? void 0 : A[h]) == null ? void 0 : z.includes(this.me);
-          (k = (P = this.h).onReact) == null || k.call(P, e.id, h, !!$), g.style.display = "none";
-        }), g.append(I);
+          const $ = (P = (A = e.reactions) == null ? void 0 : A[h]) == null ? void 0 : P.includes(this.me);
+          (k = (z = this.h).onReact) == null || k.call(z, e.id, h, !!$), m.style.display = "none";
+        }), m.append(I);
       }
-      g.style.display = "none", C.addEventListener("click", (h) => {
-        h.stopPropagation(), g.style.display = g.style.display === "none" ? "flex" : "none";
+      m.style.display = "none", C.addEventListener("click", (h) => {
+        h.stopPropagation(), m.style.display = m.style.display === "none" ? "flex" : "none";
       }), document.addEventListener("click", () => {
-        g.style.display = "none";
-      }, { once: !0 }), l.append(C), u.append(l, g), f.append(u);
+        m.style.display = "none";
+      }, { once: !0 }), l.append(C), u.append(l, m), f.append(u);
     } else e.reactions && Object.keys(e.reactions).length && f.append(t("div", "ocw-react", Object.entries(e.reactions).map(([u, l]) => `${u}${l.length}`).join(" ")));
     const v = t("div", "ocw-time ocw-meta", Se(e.ts));
     if (s && e.status) {
-      const u = t("span", `ocw-tick${e.status === "read" ? " read" : e.status === "delivered" ? " delivered" : ""}`, Pe(e.status));
+      const u = t("span", `ocw-tick${e.status === "read" ? " read" : e.status === "delivered" ? " delivered" : ""}`, ze(e.status));
       v.append(u);
     }
     return s && e.seq > 0 && i.lastReadByOthers >= e.seq && v.append(t("span", "ocw-seen", " · Seen")), f.append(v), c.append(f), c;
   }
 }
-function Pe(o) {
+function ze(o) {
   switch (o) {
     case "read":
       return "✓✓";
@@ -786,12 +793,12 @@ function Be(o) {
   let r, u = !1, l = null, C = null;
   !o.launcher && !o.el.style.height && o.el.clientHeight === 0 && (o.el.style.width = o.el.style.width || "100%", o.el.style.height = "600px");
   for (const n of v.load()) d.addOptimistic(n.clientMsgId, n.content);
-  let g = null, h = null, I = 0, T = !o.launcher;
+  let m = null, h = null, I = 0, T = !o.launcher;
   if (o.launcher) {
     const p = (o.position ?? "bottom-right").includes("right");
-    g = document.createElement("div"), g.style.cssText = `position:fixed;${p ? "right:20px" : "left:20px"};bottom:20px;z-index:9999;display:flex;flex-direction:column;align-items:${p ? "flex-end" : "flex-start"};gap:12px`;
-    const x = document.createElement("div"), E = typeof window < "u" ? window.matchMedia("(max-width: 479px)") : null, O = (q) => {
-      x.style.cssText = q ? [
+    m = document.createElement("div"), m.style.cssText = `position:fixed;${p ? "right:20px" : "left:20px"};bottom:20px;z-index:9999;display:flex;flex-direction:column;align-items:${p ? "flex-end" : "flex-start"};gap:12px`;
+    const g = document.createElement("div"), E = typeof window < "u" ? window.matchMedia("(max-width: 479px)") : null, O = (q) => {
+      g.style.cssText = q ? [
         "position:fixed",
         "inset:0",
         "width:100%",
@@ -822,7 +829,7 @@ function Be(o) {
     };
     O((E == null ? void 0 : E.matches) ?? !1);
     const N = (q) => O(q.matches);
-    E == null || E.addEventListener("change", N), l = E, C = N, o.el.style.cssText = "width:100%;height:100%;overflow:hidden", x.append(o.el);
+    E == null || E.addEventListener("change", N), l = E, C = N, o.el.style.cssText = "width:100%;height:100%;overflow:hidden", g.append(o.el);
     const L = document.createElement("button");
     L.style.cssText = [
       "width:56px;height:56px;border-radius:50%",
@@ -835,12 +842,12 @@ function Be(o) {
       L.style.transform = "scale(1.08)";
     }, L.onmouseleave = () => {
       L.style.transform = "scale(1)";
-    }, h = document.createElement("span"), h.style.cssText = "position:absolute;top:-4px;right:-4px;background:#ef4444;color:#fff;border-radius:50%;width:20px;height:20px;font-size:11px;font-weight:700;display:none;align-items:center;justify-content:center", L.append(h), g.append(x, L), document.body.append(g);
+    }, h = document.createElement("span"), h.style.cssText = "position:absolute;top:-4px;right:-4px;background:#ef4444;color:#fff;border-radius:50%;width:20px;height:20px;font-size:11px;font-weight:700;display:none;align-items:center;justify-content:center", L.append(h), m.append(g, L), document.body.append(m);
     const _ = (q) => {
-      q ? (x.style.display = "flex", requestAnimationFrame(() => {
-        x.style.opacity = "1", x.style.transform = "scale(1)";
-      })) : (x.style.opacity = "0", x.style.transform = "scale(.95)", setTimeout(() => {
-        T || (x.style.display = "none");
+      q ? (g.style.display = "flex", requestAnimationFrame(() => {
+        g.style.opacity = "1", g.style.transform = "scale(1)";
+      })) : (g.style.opacity = "0", g.style.transform = "scale(.95)", setTimeout(() => {
+        T || (g.style.display = "none");
       }, 180));
     };
     L.addEventListener("click", () => {
@@ -853,27 +860,27 @@ function Be(o) {
     T || (I++, h && (h.textContent = String(I), h.style.display = "flex"));
   }, A = () => {
     try {
-      const n = new AudioContext(), p = n.createOscillator(), x = n.createGain();
-      p.connect(x), x.connect(n.destination), p.frequency.setValueAtTime(880, n.currentTime), p.frequency.exponentialRampToValueAtTime(440, n.currentTime + 0.15), x.gain.setValueAtTime(0.3, n.currentTime), x.gain.exponentialRampToValueAtTime(1e-3, n.currentTime + 0.3), p.start(), p.stop(n.currentTime + 0.3);
+      const n = new AudioContext(), p = n.createOscillator(), g = n.createGain();
+      p.connect(g), g.connect(n.destination), p.frequency.setValueAtTime(880, n.currentTime), p.frequency.exponentialRampToValueAtTime(440, n.currentTime + 0.15), g.gain.setValueAtTime(0.3, n.currentTime), g.gain.exponentialRampToValueAtTime(1e-3, n.currentTime + 0.3), p.start(), p.stop(n.currentTime + 0.3);
     } catch {
     }
-  }, z = [], P = (n) => {
-    for (; z.length; ) {
-      const p = z.shift();
+  }, P = [], z = (n) => {
+    for (; P.length; ) {
+      const p = P.shift();
       v.add({ clientMsgId: p.clientMsgId, content: p.content, ts: Date.now() }), k.send({ type: "send", conversationId: n, clientMsgId: p.clientMsgId, content: p.content });
     }
   };
   let k;
-  const m = new me(`ocw-e2e-${o.profileId}`);
+  const x = new me(`ocw-e2e-${o.profileId}`);
   let S = !1;
   const B = [], D = [];
   let Y = !1;
   const F = (n, p) => {
-    m.sealText(p).then((x) => {
-      r && k.send({ type: "send", conversationId: r, clientMsgId: n, content: x });
+    x.sealText(p).then((g) => {
+      r && k.send({ type: "send", conversationId: r, clientMsgId: n, content: g });
     });
-  }, ie = (n, p, x) => {
-    m.sealText(p, x).then((E) => {
+  }, ie = (n, p, g) => {
+    x.sealText(p, g).then((E) => {
       r && k.send({ type: "send", conversationId: r, clientMsgId: n, content: E });
     });
   }, se = () => {
@@ -891,13 +898,13 @@ function Be(o) {
   ce.includes(le) && !o.el.dir && (o.el.dir = "rtl", o.el.style.fontFamily = o.el.style.fontFamily || "Tahoma,Arial,system-ui,sans-serif");
   const K = new ke(), V = `oc_prechat_${o.profileId}_${a.slice(-8)}`, j = new Ee(o.el, a, {
     onSend(n) {
-      const p = `cm_${Math.random().toString(36).slice(2)}`, x = { kind: "text", text: n };
-      d.addOptimistic(p, x), j.render(d), d.e2e ? m.ready ? F(p, n) : Y ? D.push({ clientMsgId: p, text: n }) : (B.push({ clientMsgId: p, text: n }), d.assignedAgentId && ae(d.assignedAgentId)) : r ? (v.add({ clientMsgId: p, content: x, ts: Date.now() }), k.send({ type: "send", conversationId: r, clientMsgId: p, content: x })) : z.push({ clientMsgId: p, content: x });
+      const p = `cm_${Math.random().toString(36).slice(2)}`, g = { kind: "text", text: n };
+      d.addOptimistic(p, g), j.render(d), d.e2e ? x.ready ? F(p, n) : Y ? D.push({ clientMsgId: p, text: n }) : (B.push({ clientMsgId: p, text: n }), d.assignedAgentId && ae(d.assignedAgentId)) : r ? (v.add({ clientMsgId: p, content: g, ts: Date.now() }), k.send({ type: "send", conversationId: r, clientMsgId: p, content: g })) : P.push({ clientMsgId: p, content: g });
     },
     async onAttach(n) {
       if (!r) return;
-      const p = `${b}/upload?name=${encodeURIComponent(n.name)}`, x = `cm_${Math.random().toString(36).slice(2)}`;
-      d.addOptimistic(x, { kind: "text", text: `📎 Uploading ${n.name}…` }), j.render(d);
+      const p = `${b}/upload?name=${encodeURIComponent(n.name)}`, g = `cm_${Math.random().toString(36).slice(2)}`;
+      d.addOptimistic(g, { kind: "text", text: `📎 Uploading ${n.name}…` }), j.render(d);
       try {
         const E = await fetch(p, {
           method: "POST",
@@ -906,9 +913,9 @@ function Be(o) {
         });
         if (!E.ok) throw new Error(`Upload failed: ${E.status}`);
         const { url: O, name: N, mime: L, size: _ } = await E.json();
-        k.send({ type: "send", conversationId: r, clientMsgId: x, content: { kind: "attachment", url: O, name: N, mime: L, size: _ } });
+        k.send({ type: "send", conversationId: r, clientMsgId: g, content: { kind: "attachment", url: O, name: N, mime: L, size: _ } });
       } catch (E) {
-        d.addOptimistic(x, { kind: "text", text: `⚠️ Upload failed: ${E.message}` }), j.render(d);
+        d.addOptimistic(g, { kind: "text", text: `⚠️ Upload failed: ${E.message}` }), j.render(d);
       }
     },
     onInvoke(n, p) {
@@ -947,7 +954,7 @@ function Be(o) {
         return;
       }
       i = setTimeout(() => {
-        fetch(`${b}/kb/search?profileId=${encodeURIComponent(o.profileId)}&q=${encodeURIComponent(p.slice(0, 200))}`).then((x) => x.ok ? x.json() : { articles: [] }).then((x) => j.showDeflection(x.articles ?? [])).catch(() => j.hideDeflection());
+        fetch(`${b}/kb/search?profileId=${encodeURIComponent(o.profileId)}&q=${encodeURIComponent(p.slice(0, 200))}`).then((g) => g.ok ? g.json() : { articles: [] }).then((g) => j.showDeflection(g.articles ?? [])).catch(() => j.hideDeflection());
       }, 350);
     },
     onReadUpTo(n) {
@@ -964,8 +971,8 @@ function Be(o) {
     onDelete(n) {
       r && k.send({ type: "delete", conversationId: r, messageId: n });
     },
-    onReact(n, p, x) {
-      r && k.send({ type: "react", conversationId: r, messageId: n, emoji: p, remove: x });
+    onReact(n, p, g) {
+      r && k.send({ type: "react", conversationId: r, messageId: n, emoji: p, remove: g });
     },
     onCsat(n) {
       r && fetch(`${b}/conversations/${r}/csat`, {
@@ -990,13 +997,14 @@ function Be(o) {
             body: JSON.stringify({ text: n, targetLang: o.translateLang })
           });
           if (!p.ok) return null;
-          const { translated: x } = await p.json();
-          return x;
+          const { translated: g } = await p.json();
+          return g;
         } catch {
           return null;
         }
       }
-    } : {}
+    } : {},
+    ...o.onBack ? { onBack: o.onBack } : {}
   }, {
     ...o.subject ? { subject: o.subject } : {},
     ...o.quickReplies ? { quickReplies: o.quickReplies } : {},
@@ -1043,45 +1051,45 @@ function Be(o) {
           for (const p of v.load())
             k.send({ type: "send", conversationId: r, clientMsgId: p.clientMsgId, content: p.content });
         }
-        we(f, a, r, d, j, b), z.length && P(r);
+        we(f, a, r, d, j, b), P.length && z(r);
       }
       if (n.type === "ack" && v.remove(n.clientMsgId), n.type === "prekeyBundle") {
-        n.bundle && (Y = !0, m.x3dhSendTo(n.bundle).then((p) => {
-          const x = [...B.splice(0), ...D.splice(0)];
-          for (const E of x) ie(E.clientMsgId, E.text, p);
+        n.bundle && (Y = !0, x.x3dhSendTo(n.bundle).then((p) => {
+          const g = [...B.splice(0), ...D.splice(0)];
+          for (const E of g) ie(E.clientMsgId, E.text, p);
           j.render(d);
         }));
         return;
       }
       if (n.type === "message" && d.e2e) {
         const p = ye(n.message.content);
-        if (p && !m.ready) {
-          m.x3dhReceiveFrom(p.x3dhIK, p.x3dhEK, p.x3dhSPK).then(async () => {
-            await m.openFrame(n), d.apply(n), j.render(d);
+        if (p && !x.ready) {
+          x.x3dhReceiveFrom(p.x3dhIK, p.x3dhEK, p.x3dhSPK).then(async () => {
+            await x.openFrame(n), d.apply(n), j.render(d);
           });
           return;
         }
       }
       if (n.type === "peerkey") {
-        m.onPeerKey(n.key).then(() => {
+        x.onPeerKey(n.key).then(() => {
           se(), j.render(d);
         });
         return;
       }
       (async () => {
-        if (d.e2e && await m.openFrame(n), d.apply(n), n.type === "message" && n.message.senderId !== a && !n.message.internal && ($(), A()), d.e2e && r && !S) {
+        if (d.e2e && await x.openFrame(n), d.apply(n), n.type === "message" && n.message.senderId !== a && !n.message.internal && ($(), A()), d.e2e && r && !S) {
           S = !0;
-          const p = await m.initX3DH();
+          const p = await x.initX3DH();
           k.send({ type: "uploadPrekeys", ...p });
-          const x = await m.begin();
-          k.send({ type: "pubkey", conversationId: r, key: x });
+          const g = await x.begin();
+          k.send({ type: "pubkey", conversationId: r, key: g });
         }
         j.render(d);
       })();
     }
   }), k.connect(), j.render(d);
   const M = o.launcher ? ne(o) : null, H = { close: () => {
-    s = !0, clearTimeout(i), k.close(), g == null || g.remove(), j.destroy(), K.destroy(), l && C && l.removeEventListener("change", C), R.delete(o.el), M && U.get(M) === H && U.delete(M);
+    s = !0, clearTimeout(i), k.close(), m == null || m.remove(), j.destroy(), K.destroy(), l && C && l.removeEventListener("change", C), R.delete(o.el), M && U.get(M) === H && U.delete(M);
   } };
   return R.set(o.el, H), M && U.set(M, H), H;
 }