@lightworkai.official/debug-capture 0.19.4 → 0.19.6

package/src/ui/chatBubble.ts

@@ -10,6 +10,7 @@
  *   sign-in     the panel asks (`hello`); the host's token goes to it by postMessage, to the support host's origin only
  *   แจ้งปัญหา…  in the panel: the panel folds and this library's report opens — its screen, its page — linked to the chat
  *   the corner  the call's card and frame sit above the bubble (`--lw-chat-lift`)
+ *   its place   out of the page's own floating controls, and where the desk says for a page (0.19.6, ui/bubblePlace)
  *
  * Shown only for a signed-in person (`identity` answers a token): a chat is someone's, and is read back.
  */
@@ -17,6 +18,7 @@ import { chatPlace, getConfig } from "../config";
 import { hostToken, onLiveFrame } from "../live";
 import { openSupportPortal } from "../portal";
 import { launch } from "../reporter";
+import { blockedRanges, placeFor, scanColumns, settleSpot, type PlaceRule, type Side } from "./bubblePlace";
 import { followHostFont, OWN_FONTS } from "./hostFont";
 import { strings } from "./strings";
 
@@ -33,11 +35,11 @@ const CSS = `
 .bubble {
   position: fixed; z-index: 2147483000; width: ${SIZE}px; height: ${SIZE}px; border-radius: 50%;
   display: grid; place-items: center; border: 0; cursor: pointer; padding: 0;
-  background: #00468f; color: #fff; box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3), 0 4px 10px -4px rgba(0, 0, 0, 0.2);
+  background: var(--lw-chat-color, #00468f); color: #fff; box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3), 0 4px 10px -4px rgba(0, 0, 0, 0.2);
   transition: transform 150ms ease, background 150ms ease;
   font-family: var(--lw-host-font, ${OWN_FONTS});
 }
-.bubble:hover { background: #003a78; transform: translateY(-1px); }
+.bubble:hover { filter: brightness(0.92); transform: translateY(-1px); }
 .bubble { touch-action: none; }
 .bubble.dragging { cursor: grabbing; transform: scale(1.06); transition: none; box-shadow: 0 18px 35px -8px rgba(0, 0, 0, 0.4); }
 .bubble:focus-visible { outline: 3px solid rgba(0, 70, 143, 0.35); outline-offset: 3px; }
@@ -65,7 +67,7 @@ const CSS = `
 .label .text { display: block; max-width: min(240px, calc(100vw - ${SIZE + 64}px)); overflow: hidden; text-overflow: ellipsis; }
 .at-left .label { right: auto; left: calc(100% + 12px); transform: translate(-4px, -50%); }
 .at-left .label::after { right: auto; left: -4px; }
