@mrrocket/sdk 0.13.0 → 0.15.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;
@@ -40,7 +48,7 @@ var el = (tag, attrs = {}, ...kids) => {
 var SVG_NS = "http://www.w3.org/2000/svg";
 var icon = (d, size = 16) => {
   const svg = document.createElementNS(SVG_NS, "svg");
-  for (const [k, v] of Object.entries({ class: "ckw-icon", width: String(size), height: String(size), viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", "stroke-width": "1.7", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }))
+  for (const [k, v] of Object.entries({ class: "ckw-icon", width: String(size), height: String(size), viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "1.75", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }))
     svg.setAttribute(k, v);
   const path = document.createElementNS(SVG_NS, "path");
   path.setAttribute("d", d);
@@ -48,17 +56,50 @@ var icon = (d, size = 16) => {
   return svg;
 };
 var I = {
-  cross: "m4 4 8 8M12 4l-8 8",
-  chat: "M2.5 4.5a2 2 0 0 1 2-2h7a2 2 0 0 1 2 2v4.5a2 2 0 0 1-2 2H7l-3 2.5V11a2 2 0 0 1-1.5-2z",
-  send: "M2.5 8h10M8.5 3.5 13 8l-4.5 4.5",
-  up: "M8 13V3M3.5 7.5 8 3l4.5 4.5",
-  home: "M2.5 7 8 2.5 13.5 7v6a1 1 0 0 1-1 1h-3v-4h-3v4h-3a1 1 0 0 1-1-1z",
-  help: "M8 14.5A6.5 6.5 0 1 0 8 1.5a6.5 6.5 0 0 0 0 13zM6.2 6.2a1.9 1.9 0 1 1 2.6 1.8c-.5.2-.8.6-.8 1.1v.4M8 11.6v.1",
-  back: "M10 3.5 5.5 8l4.5 4.5",
-  next: "M6 3.5 10.5 8 6 12.5",
-  search: "M7 11.5a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9zM10.5 10.5l3 3",
-  doc: "M4 1.5h5.5l3 3V14a.5.5 0 0 1-.5.5H4a.5.5 0 0 1-.5-.5V2a.5.5 0 0 1 .5-.5zM9.5 1.5v3h3M6 8.5h4M6 11h4"
+  cross: "M18 6 6 18M6 6l12 12",
+  chat: "M7.9 20A9 9 0 1 0 4 16.1L2 22z",
+  send: "M5 12h14M12 5l7 7-7 7",
+  up: "M12 19V5M5 12l7-7 7 7",
+  home: "M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z",
+  back: "m15 18-6-6 6-6",
+  next: "m9 18 6-6-6-6",
+  search: "M19 11a8 8 0 1 1-16 0 8 8 0 0 1 16 0zM21 21l-4.3-4.3",
+  doc: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7zM14 2v4a2 2 0 0 0 2 2h4M10 9H8M16 13H8M16 17H8",
+  book: "M12 7v14M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z",
+  dots: "M13 12a1 1 0 1 1-2 0 1 1 0 0 1 2 0zM13 5a1 1 0 1 1-2 0 1 1 0 0 1 2 0zM13 19a1 1 0 1 1-2 0 1 1 0 0 1 2 0z",
+  expand: "M15 3h6v6M21 3l-7 7M3 21l7-7M9 21H3v-6",
+  collapse: "m14 10 7-7M20 10h-6V4M3 21l7-7M4 14h6v6",
+  minus: "M5 12h14",
+  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");
+  for (const [k, v] of Object.entries({ class: "ckw-icon", width: String(size), height: String(size), viewBox: "0 0 24 24", fill: "currentColor", stroke: "currentColor", "stroke-width": "1.5", "stroke-linejoin": "round", "aria-hidden": "true" }))
+    svg.setAttribute(k, v);
+  const path = document.createElementNS(SVG_NS, "path");
+  path.setAttribute("d", d);
+  svg.appendChild(path);
+  return svg;
+};
+var 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 = () => {
@@ -135,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);
-  createApi({ host: o.host, apiKey: o.apiKey, distinctId: o.distinctId(), user: o.user() }).messengerLook(ctrl.signal).then((look) => start(look)).catch(() => start(null)).finally(() => clearTimeout(timer));
+  (o.client ?? createApi({ host: o.host, apiKey: o.apiKey, distinctId: o.distinctId(), user: o.user() })).messengerLook(ctrl.signal).then((look) => start(look)).catch(() => start(null)).finally(() => clearTimeout(timer));
   return {
     open: (v) => later((h) => h.open(v)),
     close: () => real?.close(),
@@ -152,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 ?? "";
@@ -165,13 +207,21 @@ var build = (o) => {
   const helpOn = o.help ?? true;
   const soundOn = o.sound ?? true;
   const previewOn = o.preview ?? true;
-  const api = () => createApi({ host: o.host, apiKey: o.apiKey, distinctId: o.distinctId(), user: o.user() });
-  const 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() });
+  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));
   }
-  document.body.appendChild(root);
+  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";
   let thread = null;
@@ -187,6 +237,8 @@ var build = (o) => {
   let query = "";
   let rated = /* @__PURE__ */ new Set();
   let hasArticles = null;
+  let collection = null;
+  let wide = false;
   const teamMsgs = (t) => (t?.messages ?? []).filter((m) => m.from !== "visitor");
   const lastTeamId = (t) => teamMsgs(t).at(-1)?.id ?? "";
   const watching = () => open && view === "messages" && document.visibilityState !== "hidden";
@@ -217,24 +269,65 @@ 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));
+    leaving.delete(node);
+    node.removeAttribute("data-out");
+    if (!node.isConnected) parent.appendChild(node);
+  };
+  const leave = (node, ms = 180) => {
+    if (!node.isConnected || leaving.has(node)) return;
+    node.setAttribute("data-out", "");
+    leaving.set(
+      node,
+      setTimeout(() => {
+        leaving.delete(node);
+        node.removeAttribute("data-out");
+        node.remove();
+      }, ms)
+    );
+  };
+  const replay = (node, cls) => {
+    node.classList.remove(cls);
+    void node.offsetWidth;
+    node.classList.add(cls);
+  };
   const fab = el("button", { type: "button", class: `ckw-fab ckw-msgr-fab${label ? "" : " ckw-msgr-round"}`, "data-pos": position, "aria-haspopup": "dialog" });
