@sphoro/bugcatch-web-sdk 0.14.2 → 0.14.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sphoro/bugcatch-web-sdk",
-  "version": "0.14.2",
+  "version": "0.14.3",
   "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,15 @@ 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; }
 
+/* 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;
@@ -2398,6 +2407,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 +2638,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>`;
 }