@mrrocket/sdk 0.16.0 → 0.18.0

package/dist/messenger-ui.d.ts

@@ -1,5 +1,5 @@
 /**
- * The web messenger, after Crisp's: a round launcher (hovered, a small card offers "Chat" and "Search") and a panel
+ * The web messenger, after Crisp's: a round launcher (a click opens it, no card on hover) and a panel
  * with a bar on top (Home, a "Chat · Help" switch while there are both, a ⋮ menu to minimize or widen it). Home shows the greeting,
  * the latest chat and the help search; Chat is the chat with the team, answered in MRRocket › Support by the owner or
  * the Customer experience agent; Help lists the product's published help articles by collection, searchable, read in
@@ -57,8 +57,14 @@ export interface MessengerUiOptions {
     header?: "plain" | "color";
     /** "Powered by MRRocket" at the bottom; MRRocket's server says whether the plan may hide it. */
     branding?: boolean;
-    /** The product's icon at the top left of Home (MRRocket sends the product's favicon); without it the title's first letter. */
+    /** The logo at the top left of Home (MRRocket sends the uploaded logo, else the favicon); without it the title's first letter. */
     logo?: string;
+    /** The round mark in the chat's head (MRRocket sends the favicon); without it the title's first letter. */
+    icon?: string;
+    /** The AI agent's name on its answers (default "AI agent"). */
+    agentName?: string;
+    /** The AI agent's picture beside its answers. */
+    agentPhoto?: string;
     /** MRRocket's own preview: mount inside this element (positioned) instead of the page. */
     container?: HTMLElement;
     /** MRRocket's own preview: answers from here instead of the server. */
