@sphoro/bugcatch-web-sdk 0.18.0 → 0.19.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sphoro/bugcatch-web-sdk",
-  "version": "0.18.0",
+  "version": "0.19.0",
   "description": "Drop-in browser SDK — report bugs with console, network and environment context, without the extension.",
   "type": "module",
   "main": "dist/bugcatch.es.js",

package/src/accent.js

@@ -0,0 +1,38 @@
+// The colour the widget's buttons wear, and the colour of the words on them.
+//
+// With no `accent` configured the widget is ink: a black pill on a light page
+// and a white one on a dark page, which sits on any brand without arguing with
+// it. A configured accent is the host's own colour, and the text on it is
+// whichever of white or ink can be read against it — a pale brand colour with
+// white words on it is a button nobody can read.
+
+export const INK = '#0e0e10';
+export const PAPER = '#ffffff';
+
+/**
+ * White or ink, whichever reads on `color`. Only colours this can parse (#rgb,
+ * #rrggbb, rgb()) are measured; anything else (a name, hsl(), a variable) gets
+ * white, which is what every accent got before this existed.
+ */
+export function readableOn(color) {
+  const rgb = parse(color);
+  if (!rgb) return PAPER;
+  const [r, g, b] = rgb.map((c) => {
+    const s = c / 255;
+    return s <= 0.03928 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;
+  });
+  const luminance = 0.2126 * r + 0.7152 * g + 0.0722 * b;
+  // The crossover where ink starts to out-contrast white.
+  return luminance > 0.179 ? INK : PAPER;
+}
+
+function parse(color) {
+  const s = String(color || '').trim();
+  let m = /^#([0-9a-f]{3})$/i.exec(s);
+  if (m) return [...m[1]].map((h) => parseInt(h + h, 16));
+  m = /^#([0-9a-f]{6})$/i.exec(s);
+  if (m) return [0, 2, 4].map((i) => parseInt(m[1].slice(i, i + 2), 16));
+  m = /^rgba?\(\s*(\d+)[\s,]+(\d+)[\s,]+(\d+)/i.exec(s);
+  if (m) return [m[1], m[2], m[3]].map(Number);
+  return null;
+}

package/src/incoming-call.js

@@ -37,6 +37,8 @@
 // yet, which is its rule and not ours — the card rings silently rather than not
 // appearing.
 
+import { readableOn, INK, PAPER } from './accent.js';
+
 /**
  * A quiet double-pulse, once every three seconds.
  *
@@ -157,8 +159,8 @@ const BUTTON = [
   'flex:1',
   'padding:9px 12px',
   'border:0',
-  'border-radius:8px',
-  'font:600 13px/1.4 inherit',
+  'border-radius:999px',
+  'font:560 13px/1.4 inherit',
   'cursor:pointer',
 ].join(';');
 
@@ -168,7 +170,8 @@ const BUTTON = [
  * @param {object} opts
  * @param {object} opts.call  The `incomingCall` object off the update stream —
  *   `callId`, `from`, `project`, `reference`, `ringsUntil`, `recorded`.
- * @param {string} opts.accent  The integration's own colour, for Answer.
+ * @param {string|null} opts.accent  The integration's own colour, for Answer;
+ *   null is the ink default, which on this dark card is a white button.
  * @param {string} [opts.position]  Same two words the toast takes.
  * @param {() => void} opts.onAnswer   Pressed Answer.
  * @param {() => void} opts.onDecline  Pressed Decline.
@@ -181,7 +184,7 @@ const BUTTON = [
  *   an ordinary dismissal; the caller passes one only for its own logging.
  */
 export function showIncomingCall({
-  call, accent = '#5b6ef5', position = 'bottom-right',
+  call, accent = null, position = 'bottom-right',
   onAnswer, onDecline, onExpire, touched = () => false,
 }) {
   if (typeof document === 'undefined' || !document.body) return () => {};
@@ -200,13 +203,12 @@ export function showIncomingCall({
     'z-index:2147483647',
     'width:300px',
     'max-width:calc(100vw - 40px)',
-    'padding:14px',
-    'border-radius:12px',
-    'background:#1b1e26',
-    'color:#eceef2',
+    'padding:16px',
+    'border-radius:16px',
+    'background:#111113',
+    'color:#f3f2ef',
     'font:13px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif',
-    'box-shadow:0 18px 44px rgba(0,0,0,0.5)',
-    `border:1px solid ${accent}`,
+    `box-shadow:0 0 0 1px ${accent ? `color-mix(in srgb, ${accent} 55%, transparent)` : 'rgba(255,255,255,.12)'},0 24px 50px -12px rgba(0,0,0,.6)`,
     'opacity:0',
     'transform:translateY(8px)',
     'transition:opacity .2s ease,transform .2s ease',
@@ -219,23 +221,23 @@ export function showIncomingCall({
   heading.textContent = `${call.from || 'Support'} is calling`;
 
   const about = document.createElement('div');
-  about.style.cssText = 'color:#a4abba;margin-bottom:10px';
+  about.style.cssText = 'color:#b3b0aa;margin-bottom:10px';
   about.textContent = call.project
     ? `About your report ${call.reference} · ${call.project}`
     : `About your report ${call.reference}`;
 
   const countdown = document.createElement('div');
-  countdown.style.cssText = 'color:#7d8598;font-size:12px;margin-bottom:10px';
+  countdown.style.cssText = 'color:#8f8c86;font-size:12px;margin-bottom:10px';
 
   const answer = document.createElement('button');
   answer.type = 'button';
   answer.textContent = 'Answer';
-  answer.style.cssText = `${BUTTON};background:${accent};color:#fff`;
+  answer.style.cssText = `${BUTTON};background:${accent || PAPER};color:${accent ? readableOn(accent) : INK}`;
 
   const decline = document.createElement('button');
   decline.type = 'button';
   decline.textContent = 'Not now';
-  decline.style.cssText = `${BUTTON};background:#2b2f3a;color:#c8cedb`;
+  decline.style.cssText = `${BUTTON};background:rgba(255,255,255,.08);color:#f3f2ef`;
 
   const actions = document.createElement('div');
   actions.style.cssText = 'display:flex;gap:8px';
@@ -244,7 +246,7 @@ export function showIncomingCall({
   el.append(heading, about, countdown);
   if (call.recorded) {
     const kept = document.createElement('div');
-    kept.style.cssText = 'color:#7d8598;font-size:12px;margin-bottom:10px';
+    kept.style.cssText = 'color:#8f8c86;font-size:12px;margin-bottom:10px';
     kept.textContent = 'This call will be recorded.';
     el.append(kept);
   }

package/src/index.d.ts

@@ -196,8 +196,12 @@ export interface BugCatchConfig {
   widgetPosition?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
   /** 'auto' follows the visitor's system setting. Default 'auto'. */
   theme?: 'auto' | 'light' | 'dark';
-  /** Any CSS colour. Default '#4F46E5'. */
-  accent?: string;
+  /**
+   * Any CSS colour, for the launcher, the buttons and the assistant's orb. The
+   * words on it are white or near-black, whichever reads. Default null: ink,
+   * which is a black button on light and a white one on dark.
+   */
+  accent?: string | null;
   /** Offer screenshot / recording / file attach in the widget. Default true. */
   attachments?: boolean;
   /**
@@ -462,6 +466,25 @@ export interface MyReport {
   project: string;
   workspace: string;
   attachments: number;
+  /** Their score for how it was handled, 1–5, or null when they have not rated it. */
+  rating: number | null;
+  /** Settled, on a project that asks for ratings — so a list can say "rate it". */
+  ratingAsked: boolean;
+}
+
+/**
+ * A reporter's own rating of how a settled report was handled.
+ *
+ * `current` is false when the report has been reopened and settled again since
+ * it was given — the rating stands, but it was for an earlier fix.
+ */
+export interface ReportRating {
+  /** 1–5, five best. */
+  score: number;
+  comment: string | null;
+  ratedAt: string;
+  via: 'widget' | 'portal' | 'email';
+  current: boolean;
 }
 
 /** A report of this browser's changed status. */
@@ -552,6 +575,18 @@ export interface ReportDetail {
   attachments: { type: string; mime: string; createdAt: string; url: string | null }[];
   /** Every step from filing to now, oldest first, both sides' messages included. */
   timeline: ReportTimelineEntry[];
+  /** When it was last settled, or null while it is open. */
+  resolvedAt: string | null;
+  /** Their answer to "does the fix work?", or null when they have not given one. */
+  verification: 'CONFIRMED' | 'STILL_HAPPENING' | null;
+  /** Their rating of how it was handled, or null. See rate(). */
+  rating: ReportRating | null;
+  /**
+   * Whether a rating is being asked for: the report is settled and the project
+   * has not switched ratings off. The widget draws its stars only when this is
+   * true; an integration's own view should do the same.
+   */
+  ratingAsked: boolean;
   /**
    * The same figure they were given when they filed it, so coming back to check
    * is not a worse experience than not checking. Null on a settled report — the
@@ -787,6 +822,12 @@ export declare class BugCatchClient {
   endCall(): this;
   /** Tell the team whether their fix worked. STILL_HAPPENING re-sends this browser's context. */
   verifyFix(bugId: string, feedback: { result: 'CONFIRMED' | 'STILL_HAPPENING'; resolvedAt: string; note?: string }): Promise<{ verification: string; status: string }>;
+  /**
+   * Rate how a settled report was handled, 1–5, five best. Rating again
+   * replaces the earlier score. Rejects while the report is open, or on a
+   * project that does not ask for ratings (`ratingAsked` is false).
+   */
+  rate(bugId: string, rating: { score: 1 | 2 | 3 | 4 | 5; comment?: string }): Promise<ReportRating>;
   /** One report with its full timeline, or null if this browser cannot prove it filed it. */
   myReport(bugId: string): Promise<ReportDetail | null>;
   /**

package/src/index.js

@@ -6,7 +6,7 @@ import { mountWidget } from './widget.js';
 import { uploadAttachment, normalizeMime, REPORT_MIMES } from './capture.js';
 import {
   watchUpdates, createUpdateNotifier, fetchMyReports, fetchReport, writeToken, readToken,
-  clearToken, scopeReports, sendMessage, verifyFix, callKindsForProject,
+  clearToken, scopeReports, sendMessage, verifyFix, rateReport, callKindsForProject,
   reportByCall, liveCallAvailable, requestLiveCall, giveUpLiveCall,
   answerIncomingCall, declineIncomingCall,
   readUnread, rememberUpdate, forgetUpdate, forgetReportUpdates, forgetAllUpdates,
@@ -49,7 +49,9 @@ const DEFAULTS = {
   widgetPosition: 'bottom-right',
   // 'auto' follows the visitor's system setting; 'light' / 'dark' pin it.
   theme: 'auto',
-  accent: '#4F46E5',
+  // null is ink: black buttons on light, white on dark (accent.js). Any CSS
+  // colour makes the buttons, the launcher and the assistant's orb that colour.
+  accent: null,
   // Draw what the project's team is telling visitors — written on the Widget
   // announcements settings page — in the panel, and beside the button for the
   // ones written for that. false draws nothing; announcements() still answers,
@@ -456,6 +458,28 @@ class BugCatchClient {
     this.notifier.render(unread);
   }
 
+  /**
+   * Tell the team whether their fix worked. STILL_HAPPENING reopens the report
+   * and re-sends this browser's context with it.
+   */
+  async verifyFix(bugId, { result, resolvedAt, note }) {
+    const context = result === 'STILL_HAPPENING' ? await this.#payload({}) : {};
+    return verifyFix({ apiBase: this.config.apiBase, bugId, result, resolvedAt, note, metadata: context.metadata, logs: context.logs });
+  }
+
+  /**
+   * Rate how a settled report was handled, 1 to 5, five best.
+   *
+   *   await BugCatch.rate(report.id, { score: 4, comment: 'Quick, thanks' });
+   *
+   * Only once the report is RESOLVED or CLOSED, on a project that asks for
+   * ratings — `myReport(id).ratingAsked` says whether it does. Rating again
+   * replaces the earlier score rather than adding a second one.
+   */
+  async rate(bugId, { score, comment } = {}) {
+    return rateReport({ apiBase: this.config.apiBase, bugId, score, comment });
+  }
+
   /**
    * One report in full, with its timeline — every step from filing to now.
    *
@@ -464,11 +488,6 @@ class BugCatchClient {
    *
    * Resolves to null when this browser cannot prove it filed that report.
    */
-  async verifyFix(bugId, { result, resolvedAt, note }) {
-    const context = result === 'STILL_HAPPENING' ? await this.#payload({}) : {};
-    return verifyFix({ apiBase: this.config.apiBase, bugId, result, resolvedAt, note, metadata: context.metadata, logs: context.logs });
-  }
-
   async myReport(bugId) {
     const report = await fetchReport({ apiBase: this.config.apiBase, bugId });
     this.#notePhase(bugId, report?.assistant);

package/src/panel/icons.js

@@ -17,6 +17,8 @@ export const retry = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
 // The assistant's mark: a four-point spark, drawn wherever it speaks.
 export const sparkle = '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2.5c.5 4.6 2.9 7 7.5 7.5v.1c-4.6.5-7 2.9-7.5 7.5h-.1c-.5-4.6-2.9-7-7.5-7.5V10c4.6-.5 7-2.9 7.5-7.5z"/><path d="M18.6 15.2c.2 1.9 1.2 2.9 3.1 3.1v.1c-1.9.2-2.9 1.2-3.1 3.1h-.1c-.2-1.9-1.2-2.9-3.1-3.1v-.1c1.9-.2 2.9-1.2 3.1-3.1z" opacity=".7"/></svg>';
 export const chevronRight = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9.5 6l6 6-6 6"/></svg>';
+// A rating star. Filled; the empty and chosen states are colour, set in CSS.
+export const star = '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2.9l2.75 5.82 6.37.76-4.7 4.37 1.24 6.3L12 17.03l-5.66 3.12 1.24-6.3-4.7-4.37 6.37-.76z"/></svg>';
 export const inbox = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 13.5l2.6-7.2A1.5 1.5 0 0 1 7.5 5.3h9a1.5 1.5 0 0 1 1.4 1L20.5 13.5V18a1.5 1.5 0 0 1-1.5 1.5H5A1.5 1.5 0 0 1 3.5 18z"/><path d="M3.5 13.5h4.8l1.2 2.2h5l1.2-2.2h4.8"/></svg>';
 
 /* The sphoro lockup, as outlines rather than text.

package/src/panel/index.js

@@ -44,10 +44,11 @@ import { mountThread } from './thread.js';
  * to load code of its own.
  */
 export function openPanel({
-  root, host, dock, client, onClose, preloadCall = () => {},
+  root, host, dock, client, onClose, preloadCall = () => {}, themeControls = null,
 }) {
   addStyles(root);
   const cfg = client.config;
+  const themeLabel = () => themeControls?.label() || '';
 
   const scrim = document.createElement('div');
   // The panel opens out of whichever corner the dock is in, clearing it by the
@@ -59,8 +60,11 @@ export function openPanel({
     <div class="panel" role="dialog" aria-modal="true" aria-labelledby="bc-h">
       ${headHtml({
         id: 'bc-h',
-        title: 'Tell us what went wrong',
-        sub: "Our assistant starts looking right away. We attach the page details for you.",
+        // Not "Tell us what went wrong": that is the first field's own label,
+        // a few pixels below. The header names the errand the launcher named.
+        title: 'Report a bug',
+        sub: 'We attach the page details for you.',
+        theme: themeLabel(),
       })}
       <div class="body">
         <div class="slot" role="alert"></div>
@@ -133,6 +137,7 @@ export function openPanel({
     say,
     close,
     preloadCall,
+    themeLabel,
     onDestroy: (fn) => { cleanups.push(fn); },
     // compose.js
     refreshSendState: null,
@@ -218,6 +223,15 @@ export function openPanel({
   document.addEventListener('keydown', onKeydown, true);
   scrim.addEventListener('click', (e) => { if (e.target === scrim && !ctx.sending) close(); });
   $('[data-act="close"]').addEventListener('click', close);
+  // On the scrim rather than the button: every screen draws its own header, and
+  // the scrim is the one element all of them are drawn inside.
+  scrim.addEventListener('click', (e) => {
+    const btn = e.target.closest('[data-act="theme"]');
+    if (!btn || !themeControls) return;
+    const next = themeControls.cycle();
+    btn.title = `Theme: ${next.label}`;
+    btn.setAttribute('aria-label', `Theme: ${next.label}. Change theme`);
+  });
 
   /** The banner at the top of the form: an error, or with `info`, a notice. */
   function say(text, kind = 'err') {

package/src/panel/messages.js

@@ -100,7 +100,7 @@ export function messageHtml(message, state = '') {
   let avatar = '';
   if (automated) {
     who = '<span class="msg-who auto">Assistant <span class="tag">AI</span></span>';
-    avatar = `<span class="av bot" aria-hidden="true">${ICONS.sparkle}</span>`;
+    avatar = `<span class="av bot orb" aria-hidden="true"></span>`;
   } else if (!mine) {
     const name = message.author || 'Support team';
     who = `<span class="msg-who">${escapeHtml(name)}</span>`;
@@ -140,7 +140,7 @@ export function messageHtml(message, state = '') {
 export function typingHtml() {
   return `
     <div class="typing-row">
-      <span class="av bot" aria-hidden="true">${ICONS.sparkle}</span>
+      <span class="av bot orb" aria-hidden="true"></span>
       <span class="msg-who auto">Assistant <span class="tag">AI</span></span>
       <div class="bubble typing" role="img" aria-label="The assistant is working on it"><i></i><i></i><i></i></div>
     </div>`;

package/src/panel/picks.js

@@ -18,14 +18,18 @@ export function mountPicks(ctx) {
   function drawPicks() {
     if (!agentIssues.length) { picks.hidden = true; picks.innerHTML = ''; return; }
     picks.hidden = false;
+    // Chips, not cards: they are a shortcut in front of the form, and three
+    // two-line cards pushed the form itself off the first screen. The hint is
+    // still there — as the chip's tooltip and its accessible description.
     picks.innerHTML = `
       <p class="picks-h">Get an answer right away</p>
       <div class="picks-grid" role="group" aria-label="Common questions">
-        ${agentIssues.map((issue) => `
+        ${agentIssues.map((issue, i) => `
           <button type="button" class="pick" data-pick="${escapeHtml(issue.key)}"
+            ${issue.hint ? `title="${escapeHtml(issue.hint)}" aria-describedby="bc-pick-h${i}"` : ''}
             aria-pressed="${pickedIssue?.key === issue.key}">
             <span class="t">${escapeHtml(issue.title)}</span>
-            ${issue.hint ? `<span class="h">${escapeHtml(issue.hint)}</span>` : ''}
+            ${issue.hint ? `<span class="h sr-only" id="bc-pick-h${i}">${escapeHtml(issue.hint)}</span>` : ''}
           </button>`).join('')}
       </div>
       ${pickedIssue ? `<p class="picks-note">${ICONS.check}<span>Our assistant will check your account and reply here. Add anything else below, then send.</span></p>` : ''}`;

package/src/panel/refs.js

@@ -137,7 +137,7 @@ export function mountReferences(ctx) {
     const many = kinds.length > 6;
     refsBox.innerHTML = `
       <div class="ask-head">
-        <span class="avatar" aria-hidden="true">${ICONS.sparkle}</span>
+        <span class="avatar orb" aria-hidden="true"></span>
         <div>
           <strong>${escapeHtml(head[0])}</strong>
           <p class="why">${escapeHtml(head[1])}</p>

package/src/panel/render.js

@@ -6,18 +6,26 @@
 import * as ICONS from './icons.js';
 
 /**
- * The panel's header, on every screen. The assistant's avatar carries the
+ * The panel's header, on every screen. The assistant's orb carries the
  * identity; `back` adds the way out of a report to the list of them.
+ *
+ * `theme` is the name of the theme in force ("Light", "Dark", "System
+ * default"); given one, the header carries the button that moves to the next.
+ * The button holds all three glyphs and the stylesheet shows the one matching
+ * the host element's class, so it is right on every screen without anyone
+ * redrawing it. Its press is handled once, on the scrim (index.js).
  */
-export function headHtml({ title, sub, id = '', back = false }) {
+export function headHtml({ title, sub, id = '', back = false, theme = '' }) {
   return `
     <div class="head">
       ${back ? `<button class="icon-btn back" type="button" data-act="back" aria-label="Back to your reports">${ICONS.back}</button>` : ''}
-      <div class="mark" aria-hidden="true">${ICONS.sparkle}</div>
+      <span class="orb mark" aria-hidden="true"></span>
       <div class="titles">
         <h2${id ? ` id="${id}"` : ''}>${escapeHtml(title)}</h2>
         <p>${escapeHtml(sub)}</p>
       </div>
+      ${theme ? `<button class="icon-btn theme" type="button" data-act="theme" title="Theme: ${escapeHtml(theme)}"
+        aria-label="Theme: ${escapeHtml(theme)}. Change theme"><span class="m-light">${ICONS.sun}</span><span class="m-dark">${ICONS.moon}</span><span class="m-auto">${ICONS.auto}</span></button>` : ''}
       <button class="icon-btn" type="button" data-act="close" aria-label="Close">${ICONS.close}</button>
     </div>`;
 }