@sphoro/bugcatch-web-sdk 0.17.0 → 0.19.0

package/src/panel/composer.js

@@ -0,0 +1,235 @@
+// The reply box under a report's thread.
+
+import * as ICONS from './icons.js';
+import {
+  startVoiceNote, voiceSupported, humanSize, humanDuration, UPLOAD_MIMES,
+} from '../capture.js';
+import { messageHtml } from './messages.js';
+import { escapeHtml, scrollToLatest } from './render.js';
+
+/**
+ * The box at the bottom: text, files, and a voice note.
+ *
+ * Files are uploaded as they are picked, not on send, so the wait happens
+ * while the person is still writing rather than after they have pressed the
+ * button — and so a failed upload is visible as a failed chip instead of a
+ * message that never went.
+ */
+export function mountComposer(ctx, body, thread, bugId) {
+  const { client, cfg } = ctx;
+  const composer = document.createElement('div');
+  composer.className = 'composer';
+  composer.innerHTML = `
+    <div class="staged" hidden></div>
+    <div class="row">
+      <div class="tools">
+        ${cfg.attachments === false ? '' : `
+        <button class="tool" type="button" data-act="attach" title="Attach a file" aria-label="Attach a file">${ICONS.paperclip}</button>
+        <button class="tool" type="button" data-act="voice" title="Record a voice note" aria-label="Record a voice note">${ICONS.mic}</button>`}
+        <button class="tool" type="button" data-act="livecall" title="Call the team" aria-label="Call the team" hidden>${ICONS.phone}</button>
+      </div>
+      <textarea rows="1" placeholder="Write a reply…" aria-label="Write a reply"></textarea>
+      <button class="send" type="button" data-act="send" title="Send" aria-label="Send" disabled>${ICONS.send}</button>
+    </div>
+    <div class="note" hidden></div>
+    <input type="file" hidden multiple accept="${UPLOAD_MIMES.join(',')}">`;
+  body.appendChild(composer);
+
+  const staged = composer.querySelector('.staged');
+  const input = composer.querySelector('textarea');
+  const sendBtn = composer.querySelector('[data-act="send"]');
+  const voiceBtn = composer.querySelector('[data-act="voice"]');
+  const liveBtn = composer.querySelector('[data-act="livecall"]');
+  const picker = composer.querySelector('input[type=file]');
+  const note = composer.querySelector('.note');
+
+  // Uploaded files waiting to ride on the next message.
+  const files = [];
+  let recorder = null;
+  let sending = false;
+
+  function say(text, kind = '') {
+    note.hidden = !text;
+    note.className = `note ${kind}`;
+    note.textContent = text || '';
+  }
+
+  function refresh() {
+    const ready = files.filter((f) => f.storageKey);
+    sendBtn.disabled = sending || (!input.value.trim() && !ready.length);
+    staged.hidden = !files.length;
+    staged.innerHTML = files.map((f, i) => `
+      <span class="chip ${f.storageKey ? '' : 'uploading'}">
+        <span class="nm">${escapeHtml(f.name)}</span>
+        <span class="sz">${f.storageKey ? humanSize(f.size) : 'sending…'}</span>
+        <button type="button" data-drop="${i}" aria-label="Remove ${escapeHtml(f.name)}">${ICONS.close}</button>
+      </span>`).join('');
+    for (const btn of staged.querySelectorAll('[data-drop]')) {
+      btn.addEventListener('click', () => {
+        files.splice(Number(btn.dataset.drop), 1);
+        refresh();
+      });
+    }
+  }
+
+  /** Upload one blob and stage it. Its chip is on screen for the whole trip. */
+  async function stage(blob, mime, name) {
+    const entry = { name, size: blob.size, storageKey: null };
+    files.push(entry);
+    refresh();
+    try {
+      const { storageKey, mime: stored } = await client.uploadAttachment(blob, mime);
+      entry.storageKey = storageKey;
+      entry.mime = stored;
+    } catch (err) {
+      files.splice(files.indexOf(entry), 1);
+      say(err.message || 'That file could not be sent.', 'err');
+    }
+    refresh();
+  }
+
+  input.addEventListener('input', () => {
+    // Grow with the text, up to the CSS cap. A reply about a bug is often
+    // three lines, and a one-line box makes people write one line.
+    input.style.height = 'auto';
+    input.style.height = `${Math.min(input.scrollHeight, 120)}px`;
+    refresh();
+  });
+
+  // Enter sends, Shift+Enter breaks the line — the chat convention. Anyone
+  // who wants a paragraph gets it; nobody has to hunt for the button.
+  input.addEventListener('keydown', (e) => {
+    if (e.key === 'Enter' && !e.shiftKey && !e.isComposing) {
+      e.preventDefault();
+      send();
+    }
+  });
+
+  // Absent when the host set `attachments: false` — which the report form
+  // has always honoured and this composer did not, so a host keeping files
+  // and microphone audio outside its compliance perimeter still had both
+  // offered in the follow-up thread.
+  composer.querySelector('[data-act="attach"]')?.addEventListener('click', () => picker.click());
+  picker.addEventListener('change', () => {
+    say('');
+    for (const file of picker.files) {
+      if (file.size > client.config.maxAttachmentBytes) {
+        say(`${file.name} is larger than ${humanSize(client.config.maxAttachmentBytes)}.`, 'err');
+        continue;
+      }
+      stage(file, file.type, file.name);
+    }
+    picker.value = '';
+  });
+
+  if (voiceBtn && !voiceSupported()) {
+    voiceBtn.disabled = true;
+    voiceBtn.title = 'This browser cannot record audio';
+  }
+
+  voiceBtn?.addEventListener('click', async () => {
+    if (recorder) {
+      const handle = recorder;
+      recorder = null;
+      voiceBtn.classList.remove('recording');
+      voiceBtn.innerHTML = ICONS.mic;
+      say('');
+      const { blob, mime } = await handle.stop();
+      if (blob.size) stage(blob, mime, 'Voice note');
+      return;
+    }
+    try {
+      say('');
+      recorder = await startVoiceNote({
+        maxMs: client.config.maxRecordingMs,
+        onTick: (s) => say(`Recording — ${humanDuration(s)}. Tap the mic to stop.`),
+        onAutoStop: () => voiceBtn.click(),
+      });
+      voiceBtn.classList.add('recording');
+      voiceBtn.innerHTML = ICONS.stopSquare;
+    } catch {
+      recorder = null;
+      say('The microphone is not available — check the browser permission.', 'err');
+    }
+  });
+
+  /* ---------- calling the team ---------- */
+
+  // Asked once, when a report is opened, and the button stays hidden unless
+  // the answer is yes. Most workspaces have live calling off, and a phone
+  // icon that apologises on press is worse than no phone icon.
+  client.canCallTeam(bugId)
+    .then((available) => {
+      if (!available) return;
+      liveBtn.hidden = false;
+      // Offered, so fetch what placing it needs now: the press should ring,
+      // not wait for code.
+      ctx.preloadCall();
+    })
+    .catch(() => { /* not available is the safe answer to every failure */ });
+
+  liveBtn.addEventListener('click', async () => {
+    liveBtn.disabled = true;
+    say('');
+    try {
+      const handle = await client.startLiveCall(bugId);
+      ctx.showLiveCall(body, thread, handle);
+    } catch (err) {
+      say(err.message.replace('[BugCatch] ', ''), 'err');
+    } finally {
+      liveBtn.disabled = false;
+    }
+  });
+
+  sendBtn.addEventListener('click', send);
+
+  // The confirm question's quick answers: the same as typing and sending.
+  thread.addEventListener('click', (e) => {
+    const quick = e.target.closest?.('[data-quick]');
+    if (!quick || sending) return;
+    input.value = quick.dataset.quick;
+    send();
+  });
+
+  async function send() {
+    const text = input.value.trim();
+    const ready = files.filter((f) => f.storageKey);
+    if (sending || (!text && !ready.length)) return;
+
+    sending = true;
+    refresh();
+    say('');
+
+    // Shown immediately, greyed, and replaced by the refresh below. Waiting
+    // for the round trip before anything appears makes a slow network look
+    // like a dropped message, which is when people send it twice.
+    thread.insertAdjacentHTML('beforeend', messageHtml({
+      from: 'reporter',
+      body: text,
+      at: new Date().toISOString(),
+      attachments: ready.map((f) => ({ type: 'FILE', name: f.name, size: f.size })),
+    }, 'pending'));
+    scrollToLatest(thread, { smooth: true });
+
+    try {
+      await client.replyToReport(bugId, {
+        body: text,
+        attachments: ready.map((f) => ({
+          storageKey: f.storageKey, mime: f.mime, name: f.name, size: f.size,
+        })),
+      });
+      input.value = '';
+      input.style.height = 'auto';
+      files.length = 0;
+      await ctx.refreshThread(bugId);
+    } catch (err) {
+      thread.querySelector('.msg-row.pending')?.classList.replace('pending', 'failed');
+      say(err.message || 'That could not be sent — try again.', 'err');
+    } finally {
+      sending = false;
+      refresh();
+    }
+  }
+
+  refresh();
+}

