@sphoro/bugcatch-web-sdk 0.18.0 → 0.19.0

package/src/panel/thread.js

@@ -1,7 +1,8 @@
 // What happens to a report once it is filed: the confirmation, the
 // reporter's list of everything they have filed, and one report as a
 // conversation — with the assistant's live card over it, the "does the fix
-// work" question under it, and the reply box at the bottom (composer.js).
+// work" and "how did we do" questions under it, and the reply box at the
+// bottom (composer.js).
 
 import * as ICONS from './icons.js';
 import { threadHtml, typingHtml } from './messages.js';
@@ -15,6 +16,22 @@ import { mountComposer } from './composer.js';
 // leaves the DOM (and the reader's place in it) alone.
 const threadDrawn = new WeakMap();
 
+/** What a drawn rating box was drawn from, so a refresh can tell if it moved. */
+function ratingKey(rating) {
+  return JSON.stringify(rating ? [rating.score, rating.current, rating.comment || null] : null);
+}
+
+/**
+ * The rating's word on a history row: the score they gave, or a nudge on a
+ * settled report that is waiting for one. Nothing on an open report.
+ */
+function historyRating(r) {
+  if (r.rating) {
+    return ` · <span class="rated" aria-label="You rated this ${Number(r.rating)} out of 5">${ICONS.star}${Number(r.rating)}</span>`;
+  }
+  return r.ratingAsked ? ' · <span class="rate-ask">Rate it</span>' : '';
+}
+
 export function mountThread(ctx) {
   const {
     client, scrim, close,
@@ -88,7 +105,7 @@ export function mountThread(ctx) {
     openReportId = null;
     panel.classList.remove('is-chat');
     panel.innerHTML = `
-      ${headHtml({ title: 'Your reports', sub: "Everything you've reported, and where each one got to." })}
+      ${headHtml({ title: 'Your reports', sub: 'Where each one has got to.', theme: ctx.themeLabel() })}
       <div class="history" aria-busy="true">${skeletonRows(3)}</div>`;
 
     panel.querySelector('[data-act="close"]').addEventListener('click', close);
@@ -113,7 +130,7 @@ export function mountThread(ctx) {
           <span class="row-ico" aria-hidden="true">${ICONS.chat}</span>
           <span class="who">
             <span class="ttl">${escapeHtml(r.title)}</span>
-            <span class="sub">${escapeHtml(r.reference)} · ${escapeHtml(relativeDay(r.createdAt))}</span>
+            <span class="sub">${escapeHtml(r.reference)} · ${escapeHtml(relativeDay(r.createdAt))}${historyRating(r)}</span>
           </span>
           <span class="pill ${escapeHtml(String(r.status).toLowerCase())}">${escapeHtml(statusWord(r.status))}</span>
           <span class="chev" aria-hidden="true">${ICONS.chevronRight}</span>
@@ -146,7 +163,8 @@ export function mountThread(ctx) {
       ${headHtml({
         back: true,
         title: fresh ? 'Looking into it' : 'Your report',
-        sub: fresh ? 'Our assistant is on it — it may ask you a question here.' : 'Everything that has happened, and a way to answer.',
+        sub: fresh ? 'It may ask you a question here.' : 'Updates, and a way to reply.',
+        theme: ctx.themeLabel(),
       })}
       <div class="history chatting" aria-busy="true"><div class="thread">${skeletonBubbles()}</div></div>`;
 
@@ -199,6 +217,7 @@ export function mountThread(ctx) {
     threadDrawn.set(thread, drawn);
     scrollToLatest(thread);
     mountVerification(body, report);
+    mountRating(body, report);
     if (report.canReply) mountComposer(ctx, body, thread, bugId);
     mountAssistant(body, report, bugId);
     // Again, now the cards above it have taken their share of the height: the
@@ -246,9 +265,8 @@ export function mountThread(ctx) {
     const content = `
       <div class="as-body${previous && previous !== a.phase ? ' entering' : ''}">
         <div class="as-top">
-          <span class="as-orb" aria-hidden="true">${a.phase === 'analyzing' ? '<span class="as-spin"></span>'
-            : a.phase === 'calling' ? ICONS.phone
-              : a.phase === 'resolved' ? ICONS.check : ICONS.sparkle}</span>
+          <span class="as-orb${a.phase === 'calling' || a.phase === 'resolved' ? '' : ' orb'}" aria-hidden="true">${
+            a.phase === 'calling' ? ICONS.phone : a.phase === 'resolved' ? ICONS.check : ''}</span>
           <div class="as-text">
             <div class="as-title">${escapeHtml(a.title)}</div>
             <div class="as-detail">${escapeHtml(a.detail)}</div>
@@ -314,6 +332,97 @@ export function mountThread(ctx) {
     body.querySelector('.report-head')?.after(box);
   }
 
+  /**
+   * "How did we do?" — five stars under a settled report.
+   *
+   * Only where the API says a rating is being asked for: the report is settled
+   * and the project has not switched ratings off. One tap sends the score; a
+   * note is offered after it rather than before, because a form that asks for
+   * a sentence first is a form people close, and the score is the part that
+   * counts.
+   *
+   * Redrawn only when the rating itself changed. The thread refreshes on every
+   * update and every few seconds while the assistant works, and a box rebuilt
+   * on each of those would eat the note somebody was halfway through.
+   */
+  function mountRating(body, report) {
+    let box = body.querySelector('.fix-rating');
+    const settled = ['RESOLVED', 'CLOSED'].includes(report.status);
+    if (!settled || !report.ratingAsked) {
+      box?.remove();
+      return;
+    }
+    if (box && box.dataset.key === ratingKey(report.rating)) return;
+    if (!box) {
+      box = document.createElement('div');
+      box.className = 'fix-rating';
+      (body.querySelector('.fix-verification') || body.querySelector('.report-head'))?.after(box);
+    }
+    drawRating(box, report, report.rating || null);
+  }
+
+  function drawRating(box, report, rating, { justRated = false } = {}) {
+    box.dataset.key = ratingKey(rating);
+    // A rating given for an earlier fix stands, but it is not this fix's: the
+    // stars start empty and the sentence says what the old score was.
+    const shown = rating?.current ? rating.score : 0;
+    const question = !rating
+      ? 'How did we do?'
+      : !rating.current
+        ? `You rated an earlier fix ${rating.score} out of 5. How did this one go?`
+        : justRated
+          ? 'Thanks — the team will see that.'
+          : `You rated this ${rating.score} out of 5.`;
+    const askNote = justRated && rating?.current && !rating.comment;
+    box.innerHTML = `
+      <p class="fr-q">${escapeHtml(question)}</p>
+      <div class="stars" role="group" aria-label="Rate how this was handled, 1 to 5">${[1, 2, 3, 4, 5].map((n) => `
+        <button type="button" data-score="${n}" aria-pressed="${n === shown}" aria-label="${n} out of 5${n === 1 ? ', poor' : n === 5 ? ', great' : ''}" class="${n <= shown ? 'on' : ''}">${ICONS.star}</button>`).join('')}
+      </div>
+      ${rating?.current && rating.comment ? `<p class="fr-said">“${escapeHtml(rating.comment)}”</p>` : ''}
+      ${askNote ? `
+      <div class="fr-note">
+        <textarea maxlength="2000" aria-label="Add a note to your rating" placeholder="${rating.score <= 2 ? 'What went wrong? (optional)' : 'Anything to add? (optional)'}"></textarea>
+        <button type="button" data-act="rating-note">Add note</button>
+      </div>` : ''}
+      ${rating ? '' : '<p class="fr-hint">1 is poor, 5 is great.</p>'}
+      <p class="feedback-status" role="status"></p>`;
+
+    const stars = [...box.querySelectorAll('[data-score]')];
+    const paint = (upTo) => stars.forEach((b) => b.classList.toggle('on', Number(b.dataset.score) <= upTo));
+    const lock = (on) => box.querySelectorAll('button, textarea').forEach((el) => { el.disabled = on; });
+    const status = box.querySelector('.feedback-status');
+
+    async function send(score, comment) {
+      lock(true);
+      status.textContent = '';
+      try {
+        const saved = await client.rate(report.id, { score, comment });
+        drawRating(box, report, saved, { justRated: true });
+        box.querySelector('.fr-note textarea')?.focus();
+      } catch (err) {
+        status.textContent = err.message;
+        lock(false);
+        paint(shown);
+      }
+    }
+
+    for (const btn of stars) {
+      const n = Number(btn.dataset.score);
+      btn.addEventListener('mouseenter', () => paint(n));
+      btn.addEventListener('focus', () => paint(n));
+      btn.addEventListener('blur', () => paint(shown));
+      btn.addEventListener('click', () => send(n));
+    }
+    box.querySelector('.stars').addEventListener('mouseleave', () => paint(shown));
+
+    box.querySelector('[data-act="rating-note"]')?.addEventListener('click', () => {
+      const note = box.querySelector('.fr-note textarea').value.trim();
+      if (!note) { box.querySelector('.fr-note')?.remove(); return; }
+      send(rating.score, note);
+    });
+  }
+
   /**
    * Redraw the open thread in place, keeping whatever is half-typed.
    *
@@ -334,6 +443,7 @@ export function mountThread(ctx) {
     if (ctx.closed || !report || openReportId !== bugId) return;
 
     mountVerification(body, report);
+    mountRating(body, report);
     const pinned = atLatest(thread);
     const html = threadHtml(report.timeline);
     // Only rewritten when something changed, so a poll that brings nothing new

package/src/updates.js

@@ -12,6 +12,7 @@
 // filed them.
 
 import { tooManyMessage } from './busy.js';
+import { readableOn, INK, PAPER } from './accent.js';
 
 const TOKEN_KEY = 'bugcatch.watch';
 const BACKOFF_MS = [2000, 5000, 15000, 30000, 60000];
@@ -658,9 +659,21 @@ const STATUS_COPY = {
  */
 const KIND_ACCENT = {
   status: null,        // falls back to the host's configured accent
-  severity: '#e8912a',
-  assignment: '#4da3ff',
-  reply: '#35b87f',
+  severity: '#f2a54a',
+  assignment: '#79a8ff',
+  reply: '#4fd19a',
+};
+
+// The cards are always dark — they float over pages of every colour, and a
+// near-black card with a hairline reads on all of them. The colours are the
+// product's dark palette.
+const CARD = {
+  bg: '#111113',
+  fg: '#f3f2ef',
+  muted: '#b3b0aa',
+  faint: '#8f8c86',
+  ring: 'rgba(255,255,255,.09)',
+  brand: '#a59cff',
 };
 
 /**
@@ -736,7 +749,7 @@ function dockOffset() {
  * instead of a notification floating over the report it is about.
  */
 export function createUpdateNotifier({
-  accent = '#4F46E5',
+  accent = null,
   position = 'bottom-right',
   onRead = null,
   onReadAll = null,
@@ -784,17 +797,23 @@ export function createUpdateNotifier({
     setTimeout(() => el.remove(), 250);
   }
 
+  // On a dark card the ink default is a white pill with ink words; a host's
+  // own colour keeps whichever words read on it.
+  const primaryBg = accent || PAPER;
+  const primaryFg = accent ? readableOn(accent) : INK;
+
   function button(label, primary) {
     const el = document.createElement('button');
     el.type = 'button';
     el.textContent = label;
     el.style.cssText = [
-      'padding:5px 11px',
-      `border:${primary ? '0' : '1px solid rgba(236,238,242,.24)'}`,
-      'border-radius:6px',
-      `background:${primary ? accent : 'transparent'}`,
-      `color:${primary ? '#fff' : '#eceef2'}`,
-      'font:600 12px/1.4 inherit',
+      'padding:6px 12px',
+      'border:0',
+      `box-shadow:${primary ? 'none' : `inset 0 0 0 1px ${CARD.ring}`}`,
+      'border-radius:999px',
+      `background:${primary ? primaryBg : 'rgba(255,255,255,.06)'}`,
+      `color:${primary ? primaryFg : CARD.fg}`,
+      'font:560 12px/1.4 inherit',
       'cursor:pointer',
       'white-space:nowrap',
     ].join(';');
@@ -807,13 +826,12 @@ export function createUpdateNotifier({
     el.style.cssText = [
       'box-sizing:border-box',
       'width:100%',
-      'padding:12px 14px',
-      'border-radius:10px',
-      'background:#1b1e26',
-      'color:#eceef2',
+      'padding:13px 14px',
+      'border-radius:14px',
+      `background:${CARD.bg}`,
+      `color:${CARD.fg}`,
       'font:13px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif',
-      'box-shadow:0 12px 30px rgba(0,0,0,0.45)',
-      `border-left:3px solid ${KIND_ACCENT[record?.kind] || accent}`,
+      `box-shadow:0 0 0 1px ${CARD.ring},0 20px 44px -12px rgba(0,0,0,.55),0 4px 12px rgba(0,0,0,.25)`,
       'opacity:0',
       `transform:translateY(${atTop ? -8 : 8}px)`,
       'transition:opacity .2s ease,transform .2s ease',
@@ -821,25 +839,33 @@ export function createUpdateNotifier({
     ].join(';');
 
     const title = document.createElement('div');
-    title.style.cssText = 'font-weight:600;margin-bottom:2px';
-    title.textContent = updateHeadline(record);
+    title.style.cssText = 'display:flex;align-items:baseline;gap:8px;font-weight:600;margin-bottom:2px';
+    // The kind's colour, as a dot before the headline rather than a stripe
+    // down the card: a fix and a severity change are still told apart.
+    const dot = document.createElement('span');
+    dot.setAttribute('aria-hidden', 'true');
+    dot.style.cssText = `flex:none;width:7px;height:7px;border-radius:50%;transform:translateY(-1px);background:${
+      KIND_ACCENT[record?.kind] || accent || CARD.brand}`;
+    const headline = document.createElement('span');
+    headline.textContent = updateHeadline(record);
+    title.append(dot, headline);
 
     const body = document.createElement('div');
     // A reply is the one kind whose detail is worth more room than a title, and
     // it is the only text here the team wrote rather than the reporter.
     body.style.cssText = record?.kind === 'reply'
-      ? 'color:#a4abba;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden'
-      : 'color:#a4abba';
+      ? `color:${CARD.muted};padding-left:15px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden`
+      : `color:${CARD.muted};padding-left:15px`;
     // textContent, not innerHTML: this is text a person typed, being written
     // back into somebody else's page.
     body.textContent = updateDetail(record);
 
     const actions = document.createElement('div');
     actions.style.cssText =
-      'display:flex;align-items:center;gap:8px;margin-top:10px;flex-wrap:wrap';
+      'display:flex;align-items:center;gap:8px;margin-top:10px;padding-left:15px;flex-wrap:wrap';
 
     const when = document.createElement('span');
-    when.style.cssText = 'color:#7b8394;font-size:11px;margin-right:auto';
+    when.style.cssText = `color:${CARD.faint};font-size:11px;margin-right:auto`;
     when.textContent = agoLabel(record?.at);
 
     const read = button('Mark as read', false);
@@ -871,12 +897,12 @@ export function createUpdateNotifier({
       'display:flex',
       'align-items:center',
       'gap:8px',
-      'padding:8px 12px',
-      'border-radius:10px',
-      'background:#1b1e26',
-      'color:#a4abba',
+      'padding:8px 10px 8px 14px',
+      'border-radius:999px',
+      `background:${CARD.bg}`,
+      `color:${CARD.muted}`,
       'font:12px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif',
-      'box-shadow:0 12px 30px rgba(0,0,0,0.45)',
+      `box-shadow:0 0 0 1px ${CARD.ring},0 12px 30px -10px rgba(0,0,0,.5)`,
       'pointer-events:auto',
     ].join(';');
 
@@ -1064,6 +1090,30 @@ async function readJoinError(res) {
   return message || `Could not add you to this issue (HTTP ${res.status})`;
 }
 
+/**
+ * Rate how a settled report was handled, out of five, with a sentence if they
+ * want one. Rating again replaces the earlier score.
+ *
+ * Same credential as everything else here: the watch token, which is proof of
+ * having filed the report. `?projectId=` goes with it so a token that reaches
+ * more than one project is narrowed to the one this widget is on.
+ */
+export async function rateReport({ apiBase, bugId, score, comment }) {
+  const token = readToken();
+  if (!token) throw new Error('This browser cannot access that report.');
+  const res = await fetch(`${apiBase}/ingest/watch/reports/${encodeURIComponent(bugId)}/rating${projectQuery()}`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${token}` },
+    body: JSON.stringify({ score, ...(comment ? { comment } : {}) }),
+  });
+  const data = await res.json().catch(() => ({}));
+  if (!res.ok) {
+    const message = Array.isArray(data.message) ? data.message.join(', ') : data.message;
+    throw new Error(message || 'Could not send your rating. Please try again.');
+  }
+  return data;
+}
+
 export async function verifyFix({ apiBase, bugId, ...feedback }) {
   const token = readToken();
   if (!token) throw new Error('This browser cannot access that report.');