@lightworkai.official/debug-capture 0.19.3 → 0.19.5

package/dist/live.d.ts

@@ -1,6 +1,8 @@
 export interface RingingCall {
     id: string;
-    ticketId: string;
+    /** A เรื่อง's call — or a chat's (โทรจากแชท, 0.19.4): then `chatId`, and the key "แชท". */
+    ticketId: string | null;
+    chatId?: string | null;
     ticketKey: string;
     ticketTitle: string;
     status: string;
@@ -10,7 +12,7 @@ export interface RingingCall {
 /** `wss://support.example/api/presence/ws?t=…` — the support host's scheme, the socket's own path. Pure, for the tests. */
 export declare function liveSocketUrl(host: string, ticket: string): string;
 /** Where the card sends them: their request, with the call — the support host rings it there. Pure, for the tests. */
-export declare function answerPath(call: Pick<RingingCall, "id" | "ticketId">): string;
+export declare function answerPath(call: Pick<RingingCall, "id" | "ticketId" | "chatId">): string;
 /** Is this a call ringing for the person at this widget? */
 export declare function ringsHere(call: Pick<RingingCall, "status" | "side">): boolean;
 type LiveFrame = {

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/dist/ui/ring.d.ts

@@ -2,6 +2,8 @@ export interface RingCall {
     id: string;
     ticketKey: string;
     ticketTitle: string;
+    /** A chat's call (โทรจากแชท, 0.19.4) — said as แชทกับทีมงาน, never "เรื่อง แชท". */
+    chatId?: string | null;
 }
 export interface RingHandlers {
     /** The portal's way: runs INSIDE the press — a tab can be opened only there, before anything is awaited. */
@@ -14,8 +16,8 @@ export interface RingHandlers {
 }
 /** `frame`: the call's own card while its frame comes; `portal`: answer in a new tab (no frame, or it failed). */
 export type RingMode = "frame" | "portal";
-/** "เรื่อง CALL-12 · title" — the line under the card's title. Pure, for the tests. */
-export declare function ringAbout(template: string, call: RingCall): string;
+/** "เรื่อง CALL-12 · title" — the line under the card's title; a chat's call, its own words (`chat`). Pure, for the tests. */
+export declare function ringAbout(template: string, call: RingCall, chat?: string): string;
 /** Show the ring for this call — once; the same call again changes nothing. */
 export declare function showRing(call: RingCall, handlers: RingHandlers, mode?: RingMode): void;
 /** รับสาย pressed while the call's frame comes: said, and nothing more to press until it is there. */

package/dist/ui/strings.d.ts

@@ -106,6 +106,8 @@ export interface Strings {
     /** A call from the support team (ui/ring). `ringAbout` carries `{key}` and `{title}`. */
     ringTitle: string;
     ringAbout: string;
+    /** A call from the chat, not a เรื่อง (โทรจากแชท, 0.19.4) — the line under the card's title. */
+    ringChat: string;
     ringHow: string;
     ringOpen: string;
     ringDecline: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightworkai.official/debug-capture",
-  "version": "0.19.3",
+  "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/live.ts

@@ -31,7 +31,9 @@ import { inkOnPage, removeInkLayer } from "./ui/inkOverlay";
 
 export interface RingingCall {
   id: string;
-  ticketId: string;
+  /** A เรื่อง's call — or a chat's (โทรจากแชท, 0.19.4): then `chatId`, and the key "แชท". */
+  ticketId: string | null;
+  chatId?: string | null;
   ticketKey: string;
   ticketTitle: string;
   status: string;
@@ -65,7 +67,9 @@ export function liveSocketUrl(host: string, ticket: string): string {
 }
 
 /** Where the card sends them: their request, with the call — the support host rings it there. Pure, for the tests. */
-export function answerPath(call: Pick<RingingCall, "id" | "ticketId">): string {
+export function answerPath(call: Pick<RingingCall, "id" | "ticketId" | "chatId">): string {
+  // A chat's call (0.19.4): their chat with the team, where it rings.
+  if (call.chatId || !call.ticketId) return `/me/chat?call=${call.id}`;
   return `/me/tickets/${call.ticketId}?call=${call.id}`;
 }
 

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);

package/src/ui/ring.ts

@@ -87,6 +87,8 @@ export interface RingCall {
   id: string;
   ticketKey: string;
   ticketTitle: string;
+  /** A chat's call (โทรจากแชท, 0.19.4) — said as แชทกับทีมงาน, never "เรื่อง แชท". */
+  chatId?: string | null;
 }
 
 export interface RingHandlers {
@@ -106,8 +108,9 @@ let host: HTMLElement | null = null;
 let shownId: string | null = null;
 let titleBefore: string | null = null;
 
-/** "เรื่อง CALL-12 · title" — the line under the card's title. Pure, for the tests. */
-export function ringAbout(template: string, call: RingCall): string {
+/** "เรื่อง CALL-12 · title" — the line under the card's title; a chat's call, its own words (`chat`). Pure, for the tests. */
+export function ringAbout(template: string, call: RingCall, chat?: string): string {
+  if (call.chatId) return chat ?? call.ticketTitle;
   return template.replace("{key}", call.ticketKey).replace("{title}", call.ticketTitle);
 }
 
@@ -164,7 +167,7 @@ function render(root: ShadowRoot, call: RingCall, handlers: RingHandlers, mode:
   h.textContent = s.ringTitle;
   const about = document.createElement("p");
   about.className = "about";
-  about.textContent = ringAbout(s.ringAbout, call);
+  about.textContent = ringAbout(s.ringAbout, call, s.ringChat);
   about.title = about.textContent;
   words.append(h, about);
   head.append(icon, words);

package/src/ui/strings.ts

@@ -111,6 +111,8 @@ export interface Strings {
   /** A call from the support team (ui/ring). `ringAbout` carries `{key}` and `{title}`. */
   ringTitle: string;
   ringAbout: string;
+  /** A call from the chat, not a เรื่อง (โทรจากแชท, 0.19.4) — the line under the card's title. */
+  ringChat: string;
   ringHow: string;
   ringOpen: string;
   ringDecline: string;
@@ -211,6 +213,7 @@ const th: Strings = {
   hours: "{n} ชั่วโมง",
   ringTitle: "ทีมงานกำลังโทรหาคุณ",
   ringAbout: "เรื่อง {key} · {title}",
+  ringChat: "จากแชทกับทีมงาน",
   ringHow: "รับสายในหน้าคำร้องของคุณ — เปิดในแท็บใหม่ ไม่ต้องเข้าสู่ระบบอีก",
   ringOpen: "เปิดเพื่อรับสาย",
   ringDecline: "ไม่รับ",
@@ -306,6 +309,7 @@ const en: Strings = {
   hours: "{n} hours",
   ringTitle: "The support team is calling you",
   ringAbout: "About {key} · {title}",
+  ringChat: "From your chat with support",
   ringHow: "Answer on your request's page — it opens in a new tab, already signed in",
   ringOpen: "Open to answer",
   ringDecline: "Decline",