@@ -82,5 +88,7 @@ export interface MessengerHandle {
 /**
  * Mounts the messenger with its look from MRRocket (Support › Messenger) underneath what the code passes: an option the
  * code sets wins, one it leaves out comes from MRRocket, then the default. Calls made before the look arrived wait.
+ * A repeat visit starts with the look this browser saw last; a look that arrives later than that (changed, or slower
+ * than LOOK_WAIT_MS) replaces the launcher while the panel is closed, or once it closes.
  */
 export declare const mountMessenger: (o: MessengerUiOptions) => MessengerHandle;

package/dist/messenger-ui.js

@@ -13,9 +13,9 @@ var POLL_OPEN_MS = 4e3;
 var POLL_WAITING_MS = 8e3;
 var POLL_IDLE_MS = 3e4;
 var WAITING_FOR_MS = 10 * 6e4;
+var SLOW_SEND_MS = 1500;
 var EMAIL = /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/;
 var SEEN_KEY = "ckw_msgr_seen";
-var whoLabel = { visitor: "You", team: "Team", ai: "AI agent", auto: "Team" };
 var readSeen = () => {
   try {
     return window.localStorage.getItem(SEEN_KEY) ?? "";
@@ -167,20 +167,52 @@ var blockOf = (b) => {
   }
 };
 var LOOK_WAIT_MS = 2500;
+var LOOK_KEY = "ckw_msgr_look:";
+var readCachedLook = (apiKey) => {
+  try {
+    const raw = window.localStorage.getItem(LOOK_KEY + apiKey);
+    return raw ? JSON.parse(raw) : null;
+  } catch {
+    return null;
+  }
+};
+var writeCachedLook = (apiKey, look) => {
+  try {
+    window.localStorage.setItem(LOOK_KEY + apiKey, JSON.stringify(look));
+  } catch {
+  }
+};
 var mountMessenger = (o) => {
   let real = null;
+  let shown = "";
   let gone = false;
   const queued = [];
   const later = (fn) => real ? fn(real) : queued.push(fn);
   const ctrl = new AbortController();
+  const caching = !o.client && !!o.apiKey;
   const start = (look) => {
-    if (real || gone) return;
+    if (gone) return;
+    const key = JSON.stringify(look ?? {});
+    if (real && key === shown) return;
+    if (real?.isOpen()) {
+      real.onClose(() => start(look));
+      return;
+    }
+    real?.destroy();
+    shown = key;
     const defined = Object.fromEntries(Object.entries(o).filter(([, v]) => v !== void 0));
     real = build({ ...look ?? {}, ...defined, accent: o.accent ?? look?.accent, theme: o.theme ?? look?.theme, branding: look?.branding ?? true });
     for (const fn of queued.splice(0)) fn(real);
   };
-  const timer = setTimeout(() => start(null), LOOK_WAIT_MS);
-  (o.client ?? createApi({ host: o.host, apiKey: o.apiKey, distinctId: o.distinctId(), user: o.user(), userHash: o.userHash?.() })).messengerLook(ctrl.signal).then((look) => start(look)).catch(() => start(null)).finally(() => clearTimeout(timer));
+  const cached = caching ? readCachedLook(o.apiKey) : null;
+  if (cached) start(cached);
+  const timer = cached ? void 0 : setTimeout(() => start(null), LOOK_WAIT_MS);
+  (o.client ?? createApi({ host: o.host, apiKey: o.apiKey, distinctId: o.distinctId(), user: o.user(), userHash: o.userHash?.() })).messengerLook(ctrl.signal).then((look) => {
+    if (caching && look) writeCachedLook(o.apiKey, look);
+    start(look);
+  }).catch(() => {
+    if (!real) start(null);
+  }).finally(() => clearTimeout(timer));
   return {
     open: (v) => later((h) => h.open(v)),
     close: () => real?.close(),
@@ -203,6 +235,7 @@ var build = (o) => {
   const label = o.label ?? "";
   const reply = replyLine(o.replyTime);
   const initial = (title.trim()[0] ?? "?").toUpperCase();
+  const whoLabel = { visitor: "You", team: "Team", ai: o.agentName?.trim() || "AI agent", auto: "Team" };
   const launcherOn = o.launcher ?? true;
   const helpOn = o.help ?? true;
   const soundOn = o.sound ?? true;
@@ -223,11 +256,15 @@ var build = (o) => {
   o.glow?.slice(0, 2).forEach((c, i) => /^#[0-9a-f]{6}$/i.test(c) && root.style.setProperty(`--ckw-glow${i + 2}`, c));
   (o.container ?? document.body).appendChild(root);
   let open = false;
+  let afterClose = null;
   let view = "home";
   let thread = null;
   let loaded = false;
   let error = "";
-  let pending = null;
+  const sayable = (e) => e.status === 401 ? "The chat is not available right now. Please try again later." : e.message;
+  let outbox = [];
+  let outboxSeq = 0;
+  let flushing = false;
   let lastKnown = null;
   let unseen = [];
   let previewGone = false;
@@ -268,13 +305,22 @@ var build = (o) => {
     const id = lastTeamId(thread);
     if (id) writeSeen(id);
   };
-  const avatar = (size) => el("span", { class: `ckw-msgr-av${size ? " ckw-msgr-av-sm" : ""}`, "aria-hidden": "true" }, initial);
+  const letter = (size) => el("span", { class: `ckw-msgr-av${size ? " ckw-msgr-av-sm" : ""}`, "aria-hidden": "true" }, initial);
+  const avatar = (size) => {
+    if (!o.icon) return letter(size);
+    const av = el("span", { class: `ckw-msgr-av ckw-msgr-av-img${size ? " ckw-msgr-av-sm" : ""}`, "aria-hidden": "true" });
+    const img = el("img", { src: o.icon, alt: "" });
+    img.addEventListener("error", () => av.replaceWith(letter(size)));
+    av.append(img);
+    return av;
+  };
   const logo = el("span", { class: "ckw-msgr-logo", "aria-hidden": "true" });
   if (o.logo) {
     const img = el("img", { src: o.logo, alt: "" });
     img.addEventListener("error", () => logo.replaceChildren(avatar("sm")));
     logo.append(img);
   } else logo.append(avatar("sm"));
+  const agentFace = () => o.agentPhoto ? el("img", { class: "ckw-msg-face", src: o.agentPhoto, alt: "" }) : null;
   const sky = el("div", { class: "ckw-msgr-sky", "aria-hidden": "true" });
   const leaving = /* @__PURE__ */ new Map();
   const enter = (node, parent = root) => {
@@ -326,7 +372,6 @@ var build = (o) => {
   const drawPreview = () => {
     const m = unseen.at(-1);
     if (!previewShown() || !m) return leave(prev);
-    hideTeaser(true);
     const x = el("button", { type: "button", class: "ckw-msgr-preview-x", "aria-label": "Dismiss" }, icon(I.cross, 14));
     x.addEventListener("click", (e) => {
       e.stopPropagation();
@@ -347,43 +392,8 @@ var build = (o) => {
     prev.replaceChildren(card, x);
     enter(prev);
   };
-  const teaser = el("div", { class: "ckw-msgr-teaser", "data-pos": position });
-  let teaserTimer;
-  const showTeaser = () => {
-    clearTimeout(teaserTimer);
-    if (open || previewShown() || !launcherOn) return;
-    const chat = el("button", { type: "button", class: "ckw-msgr-teaser-b", "data-main": "" }, icon(I.chat), el("span", {}, "Chat"));
-    chat.addEventListener("click", () => show("messages"));
-    const buttons = [chat];
-    if (helpOn && hasArticles) {
-      const search = el("button", { type: "button", class: "ckw-msgr-teaser-b" }, icon(I.search), el("span", {}, "Search"));
-      search.addEventListener("click", () => show("help"));
-      buttons.push(search);
-    }
-    teaser.replaceChildren(
-      el(
-        "div",
-        { class: "ckw-msgr-teaser-top" },
-        el("span", { class: "ckw-msgr-teaser-t" }, el("b", {}, greeting), el("span", { class: "ckw-msgr-online" }, reply)),
-        avatar()
-      ),
-      el("div", { class: "ckw-msgr-teaser-row" }, ...buttons)
-    );
-    enter(teaser);
-  };
-  function hideTeaser(now = false) {
-    clearTimeout(teaserTimer);
-    if (now) return leave(teaser, 140);
-    teaserTimer = setTimeout(() => leave(teaser, 140), 260);
-  }
-  const hoverable = (e) => e.pointerType === "mouse";
-  for (const node of [fab, teaser]) {
-    node.addEventListener("pointerenter", (e) => hoverable(e) && (node === fab ? showTeaser() : clearTimeout(teaserTimer)));
-    node.addEventListener("pointerleave", (e) => hoverable(e) && hideTeaser());
-  }
   fab.addEventListener("click", () => {
     chime.unlock();
-    hideTeaser(true);
     if (open) close();
     else show(unseen.length ? "messages" : "home");
   });
@@ -477,7 +487,7 @@ var build = (o) => {
   };
   const form = el("form", { class: "ckw-msgr-compose" });
   const err = el("p", { class: "ckw-msgr-error", role: "alert" });
-  const email = el("input", { class: "ckw-input", type: "email", inputmode: "email", autocomplete: "email", placeholder: "Your email (optional), so we can follow up", "aria-label": "Your email (optional)", maxlength: "200" });
+  const email = el("input", { class: "ckw-input ckw-msgr-email", type: "email", inputmode: "email", autocomplete: "email", placeholder: "Email for our reply (optional)", "aria-label": "Your email (optional)", maxlength: "200", "data-1p-ignore": "", "data-lpignore": "true", "data-bwignore": "", "data-form-type": "other" });
   const row = el("div", { class: "ckw-msgr-box" });
   const text = el("textarea", { class: "ckw-textarea ckw-msgr-input", rows: "1", placeholder: "Write your message\u2026", "aria-label": "Message", maxlength: "4000" });
   const send = el("button", { type: "submit", class: "ckw-msgr-send", "aria-label": "Send" }, icon(I.up));
@@ -638,7 +648,7 @@ var build = (o) => {
   const list = el("ol", { class: "ckw-msgs", "aria-live": "polite", "aria-label": "Messages" });
   const needEmail = () => askEmail && !o.user()?.email && !thread?.hasEmail;
   const emailOk = () => !email.value.trim() || EMAIL.test(email.value.trim());
-  const canSend = () => (!!text.value.trim() || picked.length > 0) && !pending && emailOk();
+  const canSend = () => (!!text.value.trim() || picked.length > 0) && emailOk();
   const go = (v) => {
     const changed = JSON.stringify(v) !== JSON.stringify(view);
     view = v;
@@ -660,6 +670,7 @@ var build = (o) => {
     return img;
   };
   const bubble = (m, isPending = false) => {
+    const slow = isPending && Date.now() - Date.parse(m.at) >= SLOW_SEND_MS;
     const li = el("li", { class: "ckw-msg", "data-from": m.from === "visitor" ? "me" : "them" }, m.body || !m.attachments?.length ? el("div", { class: "ckw-bubble" }, m.body) : null);
     if (isPending) li.setAttribute("aria-busy", "true");
     if (m.attachments?.length)
@@ -677,7 +688,7 @@ var build = (o) => {
       chip.addEventListener("click", () => go({ article: a.id }));
       li.append(chip);
     }
-    li.append(el("span", { class: "ckw-msg-meta" }, `${m.from !== "visitor" ? `${whoLabel[m.from]} \xB7 ` : ""}${isPending ? "Sending\u2026" : timeAgo(m.at)}`));
+    li.append(el("span", { class: "ckw-msg-meta" }, m.from === "ai" ? agentFace() : null, `${m.from !== "visitor" ? `${whoLabel[m.from]} \xB7 ` : ""}${slow ? "Sending\u2026" : timeAgo(m.at)}`));
     return li;
   };
   const articleRow = (a) => {
@@ -748,7 +759,7 @@ var build = (o) => {
     askIn.value = "";
     askGo.disabled = true;
     go("messages");
-    if (canSend()) void submit();
+    if (canSend()) submit();
   });
   const drawHome = () => {
     const first = o.user()?.name?.trim().split(/\s+/)[0];
@@ -878,19 +889,19 @@ var build = (o) => {
   const drawMessages = () => {
     const msgs = thread?.messages ?? [];
     const parts = [];
-    if (!loaded) parts.push(el("div", { class: "ckw-skel" }));
-    else {
-      const sig = `${msgs.map((m) => m.id).join(",")}|${pending ? `${pending.body}+${pending.attachments?.length ?? 0}` : ""}|${Math.floor(Date.now() / 6e4)}`;
+    {
+      const waiting = outbox.map((o2) => o2.message);
+      const sig = `${msgs.map((m) => m.id).join(",")}|${waiting.map((m) => `${m.id}:${Date.now() - Date.parse(m.at) >= SLOW_SEND_MS}`).join(",")}|${Math.floor(Date.now() / 6e4)}`;
       if (sig !== listSig) {
         listSig = sig;
-        const greet = el("li", { class: "ckw-msg", "data-from": "them" }, el("div", { class: "ckw-bubble" }, greeting));
-        const items = [greet, ...msgs.map((m) => bubble(m)), ...pending ? [bubble(pending, true)] : []];
+        const greet = msgs.length || waiting.length ? [] : [el("li", { class: "ckw-msg", "data-from": "them" }, el("div", { class: "ckw-bubble" }, greeting))];
+        const items = [...greet, ...msgs.map((m) => bubble(m)), ...waiting.map((m) => bubble(m, true))];
         if (listCount >= 0) items.slice(listCount).forEach((li) => li.setAttribute("data-new", ""));
         listCount = items.length;
         list.replaceChildren(...items);
       }
       parts.push(list);
-      const top = !msgs.some((m) => m.from === "visitor") && !pending ? (articles ?? []).slice(0, 3) : [];
+      const top = !msgs.some((m) => m.from === "visitor") && !outbox.length ? (articles ?? []).slice(0, 3) : [];
       if (top.length) {
         if (suggestions.childNodes.length !== top.length)
           suggestions.replaceChildren(
@@ -903,9 +914,9 @@ var build = (o) => {
         parts.push(suggestions);
       }
     }
-    if (thread?.conversation?.status === "solved" && !pending) parts.push(el("p", { class: "ckw-fine ckw-msgr-note" }, "This conversation is closed. Write to start a new one."));
+    if (thread?.conversation?.status === "solved" && !outbox.length) parts.push(el("p", { class: "ckw-fine ckw-msgr-note" }, "This conversation is closed. Write to start a new one."));
     if (body.childNodes.length !== parts.length || parts.some((x, i) => body.childNodes[i] !== x)) body.replaceChildren(...parts);
-    const count = msgs.length + (pending ? 1 : 0);
+    const count = msgs.length + outbox.length;
     if (count !== drawn) {
       drawn = count;
       body.scrollTop = body.scrollHeight;
@@ -916,7 +927,7 @@ var build = (o) => {
     if (needEmail()) {
       if (emailOk()) email.removeAttribute("aria-invalid");
       else email.setAttribute("aria-invalid", "true");
-      if (!email.isConnected) form.insertBefore(email, tray.isConnected ? tray : row);
+      if (!email.isConnected) row.insertBefore(email, text);
     } else email.remove();
     drawTray();
     send.disabled = !canSend();
@@ -936,15 +947,18 @@ var build = (o) => {
     if (pop.childNodes.length !== kids.length || kids.some((k, i) => pop.childNodes[i] !== k)) pop.replaceChildren(...kids);
   };
   const tick = async () => {
-    ctrl?.abort();
-    ctrl = new AbortController();
+    if (ctrl) return;
+    const mine = ctrl = new AbortController();
     try {
-      take(await api().chat(ctrl.signal));
+      take(await api().chat(mine.signal));
       error = "";
     } catch (e) {
       if (e.name === "AbortError") return;
-      if (open && view === "messages") error = e.message;
+      if (open && view === "messages") error = sayable(e);
+    } finally {
+      if (ctrl === mine) ctrl = null;
     }
+    if (!loaded) listCount = -1;
     loaded = true;
     draw();
     drawFab();
@@ -963,58 +977,75 @@ var build = (o) => {
     else clearTimeout(poll);
   };
   document.addEventListener("visibilitychange", onVisible);
-  const submit = async () => {
+  const flush = async () => {
+    if (flushing) return;
+    flushing = true;
+    while (outbox.length) {
+      const { message, files, email: given } = outbox[0];
+      await Promise.all(files.map((p) => p.up));
+      const ids = files.filter((p) => p.id).map((p) => p.id);
+      try {
+        if (!message.body && !ids.length) throw new Error(error || "The file could not be sent.");
+        const sent = await api().sendChat({
+          body: message.body,
+          email: given,
+          url: window.location.href.slice(0, 500),
+          ...ids.length ? { attachments: ids } : {},
+          // A little context for a bug report; the server reads browser and system from the user agent.
+          context: { viewport: `${window.innerWidth}\xD7${window.innerHeight}` }
+        });
+        ctrl?.abort();
+        ctrl = null;
+        take(sent);
+        outbox.shift();
+        for (const p of files) {
+          localUrls.delete(p.key);
+          URL.revokeObjectURL(p.local);
+        }
+      } catch (e) {
+        const back = outbox.splice(0);
+        text.value = [...back.map((b) => b.message.body), text.value.trim()].filter(Boolean).join("\n");
+        picked = [...back.flatMap((b) => b.files.filter((p) => p.id)), ...picked];
+        for (const b of back) for (const p of b.files) localUrls.delete(p.key);
+        error = sayable(e);
+      }
+      draw();
+    }
+    flushing = false;
+    schedule();
+  };
+  const submit = () => {
     const msg = text.value.trim();
     const files = picked;
-    if (!msg && !files.length || pending || !emailOk()) return;
+    if (!msg && !files.length || !emailOk()) return;
     chime.unlock();
     for (const p of files) localUrls.set(p.key, p.local);
-    pending = {
-      id: "pending",
-      from: "visitor",
-      body: msg,
-      at: (/* @__PURE__ */ new Date()).toISOString(),
-      ...files.length ? { attachments: files.map((p) => ({ id: p.key, name: p.name, type: p.type, size: p.size })) } : {}
-    };
+    outbox.push({
+      message: {
+        id: `pending-${++outboxSeq}`,
+        from: "visitor",
+        body: msg,
+        at: (/* @__PURE__ */ new Date()).toISOString(),
+        ...files.length ? { attachments: files.map((p) => ({ id: p.key, name: p.name, type: p.type, size: p.size })) } : {}
+      },
+      files,
+      email: needEmail() && email.value.trim() ? email.value.trim() : void 0
+    });
     text.value = "";
     picked = [];
     error = "";
     draw();
-    await Promise.all(files.map((p) => p.up));
-    const ids = files.filter((p) => p.id).map((p) => p.id);
-    let sent = false;
-    try {
-      if (!msg && !ids.length) throw new Error(error || "The file could not be sent.");
-      take(
-        await api().sendChat({
-          body: msg,
-          email: needEmail() && email.value.trim() ? email.value.trim() : void 0,
-          url: window.location.href.slice(0, 500),
-          ...ids.length ? { attachments: ids } : {},
-          // A little context for a bug report; the server reads browser and system from the user agent.
-          context: { viewport: `${window.innerWidth}\xD7${window.innerHeight}` }
-        })
-      );
-      sent = true;
-    } catch (e) {
-      text.value = msg;
-      picked = files.filter((p) => p.id);
-      error = e.message;
-    }
-    pending = null;
-    for (const p of files) localUrls.delete(p.key);
-    draw();
-    if (sent) for (const p of files) URL.revokeObjectURL(p.local);
-    schedule();
+    setTimeout(draw, SLOW_SEND_MS + 50);
+    void flush();
   };
   form.addEventListener("submit", (e) => {
     e.preventDefault();
-    void submit();
+    submit();
   });
   text.addEventListener("keydown", (e) => {
     if (e.key === "Enter" && !e.shiftKey && !e.isComposing) {
       e.preventDefault();
-      void submit();
+      submit();
     }
   });
   text.addEventListener("input", () => send.disabled = !canSend());
@@ -1046,7 +1077,6 @@ var build = (o) => {
     view = v === "help" && !helpOn ? "home" : v;
     drawn = -1;
     previewGone = true;
-    hideTeaser(true);
     pop.toggleAttribute("data-still", still);
     enter(pop);
     if (was) replay(body, "ckw-msgr-enter");
@@ -1067,6 +1097,9 @@ var build = (o) => {
     drawFab();
     schedule();
     if (launcherOn) fab.focus();
+    const fn = afterClose;
+    afterClose = null;
+    if (fn) setTimeout(fn, 220);
   }
   pop.addEventListener("click", () => amenuOpen() && closeAmenu());
   const onKey = (e) => {
@@ -1088,9 +1121,12 @@ var build = (o) => {
     open: (v) => show(v ?? "home"),
     close,
     toggle: () => open ? close() : show(),
+    isOpen: () => open,
+    onClose: (fn) => {
+      afterClose = fn;
+    },
     destroy: () => {
       clearTimeout(poll);
-      clearTimeout(teaserTimer);
       for (const t of leaving.values()) clearTimeout(t);
       ctrl?.abort();
       for (const p of picked) forget(p);