@sphoro/bugcatch-web-sdk 0.16.0 → 0.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sphoro/bugcatch-web-sdk",
-  "version": "0.16.0",
+  "version": "0.17.0",
   "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/agent-issues.js

@@ -0,0 +1,30 @@
+/**
+ * The predefined issues: questions the project's assistant can answer from the
+ * reporter's own account and close, offered in the widget as one-tap choices.
+ *
+ * The API decides the list (GET /ingest/agent-issues) — it is empty unless the
+ * project has the Sphoro Agent answering questions and a data source that can
+ * answer them. Every failure is an empty list: the tiles are a shortcut, and a
+ * widget that could not load them is still a widget that files reports.
+ *
+ * The agent ends its answer with SOLVED_QUESTION's wording; the widget draws
+ * Yes / No under it (widget.js messageHtml). Keep this pattern in step with
+ * agent-issues.ts SOLVED_QUESTION in the API and workers.
+ */
+export const SOLVED_PROMPT = /Did this answer your question\?/i;
+
+export async function fetchAgentIssues({ apiBase, apiKey, projectId }) {
+  try {
+    const res = await fetch(
+      `${apiBase}/ingest/agent-issues?projectId=${encodeURIComponent(projectId)}`,
+      { headers: { 'X-BugCatch-Key': apiKey } },
+    );
+    if (!res.ok) return [];
+    const body = await res.json();
+    return (Array.isArray(body?.issues) ? body.issues : [])
+      .filter((i) => i && typeof i.key === 'string' && typeof i.title === 'string')
+      .map((i) => ({ key: i.key, title: i.title, hint: typeof i.hint === 'string' ? i.hint : '' }));
+  } catch {
+    return [];
+  }
+}

package/src/identity.js

