@sphoro/bugcatch-web-sdk 0.20.0 → 0.21.0

package/src/panel/index.js

@@ -8,6 +8,7 @@
 // One dialog doing several jobs, one file each:
 //
 //   compose.js   the report form: drafts, severity, attachments, recording, Send
+//   feedback.js  the other form: "Give feedback", for what is not a bug
 //   rate-due.js  "how did we do?" about a settled report, above the form
 //   refs.js      "which record is this about", asked at Send
 //   notices.js   what the project's team is telling visitors, at the top
@@ -39,6 +40,16 @@ import { mountCallOffer } from './call.js';
 import { mountSignIn } from './signin.js';
 import { mountThread } from './thread.js';
 import { mountRateDue } from './rate-due.js';
+import { feedbackHtml, mountFeedback } from './feedback.js';
+
+/**
+ * What the header says on each of the two forms. The header names the errand;
+ * the switch under it is how to change errands.
+ */
+const MODES = {
+  report: { title: 'Report a bug', sub: 'We attach the page details for you.' },
+  feedback: { title: 'Give feedback', sub: 'The team reads every note.' },
+};
 
 /**
  * Open the panel over the page. `preloadCall` fetches the call code ahead of a
@@ -46,11 +57,17 @@ import { mountRateDue } from './rate-due.js';
  * to load code of its own.
  */
 export function openPanel({
-  root, host, dock, client, onClose, preloadCall = () => {}, themeControls = null,
+  root, host, dock, client, onClose, preloadCall = () => {}, themeControls = null, mode: askedMode = 'report',
 }) {
   addStyles(root);
   const cfg = client.config;
   const themeLabel = () => themeControls?.label() || '';
+  // Drawn straight away rather than once the API has answered, because nearly
+  // every project has it on: a switch that arrived a beat after the form would
+  // push the form down under the reader's cursor. The rare project that has it
+  // off loses it again when the answer comes (below).
+  const offerFeedback = cfg.feedback !== false;
+  let mode = offerFeedback && askedMode === 'feedback' ? 'feedback' : 'report';
 
   const scrim = document.createElement('div');
   // The panel opens out of whichever corner the dock is in, clearing it by the
@@ -59,40 +76,47 @@ export function openPanel({
     + `${dock.classList.contains('at-top') ? 'at-top' : 'at-bottom'}`;
   scrim.style.setProperty('--bc-dock-h', `${Math.round(dock.getBoundingClientRect().height)}px`);
   scrim.innerHTML = `
-    <div class="panel" role="dialog" aria-modal="true" aria-labelledby="bc-h">
+    <div class="panel" role="dialog" aria-modal="true" aria-labelledby="bc-h" data-mode="${mode}">
       ${headHtml({
         id: 'bc-h',
         // 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.',
+        title: MODES[mode].title,
+        sub: MODES[mode].sub,
         theme: themeLabel(),
       })}
+      ${offerFeedback ? `
+      <div class="modes" role="group" aria-label="What would you like to do?">
+        <button type="button" data-mode="report" aria-pressed="${mode === 'report'}">${ICONS.bug}Report a bug</button>
+        <button type="button" data-mode="feedback" aria-pressed="${mode === 'feedback'}">${ICONS.feedback}Give feedback</button>
+      </div>` : ''}
       <div class="body">
         <div class="slot" role="alert"></div>
         <!-- A settled report still waiting for its rating. Drawn only when the
              project asks for one here; see rate-due.js. -->
-        <div class="rate-due fix-rating" tabindex="-1" hidden></div>
+        <div class="rate-due fix-rating bug-only" tabindex="-1" hidden></div>
         <!-- What the project's team is telling visitors. Drawn only when it
              has published something. -->
         <div class="notices" hidden></div>
-        <div class="whoami" hidden></div>
+        <div class="whoami bug-only" hidden></div>
         <!-- The questions the assistant can answer from their account and
              close by itself. Drawn only when the project offers any. -->
-        <div class="picks" hidden></div>
-        <div class="known" hidden></div>
+        <div class="picks bug-only" hidden></div>
+        <div class="known bug-only" hidden></div>
         ${composeHtml(cfg)}
+        ${offerFeedback ? feedbackHtml() : ''}
       </div>
       <div class="foot">
-        <span class="note" aria-live="polite"></span>
+        <span class="note bug-only" aria-live="polite"></span>
         ${client.hasReports() ? '<button class="quiet" type="button" data-act="history">Your reports</button>' : ''}
         <span class="spacer"></span>
         <!-- Hidden until the API confirms this project can take a call, which
              most cannot. Drawn here rather than as a second launcher because it
              is the same errand as Send report — the difference is only whether
              the reporter would rather say it than type it. -->
-        <button class="ghost" type="button" data-act="call" hidden>${ICONS.phone}Talk to the team</button>
-        <button class="primary" type="button" data-act="send">Send report ${ICONS.send}</button>
+        <button class="ghost bug-only" type="button" data-act="call" hidden>${ICONS.phone}Talk to the team</button>
+        <button class="primary bug-only" type="button" data-act="send">Send report ${ICONS.send}</button>
+        ${offerFeedback ? `<button class="primary fb-only" type="button" data-act="send-feedback">Send feedback ${ICONS.send}</button>` : ''}
       </div>
       <div class="powered">Powered by
         <a class="brand-credit" href="https://bugcatch.sphoro.com" target="_blank" rel="noopener noreferrer" aria-label="BugCatch">${BRAND}</a>
@@ -163,6 +187,8 @@ export function openPanel({
     recheckSignIn: null,
     // rate-due.js
     mustRate: () => false,
+    // feedback.js
+    focusFeedback: () => {},
     // thread.js
     succeed: null,
     refreshThread: null,
@@ -180,6 +206,49 @@ export function openPanel({
   mountSignIn(ctx);
   mountThread(ctx);
   mountRateDue(ctx);
+  if (offerFeedback) mountFeedback(ctx);
+
+  /* ---------- report a bug, or give feedback ---------- */
+
+  /**
+   * Move between the two forms. Only while the forms are on screen: history,
+   * a report's conversation and the call screens replace the panel's markup,
+   * and there is no form there to switch to. Nothing typed into either form is
+   * lost by switching — both stay in the page, one of them hidden.
+   */
+  function setMode(next, { focus = true } = {}) {
+    const want = next === 'feedback' && $('.modes') ? 'feedback' : 'report';
+    const panel = scrim.querySelector('.panel');
+    if (ctx.closed || ctx.sending || !panel || !scrim.querySelector('.modes')) return;
+    if (want === 'feedback' && ctx.isRecording()) return;
+    mode = want;
+    panel.dataset.mode = want;
+    panel.querySelector('#bc-h').textContent = MODES[want].title;
+    panel.querySelector('.head .titles p').textContent = MODES[want].sub;
+    scrim.querySelectorAll('.modes [data-mode]').forEach((b) => {
+      b.setAttribute('aria-pressed', String(b.dataset.mode === want));
+    });
+    say('');
+    if (focus) (want === 'feedback' ? ctx.focusFeedback() : ctx.titleInput.focus());
+  }
+  scrim.querySelectorAll('.modes [data-mode]').forEach((btn) => {
+    btn.addEventListener('click', () => setMode(btn.dataset.mode));
+  });
+
+  // The project's own answer. Off — or an API too old to say — takes the
+  // switch away, and with it a feedback form the server would refuse.
+  if (offerFeedback) {
+    client.feedbackEnabled().then((on) => {
+      // Mid-send, the form stays for this open: the server's refusal says why,
+      // which beats a form vanishing from under the button just pressed.
+      if (on || ctx.closed || ctx.sending) return;
+      const wasFeedback = mode === 'feedback';
+      setMode('report', { focus: wasFeedback });
+      scrim.querySelector('.modes')?.remove();
+      scrim.querySelector('.feedback')?.remove();
+      scrim.querySelector('[data-act="send-feedback"]')?.remove();
+    });
+  }
 
   /* ---------- lifecycle ---------- */
 
@@ -251,9 +320,10 @@ export function openPanel({
 
   root.appendChild(scrim);
   ctx.refreshSendState();
-  ctx.titleInput.focus();
+  if (mode === 'feedback') ctx.focusFeedback();
+  else ctx.titleInput.focus();
 
-  return { destroy, close };
+  return { destroy, close, setMode };
 }
 
 /**

package/src/panel/styles.js

@@ -306,6 +306,53 @@ textarea { min-height: 76px; resize: vertical; }
 .seg button[aria-pressed=true]::before { opacity: 1; }
 .seg button:focus-visible { outline-offset: -2px; }
 
+/* ---------- report a bug, or give feedback ----------
+   The same stone track as the severity control, two wide segments, under the
+   header so it stays put while the form scrolls. Each form's own parts carry
+   bug-only or fb-only; the other screens (history, a conversation, a call)
+   carry neither, so a mode left on the panel cannot hide anything of theirs. */
+.modes {
+  flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
+  margin: 12px var(--bc-pad) 0; padding: 3px; background: var(--bc-stone); border-radius: 999px;
+}
+.modes button {
+  display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 0;
+  height: 32px; padding: 0 8px; font: inherit; font-size: var(--bc-fs-sm); font-weight: 520; line-height: 1; white-space: nowrap;
+  color: var(--bc-muted); background: none; border: none; border-radius: 999px;
+  cursor: pointer; transition: background 180ms var(--bc-ease), color 180ms, box-shadow 180ms;
+}
+.modes button svg { font-size: 15px; flex: none; }
+.modes button:hover { color: var(--bc-fg); }
+.modes button[aria-pressed=true] {
+  background: var(--bc-raised); color: var(--bc-fg); font-weight: 600;
+  box-shadow: 0 1px 2px rgba(20,18,14,.10), 0 0 0 .5px rgba(20,18,14,.08);
+}
+.modes button:focus-visible { outline-offset: -2px; }
+.panel[data-mode="feedback"] .bug-only,
+.panel:not([data-mode="feedback"]) .fb-only { display: none !important; }
+
+/* ---------- feedback ---------- */
+.feedback { animation: bc-fade-in 200ms ease both; }
+.feedback textarea { min-height: 96px; }
+.feedback .kinds { display: flex; flex-wrap: wrap; gap: 6px; }
+.feedback .kinds .tool[aria-pressed=true] { background: var(--bc-accent); border-color: var(--bc-accent); color: var(--bc-on-accent); }
+.feedback .kinds .tool[aria-pressed=true] svg { color: currentColor; }
+.faces { display: flex; gap: 6px; }
+.face {
+  flex: 1 1 0; display: grid; place-items: center; height: 42px; padding: 0;
+  font: inherit; font-size: 24px; color: var(--bc-muted); background: var(--bc-stone);
+  border: 1px solid transparent; border-radius: var(--bc-r-md); cursor: pointer;
+  transition: background 160ms, color 160ms, transform 160ms var(--bc-ease);
+}
+.face:hover { color: var(--bc-fg); background: color-mix(in srgb, var(--bc-fg) 8%, var(--bc-stone)); }
+.face:active { transform: scale(.94); }
+.face[aria-pressed=true] { color: var(--bc-on-accent); background: var(--bc-accent); }
+.face:focus-visible { outline-offset: 2px; }
+.face-word { font-weight: 560; color: var(--bc-muted); }
+.fb-as { margin: 0; font-size: var(--bc-fs-xs); line-height: 1.45; color: var(--bc-muted); }
+.fb-as strong { color: var(--bc-fg); font-weight: 600; word-break: break-all; }
+.fb-who:empty { display: none; }
+
 /* ---------- attachments ----------
    Three ring pills in a row: optional, so they take one line, not a band of
    dashed drop zones. */

package/src/widget.js

@@ -423,7 +423,13 @@ export function mountWidget(client) {
     open = openPanelWhenLoaded();
   });
 
+  // Which form the next panel opens on: BugCatch.open({ mode }) sets it just
+  // before pressing the launcher, and a person pressing it gets the report form.
+  let nextMode = 'report';
+
   function openPanelWhenLoaded() {
+    let mode = nextMode;
+    nextMode = 'report';
     hideLoadFailure();
     // The panel says it again, at the top, with the rest of what is live.
     hideNotice();
@@ -437,6 +443,8 @@ export function mountWidget(client) {
     const pending = {
       close: () => (panel ? panel.close() : cancel()),
       destroy: () => (panel ? panel.destroy() : cancel()),
+      // Asked again while it is on its way, or once it is open.
+      setMode: (m) => { if (panel) panel.setMode?.(m); else mode = m; },
     };
 
     launcher.setAttribute('aria-busy', 'true');
@@ -452,6 +460,7 @@ export function mountWidget(client) {
         client,
         preloadCall,
         themeControls,
+        mode,
         onClose: () => {
           open = null;
           dock.classList.remove('over');
@@ -558,7 +567,11 @@ export function mountWidget(client) {
   // Integration hook: BugCatch.open() / close() / isOpen() drive the same
   // launcher a person would press, so there is one way in to the panel.
   client.widgetControls = {
-    open: () => { if (!open) launcher.click(); },
+    open: (mode) => {
+      if (open) { if (mode) open.setMode(mode); return; }
+      nextMode = mode || 'report';
+      launcher.click();
+    },
     close: () => { open?.close(); },
     isOpen: () => Boolean(open),
   };