@mrrocket/sdk 0.15.0 → 0.17.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
@@ -23,6 +23,8 @@ export interface MessengerUiOptions {
         name?: string;
         email?: string;
     } | undefined;
+    /** The identity hash of the visitor id now (0.16.0), when the site gave one to identify. */
+    userHash?: () => string | undefined;
     /** Show the round launcher (default true). Without it the panel opens only through `open()`. */
     launcher?: boolean;
     /** Where the launcher sits (default bottom right); the panel and the cards open from there. */
@@ -55,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. */
@@ -80,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

@@ -15,7 +15,6 @@ var POLL_IDLE_MS = 3e4;
 var WAITING_FOR_MS = 10 * 6e4;
 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 +166,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() })).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,11 +234,12 @@ 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;
   const previewOn = o.preview ?? true;
-  const api = () => o.client ?? createApi({ host: o.host, apiKey: o.apiKey, distinctId: o.distinctId(), user: o.user() });
+  const api = () => o.client ?? createApi({ host: o.host, apiKey: o.apiKey, distinctId: o.distinctId(), user: o.user(), userHash: o.userHash?.() });
   const root = el("div", {
     class: "ckw-root",
     "data-theme": o.theme ?? "auto",
@@ -223,6 +255,7 @@ 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;
@@ -268,13 +301,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 +368,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 +388,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 +483,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));
@@ -677,7 +683,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 ` : ""}${isPending ? "Sending\u2026" : timeAgo(m.at)}`));
     return li;
   };
   const articleRow = (a) => {
@@ -916,7 +922,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();
@@ -1046,7 +1052,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 +1072,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 +1096,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);