package/src/panel/icons.js

@@ -0,0 +1,36 @@
+// The panel's glyphs: the launcher's set (../icons.js) and everything the
+// form, the thread and the call screens draw.
+
+export * from '../icons.js';
+
+export const camera = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3 8.5A1.5 1.5 0 0 1 4.5 7h2.2a1 1 0 0 0 .83-.45l.94-1.4A1 1 0 0 1 9.3 4.7h5.4a1 1 0 0 1 .83.45l.94 1.4a1 1 0 0 0 .83.45h2.2A1.5 1.5 0 0 1 21 8.5v9A1.5 1.5 0 0 1 19.5 19h-15A1.5 1.5 0 0 1 3 17.5z"/><circle cx="12" cy="13" r="3.4"/></svg>';
+export const video = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="6" width="12.5" height="12" rx="2.2"/><path d="M15.5 10.8l4.2-2.6a.6.6 0 0 1 .92.5v6.6a.6.6 0 0 1-.92.5l-4.2-2.6z"/></svg>';
+export const paperclip = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M20 11.5l-7.6 7.6a4.6 4.6 0 0 1-6.5-6.5l8-8a3.2 3.2 0 0 1 4.5 4.5l-8 8a1.8 1.8 0 0 1-2.5-2.5l7.1-7.1"/></svg>';
+export const mic = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="2.5" width="6" height="11" rx="3"/><path d="M5.5 11a6.5 6.5 0 0 0 13 0M12 17.5V21M9 21h6"/></svg>';
+export const send = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12l16-8-6 16-2.6-6.2L4 12Z"/></svg>';
+export const stopSquare = '<svg viewBox="0 0 24 24" fill="currentColor"><rect x="7" y="7" width="10" height="10" rx="2"/></svg>';
+export const back = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.5 5.5L8 12l6.5 6.5"/></svg>';
+export const phone = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6.2 3.5h3l1.5 3.7-2 1.4a11.5 11.5 0 0 0 5.7 5.7l1.4-2 3.7 1.5v3a1.8 1.8 0 0 1-2 1.8A15.6 15.6 0 0 1 4.4 5.5a1.8 1.8 0 0 1 1.8-2z"/></svg>';
+export const phoneOff = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6.2 3.5h3l1.5 3.7-2 1.4a11.5 11.5 0 0 0 5.7 5.7l1.4-2 3.7 1.5v3a1.8 1.8 0 0 1-2 1.8A15.6 15.6 0 0 1 4.4 5.5a1.8 1.8 0 0 1 1.8-2z"/><path d="M3 21L21 3"/></svg>';
+export const bug = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M8 6a4 4 0 0 1 8 0"/><rect x="7" y="7.5" width="10" height="12" rx="5"/><path d="M7 11H3.5M7 15.5H4M17 11h3.5M17 15.5h3M12 8v11.5"/></svg>';
+export const retry = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 12a8 8 0 1 1-2.6-5.9M20 4v4.5h-4.5"/></svg>';
+// 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.
+ *
+ * This SDK runs inside other people's pages, where Space Grotesk is not loaded
+ * and cannot be assumed. Live <text> would render the mark in whatever the host
+ * site happens to use — a different typeface on every customer. Outlines are
+ * self-contained, so the mark is identical everywhere, at the cost of the path
+ * data below.
+ *
+ * The BUGCATCH half reads --bc-brand-mark, not a bare --accent. Custom properties
+ * are exempt from `all: initial`, so they cross the shadow boundary: a host page
+ * that happens to define --accent would have repainted our mark in their brand
+ * colour. The --bc- prefix is ours and no host is going to set it by accident. */
+export const BRAND = '<svg class="bc-brand" viewBox="0 0 254 60" fill="none" role="img" aria-label="sphoro BugCatch"><g fill="currentColor"><path transform="translate(0.00 40.00) scale(0.04000 -0.04000)" d="M276.00 -14.00Q179.00 -14.00 117.00 28.00Q55.00 70.00 42.00 148.00L158.00 178.00Q165.00 143.00 181.50 123.00Q198.00 103.00 222.50 94.50Q247.00 86.00 276.00 86.00Q320.00 86.00 341.00 101.50Q362.00 117.00 362.00 140.00Q362.00 163.00 342.00 175.50Q322.00 188.00 278.00 196.00L250.00 201.00Q198.00 211.00 155.00 228.50Q112.00 246.00 86.00 277.00Q60.00 308.00 60.00 357.00Q60.00 431.00 114.00 470.50Q168.00 510.00 256.00 510.00Q339.00 510.00 394.00 473.00Q449.00 436.00 466.00 376.00L349.00 340.00Q341.00 378.00 316.50 394.00Q292.00 410.00 256.00 410.00Q220.00 410.00 201.00 397.50Q182.00 385.00 182.00 363.00Q182.00 339.00 202.00 327.50Q222.00 316.00 256.00 310.00L284.00 305.00Q340.00 295.00 385.50 278.50Q431.00 262.00 457.50 231.50Q484.00 201.00 484.00 149.00Q484.00 71.00 427.50 28.50Q371.00 -14.00 276.00 -14.00Z"/><path transform="translate(19.56 40.00) scale(0.04000 -0.04000)" d="M70.00 -200.00V496.00H194.00V436.00H212.00Q229.00 465.00 265.00 487.50Q301.00 510.00 368.00 510.00Q428.00 510.00 479.00 480.50Q530.00 451.00 561.00 394.00Q592.00 337.00 592.00 256.00V240.00Q592.00 159.00 561.00 102.00Q530.00 45.00 479.00 15.50Q428.00 -14.00 368.00 -14.00Q323.00 -14.00 292.50 -3.50Q262.00 7.00 243.50 23.50Q225.00 40.00 214.00 57.00H196.00V-200.00ZM330.00 96.00Q389.00 96.00 427.50 133.50Q466.00 171.00 466.00 243.00V253.00Q466.00 325.00 427.00 362.50Q388.00 400.00 330.00 400.00Q272.00 400.00 233.00 362.50Q194.00 325.00 194.00 253.00V243.00Q194.00 171.00 233.00 133.50Q272.00 96.00 330.00 96.00Z"/><path transform="translate(43.68 40.00) scale(0.04000 -0.04000)" d="M70.00 0.00V700.00H196.00V435.00H214.00Q222.00 451.00 239.00 467.00Q256.00 483.00 284.50 493.50Q313.00 504.00 357.00 504.00Q415.00 504.00 458.50 477.50Q502.00 451.00 526.00 404.50Q550.00 358.00 550.00 296.00V0.00H424.00V286.00Q424.00 342.00 396.50 370.00Q369.00 398.00 318.00 398.00Q260.00 398.00 228.00 359.50Q196.00 321.00 196.00 252.00V0.00Z"/><path transform="translate(66.92 40.00) scale(0.04000 -0.04000)" d="M306.00 -14.00Q232.00 -14.00 173.00 16.00Q114.00 46.00 80.00 103.00Q46.00 160.00 46.00 240.00V256.00Q46.00 336.00 80.00 393.00Q114.00 450.00 173.00 480.00Q232.00 510.00 306.00 510.00Q380.00 510.00 439.00 480.00Q498.00 450.00 532.00 393.00Q566.00 336.00 566.00 256.00V240.00Q566.00 160.00 532.00 103.00Q498.00 46.00 439.00 16.00Q380.00 -14.00 306.00 -14.00ZM306.00 98.00Q364.00 98.00 402.00 135.50Q440.00 173.00 440.00 243.00V253.00Q440.00 323.00 402.50 360.50Q365.00 398.00 306.00 398.00Q248.00 398.00 210.00 360.50Q172.00 323.00 172.00 253.00V243.00Q172.00 173.00 210.00 135.50Q248.00 98.00 306.00 98.00Z"/><path transform="translate(90.00 40.00) scale(0.04000 -0.04000)" d="M70.00 0.00V496.00H194.00V440.00H212.00Q223.00 470.00 248.50 484.00Q274.00 498.00 308.00 498.00H368.00V386.00H306.00Q258.00 386.00 227.00 360.50Q196.00 335.00 196.00 282.00V0.00Z"/><path transform="translate(104.44 40.00) scale(0.04000 -0.04000)" d="M306.00 -14.00Q232.00 -14.00 173.00 16.00Q114.00 46.00 80.00 103.00Q46.00 160.00 46.00 240.00V256.00Q46.00 336.00 80.00 393.00Q114.00 450.00 173.00 480.00Q232.00 510.00 306.00 510.00Q380.00 510.00 439.00 480.00Q498.00 450.00 532.00 393.00Q566.00 336.00 566.00 256.00V240.00Q566.00 160.00 532.00 103.00Q498.00 46.00 439.00 16.00Q380.00 -14.00 306.00 -14.00ZM306.00 98.00Q364.00 98.00 402.00 135.50Q440.00 173.00 440.00 243.00V253.00Q440.00 323.00 402.50 360.50Q365.00 398.00 306.00 398.00Q248.00 398.00 210.00 360.50Q172.00 323.00 172.00 253.00V243.00Q172.00 173.00 210.00 135.50Q248.00 98.00 306.00 98.00Z"/></g><rect x="139.52" y="16" width="1.6" height="26" rx="0.8" fill="var(--bc-brand-mark, #5647ee)" opacity="0.4"/><g fill="var(--bc-brand-mark, #5647ee)"><path transform="translate(154.52 35.00) scale(0.01400 -0.01400)" d="M46.35 0.00V105.85H139.75V594.15H46.35V700.00H404.08Q467.38 700.00 514.79 678.41Q562.20 656.83 588.70 617.33Q615.20 577.83 615.20 523.35V513.70Q615.20 465.52 597.03 434.76Q578.85 404.00 553.91 387.24Q528.98 370.48 506.28 363.30V346.35Q528.98 340.35 555.24 323.50Q581.50 306.65 600.00 275.48Q618.50 244.30 618.50 194.48V184.48Q618.50 126.65 591.41 85.24Q564.33 43.83 516.83 21.91Q469.33 0.00 406.85 0.00ZM259.85 109.15H392.60Q441.20 109.15 469.80 132.60Q498.40 156.05 498.40 198.55V208.20Q498.40 250.70 470.21 274.15Q442.02 297.60 392.60 297.60H259.85ZM259.85 406.75H391.65Q437.55 406.75 466.32 430.11Q495.10 453.48 495.10 493.80V503.80Q495.10 544.95 466.74 567.90Q438.37 590.85 391.65 590.85H259.85Z"/><path transform="translate(167.00 35.00) scale(0.01400 -0.01400)" d="M335.30 -14.00Q251.22 -14.00 190.60 16.63Q129.97 47.25 97.56 104.96Q65.15 162.68 65.15 243.03V700.00H185.25V239.73Q185.25 170.48 224.03 131.99Q262.80 93.50 335.30 93.50Q407.80 93.50 446.57 131.99Q485.35 170.48 485.35 239.73V700.00H605.45V243.03Q605.45 162.68 573.13 104.96Q540.80 47.25 480.09 16.63Q419.38 -14.00 335.30 -14.00Z"/><path transform="translate(179.60 35.00) scale(0.01400 -0.01400)" d="M311.85 -14.00Q238.45 -14.00 179.69 18.50Q120.92 51.00 86.69 113.67Q52.45 176.35 52.45 266.87V433.13Q52.45 569.00 128.01 641.50Q203.57 714.00 332.35 714.00Q460.13 714.00 529.23 645.59Q598.33 577.17 598.33 460.87V456.70H479.87V464.52Q479.87 504.67 463.76 536.86Q447.65 569.05 414.99 587.77Q382.32 606.50 332.35 606.50Q257.63 606.50 215.09 560.70Q172.55 514.90 172.55 435.13V264.87Q172.55 185.93 215.09 138.89Q257.63 91.85 334.00 91.85Q410.02 91.85 445.12 132.83Q480.22 173.80 480.22 237.92V249.67H302.85V351.88H598.33V0.00H487.52V69.10H470.57Q462.70 50.87 446.06 31.44Q429.42 12.00 397.64 -1.00Q365.85 -14.00 311.85 -14.00Z"/><path transform="translate(192.05 35.00) scale(0.01400 -0.01400)" d="M332.35 -14.00Q203.57 -14.00 128.01 58.50Q52.45 131.00 52.45 266.87V433.13Q52.45 569.00 128.01 641.50Q203.57 714.00 332.35 714.00Q460.13 714.00 529.58 643.85Q599.03 573.70 599.03 451.57V445.75H480.57V455.22Q480.57 521.42 444.15 563.96Q407.72 606.50 332.35 606.50Q257.63 606.50 215.09 560.70Q172.55 514.90 172.55 435.13V264.87Q172.55 185.93 215.09 139.71Q257.63 93.50 332.35 93.50Q407.72 93.50 444.15 136.45Q480.57 179.40 480.57 244.78V262.25H599.03V248.43Q599.03 126.30 529.58 56.15Q460.13 -14.00 332.35 -14.00Z"/><path transform="translate(204.25 35.00) scale(0.01400 -0.01400)" d="M19.75 0.00 211.62 700.00H421.33L613.20 0.00H489.27L447.42 159.60H185.53L143.68 0.00ZM214.25 270.40H418.70L324.95 624.87H308.00Z"/><path transform="translate(216.31 35.00) scale(0.01400 -0.01400)" d="M233.95 0.00V590.85H24.70V700.00H563.30V590.85H354.05V0.00Z"/><path transform="translate(227.75 35.00) scale(0.01400 -0.01400)" d="M332.35 -14.00Q203.57 -14.00 128.01 58.50Q52.45 131.00 52.45 266.87V433.13Q52.45 569.00 128.01 641.50Q203.57 714.00 332.35 714.00Q460.13 714.00 529.58 643.85Q599.03 573.70 599.03 451.57V445.75H480.57V455.22Q480.57 521.42 444.15 563.96Q407.72 606.50 332.35 606.50Q257.63 606.50 215.09 560.70Q172.55 514.90 172.55 435.13V264.87Q172.55 185.93 215.09 139.71Q257.63 93.50 332.35 93.50Q407.72 93.50 444.15 136.45Q480.57 179.40 480.57 244.78V262.25H599.03V248.43Q599.03 126.30 529.58 56.15Q460.13 -14.00 332.35 -14.00Z"/><path transform="translate(239.95 35.00) scale(0.01400 -0.01400)" d="M69.50 0.00V700.00H189.60V405.58H466.40V700.00H586.50V0.00H466.40V296.42H189.60V0.00Z"/></g></svg>';

