@lightworkai.official/debug-capture 0.19.5 → 0.19.7

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, nearestFreeY, placeFor, scanColumns, settleSpot, type PlaceRule, type Side } from "./bubblePlace";
 import { followHostFont, OWN_FONTS } from "./hostFont";
 import { strings } from "./strings";
 
@@ -214,7 +216,7 @@ function setLabel(): void {
   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 ?? "";
 }
 
@@ -227,6 +229,10 @@ export interface DeskLook {
   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. */
@@ -247,6 +253,8 @@ function wearLook(look: DeskLook | null): void {
   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("now");
   if (face) {
     if (!url) {
       bubble.classList.remove("has-face");
@@ -303,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("now");
 }
 
 /* ── Where it is: the config's place, or where the person put it ───────── */
@@ -339,26 +348,186 @@ 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. A
+ * side is null when it was not read: its own place was free, so the other corner could not be better.
+ */
+let blocked: Record<Side, [number, number][] | null> | 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 cols: Record<Side, { left: number; right: number }> = { right: { left: v.w - x - SIZE, right: v.w - x }, left: { left: x, right: x + SIZE } };
+  const read = (side: Side) => blockedRanges(scanColumns([cols[side]], v, { extra })[0] ?? [], cols[side], v.h, SIZE);
+  // Its own side first; the other corner is read only when the place it wants there is taken (half the hit tests).
+  const want = wanted();
+  const wantY = clampBubbleY(want.y, v.h);
+  const other: Side = want.side === "right" ? "left" : "right";
+  const here = read(want.side);
+  const there = nearestFreeY(wantY, here, MARGIN, Math.max(MARGIN, v.h - SIZE - MARGIN)) === wantY ? null : read(other);
+  const next = { [want.side]: here, [other]: there } as Record<Side, [number, number][] | null>;
+  // Nothing new where it could stand: the page is looked at less often while that holds (queueRescan).
+  calm = JSON.stringify([next.right, next.left]) === JSON.stringify(blocked && [blocked.right, blocked.left]) ? Math.min(calm + 1, CALM_STEPS) : 0;
+  blocked = next;
+  layout();
+}
+/*
+ * How often the page is read (a read is a column or two of hit tests). 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; a transition or animation that ends in a corner's column — something there just finished appearing
+ * — resets it too and is looked at within RESCAN_MS ("soon": a read during the ERP tray's 300 ms fade-in saw it nearly
+ * clear, and the next waited out the doubling). 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(when: "now" | "soon" | "later" = "later"): void {
+  if (!root) return;
+  const now = Date.now();
+  if (when !== "later") calm = 0;
+  const wait = when === "now" ? URGENT_MS : Math.max(0, RESCAN_MS * 2 ** calm - (now - lastRescan));
+  // One read waiting at a time — moved sooner when this asks sooner.
+  if (rescanTimer && rescanDue <= now + wait) return;
+  clearTimeout(rescanTimer);
+  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 ours = (t: EventTarget | null) => t instanceof Element && (t === root || /^LW-/.test(t.tagName));
+const onPageMoved = (e: Event) => {
+  if (!ours(e.target)) queueRescan();
+};
+/** A transition or animation ended: soon when it was in a corner's column, where the bubble may stand. */
+const onPageSettled = (e: Event) => {
+  if (ours(e.target)) return;
+  const r = e.target instanceof Element ? e.target.getBoundingClientRect() : null;
+  const v = view();
+  const x = spot.x;
+  const inColumn = !!r && r.width > 0 && (r.left < x + SIZE || r.right > v.w - x - SIZE);
+  queueRescan(inColumn ? "soon" : "later");
+};
+/** What a person did, or the window itself changed: looked at at once. */
+const onPageActed = (e: Event) => {
+  if (!ours(e.target)) queueRescan("now");
+};
+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);
+  window.removeEventListener("scroll", onPageMoved, true);
+  for (const t of ["transitionend", "animationend"] as const) window.removeEventListener(t, onPageSettled, 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.
+  window.addEventListener("scroll", onPageMoved, { capture: true, passive: true });
+  for (const t of ["transitionend", "animationend"] as const) window.addEventListener(t, onPageSettled, { 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("now");
+  }, 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;
+  // A side not read is free here: it was left unread because the wish's own place was free, and that place wins.
+  const read = blocked && avoidSetting().on ? { right: blocked.right ?? [], left: blocked.left ?? [] } : null;
+  const free = !isOpen || !shown ? (read ? settleSpot(prev, { side: want.side, y: wantY }, read, 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;
-  if (lift) document.documentElement.style.setProperty("--lw-chat-lift", `${lift}px`);
-  else document.documentElement.style.removeProperty("--lw-chat-lift");
+  const lift = root && root.style.display !== "none" && bubble.style.display !== "none" ? liftFor(at) : 0;
+  // Written only when it differs from what <html> carries (read back, so a host that rewrites its style attribute
+  // gets it again): a property there restyles the host's whole page, and layout() runs on every read of the page.
+  const liftNow = lift ? `${lift}px` : "";
+  if (document.documentElement.style.getPropertyValue("--lw-chat-lift") !== liftNow) {
+    if (liftNow) document.documentElement.style.setProperty("--lw-chat-lift", liftNow);
+    else document.documentElement.style.removeProperty("--lw-chat-lift");
+  }
   setLabel();
 }
 
@@ -398,7 +567,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) ─── */
@@ -443,7 +614,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("now");
+};
 
 function post(message: Record<string, unknown>): void {
   frame?.contentWindow?.postMessage({ source: HOST, ...message }, hostOrigin());
@@ -519,6 +693,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("now");
 }
 
 let stopFrames: (() => void) | null = null;
@@ -571,6 +748,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(() => {
@@ -595,6 +773,14 @@ export function unmountSupportChat(): void {
   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;