@sphoro/bugcatch-web-sdk 0.15.0 → 0.16.0

package/src/widget.js

@@ -14,7 +14,7 @@ import {
 import { draftKey, draftOperation, readDraft } from './drafts.js';
 import { readSession } from './session.js';
 import { sendMessage } from './updates.js';
-import { matchReferences, validateReference } from './references.js';
+import { readReferences, validateReference } from './references.js';
 
 const POSITIONS = {
   'bottom-right': 'bottom:20px;right:20px;',
@@ -503,6 +503,14 @@ textarea { min-height: 88px; resize: vertical; }
 .refs .err { color: var(--bc-danger); font-weight: 550; }
 .refs .link { margin-top: 10px; font-size: 12px; color: var(--bc-muted); }
 .refs .link:hover { color: var(--bc-fg); }
+.refs .chips.cands button { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 550; }
+/* "We read your ID" — under the description, while they type. */
+.ref-found {
+  display: flex; align-items: center; gap: 6px;
+  margin: -6px 0 14px; font-size: 12px; line-height: 1.45; color: var(--bc-muted);
+}
+.ref-found svg { width: 14px; height: 14px; flex: none; color: var(--bc-ok); }
+.ref-found b { font-weight: 600; color: var(--bc-fg); }
 
 /* ---------- severity ---------- */
 .seg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; padding: 3px; background: var(--bc-subtle); border: 1px solid var(--bc-border); border-radius: var(--bc-r-md); }
@@ -856,6 +864,10 @@ button.quiet:hover { color: var(--bc-accent); }
   background: var(--bc-accent-soft); border-color: var(--bc-accent-line);
 }
 .assistant.resolved { background: color-mix(in srgb, var(--bc-ok) 9%, var(--bc-bg)); border-color: color-mix(in srgb, var(--bc-ok) 35%, var(--bc-border)); }