+  const fabIcons = el(
+    "span",
+    { class: "ckw-msgr-fab-ic", "aria-hidden": "true" },
+    el("span", { class: "ckw-msgr-fab-i", "data-i": "chat" }, 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);
+  if (label) fab.append(el("span", {}, label));
   const prev = el("div", { class: "ckw-msgr-preview", "data-pos": position, role: "status" });
-  let fabShows = null;
   const drawFab = () => {
-    const glyph = icon(open ? I.cross : I.chat, label ? 18 : 24);
-    if (fabShows !== null && fabShows !== open) glyph.classList.add("ckw-turn");
-    fabShows = open;
-    fab.replaceChildren(glyph);
-    if (label) fab.append(el("span", {}, label));
-    if (unseen.length && !open) fab.append(el("span", { class: "ckw-msgr-count", "aria-hidden": "true" }, String(Math.min(unseen.length, 9))));
+    fab.toggleAttribute("data-open", open);
+    if (unseen.length && !open) {
+      const n = String(Math.min(unseen.length, 9));
+      if (fabCount.textContent !== n) fabCount.textContent = n;
+      if (!fabCount.isConnected) fab.append(fabCount);
+    } else fabCount.remove();
     fab.setAttribute("aria-expanded", String(open));
     fab.setAttribute("aria-label", open ? "Close chat" : unseen.length ? `Open chat, ${unseen.length} new ${unseen.length === 1 ? "reply" : "replies"}` : "Open chat");
     drawPreview();
   };
+  const previewShown = () => previewOn && !open && !previewGone && !!unseen.length && launcherOn;
   const drawPreview = () => {
     const m = unseen.at(-1);
-    if (!previewOn || open || previewGone || !m || !launcherOn) return prev.remove();
-    const x = el("button", { type: "button", class: "ckw-msgr-preview-x", "aria-label": "Dismiss" }, icon(I.cross, 12));
+    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, 14));
     x.addEventListener("click", (e) => {
       e.stopPropagation();
       previewGone = true;
@@ -243,50 +336,315 @@ 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"));
     prev.replaceChildren(card, x);
-    if (!prev.isConnected) root.appendChild(prev);
+    enter(prev);
   };
+  const teaser = el("div", { class: "ckw-msgr-teaser", "data-pos": position });
+  let teaserTimer;
+  const showTeaser = () => {
+    clearTimeout(teaserTimer);
+    if (open || previewShown() || !launcherOn) return;
+    const chat = el("button", { type: "button", class: "ckw-msgr-teaser-b", "data-main": "" }, icon(I.chat), el("span", {}, "Chat"));
+    chat.addEventListener("click", () => show("messages"));
+    const buttons = [chat];
+    if (helpOn && hasArticles) {
+      const search = el("button", { type: "button", class: "ckw-msgr-teaser-b" }, icon(I.search), el("span", {}, "Search"));
+      search.addEventListener("click", () => show("help"));
+      buttons.push(search);
+    }
+    teaser.replaceChildren(
+      el(
+        "div",
+        { class: "ckw-msgr-teaser-top" },
+        el("span", { class: "ckw-msgr-teaser-t" }, el("b", {}, greeting), el("span", { class: "ckw-msgr-online" }, reply)),
+        avatar()
+      ),
+      el("div", { class: "ckw-msgr-teaser-row" }, ...buttons)
+    );
+    enter(teaser);
+  };
+  function hideTeaser(now = false) {
+    clearTimeout(teaserTimer);
+    if (now) return leave(teaser, 140);
+    teaserTimer = setTimeout(() => leave(teaser, 140), 260);
+  }
+  const hoverable = (e) => e.pointerType === "mouse";
+  for (const node of [fab, teaser]) {
+    node.addEventListener("pointerenter", (e) => hoverable(e) && (node === fab ? showTeaser() : clearTimeout(teaserTimer)));
+    node.addEventListener("pointerleave", (e) => hoverable(e) && hideTeaser());
+  }
   fab.addEventListener("click", () => {
     chime.unlock();
+    hideTeaser(true);
     if (open) close();
     else show(unseen.length ? "messages" : "home");
   });
   if (launcherOn) root.appendChild(fab);
   const pop = el("div", { class: "ckw-pop ckw-msgr", "data-pos": position, role: "dialog", "aria-label": title });
-  const head = el("div", { class: "ckw-pop-head ckw-msgr-head" });
+  const bar = el("div", { class: "ckw-msgr-bar" });
   const body = el("div", { class: "ckw-pop-body ckw-msgr-body" });
-  const tabs = el("nav", { class: "ckw-msgr-tabs", "aria-label": "Messenger" });
   pop.addEventListener("click", () => chime.unlock());
+  const lead = el("span", { class: "ckw-msgr-lead" });
+  const 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 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, 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 = () => {
+    menuBtn.setAttribute("aria-expanded", "false");
+    leave(menu, 120);
+  };
+  const menuItem = (d, name, act) => {
+    const b = el("button", { type: "button", class: "ckw-msgr-menu-i", role: "menuitem" }, icon(d, 15), el("span", {}, name));
+    b.addEventListener("click", (e) => {
+      e.stopPropagation();
+      closeMenu();
+      act();
+    });
+    return b;
+  };
+  menuBtn.addEventListener("click", (e) => {
+    e.stopPropagation();
+    if (menuOpen()) return closeMenu();
+    menu.replaceChildren(
+      el("span", { class: "ckw-msgr-menu-h" }, "Quick actions"),
+      menuItem(I.minus, "Minimize chat", () => close()),
+      menuItem(wide ? I.collapse : I.expand, wide ? "Collapse view" : "Expand view", () => {
+        wide = !wide;
+        pop.toggleAttribute("data-wide", wide);
+      })
+    );
+    menuBtn.setAttribute("aria-expanded", "true");
+    enter(menu, pop);
+    menu.querySelector("button")?.focus();
+  });
+  pop.addEventListener("click", () => menuOpen() && closeMenu());
+  const drawBar = () => {
+    const back = (to, name) => {
+      const b = el("button", { type: "button", class: "ckw-msgr-ib", "aria-label": name }, icon(I.back, 18));
+      b.addEventListener("click", to);
+      return b;
+    };
+    if (typeof view !== "string")
+      lead.replaceChildren(
+        back(() => go("help"), "Back to help")
+      );
+    else if (view === "help" && collection && !query.trim())
+      lead.replaceChildren(
+        back(() => {
+          collection = null;
+          go("help");
+        }, "All collections")
+      );
+    else 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.firstChild.appendChild(tabCount);
+    } else tabCount.remove();
+  };
   const form = el("form", { class: "ckw-msgr-compose" });
   const err = el("p", { class: "ckw-msgr-error", role: "alert" });
   const email = el("input", { class: "ckw-input", type: "email", inputmode: "email", autocomplete: "email", placeholder: "Your email (optional), so we can follow up", "aria-label": "Your email (optional)", maxlength: "200" });
