@mrrocket/sdk 0.14.0 → 0.16.0

package/dist/messenger-ui.js

@@ -1,5 +1,13 @@
 // src/messenger-ui.ts
-import { createApi, inkOn, replyLine } from "./api-client.js";
+import {
+  BRAND_URL,
+  CHAT_FILES_PER_MESSAGE,
+  CHAT_FILE_MAX_BYTES,
+  CHAT_FILE_TYPES,
+  createApi,
+  inkOn,
+  replyLine
+} from "./api-client.js";
 import { injectStyles } from "./styles-css.js";
 var POLL_OPEN_MS = 4e3;
 var POLL_WAITING_MS = 8e3;
@@ -61,8 +69,15 @@ var I = {
   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"
+  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",
+  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 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) => {
   const svg = document.createElementNS(SVG_NS, "svg");
@@ -73,6 +88,18 @@ var filled = (d, size) => {
   svg.appendChild(path);
   return svg;
 };
+var duo = (shape, cut, size, width = 2) => {
+  const svg = filled(shape, size);
+  const path = document.createElementNS(SVG_NS, "path");
+  for (const [k, v] of Object.entries({ d: cut, class: "ckw-cut", fill: "none", "stroke-width": String(width), "stroke-linecap": "round", "stroke-linejoin": "round" })) path.setAttribute(k, v);
+  svg.appendChild(path);
+  return svg;
+};
+var DOTS = "M8 12h.01M12 12h.01M16 12h.01";
+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 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z";
+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 chime = /* @__PURE__ */ (() => {
   let ctx = null;
   const get = () => {
@@ -149,11 +176,11 @@ var mountMessenger = (o) => {
   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 });
+    real = build({ ...look ?? {}, ...defined, accent: o.accent ?? look?.accent, theme: o.theme ?? look?.theme, branding: look?.branding ?? true });
     for (const fn of queued.splice(0)) fn(real);
   };
   const timer = setTimeout(() => start(null), LOOK_WAIT_MS);
-  (o.client ?? createApi({ host: o.host, apiKey: o.apiKey, distinctId: o.distinctId(), user: o.user() })).messengerLook(ctrl.signal).then((look) => start(look)).catch(() => start(null)).finally(() => clearTimeout(timer));
+  (o.client ?? createApi({ host: o.host, apiKey: o.apiKey, distinctId: o.distinctId(), user: o.user(), userHash: o.userHash?.() })).messengerLook(ctrl.signal).then((look) => start(look)).catch(() => start(null)).finally(() => clearTimeout(timer));
   return {
     open: (v) => later((h) => h.open(v)),
     close: () => real?.close(),
@@ -166,10 +193,11 @@ var mountMessenger = (o) => {
     }
   };
 };
+var PLACES = ["top-left", "top-center", "top-right", "middle-left", "middle-right", "bottom-left", "bottom-center", "bottom-right"];
 var build = (o) => {
   injectStyles();
-  const position = o.position ?? "bottom-right";
-  const title = o.title || "Chat with us";
+  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 askEmail = o.askEmail ?? true;
   const label = o.label ?? "";
@@ -179,13 +207,20 @@ var build = (o) => {
   const helpOn = o.help ?? true;
   const soundOn = o.sound ?? true;
   const previewOn = o.preview ?? true;
-  const api = () => o.client ?? createApi({ host: o.host, apiKey: o.apiKey, distinctId: o.distinctId(), user: o.user() });
-  const root = el("div", { class: "ckw-root", "data-theme": o.theme ?? "auto" });
+  const api = () => o.client ?? createApi({ host: o.host, apiKey: o.apiKey, distinctId: o.distinctId(), user: o.user(), userHash: o.userHash?.() });
+  const root = el("div", {
+    class: "ckw-root",
+    "data-theme": o.theme ?? "auto",
+    "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"
+  });
   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));
   }
