@lightworkai.official/debug-capture 0.19.8 → 0.19.10

package/src/submit.ts

@@ -110,7 +110,7 @@ export async function submitBundle(title: string, bundle: DebugBundle): Promise<
   let replay: ReplaySummary | undefined;
   const recording = replayOptions();
   if (recording) {
-    const packed = await packReplay(trimmed.replay, recording.maxBytes);
+    const packed = await packReplay(trimmed.replay, recording.maxBytes, { quality: recording.canvas?.quality });
     replay = packed.summary;
     if ("dataUri" in packed) attachments.push({ dataUri: packed.dataUri, filename: packed.filename });
   }

package/src/types.ts

@@ -188,7 +188,7 @@ export interface ReplayCapture {
  * attachment loads — or say why there is none.
  */
 export interface ReplaySummary {
-  /** Whole seconds covered, when one was attached. */
+  /** Whole seconds covered by what was attached (or, with `omitted`, by what was recorded). */
   seconds?: number;
   events?: number;
   startedAt?: string;
@@ -196,8 +196,20 @@ export interface ReplaySummary {
   /** Size of the attachment as sent, and whether it is gzip. */
   bytes?: number;
   compressed?: boolean;
-  /** The canvas frames were left out to fit under the size cap. */
+  /*
+   * What was given up to fit under the size cap (replayPack), each present
+   * only when it happened.
+   */
+  /** Canvas pictures left out: the canvases play blank. */
   canvasDropped?: boolean;
+  /** Large pictures embedded in the page (a `data:` image, an inlined font) left out. */
+  picturesDropped?: boolean;
+  /** Long text and styles shortened — only when not even one picture of the page fitted otherwise. */
+  simplified?: boolean;
+  /** Only part of the recording went: how long the whole was. `seconds` is what was sent. */
+  recordedSeconds?: number;
+  /** The part sent stops this many seconds before the report was made. */
+  endsEarlySeconds?: number;
   /** Present when the host records but this report carries no replay. */
   omitted?: "too-large" | "empty";
 }

package/src/ui/chatBubble.ts

@@ -25,15 +25,25 @@ import { strings } from "./strings";
 const HOST_TAG = "lw-support-chat";
 const FRAME = "lw-support-frame";
 const HOST = "lw-support-host";
+/** The button's size until the desk says its own (ปุ่มแชท › ขนาดปุ่ม, 0.19.10). */
 const SIZE = 56;
 const GAP = 12;
+/**
+ * The desk's size for it, px (0.19.10; the owner, 11-02: "make it smaller or bigger as a config") — the desk offers
+ * 44 to 72; anything else it might say is brought within reach of a finger and of the corner. Pure.
+ */
+export function bubbleSize(v: unknown): number {
+  return typeof v === "number" && Number.isFinite(v) ? Math.round(Math.min(Math.max(v, 32), 96)) : SIZE;
+}
+/** Its size now — the desk's, once its look is read. */
+let size = SIZE;
 
 const ICON = `<svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"/></svg>`;
 
 const CSS = `
 :host { all: initial; }
 .bubble {
-  position: fixed; z-index: 2147483000; width: ${SIZE}px; height: ${SIZE}px; border-radius: 50%;
+  position: fixed; z-index: 2147483000; width: var(--lw-chat-size, ${SIZE}px); height: var(--lw-chat-size, ${SIZE}px); border-radius: 50%;
   display: grid; place-items: center; border: 0; cursor: pointer; padding: 0;
   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;
@@ -43,6 +53,7 @@ const CSS = `
 .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; }
+.bubble > svg { width: calc(var(--lw-chat-size, ${SIZE}px) * 0.46); height: calc(var(--lw-chat-size, ${SIZE}px) * 0.46); }
 .face { display: none; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; pointer-events: none; user-select: none; -webkit-user-drag: none; }
 .bubble.has-face, .bubble.has-face:hover { background: #fff; }
 .has-face .face { display: block; }
@@ -64,7 +75,7 @@ const CSS = `
   content: ""; position: absolute; top: 50%; right: -4px; width: 10px; height: 10px; background: #fff; border-radius: 2px;
   transform: translateY(-50%) rotate(45deg); box-shadow: 1px -1px 0 rgba(0, 0, 0, 0.04);
 }
-.label .text { display: block; max-width: min(240px, calc(100vw - ${SIZE + 64}px)); overflow: hidden; text-overflow: ellipsis; }
+.label .text { display: block; max-width: min(240px, calc(100vw - var(--lw-chat-size, ${SIZE}px) - 64px)); 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: var(--lw-chat-color, #00468f); }
@@ -72,7 +83,7 @@ const CSS = `
 @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; }
 .panel {
-  position: fixed; z-index: 2147483001; width: min(380px, calc(100vw - 32px)); height: min(640px, calc(100vh - ${SIZE + GAP + 32}px));
+  position: fixed; z-index: 2147483001; width: min(380px, calc(100vw - 32px)); height: min(640px, calc(100vh - var(--lw-chat-size, ${SIZE}px) - ${GAP + 32}px));
   border-radius: 20px; overflow: hidden; background: #fff; border: 1px solid rgba(15, 23, 42, 0.08);
   box-shadow: 0 28px 64px -16px rgba(15, 23, 42, 0.3), 0 10px 24px -10px rgba(15, 23, 42, 0.14);
   animation: in 180ms cubic-bezier(0.16, 1, 0.3, 1);
@@ -126,12 +137,12 @@ export function supportFaceUrl(host: string): string {
  * How far the call's card and frame rise from their own 16px so they clear the bubble — its offset, its size and the
  * gap above it (0.19.1: 0.19.0 assumed the bubble at the corner, and a raised one sat under a ringing call). Pure.
  */
-export function chatLift(bubbleY: number): number {
-  return bubbleY + SIZE + GAP - 16;
+export function chatLift(bubbleY: number, s = SIZE): number {
+  return bubbleY + s + GAP - 16;
 }
 /** The panel above the bubble, never past the top of the window — its height for the bubble's offset (0.19.1). Pure. */
-export function panelHeight(bubbleY: number): string {
-  return `min(640px, calc(100vh - ${bubbleY + SIZE + GAP + 16}px))`;
+export function panelHeight(bubbleY: number, s = SIZE): string {
+  return `min(640px, calc(100vh - ${bubbleY + s + GAP + 16}px))`;
 }
 
 /*
@@ -151,26 +162,26 @@ const MARGIN = 8;
 /** The ring's card is ~180px tall at the corner: a bubble above that leaves it there. */
 const RING_ZONE = 200;
 /** Let go at (px, py), its centre: the nearer side, the height it was dropped at — inside the window. Pure. */
-export function settleBubble(px: number, py: number, view: { w: number; h: number }, inset: number): BubbleSpot {
+export function settleBubble(px: number, py: number, view: { w: number; h: number }, inset: number, s = SIZE): BubbleSpot {
   const side = px < view.w / 2 ? "left" : "right";
-  return { side, x: inset, y: clampBubbleY(view.h - py - SIZE / 2, view.h) };
+  return { side, x: inset, y: clampBubbleY(view.h - py - s / 2, view.h, s) };
 }
 /** A height that keeps the whole bubble on screen. Pure. */
-export function clampBubbleY(y: number, viewH: number): number {
-  return Math.round(Math.min(Math.max(y, MARGIN), Math.max(MARGIN, viewH - SIZE - MARGIN)));
+export function clampBubbleY(y: number, viewH: number, s = SIZE): number {
+  return Math.round(Math.min(Math.max(y, MARGIN), Math.max(MARGIN, viewH - s - MARGIN)));
 }
 /** How far the call's card rises to clear the bubble: only a bubble on its side, low enough to meet it. Pure. */
-export function liftFor(spot: BubbleSpot): number {
-  return spot.side === "right" && spot.y < RING_ZONE ? chatLift(spot.y) : 0;
+export function liftFor(spot: BubbleSpot, s = SIZE): number {
+  return spot.side === "right" && spot.y < RING_ZONE ? chatLift(spot.y, s) : 0;
 }
 /**
  * The panel by the bubble, where it was not dragged: above it when the room above is enough (or more than below),
  * else below it — its own height, never past the window. Pure.
  */
-export function anchorPanel(spot: BubbleSpot, viewH: number): { bottom?: number; top?: number; height: number } {
-  const above = viewH - (spot.y + SIZE + GAP) - 16;
+export function anchorPanel(spot: BubbleSpot, viewH: number, s = SIZE): { bottom?: number; top?: number; height: number } {
+  const above = viewH - (spot.y + s + GAP) - 16;
   const below = spot.y - GAP - 16;
-  if (above >= 420 || above >= below) return { bottom: spot.y + SIZE + GAP, height: Math.max(240, Math.min(640, above)) };
+  if (above >= 420 || above >= below) return { bottom: spot.y + s + GAP, height: Math.max(240, Math.min(640, above)) };
   return { top: viewH - spot.y + GAP, height: Math.max(240, Math.min(640, below)) };
 }
 /** A dragged panel's top-left, inside the window by the margin. Pure. */
@@ -233,6 +244,8 @@ export interface DeskLook {
   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[];
+  /** ขนาดปุ่ม, px (0.19.10) — 56 when the desk does not say. */
+  size?: number;
 }
 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. */
@@ -251,6 +264,15 @@ function wearLook(look: DeskLook | null): void {
   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");
+  // Its size (0.19.10): the button drawn so, and every place it stands, the panel and the call's card measured from it.
+  const s = bubbleSize(look?.size);
+  if (s !== size) {
+    size = s;
+    if (s === SIZE) root.style.removeProperty("--lw-chat-size");
+    else root.style.setProperty("--lw-chat-size", `${s}px`);
+    columns = null;
+    layout();
+  }
   const face = shadow?.querySelector<HTMLImageElement>(".face");
   const url = lookFaceUrl(getConfig().host, look);
   // Its rules and its switch may have changed where it stands.
@@ -369,7 +391,7 @@ function readColumn(side: Side, x: number): Rect[] {
   const k = `${side}:${x}`;
   let boxes = columns.boxes.get(k);
   if (!boxes) {
-    const col = side === "right" ? { left: v.w - x - SIZE, right: v.w - x } : { left: x, right: x + SIZE };
+    const col = side === "right" ? { left: v.w - x - size, right: v.w - x } : { left: x, right: x + size };
     boxes = scanColumns([col], v, { extra: avoidSetting().extra })[0] ?? [];
     columns.boxes.set(k, boxes);
   }
@@ -452,7 +474,7 @@ const onPageSettled = (e: Event) => {
   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);
+  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. */
@@ -500,16 +522,16 @@ function layout(): void {
   if (!bubble || !panel) return;
   const v = view();
   const want = wanted();
-  const wantY = clampBubbleY(want.y, v.h);
+  const wantY = clampBubbleY(want.y, v.h, size);
   // 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 home = { side: want.side, x: want.x, y: wantY };
   const placing = !!columns && avoidSetting().on;
-  const free = !isOpen || !shown ? (placing ? placeSpot(home, readColumn, v, SIZE, MARGIN, Math.max(MARGIN, v.h - SIZE - MARGIN), prev) : home) : shown;
+  const free = !isOpen || !shown ? (placing ? placeSpot(home, readColumn, v, size, MARGIN, Math.max(MARGIN, v.h - size - MARGIN), prev) : home) : shown;
   shown = { side: free.side, x: free.x, y: free.y };
   shownFor = wish;
-  if (placing) placedSig = JSON.stringify([blockedRanges(readColumn(home.side, home.x), home.side === "right" ? { left: v.w - home.x - SIZE, right: v.w - home.x } : { left: home.x, right: home.x + SIZE }, v.h, SIZE), shown]);
+  if (placing) placedSig = JSON.stringify([blockedRanges(readColumn(home.side, home.x), home.side === "right" ? { left: v.w - home.x - size, right: v.w - home.x } : { left: home.x, right: home.x + size }, v.h, size), shown]);
   const at = shown;
   const y = at.y;
   const other = at.side === "right" ? "left" : "right";
@@ -521,11 +543,11 @@ function layout(): void {
     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(at, v.h);
+    const a = anchorPanel(at, v.h, size);
     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" && bubble.style.display !== "none" ? liftFor(at) : 0;
+  const lift = root && root.style.display !== "none" && bubble.style.display !== "none" ? liftFor(at, size) : 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` : "";
@@ -542,6 +564,14 @@ let pressed: { id: number; sx: number; sy: number; moved: boolean } | null = nul
 let swallowClick = false;
 function onBubbleDown(e: PointerEvent): void {
   if (e.button !== 0) return;
+  /*
+   * The press is the bubble's alone (0.19.10; the owner, 11-02: "it can move only top/bottom on the right side … it
+   * cannot [move to] the left"): the bubble follows the pointer at once, and the browser then looks for what to drag at
+   * the point first pressed — the host page's own link or picture under it there (a left menu's link) — and starts
+   * dragging THAT, cancelling ours (pointercancel): the bubble went back where it was. Taken here, no native drag or
+   * text selection begins; the press is still a click, and the panel is still focused when it opens.
+   */
+  e.preventDefault();
   pressed = { id: e.pointerId, sx: e.clientX, sy: e.clientY, moved: false };
   try {
     bubble?.setPointerCapture(e.pointerId);
@@ -554,7 +584,7 @@ function onBubbleMove(e: PointerEvent): void {
   if (!pressed.moved && Math.hypot(e.clientX - pressed.sx, e.clientY - pressed.sy) < 6) return;
   pressed.moved = true;
   bubble.classList.add("dragging");
-  Object.assign(bubble.style, { left: `${e.clientX - SIZE / 2}px`, top: `${e.clientY - SIZE / 2}px`, right: "", bottom: "" });
+  Object.assign(bubble.style, { left: `${e.clientX - size / 2}px`, top: `${e.clientY - size / 2}px`, right: "", bottom: "" });
 }
 function onBubbleUp(e: PointerEvent): void {
   if (!pressed || e.pointerId !== pressed.id) return;
@@ -566,7 +596,7 @@ function onBubbleUp(e: PointerEvent): void {
   swallowClick = true;
   setTimeout(() => (swallowClick = false), 0);
   if (e.type === "pointerup") {
-    spot = settleBubble(e.clientX, e.clientY, view(), chatPlace(getConfig().chat)?.x ?? 16);
+    spot = settleBubble(e.clientX, e.clientY, view(), chatPlace(getConfig().chat)?.x ?? 16, size);
     movedByHand = true;
     // Moved by hand: the panel opens by it again.
     panelAt = null;
@@ -772,6 +802,7 @@ export function refreshSupportChat(): Promise<void> {
 
 export function unmountSupportChat(): void {
   deskLook = null;
+  size = SIZE;
   stopFrames?.();
   stopFrames = null;
   window.removeEventListener("message", onMessage);