-  const row = el("div", { class: "ckw-msgr-row" });
-  const text = el("textarea", { class: "ckw-textarea ckw-msgr-input", rows: "1", placeholder: "Write a message\u2026", "aria-label": "Message", maxlength: "4000" });
+  const row = el("div", { class: "ckw-msgr-box" });
+  const text = el("textarea", { class: "ckw-textarea ckw-msgr-input", rows: "1", placeholder: "Write your message\u2026", "aria-label": "Message", maxlength: "4000" });
   const send = el("button", { type: "submit", class: "ckw-msgr-send", "aria-label": "Send" }, icon(I.up));
-  row.append(text, send);
+  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 closeBtn = () => {
-    const b = el("button", { type: "button", class: "ckw-btn ckw-btn-ghost ckw-msgr-x", "aria-label": "Close messenger" }, icon(I.cross));
-    b.addEventListener("click", () => close());
-    return b;
-  };
+  const canSend = () => (!!text.value.trim() || picked.length > 0) && !pending && emailOk();
   const go = (v) => {
+    const changed = JSON.stringify(v) !== JSON.stringify(view);
     view = v;
     drawn = -1;
     draw();
+    if (changed) replay(body, "ckw-msgr-enter");
     if (v === "messages") {
       markSeen();
       drawFab();
@@ -294,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 }));
@@ -310,9 +685,19 @@ var build = (o) => {
     b.addEventListener("click", () => go({ article: a.id }));
     return b;
   };
