@mrrocket/sdk 0.12.0 → 0.14.0

package/dist/messenger-ui.js

@@ -40,7 +40,7 @@ var el = (tag, attrs = {}, ...kids) => {
 var SVG_NS = "http://www.w3.org/2000/svg";
 var icon = (d, size = 16) => {
   const svg = document.createElementNS(SVG_NS, "svg");
-  for (const [k, v] of Object.entries({ class: "ckw-icon", width: String(size), height: String(size), viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", "stroke-width": "1.7", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }))
+  for (const [k, v] of Object.entries({ class: "ckw-icon", width: String(size), height: String(size), viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "1.75", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }))
     svg.setAttribute(k, v);
   const path = document.createElementNS(SVG_NS, "path");
   path.setAttribute("d", d);
@@ -48,16 +48,30 @@ var icon = (d, size = 16) => {
   return svg;
 };
 var I = {
-  cross: "m4 4 8 8M12 4l-8 8",
-  chat: "M2.5 4.5a2 2 0 0 1 2-2h7a2 2 0 0 1 2 2v4.5a2 2 0 0 1-2 2H7l-3 2.5V11a2 2 0 0 1-1.5-2z",
-  send: "M2.5 8h10M8.5 3.5 13 8l-4.5 4.5",
-  up: "M8 13V3M3.5 7.5 8 3l4.5 4.5",
-  home: "M2.5 7 8 2.5 13.5 7v6a1 1 0 0 1-1 1h-3v-4h-3v4h-3a1 1 0 0 1-1-1z",
-  help: "M8 14.5A6.5 6.5 0 1 0 8 1.5a6.5 6.5 0 0 0 0 13zM6.2 6.2a1.9 1.9 0 1 1 2.6 1.8c-.5.2-.8.6-.8 1.1v.4M8 11.6v.1",
-  back: "M10 3.5 5.5 8l4.5 4.5",
-  next: "M6 3.5 10.5 8 6 12.5",
-  search: "M7 11.5a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9zM10.5 10.5l3 3",
-  doc: "M4 1.5h5.5l3 3V14a.5.5 0 0 1-.5.5H4a.5.5 0 0 1-.5-.5V2a.5.5 0 0 1 .5-.5zM9.5 1.5v3h3M6 8.5h4M6 11h4"
+  cross: "M18 6 6 18M6 6l12 12",
+  chat: "M7.9 20A9 9 0 1 0 4 16.1L2 22z",
+  send: "M5 12h14M12 5l7 7-7 7",
+  up: "M12 19V5M5 12l7-7 7 7",
+  home: "M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z",
+  back: "m15 18-6-6 6-6",
+  next: "m9 18 6-6-6-6",
+  search: "M19 11a8 8 0 1 1-16 0 8 8 0 0 1 16 0zM21 21l-4.3-4.3",
+  doc: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7zM14 2v4a2 2 0 0 0 2 2h4M10 9H8M16 13H8M16 17H8",
+  book: "M12 7v14M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z",
+  dots: "M13 12a1 1 0 1 1-2 0 1 1 0 0 1 2 0zM13 5a1 1 0 1 1-2 0 1 1 0 0 1 2 0zM13 19a1 1 0 1 1-2 0 1 1 0 0 1 2 0z",
+  expand: "M15 3h6v6M21 3l-7 7M3 21l7-7M9 21H3v-6",
+  collapse: "m14 10 7-7M20 10h-6V4M3 21l7-7M4 14h6v6",
+  minus: "M5 12h14"
+};
+var BUBBLE = "M7.9 20A9 9 0 1 0 4 16.1L2 22z";
+var filled = (d, size) => {
+  const svg = document.createElementNS(SVG_NS, "svg");
+  for (const [k, v] of Object.entries({ class: "ckw-icon", width: String(size), height: String(size), viewBox: "0 0 24 24", fill: "currentColor", stroke: "currentColor", "stroke-width": "1.5", "stroke-linejoin": "round", "aria-hidden": "true" }))
+    svg.setAttribute(k, v);
+  const path = document.createElementNS(SVG_NS, "path");
+  path.setAttribute("d", d);
+  svg.appendChild(path);
+  return svg;
 };
 var chime = /* @__PURE__ */ (() => {
   let ctx = null;
@@ -139,7 +153,7 @@ var mountMessenger = (o) => {
     for (const fn of queued.splice(0)) fn(real);
   };
   const timer = setTimeout(() => start(null), LOOK_WAIT_MS);
-  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));
+  (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));
   return {
     open: (v) => later((h) => h.open(v)),
     close: () => real?.close(),
@@ -165,13 +179,14 @@ var build = (o) => {
   const helpOn = o.help ?? true;
   const soundOn = o.sound ?? true;
   const previewOn = o.preview ?? true;
-  const api = () => 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() });
   const root = el("div", { class: "ckw-root", "data-theme": o.theme ?? "auto" });
+  if (o.container) root.setAttribute("data-contained", "");
   if (o.accent) {
     root.style.setProperty("--ckw-accent", o.accent);
     root.style.setProperty("--ckw-accent-ink", inkOn(o.accent));
   }
-  document.body.appendChild(root);
+  (o.container ?? document.body).appendChild(root);
   let open = false;
   let view = "home";
   let thread = null;
@@ -187,6 +202,8 @@ var build = (o) => {
   let query = "";
   let rated = /* @__PURE__ */ new Set();
   let hasArticles = null;
+  let collection = null;
+  let wide = false;
   const teamMsgs = (t) => (t?.messages ?? []).filter((m) => m.from !== "visitor");
   const lastTeamId = (t) => teamMsgs(t).at(-1)?.id ?? "";
   const watching = () => open && view === "messages" && document.visibilityState !== "hidden";
@@ -217,23 +234,57 @@ var build = (o) => {
     if (id) writeSeen(id);
   };
   const avatar = (size) => el("span", { class: `ckw-msgr-av${size ? " ckw-msgr-av-sm" : ""}`, "aria-hidden": "true" }, initial);
+  const leaving = /* @__PURE__ */ new Map();
+  const enter = (node, parent = root) => {
+    clearTimeout(leaving.get(node));
+    leaving.delete(node);
+    node.removeAttribute("data-out");
+    if (!node.isConnected) parent.appendChild(node);
+  };
+  const leave = (node, ms = 180) => {
+    if (!node.isConnected || leaving.has(node)) return;
+    node.setAttribute("data-out", "");
+    leaving.set(
+      node,
+      setTimeout(() => {
+        leaving.delete(node);
+        node.removeAttribute("data-out");
+        node.remove();
+      }, ms)
+    );
+  };
+  const replay = (node, cls) => {
+    node.classList.remove(cls);
+    void node.offsetWidth;
+    node.classList.add(cls);
+  };
   const fab = el("button", { type: "button", class: `ckw-fab ckw-msgr-fab${label ? "" : " ckw-msgr-round"}`, "data-pos": position, "aria-haspopup": "dialog" });
+  const fabIcons = el(
+    "span",
+    { class: "ckw-msgr-fab-ic", "aria-hidden": "true" },
+    el("span", { class: "ckw-msgr-fab-i", "data-i": "chat" }, filled(BUBBLE, label ? 20 : 28)),
+    el("span", { class: "ckw-msgr-fab-i", "data-i": "x" }, icon(I.cross, label ? 16 : 22))
+  );
+  const fabCount = el("span", { class: "ckw-msgr-count", "aria-hidden": "true" });
+  fab.append(fabIcons);
+  if (label) fab.append(el("span", {}, label));
   const prev = el("div", { class: "ckw-msgr-preview", "data-pos": position, role: "status" });
-  let fabShows = null;
   const drawFab = () => {
-    const glyph = icon(open ? I.cross : I.chat, label ? 18 : 24);
-    if (fabShows !== null && fabShows !== open) glyph.classList.add("ckw-turn");
-    fabShows = open;
-    fab.replaceChildren(glyph);
-    if (label) fab.append(el("span", {}, label));
-    if (unseen.length && !open) fab.append(el("span", { class: "ckw-msgr-count", "aria-hidden": "true" }, String(Math.min(unseen.length, 9))));
+    fab.toggleAttribute("data-open", open);
+    if (unseen.length && !open) {
+      const n = String(Math.min(unseen.length, 9));
+      if (fabCount.textContent !== n) fabCount.textContent = n;
+      if (!fabCount.isConnected) fab.append(fabCount);
+    } else fabCount.remove();
     fab.setAttribute("aria-expanded", String(open));
     fab.setAttribute("aria-label", open ? "Close chat" : unseen.length ? `Open chat, ${unseen.length} new ${unseen.length === 1 ? "reply" : "replies"}` : "Open chat");
     drawPreview();
   };
+  const previewShown = () => previewOn && !open && !previewGone && !!unseen.length && launcherOn;
   const drawPreview = () => {
     const m = unseen.at(-1);
-    if (!previewOn || open || previewGone || !m || !launcherOn) return prev.remove();
+    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, 12));
     x.addEventListener("click", (e) => {
       e.stopPropagation();
@@ -253,40 +304,163 @@ var build = (o) => {
     );
     card.addEventListener("click", () => show("messages"));
     prev.replaceChildren(card, x);
-    if (!prev.isConnected) root.appendChild(prev);
+    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 with us"));
+    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");
   });
   if (launcherOn) root.appendChild(fab);
   const pop = el("div", { class: "ckw-pop ckw-msgr", "data-pos": position, role: "dialog", "aria-label": title });
-  const head = el("div", { class: "ckw-pop-head ckw-msgr-head" });
+  const bar = el("div", { class: "ckw-msgr-bar" });
   const body = el("div", { class: "ckw-pop-body ckw-msgr-body" });
-  const tabs = el("nav", { class: "ckw-msgr-tabs", "aria-label": "Messenger" });
   pop.addEventListener("click", () => chime.unlock());
+  const lead = el("span", { class: "ckw-msgr-lead" });
+  const seg = el("nav", { class: "ckw-msgr-seg", "aria-label": "Messenger" });
+  const mark = el("span", { class: "ckw-msgr-seg-mark", "aria-hidden": "true" });
+  const segTab = (v, name, d) => {
+    const b = el("button", { type: "button", class: "ckw-msgr-seg-b" }, icon(d, 15), el("span", {}, name));
+    b.addEventListener("click", () => {
+      collection = null;
+      go(v);
+    });
+    return b;
+  };
+  const chatTab = segTab("messages", "Chat", I.chat);
+  const helpTab = segTab("help", "Help", I.book);
+  const tabCount = el("span", { class: "ckw-msgr-count ckw-msgr-count-tab", "aria-hidden": "true" });
+  const menuBtn = el("button", { type: "button", class: "ckw-msgr-ib", "aria-label": "More", "aria-haspopup": "menu", "aria-expanded": "false" }, icon(I.dots, 18));
+  const xBtn = el("button", { type: "button", class: "ckw-msgr-ib ckw-msgr-x", "aria-label": "Close messenger" }, icon(I.cross));
+  xBtn.addEventListener("click", () => close());
+  bar.append(lead, seg, el("span", { class: "ckw-msgr-trail" }, menuBtn, xBtn));
+  const menu = el("div", { class: "ckw-msgr-menu", role: "menu" });
+  const menuOpen = () => menu.isConnected && !menu.hasAttribute("data-out");
+  const closeMenu = () => {
+    menuBtn.setAttribute("aria-expanded", "false");
+    leave(menu, 120);
+  };
+  const menuItem = (d, name, act) => {
+    const b = el("button", { type: "button", class: "ckw-msgr-menu-i", role: "menuitem" }, icon(d, 15), el("span", {}, name));
+    b.addEventListener("click", (e) => {
+      e.stopPropagation();
+      closeMenu();
+      act();
+    });
+    return b;
+  };
+  menuBtn.addEventListener("click", (e) => {
+    e.stopPropagation();
+    if (menuOpen()) return closeMenu();
+    menu.replaceChildren(
+      el("span", { class: "ckw-msgr-menu-h" }, "Quick actions"),
+      menuItem(I.minus, "Minimize chat", () => close()),
+      menuItem(wide ? I.collapse : I.expand, wide ? "Collapse view" : "Expand view", () => {
+        wide = !wide;
+        pop.toggleAttribute("data-wide", wide);
+        requestAnimationFrame(placeMark);
+      })
+    );
+    menuBtn.setAttribute("aria-expanded", "true");
+    enter(menu, pop);
+    menu.querySelector("button")?.focus();
+  });
+  pop.addEventListener("click", () => menuOpen() && closeMenu());
+  function placeMark() {
+    const current = view === "messages" ? chatTab : view !== "home" ? helpTab : null;
+    if (!current || !current.isConnected) return mark.removeAttribute("data-on");
+    const first = !mark.hasAttribute("data-on");
+    if (first) mark.setAttribute("data-still", "");
+    mark.style.width = `${current.offsetWidth}px`;
+    mark.style.transform = `translateX(${current.offsetLeft}px)`;
+    mark.setAttribute("data-on", "");
+    if (first) requestAnimationFrame(() => mark.removeAttribute("data-still"));
+  }
+  const drawBar = () => {
+    const back = (to, name) => {
+      const b = el("button", { type: "button", class: "ckw-msgr-ib", "aria-label": name }, icon(I.back, 18));
+      b.addEventListener("click", to);
+      return b;
+    };
+    if (typeof view !== "string")
+      lead.replaceChildren(
+        back(() => go("help"), "Back to help")
+      );
+    else if (view === "help" && collection && !query.trim())
+      lead.replaceChildren(
+        back(() => {
+          collection = null;
+          go("help");
+        }, "All collections")
+      );
+    else {
+      const home = el("button", { type: "button", class: "ckw-msgr-ib", "aria-label": "Home", "aria-current": view === "home" ? "page" : "false" }, icon(I.home, 17));
+      home.addEventListener("click", () => go("home"));
+      lead.replaceChildren(home);
+    }
+    const tabsWanted = helpOn && hasArticles !== false ? [mark, chatTab, helpTab] : [mark, chatTab];
+    if (seg.childNodes.length !== tabsWanted.length) seg.replaceChildren(...tabsWanted);
+    chatTab.setAttribute("aria-current", view === "messages" ? "page" : "false");
+    helpTab.setAttribute("aria-current", view !== "home" && view !== "messages" ? "page" : "false");
+    if (unseen.length && view !== "messages") {
+      tabCount.textContent = String(Math.min(unseen.length, 9));
+      if (!tabCount.isConnected) chatTab.append(tabCount);
+    } else tabCount.remove();
+  };
   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 row = el("div", { class: "ckw-msgr-row" });
-  const text = el("textarea", { class: "ckw-textarea ckw-msgr-input", rows: "1", placeholder: "Write a message\u2026", "aria-label": "Message", maxlength: "4000" });
+  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));
-  row.append(text, send);
+  row.append(text, el("div", { class: "ckw-msgr-box-foot" }, el("span", { class: "ckw-msgr-hint" }, "Enter to send"), send));
+  row.addEventListener("click", (e) => e.target === row && text.focus());
   form.append(row);
   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() && !pending && emailOk();
-  const closeBtn = () => {
-    const b = el("button", { type: "button", class: "ckw-btn ckw-btn-ghost ckw-msgr-x", "aria-label": "Close messenger" }, icon(I.cross));
-    b.addEventListener("click", () => close());
-    return b;
-  };
   const go = (v) => {
+    const changed = JSON.stringify(v) !== JSON.stringify(view);
     view = v;
     drawn = -1;
     draw();
+    if (changed) replay(body, "ckw-msgr-enter");
     if (v === "messages") {
       markSeen();
       drawFab();
@@ -310,9 +484,19 @@ var build = (o) => {
     b.addEventListener("click", () => go({ article: a.id }));
     return b;
   };
-  const searchBox = () => {
+  const helpRow = (name, sub, meta, act) => {
+    const b = el(
+      "button",
+      { type: "button", class: "ckw-msgr-hrow" },
+      el("span", { class: "ckw-msgr-hrow-main" }, el("b", {}, name), sub ? el("span", { class: "ckw-msgr-hrow-sub" }, sub) : null, meta ? el("span", { class: "ckw-msgr-hrow-meta" }, meta) : null),
+      icon(I.next, 16)
+    );
+    b.addEventListener("click", act);
+    return b;
+  };
+  const searchBox = (placeholder = "Search for help") => {
     const wrap = el("label", { class: "ckw-msgr-search" });
-    const input = el("input", { class: "ckw-msgr-search-in", type: "search", placeholder: "Search for help", "aria-label": "Search for help", maxlength: "200" });
+    const input = el("input", { class: "ckw-msgr-search-in", type: "search", placeholder, "aria-label": "Search for help", maxlength: "200" });
     input.value = query;
     let t;
     input.addEventListener("input", () => {
@@ -329,10 +513,10 @@ var build = (o) => {
         if (view !== "help") go("help");
       }
     });
-    wrap.append(input, icon(I.search, 16));
+    wrap.append(icon(I.search, 16), input);
     return wrap;
   };
-  const helpSearch = searchBox();
+  const helpSearch = searchBox("Search our help center\u2026");
   const helpInput = helpSearch.querySelector("input");
   let loadingArticles = false;
   const loadArticles = async (force = false) => {
@@ -352,8 +536,13 @@ var build = (o) => {
     draw();
   };
   const drawHome = () => {
-    head.replaceChildren(el("span", { class: "ckw-msgr-brand" }, avatar("sm"), el("span", {}, title)), closeBtn());
-    const hero = el("div", { class: "ckw-msgr-hero" }, el("p", { class: "ckw-msgr-hello" }, greeting));
+    const hero = el(
+      "div",
+      { class: "ckw-msgr-hero" },
+      el("span", { class: "ckw-msgr-brand" }, avatar("sm"), el("span", {}, title)),
+      el("p", { class: "ckw-msgr-hello" }, greeting),
+      el("span", { class: "ckw-msgr-online" }, reply)
+    );
     const last = (thread?.messages ?? []).at(-1);
     const parts = [hero];
     if (last) {
@@ -395,30 +584,50 @@ var build = (o) => {
     body.replaceChildren(...parts);
   };
   const drawHelp = () => {
-    head.replaceChildren(el("span", {}, "Help"), closeBtn());
     if (helpInput.value !== query) helpInput.value = query;
-    const parts = [helpSearch];
+    const q = query.trim();
+    const all = articles ?? [];
+    const groups = /* @__PURE__ */ new Map();
+    for (const a of all) groups.set(a.collection, [...groups.get(a.collection) ?? [], a]);
+    const inside = !q && collection !== null ? groups.get(collection) ?? [] : null;
+    const heading = q ? "Search results" : inside ? collection ?? "" : "Most read articles";
+    const parts = [el("h2", { class: "ckw-msgr-help-h" }, heading), helpSearch];
     if (articles === null) parts.push(el("div", { class: "ckw-skel" }));
-    else if (!articles.length) {
+    else if (!all.length) {
       const ask = el("button", { type: "button", class: "ckw-btn ckw-btn-primary" }, "Send us a message");
       ask.addEventListener("click", () => go("messages"));
-      parts.push(el("div", { class: "ckw-msgr-empty" }, el("p", {}, query.trim() ? `Nothing found for \u201C${query.trim()}\u201D.` : "No help articles yet."), ask));
-    } else if (query.trim()) parts.push(el("div", { class: "ckw-msgr-card ckw-msgr-card-col" }, ...articles.map(articleRow)));
+      parts.push(el("div", { class: "ckw-msgr-empty" }, el("p", {}, q ? `Nothing found for \u201C${q}\u201D.` : "No help articles yet."), ask));
+    } else if (q || inside)
+      parts.push(
+        el(
+          "div",
+          { class: "ckw-msgr-hlist" },
+          ...(inside ?? all).map((a) => helpRow(a.title, a.excerpt.startsWith(a.title) ? a.excerpt.slice(a.title.length).trim() : a.excerpt, q ? a.collection : "", () => go({ article: a.id })))
+        )
+      );
+    else
+      parts.push(
+        el(
+          "div",
+          { class: "ckw-msgr-hlist" },
+          ...[...groups].map(
+            ([name, items]) => helpRow(name, items.map((a) => a.title).join(", "), `${items.length} ${items.length === 1 ? "article" : "articles"}`, () => {
+              collection = name;
+              go("help");
+              replay(body, "ckw-msgr-enter");
+            })
+          )
+        )
+      );
+    if (body.childNodes[1] !== helpSearch) body.replaceChildren(...parts);
     else {
-      const groups = /* @__PURE__ */ new Map();
-      for (const a of articles) groups.set(a.collection, [...groups.get(a.collection) ?? [], a]);
-      for (const [name, items] of groups)
-        parts.push(el("section", { class: "ckw-msgr-group" }, el("h3", { class: "ckw-msgr-group-h" }, `${name} \xB7 ${items.length}`), el("div", { class: "ckw-msgr-card ckw-msgr-card-col" }, ...items.map(articleRow))));
+      body.firstChild.replaceWith(parts[0]);
+      while (body.childNodes.length > 2) body.lastChild.remove();
+      body.append(...parts.slice(2));
     }
-    if (body.firstChild !== helpSearch) body.replaceChildren(helpSearch);
-    while (body.childNodes.length > 1) body.lastChild.remove();
-    body.append(...parts.slice(1));
   };
   let articleShown = null;
   const drawArticle = (id) => {
-    const back = el("button", { type: "button", class: "ckw-btn ckw-btn-ghost ckw-msgr-x", "aria-label": "Back to help" }, icon(I.back));
-    back.addEventListener("click", () => go("help"));
-    head.replaceChildren(back, el("span", { class: "ckw-msgr-head-t" }, "Help"), closeBtn());
     if (articleShown?.id === id) return body.replaceChildren(articleShown.node);
     const node = el("article", { class: "ckw-msgr-doc" }, el("div", { class: "ckw-skel" }));
     articleShown = { id, node };
@@ -457,22 +666,42 @@ var build = (o) => {
   };
   let drawn = -1;
   let listSig = "";
+  let listCount = -1;
+  const intro = () => el(
+    "div",
+    { class: "ckw-msgr-intro" },
+    el("span", { class: "ckw-msgr-intro-av" }, avatar()),
+    el("span", { class: "ckw-msgr-intro-t" }, el("b", {}, title), el("span", { class: "ckw-msgr-online" }, reply))
+  );
+  const introNode = intro();
+  const suggestions = el("div", { class: "ckw-msgr-sugg" });
   const drawMessages = () => {
-    head.replaceChildren(
-      el("span", { class: "ckw-msgr-who" }, avatar(), el("span", { class: "ckw-msgr-who-t" }, el("b", {}, title), el("span", {}, reply))),
-      closeBtn()
-    );
     const msgs = thread?.messages ?? [];
-    const parts = [];
+    const parts = [introNode];
     if (!loaded) parts.push(el("div", { class: "ckw-skel" }));
     else {
       const sig = `${msgs.map((m) => m.id).join(",")}|${pending ? pending.body : ""}|${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));
-        list.replaceChildren(greet, ...msgs.map((m) => bubble(m)), ...pending ? [bubble(pending, true)] : []);
+        const items = [greet, ...msgs.map((m) => bubble(m)), ...pending ? [bubble(pending, 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) : [];
+      if (top.length) {
+        if (suggestions.childNodes.length !== top.length)
+          suggestions.replaceChildren(
+            ...top.map((a) => {
+              const b = el("button", { type: "button", class: "ckw-msgr-sugg-b" }, a.title);
+              b.addEventListener("click", () => go({ article: a.id }));
+              return b;
+            })
+          );
+        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 (body.childNodes.length !== parts.length || parts.some((x, i) => body.childNodes[i] !== x)) body.replaceChildren(...parts);
@@ -491,28 +720,19 @@ var build = (o) => {
     } else email.remove();
     send.disabled = !canSend();
   };
-  const drawTabs = () => {
-    const current = typeof view === "string" ? view : "help";
-    const tab = (v, name, d, badge = 0) => {
-      const b = el("button", { type: "button", class: "ckw-msgr-tab", "aria-current": current === v ? "page" : "false" }, icon(d, 18), el("span", {}, name));
-      if (badge) b.append(el("span", { class: "ckw-msgr-count ckw-msgr-count-tab" }, String(Math.min(badge, 9))));
-      b.addEventListener("click", () => go(v));
-      return b;
-    };
-    tabs.replaceChildren(tab("home", "Home", I.home), tab("messages", "Messages", I.chat, view === "messages" ? 0 : unseen.length), ...helpOn && hasArticles !== false ? [tab("help", "Help", I.help)] : []);
-  };
   const draw = () => {
     if (!open) return;
     pop.dataset.view = typeof view === "string" ? view : "article";
+    drawBar();
     if (view === "home") drawHome();
     else if (view === "messages") drawMessages();
     else if (view === "help") drawHelp();
     else drawArticle(view.article);
-    const kids = [head, body];
+    const kids = [bar, body];
     if (view === "messages") kids.push(form);
-    kids.push(tabs);
-    drawTabs();
+    if (menu.isConnected) kids.push(menu);
     if (pop.childNodes.length !== kids.length || kids.some((k, i) => pop.childNodes[i] !== k)) pop.replaceChildren(...kids);
+    placeMark();
   };
   const tick = async () => {
     ctrl?.abort();
@@ -537,10 +757,11 @@ var build = (o) => {
     const ms = now ?? (watching() ? POLL_OPEN_MS : waiting && recent ? POLL_WAITING_MS : open || waiting ? POLL_IDLE_MS : 0);
     if (ms || now === 0) poll = setTimeout(() => void tick(), ms);
   }
-  document.addEventListener("visibilitychange", () => {
+  const onVisible = () => {
     if (document.visibilityState === "visible") schedule(0);
     else clearTimeout(poll);
-  });
+  };
+  document.addEventListener("visibilitychange", onVisible);
   const submit = async () => {
     const msg = text.value.trim();
     if (!msg || pending || !emailOk()) return;
@@ -571,12 +792,16 @@ var build = (o) => {
   });
   text.addEventListener("input", () => send.disabled = !canSend());
   email.addEventListener("input", () => draw());
-  function show(v = "home") {
+  function show(v = "home", still = false) {
+    const was = open;
     open = true;
     view = v === "help" && !helpOn ? "home" : v;
     drawn = -1;
     previewGone = true;
-    if (!pop.isConnected) root.appendChild(pop);
+    hideTeaser(true);
+    pop.toggleAttribute("data-still", still);
+    enter(pop);
+    if (was) replay(body, "ckw-msgr-enter");
     if (articles === null || view === "help" && query) void loadArticles();
     draw();
     drawFab();
@@ -589,26 +814,35 @@ var build = (o) => {
   function close() {
     if (!open) return;
     open = false;
-    pop.remove();
+    if (menu.isConnected) closeMenu();
+    leave(pop, 200);
     drawFab();
     schedule();
     if (launcherOn) fab.focus();
   }
   const onKey = (e) => {
-    if (e.key === "Escape" && open) close();
+    if (e.key !== "Escape" || !open) return;
+    if (menuOpen()) {
+      closeMenu();
+      menuBtn.focus();
+    } else close();
   };
   document.addEventListener("keydown", onKey);
   void tick();
   if (helpOn) void loadArticles();
   drawFab();
+  if (o.opened) show(o.opened, true);
   return {
     open: (v) => show(v ?? "home"),
     close,
     toggle: () => open ? close() : show(),
     destroy: () => {
       clearTimeout(poll);
+      clearTimeout(teaserTimer);
+      for (const t of leaving.values()) clearTimeout(t);
       ctrl?.abort();
       document.removeEventListener("keydown", onKey);
+      document.removeEventListener("visibilitychange", onVisible);
       root.remove();
     }
   };