@sphoro/bugcatch-web-sdk 0.17.0 → 0.19.0

package/src/panel/known.js

@@ -0,0 +1,130 @@
+// What is already known: the project's open issues that look like what the
+// reporter is describing, above the form, with "me too" instead of a second
+// report about the same thing.
+
+import { escapeHtml, relativeDay } from './render.js';
+
+export function mountKnownIssues(ctx) {
+  const {
+    client, cfg, titleInput, known,
+  } = ctx;
+
+  // The list as it was last fetched, and who has said what about it. Held here
+  // rather than re-read from the DOM so a re-render after a join does not have
+  // to parse its own markup back out.
+  let issues = [];
+  let issueError = '';
+  let askingFor = null;
+  let matchAbort = null;
+
+  // Asked once when the dialog opens, like the call offer (call.js) and for the
+  // same reason: it is one request per opened widget rather than one per page
+  // load of every site running this SDK, and most projects will answer with an
+  // empty list forever.
+  function loadKnownIssues() {
+    if (cfg.knownIssues === false) return;
+    client.knownIssues()
+      .then((rows) => { issues = rows; drawKnown(); })
+      .catch(() => { /* a help panel that cannot load is simply not drawn */ });
+  }
+
+  // Re-run as the title is typed, so the panel narrows to what they are
+  // actually describing. Debounced, and the previous request is aborted rather
+  // than left to land: a fast typist otherwise renders whichever response comes
+  // back last, which is not necessarily the one matching the box.
+  let matchTimer = null;
+  function matchKnown(query) {
+    if (cfg.knownIssues === false) return;
+    clearTimeout(matchTimer);
+    matchAbort?.abort();
+    const q = (query || '').trim();
+    if (q.length < 3) { loadKnownIssues(); return; }
+    matchTimer = setTimeout(() => {
+      matchAbort = new AbortController();
+      client.matchKnownIssues(q, { signal: matchAbort.signal })
+        .then((rows) => {
+          // An empty result means "nothing like this is known", which is not
+          // the same as "nothing is known" — fall back to the full list rather
+          // than blanking a panel the reporter was reading.
+          if (rows.length) { issues = rows; drawKnown(); }
+        })
+        .catch(() => {});
+    }, 250);
+  }
+
+  function drawKnown() {
+    if (!issues.length) { known.hidden = true; known.innerHTML = ''; return; }
+    known.hidden = false;
+    known.innerHTML = `
+      <p class="known-h">Already reported</p>
+      ${issues.map((issue) => `
+        <div class="issue ${issue.joined ? 'is-joined' : ''}">
+          <span class="who">
+            <span class="t">${escapeHtml(issue.title)}</span>
+            <span class="meta">${escapeHtml(knownMeta(issue))}</span>
+          </span>
+          <button class="join" type="button" data-join="${escapeHtml(issue.id)}"
+            ${issue.joined ? 'disabled' : ''}>${issue.joined ? 'Following' : 'Me too'}</button>
+        </div>
+        ${askingFor === issue.id ? `
+        <div class="ask">
+          <input type="email" class="join-email" placeholder="you@example.com"
+            aria-label="Your email, so we can tell you when this is fixed" />
+          <button class="ghost" type="button" data-join-confirm="${escapeHtml(issue.id)}">Follow</button>
+        </div>` : ''}
+      `).join('')}
+      ${issueError ? `<p class="err">${escapeHtml(issueError)}</p>` : ''}`;
+  }
+
+  // What a reporter is told about an issue beside its title. Deliberately not
+  // its severity: how bad the team thinks this is, published to everybody who
+  // opens the widget, is an internal judgement that reads as a promise.
+  function knownMeta(issue) {
+    const state = issue.status === 'IN_PROGRESS' ? 'Being worked on now' : 'Not fixed yet';
+    // The count is dropped entirely at zero rather than written as "0 people",
+    // or as a bare "Reported" that says nothing the heading above has not
+    // already said. Nobody having pressed the button yet is not a fact about
+    // this issue worth a reporter's attention.
+    const others = issue.affectedCount === 0
+      ? ''
+      : ` · ${issue.affectedCount} ${issue.affectedCount === 1 ? 'person has' : 'people have'} said this is happening to them`;
+    return `${state} · reported ${relativeDay(issue.since)}${others}`;
+  }
+
+  known.addEventListener('click', async (e) => {
+    const start = e.target.closest('[data-join]');
+    const confirm = e.target.closest('[data-join-confirm]');
+    if (!start && !confirm) return;
+
+    const bugId = (confirm || start).getAttribute(confirm ? 'data-join-confirm' : 'data-join');
+    issueError = '';
+
+    // An address is what joining buys them — being told when it is fixed — so
+    // ask for one when neither a sign-in nor identify() has supplied it, rather
+    // than recording somebody nobody can ever write to.
+    const email = known.querySelector('.join-email')?.value?.trim()
+      || client.signedInAs()?.email
+      || client.config.user?.email;
+    if (!email) {
+      askingFor = bugId;
+      drawKnown();
+      known.querySelector('.join-email')?.focus();
+      return;
+    }
+
+    try {
+      const result = await client.meToo(bugId, { email });
+      askingFor = null;
+      issues = issues.map((issue) => (issue.id === bugId
+        ? { ...issue, joined: true, affectedCount: result.affectedCount ?? issue.affectedCount }
+        : issue));
+      drawKnown();
+    } catch (err) {
+      issueError = err.message.replace('[BugCatch] ', '');
+      drawKnown();
+    }
+  });
+
+  loadKnownIssues();
+  titleInput.addEventListener('input', () => matchKnown(titleInput.value));
+}