package/src/panel/index.js

@@ -0,0 +1,265 @@
+// The report panel: the dialog the launcher opens, and everything on it.
+//
+// None of this is in the script every page loads. Most visitors never press
+// the button, and the panel is most of the widget's code and nearly all of its
+// CSS, so it is fetched the first time it is wanted — see widget.js for when,
+// and lazy.js for how.
+//
+// One dialog doing several jobs, one file each:
+//
+//   compose.js   the report form: drafts, severity, attachments, recording, Send
+//   refs.js      "which record is this about", asked at Send
+//   notices.js   what the project's team is telling visitors, at the top
+//   known.js     what the project already knows is broken, and "me too"
+//   picks.js     questions the assistant answers by itself, as one tap
+//   signin.js    who is reporting, proved with a one-time code
+//   call.js      the call offer, the ringing screen, and the bar over a thread
+//   thread.js    the reporter's reports, one of them as a conversation
+//   composer.js  the reply box under that conversation
+//
+// with markup they share in render.js and messages.js.
+//
+// They were one closure, and what they share is still one closure's worth of
+// state: `ctx`, built below. It is passed rather than kept in module variables
+// because two panels must never share it — a widget torn down and mounted again
+// by a second init(), or a page running BugCatch.Client twice, would otherwise
+// find the last panel's draft and the last panel's report in the new one.
+
+import * as ICONS from './icons.js';
+import { BRAND } from './icons.js';
+import { PANEL_CSS } from './styles.js';
+import { headHtml, escapeHtml } from './render.js';
+import { composeHtml, mountCompose } from './compose.js';
+import { mountReferences } from './refs.js';
+import { mountNotices } from './notices.js';
+import { mountKnownIssues } from './known.js';
+import { mountPicks } from './picks.js';
+import { mountCallOffer } from './call.js';
+import { mountSignIn } from './signin.js';
+import { mountThread } from './thread.js';
+
+/**
+ * Open the panel over the page. `preloadCall` fetches the call code ahead of a
+ * call being placed; the launcher hands it over because the panel has no way
+ * to load code of its own.
+ */
+export function openPanel({
+  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
+  // dock's measured height rather than a guess at the launcher's size.
+  scrim.className = `scrim ${dock.classList.contains('at-left') ? 'at-left' : 'at-right'} `
+    + `${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">
+      ${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.',
+        theme: themeLabel(),
+      })}
+      <div class="body">
+        <div class="slot" role="alert"></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>
+        <!-- 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>
+        ${composeHtml(cfg)}
+      </div>
+      <div class="foot">
+        <span class="note" 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>
+      </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>
+      </div>
+    </div>`;
+
+  const $ = (sel) => scrim.querySelector(sel);
+  const slot = $('.slot');
+
+  // Run as the panel goes, in the order the parts added them: the draft saved,
+  // a recording stopped, timers and listeners dropped.
+  const cleanups = [];
+
+  /**
+   * What the parts share.
+   *
+   * The nodes are looked up once and held, not looked up again: the history
+   * and report screens replace the panel's markup, and a draft saved on the way
+   * out must still read what was typed. The functions left null are filled in
+   * by the part that owns them (named beside each), and nothing calls one until
+   * every part has mounted — they are reached from events and replies, and from
+   * the end of this function.
+   */
+  const ctx = {
+    client,
+    cfg,
+    root,
+    host,
+    dock,
+    scrim,
+    $,
+    titleInput: $('#bc-title'),
+    descInput: $('#bc-desc'),
+    compose: $('.compose'),
+    sendBtn: $('[data-act="send"]'),
+    callBtn: $('[data-act="call"]'),
+    historyBtn: $('[data-act="history"]'),
+    note: $('.foot .note'),
+    whoami: $('.whoami'),
+    refsBox: $('.refs'),
+    notices: $('.notices'),
+    known: $('.known'),
+    picks: $('.picks'),
+    // A report or a call is on its way. Escape and a click outside wait for it.
+    sending: false,
+    closed: false,
+    say,
+    close,
+    preloadCall,
+    themeLabel,
+    onDestroy: (fn) => { cleanups.push(fn); },
+    // compose.js
+    refreshSendState: null,
+    isRecording: null,
+    stopRecording: null,
+    // refs.js
+    holdForReference: null,
+    answeredReference: null,
+    // picks.js
+    pickedIssue: null,
+    // call.js
+    offerCall: null,
+    callOffered: null,
+    showLiveCall: null,
+    // signin.js
+    mustSignIn: null,
+    recheckSignIn: null,
+    // thread.js
+    succeed: null,
+    refreshThread: null,
+    openReportId: null,
+  };
+
+  /* ---------- the parts, in the order they ask the API anything ---------- */
+
+  mountCompose(ctx);
+  mountReferences(ctx);
+  mountNotices(ctx);
+  mountKnownIssues(ctx);
+  mountPicks(ctx);
+  mountCallOffer(ctx);
+  mountSignIn(ctx);
+  mountThread(ctx);
+
+  /* ---------- lifecycle ---------- */
+
+  const previouslyFocused = document.activeElement;
+  const rootStyle = document.documentElement.style;
+  const previousOverflow = rootStyle.overflow;
+  rootStyle.overflow = 'hidden';
+
+  function destroy() {
+    if (ctx.closed) return;
+    cleanups.forEach((fn) => fn());
+    ctx.closed = true;
+    rootStyle.overflow = previousOverflow;
+    document.removeEventListener('keydown', onKeydown, true);
+    scrim.remove();
+    dock.hidden = false;
+    host.style.opacity = '';
+    onClose?.();
+  }
+
+  function close() {
+    if (ctx.closed) return;
+    // Let the exit animation play, but never wait on an event that a
+    // reduced-motion user's near-zero animation might deliver unpredictably.
+    scrim.classList.add('closing');
+    setTimeout(destroy, 160);
+    try { previouslyFocused?.focus?.(); } catch { /* element may be gone */ }
+  }
+
+  function onKeydown(e) {
+    if (e.key === 'Escape') {
+      e.stopPropagation();
+      if (ctx.isRecording()) { ctx.stopRecording({ keep: false }); return; }
+      if (!ctx.sending) close();
+      return;
+    }
+    if (e.key !== 'Tab' || ctx.isRecording()) return;
+    // Focus trap: the panel is modal, so Tab must not reach the host page.
+    const focusable = [...scrim.querySelectorAll(
+      'button:not(:disabled), input:not([hidden]), textarea, select, [href]',
+    )].filter((el) => el.offsetParent !== null || el === document.activeElement);
+    if (!focusable.length) return;
+    const first = focusable[0];
+    const last = focusable[focusable.length - 1];
+    const active = scrim.getRootNode().activeElement;
+    if (e.shiftKey && active === first) { e.preventDefault(); last.focus(); }
+    else if (!e.shiftKey && active === last) { e.preventDefault(); first.focus(); }
+  }
+
+  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') {
+    slot.innerHTML = text
+      ? `<div class="msg ${kind}">${kind === 'err' ? ICONS.alert : ''}<span>${escapeHtml(text)}</span></div>`
+      : '';
+  }
+
+  root.appendChild(scrim);
+  ctx.refreshSendState();
+  ctx.titleInput.focus();
+
+  return { destroy, close };
+}
+
+/**
+ * Add the panel's stylesheet to the widget's shadow root, once.
+ *
+ * Straight after the launcher's sheet rather than at the end of the root, so
+ * the two stay together at the top and the panel's rules keep their place after
+ * the launcher's in the cascade — the order they had as one stylesheet.
+ */
+function addStyles(root) {
+  if (root.querySelector('style[data-panel]')) return;
+  const style = document.createElement('style');
+  style.setAttribute('data-panel', '');
+  style.textContent = PANEL_CSS;
+  const launcherSheet = root.querySelector('style');
+  if (launcherSheet) launcherSheet.after(style);
+  else root.prepend(style);
+}