+  o.glow?.slice(0, 2).forEach((c, i) => /^#[0-9a-f]{6}$/i.test(c) && root.style.setProperty(`--ckw-glow${i + 2}`, c));
   (o.container ?? document.body).appendChild(root);
   let open = false;
   let view = "home";
@@ -234,6 +269,13 @@ 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 logo = el("span", { class: "ckw-msgr-logo", "aria-hidden": "true" });
+  if (o.logo) {
+    const img = el("img", { src: o.logo, alt: "" });
+    img.addEventListener("error", () => logo.replaceChildren(avatar("sm")));
+    logo.append(img);
+  } else logo.append(avatar("sm"));
+  const sky = el("div", { class: "ckw-msgr-sky", "aria-hidden": "true" });
   const leaving = /* @__PURE__ */ new Map();
   const enter = (node, parent = root) => {
     clearTimeout(leaving.get(node));
@@ -262,8 +304,8 @@ var build = (o) => {
   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))
+    el("span", { class: "ckw-msgr-fab-i", "data-i": "chat" }, duo(BUBBLE, DOTS, label ? 20 : 27, 2.6)),
+    el("span", { class: "ckw-msgr-fab-i", "data-i": "x" }, icon(I.down, label ? 18 : 24))
   );
   const fabCount = el("span", { class: "ckw-msgr-count", "aria-hidden": "true" });
   fab.append(fabIcons);