@@ -202,7 +202,7 @@ export const KNOWN_OPTIONS = [
   'attachments', 'maxAttachments', 'maxAttachmentBytes', 'maxRecordingMs', 'beforeSend',
   'user', 'context', 'updates', 'updateToast', 'onUpdate', 'voice', 'onCallState',
   'onIncomingCall', 'onReportSubmitted', 'onAssistantPhase', 'onError', 'debug',
-  'drafts', 'knownIssues', 'release', 'environment', 'buildId',
+  'drafts', 'knownIssues', 'agentIssues', 'release', 'environment', 'buildId',
 ];
 
 const CALLBACK_OPTIONS = [

package/src/index.js

@@ -19,6 +19,7 @@ import {
 import { joinLiveCall, liveCallSupported, openMicrophone } from './live-call.js';
 import { showIncomingCall } from './incoming-call.js';
 import { referenceFields } from './references.js';
+import { fetchAgentIssues } from './agent-issues.js';
 import { normalizeUser, mergeContext, checkOptions, cleanApiBase } from './identity.js';
 
 // Replaced at build time from package.json. The guard is for anyone importing
@@ -500,7 +501,7 @@ class BugCatchClient {
    * copies of this would drift, and the half that drifted would be the one that
    * stopped attaching the console.
    */
-  async #payload({ title, description = '', priority = 'MEDIUM', metadata = {}, media = [], references = [], context = null }) {
+  async #payload({ title, description = '', priority = 'MEDIUM', metadata = {}, media = [], references = [], context = null, issue = null }) {
     // This report's own context over the screen's, without keeping it.
     const ctx = context ? mergeContext(this.context, context, (m) => this.warn(m.replace('setContext()', 'report({ context })'))) : this.context;
     return {
@@ -541,6 +542,9 @@ class BugCatchClient {
       // description it is being sent anyway. A payload is a claim, and there is
       // no reason to make the join key one when the source text is right here.
       ...(references.length ? { references } : {}),
+      // A predefined issue the reporter picked (agentIssues()). The API keeps
+      // it only if this project offers it.
+      ...(issue ? { issue } : {}),
     };
   }
 
@@ -1136,7 +1140,7 @@ class BugCatchClient {
   /** File a bug with everything captured so far. */
   async report({
     title, description = '', priority = 'MEDIUM', metadata = {}, attachments = [],
-    references = [], context = null,
+    references = [], context = null, issue = null,
   } = {}) {
     if (!this.started) throw new Error('[BugCatch] call init() first.');
     if (typeof title !== 'string' || !title.trim()) throw new Error('[BugCatch] a title is required.');
@@ -1171,6 +1175,7 @@ class BugCatchClient {
     let payload = await this.#payload({
       title: title.trim(), description: typeof description === 'string' ? description : String(description ?? ''),
       priority: String(priority).toUpperCase(), metadata, media, references: refs, context,
+      issue: typeof issue === 'string' && issue ? issue.slice(0, 32) : null,
     });
 
     const screened = this.#screen(payload);
@@ -1291,6 +1296,31 @@ class BugCatchClient {
     return this.refFields;
   }
 
+  /**
+   * The questions this project's assistant can answer and close by itself —
+   * "When is my next EMI due?", "Is my KYC complete?" — for a form to offer
+   * as one-tap choices.
+   *
+   *   const issues = await BugCatch.agentIssues();
+   *   // [{ key: 'emi', title: 'When is my next EMI due?', hint: 'The date and the amount' }]
+   *   BugCatch.report({ title: issues[0].title, issue: issues[0].key });
+   *
+   * The assistant looks the reporter up (identify() makes that instant),
+   * answers from their record, and asks whether that settled it: yes resolves
+   * the report, no hands it to the team. Empty unless the project has turned
+   * this on and connected a data source that can answer. The widget calls it
+   * itself; cached for the life of the page.
+   */
+  agentIssues() {
+    if (this.agentIssueList) return this.agentIssueList;
+    this.agentIssueList = fetchAgentIssues({
+      apiBase: this.config.apiBase,
+      apiKey: this.config.apiKey,
+      projectId: this.config.projectId,
+    });
+    return this.agentIssueList;
+  }
+
   /**
    * Who this browser is signed in as on this project, from storage alone.
    *

package/src/widget.js

@@ -15,6 +15,7 @@ import { draftKey, draftOperation, readDraft } from './drafts.js';
 import { readSession } from './session.js';
 import { sendMessage } from './updates.js';
 import { readReferences, validateReference } from './references.js';
+import { SOLVED_PROMPT } from './agent-issues.js';
 
 const POSITIONS = {
   'bottom-right': 'bottom:20px;right:20px;',
@@ -438,6 +439,31 @@ textarea { min-height: 88px; resize: vertical; }
 .known .ask button { flex: none; }
 .known .err { margin: 6px 0 0; font-size: 12px; line-height: 1.45; color: var(--bc-danger); }
 
+/* ---------- questions the assistant answers by itself ---------- */
+.picks { margin-bottom: 16px; }
+.picks .picks-h {
+  margin: 0 0 8px; font-size: 11px; font-weight: 680; letter-spacing: .06em;
+  text-transform: uppercase; color: var(--bc-faint);
+}
+.picks .picks-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
+.picks .pick {
+  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
+  padding: 9px 11px; text-align: left; cursor: pointer; font: inherit;
+  color: var(--bc-fg); background: var(--bc-subtle);
+  border: 1px solid var(--bc-border); border-radius: var(--bc-r-md);
+  transition: background 160ms, border-color 160ms, transform 160ms;
+  animation: bc-rise 240ms var(--bc-ease) both;
+}
+.picks .pick:hover { border-color: var(--bc-accent-line); background: var(--bc-accent-soft); }
+.picks .pick[aria-pressed="true"] { border-color: var(--bc-accent); background: var(--bc-accent-soft); }
+.picks .pick .t { font-size: 13px; font-weight: 620; line-height: 1.35; overflow-wrap: anywhere; }
+.picks .pick .h { font-size: var(--bc-fs-xs); line-height: 1.4; color: var(--bc-muted); }
+.picks .picks-note {
+  display: flex; gap: 6px; align-items: flex-start; margin: 8px 0 0;
+  font-size: 12px; line-height: 1.45; color: var(--bc-muted);
+}
+.picks .picks-note svg { flex: none; margin-top: 2px; color: var(--bc-ok); }
+
 /* ---------- who is reporting ----------
    A strip above the form rather than a screen in front of it: where signing in
    is optional this is a line the reporter may ignore, and it should read as
@@ -1341,6 +1367,9 @@ function openPanel({ root, host, dock, client, onClose }) {
       <div class="body">
         <div class="slot" role="alert"></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>
         <div class="compose">
         <div class="field">
@@ -1413,6 +1442,7 @@ function openPanel({ root, host, dock, client, onClose }) {
   const whoami = $('.whoami');
   const refsBox = $('.refs');
   const known = $('.known');
+  const picks = $('.picks');
   const historyBtn = $('[data-act="history"]');
 
   const draftStatus = document.createElement('div');
@@ -2075,6 +2105,7 @@ function openPanel({ root, host, dock, client, onClose }) {
         description: descInput.value,
         priority,
         references: answeredReference(),
+        issue: pickedIssue?.key || null,
         attachments: items
           .filter((it) => it.status === 'ready')
           .map((it) => ({ type: it.kind, storageKey: it.storageKey, mime: it.mime })),
@@ -2221,6 +2252,57 @@ function openPanel({ root, host, dock, client, onClose }) {
   loadKnownIssues();
   titleInput.addEventListener('input', () => matchKnown(titleInput.value));
 
+  /* ---------- questions the assistant answers by itself ---------- */
+
+  // 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;
+    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) => `
+          <button type="button" class="pick" data-pick="${escapeHtml(issue.key)}"
+            aria-pressed="${pickedIssue?.key === issue.key}">
+            <span class="t">${escapeHtml(issue.title)}</span>
+            ${issue.hint ? `<span class="h">${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 */ });
+  }
+
   /* ---------- talk to the team ---------- */
 
   // Asked once, when the dialog opens, and the button stays hidden unless the
@@ -3329,12 +3411,19 @@ function messageHtml(message, state = '') {
   // 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}">