+/* On a call: the call's own card is what they are watching. This one states
+   what is happening and stops moving — no spinner, no travelling bar. */
+.assistant.calling { background: var(--bc-bg); }
+.assistant.calling .as-progress i { transition: none; }
 .as-body.entering { animation: bc-rise 360ms var(--bc-ease) both; }
 .as-top { display: flex; gap: 11px; align-items: center; }
 .as-orb {
@@ -1049,6 +1061,7 @@ button.quiet:hover { color: var(--bc-accent); }
   animation: bc-rise 240ms var(--bc-ease) both;
 }
 .livecall .who { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.livecall .call-kept { font-size: 11px; opacity: .75; }
 .livecall .secs { font-variant-numeric: tabular-nums; color: var(--bc-muted); }
 .livecall .act {
   padding: 5px 11px; border-radius: 999px; border: 1px solid var(--bc-border);
@@ -1750,9 +1763,16 @@ function openPanel({ root, host, dock, client, onClose }) {
   // answer, is a reasonable thing to be asked. Most reporters never see it: the
   // loan number was in the sentence.
   let refConfig = { policy: 'off', fields: [] };
-  let refChoice = null;   // which field they are answering
+  let refOpen = false;
+  let refChoice = null;   // which field they are answering; null = not picked yet
   let refValue = '';
   let refError = '';
+  // What we read in their text but could not place for sure, offered as taps:
+  // [{ value, kinds: [{ key, label }] }]. `refMode` says why the card is open —
+  // 'confirm' when the text had two answers, 'suggest' when it had an unlabelled
+  // one, 'ask' when it had none.
+  let refCandidates = [];
+  let refMode = 'ask';
   // Set once they have answered or explicitly skipped, so Send stops asking.
   let refSettled = false;
   // Set once we have said "that does not look right" about the current value.
@@ -1763,13 +1783,18 @@ function openPanel({ root, host, dock, client, onClose }) {
   let refWarned = false;
 
   client.referenceFields()
-    .then((cfg) => { refConfig = cfg; })
+    .then((cfg) => { refConfig = cfg; showFound(); })
     .catch(() => { /* off is the safe answer to every failure */ });
 
-  /** What the report already carries, read out of what they typed. */
-  function referencesInText() {
-    if (refConfig.policy === 'off' || !refConfig.fields.length) return [];
-    return matchReferences(refConfig.fields, [titleInput.value, descInput.value]);
+  /** What the text says: found (sure), conflicts (ask which), loose (offer). */
+  function readText() {
+    if (refConfig.policy === 'off' || !refConfig.fields.length) return { found: [], conflicts: [], loose: [] };
+    return readReferences(refConfig.fields, [titleInput.value, descInput.value]);
+  }
+
+  /** Sure enough to send without a question: something found, nothing contested. */
+  function textAnswers(read = readText()) {
+    return read.found.length > 0 && read.conflicts.length === 0;
   }
 
   /** The answer to send, or an empty list. */
@@ -1778,50 +1803,127 @@ function openPanel({ root, host, dock, client, onClose }) {
     return [{ key: refChoice, value: refValue.trim().slice(0, 120) }];
   }
 
+  // A quiet line under the description while they type, so somebody who put
+  // their loan number in the sentence can see it was read and does not go
+  // looking for a box to type it into again.
+  const foundNote = document.createElement('p');
+  foundNote.className = 'ref-found';
+  foundNote.setAttribute('aria-live', 'polite');
+  foundNote.hidden = true;
+  descInput.closest('.field').after(foundNote);
+  let foundTimer;
+  function showFound() {
+    const read = readText();
+    if (textAnswers(read)) {
+      const list = read.found.slice(0, 2).map((r) => `${escapeHtml(r.label)} <b>${escapeHtml(shortId(r.value))}</b>`).join(', ');
+      foundNote.innerHTML = `${ICONS.check}<span>Found your ${list} — no need to add it again.</span>`;
+      foundNote.hidden = false;
+      // They have answered in the text; a card still asking would be not listening.
+      if (refOpen && !answeredReference().length) { refOpen = false; drawRefs(); }
+    } else {
+      foundNote.hidden = true;
+      foundNote.innerHTML = '';
+    }
+  }
+  const queueFound = () => { clearTimeout(foundTimer); foundTimer = setTimeout(showFound, 250); };
+  titleInput.addEventListener('input', queueFound);
+  descInput.addEventListener('input', queueFound);
+
+  /** A UUID is long; the chip shows its ends, the title shows all of it. */
+  function shortId(value) {
+    return value.length > 20 ? `${value.slice(0, 8)}…${value.slice(-4)}` : value;
+  }
+
+  function candidateFor(value) {
+    const v = value.trim().toLowerCase();
+    return refCandidates.find((c) => c.value.toLowerCase() === v) || null;
+  }
+
+  /** Pick a candidate: its value, and its kind when only one kind fits. */
+  function takeCandidate(c) {
+    refValue = c.value;
+    if (c.kinds.length === 1) refChoice = c.kinds[0].key;
+    else if (!c.kinds.some((k) => k.key === refChoice)) refChoice = null;
+    refError = '';
+    refWarned = false;
+  }
+
   function drawRefs() {
-    if (!refChoice) { refsBox.hidden = true; refsBox.innerHTML = ''; return; }
-    const field = refConfig.fields.find((f) => f.key === refChoice) || refConfig.fields[0];
+    if (!refOpen) { refsBox.hidden = true; refsBox.innerHTML = ''; return; }
+    const field = refConfig.fields.find((f) => f.key === refChoice) || null;
     const optional = refConfig.policy !== 'required';
+    const current = candidateFor(refValue);
+    // Kinds worth offering: the ones the picked value could be, when we know;
+    // every kind otherwise. Never zero — a guess of ours must not lock out the
+    // right answer.
+    const kinds = current && current.kinds.length > 1
+      ? refConfig.fields.filter((f) => current.kinds.some((k) => k.key === f.key))
+      : refConfig.fields;
+    // Two loan numbers: the kind is not in question, only which one — so the
+    // kind chips would be a second question nobody needs to answer.
+    const sharedKind = refCandidates.length > 1
+      && refCandidates.every((c) => c.kinds.length === 1 && c.kinds[0].key === refCandidates[0].kinds[0].key);
+
+    const head = {
+      confirm: refCandidates.length > 1
+        ? ['Which one is this about?', 'We found more than one ID in your message. Pick the one this problem is about.']
+        : ['Is this the right ID?', 'This could be more than one kind of ID. Tell us which it is.'],
+      suggest: ['Is this your ID?', 'We spotted this in your message. Tell us what it is so we can find your record.'],
+      ask: optional
+        ? ['One more thing', 'So we can find your record — this helps us answer faster.']
+        : ['We need one detail', 'We need one of these to look this up.'],
+    }[refMode];
 
     refsBox.hidden = false;
     // A handful of kinds read best as chips to tap; a long list goes back to
     // a select so the card does not turn into a wall of pills.
-    const many = refConfig.fields.length > 6;
+    const many = kinds.length > 6;
     refsBox.innerHTML = `
       <div class="ask-head">
         <span class="avatar" aria-hidden="true">${ICONS.sparkle}</span>
         <div>
-          <strong>${optional ? 'One more thing' : 'We need one detail'}</strong>
-          <p class="why">${escapeHtml(
-            optional
-              ? 'So we can find your record — this helps us answer faster.'
-              : 'We need one of these to look this up.',
-          )}</p>
+          <strong>${escapeHtml(head[0])}</strong>
+          <p class="why">${escapeHtml(head[1])}</p>
         </div>
       </div>
-      ${refConfig.fields.length > 1 && !many ? `
+      ${refCandidates.length > 1 ? `
+      <div class="chips cands" role="group" aria-label="IDs found in your message">
+        ${refCandidates.map((c, i) => `
+          <button type="button" data-ref-cand="${i}" title="${escapeHtml(c.value)}"
+            aria-pressed="${!!current && current === c}">${escapeHtml(shortId(c.value))}</button>
+        `).join('')}
+      </div>` : ''}
+      ${kinds.length > 1 && !many && !sharedKind ? `
       <div class="chips" role="group" aria-label="Which detail you are giving">
-        ${refConfig.fields.map((f) => `
-          <button type="button" data-ref-kind="${escapeHtml(f.key)}" aria-pressed="${f.key === field.key}">${escapeHtml(f.label)}</button>
+        ${kinds.map((f) => `
+          <button type="button" data-ref-kind="${escapeHtml(f.key)}" aria-pressed="${!!field && f.key === field.key}">${escapeHtml(f.label)}</button>
         `).join('')}
       </div>` : ''}
       <div class="row">
         ${many ? `
         <select class="ref-kind" aria-label="Which detail you are giving">
-          ${refConfig.fields.map((f) => `
-            <option value="${escapeHtml(f.key)}" ${f.key === field.key ? 'selected' : ''}>${escapeHtml(f.label)}</option>
+          ${field ? '' : '<option value="" selected disabled>What is it?</option>'}
+          ${kinds.map((f) => `
+            <option value="${escapeHtml(f.key)}" ${field && f.key === field.key ? 'selected' : ''}>${escapeHtml(f.label)}</option>
           `).join('')}
         </select>` : ''}
-        <input class="ref-value${refError ? ' invalid' : ''}" type="${field.inputMode === 'email' ? 'email' : 'text'}"
-          inputmode="${escapeHtml(field.inputMode === 'numeric' || field.inputMode === 'tel' ? 'numeric' : 'text')}"
+        <input class="ref-value${refError ? ' invalid' : ''}" type="${field?.inputMode === 'email' ? 'email' : 'text'}"
+          inputmode="${escapeHtml(field?.inputMode === 'numeric' || field?.inputMode === 'tel' ? 'numeric' : 'text')}"
           value="${escapeHtml(refValue)}"
-          placeholder="${escapeHtml(field.placeholder || field.label)}"
-          aria-label="${escapeHtml(field.label)}" ${refError ? 'aria-invalid="true"' : ''} />
+          placeholder="${escapeHtml(field ? (field.placeholder || field.label) : 'Your ID')}"
+          aria-label="${escapeHtml(field ? field.label : 'Your ID')}" ${refError ? 'aria-invalid="true"' : ''} />
       </div>
-      ${field.hint ? `<p class="hint">${escapeHtml(field.hint)}</p>` : ''}
+      ${field?.hint ? `<p class="hint">${escapeHtml(field.hint)}</p>` : ''}
       ${refError ? `<p class="field-err" role="alert">${ICONS.alert}<span>${escapeHtml(refError)}</span></p>` : ''}
-      ${optional ? '<button type="button" class="link" data-act="ref-skip">I don\'t have this — send without it</button>' : ''}`;
+      ${optional ? `<button type="button" class="link" data-act="ref-skip">${
+        refMode === 'ask' ? 'I don\'t have this — send without it' : 'Not sure — send as it is'}</button>` : ''}`;
 
+    refsBox.querySelectorAll('[data-ref-cand]').forEach((chip) => {
+      chip.addEventListener('click', () => {
+        takeCandidate(refCandidates[Number(chip.dataset.refCand)]);
+        drawRefs();
+      });
+    });
     refsBox.querySelectorAll('[data-ref-kind]').forEach((chip) => {
       chip.addEventListener('click', () => {
         refChoice = chip.dataset.refKind;
@@ -1851,7 +1953,9 @@ function openPanel({ root, host, dock, client, onClose }) {
     refsBox.querySelector('[data-act="ref-skip"]')?.addEventListener('click', () => {
       // Skipping is answering. Without this the panel asks again on the next
       // press and the reporter is in a loop with a button that does nothing.
+      // The text still goes; the server reads it either way.
       refSettled = true;
+      refOpen = false;
       refChoice = null;
       refValue = '';
       refError = '';
@@ -1860,23 +1964,54 @@ function openPanel({ root, host, dock, client, onClose }) {
       say('');
     });
 
-    value.focus();
+    // Focus where the next decision is: the kind, when that is all that is
+    // missing; the box otherwise.
+    const next = !field && refValue ? refsBox.querySelector('[data-ref-kind], .ref-kind') : null;
+    (next || value).focus();
+  }
+
+  /**
+   * Open the question, pre-filled with the best of what the text offered.
+   *
+   * Conflicts first — the text said two things and only the reporter knows
+   * which — then loose IDs, which are probably the answer and only need a
+   * name. Nothing, and it is the plain question it always was.
+   */
+  function openRefs(read) {
+    refCandidates = read.conflicts.length ? read.conflicts : read.loose.slice(0, 4);
+    refMode = read.conflicts.length ? 'confirm' : read.loose.length ? 'suggest' : 'ask';
+    refOpen = true;
+    if (refCandidates.length) {
+      // One contested value: pre-fill it so they only choose what it is. Two
+      // or more: pick nothing, because picking is the question.
+      if (refCandidates.length === 1) takeCandidate(refCandidates[0]);
+      else {
+        refValue = '';
+        const [first] = refCandidates;
+        const same = refCandidates.every((c) => c.kinds.length === 1 && c.kinds[0].key === first.kinds[0].key);
+        refChoice = same ? first.kinds[0].key : null;
+      }
+    } else {
+      refChoice = refChoice || refConfig.fields[0].key;
+    }
+    drawRefs();
   }
 
   /**
    * Whether Send should stop and ask.
    *
-   * True at most once per report. The question is skippable on an `optional`
-   * project and not on a `required` one, and on both the answer to "have we
-   * already got one" is read from the text every time — somebody who types the
-   * loan number into the description after being asked has answered the
-   * question, and being asked again would be the widget not listening.
+   * Never when the text answered it outright. Once when the text said two
+   * things or something unlabelled — on every policy, because sending the
+   * wrong record's id with confidence is worse than one extra tap. And the
+   * plain question on `optional`/`required` projects as before.
    */
   function needsReference() {
     if (refConfig.policy === 'off' || !refConfig.fields.length) return false;
-    if (referencesInText().length) return false;
     if (answeredReference().length) return false;
-    return !refSettled || refConfig.policy === 'required';
+    const read = readText();
+    if (textAnswers(read)) return false;
+    if (refSettled && refConfig.policy !== 'required') return false;
+    return read;
   }
 
   /* ---------- send ---------- */
@@ -1894,9 +2029,18 @@ function openPanel({ root, host, dock, client, onClose }) {
     // costs one extra press on projects that want an identifier, and it is the
     // only shape that does not put paperwork in front of a person who came here
     // to say something is broken.
-    if (needsReference()) {
-      refChoice = refChoice || refConfig.fields[0].key;
+    //
+    // First, though: a value in the box but no kind picked. Asked rather than
+    // guessed — a wrong kind joins on the wrong table.
+    if (refOpen && refValue.trim() && !refChoice) {
+      refError = 'Pick what this ID is.';
       drawRefs();
+      return;
+    }
+
+    const read = needsReference();
+    if (read) {
+      if (!refOpen) openRefs(read); else drawRefs();
       say('');
       return;
     }
@@ -2639,7 +2783,8 @@ function openPanel({ root, host, dock, client, onClose }) {
       <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 === 'resolved' ? ICONS.check : ICONS.sparkle}</span>
+            : a.phase === 'calling' ? ICONS.phone
+              : a.phase === 'resolved' ? ICONS.check : ICONS.sparkle}</span>
           <div class="as-text">
             <div class="as-title">${escapeHtml(a.title)}</div>
             <div class="as-detail">${escapeHtml(a.detail)}</div>
@@ -2664,6 +2809,9 @@ function openPanel({ root, host, dock, client, onClose }) {
     }
 
     // While it works, a "thinking" bubble sits where its next message will land.
+    // Never during a call: somebody is on the phone about this report, nothing
+    // is being analysed (the analysis waits for the transcript), and a bubble
+    // typing away underneath a live call is the assistant talking over them.
     if (thread) {
       const pinned = atLatest(thread);
       const typing = thread.querySelector('.typing-row');
@@ -2677,6 +2825,10 @@ function openPanel({ root, host, dock, client, onClose }) {
 
     if (a.phase === 'analyzing') {
       assistantTimer = setTimeout(() => refreshThread(bugId), 3000);
+    } else if (a.phase === 'calling') {
+      // Slower: the call's own card is what the reporter is watching, and this
+      // only has to notice when the call ends and the analysis begins.
+      assistantTimer = setTimeout(() => refreshThread(bugId), 10000);
     } else if (a.phase === 'needs_info' && previous !== 'needs_info') {
       body.querySelector('.composer textarea')?.focus();
     }
@@ -2753,8 +2905,9 @@ function openPanel({ root, host, dock, client, onClose }) {
       <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="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>
@@ -2834,7 +2987,11 @@ function openPanel({ root, host, dock, client, onClose }) {
       }
     });
 
-    composer.querySelector('[data-act="attach"]').addEventListener('click', () => picker.click());
+    // 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) {
@@ -2847,12 +3004,12 @@ function openPanel({ root, host, dock, client, onClose }) {
       picker.value = '';
     });
 
-    if (!voiceSupported()) {
+    if (voiceBtn && !voiceSupported()) {
       voiceBtn.disabled = true;
       voiceBtn.title = 'This browser cannot record audio';
     }
 
-    voiceBtn.addEventListener('click', async () => {
+    voiceBtn?.addEventListener('click', async () => {
       if (recorder) {
         const handle = recorder;
         recorder = null;
@@ -2971,6 +3128,7 @@ function openPanel({ root, host, dock, client, onClose }) {
       <span class="call-dot" aria-hidden="true"></span>
       <span class="who" role="status" aria-live="polite">Calling the team…</span>
       <span class="secs" hidden></span>
+      ${handle?.recorded ? '<span class="call-kept">This call is recorded.</span>' : ''}
       <button class="act" type="button" data-act="mute" hidden>Mute</button>
       <button class="act danger" type="button" data-act="hangup">Cancel</button>`;
     body.insertBefore(bar, thread);
@@ -3167,13 +3325,14 @@ function messageHtml(message, state = '') {
   }
   if (state.includes('cont')) who = '';
 
-  // "Is this the problem you are facing?" — the confirm question the
-  // investigation asks (bugcatch-workers check-loop). One tap answers it; the
-  // buttons only show on the latest message, so an answered question has none.
-  const confirm = automated && /reply "yes" or "no"/i.test(body)
+  // 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.
+  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}Yes, that's it</button>
-        <button type="button" data-quick="No, that is not the problem">No, it's something else</button>
+        <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>`
     : '';