@@ -285,7 +327,7 @@ var build = (o) => {
     const m = unseen.at(-1);
     if (!previewShown() || !m) return leave(prev);
     hideTeaser(true);
-    const x = el("button", { type: "button", class: "ckw-msgr-preview-x", "aria-label": "Dismiss" }, icon(I.cross, 12));
+    const x = el("button", { type: "button", class: "ckw-msgr-preview-x", "aria-label": "Dismiss" }, icon(I.cross, 14));
     x.addEventListener("click", (e) => {
       e.stopPropagation();
       previewGone = true;
@@ -294,12 +336,11 @@ var build = (o) => {
     const card = el(
       "button",
       { type: "button", class: "ckw-msgr-preview-card" },
-      avatar(),
       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-text" }, m.body)
+        el("span", { class: "ckw-msgr-preview-text" }, lineOf(m))
       )
     );
     card.addEventListener("click", () => show("messages"));
@@ -311,7 +352,7 @@ var build = (o) => {
   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"));
+    const chat = el("button", { type: "button", class: "ckw-msgr-teaser-b", "data-main": "" }, icon(I.chat), el("span", {}, "Chat"));
     chat.addEventListener("click", () => show("messages"));
     const buttons = [chat];
     if (helpOn && hasArticles) {
@@ -352,23 +393,24 @@ var build = (o) => {
   const body = el("div", { class: "ckw-pop-body ckw-msgr-body" });
   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));
+  const mid = el("span", { class: "ckw-msgr-mid" });
+  const tabs = el("nav", { class: "ckw-msgr-tabs", "aria-label": "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;
       go(v);
     });
     return b;
   };
-  const chatTab = segTab("messages", "Chat", I.chat);
-  const helpTab = segTab("help", "Help", I.book);
+  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 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));
+  bar.append(lead, mid, 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 = () => {
@@ -393,7 +435,6 @@ var build = (o) => {
       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");
@@ -401,16 +442,6 @@ var build = (o) => {
     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));
@@ -428,18 +459,20 @@ var build = (o) => {
           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);
+    else if (view === "messages") lead.replaceChildren(back(() => go("home"), "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"));
+    else mid.replaceChildren();
+    const items = helpOn && hasArticles !== false ? [homeTab, chatTab, helpTab] : [homeTab, chatTab];
+    if (tabs.childNodes.length !== items.length) tabs.replaceChildren(...items);
+    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");
     if (unseen.length && view !== "messages") {
       tabCount.textContent = String(Math.min(unseen.length, 9));
-      if (!tabCount.isConnected) chatTab.append(tabCount);
+      if (!tabCount.isConnected) chatTab.firstChild.appendChild(tabCount);
     } else tabCount.remove();
   };
   const form = el("form", { class: "ckw-msgr-compose" });
@@ -448,13 +481,164 @@ var build = (o) => {
   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, el("div", { class: "ckw-msgr-box-foot" }, el("span", { class: "ckw-msgr-hint" }, "Enter to send"), send));
+  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" } : {} },
+    icon(I.clip, 18)
+  );
+  row.append(text, el("div", { class: "ckw-msgr-tools" }, clip, el("span", { class: "ckw-msgr-sp" }), send));
   row.addEventListener("click", (e) => e.target === row && text.focus());
   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" });
+  let picked = [];
+  const localUrls = /* @__PURE__ */ new Map();
+  const fileUrl = (id) => localUrls.get(id) ?? api().attachmentUrl(id);
+  const forget = (p) => {
+    p.ctrl.abort();
+    if (![...localUrls.values()].includes(p.local)) URL.revokeObjectURL(p.local);
+  };
+  const dropFile = (p) => {
+    picked = picked.filter((x) => x !== p);
+    forget(p);
+  };
+  const addFiles = (list2) => {
+    error = "";
+    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.`;
+        break;
+      }
+      if (!CHAT_FILE_TYPES.includes(f.type)) {
+        error = "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.`;
+        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() };
+      p.up = api().uploadChatFile(f, p.ctrl.signal).then(
+        (r) => {
+          p.id = r.id;
+          draw();
+        },
+        (e) => {
+          if (e.name === "AbortError") return;
+          dropFile(p);
+          error = `${p.name}: ${e.message}`;
+          draw();
+        }
+      );
+      picked.push(p);
+    }
+    if (open && view !== "messages") go("messages");
+    else draw();
+    text.focus();
+  };
+  let traySig = "";
+  const drawTray = () => {
+    const sig = picked.map((p) => `${p.key}:${p.id ? 1 : 0}`).join(",");
+    if (sig !== traySig) {
+      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));
+          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);
+        })
+      );
+    }
+    if (!picked.length) tray.remove();
+    else if (!tray.isConnected) form.insertBefore(tray, row);
+  };
+  const shoot = async () => {
+    let stream;
+    try {
+      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.";
+        draw();
+      }
+      return;
+    }
+    root.style.visibility = "hidden";
+    let blob = null;
+    try {
+      const video = document.createElement("video");
+      video.muted = true;
+      video.playsInline = true;
+      video.srcObject = stream;
+      await video.play();
+      await new Promise((r) => setTimeout(r, 300));
+      const v = video;
+      await new Promise((r) => v.requestVideoFrameCallback ? v.requestVideoFrameCallback(() => r()) : requestAnimationFrame(() => r()));
+      const canvas = document.createElement("canvas");
+      canvas.width = video.videoWidth;
+      canvas.height = video.videoHeight;
+      canvas.getContext("2d")?.drawImage(video, 0, 0);
+      const encode = (type, q) => new Promise((r) => canvas.toBlob(r, type, q));
+      blob = await encode("image/png");
+      if (blob && blob.size > 4.5 * 1024 * 1024) blob = await encode("image/jpeg", 0.9);
+    } catch {
+      blob = null;
+    } finally {
+      for (const t of stream.getTracks()) t.stop();
+      root.style.visibility = "";
+    }
+    if (!blob || !blob.size) {
+      error = "The screenshot did not work here. Attach a picture instead.";
+      return draw();
+    }
+    const stamp = (/* @__PURE__ */ new Date()).toISOString().slice(0, 16).replace(/[:T]/g, "-");
+    addFiles([Object.assign(blob, { name: `screenshot-${stamp}.${blob.type === "image/png" ? "png" : "jpg"}` })]);
+  };
+  const amenu = el("div", { class: "ckw-msgr-menu ckw-msgr-amenu", role: "menu" });
+  const amenuOpen = () => amenu.isConnected && !amenu.hasAttribute("data-out");
+  const closeAmenu = () => {
+    clip.setAttribute("aria-expanded", "false");
+    leave(amenu, 120);
+  };
+  const amenuItem = (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();
+      closeAmenu();
+      act();
+    });
+    return b;
+  };
+  clip.addEventListener("click", (e) => {
+    e.stopPropagation();
+    chime.unlock();
+    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())
+    );
+    clip.setAttribute("aria-expanded", "true");
+    enter(amenu, form);
+    amenu.querySelector("button")?.focus();
+  });
+  picker.addEventListener("change", () => {
+    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 emailOk = () => !email.value.trim() || EMAIL.test(email.value.trim());
-  const canSend = () => !!text.value.trim() && !pending && emailOk();
+  const canSend = () => (!!text.value.trim() || picked.length > 0) && !pending && emailOk();
   const go = (v) => {
     const changed = JSON.stringify(v) !== JSON.stringify(view);
     view = v;
@@ -468,9 +652,26 @@ var build = (o) => {
     } else if (v === "help") helpInput.focus();
     schedule(0);
   };
+  const picture = (src, alt) => {
+    const img = el("img", { src, alt, loading: "lazy" });
+    img.addEventListener("load", () => {
+      if (body.scrollHeight - body.scrollTop - body.clientHeight < img.clientHeight + 120) body.scrollTop = body.scrollHeight;
+    });
+    return img;
+  };
   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));