-.new .label { color: #00468f; }
+.new .label { color: var(--lw-chat-color, #00468f); }
 .labelled .label { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(0, -50%); }
 @media (hover: hover) { .bubble:hover .label { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(0, -50%); } }
 .unlabelled .label, .bubble.dragging .label, .open .label { display: none; }
@@ -207,37 +209,100 @@ let opened = false;
 function setLabel(): void {
   if (!label || !bubble) return;
   const config = getConfig();
-  const own = config.chat && config.chat !== true ? config.chat.label : undefined;
+  // The host's own words in code win; else the desk's (ปุ่มแชท, its look); else the shipped ones.
+  const hostOwn = config.chat && config.chat !== true ? config.chat.label : undefined;
+  const own = hostOwn !== undefined ? hostOwn : deskLook?.label;
   const l = bubbleLabel({ own, unread, opened, open: isOpen }, strings(config.locale));
   bubble.classList.toggle("unlabelled", !l);
   bubble.classList.toggle("labelled", !!l?.shown);
   bubble.classList.toggle("new", !!l?.isNew);
-  bubble.classList.toggle("at-left", spot.side === "left");
+  bubble.classList.toggle("at-left", (shown ?? spot).side === "left");
   label.querySelector(".text")!.textContent = l?.text ?? "";
 }
 
+/*
+ * The desk's look (0.19.5, the support desk's ปุ่มแชท — docs/CHAT-BUBBLE-PLAN.md): its face (or the chat glyph on its
+ * colour), its colour, the words beside the button — set on the desk, read with the first answer here.
+ */
+export interface DeskLook {
+  label?: string;
+  color?: string;
+  /** A path on the support host; null: the chat glyph on the colour. */
+  faceUrl?: string | null;
+  /** Step aside from the page's own floating controls (0.19.6) — the desk's switch; on unless false. */
+  avoid?: boolean;
+  /** A page's own place (0.19.6): hidden there, or started in a corner at a height — the desk's rules. */
+  places?: PlaceRule[];
+}
+let deskLook: DeskLook | null = null;
+/** The face's address for a desk's look: its own path on the support host, the shipped one, or none (the glyph). Pure. */
+export function lookFaceUrl(host: string, look: DeskLook | null): string | null {
+  if (!look || look.faceUrl === undefined) return supportFaceUrl(host);
+  if (look.faceUrl === null) return null;
+  try {
+    return new URL(look.faceUrl.replace(/^\//, ""), base(host)).toString();
+  } catch {
+    return supportFaceUrl(host);
+  }
+}
+function wearLook(look: DeskLook | null): void {
+  deskLook = look;
+  if (!root || !bubble) return;
+  const color = look?.color && /^#[0-9a-f]{6}$/i.test(look.color) ? look.color : null;
+  if (color) root.style.setProperty("--lw-chat-color", color);
+  else root.style.removeProperty("--lw-chat-color");
+  const face = shadow?.querySelector<HTMLImageElement>(".face");
+  const url = lookFaceUrl(getConfig().host, look);
+  // Its rules and its switch may have changed where it stands.
+  queueRescan(true);
+  if (face) {
+    if (!url) {
+      bubble.classList.remove("has-face");
+      face.removeAttribute("src");
+    } else if (face.getAttribute("src") !== url) {
+      bubble.classList.remove("has-face");
+      face.src = url;
+    }
+  }
+  setLabel();
+}
+
 let asking: Promise<void> | null = null;
 /** What waits for the person, read with the host's token — no token: nobody is signed in, and there is no bubble. */
 async function refreshUnread(): Promise<void> {
-  asking ??= (async () => {
-    try {
-      const token = await hostToken();
-      if (!token) return void show(false);
-      const config = getConfig();
-      const res = await fetch(new URL("ingest/support-unread", base(config.host)).toString(), { headers: { "x-realm-key": config.realmKey, authorization: `Bearer ${token}` } });
-      // A support host from before the chat, or a token it does not accept: no bubble rather than one that cannot open.
-      if (res.status === 404 || res.status === 401 || res.status === 403) return void show(false);
-      if (!res.ok) return;
-      show(true);
-      const out = (await res.json()) as { total?: number };
-      if (!isOpen) setBadge(typeof out.total === "number" ? out.total : 0);
-    } catch {
-      /* the next nudge asks again */
-    } finally {
-      asking = null;
-    }
-  })();
-  return asking;
+  if (asking) return asking;
+  /*
+   * Kept until it settles, then let go — by THIS read only. (`asking ??= (async () => { … finally { asking = null } })()`
+   * lost the let-go when the read ended before its first await — `show` saying no: the finally ran before the
+   * assignment, and every read after was that settled one, never asked again.)
+   */
+  const run = readUnread();
+  asking = run;
+  try {
+    await run;
+  } finally {
+    if (asking === run) asking = null;
+  }
+}
+async function readUnread(): Promise<void> {
+  try {
+    const config = getConfig();
+    // The host's own say (0.19.5): not for whoever is signed in now — no bubble, nothing asked.
+    const opts = config.chat && config.chat !== true ? config.chat : null;
+    if (opts?.show && !opts.show()) return void show(false);
+    const token = await hostToken();
+    if (!token) return void show(false);
+    const res = await fetch(new URL("ingest/support-unread", base(config.host)).toString(), { headers: { "x-realm-key": config.realmKey, authorization: `Bearer ${token}` } });
+    // A support host from before the chat, a desk that turned its bubble off, or a token it does not accept: no bubble.
+    if (res.status === 404 || res.status === 401 || res.status === 403) return void show(false);
+    if (!res.ok) return;
+    const out = (await res.json()) as { total?: number; look?: DeskLook };
+    if (out.look && typeof out.look === "object") wearLook(out.look);
+    show(true);
+    if (!isOpen) setBadge(typeof out.total === "number" ? out.total : 0);
+  } catch {
+    /* the next nudge asks again */
+  }
 }
 
 function show(on: boolean): void {
@@ -246,6 +311,7 @@ function show(on: boolean): void {
   // Its words in the host page's own font — read again here, after the host has drawn itself.
   if (on) followHostFont(root);
   layout();
+  if (on) queueRescan(true);
 }
 
 /* ── Where it is: the config's place, or where the person put it ───────── */
@@ -282,24 +348,154 @@ function savePlace(): void {
   }
 }
 
+/* ── Out of the page's way, and a page's own place (0.19.6, ui/bubblePlace) ─────── */
+
+/** The host page's path — through `window`, as every other read here is. */
+const pagePath = () => window.location?.pathname ?? "/";
+/** Where it stands now — `spot` (or the page's rule), moved clear of the page's floating controls. */
+let shown: BubbleSpot | null = null;
+/** What `shown` was chosen for — the page and the wish; while they hold, a free `shown` is kept (settleSpot). */
+let shownFor = "";
+/** The heights each side's column rules out, as last read off the page — null: not read yet, or not stepping aside. */
+let blocked: Record<Side, [number, number][]> | null = null;
+/** Hidden on this page by the desk's rule (ซ่อนปุ่มแชทในหน้านี้). */
+let ruleHidden = false;
+
+function avoidSetting(): { on: boolean; extra: string | null } {
+  const c = getConfig().chat;
+  const own = c && c !== true ? c.avoid : undefined;
+  if (own === false || deskLook?.avoid === false) return { on: false, extra: null };
+  return { on: true, extra: typeof own === "string" && own.trim() ? own.trim() : null };
+}
+/** Where it wants to be on this page: put by hand — kept; else the desk's rule for the page; else the config's place. */
+function wanted(): BubbleSpot {
+  const rule = placeFor(pagePath(), deskLook?.places);
+  ruleHidden = rule?.show === "hide";
+  if (movedByHand || !rule || rule.show === "hide") return spot;
+  return { side: rule.show, x: spot.x, y: rule.y };
+}
+/** Read the page's floating controls across both corners' columns — then place again. */
+function rescan(): void {
+  if (!bubble) return;
+  const { on, extra } = avoidSetting();
+  if (!on) {
+    blocked = null;
+    return layout();
+  }
+  const v = view();
+  const x = spot.x;
+  const colR = { left: v.w - x - SIZE, right: v.w - x };
+  const colL = { left: x, right: x + SIZE };
+  const [foundR = [], foundL = []] = scanColumns([colR, colL], v, { extra });
+  const right = blockedRanges(foundR, colR, v.h, SIZE);
+  const left = blockedRanges(foundL, colL, v.h, SIZE);
+  // Nothing new where it could stand: the page is looked at less often while that holds (queueRescan).
+  calm = JSON.stringify([right, left]) === JSON.stringify(blocked && [blocked.right, blocked.left]) ? Math.min(calm + 1, CALM_STEPS) : 0;
+  blocked = { right, left };
+  layout();
+}
+/*
+ * How often the page is read (a read is two columns of hit tests, a few ms). A page that keeps changing — a clock, a
+ * live list — said "look again" ten times a second, and a read every 400 ms cost it half a second of script in ten
+ * (0.19.5: 20 ms). So: a read that finds nothing new doubles the wait for the next one a change asks for (400 ms up to
+ * 3.2 s); a person's own press or key, a new page, a resize or the tab coming back is looked at at once (URGENT_MS),
+ * and resets it. Never while the panel is open (it does not move then), while it is dragged, or in a hidden tab.
+ */
+const RESCAN_MS = 400;
+const CALM_STEPS = 3;
+const URGENT_MS = 60;
+let rescanTimer: ReturnType<typeof setTimeout> | undefined;
+let rescanDue = 0;
+let lastRescan = 0;
+let calm = 0;
+function queueRescan(urgent = false): void {
+  if (!root) return;
+  const now = Date.now();
+  if (urgent) {
+    calm = 0;
+    if (rescanTimer && rescanDue - now <= URGENT_MS) return;
+    clearTimeout(rescanTimer);
+    rescanTimer = undefined;
+  }
+  if (rescanTimer) return;
+  const wait = urgent ? URGENT_MS : Math.max(0, RESCAN_MS * 2 ** calm - (now - lastRescan));
+  rescanDue = now + wait;
+  rescanTimer = setTimeout(() => {
+    rescanTimer = undefined;
+    if (!root || isOpen || pressed?.moved || (typeof document !== "undefined" && document.hidden)) return;
+    lastRescan = Date.now();
+    rescan();
+  }, wait);
+}
+/** The page's own changes worth a look: a toolbar opening, a page arriving — never this library's own boxes. */
+let watcher: MutationObserver | null = null;
+let lastPath = "";
+let pathTimer: ReturnType<typeof setInterval> | undefined;
+const onPageMoved = () => queueRescan();
+/** What a person did, or the window itself changed: looked at at once. */
+const onPageActed = () => queueRescan(true);
+const ACTED = ["popstate", "hashchange", "pointerup", "keyup"] as const;
+function watchPage(on: boolean): void {
+  watcher?.disconnect();
+  watcher = null;
+  clearInterval(pathTimer);
+  for (const t of ACTED) window.removeEventListener(t, onPageActed, true);
+  for (const t of ["scroll", "transitionend", "animationend"] as const) window.removeEventListener(t, onPageMoved, true);
+  document.removeEventListener("visibilitychange", onPageActed);
+  if (!on) return;
+  if (typeof MutationObserver !== "undefined") {
+    watcher = new MutationObserver((records) => {
+      const theirs = records.some((r) => {
+        const t = r.target as Element;
+        if (t === document.documentElement && r.type === "attributes") return false;
+        return !(t.nodeType === 1 && /^LW-/.test(t.tagName)) && t !== root;
+      });
+      if (theirs) queueRescan();
+    });
+    watcher.observe(document.documentElement, { childList: true, subtree: true, attributes: true, attributeFilter: ["class", "style", "hidden", "open", "aria-expanded"] });
+  }
+  for (const t of ACTED) window.addEventListener(t, onPageActed, { capture: true, passive: true });
+  // A toolbar's own opening ends after the press; a sticky bar sticks as the page scrolls.
+  for (const t of ["scroll", "transitionend", "animationend"] as const) window.addEventListener(t, onPageMoved, { capture: true, passive: true });
+  document.addEventListener("visibilitychange", onPageActed);
+  // A single-page app moves by history.pushState, which says nothing: the path is looked at once a second.
+  lastPath = pagePath();
+  pathTimer = setInterval(() => {
+    if (pagePath() === lastPath) return;
+    lastPath = pagePath();
+    layout();
+    queueRescan(true);
+  }, 1000);
+}
+
 /** Everything placed from `spot` and `panelAt`, inside the window as it is now — and the call's card clear of the bubble. */
 function layout(): void {
   if (!bubble || !panel) return;
   const v = view();
-  const y = clampBubbleY(spot.y, v.h);
-  const other = spot.side === "right" ? "left" : "right";
-  Object.assign(bubble.style, { [spot.side]: `${spot.x}px`, [other]: "", bottom: `${y}px`, top: "" });
+  const want = wanted();
+  const wantY = clampBubbleY(want.y, v.h);
+  // While the panel is open it stays where it was opened from — never moved under the person's eyes.
+  const wish = `${pagePath()}|${want.side}|${want.x}|${wantY}`;
+  const prev = shown && shownFor === wish ? shown : null;
+  const free = !isOpen || !shown ? (blocked && avoidSetting().on ? settleSpot(prev, { side: want.side, y: wantY }, blocked, MARGIN, Math.max(MARGIN, v.h - SIZE - MARGIN)) : { side: want.side, y: wantY }) : shown;
+  shown = { side: free.side, x: want.x, y: free.y };
+  shownFor = wish;
+  const at = shown;
+  const y = at.y;
+  const other = at.side === "right" ? "left" : "right";
+  bubble.style.display = ruleHidden && !isOpen ? "none" : "";
+  Object.assign(bubble.style, { [at.side]: `${at.x}px`, [other]: "", bottom: `${y}px`, top: "" });
   if (panelAt) {
     // The height it had when it was picked up — a drag moves it, never resizes it under the hand.
     const box = { w: Math.min(PANEL_W, v.w - 32), h: Math.min(panelAt.h, v.h - 2 * MARGIN) };
     const p = clampPanel(panelAt, box, v);
     Object.assign(panel.style, { left: `${p.x}px`, top: `${p.y}px`, right: "", bottom: "", height: `${box.h}px` });
   } else {
-    const a = anchorPanel({ ...spot, y }, v.h);
-    Object.assign(panel.style, { [spot.side]: `${spot.x}px`, [other]: "", bottom: a.bottom !== undefined ? `${a.bottom}px` : "", top: a.top !== undefined ? `${a.top}px` : "", height: `${a.height}px` });
+    const a = anchorPanel(at, v.h);
+    Object.assign(panel.style, { [at.side]: `${at.x}px`, [other]: "", bottom: a.bottom !== undefined ? `${a.bottom}px` : "", top: a.top !== undefined ? `${a.top}px` : "", height: `${a.height}px` });
   }
   // The call's card and frame sit above the bubble while it is there and low on their side (ring.ts, callFrame.ts).
-  const lift = root && root.style.display !== "none" ? liftFor({ ...spot, y }) : 0;
+  const lift = root && root.style.display !== "none" && bubble.style.display !== "none" ? liftFor(at) : 0;
   if (lift) document.documentElement.style.setProperty("--lw-chat-lift", `${lift}px`);
   else document.documentElement.style.removeProperty("--lw-chat-lift");
   setLabel();
@@ -341,7 +537,9 @@ function onBubbleUp(e: PointerEvent): void {
     panelAt = null;
     savePlace();
   }
-  layout();
+  // Let go on a toolbar: to the nearest free place, read off the page as it is now.
+  if (avoidSetting().on) rescan();
+  else layout();
 }
 
 /* ── The panel, dragged by its head — the press is in the frame (as the call's, ui/callFrame) ─── */
@@ -386,7 +584,10 @@ function followHere(on: boolean): void {
   };
   for (const t of ["pointermove", "pointerup", "pointercancel"] as const) window.addEventListener(t, hostFollow, true);
 }
-const onResize = () => layout();
+const onResize = () => {
+  layout();
+  queueRescan(true);
+};
 
 function post(message: Record<string, unknown>): void {
   frame?.contentWindow?.postMessage({ source: HOST, ...message }, hostOrigin());
@@ -462,6 +663,9 @@ export function closeSupportChat(refocus = true): void {
   post({ type: "hidden" });
   if (refocus) bubble?.focus();
   void refreshUnread();
+  // Closed: free to step aside again from whatever the page did meanwhile.
+  layout();
+  queueRescan(true);
 }
 
 let stopFrames: (() => void) | null = null;
@@ -491,8 +695,12 @@ export function mountSupportChat(): void {
   // The desk's face (the owner, 10-31: "all the support icon that user see … use this icon"): the support host's own,
   // the one its replies wear — the chat glyph until it is there, and if it never comes.
   const face = shadow.querySelector<HTMLImageElement>(".face")!;
-  face.addEventListener("load", () => bubble?.classList.add("has-face"), { once: true });
-  face.src = supportFaceUrl(config.host);
+  // Every picture it is given (the desk's look may change it, 0.19.5): worn once loaded, the glyph if it fails.
+  face.addEventListener("load", () => {
+    if (face.getAttribute("src")) bubble?.classList.add("has-face");
+  });
+  face.addEventListener("error", () => bubble?.classList.remove("has-face"));
+  face.src = lookFaceUrl(config.host, deskLook) ?? supportFaceUrl(config.host);
   // Where the person left it on this device, else the config's place (0.19.2).
   loadPlace();
   layout();
@@ -510,6 +718,7 @@ export function mountSupportChat(): void {
   document.addEventListener("keydown", onKey);
   window.addEventListener("focus", onFocus);
   window.addEventListener("resize", onResize);
+  watchPage(true);
   // The desk wrote, or opened a เรื่อง, or read: the badge asks again — while the panel is open, the panel tells it.
   let settle: ReturnType<typeof setTimeout> | undefined;
   stopFrames = onLiveFrame(() => {
@@ -521,13 +730,27 @@ export function mountSupportChat(): void {
 }
 
 /** Take it away — for a host that unmounts, and for the tests. */
+/** Ask again whether there is a bubble, and what waits (0.19.5) — after a sign-in or a sign-out, or `show` changed. */
+export function refreshSupportChat(): Promise<void> {
+  return root ? refreshUnread() : Promise.resolve();
+}
+
 export function unmountSupportChat(): void {
+  deskLook = null;
   stopFrames?.();
   stopFrames = null;
   window.removeEventListener("message", onMessage);
   document.removeEventListener("keydown", onKey);
   window.removeEventListener("focus", onFocus);
   window.removeEventListener("resize", onResize);
+  watchPage(false);
+  clearTimeout(rescanTimer);
+  rescanTimer = undefined;
+  calm = 0;
+  shown = null;
+  shownFor = "";
+  blocked = null;
+  ruleHidden = false;
   followHere(false);
   root?.remove();
   root = shadow = panel = frame = bubble = badge = label = null;