@sphoro/bugcatch-web-sdk 0.14.3 → 0.14.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sphoro/bugcatch-web-sdk",
-  "version": "0.14.3",
+  "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,27 @@ 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; }
@@ -2051,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.
@@ -2134,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>
@@ -2159,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;
@@ -2192,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();
+    }
   }
 
   /**
@@ -2229,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.