+    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)
+      li.append(
+        el(
+          "div",
+          { class: "ckw-msg-files" },
+          ...m.attachments.map(
+            (f) => f.type.startsWith("image/") ? el("a", { class: "ckw-msg-img", href: fileUrl(f.id), target: "_blank", rel: "noopener", title: f.name }, picture(fileUrl(f.id), f.name)) : el("a", { class: "ckw-msgr-cite", href: fileUrl(f.id), target: "_blank", rel: "noopener" }, icon(I.doc, 14), el("span", {}, f.name))
+          )
+        )
+      );
     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 }));
@@ -535,29 +736,43 @@ var build = (o) => {
     }
     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));
+  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");
+    text.value = askIn.value;
+    askIn.value = "";
+    askGo.disabled = true;
+    go("messages");
+    if (canSend()) void submit();
+  });
   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 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)
+      "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", { class: "ckw-msgr-hello-sub" }, rest)
     );
     const last = (thread?.messages ?? []).at(-1);
-    const parts = [hero];
+    const parts = [hero, askForm];
     if (last) {
       const recent = el(
         "button",
-        { type: "button", class: "ckw-msgr-card ckw-msgr-recent" },
-        el("span", { class: "ckw-msgr-card-label" }, "Recent message"),
+        { type: "button", class: "ckw-msgr-card ckw-msgr-recent", "aria-label": `Recent message: ${lineOf(last)}` },
         el(
           "span",
           { class: "ckw-msgr-recent-row" },
-          avatar(),
+          avatar("sm"),
           el(
             "span",
             { class: "ckw-msgr-card-main" },
-            el("span", { class: "ckw-msgr-card-sub ckw-msgr-recent-text" }, last.body),
+            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)
@@ -566,17 +781,9 @@ var build = (o) => {
       recent.addEventListener("click", () => go("messages"));
       parts.push(recent);
     }
-    const msgCard = el(
-      "button",
-      { type: "button", class: "ckw-msgr-card" },
-      el("span", { class: "ckw-msgr-card-main" }, el("b", {}, "Send us a message"), el("span", { class: "ckw-msgr-card-sub" }, reply)),
-      el("span", { class: "ckw-msgr-go" }, icon(I.send))
-    );
-    msgCard.addEventListener("click", () => go("messages"));
-    parts.push(msgCard);
     if (helpOn && hasArticles !== false) {
-      const helpCard = el("div", { class: "ckw-msgr-card ckw-msgr-card-col" }, searchBox());
-      const top = (articles ?? []).slice(0, 4);
+      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);
@@ -667,20 +874,13 @@ 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 = () => {
     const msgs = thread?.messages ?? [];
-    const parts = [introNode];
+    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)}`;
+      const sig = `${msgs.map((m) => m.id).join(",")}|${pending ? `${pending.body}+${pending.attachments?.length ?? 0}` : ""}|${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));
@@ -716,8 +916,9 @@ var build = (o) => {
     if (needEmail()) {
       if (emailOk()) email.removeAttribute("aria-invalid");
       else email.setAttribute("aria-invalid", "true");
-      if (!email.isConnected) form.insertBefore(email, row);
+      if (!email.isConnected) form.insertBefore(email, tray.isConnected ? tray : row);
     } else email.remove();
+    drawTray();
     send.disabled = !canSend();
   };
   const draw = () => {
@@ -728,11 +929,11 @@ var build = (o) => {
     else if (view === "messages") drawMessages();
     else if (view === "help") drawHelp();
     else drawArticle(view.article);
-    const kids = [bar, body];
-    if (view === "messages") kids.push(form);
+    const kids = view === "home" ? [sky, bar, body] : [bar, body];
+    kids.push(view === "messages" ? 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);
-    placeMark();
   };
   const tick = async () => {
     ctrl?.abort();
@@ -764,20 +965,46 @@ var build = (o) => {
   document.addEventListener("visibilitychange", onVisible);
   const submit = async () => {
     const msg = text.value.trim();
-    if (!msg || pending || !emailOk()) return;
+    const files = picked;
+    if (!msg && !files.length || pending || !emailOk()) return;
     chime.unlock();
-    pending = { id: "pending", from: "visitor", body: msg, at: (/* @__PURE__ */ new Date()).toISOString() };
+    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 })) } : {}
+    };
     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 {
-      take(await api().sendChat({ body: msg, email: needEmail() && email.value.trim() ? email.value.trim() : void 0, url: window.location.href.slice(0, 500) }));
+      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();
   };
   form.addEventListener("submit", (e) => {
@@ -791,6 +1018,27 @@ var build = (o) => {
     }
   });
   text.addEventListener("input", () => send.disabled = !canSend());
