@mrrocket/sdk 0.17.0 → 0.21.0

package/dist/messenger-ui.js

@@ -8,35 +8,40 @@ import {
   inkOn,
   replyLine
 } from "./api-client.js";
+import { currentLocale, onWords, t, tf, wordsLang, wordsVersion } from "./i18n.js";
 import { injectStyles } from "./styles-css.js";
+var UPDATES_SHOWN = 20;
 var POLL_OPEN_MS = 4e3;
 var POLL_WAITING_MS = 8e3;
 var POLL_IDLE_MS = 3e4;
+var POLL_QUIET_MS = 6e4;
 var WAITING_FOR_MS = 10 * 6e4;
+var SLOW_SEND_MS = 1500;
 var EMAIL = /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/;
 var SEEN_KEY = "ckw_msgr_seen";
+var SEEN_CHATS_KEY = "ckw_msgr_seen_chats";
 var readSeen = () => {
   try {
-    return window.localStorage.getItem(SEEN_KEY) ?? "";
+    return { old: window.localStorage.getItem(SEEN_KEY) ?? "", chats: JSON.parse(window.localStorage.getItem(SEEN_CHATS_KEY) ?? "{}") };
   } catch {
-    return "";
+    return { old: "", chats: {} };
   }
 };
-var writeSeen = (id) => {
+var writeSeen = (chats) => {
   try {
-    window.localStorage.setItem(SEEN_KEY, id);
+    window.localStorage.setItem(SEEN_CHATS_KEY, JSON.stringify(chats));
   } 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" });
+  const at = new Date(iso).getTime();
+  if (Number.isNaN(at)) return "";
+  const d = Math.max(0, Date.now() - at) / 1e3;
+  if (d < 60) return t("just now");
+  if (d < 3600) return tf("{n}m ago", { n: Math.floor(d / 60) });
+  if (d < 86400) return tf("{n}h ago", { n: Math.floor(d / 3600) });
+  if (d < 86400 * 30) return tf("{n}d ago", { n: Math.floor(d / 86400) });
+  return new Date(iso).toLocaleDateString(currentLocale(), { month: "short", day: "numeric", year: "numeric" });
 };
 var el = (tag, attrs = {}, ...kids) => {
   const e = document.createElement(tag);
@@ -71,11 +76,12 @@ var I = {
   minus: "M5 12h14",
   down: "m6 9 6 6 6-6",
   help: "M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20zM9.1 9a3 3 0 0 1 5.8 1c0 2-3 3-3 3M12 17h.01",
+  updates: "m3 11 18-5v12L3 14zM11.6 16.8a3 3 0 1 1-5.8-1.6",
   clip: "m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48",
   image: "M19 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2zM9 11a2 2 0 1 0 0-4 2 2 0 0 0 0 4zM21 15l-3.09-3.09a2 2 0 0 0-2.82 0L6 21",
   screen: "M20 3H4a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2zM8 21h8M12 17v4"
 };
-var lineOf = (m) => m.body || (m.attachments?.length === 1 ? `Sent ${m.attachments[0].name}` : m.attachments?.length ? `Sent ${m.attachments.length} files` : "");
+var lineOf = (m) => m.body || (m.attachments?.length === 1 ? tf("Sent {name}", { name: m.attachments[0].name }) : m.attachments?.length ? tf("Sent {n} files", { n: m.attachments.length }) : "");
 var canShoot = () => typeof navigator !== "undefined" && typeof navigator.mediaDevices?.getDisplayMedia === "function";
 var BUBBLE = "M7.9 20A9 9 0 1 0 4 16.1L2 22z";
 var filled = (d, size) => {
@@ -99,6 +105,7 @@ var HOUSE = "M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 1
 var SMILE = "M9.5 15.5c1.4 1 3.6 1 5 0";
 var DISC = "M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20z";
 var QMARK = "M9.4 9.2a2.7 2.7 0 0 1 5.2 1c0 1.8-2.6 2.5-2.6 2.5M12 16.8h.01";
+var MEGAPHONE = "m3 11 18-5v12L3 14zM5.8 15.2a3 3 0 0 0 5.8 1.6z";
 var chime = /* @__PURE__ */ (() => {
   let ctx = null;
   const get = () => {
@@ -120,11 +127,11 @@ var chime = /* @__PURE__ */ (() => {
       try {
         const c = get();
         if (!c || c.state !== "running") return;
-        const t = c.currentTime;
+        const t2 = c.currentTime;
         [880, 1318.5].forEach((f, i) => {
           const o = c.createOscillator();
           const g = c.createGain();
-          const at = t + i * 0.11;
+          const at = t2 + i * 0.11;
           o.type = "sine";
           o.frequency.value = f;
           g.gain.setValueAtTime(1e-4, at);
@@ -189,9 +196,11 @@ var mountMessenger = (o) => {
   const later = (fn) => real ? fn(real) : queued.push(fn);
   const ctrl = new AbortController();
   const caching = !o.client && !!o.apiKey;
+  let lastLook = null;
   const start = (look) => {
     if (gone) return;
-    const key = JSON.stringify(look ?? {});
+    lastLook = look;
+    const key = `${wordsVersion()}:${JSON.stringify(look ?? {})}`;
     if (real && key === shown) return;
     if (real?.isOpen()) {
       real.onClose(() => start(look));
@@ -206,18 +215,27 @@ var mountMessenger = (o) => {
   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) => {
+  const readLook = () => (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);
+    start(lastLook);
   }).finally(() => clearTimeout(timer));
+  let readIn = currentLocale();
+  void readLook();
+  const offWords = onWords(() => {
+    if (currentLocale() !== readIn) {
+      readIn = currentLocale();
+      void readLook();
+    } else if (real) start(lastLook);
+  });
   return {
     open: (v) => later((h) => h.open(v)),
     close: () => real?.close(),
     toggle: () => later((h) => h.toggle()),
     destroy: () => {
       gone = true;
+      offWords();
       ctrl.abort();
       clearTimeout(timer);
       real?.destroy();
@@ -228,15 +246,16 @@ var PLACES = ["top-left", "top-center", "top-right", "middle-left", "middle-righ
 var build = (o) => {
   injectStyles();
   const position = PLACES.find((p) => p === o.position) ?? "bottom-right";
-  const title = o.title || "Support";
-  const greeting = o.greeting || "Hi! How can we help?";
+  const title = o.title || t("Support");
+  const greeting = o.greeting || t("Hi! How can we help?");
   const askEmail = o.askEmail ?? true;
   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 whoLabel = { visitor: t("You"), team: t("Team"), ai: o.agentName?.trim() || t("AI agent"), auto: t("Team") };
   const launcherOn = o.launcher ?? true;
   const helpOn = o.help ?? true;
+  const updatesOn = o.updates ?? 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(), userHash: o.userHash?.() });
@@ -245,7 +264,9 @@ var build = (o) => {
     "data-theme": o.theme ?? "auto",
     "data-corners": o.corners === "soft" || o.corners === "square" ? o.corners : "round",
     "data-font": o.font === "system" ? "system" : "site",
-    "data-header": o.header === "color" ? "color" : "plain"
+    "data-header": o.header === "color" ? "color" : "plain",
+    // Screen readers read the panel in the language of its words. Built anew when they change.
+    ...wordsLang() ? { lang: wordsLang() } : {}
   });
   if (o.container) root.setAttribute("data-contained", "");
   if (o.accent) {
@@ -258,49 +279,96 @@ var build = (o) => {
   let afterClose = null;
   let view = "home";
   let thread = null;
+  let chats = [];
+  let hasEmail = false;
+  let chatId = null;
+  let draft = null;
+  let drafts = 0;
+  let listing = false;
   let loaded = false;
   let error = "";
-  let pending = null;
-  let lastKnown = null;
+  const sayable = (e) => e.status === 401 ? t("The chat is not available right now. Please try again later.") : e.message;
+  let outbox = [];
+  let outboxSeq = 0;
+  let flushing = false;
+  const known = /* @__PURE__ */ new Map();
+  let seen = readSeen();
   let unseen = [];
   let previewGone = false;
   let poll;
+  let refused = false;
   let ctrl = null;
   let articles = null;
   let query = "";
   let rated = /* @__PURE__ */ new Set();
   let hasArticles = null;
+  let updates = null;
+  let updatesNode = 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 isAnswer = (m) => m.from === "team" || m.from === "ai";
   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") : [];
+  const shownChat = () => listing || draft !== null ? null : chatId ?? thread?.conversation?.id ?? null;
+  const unseenIn = (chat) => unseen.filter((m) => m.chat === chat).length;
+  const learn = (chat, answers, newest, settled) => {
+    const was = known.get(chat);
+    const after = (at) => answers.filter((m) => m.at > at);
+    if (was === void 0) {
+      const read = seen.chats[chat];
+      const fresh = settled ? [] : read ? after(read) : answers.slice(answers.findIndex((m) => m.id === seen.old) + 1);
+      unseen = [...unseen, ...fresh.map((m) => ({ ...m, chat }))];
+      if (loaded && fresh.length) {
+        if (soundOn) chime.play();
+        previewGone = false;
+      }
     } else {
-      const i = team.findIndex((m) => m.id === lastKnown);
-      const fresh = team.slice(i + 1).filter((m) => m.from !== "auto");
+      const fresh = after(was);
       if (fresh.length) {
         if (soundOn) chime.play();
-        if (!watching()) {
-          unseen = [...unseen, ...fresh];
+        if (!watching() || shownChat() !== chat) {
+          unseen = [...unseen, ...fresh.map((m) => ({ ...m, chat }))];
           previewGone = false;
         }
       }
     }
-    lastKnown = lastTeamId(t);
-    thread = t;
+    known.set(chat, newest ?? was ?? "");
+  };
+  const take = (t2) => {
+    const read = t2.conversation;
+    const last = t2.messages.at(-1);
+    chats = t2.conversations ?? (read && last ? [{ id: read.id, status: read.status, subject: lineOf(t2.messages[0]), last }] : []);
+    hasEmail = t2.hasEmail;
+    chats.forEach((c, i) => {
+      if (c.id !== read?.id) learn(c.id, c.last && isAnswer(c.last) ? [c.last] : [], c.last?.at, c.status === "solved" && i > 0);
+    });
+    if (read) learn(read.id, t2.messages.filter(isAnswer), last?.at, read.status === "solved" && chats[0]?.id !== read.id);
+    if (chatId === null || read?.id === chatId) thread = t2;
     if (watching()) markSeen();
   };
   const markSeen = () => {
-    unseen = [];
-    const id = lastTeamId(thread);
-    if (id) writeSeen(id);
+    const chat = shownChat();
+    if (!chat) return;
+    unseen = unseen.filter((m) => m.chat !== chat);
+    const at = known.get(chat);
+    if (!at || seen.chats[chat] === at) return;
+    const kept = Object.fromEntries(Object.entries(seen.chats).filter(([c]) => chats.some((x) => x.id === c)));
+    seen = { ...seen, chats: { ...kept, [chat]: at } };
+    writeSeen(seen.chats);
   };
+  const enterChat = (id, d, list2 = false) => {
+    if (id !== chatId || d !== draft) {
+      ctrl?.abort();
+      ctrl = null;
+      thread = null;
+      listSig = "";
+      listCount = -1;
+    }
+    chatId = id;
+    draft = d;
+    listing = list2;
+  };
+  const enterMessages = () => enterChat(null, null, chats.length > 1);
+  const startChat = () => enterChat(null, ++drafts);
   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);
@@ -361,14 +429,14 @@ var build = (o) => {
       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");
+    fab.setAttribute("aria-label", open ? t("Close chat") : unseen.length === 1 ? t("Open chat, 1 new reply") : unseen.length ? tf("Open chat, {n} new replies", { n: unseen.length }) : t("Open chat"));
     drawPreview();
   };
   const previewShown = () => previewOn && !open && !previewGone && !!unseen.length && launcherOn;
   const drawPreview = () => {
     const m = unseen.at(-1);
     if (!previewShown() || !m) return leave(prev);
-    const x = el("button", { type: "button", class: "ckw-msgr-preview-x", "aria-label": "Dismiss" }, icon(I.cross, 14));
+    const x = el("button", { type: "button", class: "ckw-msgr-preview-x", "aria-label": t("Dismiss") }, icon(I.cross, 14));
     x.addEventListener("click", (e) => {
       e.stopPropagation();
       previewGone = true;
@@ -380,18 +448,23 @@ var build = (o) => {
       el(
         "span",
         { class: "ckw-msgr-preview-main" },
-        el("span", { class: "ckw-msgr-preview-who" }, `${whoLabel[m.from]}${unseen.length > 1 ? ` \xB7 ${unseen.length} new` : ""}`),
+        el("span", { class: "ckw-msgr-preview-who" }, `${whoLabel[m.from]}${unseen.length > 1 ? ` \xB7 ${tf("{n} new", { n: unseen.length })}` : ""}`),
         el("span", { class: "ckw-msgr-preview-text" }, lineOf(m))
       )
     );
-    card.addEventListener("click", () => show("messages"));
+    card.addEventListener("click", () => {
+      enterChat(m.chat, null);
+      show("messages");
+    });
     prev.replaceChildren(card, x);
     enter(prev);
   };
   fab.addEventListener("click", () => {
     chime.unlock();
-    if (open) close();
-    else show(unseen.length ? "messages" : "home");
+    if (open) return close();
+    const news = unseen.at(-1);
+    if (news) enterChat(news.chat, null);
+    show(news ? "messages" : "home");
   });
   if (launcherOn) root.appendChild(fab);
   const pop = el("div", { class: "ckw-pop ckw-msgr", "data-pos": position, role: "dialog", "aria-label": title });
@@ -400,21 +473,23 @@ var build = (o) => {
   pop.addEventListener("click", () => chime.unlock());
   const lead = el("span", { class: "ckw-msgr-lead" });
   const mid = el("span", { class: "ckw-msgr-mid" });
-  const tabs = el("nav", { class: "ckw-msgr-tabs", "aria-label": "Messenger" });
+  const tabs = el("nav", { class: "ckw-msgr-tabs", "aria-label": t("Messenger") });
   const tab = (v, name, line, shape, cut) => {
     const b = el("button", { type: "button", class: "ckw-msgr-tab" }, el("span", { class: "ckw-msgr-tab-ic" }, icon(line, 22), duo(shape, cut, 22)), el("span", {}, name));
     b.addEventListener("click", () => {
       collection = null;
+      if (v === "messages") enterMessages();
       go(v);
     });
     return b;
   };
-  const homeTab = tab("home", "Home", I.home, HOUSE, SMILE);
-  const chatTab = tab("messages", "Messages", I.chat, BUBBLE, DOTS);
-  const helpTab = tab("help", "Help", I.help, DISC, QMARK);
+  const homeTab = tab("home", t("Home"), I.home, HOUSE, SMILE);
+  const chatTab = tab("messages", t("Messages"), I.chat, BUBBLE, DOTS);
+  const helpTab = tab("help", t("Help"), I.help, DISC, QMARK);
+  const updatesTab = tab("updates", t("Updates"), I.updates, MEGAPHONE, "");
   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));
+  const menuBtn = el("button", { type: "button", class: "ckw-msgr-ib", "aria-label": t("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": t("Close messenger") }, icon(I.cross));
   xBtn.addEventListener("click", () => close());
   bar.append(lead, mid, el("span", { class: "ckw-msgr-trail" }, menuBtn, xBtn));
   const menu = el("div", { class: "ckw-msgr-menu", role: "menu" });
@@ -436,9 +511,9 @@ var build = (o) => {
     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", () => {
+      el("span", { class: "ckw-msgr-menu-h" }, t("Quick actions")),
+      menuItem(I.minus, t("Minimize chat"), () => close()),
+      menuItem(wide ? I.collapse : I.expand, wide ? t("Collapse view") : t("Expand view"), () => {
         wide = !wide;
         pop.toggleAttribute("data-wide", wide);
       })
@@ -456,26 +531,37 @@ var build = (o) => {
     };
     if (typeof view !== "string")
       lead.replaceChildren(
-        back(() => go("help"), "Back to help")
+        back(() => go("help"), t("Back to help"))
       );
     else if (view === "help" && collection && !query.trim())
       lead.replaceChildren(
         back(() => {
           collection = null;
           go("help");
-        }, "All collections")
+        }, t("All collections"))
       );
-    else if (view === "messages") lead.replaceChildren(back(() => go("home"), "Back to home"));
+    else if (view === "messages" && !listing && chats.length > 1)
+      lead.replaceChildren(
+        back(() => {
+          enterMessages();
+          go("messages");
+        }, t("All conversations"))
+      );
+    else if (view === "messages") lead.replaceChildren(back(() => go("home"), t("Back to home")));
     else if (view === "home") lead.replaceChildren(logo);
     else lead.replaceChildren();
-    if (view === "messages") mid.replaceChildren(avatar("sm"), el("span", { class: "ckw-msgr-mid-t" }, el("b", {}, title), el("span", { class: "ckw-msgr-online" }, reply)));
-    else if (view === "help") mid.replaceChildren(el("b", {}, "Help"));
+    if (view === "messages" && listing) mid.replaceChildren(el("b", {}, t("Messages")));
+    else if (view === "messages") mid.replaceChildren(avatar("sm"), el("span", { class: "ckw-msgr-mid-t" }, el("b", {}, title), el("span", { class: "ckw-msgr-online" }, reply)));
+    else if (view === "help") mid.replaceChildren(el("b", {}, t("Help")));
+    else if (view === "updates") mid.replaceChildren(el("b", {}, t("Updates")));
     else mid.replaceChildren();
-    const items = helpOn && hasArticles !== false ? [homeTab, chatTab, helpTab] : [homeTab, chatTab];
-    if (tabs.childNodes.length !== items.length) tabs.replaceChildren(...items);
+    const items = [homeTab, chatTab, ...helpOn && hasArticles !== false ? [helpTab] : [], ...updatesOn && updates?.length ? [updatesTab] : []];
+    if (tabs.childNodes.length !== items.length || items.some((t2, i) => tabs.childNodes[i] !== t2)) tabs.replaceChildren(...items);
+    tabs.toggleAttribute("data-four", items.length > 3);
     homeTab.setAttribute("aria-current", view === "home" ? "page" : "false");
     chatTab.setAttribute("aria-current", view === "messages" ? "page" : "false");
-    helpTab.setAttribute("aria-current", view !== "home" && view !== "messages" ? "page" : "false");
+    helpTab.setAttribute("aria-current", view !== "home" && view !== "messages" && view !== "updates" ? "page" : "false");
+    updatesTab.setAttribute("aria-current", view === "updates" ? "page" : "false");
     if (unseen.length && view !== "messages") {
       tabCount.textContent = String(Math.min(unseen.length, 9));
       if (!tabCount.isConnected) chatTab.firstChild.appendChild(tabCount);
@@ -483,14 +569,14 @@ 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 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 email = el("input", { class: "ckw-input ckw-msgr-email", type: "email", inputmode: "email", autocomplete: "email", placeholder: t("Email for our reply (optional)"), "aria-label": t("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));
+  const text = el("textarea", { class: "ckw-textarea ckw-msgr-input", rows: "1", placeholder: t("Write your message\u2026"), "aria-label": t("Message"), maxlength: "4000" });
+  const send = el("button", { type: "submit", class: "ckw-msgr-send", "aria-label": t("Send") }, icon(I.up));
   const shots = canShoot();
   const clip = el(
     "button",
-    { type: "button", class: "ckw-msgr-clip", "aria-label": shots ? "Attach a file or a screenshot" : "Attach a file", ...shots ? { "aria-haspopup": "menu", "aria-expanded": "false" } : {} },
+    { type: "button", class: "ckw-msgr-clip", "aria-label": shots ? t("Attach a file or a screenshot") : t("Attach a file"), ...shots ? { "aria-haspopup": "menu", "aria-expanded": "false" } : {} },
     icon(I.clip, 18)
   );
   row.append(text, el("div", { class: "ckw-msgr-tools" }, clip, el("span", { class: "ckw-msgr-sp" }), send));
@@ -498,7 +584,7 @@ var build = (o) => {
   form.append(row);
   const picker = el("input", { type: "file", accept: CHAT_FILE_TYPES.join(","), multiple: "", hidden: "", tabindex: "-1", "aria-hidden": "true" });
   form.append(picker);
-  const tray = el("div", { class: "ckw-msgr-files", role: "list", "aria-label": "Files to send" });
+  const tray = el("div", { class: "ckw-msgr-files", role: "list", "aria-label": t("Files to send") });
   let picked = [];
   const localUrls = /* @__PURE__ */ new Map();
   const fileUrl = (id) => localUrls.get(id) ?? api().attachmentUrl(id);
@@ -515,15 +601,15 @@ var build = (o) => {
     for (const f of list2) {
       const name = f.name || "screenshot.png";
       if (picked.length >= CHAT_FILES_PER_MESSAGE) {
-        error = `Up to ${CHAT_FILES_PER_MESSAGE} files per message.`;
+        error = tf("Up to {n} files per message.", { n: CHAT_FILES_PER_MESSAGE });
         break;
       }
       if (!CHAT_FILE_TYPES.includes(f.type)) {
-        error = "Only pictures (PNG, JPEG, WebP, GIF) and PDFs can be sent.";
+        error = t("Only pictures (PNG, JPEG, WebP, GIF) and PDFs can be sent.");
         continue;
       }
       if (f.size > CHAT_FILE_MAX_BYTES) {
-        error = `${name} is larger than 10 MB.`;
+        error = tf("{name} is larger than 10 MB.", { name });
         continue;
       }
       const p = { key: `local-${Date.now().toString(36)}${Math.random().toString(36).slice(2, 7)}`, name, type: f.type, size: f.size, local: URL.createObjectURL(f), up: Promise.resolve(), ctrl: new AbortController() };
@@ -541,8 +627,10 @@ var build = (o) => {
       );
       picked.push(p);
     }
-    if (open && view !== "messages") go("messages");
-    else draw();
+    if (open && (view !== "messages" || listing)) {
+      startChat();
+      go("messages");
+    } else draw();
     text.focus();
   };
   let traySig = "";
@@ -552,14 +640,14 @@ var build = (o) => {
       traySig = sig;
       tray.replaceChildren(
         ...picked.map((p) => {
-          const x = el("button", { type: "button", class: "ckw-msgr-file-x", "aria-label": `Remove ${p.name}` }, icon(I.cross, 12));
+          const x = el("button", { type: "button", class: "ckw-msgr-file-x", "aria-label": tf("Remove {name}", { name: p.name }) }, icon(I.cross, 12));
           x.addEventListener("click", () => {
             dropFile(p);
             draw();
             text.focus();
           });
           const face = p.type.startsWith("image/") ? el("img", { src: p.local, alt: "" }) : el("span", { class: "ckw-msgr-file-doc" }, icon(I.doc, 18), el("span", {}, p.name));
-          return el("div", { class: "ckw-msgr-file", role: "listitem", title: p.name, "aria-label": p.id ? p.name : `${p.name}, uploading`, ...p.id ? {} : { "aria-busy": "true" } }, face, x);
+          return el("div", { class: "ckw-msgr-file", role: "listitem", title: p.name, "aria-label": p.id ? p.name : tf("{name}, uploading", { name: p.name }), ...p.id ? {} : { "aria-busy": "true" } }, face, x);
         })
       );
     }
@@ -572,7 +660,7 @@ var build = (o) => {
       stream = await navigator.mediaDevices.getDisplayMedia({ video: { displaySurface: "browser" }, audio: false, preferCurrentTab: true, selfBrowserSurface: "include" });
     } catch (e) {
       if (e.name !== "NotAllowedError" && e.name !== "AbortError") {
-        error = "The screenshot did not work here. Attach a picture instead.";
+        error = t("The screenshot did not work here. Attach a picture instead.");
         draw();
       }
       return;
@@ -598,11 +686,11 @@ var build = (o) => {
     } catch {
       blob = null;
     } finally {
-      for (const t of stream.getTracks()) t.stop();
+      for (const t2 of stream.getTracks()) t2.stop();
       root.style.visibility = "";
     }
     if (!blob || !blob.size) {
-      error = "The screenshot did not work here. Attach a picture instead.";
+      error = t("The screenshot did not work here. Attach a picture instead.");
       return draw();
     }
     const stamp = (/* @__PURE__ */ new Date()).toISOString().slice(0, 16).replace(/[:T]/g, "-");
@@ -629,8 +717,8 @@ var build = (o) => {
     if (!shots) return picker.click();
     if (amenuOpen()) return closeAmenu();
     amenu.replaceChildren(
-      amenuItem(I.image, "Photo or file", () => picker.click()),
-      amenuItem(I.screen, "Screenshot of this page", () => void shoot())
+      amenuItem(I.image, t("Photo or file"), () => picker.click()),
+      amenuItem(I.screen, t("Screenshot of this page"), () => void shoot())
     );
     clip.setAttribute("aria-expanded", "true");
     enter(amenu, form);
@@ -640,11 +728,11 @@ var build = (o) => {
     addFiles([...picker.files ?? []]);
     picker.value = "";
   });
-  const brand = el("a", { class: "ckw-msgr-powered", href: BRAND_URL, target: "_blank", rel: "noopener" }, "Powered by ", el("b", {}, "MRRocket"));
-  const list = el("ol", { class: "ckw-msgs", "aria-live": "polite", "aria-label": "Messages" });
-  const needEmail = () => askEmail && !o.user()?.email && !thread?.hasEmail;
+  const brand = el("a", { class: "ckw-msgr-powered", href: BRAND_URL, target: "_blank", rel: "noopener" }, t("Powered by {brand}").split("{brand}")[0], el("b", {}, "MRRocket"), t("Powered by {brand}").split("{brand}")[1]);
+  const list = el("ol", { class: "ckw-msgs", "aria-live": "polite", "aria-label": t("Messages") });
+  const needEmail = () => askEmail && !o.user()?.email && !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;
@@ -666,6 +754,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)
@@ -683,7 +772,7 @@ var build = (o) => {
       chip.addEventListener("click", () => go({ article: a.id }));
       li.append(chip);
     }
-    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)}`));
+    li.append(el("span", { class: "ckw-msg-meta" }, m.from === "ai" ? agentFace() : null, `${m.from !== "visitor" ? `${whoLabel[m.from]} \xB7 ` : ""}${slow ? t("Sending\u2026") : timeAgo(m.at)}`));
     return li;
   };
   const articleRow = (a) => {
@@ -701,15 +790,15 @@ var build = (o) => {
     b.addEventListener("click", act);
     return b;
   };
-  const searchBox = (placeholder = "Search for help") => {
+  const searchBox = (placeholder = t("Search for help")) => {
     const wrap = el("label", { class: "ckw-msgr-search" });
-    const input = el("input", { class: "ckw-msgr-search-in", type: "search", placeholder, "aria-label": "Search for help", maxlength: "200" });
+    const input = el("input", { class: "ckw-msgr-search-in", type: "search", placeholder, "aria-label": t("Search for help"), maxlength: "200" });
     input.value = query;
-    let t;
+    let wait;
     input.addEventListener("input", () => {
       query = input.value;
-      clearTimeout(t);
-      t = setTimeout(() => {
+      clearTimeout(wait);
+      wait = setTimeout(() => {
         if (view !== "help") return go("help");
         void loadArticles(true);
       }, 250);
@@ -723,9 +812,13 @@ var build = (o) => {
     wrap.append(icon(I.search, 16), input);
     return wrap;
   };
-  const helpSearch = searchBox("Search our help center\u2026");
+  const helpSearch = searchBox(t("Search our help center\u2026"));
   const helpInput = helpSearch.querySelector("input");
   let loadingArticles = false;
+  const askAnew = () => {
+    startChat();
+    go("messages");
+  };
   const loadArticles = async (force = false) => {
     if (!helpOn || loadingArticles && !force) return;
     loadingArticles = true;
@@ -742,50 +835,92 @@ var build = (o) => {
     }
     draw();
   };
+  const loadUpdates = async () => {
+    try {
+      updates = (await api().changelog()).entries.slice(0, UPDATES_SHOWN);
+    } catch {
+      updates = [];
+    }
+    updatesNode = null;
+    draw();
+  };
   const askForm = el("form", { class: "ckw-msgr-askq" });
-  const askIn = el("input", { class: "ckw-msgr-askq-in", placeholder: "Ask a question", "aria-label": "Ask a question", maxlength: "4000", autocomplete: "off" });
-  const askGo = el("button", { type: "submit", class: "ckw-msgr-send", "aria-label": "Send", disabled: "" }, icon(I.up));
+  const askIn = el("input", { class: "ckw-msgr-askq-in", placeholder: t("Ask a question"), "aria-label": t("Ask a question"), maxlength: "4000", autocomplete: "off" });
+  const askGo = el("button", { type: "submit", class: "ckw-msgr-send", "aria-label": t("Send"), disabled: "" }, icon(I.up));
   askForm.append(askIn, askGo);
   askIn.addEventListener("input", () => askGo.disabled = !askIn.value.trim());
   askForm.addEventListener("submit", (e) => {
     e.preventDefault();
-    if (!askIn.value.trim()) return go("messages");
+    if (!askIn.value.trim()) {
+      enterMessages();
+      return go("messages");
+    }
     text.value = askIn.value;
     askIn.value = "";
     askGo.disabled = true;
+    startChat();
     go("messages");
-    if (canSend()) void submit();
+    if (canSend()) submit();
   });
+  const chatRow = (c) => {
+    const m = c.last;
+    const n = unseenIn(c.id);
+    const closed = c.status === "solved" ? ` \xB7 ${t("Closed")}` : "";
+    const row2 = el(
+      "button",
+      { type: "button", class: "ckw-msgr-card ckw-msgr-recent", "aria-label": `${tf("Conversation: {subject}", { subject: c.subject })}${closed}${n ? `, ${tf("{n} new", { n })}` : ""}` },
+      el(
+        "span",
+        { class: "ckw-msgr-recent-row" },
+        avatar("sm"),
+        el(
+          "span",
+          { class: "ckw-msgr-card-main" },
+          el("span", { class: "ckw-msgr-card-sub ckw-msgr-recent-text" }, c.subject),
+          m && lineOf(m) !== c.subject ? el("span", { class: "ckw-msgr-card-sub" }, lineOf(m)) : null,
+          m ? el("span", { class: "ckw-msgr-card-meta" }, `${whoLabel[m.from]} \xB7 ${timeAgo(m.at)}${closed}`) : null
+        ),
+        n ? el("span", { class: "ckw-msgr-badge" }, String(n)) : icon(I.next, 14)
+      )
+    );
+    row2.addEventListener("click", () => {
+      enterChat(c.id, null);
+      go("messages");
+    });
+    return row2;
+  };
+  const chatsBox = el("div", { class: "ckw-msgr-chats" });
+  const newChat = el("button", { type: "button", class: "ckw-btn ckw-btn-primary ckw-msgr-new" }, icon(I.chat), t("New conversation"));
+  newChat.addEventListener("click", askAnew);
+  let chatsSig = "";
+  const drawChats = () => {
+    const sig = `${chats.map((c) => `${c.id}:${c.status}:${c.last?.id}:${unseenIn(c.id)}`).join()}|${Math.floor(Date.now() / 6e4)}`;
+    if (sig !== chatsSig) {
+      chatsSig = sig;
+      chatsBox.replaceChildren(...chats.map(chatRow));
+    }
+    if (body.childNodes[0] !== chatsBox) body.replaceChildren(chatsBox, newChat);
+  };
   const drawHome = () => {
     const first = o.user()?.name?.trim().split(/\s+/)[0];
-    const rest = greeting.replace(/^(hi|hello|hey|hallo)( there)?\s*[!,.]*\s*/i, "").trim() || "How can we help you today?";
+    const rest = (o.greeting ? greeting.replace(/^(hi|hello|hey|hallo|moin|servus|bonjour|salut|hola|ciao|salve|hoi|ol[áa]|cze[śs][ćc]|hej|こんにちは)( there)?\s*[!,.！、。]*\s*/i, "").trim() : t("How can we help?")) || t("How can we help you today?");
     const hero = el(
       "h2",
       { class: "ckw-msgr-hero ckw-msgr-hello" },
-      el("span", {}, first ? `Hi, ${first} ` : "Hi there ", el("span", { class: "ckw-msgr-wave", "aria-hidden": "true" }, "\u{1F44B}")),
+      el("span", {}, `${first ? tf("Hi, {name}", { name: first }) : t("Hi there")} `, el("span", { class: "ckw-msgr-wave", "aria-hidden": "true" }, "\u{1F44B}")),
       el("span", { class: "ckw-msgr-hello-sub" }, rest)
     );
-    const last = (thread?.messages ?? []).at(-1);
     const parts = [hero, askForm];
-    if (last) {
-      const recent = el(
-        "button",
-        { type: "button", class: "ckw-msgr-card ckw-msgr-recent", "aria-label": `Recent message: ${lineOf(last)}` },
-        el(
-          "span",
-          { class: "ckw-msgr-recent-row" },
-          avatar("sm"),
-          el(
-            "span",
-            { class: "ckw-msgr-card-main" },
-            el("span", { class: "ckw-msgr-card-sub ckw-msgr-recent-text" }, lineOf(last)),
-            el("span", { class: "ckw-msgr-card-meta" }, `${last.from === "visitor" ? "You" : whoLabel[last.from]} \xB7 ${timeAgo(last.at)}`)
-          ),
-          unseen.length ? el("span", { class: "ckw-msgr-badge" }, String(unseen.length)) : icon(I.next, 14)
-        )
-      );
-      recent.addEventListener("click", () => go("messages"));
-      parts.push(recent);
+    const running = chats.filter((c) => c.status !== "solved");
+    const rows = (running.length ? running : chats).slice(0, 2);
+    parts.push(...rows.map(chatRow));
+    if (chats.length > rows.length) {
+      const all = el("button", { type: "button", class: "ckw-msgr-all" }, tf("All conversations ({n})", { n: chats.length }), icon(I.next, 14));
+      all.addEventListener("click", () => {
+        enterMessages();
+        go("messages");
+      });
+      parts.push(all);
     }
     if (helpOn && hasArticles !== false) {
       const helpCard = el("div", { class: "ckw-msgr-card ckw-msgr-card-col" });
@@ -803,13 +938,13 @@ var build = (o) => {
     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 heading = q ? t("Search results") : inside ? collection ?? "" : t("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 (!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", {}, q ? `Nothing found for \u201C${q}\u201D.` : "No help articles yet."), ask));
+      const ask = el("button", { type: "button", class: "ckw-btn ckw-btn-primary" }, t("Send us a message"));
+      ask.addEventListener("click", askAnew);
+      parts.push(el("div", { class: "ckw-msgr-empty" }, el("p", {}, q ? tf("Nothing found for \u201C{q}\u201D.", { q }) : t("No help articles yet.")), ask));
     } else if (q || inside)
       parts.push(
         el(
@@ -824,7 +959,7 @@ var build = (o) => {
           "div",
           { class: "ckw-msgr-hlist" },
           ...[...groups].map(
-            ([name, items]) => helpRow(name, items.map((a) => a.title).join(", "), `${items.length} ${items.length === 1 ? "article" : "articles"}`, () => {
+            ([name, items]) => helpRow(name, items.map((a) => a.title).join(", "), items.length === 1 ? t("1 article") : tf("{n} articles", { n: items.length }), () => {
               collection = name;
               go("help");
               replay(body, "ckw-msgr-enter");
@@ -839,6 +974,14 @@ var build = (o) => {
       body.append(...parts.slice(2));
     }
   };
+  const drawUpdates = () => {
+    updatesNode ??= !updates ? el("div", { class: "ckw-skel" }) : !updates.length ? el("div", { class: "ckw-msgr-empty" }, el("p", {}, t("No updates yet."))) : el(
+      "div",
+      { class: "ckw-msgr-updates" },
+      ...updates.map((e) => el("article", { class: "ckw-msgr-update" }, el("p", { class: "ckw-msgr-doc-c" }, timeAgo(e.publishedAt)), el("h2", { class: "ckw-msgr-update-t" }, e.title), e.body ? el("p", { class: "ckw-msgr-update-b" }, e.body) : null))
+    );
+    if (body.firstChild !== updatesNode || body.childNodes.length !== 1) body.replaceChildren(updatesNode);
+  };
   let articleShown = null;
   const drawArticle = (id) => {
     if (articleShown?.id === id) return body.replaceChildren(articleShown.node);
@@ -848,26 +991,26 @@ var build = (o) => {
     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");
+        if (rated.has(id)) return foot.replaceChildren(el("span", {}, t("Thanks for letting us know.")));
+        const yes = el("button", { type: "button", class: "ckw-btn" }, t("Yes"));
+        const no = el("button", { type: "button", class: "ckw-btn" }, t("No"));
         const rate = (helpful) => {
           rated = new Set(rated).add(id);
           drawRate();
           api().rateArticle(id, helpful).catch(() => void 0);
-          if (!helpful) go("messages");
+          if (!helpful) askAnew();
         };
         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));
+        foot.replaceChildren(el("span", {}, t("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"));
+      const ask = el("button", { type: "button", class: "ckw-btn ckw-msgr-ask" }, icon(I.chat), t("Still need help? Send us a message"));
+      ask.addEventListener("click", askAnew);
       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("p", { class: "ckw-msgr-doc-c" }, tf("Updated {when}", { when: timeAgo(a.updatedAt) })),
         el("div", { class: "ckw-msgr-doc-b" }, ...a.blocks.map(blockOf)),
         foot,
         ask
@@ -881,22 +1024,25 @@ var build = (o) => {
   let listSig = "";
   let listCount = -1;
   const suggestions = el("div", { class: "ckw-msgr-sugg" });
+  const outboxHere = () => outbox.filter((x) => x.draft === draft && x.chat === chatId);
   const drawMessages = () => {
-    const msgs = thread?.messages ?? [];
+    const current = draft === null ? thread : null;
+    const msgs = current?.messages ?? [];
+    const here = outboxHere();
     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 = here.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 || chatId ? [] : [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") && !here.length && !chatId ? (articles ?? []).slice(0, 3) : [];
       if (top.length) {
         if (suggestions.childNodes.length !== top.length)
           suggestions.replaceChildren(
@@ -909,9 +1055,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 (current?.conversation?.status === "solved" && !here.length) parts.push(el("p", { class: "ckw-fine ckw-msgr-note" }, t("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 + here.length;
     if (count !== drawn) {
       drawn = count;
       body.scrollTop = body.scrollHeight;
@@ -932,24 +1078,35 @@ var build = (o) => {
     pop.dataset.view = typeof view === "string" ? view : "article";
     drawBar();
     if (view === "home") drawHome();
-    else if (view === "messages") drawMessages();
+    else if (view === "messages") (listing ? drawChats : drawMessages)();
     else if (view === "help") drawHelp();
+    else if (view === "updates") drawUpdates();
     else drawArticle(view.article);
     const kids = view === "home" ? [sky, bar, body] : [bar, body];
-    kids.push(view === "messages" ? form : tabs);
+    kids.push(view === "messages" && !listing ? form : tabs);
     if (o.branding !== false) kids.push(brand);
     if (menu.isConnected) kids.push(menu);
     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, chatId ?? void 0));
       error = "";
+      refused = false;
     } catch (e) {
       if (e.name === "AbortError") return;
-      if (open && view === "messages") error = e.message;
+      const status = e.status;
+      refused = status === 401 || status === 403;
+      if (status === 404 && chatId) enterMessages();
+      else if (open && view === "messages") error = sayable(e);
+    } finally {
+      if (ctrl === mine) ctrl = null;
+    }
+    if (!loaded) {
+      listCount = -1;
+      if (view === "messages" && chatId === null && draft === null && !text.value.trim() && !outbox.length && !picked.length) enterMessages();
     }
     loaded = true;
     draw();
@@ -958,69 +1115,105 @@ var build = (o) => {
   };
   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);
+    const running = chats.filter((c) => c.status !== "solved");
+    const waiting = running.length > 0;
+    const recent = running.some((c) => c.last && Date.now() - new Date(c.last.at).getTime() < WAITING_FOR_MS);
+    const quiet = now === void 0 && !open && !waiting;
+    const ms = now ?? (document.visibilityState === "hidden" ? 0 : watching() ? POLL_OPEN_MS : waiting && recent ? POLL_WAITING_MS : quiet ? POLL_QUIET_MS : POLL_IDLE_MS);
+    if (ms || now === 0) poll = setTimeout(() => quiet && (refused || !(o.user()?.id || chats.length)) ? schedule() : void tick(), ms);
   }
   const onVisible = () => {
     if (document.visibilityState === "visible") schedule(0);
     else clearTimeout(poll);
   };
   document.addEventListener("visibilitychange", onVisible);
-  const submit = async () => {
+  const flush = async () => {
+    if (flushing) return;
+    flushing = true;
+    while (outbox.length) {
+      const item = outbox[0];
+      const { message, files, email: given } = item;
+      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 || t("The file could not be sent."));
+        const sent = await api().sendChat({
+          body: message.body,
+          ...item.draft !== null ? { conversation: "new" } : item.chat ? { conversation: item.chat } : {},
+          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;
+        const went = sent.conversation?.id ?? null;
+        if (went) {
+          const after = outbox.slice(1).filter((x) => x.draft === item.draft && x.chat === item.chat);
+          if (item.draft === draft && item.chat === chatId) {
+            draft = null;
+            chatId = went;
+          }
+          for (const x of after) {
+            x.draft = null;
+            x.chat = went;
+          }
+        }
+        take(sent);
+        outbox.shift();
+        for (const p of files) {
+          localUrls.delete(p.key);
+          URL.revokeObjectURL(p.local);
+        }
+      } catch (e) {
+        const back = outbox.splice(0);
+        const gone = e.status === 404;
+        enterChat(gone ? null : back[0].chat, gone ? ++drafts : back[0].draft);
+        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 = gone ? t("This conversation is no longer available. Your message is still here to send as a new one.") : 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,
+      chat: chatId,
+      draft
+    });
     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());
@@ -1049,7 +1242,7 @@ var build = (o) => {
   function show(v = "home", still = false) {
     const was = open;
     open = true;
-    view = v === "help" && !helpOn ? "home" : v;
+    view = v === "help" && !helpOn || v === "updates" && !updatesOn ? "home" : v;
     drawn = -1;
     previewGone = true;
     pop.toggleAttribute("data-still", still);
@@ -1090,10 +1283,14 @@ var build = (o) => {
   document.addEventListener("keydown", onKey);
   void tick();
   if (helpOn) void loadArticles();
+  if (updatesOn) void loadUpdates();
   drawFab();
   if (o.opened) show(o.opened, true);
   return {
-    open: (v) => show(v ?? "home"),
+    open: (v) => {
+      if (v === "messages") enterMessages();
+      show(v ?? "home");
+    },
     close,
     toggle: () => open ? close() : show(),
     isOpen: () => open,
@@ -1102,7 +1299,7 @@ var build = (o) => {
     },
     destroy: () => {
       clearTimeout(poll);
-      for (const t of leaving.values()) clearTimeout(t);
+      for (const t2 of leaving.values()) clearTimeout(t2);
       ctrl?.abort();
       for (const p of picked) forget(p);
       for (const u of localUrls.values()) URL.revokeObjectURL(u);