@lightworkai.official/debug-capture 0.19.4 → 0.19.5

package/dist/ui/chatBubble.d.ts

@@ -65,6 +65,14 @@ export declare function bubbleLabel(s: {
     shown: boolean;
     isNew: boolean;
 } | null;
+export interface DeskLook {
+    label?: string;
+    color?: string;
+    /** A path on the support host; null: the chat glyph on the colour. */
+    faceUrl?: string | 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 declare function lookFaceUrl(host: string, look: DeskLook | null): string | null;
 /** Open the panel — from the bubble, or from the host app's own button (`openSupportChat`). */
 export declare function openSupportChat(): void;
 /** Fold the panel — it stays loaded, so the chat is there as it was the next time. */
@@ -72,4 +80,6 @@ export declare function closeSupportChat(refocus?: boolean): void;
 /** The bubble, once — hidden until the host's token says somebody is signed in. */
 export declare 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 declare function refreshSupportChat(): Promise<void>;
 export declare function unmountSupportChat(): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightworkai.official/debug-capture",
-  "version": "0.19.4",
+  "version": "0.19.5",
   "description": "Report-a-problem widget: rolling network/console/action capture, optional rrweb session replay, annotated screenshot, and submission to a Lightwork Support host",
   "type": "module",
   "module": "./dist/index.mjs",

package/src/config.ts

@@ -232,6 +232,12 @@ export interface ChatOptions {
    * of "แชทกับทีมงาน", or `false` for the button alone.
    */
   label?: string | false;
+  /**
+   * Whether the bubble is for whoever is signed in now (0.19.5) — asked before every read; false: no bubble. For a
+   * host whose own staff should not chat with its support desk, or not on every page. Ask again after a sign-in with
+   * `refreshSupportChat()`.
+   */
+  show?: () => boolean;
 }
 
 /** The bubble's place, from `chat`: null when it is off. */

package/src/index.ts

@@ -77,7 +77,7 @@ export type { OpenPortalOptions } from "./portal";
  * แชทกับทีม (0.19): `chat` in the config mounts the bubble on install; a host with its own button opens and closes
  * the same panel. The panel is the support host's page, framed — as the tickets are, maintained where they live.
  */
-export { openSupportChat, closeSupportChat, mountSupportChat, unmountSupportChat, supportFrameUrl, badgeText, chatLift, panelHeight } from "./ui/chatBubble";
+export { openSupportChat, closeSupportChat, mountSupportChat, unmountSupportChat, refreshSupportChat, supportFrameUrl, badgeText, chatLift, panelHeight } from "./ui/chatBubble";
 export type { ChatOptions } from "./config";
 
 export type * from "./types";

package/src/ui/chatBubble.ts

@@ -33,11 +33,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 +65,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,7 +207,9 @@ 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);
@@ -216,28 +218,83 @@ function setLabel(): void {
   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;
+}
+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);
+  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 {
@@ -491,8 +548,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();
@@ -521,7 +582,13 @@ 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);