+  text.addEventListener("paste", (e) => {
+    const fs = [...e.clipboardData?.files ?? []];
+    if (!fs.length) return;
+    e.preventDefault();
+    addFiles(fs);
+  });
+  const hasFiles = (e) => !!e.dataTransfer && [...e.dataTransfer.types].includes("Files");
+  pop.addEventListener("dragover", (e) => {
+    if (!hasFiles(e)) return;
+    e.preventDefault();
+    pop.setAttribute("data-drop", "");
+  });
+  pop.addEventListener("dragleave", (e) => {
+    if (!e.relatedTarget || !pop.contains(e.relatedTarget)) pop.removeAttribute("data-drop");
+  });
+  pop.addEventListener("drop", (e) => {
+    if (!hasFiles(e)) return;
+    e.preventDefault();
+    pop.removeAttribute("data-drop");
+    addFiles([...e.dataTransfer?.files ?? []]);
+  });
   email.addEventListener("input", () => draw());
   function show(v = "home", still = false) {
     const was = open;
@@ -820,9 +1068,13 @@ var build = (o) => {
     schedule();
     if (launcherOn) fab.focus();
   }
+  pop.addEventListener("click", () => amenuOpen() && closeAmenu());
   const onKey = (e) => {
     if (e.key !== "Escape" || !open) return;
-    if (menuOpen()) {
+    if (amenuOpen()) {
+      closeAmenu();
+      clip.focus();
+    } else if (menuOpen()) {
       closeMenu();
       menuBtn.focus();
     } else close();
@@ -841,6 +1093,8 @@ var build = (o) => {
       clearTimeout(teaserTimer);
       for (const t of leaving.values()) clearTimeout(t);
       ctrl?.abort();
+      for (const p of picked) forget(p);
+      for (const u of localUrls.values()) URL.revokeObjectURL(u);
       document.removeEventListener("keydown", onKey);
       document.removeEventListener("visibilitychange", onVisible);
       root.remove();