@mrrocket/sdk 0.8.0 → 0.9.0

package/dist/messenger-ui.js

@@ -0,0 +1,583 @@
+// src/messenger-ui.ts
+import { createApi } from "./api-client.js";
+import { injectStyles } from "./styles-css.js";
+var POLL_OPEN_MS = 4e3;
+var POLL_WAITING_MS = 8e3;
+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) ?? "";
+  } catch {
+    return "";
+  }
+};
+var writeSeen = (id) => {
+  try {
+    window.localStorage.setItem(SEEN_KEY, id);
+  } catch {
+  }
+};
+var timeAgo = (iso) => {
+  const t = new Date(iso).getTime();
+  if (Number.isNaN(t)) return "";
+  const d = Math.max(0, Date.now() - t) / 1e3;
+  if (d < 60) return "just now";
+  if (d < 3600) return `${Math.floor(d / 60)}m ago`;
+  if (d < 86400) return `${Math.floor(d / 3600)}h ago`;
+  if (d < 86400 * 30) return `${Math.floor(d / 86400)}d ago`;
+  return new Date(iso).toLocaleDateString(void 0, { month: "short", day: "numeric", year: "numeric" });
+};
+var el = (tag, attrs = {}, ...kids) => {
+  const e = document.createElement(tag);
+  for (const [k, v] of Object.entries(attrs)) e.setAttribute(k, v);
+  for (const k of kids) if (k !== null && k !== false && k !== void 0) e.append(k);
+  return e;
+};
+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" }))
+    svg.setAttribute(k, v);
+  const path = document.createElementNS(SVG_NS, "path");
+  path.setAttribute("d", d);
+  svg.appendChild(path);
+  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",
+  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"
+};
+var chime = /* @__PURE__ */ (() => {
+  let ctx = null;
+  const get = () => {
+    const AC = window.AudioContext ?? window.webkitAudioContext;
+    if (!AC) return null;
+    ctx ??= new AC();
+    return ctx;
+  };
+  return {
+    /** Call from a click so later sounds may play. */
+    unlock: () => {
+      try {
+        const c = get();
+        if (c?.state === "suspended") void c.resume();
+      } catch {
+      }
+    },
+    play: () => {
+      try {
+        const c = get();
+        if (!c || c.state !== "running") return;
+        const t = c.currentTime;
+        [880, 1318.5].forEach((f, i) => {
+          const o = c.createOscillator();
+          const g = c.createGain();
+          const at = t + i * 0.11;
+          o.type = "sine";
+          o.frequency.value = f;
+          g.gain.setValueAtTime(1e-4, at);
+          g.gain.exponentialRampToValueAtTime(0.12, at + 0.012);
+          g.gain.exponentialRampToValueAtTime(1e-4, at + 0.32);
+          o.connect(g);
+          g.connect(c.destination);
+          o.start(at);
+          o.stop(at + 0.34);
+        });
+      } catch {
+      }
+    }
+  };
+})();
+var spansOf = (spans) => spans.map((s) => {
+  let node = s.href ? el("a", { href: s.href, target: "_blank", rel: "noopener noreferrer" }, s.text) : el("span", {}, s.text);
+  if (s.code) node = el("code", {}, node);
+  if (s.italic) node = el("em", {}, node);
+  if (s.bold) node = el("strong", {}, node);
+  return node;
+});
+var blockOf = (b) => {
+  switch (b.type) {
+    case "h2":
+    case "h3":
+      return el(b.type, {}, ...spansOf(b.spans));
+    case "quote":
+      return el("blockquote", {}, ...spansOf(b.spans));
+    case "ul":
+    case "ol":
+      return el(b.type, {}, ...b.items.map((it) => el("li", {}, ...spansOf(it))));
+    case "code":
+      return el("pre", {}, el("code", {}, b.text));
+    case "hr":
+      return el("hr");
+    default:
+      return el("p", {}, ...spansOf(b.spans));
+  }
+};
+var LOOK_WAIT_MS = 2500;
+var mountMessenger = (o) => {
+  let real = null;
+  let gone = false;
+  const queued = [];
+  const later = (fn) => real ? fn(real) : queued.push(fn);
+  const ctrl = new AbortController();
+  const start = (look) => {
+    if (real || gone) return;
+    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 });
+    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));
+  return {
+    open: (v) => later((h) => h.open(v)),
+    close: () => real?.close(),
+    toggle: () => later((h) => h.toggle()),
+    destroy: () => {
+      gone = true;
+      ctrl.abort();
+      clearTimeout(timer);
+      real?.destroy();
+    }
+  };
+};
+var build = (o) => {
+  injectStyles();
+  const position = o.position ?? "bottom-right";
+  const title = o.title || "Chat with us";
+  const greeting = o.greeting || "Hi! How can we help?";
+  const askEmail = o.askEmail ?? true;
+  const label = o.label ?? "";
+  const launcherOn = o.launcher ?? true;
+  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 root = el("div", { class: "ckw-root", "data-theme": o.theme ?? "auto" });
+  if (o.accent) root.style.setProperty("--ckw-accent", o.accent);
+  document.body.appendChild(root);
+  let open = false;
+  let view = "home";
+  let thread = null;
+  let loaded = false;
+  let error = "";
+  let pending = null;
+  let lastKnown = null;
+  let unseen = [];
+  let previewGone = false;
+  let poll;
+  let ctrl = null;
+  let articles = null;
+  let query = "";
+  let rated = /* @__PURE__ */ new Set();
+  let hasArticles = null;
+  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";
+  const take = (t) => {
+    const team = teamMsgs(t);
+    if (lastKnown === null) {
+      const seen = readSeen();
+      const i = team.findIndex((m) => m.id === seen);
+      unseen = t.messages.some((m) => m.from === "visitor") ? team.slice(i + 1).filter((m) => m.from !== "auto") : [];
+    } else {
+      const i = team.findIndex((m) => m.id === lastKnown);
+      const fresh = team.slice(i + 1).filter((m) => m.from !== "auto");
+      if (fresh.length) {
+        if (soundOn) chime.play();
+        if (!watching()) {
+          unseen = [...unseen, ...fresh];
+          previewGone = false;
+        }
+      }
+    }
+    lastKnown = lastTeamId(t);
+    thread = t;
+    if (watching()) markSeen();
+  };
+  const markSeen = () => {
+    unseen = [];
+    const id = lastTeamId(thread);
+    if (id) writeSeen(id);
+  };
+  const fab = el("button", { type: "button", class: `ckw-fab ckw-msgr-fab${label ? "" : " ckw-msgr-round"}`, "data-pos": position, "aria-haspopup": "dialog" });
+  const prev = el("div", { class: "ckw-msgr-preview", "data-pos": position, role: "status" });
+  const drawFab = () => {
+    fab.replaceChildren(icon(open ? I.cross : I.chat, label ? 16 : 20));
+    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.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 drawPreview = () => {
+    const m = unseen.at(-1);
+    if (!previewOn || open || previewGone || !m || !launcherOn) return prev.remove();
+    const x = el("button", { type: "button", class: "ckw-msgr-preview-x", "aria-label": "Dismiss" }, icon(I.cross, 12));
+    x.addEventListener("click", (e) => {
+      e.stopPropagation();
+      previewGone = true;
+      drawPreview();
+    });
+    const card = el(
+      "button",
+      { type: "button", class: "ckw-msgr-preview-card" },
+      el("span", { class: "ckw-msgr-preview-who" }, `${whoLabel[m.from]}${unseen.length > 1 ? ` \xB7 ${unseen.length} new` : ""}`),
+      el("span", { class: "ckw-msgr-preview-text" }, m.body)
+    );
+    card.addEventListener("click", () => show("messages"));
+    prev.replaceChildren(card, x);
+    if (!prev.isConnected) root.appendChild(prev);
+  };
+  fab.addEventListener("click", () => {
+    chime.unlock();
+    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 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 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 send = el("button", { type: "submit", class: "ckw-btn ckw-btn-primary ckw-msgr-send", "aria-label": "Send" }, icon(I.send));
+  row.append(text, send);
+  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) => {
+    view = v;
+    drawn = -1;
+    draw();
+    if (v === "messages") {
+      markSeen();
+      drawFab();
+      text.focus();
+    } else if (v === "help") helpInput.focus();
+    schedule(0);
+  };
+  const bubble = (m, isPending = false) => {
+    const li = el("li", { class: "ckw-msg", "data-from": m.from === "visitor" ? "me" : "them" }, el("div", { class: "ckw-bubble" }, m.body));
+    if (isPending) li.setAttribute("aria-busy", "true");
+    for (const a of m.articles ?? []) {
+      const chip = el("button", { type: "button", class: "ckw-msgr-cite" }, icon(I.doc, 14), el("span", {}, a.title));
+      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)}`));
+    return li;
+  };
+  const articleRow = (a) => {
+    const b = el("button", { type: "button", class: "ckw-msgr-art" }, el("span", { class: "ckw-msgr-art-t" }, a.title), icon(I.next, 14));
+    b.addEventListener("click", () => go({ article: a.id }));
+    return b;
+  };
+  const searchBox = () => {
+    const wrap = el("label", { class: "ckw-msgr-search" }, icon(I.search, 14));
+    const input = el("input", { class: "ckw-msgr-search-in", type: "search", placeholder: "Search for help", "aria-label": "Search for help", maxlength: "200" });
+    input.value = query;
+    let t;
+    input.addEventListener("input", () => {
+      query = input.value;
+      clearTimeout(t);
+      t = setTimeout(() => {
+        if (view !== "help") return go("help");
+        void loadArticles(true);
+      }, 250);
+    });
+    input.addEventListener("keydown", (e) => {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        if (view !== "help") go("help");
+      }
+    });
+    wrap.append(input);
+    return wrap;
+  };
+  const helpSearch = searchBox();
+  const helpInput = helpSearch.querySelector("input");
+  let loadingArticles = false;
+  const loadArticles = async (force = false) => {
+    if (!helpOn || loadingArticles && !force) return;
+    loadingArticles = true;
+    const q = query.trim();
+    try {
+      const r = await api().articles(q || void 0);
+      if (q !== query.trim()) return;
+      articles = r.articles;
+      if (!q) hasArticles = r.articles.length > 0;
+    } catch {
+      articles = articles ?? [];
+    } finally {
+      loadingArticles = false;
+    }
+    draw();
+  };
+  const drawHome = () => {
+    head.replaceChildren(el("span", { class: "ckw-msgr-brand" }, title), closeBtn());
+    const hero = el("div", { class: "ckw-msgr-hero" }, el("p", { class: "ckw-msgr-hello" }, greeting));
+    const last = (thread?.messages ?? []).at(-1);
+    const msgCard = el(
+      "button",
+      { type: "button", class: "ckw-msgr-card" },
+      el(
+        "span",
+        { class: "ckw-msgr-card-main" },
+        el("b", {}, last ? "Recent message" : "Send us a message"),
+        el("span", { class: "ckw-msgr-card-sub" }, last ? `${last.from === "visitor" ? "You" : whoLabel[last.from]}: ${last.body}` : "We usually answer within a few hours")
+      ),
+      unseen.length ? el("span", { class: "ckw-msgr-badge" }, String(unseen.length)) : icon(I.send)
+    );
+    msgCard.addEventListener("click", () => go("messages"));
+    const parts = [hero, msgCard];
+    if (helpOn && hasArticles !== false) {
+      const helpCard = el("div", { class: "ckw-msgr-card ckw-msgr-card-col" }, searchBox());
+      const top = (articles ?? []).slice(0, 4);
+      if (top.length) helpCard.append(...top.map(articleRow));
+      else if (articles === null) helpCard.append(el("div", { class: "ckw-skel ckw-msgr-skel" }));
+      parts.push(helpCard);
+    }
+    body.replaceChildren(...parts);
+  };
+  const drawHelp = () => {
+    head.replaceChildren(el("span", {}, "Help"), closeBtn());
+    if (helpInput.value !== query) helpInput.value = query;
+    const parts = [helpSearch];
+    if (articles === null) parts.push(el("div", { class: "ckw-skel" }));
+    else if (!articles.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)));
+    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))));
+    }
+    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 };
+    body.replaceChildren(node);
+    api().article(id).then((a) => {
+      const foot = el("div", { class: "ckw-msgr-rate" });
+      const drawRate = () => {
+        if (rated.has(id)) return foot.replaceChildren(el("span", {}, "Thanks for letting us know."));
+        const yes = el("button", { type: "button", class: "ckw-btn" }, "Yes");
+        const no = el("button", { type: "button", class: "ckw-btn" }, "No");
+        const rate = (helpful) => {
+          rated = new Set(rated).add(id);
+          drawRate();
+          api().rateArticle(id, helpful).catch(() => void 0);
+          if (!helpful) go("messages");
+        };
+        yes.addEventListener("click", () => rate(true));
+        no.addEventListener("click", () => rate(false));
+        foot.replaceChildren(el("span", {}, "Did this answer your question?"), el("span", { class: "ckw-msgr-rate-b" }, yes, no));
+      };
+      drawRate();
+      const ask = el("button", { type: "button", class: "ckw-btn ckw-msgr-ask" }, icon(I.chat), "Still need help? Send us a message");
+      ask.addEventListener("click", () => go("messages"));
+      node.replaceChildren(
+        el("p", { class: "ckw-msgr-doc-c" }, a.collection),
+        el("h2", { class: "ckw-msgr-doc-t" }, a.title),
+        el("p", { class: "ckw-msgr-doc-c" }, `Updated ${timeAgo(a.updatedAt)}`),
+        el("div", { class: "ckw-msgr-doc-b" }, ...a.blocks.map(blockOf)),
+        foot,
+        ask
+      );
+    }).catch((e) => {
+      articleShown = null;
+      node.replaceChildren(el("p", { class: "ckw-msgr-error" }, e.message));
+    });
+  };
+  let drawn = -1;
+  let listSig = "";
+  const drawMessages = () => {
+    head.replaceChildren(el("span", {}, title), closeBtn());
+    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 : ""}|${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)] : []);
+      }
+      parts.push(list);
+    }
+    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);
+    const count = msgs.length + (pending ? 1 : 0);
+    if (count !== drawn) {
+      drawn = count;
+      body.scrollTop = body.scrollHeight;
+    }
+    err.textContent = error;
+    if (error && !err.isConnected) form.prepend(err);
+    else if (!error) err.remove();
+    if (needEmail()) {
+      if (emailOk()) email.removeAttribute("aria-invalid");
+      else email.setAttribute("aria-invalid", "true");
+      if (!email.isConnected) form.insertBefore(email, row);
+    } 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";
+    if (view === "home") drawHome();
+    else if (view === "messages") drawMessages();
+    else if (view === "help") drawHelp();
+    else drawArticle(view.article);
+    const kids = [head, body];
+    if (view === "messages") kids.push(form);
+    kids.push(tabs);
+    drawTabs();
+    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();
+    try {
+      take(await api().chat(ctrl.signal));
+      error = "";
+    } catch (e) {
+      if (e.name === "AbortError") return;
+      if (open && view === "messages") error = e.message;
+    }
+    loaded = true;
+    draw();
+    drawFab();
+    schedule();
+  };
+  function schedule(now) {
+    clearTimeout(poll);
+    const waiting = !!thread?.messages.some((m) => m.from === "visitor") && thread?.conversation?.status !== "solved";
+    const wrote = (thread?.messages ?? []).filter((m) => m.from === "visitor").at(-1)?.at;
+    const recent = !!wrote && Date.now() - new Date(wrote).getTime() < WAITING_FOR_MS;
+    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", () => {
+    if (document.visibilityState === "visible") schedule(0);
+    else clearTimeout(poll);
+  });
+  const submit = async () => {
+    const msg = text.value.trim();
+    if (!msg || pending || !emailOk()) return;
+    chime.unlock();
+    pending = { id: "pending", from: "visitor", body: msg, at: (/* @__PURE__ */ new Date()).toISOString() };
+    text.value = "";
+    error = "";
+    draw();
+    try {
+      take(await api().sendChat({ body: msg, email: needEmail() && email.value.trim() ? email.value.trim() : void 0, url: window.location.href.slice(0, 500) }));
+    } catch (e) {
+      text.value = msg;
+      error = e.message;
+    }
+    pending = null;
+    draw();
+    schedule();
+  };
+  form.addEventListener("submit", (e) => {
+    e.preventDefault();
+    void submit();
+  });
+  text.addEventListener("keydown", (e) => {
+    if (e.key === "Enter" && !e.shiftKey && !e.isComposing) {
+      e.preventDefault();
+      void submit();
+    }
+  });
+  text.addEventListener("input", () => send.disabled = !canSend());
+  email.addEventListener("input", () => draw());
+  function show(v = "home") {
+    open = true;
+    view = v === "help" && !helpOn ? "home" : v;
+    drawn = -1;
+    previewGone = true;
+    if (!pop.isConnected) root.appendChild(pop);
+    if (articles === null || view === "help" && query) void loadArticles();
+    draw();
+    drawFab();
+    if (view === "messages") {
+      markSeen();
+      text.focus();
+    }
+    schedule(0);
+  }
+  function close() {
+    if (!open) return;
+    open = false;
+    pop.remove();
+    drawFab();
+    schedule();
+    if (launcherOn) fab.focus();
+  }
+  const onKey = (e) => {
+    if (e.key === "Escape" && open) close();
+  };
+  document.addEventListener("keydown", onKey);
+  void tick();
+  if (helpOn) void loadArticles();
+  drawFab();
+  return {
+    open: (v) => show(v ?? "home"),
+    close,
+    toggle: () => open ? close() : show(),
+    destroy: () => {
+      clearTimeout(poll);
+      ctrl?.abort();
+      document.removeEventListener("keydown", onKey);
+      root.remove();
+    }
+  };
+};
+export {
+  mountMessenger
+};
+//# sourceMappingURL=messenger-ui.js.map