package/src/panel/messages.js

@@ -0,0 +1,176 @@
+// The thread's markup: one entry per event or message, oldest first, grouped
+// into turns the way a chat groups them. Strings in, strings out — the thread
+// screen (thread.js) decides when to draw them and what to keep on screen.
+
+import * as ICONS from './icons.js';
+import { SOLVED_PROMPT } from '../agent-issues.js';
+import { humanSize } from '../capture.js';
+import {
+  escapeHtml, dayKey, dayLabel, clockTime, relativeDay, initials,
+} from './render.js';
+
+/**
+ * The whole thread, oldest first.
+ *
+ * The API hands back one ordered list holding both kinds of entry, which is
+ * what keeps a reply sitting under the status change that prompted it. Entries
+ * carrying `from` are messages; the rest are things that happened.
+ */
+export function threadHtml(timeline) {
+  const entries = timeline || [];
+  if (!entries.length) return '';
+  let day = null;
+  let prev = null;
+  return entries.map((e) => {
+    // A rule with the date on it whenever the calendar day turns, the way a
+    // chat marks that the next message came later.
+    const d = dayKey(e.at);
+    const sep = d && d !== day ? `<div class="day-sep" role="separator">${escapeHtml(dayLabel(e.at))}</div>` : '';
+    if (sep) { day = d; prev = null; }
+    if (!e.from) { prev = null; return sep + systemHtml(e); }
+    const message = {
+      from: e.from,
+      author: e.reply?.author,
+      automated: e.reply?.automated,
+      body: e.reply?.body,
+      at: e.at,
+      attachments: e.reply?.attachments,
+    };
+    // Consecutive messages from the same voice within a few minutes are one
+    // turn: one avatar, one name, the bubbles stacked under it.
+    const who = speakerOf(message);
+    const cont = prev && prev.who === who
+      && Math.abs(new Date(e.at).getTime() - new Date(prev.at).getTime()) < 5 * 60_000;
+    prev = { who, at: e.at };
+    return sep + messageHtml(message, cont ? 'cont' : '');
+  }).join('');
+}
+
+/** Which voice a message is in, for grouping: the reporter, the assistant, or a named person. */
+function speakerOf(message) {
+  if (message.from === 'reporter') return 'me';
+  if (message.automated) return 'assistant';
+  return `team:${message.author || ''}`;
+}
+
+/**
+ * Something that happened, rather than something someone said.
+ *
+ * `summary` is written by the API, which knows what changed and phrases it for
+ * the person who reported it — so the wording here matches the toast and the
+ * portal exactly rather than being a third attempt at the same sentence.
+ */
+function systemHtml(entry) {
+  const when = clockTime(entry.at);
+  return `
+    <div class="sys k-${escapeHtml(entry.kind)}">
+      <span class="dot" aria-hidden="true"></span>${escapeHtml(entry.summary || '')}${when ? `
+      <span class="t">· ${escapeHtml(when)}</span>` : ''}
+    </div>`;
+}
+
+/**
+ * One bubble. `state` marks a message that is still in flight, or failed, or
+ * one that continues the turn above it.
+ *
+ * A reply that was sent automatically says so, above the words rather than
+ * after them. The person reading it is deciding whether their problem has been
+ * understood, and that decision is different when nobody has read the report —
+ * so it is not a footnote, and it is not left to be inferred from the tone.
+ */
+export function messageHtml(message, state = '') {
+  const mine = message.from === 'reporter';
+  const body = message.body || '';
+  const attachments = message.attachments || [];
+  const automated = !mine && Boolean(message.automated);
+
+  // The text goes in its own element rather than as a bare child of .bubble:
+  // it is the only part that wants `white-space: pre-wrap`, and with that rule
+  // on the bubble the template's own newlines and indentation render as a
+  // blank line above and below every message.
+  const text = body ? `<span class="msg-text">${escapeHtml(body)}</span>` : '';
+  const files = attachments.length
+    ? `<div class="att">${attachments.map(attachmentHtml).join('')}</div>`
+    : '';
+
+  // Named, or labelled, never both and never neither: an automated message has
+  // no author to name, and naming one would be the lie the label exists to
+  // prevent. The avatar says the same thing at a glance.
+  let who = '';
+  let avatar = '';
+  if (automated) {
+    who = '<span class="msg-who auto">Assistant <span class="tag">AI</span></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>`;
+    avatar = `<span class="av" aria-hidden="true">${escapeHtml(initials(name))}</span>`;
+  }
+  if (state.includes('cont')) who = '';
+
+  // The assistant's one answer ends by inviting a correction (check-rules
+  // confirmMessage). One tap sends it, and what comes back goes to the person
+  // who now owns the report rather than to another automated round — so the
+  // wording is "that's right" and "that's not it", not a yes/no question.
+  // The Sphoro Agent's answer ends by asking whether it settled things
+  // (SOLVED_PROMPT). Yes closes the report; No puts it in front of a person.
+  const confirm = automated && /it goes to the same person/i.test(body)
+    ? `<div class="quick" role="group" aria-label="Answer">
+        <button type="button" data-quick="Yes, this is the problem">${ICONS.check}That's right</button>
+        <button type="button" data-quick="No, that is not the problem">That's not it</button>
+      </div>`
+    : automated && SOLVED_PROMPT.test(body)
+      ? `<div class="quick" role="group" aria-label="Did this answer your question?">
+          <button type="button" data-quick="Yes, that answers it">${ICONS.check}Yes, that answers it</button>
+          <button type="button" data-quick="No, I still need help">No, I still need help</button>
+        </div>`
+      : '';
+
+  return `
+    <div class="msg-row ${mine ? 'mine' : 'theirs'} ${automated ? 'auto' : ''} ${state}">
+      ${avatar}
+      ${who}
+      <div class="bubble ${body ? '' : 'silent'}">${text}${files}</div>
+      ${confirm}
+      <span class="msg-when">${escapeHtml(clockTime(message.at) || relativeDay(message.at))}</span>
+    </div>`;
+}
+
+/** The assistant, thinking: where its next message will appear. */
+export function typingHtml() {
+  return `
+    <div class="typing-row">
+      <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>`;
+}
+
+/**
+ * One attachment, rendered as what it is.
+ *
+ * An image people can see, a voice note they can play and a document they can
+ * download are three different things, and collapsing them all to a link is
+ * how a chat stops feeling like one. A pending upload has no URL yet, so it
+ * falls through to the file row with nothing to click.
+ */
+function attachmentHtml(a) {
+  const name = escapeHtml(a.name || 'attachment');
+  if (!a.url) return `<span class="file"><span class="nm">${name}</span></span>`;
+  const url = escapeHtml(a.url);
+
+  if (a.type === 'SCREENSHOT') {
+    return `<a href="${url}" target="_blank" rel="noopener noreferrer"><img src="${url}" alt="${name}" loading="lazy"></a>`;
+  }
+  if (a.type === 'AUDIO') {
+    return `<audio controls preload="metadata" src="${url}"></audio>`;
+  }
+  if (a.type === 'VIDEO') {
+    return `<video controls preload="metadata" src="${url}"></video>`;
+  }
+  return `
+    <a class="file" href="${url}" target="_blank" rel="noopener noreferrer" download>
+      <span class="nm">${name}</span>
+      ${a.size ? `<span class="sz">${escapeHtml(humanSize(a.size))}</span>` : ''}
+    </a>`;
+}