-  const searchBox = () => {
+  const helpRow = (name, sub, meta, act) => {
+    const b = el(
+      "button",
+      { type: "button", class: "ckw-msgr-hrow" },
+      el("span", { class: "ckw-msgr-hrow-main" }, el("b", {}, name), sub ? el("span", { class: "ckw-msgr-hrow-sub" }, sub) : null, meta ? el("span", { class: "ckw-msgr-hrow-meta" }, meta) : null),
+      icon(I.next, 16)
+    );
+    b.addEventListener("click", act);
+    return b;
+  };
+  const searchBox = (placeholder = "Search for help") => {
     const wrap = el("label", { class: "ckw-msgr-search" });
-    const input = el("input", { class: "ckw-msgr-search-in", type: "search", placeholder: "Search for help", "aria-label": "Search for help", maxlength: "200" });
+    const input = el("input", { class: "ckw-msgr-search-in", type: "search", placeholder, "aria-label": "Search for help", maxlength: "200" });
     input.value = query;
     let t;
     input.addEventListener("input", () => {
@@ -329,10 +714,10 @@ var build = (o) => {
         if (view !== "help") go("help");
       }
     });
-    wrap.append(input, icon(I.search, 16));
+    wrap.append(icon(I.search, 16), input);
     return wrap;
   };
-  const helpSearch = searchBox();
+  const helpSearch = searchBox("Search our help center\u2026");
   const helpInput = helpSearch.querySelector("input");
   let loadingArticles = false;
   const loadArticles = async (force = false) => {
@@ -351,24 +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 = () => {
-    head.replaceChildren(el("span", { class: "ckw-msgr-brand" }, avatar("sm"), el("span", {}, title)), closeBtn());
-    const hero = el("div", { class: "ckw-msgr-hero" }, el("p", { class: "ckw-msgr-hello" }, greeting));
+    const 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(
+      "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)
@@ -377,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);
@@ -395,30 +791,50 @@ var build = (o) => {
     body.replaceChildren(...parts);
   };
   const drawHelp = () => {
-    head.replaceChildren(el("span", {}, "Help"), closeBtn());
     if (helpInput.value !== query) helpInput.value = query;
-    const parts = [helpSearch];
+    const q = query.trim();
+    const all = articles ?? [];
+    const groups = /* @__PURE__ */ new Map();
+    for (const a of all) groups.set(a.collection, [...groups.get(a.collection) ?? [], a]);
+    const inside = !q && collection !== null ? groups.get(collection) ?? [] : null;
+    const heading = q ? "Search results" : inside ? collection ?? "" : "Most read articles";
+    const parts = [el("h2", { class: "ckw-msgr-help-h" }, heading), helpSearch];
     if (articles === null) parts.push(el("div", { class: "ckw-skel" }));
-    else if (!articles.length) {
+    else if (!all.length) {
       const ask = el("button", { type: "button", class: "ckw-btn ckw-btn-primary" }, "Send us a message");
       ask.addEventListener("click", () => go("messages"));
-      parts.push(el("div", { class: "ckw-msgr-empty" }, el("p", {}, query.trim() ? `Nothing found for \u201C${query.trim()}\u201D.` : "No help articles yet."), ask));
-    } else if (query.trim()) parts.push(el("div", { class: "ckw-msgr-card ckw-msgr-card-col" }, ...articles.map(articleRow)));
+      parts.push(el("div", { class: "ckw-msgr-empty" }, el("p", {}, q ? `Nothing found for \u201C${q}\u201D.` : "No help articles yet."), ask));
+    } else if (q || inside)
+      parts.push(
+        el(
+          "div",
+          { class: "ckw-msgr-hlist" },
+          ...(inside ?? all).map((a) => helpRow(a.title, a.excerpt.startsWith(a.title) ? a.excerpt.slice(a.title.length).trim() : a.excerpt, q ? a.collection : "", () => go({ article: a.id })))
+        )
+      );
+    else
+      parts.push(
+        el(
+          "div",
+          { class: "ckw-msgr-hlist" },
+          ...[...groups].map(
+            ([name, items]) => helpRow(name, items.map((a) => a.title).join(", "), `${items.length} ${items.length === 1 ? "article" : "articles"}`, () => {
+              collection = name;
+              go("help");
+              replay(body, "ckw-msgr-enter");
+            })
+          )
+        )
+      );
+    if (body.childNodes[1] !== helpSearch) body.replaceChildren(...parts);
     else {
-      const groups = /* @__PURE__ */ new Map();
-      for (const a of articles) groups.set(a.collection, [...groups.get(a.collection) ?? [], a]);
-      for (const [name, items] of groups)
-        parts.push(el("section", { class: "ckw-msgr-group" }, el("h3", { class: "ckw-msgr-group-h" }, `${name} \xB7 ${items.length}`), el("div", { class: "ckw-msgr-card ckw-msgr-card-col" }, ...items.map(articleRow))));
+      body.firstChild.replaceWith(parts[0]);
+      while (body.childNodes.length > 2) body.lastChild.remove();
+      body.append(...parts.slice(2));
     }
-    if (body.firstChild !== helpSearch) body.replaceChildren(helpSearch);
-    while (body.childNodes.length > 1) body.lastChild.remove();
-    body.append(...parts.slice(1));
   };
   let articleShown = null;
   const drawArticle = (id) => {
-    const back = el("button", { type: "button", class: "ckw-btn ckw-btn-ghost ckw-msgr-x", "aria-label": "Back to help" }, icon(I.back));
-    back.addEventListener("click", () => go("help"));
-    head.replaceChildren(back, el("span", { class: "ckw-msgr-head-t" }, "Help"), closeBtn());
     if (articleShown?.id === id) return body.replaceChildren(articleShown.node);
     const node = el("article", { class: "ckw-msgr-doc" }, el("div", { class: "ckw-skel" }));
     articleShown = { id, node };
@@ -457,22 +873,35 @@ var build = (o) => {
   };
   let drawn = -1;
   let listSig = "";
+  let listCount = -1;
+  const suggestions = el("div", { class: "ckw-msgr-sugg" });
   const drawMessages = () => {
-    head.replaceChildren(
-      el("span", { class: "ckw-msgr-who" }, avatar(), el("span", { class: "ckw-msgr-who-t" }, el("b", {}, title), el("span", {}, reply))),
-      closeBtn()
-    );
     const msgs = thread?.messages ?? [];
     const parts = [];
     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));
-        list.replaceChildren(greet, ...msgs.map((m) => bubble(m)), ...pending ? [bubble(pending, true)] : []);
+        const items = [greet, ...msgs.map((m) => bubble(m)), ...pending ? [bubble(pending, true)] : []];
+        if (listCount >= 0) items.slice(listCount).forEach((li) => li.setAttribute("data-new", ""));
+        listCount = items.length;
+        list.replaceChildren(...items);
       }
       parts.push(list);
+      const top = !msgs.some((m) => m.from === "visitor") && !pending ? (articles ?? []).slice(0, 3) : [];
+      if (top.length) {
+        if (suggestions.childNodes.length !== top.length)
+          suggestions.replaceChildren(
+            ...top.map((a) => {
+              const b = el("button", { type: "button", class: "ckw-msgr-sugg-b" }, a.title);
+              b.addEventListener("click", () => go({ article: a.id }));
+              return b;
+            })
+          );
+        parts.push(suggestions);
+      }
     }
     if (thread?.conversation?.status === "solved" && !pending) parts.push(el("p", { class: "ckw-fine ckw-msgr-note" }, "This conversation is closed. Write to start a new one."));
     if (body.childNodes.length !== parts.length || parts.some((x, i) => body.childNodes[i] !== x)) body.replaceChildren(...parts);
@@ -487,31 +916,23 @@ 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 drawTabs = () => {
-    const current = typeof view === "string" ? view : "help";
-    const tab = (v, name, d, badge = 0) => {
-      const b = el("button", { type: "button", class: "ckw-msgr-tab", "aria-current": current === v ? "page" : "false" }, icon(d, 18), el("span", {}, name));
-      if (badge) b.append(el("span", { class: "ckw-msgr-count ckw-msgr-count-tab" }, String(Math.min(badge, 9))));
-      b.addEventListener("click", () => go(v));
-      return b;
-    };
-    tabs.replaceChildren(tab("home", "Home", I.home), tab("messages", "Messages", I.chat, view === "messages" ? 0 : unseen.length), ...helpOn && hasArticles !== false ? [tab("help", "Help", I.help)] : []);
-  };
   const draw = () => {
     if (!open) return;
     pop.dataset.view = typeof view === "string" ? view : "article";
+    drawBar();
     if (view === "home") drawHome();
     else if (view === "messages") drawMessages();
     else if (view === "help") drawHelp();
     else drawArticle(view.article);
-    const kids = [head, body];
-    if (view === "messages") kids.push(form);
-    kids.push(tabs);
-    drawTabs();
+    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);
   };
   const tick = async () => {
@@ -537,26 +958,53 @@ var build = (o) => {
     const ms = now ?? (watching() ? POLL_OPEN_MS : waiting && recent ? POLL_WAITING_MS : open || waiting ? POLL_IDLE_MS : 0);
     if (ms || now === 0) poll = setTimeout(() => void tick(), ms);
   }
-  document.addEventListener("visibilitychange", () => {
+  const onVisible = () => {
     if (document.visibilityState === "visible") schedule(0);
     else clearTimeout(poll);
-  });
+  };
+  document.addEventListener("visibilitychange", onVisible);
   const submit = async () => {
     const msg = text.value.trim();
-    if (!msg || pending || !emailOk()) return;
+    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) => {
@@ -570,13 +1018,38 @@ 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") {
+  function show(v = "home", still = false) {
+    const was = open;
     open = true;
     view = v === "help" && !helpOn ? "home" : v;
     drawn = -1;
     previewGone = true;
-    if (!pop.isConnected) root.appendChild(pop);
+    hideTeaser(true);
+    pop.toggleAttribute("data-still", still);
+    enter(pop);
+    if (was) replay(body, "ckw-msgr-enter");
     if (articles === null || view === "help" && query) void loadArticles();
     draw();
     drawFab();
@@ -589,26 +1062,41 @@ var build = (o) => {
   function close() {
     if (!open) return;
     open = false;
-    pop.remove();
+    if (menu.isConnected) closeMenu();
+    leave(pop, 200);
     drawFab();
     schedule();
     if (launcherOn) fab.focus();
   }
+  pop.addEventListener("click", () => amenuOpen() && closeAmenu());
   const onKey = (e) => {
-    if (e.key === "Escape" && open) close();
+    if (e.key !== "Escape" || !open) return;
+    if (amenuOpen()) {
+      closeAmenu();
+      clip.focus();
+    } else if (menuOpen()) {
+      closeMenu();
+      menuBtn.focus();
+    } else close();
   };
   document.addEventListener("keydown", onKey);
   void tick();
   if (helpOn) void loadArticles();
   drawFab();
+  if (o.opened) show(o.opened, true);
   return {
     open: (v) => show(v ?? "home"),
     close,
     toggle: () => open ? close() : show(),
     destroy: () => {
       clearTimeout(poll);
+      clearTimeout(teaserTimer);
+      for (const t of leaving.values()) clearTimeout(t);
       ctrl?.abort();
+      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();
     }
   };