@sphoro/bugcatch-web-sdk 0.14.2 → 0.14.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sphoro/bugcatch-web-sdk",
-  "version": "0.14.2",
+  "version": "0.14.4",
   "description": "Drop-in browser SDK — report bugs with console, network and environment context, without the extension.",
   "type": "module",
   "main": "dist/bugcatch.es.js",

package/src/widget.js

@@ -623,6 +623,36 @@ button.primary .spinner { border-color: rgba(255,255,255,.4); border-top-color:
 .att .file .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .att .file .sz { flex: none; color: var(--bc-faint); font-size: 11px; }
 
+/* The assistant's live card, above the conversation. */
+.assistant { margin: 8px 12px 4px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--bc-border); background: var(--bc-subtle); }
+.assistant.analyzing, .assistant.confirming, .assistant.needs_info { border-color: color-mix(in srgb, var(--bc-accent) 45%, transparent); }
+.as-top { display: flex; gap: 10px; align-items: flex-start; }
+.as-orb { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 12px; background: var(--bc-accent); }
+.as-spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; animation: as-rot .8s linear infinite; }
+@keyframes as-rot { to { transform: rotate(360deg); } }
+.as-title { font-weight: 600; font-size: 14px; }
+.assistant.analyzing .as-title::after { content: ''; animation: as-dots 1.4s steps(4) infinite; }
+@keyframes as-dots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } }
+.as-detail { font-size: 12.5px; color: var(--bc-muted); margin-top: 2px; }
+.as-steps { list-style: none; display: flex; gap: 6px; margin: 10px 0 0; padding: 0; flex-wrap: wrap; font-size: 11.5px; color: var(--bc-muted); }
+.as-steps li { display: flex; align-items: center; gap: 4px; }
+.as-steps li span { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid currentColor; }
+.as-steps li.done { color: var(--bc-accent); }
+.as-steps li.done span { background: var(--bc-accent); border-color: var(--bc-accent); }
+.as-steps li.active { color: var(--bc-fg); font-weight: 600; }
+.as-steps li.active span { border-color: var(--bc-accent); animation: as-pulse 1s ease-in-out infinite; }
+@keyframes as-pulse { 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--bc-accent) 25%, transparent); } }
+@media (prefers-reduced-motion: reduce) { .as-spin, .as-steps li.active span, .assistant.analyzing .as-title::after { animation: none; } }
+
+/* Quick answers under the confirm question — only on the latest message. */
+.msg-row .quick { display: none; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
+.msg-row:last-child .quick { display: flex; }
+.quick button {
+  font: inherit; font-size: 13px; padding: 6px 12px; border-radius: 999px; cursor: pointer;
+  border: 1px solid var(--bc-accent); background: transparent; color: var(--bc-accent);
+}
+.quick button:hover { background: color-mix(in srgb, var(--bc-accent) 12%, transparent); }
+
 /* ---------- the composer ---------- */
 .composer {
   position: sticky; bottom: 0; margin-top: auto;
@@ -2042,6 +2072,18 @@ function openPanel({ root, host, dock, client, onClose }) {
    * sentence somebody started reading is the reason they open it again.
    */
   function succeed(res, { callFailed = null } = {}) {
+    // The assistant: straight into the report's conversation, where the
+    // investigation shows itself working ("Analyzing the issue…") and asks
+    // what it needs. The plain "Thanks" below stays for when that view cannot
+    // load — a report filed without a way to follow it.
+    if (res?.id && !callFailed) {
+      showReport(res.id, { fresh: true }).then((ok) => { if (!ok) doneScreen(res, { callFailed }); });
+      return;
+    }
+    doneScreen(res, { callFailed });
+  }
+
+  function doneScreen(res, { callFailed = null } = {}) {
     const ref = res?.id ? String(res.id).slice(0, 8) : null;
     const eta = res?.estimate?.label ? String(res.estimate.label) : null;
     // A press of Call that filed the report and then could not ring anybody.
@@ -2125,14 +2167,14 @@ function openPanel({ root, host, dock, client, onClose }) {
    * bubbles either side of them; and there is a box at the bottom. Oldest at
    * the top, because that is the direction a conversation is read.
    */
-  async function showReport(bugId) {
+  async function showReport(bugId, { fresh = false } = {}) {
     const panel = scrim.querySelector('.panel');
     panel.innerHTML = `
       <div class="head">
         <button class="icon-btn back" type="button" data-act="back" aria-label="Back to your reports">${ICONS.back}</button>
         <div class="titles">
-          <h2>Your report</h2>
-          <p>Everything that has happened, and a way to answer.</p>
+          <h2>${fresh ? 'Looking into it' : 'Your report'}</h2>
+          <p>${fresh ? 'Our assistant is investigating — it may ask you a question.' : 'Everything that has happened, and a way to answer.'}</p>
         </div>
         <button class="icon-btn" type="button" data-act="close" aria-label="Close">${ICONS.close}</button>
       </div>
@@ -2150,11 +2192,12 @@ function openPanel({ root, host, dock, client, onClose }) {
 
     const body = panel.querySelector('.history');
     // The panel can be closed, or navigated away from, while this is in flight.
-    if (!body || !panel.querySelector('[data-act="back"]')) return;
+    if (!body || !panel.querySelector('[data-act="back"]')) return false;
 
     if (!report) {
+      if (fresh) return false;
       body.innerHTML = '<div class="empty">Couldn\'t load that report just now.</div>';
-      return;
+      return false;
     }
 
     openReportId = bugId;
@@ -2183,6 +2226,41 @@ function openPanel({ root, host, dock, client, onClose }) {
     scrollToLatest(thread);
     mountVerification(body, report);
     if (report.canReply) mountComposer(body, thread, bugId);
+    mountAssistant(body, report, bugId);
+    return true;
+  }
+
+  /**
+   * The assistant's live card: where the investigation is, and a gentle
+   * refresh while it works. Analyzing polls every few seconds until the
+   * outcome lands — a question, a found cause, or a hand-off — so the
+   * reporter watches it happen rather than wondering whether anything is.
+   */
+  let assistantTimer = null;
+  function mountAssistant(body, report, bugId) {
+    clearTimeout(assistantTimer);
+    const a = report.assistant;
+    body.querySelector('.assistant')?.remove();
+    if (!a) return;
+    const card = document.createElement('div');
+    card.className = `assistant ${escapeHtml(a.phase)}`;
+    card.setAttribute('role', 'status');
+    card.setAttribute('aria-live', 'polite');
+    card.innerHTML = `
+      <div class="as-top">
+        <span class="as-orb" aria-hidden="true">${a.phase === 'analyzing' ? '<span class="as-spin"></span>' : '✦'}</span>
+        <div class="as-text">
+          <div class="as-title">${escapeHtml(a.title)}</div>
+          <div class="as-detail">${escapeHtml(a.detail)}</div>
+        </div>
+      </div>
+      <ol class="as-steps">${(a.steps || []).map((st) => `<li class="${escapeHtml(st.state)}"><span></span>${escapeHtml(st.label)}</li>`).join('')}</ol>`;
+    body.querySelector('.report-head')?.after(card);
+    if (a.phase === 'analyzing') {
+      assistantTimer = setTimeout(() => refreshThread(bugId), 3000);
+    } else if (a.phase === 'needs_info') {
+      body.querySelector('.composer textarea')?.focus();
+    }
   }
 
   /**
@@ -2220,6 +2298,7 @@ function openPanel({ root, host, dock, client, onClose }) {
     if (!report || openReportId !== bugId) return;
 
     mountVerification(body, report);
+    mountAssistant(body, report, bugId);
     const pinned = atLatest(thread);
     thread.innerHTML = threadHtml(report.timeline);
     // Only follow the conversation down if they were already at the bottom.
@@ -2398,6 +2477,14 @@ function openPanel({ root, host, dock, client, onClose }) {
 
     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);
@@ -2621,10 +2708,21 @@ function messageHtml(message, state = '') {
   if (automated) who = '<span class="msg-who auto">Automatic reply</span>';
   else if (!mine && message.author) who = `<span class="msg-who">${escapeHtml(message.author)}</span>`;
 
+  // "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)
+    ? `<div class="quick" role="group" aria-label="Answer">
+        <button type="button" data-quick="Yes, this is the problem">Yes, that's it</button>
+        <button type="button" data-quick="No, that is not the problem">No, it's something else</button>
+      </div>`
+    : '';
+
   return `
     <div class="msg-row ${mine ? 'mine' : 'theirs'} ${automated ? 'auto' : ''} ${state}">
       ${who}
       <div class="bubble ${body ? '' : 'silent'}">${text}${files}</div>
+      ${confirm}
       <span class="msg-when">${escapeHtml(relativeDay(message.at))}</span>
     </div>`;
 }