package/src/panel/notices.js

@@ -0,0 +1,34 @@
+// What the project's team is telling visitors, at the top of the form: the place
+// to say "we know, it's being fixed" before somebody types it out.
+
+import { noticeNode } from '../notice.js';
+
+// A panel opened to report a bug, not to read news. A project with more live
+// than this has written a page, and the newest are the ones still true — the
+// API sends them newest first.
+const MOST = 3;
+
+export function mountNotices(ctx) {
+  const { client, cfg, notices } = ctx;
+  let list = [];
+
+  function draw() {
+    const shown = list.slice(0, MOST);
+    notices.replaceChildren(...shown.map((a) => noticeNode(a, { where: 'panel', onDismiss })));
+    notices.hidden = shown.length === 0;
+  }
+
+  function onDismiss(a) {
+    client.dismissAnnouncement(a);
+    list = list.filter((x) => x !== a);
+    draw();
+    // The button pressed has gone; the form is where they were headed.
+    ctx.titleInput.focus();
+  }
+
+  if (cfg.announcements !== false && typeof client.announcements === 'function') {
+    client.announcements()
+      .then((rows) => { if (!ctx.closed) { list = rows; draw(); } })
+      .catch(() => { /* a panel with no notices is still a panel that files reports */ });
+  }
+}

