@mrrocket/sdk 0.22.0 → 0.23.0

package/dist/messenger-ui.js

@@ -6,12 +6,14 @@ import {
   CHAT_FILE_TYPES,
   createApi,
   inkOn,
-  replyLine
+  replyLine,
+  stillThere
 } 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 READ_PATIENCE_MS = 5e3;
 var POLL_WAITING_MS = 8e3;
 var POLL_IDLE_MS = 3e4;
 var POLL_QUIET_MS = 6e4;
@@ -188,6 +190,23 @@ var writeCachedLook = (apiKey, look) => {
   } catch {
   }
 };
+var CHATS_KEY = "ckw_msgr_chats:";
+var PRODUCT_KEY = "ckw_msgr_product:";
+var KEPT = 20;
+var kept = (key) => {
+  try {
+    return JSON.parse(window.localStorage.getItem(key) ?? "null");
+  } catch {
+    return null;
+  }
+};
+var keep = (key, value) => {
+  try {
+    if (value) window.localStorage.setItem(key, JSON.stringify(value));
+    else window.localStorage.removeItem(key);
+  } catch {
+  }
+};
 var mountMessenger = (o) => {
   let real = null;
   let shown = "";
@@ -233,6 +252,7 @@ var mountMessenger = (o) => {
     open: (v) => later((h) => h.open(v)),
     close: () => real?.close(),
     toggle: () => later((h) => h.toggle()),
+    refresh: () => real?.refresh(),
     destroy: () => {
       gone = true;
       offWords();
@@ -252,7 +272,7 @@ var build = (o) => {
   const label = o.label ?? "";
   const reply = replyLine(o.replyTime);
   const initial = (title.trim()[0] ?? "?").toUpperCase();
-  const whoLabel = { visitor: t("You"), team: t("Team"), ai: o.agentName?.trim() || t("AI agent"), auto: t("Team") };
+  const whoLabel = { visitor: t("You"), team: t("Team"), ai: o.agentName?.trim() ? `${o.agentName.trim()} \xB7 ${t("AI agent")}` : t("AI agent"), auto: t("Team") };
   const launcherOn = o.launcher ?? true;
   const helpOn = o.help ?? true;
   const updatesOn = o.updates ?? true;
@@ -302,10 +322,40 @@ var build = (o) => {
   let query = "";
   let rated = /* @__PURE__ */ new Set();
   let hasArticles = null;
+  let homeArticles = [];
+  let misses = 0;
   let updates = null;
+  let hasUpdates = false;
   let updatesNode = null;
   let collection = null;
   let wide = false;
+  const remembers = !o.client && !!o.apiKey;
+  const chatsKey = CHATS_KEY + o.apiKey;
+  const productKey = PRODUCT_KEY + o.apiKey;
+  let visitor = o.distinctId();
+  let person = o.user()?.id;
+  const recall = () => {
+    const m = remembers ? kept(chatsKey) : null;
+    chats = m?.who === visitor && Array.isArray(m.chats) ? m.chats : [];
+  };
+  recall();
+  if (remembers) {
+    const m = kept(productKey);
+    if (m?.articles?.length) {
+      homeArticles = m.articles;
+      articles = m.articles;
+      hasArticles = true;
+    }
+    hasUpdates = !!m?.updates;
+  }
+  const rememberChats = (who) => {
+    if (!remembers || o.distinctId() !== who) return;
+    if (chats.length) keep(chatsKey, { who, chats: chats.slice(0, KEPT) });
+    else if (kept(chatsKey)?.who === who) keep(chatsKey, null);
+  };
+  const rememberProduct = () => {
+    if (remembers) keep(productKey, homeArticles.length || hasUpdates ? { articles: homeArticles.slice(0, KEPT), updates: hasUpdates } : null);
+  };
   const isAnswer = (m) => m.from === "team" || m.from === "ai";
   const watching = () => open && view === "messages" && document.visibilityState !== "hidden";
   const shownChat = () => listing || draft !== null ? null : chatId ?? thread?.conversation?.id ?? null;
@@ -342,6 +392,7 @@ var build = (o) => {
       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);
+    unseen = unseen.filter(stillThere(t2, chats));
     if (chatId === null || read?.id === chatId) thread = t2;
     if (watching()) markSeen();
   };
@@ -351,8 +402,8 @@ var build = (o) => {
     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 } };
+    const kept2 = Object.fromEntries(Object.entries(seen.chats).filter(([c]) => chats.some((x) => x.id === c)));
+    seen = { ...seen, chats: { ...kept2, [chat]: at } };
     writeSeen(seen.chats);
   };
   const enterChat = (id, d, list2 = false) => {
@@ -555,7 +606,7 @@ var build = (o) => {
     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 = [homeTab, chatTab, ...helpOn && hasArticles !== false ? [helpTab] : [], ...updatesOn && updates?.length ? [updatesTab] : []];
+    const items = [homeTab, chatTab, ...helpOn && hasArticles ? [helpTab] : [], ...updatesOn && (updates ? updates.length : hasUpdates) ? [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");
@@ -827,7 +878,11 @@ var build = (o) => {
       const r = await api().articles(q || void 0);
       if (q !== query.trim()) return;
       articles = r.articles;
-      if (!q) hasArticles = r.articles.length > 0;
+      if (!q) {
+        homeArticles = r.articles;
+        hasArticles = r.articles.length > 0;
+        rememberProduct();
+      }
     } catch {
       articles = articles ?? [];
     } finally {
@@ -838,6 +893,8 @@ var build = (o) => {
   const loadUpdates = async () => {
     try {
       updates = (await api().changelog()).entries.slice(0, UPDATES_SHOWN);
+      hasUpdates = updates.length > 0;
+      rememberProduct();
     } catch {
       updates = [];
     }
@@ -862,6 +919,25 @@ var build = (o) => {
     go("messages");
     if (canSend()) submit();
   });
+  const shapes = (rows, card = false) => el(
+    "div",
+    { class: "ckw-msgr-shapes", "aria-hidden": "true" },
+    ...Array.from(
+      { length: rows },
+      () => el(
+        "div",
+        { class: card ? "ckw-msgr-card ckw-msgr-recent" : "ckw-msgr-shape" },
+        el("span", { class: "ckw-msgr-recent-row" }, card ? el("span", { class: "ckw-msgr-av ckw-msgr-av-sm ckw-msgr-sk" }) : null, el("span", { class: "ckw-msgr-card-main" }, el("span", { class: "ckw-msgr-sk" }), el("span", { class: "ckw-msgr-sk" })))
+      )
+    )
+  );
+  const still = (node) => {
+    if (node.isConnected) node.setAttribute("data-still", "");
+    return node;
+  };
+  const chatShape = shapes(1, true);
+  const listShape = shapes(3);
+  let homeSeen = null;
   const chatRow = (c) => {
     const m = c.last;
     const n = unseenIn(c.id);
@@ -911,9 +987,16 @@ var build = (o) => {
       el("span", { class: "ckw-msgr-hello-sub" }, rest)
     );
     const parts = [hero, askForm];
+    const shown = /* @__PURE__ */ new Set();
+    const arriving = (node, key) => {
+      shown.add(key);
+      if (homeSeen && !homeSeen.has(key)) node.setAttribute("data-arrive", "");
+      return node;
+    };
     const running = chats.filter((c) => c.status !== "solved");
     const rows = (running.length ? running : chats).slice(0, 2);
-    parts.push(...rows.map(chatRow));
+    parts.push(...rows.map((c) => arriving(chatRow(c), c.id)));
+    if (!rows.length && !loaded && misses < 3 && o.user()?.id) parts.push(still(chatShape));
     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", () => {
@@ -922,13 +1005,9 @@ var build = (o) => {
       });
       parts.push(all);
     }
-    if (helpOn && hasArticles !== false) {
-      const helpCard = el("div", { class: "ckw-msgr-card ckw-msgr-card-col" });
-      const top = (articles ?? []).slice(0, 3);
-      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);
-    }
+    const top = helpOn ? homeArticles.slice(0, 3) : [];
+    if (top.length) parts.push(arriving(el("div", { class: "ckw-msgr-card ckw-msgr-card-col" }, ...top.map(articleRow)), "help"));
+    homeSeen = shown;
     body.replaceChildren(...parts);
   };
   const drawHelp = () => {
@@ -940,7 +1019,7 @@ var build = (o) => {
     const inside = !q && collection !== null ? groups.get(collection) ?? [] : null;
     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" }));
+    if (articles === null) parts.push(still(listShape));
     else if (!all.length) {
       const ask = el("button", { type: "button", class: "ckw-btn ckw-btn-primary" }, t("Send us a message"));
       ask.addEventListener("click", askAnew);
@@ -975,7 +1054,7 @@ var build = (o) => {
     }
   };
   const drawUpdates = () => {
-    updatesNode ??= !updates ? el("div", { class: "ckw-skel" }) : !updates.length ? el("div", { class: "ckw-msgr-empty" }, el("p", {}, t("No updates yet."))) : el(
+    updatesNode ??= !updates ? shapes(3) : !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))
@@ -985,7 +1064,7 @@ var build = (o) => {
   let articleShown = null;
   const drawArticle = (id) => {
     if (articleShown?.id === id) return body.replaceChildren(articleShown.node);
-    const node = el("article", { class: "ckw-msgr-doc" }, el("div", { class: "ckw-skel" }));
+    const node = el("article", { class: "ckw-msgr-doc" }, shapes(4));
     articleShown = { id, node };
     body.replaceChildren(node);
     api().article(id).then((a) => {
@@ -1091,27 +1170,59 @@ var build = (o) => {
   const tick = async () => {
     if (ctrl) return;
     const mine = ctrl = new AbortController();
+    const asked = o.distinctId();
+    let late = false;
+    const patience = setTimeout(() => {
+      late = true;
+      mine.abort();
+    }, Math.min(READ_PATIENCE_MS * 2 ** misses, POLL_IDLE_MS));
+    let again;
     try {
       take(await api().chat(mine.signal, chatId ?? void 0));
       error = "";
       refused = false;
+      misses = 0;
+      rememberChats(asked);
     } catch (e) {
-      if (e.name === "AbortError") return;
+      if (e.name === "AbortError" && !late) return;
       const status = e.status;
       refused = status === 401 || status === 403;
       if (status === 404 && chatId) enterMessages();
-      else if (open && view === "messages") error = sayable(e);
+      else if (open && view === "messages" && !late) error = sayable(e);
+      if (late || status === void 0 || status >= 500) {
+        misses += 1;
+        again = late ? 0 : Math.min(1e3 * 2 ** (misses - 1), POLL_IDLE_MS);
+      }
     } finally {
+      clearTimeout(patience);
       if (ctrl === mine) ctrl = null;
     }
-    if (!loaded) {
+    if (!loaded && again === void 0) {
       listCount = -1;
       if (view === "messages" && chatId === null && draft === null && !text.value.trim() && !outbox.length && !picked.length) enterMessages();
+      loaded = true;
     }
-    loaded = true;
     draw();
     drawFab();
-    schedule();
+    schedule(open && document.visibilityState !== "hidden" ? again : void 0);
+  };
+  const refresh = () => {
+    const who = o.distinctId();
+    if (who === visitor && !refused) return;
+    if (who !== visitor) {
+      if (person && !o.user()?.id && remembers) keep(chatsKey, null);
+      visitor = who;
+      ctrl?.abort();
+      ctrl = null;
+      unseen = [];
+      loaded = false;
+      misses = 0;
+      recall();
+    }
+    person = o.user()?.id;
+    draw();
+    drawFab();
+    schedule(0);
   };
   function schedule(now) {
     clearTimeout(poll);
@@ -1239,16 +1350,17 @@ var build = (o) => {
     addFiles([...e.dataTransfer?.files ?? []]);
   });
   email.addEventListener("input", () => draw());
-  function show(v = "home", still = false) {
+  function show(v = "home", still2 = false) {
     const was = open;
     open = true;
     view = v === "help" && !helpOn || v === "updates" && !updatesOn ? "home" : v;
     drawn = -1;
     previewGone = true;
-    pop.toggleAttribute("data-still", still);
+    homeSeen = null;
+    pop.toggleAttribute("data-still", still2);
     enter(pop);
     if (was) replay(body, "ckw-msgr-enter");
-    if (articles === null || view === "help" && query) void loadArticles();
+    if (articles === null || hasArticles === null || view === "help" && query) void loadArticles();
     draw();
     drawFab();
     if (view === "messages") {
@@ -1293,6 +1405,7 @@ var build = (o) => {
     },
     close,
     toggle: () => open ? close() : show(),
+    refresh,
     isOpen: () => open,
     onClose: (fn) => {
       afterClose = fn;