@sphoro/bugcatch-web-sdk 0.19.0 → 0.20.0

package/src/panel/rating.js

@@ -0,0 +1,87 @@
+// "How did we do?" — five stars and, after them, an optional note. Drawn under
+// a settled report's conversation (thread.js) and above the form on the first
+// screen (rate-due.js), so both ask the same question the same way.
+
+import * as ICONS from './icons.js';
+import { escapeHtml } from './render.js';
+
+/** What a drawn rating box was drawn from, so a refresh can tell if it moved. */
+export function ratingKey(rating) {
+  return JSON.stringify(rating ? [rating.score, rating.current, rating.comment || null] : null);
+}
+
+/**
+ * Draw the stars into `box` for `report`, with the reader's `rating` so far.
+ *
+ * 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. `onRated` hears each saved rating and
+ * `onError` each refusal, for a caller that holds something until it lands.
+ */
+export function drawRating(box, {
+  client, report, rating, justRated = false, question = null, onRated = null, onError = null,
+}) {
+  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 asked = !rating
+    ? (question || '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(asked)}</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, {
+        client, report, rating: saved, justRated: true, question, onRated, onError,
+      });
+      box.querySelector('.fr-note textarea')?.focus();
+      onRated?.(saved);
+    } catch (err) {
+      status.textContent = err.message;
+      lock(false);
+      paint(shown);
+      onError?.(err);
+    }
+  }
+
+  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);
+  });
+}

package/src/panel/signin.js

@@ -37,7 +37,7 @@ export function mountSignIn(ctx) {
     // The call offer is the same errand as the form, so it goes with it — and
     // comes back only if the API had already said this project can take one.
     if (shut) callBtn.hidden = true;
-    else if (ctx.callOffered()) callBtn.hidden = false;
+    else if (ctx.callOffered() && !ctx.mustRate()) callBtn.hidden = false;
   }
 
   function drawWhoami() {

package/src/panel/styles.js

@@ -831,6 +831,34 @@ button.quiet:hover { color: var(--bc-fg); text-decoration-color: color-mix(in sr
 .history .sub .rated svg { width: 11px; height: 11px; color: #f0a81c; }
 .history .sub .rate-ask { color: var(--bc-fg); font-weight: 600; }
 
+/* ---------- a settled report waiting for its rating ----------
+   Above the form on the first screen: the same stars as under a report's
+   conversation, with the report they are about named on top. */
+.rate-due { margin: 0 0 14px; }
+.rate-due:focus { outline: none; }
+.rate-due:focus-visible { box-shadow: var(--bc-ring); }
+.rate-due .rd-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0 0 8px; }
+.rate-due .rd-eyebrow {
+  font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--bc-faint);
+}
+.rate-due.is-required .rd-eyebrow { color: var(--bc-fg); }
+.rate-due .rd-later { font-size: var(--bc-fs-xs); color: var(--bc-muted); }
+.rate-due .rd-report {
+  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 9px; align-items: center;
+  margin: 0 0 10px; padding: 0 0 10px; border-bottom: 1px solid var(--bc-border);
+}
+.rate-due .rd-ico {
+  grid-row: span 2; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 999px;
+  background: color-mix(in srgb, var(--bc-ok) 14%, transparent); color: var(--bc-ok);
+}
+.rate-due .rd-ico svg { width: 13px; height: 13px; }
+.rate-due .rd-ttl { font-weight: 620; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.rate-due .rd-sub { font-size: var(--bc-fs-xs); color: var(--bc-muted); }
+
+/* What a required rating is holding: still in sight, plainly not yet. */
+.held { opacity: .42; transition: opacity 200ms ease; }
+@media (prefers-reduced-motion: reduce) { .held { transition: none; } }
+
 /* A call in progress, in place of the form.
    ---------------------------------------------------------------------------
    Deliberately not styled as a chat. Nothing arrives here to read — the

package/src/panel/thread.js

@@ -11,16 +11,12 @@ import {
   atLatest, scrollToLatest,
 } from './render.js';
 import { mountComposer } from './composer.js';
+import { drawRating, ratingKey } from './rating.js';
 
 // What each open thread was last drawn from, so a poll that brings nothing new
 // 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.
@@ -336,10 +332,7 @@ export function mountThread(ctx) {
    * "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.
+   * and the project has not switched ratings off. The box itself is rating.js.
    *
    * 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
@@ -358,69 +351,7 @@ export function mountThread(ctx) {
       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);
-    });
+    drawRating(box, { client, report, rating: report.rating || null });
   }
 
   /**