package/src/panel/picks.js

@@ -0,0 +1,65 @@
+// Questions the assistant answers by itself, offered as one tap above the form.
+
+import * as ICONS from './icons.js';
+import { escapeHtml } from './render.js';
+
+export function mountPicks(ctx) {
+  const {
+    client, cfg, titleInput, descInput, picks,
+  } = ctx;
+
+  // One tap instead of a sentence: the report's title becomes the question,
+  // and the assistant knows exactly what is being asked — it looks the
+  // reporter up, answers from their account, and asks whether that settled
+  // it. Tapping the chosen one again lets it go.
+  let agentIssues = [];
+  let pickedIssue = null;
+
+  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, 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 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>` : ''}`;
+  }
+
+  picks.addEventListener('click', (e) => {
+    const btn = e.target.closest('[data-pick]');
+    if (!btn) return;
+    const issue = agentIssues.find((i) => i.key === btn.dataset.pick);
+    if (!issue) return;
+    const titleWasPick = pickedIssue && titleInput.value.trim() === pickedIssue.title;
+    if (pickedIssue?.key === issue.key) {
+      pickedIssue = null;
+      if (titleWasPick) titleInput.value = '';
+    } else {
+      pickedIssue = issue;
+      // Their own words are never overwritten — only an empty title, or the
+      // one the previous tap put there.
+      if (!titleInput.value.trim() || titleWasPick) titleInput.value = issue.title;
+    }
+    titleInput.dispatchEvent(new Event('input', { bubbles: true }));
+    drawPicks();
+    if (pickedIssue) descInput.focus();
+  });
+
+  if (cfg.agentIssues !== false && typeof client.agentIssues === 'function') {
+    client.agentIssues()
+      .then((rows) => { agentIssues = rows; drawPicks(); })
+      .catch(() => { /* no tiles is the safe answer to every failure */ });
+  }
+
+  ctx.pickedIssue = () => pickedIssue;
+}