glitchgrab 1.56.0 → 1.58.0

package/dist/index.mjs

@@ -37,6 +37,7 @@ function toAssistTurnResult(ok, body) {
     question: (_d = d.question) != null ? _d : null,
     options: Array.isArray(d.options) ? d.options.filter((o) => typeof o === "string") : [],
     report: (_e = d.report) != null ? _e : null,
+    title: typeof d.title === "string" && d.title.trim() ? d.title.trim() : null,
     duplicate: (_f = d.duplicate) != null ? _f : null,
     related: (_g = d.related) != null ? _g : null,
     solved: (_h = d.solved) != null ? _h : null,
@@ -665,6 +666,36 @@ async function sendFeedback(payload, baseUrl) {
     return null;
   }
 }
+async function sendLead(token, lead, baseUrl) {
+  var _a, _b;
+  try {
+    const url = `${baseUrl != null ? baseUrl : DEFAULT_BASE_URL}/api/v1/sdk/leads`;
+    const body = JSON.stringify(lead);
+    for (let attempt = 0; attempt < MAX_RETRIES; attempt++) {
+      try {
+        const response = await fetch(url, {
+          method: "POST",
+          headers: { "Content-Type": "application/json", Authorization: `Bearer ${token}` },
+          body
+        });
+        if (response.ok) {
+          const envelope = await response.json();
+          return { success: envelope.success, id: (_a = envelope.data) == null ? void 0 : _a.leadId, created: (_b = envelope.data) == null ? void 0 : _b.created };
+        }
+        if (response.status >= 400 && response.status < 500 && response.status !== 429) {
+          return null;
+        }
+      } catch (e) {
+      }
+      if (attempt < MAX_RETRIES - 1) {
+        await new Promise((resolve) => setTimeout(resolve, RETRY_BASE_MS * Math.pow(2, attempt)));
+      }
+    }
+    return null;
+  } catch (e) {
+    return null;
+  }
+}
 function signedFields(identity) {
   if (!(identity == null ? void 0 : identity.signature) || !identity.userId) return {};
   return { userId: identity.userId, signature: identity.signature };
@@ -1931,6 +1962,8 @@ function AssistSheet({
   reporterName,
   description,
   onDescriptionChange,
+  issueTitle,
+  onIssueTitleChange,
   severity,
   onSeverityChange,
   showSeverity,
@@ -2029,7 +2062,7 @@ function AssistSheet({
     onDegrade(message, retryable);
   }
   async function runTurn(history2, autoFile = false) {
-    var _a, _b;
+    var _a, _b, _c;
     setBusy(true);
     setAutoFileLeft(null);
     let result;
@@ -2086,6 +2119,7 @@ function AssistSheet({
     }
     if (result.report) {
       onDescriptionChange(result.report);
+      onIssueTitleChange((_b = result.title) != null ? _b : "");
       aiDraftRef.current = result.report;
       logEvent("draft_shown");
       setMessages([...history2, { role: "assistant", content: result.report, kind: "report" }]);
@@ -2098,7 +2132,7 @@ function AssistSheet({
     }
     if (result.question) {
       setMessages([...history2, { role: "assistant", content: result.question }]);
-      setOptions((_b = result.options) != null ? _b : []);
+      setOptions((_c = result.options) != null ? _c : []);
       return;
     }
     onDegrade("The assistant had nothing to add \u2014 write your report below and send it as normal.");
@@ -2942,6 +2976,40 @@ function AssistSheet({
                                   title: true,
                                   footer: "Your details will be added to it instead of opening a new issue."
                                 }),
+                                !duplicate && issueTitle && // Wraps rather than scrolls sideways: a title cut off at the
+                                // box edge is the very thing #543 is about. One line of text,
+                                // so Enter is swallowed.
+                                /* @__PURE__ */ jsx3(
+                                  "textarea",
+                                  {
+                                    "aria-label": "Title",
+                                    value: issueTitle,
+                                    maxLength: 120,
+                                    rows: 2,
+                                    onKeyDown: (e) => {
+                                      if (e.key === "Enter") e.preventDefault();
+                                    },
+                                    onChange: (e) => {
+                                      stopAutoFile("edited the title");
+                                      onIssueTitleChange(e.target.value.replace(/[\r\n]+/g, " "));
+                                    },
+                                    style: {
+                                      width: "100%",
+                                      padding: "8px 10px",
+                                      lineHeight: 1.45,
+                                      resize: "none",
+                                      borderRadius: "8px",
+                                      border: `1px solid ${t.inputBorder}`,
+                                      backgroundColor: t.inputBg,
+                                      color: t.text,
+                                      fontSize: "13px",
+                                      fontWeight: 600,
+                                      fontFamily: "inherit",
+                                      outline: "none",
+                                      boxSizing: "border-box"
+                                    }
+                                  }
+                                ),
                                 /* @__PURE__ */ jsx3(
                                   "textarea",
                                   {
@@ -4583,6 +4651,7 @@ function ReportDialog({
   const [pickedSimilar, setPickedSimilar] = useState4(null);
   const [addedToIssue, setAddedToIssue] = useState4(null);
   const [aiConversationId, setAiConversationId] = useState4(null);
+  const [issueTitle, setIssueTitle] = useState4("");
   const [isEnhanced, setIsEnhanced] = useState4(false);
   const [originalDescription, setOriginalDescription] = useState4(
     null
@@ -5284,6 +5353,7 @@ function ReportDialog({
       }
       if (aiConversationId) {
         metadata.aiConversationId = aiConversationId;
+        if (sheetUp && !duplicateOf && issueTitle.trim()) metadata.issueTitle = issueTitle.trim();
       }
       const result = await report(
         // The RATING branch returned above, so anything reaching here is a real
@@ -5302,6 +5372,7 @@ function ReportDialog({
         setScreenshots([]);
         setAttachments([]);
         setAiConversationId(null);
+        setIssueTitle("");
         setDuplicateIssueNumber(null);
         setDuplicateKind("duplicate");
         setSimilarIssues(null);
@@ -7405,6 +7476,8 @@ function ReportDialog({
           setDescription(value);
           if (validationError) setValidationError(null);
         },
+        issueTitle,
+        onIssueTitleChange: setIssueTitle,
         severity,
         onSeverityChange: (value) => {
           setSeverity(value);
@@ -7570,6 +7643,16 @@ function getTypeIcon(type, color, size = 24) {
 // src/booking-dialog.tsx
 import { useCallback as useCallback2, useEffect as useEffect5, useMemo as useMemo3, useState as useState5 } from "react";
 import { Fragment as Fragment5, jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+function readQuestions(value) {
+  if (!Array.isArray(value)) return [];
+  return value.flatMap((row) => {
+    if (!row || typeof row !== "object") return [];
+    const { id, label, options, required } = row;
+    if (typeof id !== "string" || typeof label !== "string" || !Array.isArray(options)) return [];
+    const choices = options.filter((o) => typeof o === "string" && o !== "");
+    return choices.length > 0 ? [{ id, label, options: choices, required: required !== false }] : [];
+  });
+}
 var LIGHT = {
   bg: "#ffffff",
   pane: "#ffffff",
@@ -7723,6 +7806,10 @@ function BookingDialog({
   const [email, setEmail] = useState5("");
   const [phone, setPhone] = useState5("");
   const [note, setNote] = useState5("");
+  const [questions, setQuestions] = useState5([]);
+  const [answers, setAnswers] = useState5({});
+  const [pageLoaded, setPageLoaded] = useState5(false);
+  const [asked, setAsked] = useState5(false);
   const [code, setCode] = useState5("");
   const [bookingId, setBookingId] = useState5(null);
   const [meetUrl, setMeetUrl] = useState5(null);
@@ -7751,6 +7838,7 @@ function BookingDialog({
         if (!json.success) {
           setError((_a2 = json.error) != null ? _a2 : "Couldn't load available times");
           setSlotsByMonth((prev) => ({ ...prev, [target]: [] }));
+          setPageLoaded(true);
           return;
         }
         const data = (_b2 = json.data) != null ? _b2 : {};
@@ -7763,9 +7851,12 @@ function BookingDialog({
           slotMinutes: typeof data.slotMinutes === "number" ? data.slotMinutes : 30
         });
         setWhatsappUrl((_c2 = data.whatsappUrl) != null ? _c2 : null);
+        setQuestions(readQuestions(data.questions));
+        setPageLoaded(true);
       } catch (e) {
         setError("Couldn't reach the booking service");
         setSlotsByMonth((prev) => ({ ...prev, [target]: [] }));
+        setPageLoaded(true);
       }
     },
     [baseUrl, headers]
@@ -7783,6 +7874,8 @@ function BookingDialog({
     setBookingId(null);
     setError(null);
     setAvatarFailed(false);
+    setPageLoaded(false);
+    setAsked(false);
   }, [open]);
   const monthLoaded = month in slotsByMonth;
   useEffect5(() => {
@@ -7811,6 +7904,10 @@ function BookingDialog({
   const daySlots = day ? (_d = byDay.get(day)) != null ? _d : [] : [];
   const atFirstMonth = month <= today.slice(0, 7);
   const pastHorizon = monthLoaded && !error && byDay.size === 0 && !atFirstMonth;
+  const given = questions.flatMap((q) => q.options.includes(answers[q.id]) ? [{ ...q, answer: answers[q.id] }] : []);
+  const canContinue = questions.every((q) => !q.required || q.options.includes(answers[q.id]));
+  const view = step !== "slots" ? step : !pageLoaded ? "loading" : questions.length > 0 && !asked ? "questions" : "slots";
+  const roomy = step === "slots";
   async function startBooking() {
     var _a2;
     if (!selected) return;
@@ -7825,6 +7922,7 @@ function BookingDialog({
           email,
           phone,
           note,
+          answers: Object.fromEntries(given.map((q) => [q.id, q.answer])),
           startsAt: selected.startsAt,
           // The zone the times were shown in, which is the one the visitor chose.
           timezone: zone
@@ -7875,7 +7973,7 @@ function BookingDialog({
     "div",
     {
       style: {
-        marginTop: wide ? whatsappUrl && step === "slots" ? 14 : "auto" : 0,
+        marginTop: wide ? whatsappUrl && roomy ? 14 : "auto" : 0,
         padding: wide ? 0 : "4px 20px 18px",
         display: "flex",
         justifyContent: wide ? "flex-start" : "center"
@@ -8016,9 +8114,36 @@ function BookingDialog({
               selectedEnd && formatTime(selectedEnd, zone, twelve)
             ] })
           ] }) }),
+          asked && given.length > 0 && /* @__PURE__ */ jsx6(Row, { icon: "check", t, children: /* @__PURE__ */ jsxs6("span", { children: [
+            given.map((q) => q.answer).join(" \xB7 "),
+            view === "slots" && /* @__PURE__ */ jsxs6(Fragment5, { children: [
+              " ",
+              /* @__PURE__ */ jsx6(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setAsked(false),
+                  className: "gg-bk-link",
+                  style: {
+                    border: 0,
+                    // Room for a thumb without pushing the rows apart.
+                    padding: "8px 6px",
+                    margin: "-8px 0",
+                    background: "transparent",
+                    color: t.muted,
+                    fontFamily: "inherit",
+                    fontSize: 13,
+                    textDecoration: "underline",
+                    cursor: "pointer"
+                  },
+                  children: "Change"
+                }
+              )
+            ] })
+          ] }) }),
           /* @__PURE__ */ jsx6(Row, { icon: "clock", t, children: formatDuration(page.slotMinutes) }),
           /* @__PURE__ */ jsx6(Row, { icon: "video", t, children: "Google Meet" }),
-          /* @__PURE__ */ jsx6(Row, { icon: "globe", t, children: step === "slots" ? (
+          /* @__PURE__ */ jsx6(Row, { icon: "globe", t, children: roomy ? (
             // The visible label is plain text; the native select sits on top of
             // it, invisible. A styled select sizes itself to the longest zone
             // name in the list, which pushed the chevron to the pane's edge.
@@ -8038,7 +8163,7 @@ function BookingDialog({
             ] })
           ) : zone })
         ] }),
-        whatsappUrl && step === "slots" && /* @__PURE__ */ jsxs6(
+        whatsappUrl && roomy && /* @__PURE__ */ jsxs6(
           "a",
           {
             href: whatsappUrl,
@@ -8309,6 +8434,93 @@ function BookingDialog({
       ]
     }
   );
+  const loading = /* @__PURE__ */ jsx6(
+    "div",
+    {
+      style: {
+        flex: "1 1 auto",
+        minHeight: wide ? void 0 : 200,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        fontSize: 13,
+        ...muted
+      },
+      children: "Loading\u2026"
+    }
+  );
+  const ask = /* @__PURE__ */ jsx6(
+    "div",
+    {
+      style: {
+        flex: "1 1 auto",
+        minWidth: 0,
+        padding: wide ? "28px 32px" : "20px",
+        boxSizing: "border-box",
+        overflowY: wide ? "auto" : void 0
+      },
+      children: /* @__PURE__ */ jsxs6("div", { style: { maxWidth: 520, display: "flex", flexDirection: "column", gap: 22 }, children: [
+        /* @__PURE__ */ jsxs6("div", { children: [
+          /* @__PURE__ */ jsx6("div", { style: { fontSize: 16, fontWeight: 600 }, children: questions.length === 1 ? "One question first" : "A few questions first" }),
+          /* @__PURE__ */ jsx6("div", { style: { fontSize: 13, lineHeight: 1.5, marginTop: 4, ...muted }, children: "So the right person takes your demo." })
+        ] }),
+        questions.map((q) => /* @__PURE__ */ jsxs6("div", { role: "group", "aria-label": q.label, children: [
+          /* @__PURE__ */ jsxs6("div", { style: { fontSize: 14, fontWeight: 500, overflowWrap: "anywhere" }, children: [
+            q.label,
+            !q.required && /* @__PURE__ */ jsx6("span", { style: { fontWeight: 400, ...muted }, children: " (optional)" })
+          ] }),
+          /* @__PURE__ */ jsx6("div", { style: { display: "flex", flexWrap: "wrap", gap: 8, marginTop: 10 }, children: q.options.map((option) => {
+            const on = answers[q.id] === option;
+            return /* @__PURE__ */ jsx6(
+              "button",
+              {
+                type: "button",
+                "aria-pressed": on,
+                className: on ? void 0 : "gg-bk-slot",
+                onClick: () => setAnswers((prev) => {
+                  if (on && !q.required) {
+                    const rest = { ...prev };
+                    delete rest[q.id];
+                    return rest;
+                  }
+                  return { ...prev, [q.id]: option };
+                }),
+                style: {
+                  padding: "9px 14px",
+                  minHeight: 40,
+                  borderRadius: 8,
+                  border: `1px solid ${on ? t.ink : t.border}`,
+                  background: on ? t.ink : t.pane,
+                  color: on ? t.onInk : t.text,
+                  fontFamily: "inherit",
+                  fontSize: 14,
+                  fontWeight: 500,
+                  cursor: "pointer",
+                  overflowWrap: "anywhere",
+                  textAlign: "left"
+                },
+                children: option
+              },
+              option
+            );
+          }) })
+        ] }, q.id)),
+        /* @__PURE__ */ jsxs6("div", { style: { display: "flex", flexWrap: "wrap", alignItems: "center", gap: "8px 12px", marginTop: 2 }, children: [
+          /* @__PURE__ */ jsx6(
+            "button",
+            {
+              type: "button",
+              onClick: () => setAsked(true),
+              disabled: !canContinue,
+              style: { ...primaryStyle(t, !canContinue), whiteSpace: "nowrap" },
+              children: "See available times"
+            }
+          ),
+          !canContinue && /* @__PURE__ */ jsx6("span", { style: { fontSize: 12, ...muted }, children: "Pick one for each to continue" })
+        ] })
+      ] })
+    }
+  );
   const form = /* @__PURE__ */ jsx6(
     "div",
     {
@@ -8422,6 +8634,7 @@ function BookingDialog({
         .gg-bk-day:hover { box-shadow: inset 0 0 0 1.5px ${t.ink}; }
         .gg-bk-slot:hover { border-color: ${t.ink} !important; }
         .gg-bk-ghost:hover { background: ${t.open} !important; }
+        .gg-bk-link:hover { color: ${t.text} !important; }
         .gg-bk-root button:focus-visible, .gg-bk-root a:focus-visible,
         .gg-bk-root span:has(> select:focus-visible), .gg-bk-root input:focus-visible, .gg-bk-root textarea:focus-visible {
           outline: 2px solid ${t.ink}; outline-offset: 2px;
@@ -8435,11 +8648,11 @@ function BookingDialog({
             "aria-label": page.title,
             className: "gg-bk-root",
             style: {
-              width: step === "slots" ? "min(1060px, 100%)" : "min(820px, 100%)",
+              width: roomy ? "min(1060px, 100%)" : "min(820px, 100%)",
               // A month grid should not jump in height between months; the form
               // steps are short and would sit in a mostly empty box.
-              height: wide && step === "slots" ? "min(640px, calc(100vh - 48px))" : void 0,
-              minHeight: wide && step !== "slots" ? 420 : void 0,
+              height: wide && roomy ? "min(640px, calc(100vh - 48px))" : void 0,
+              minHeight: wide && !roomy ? 420 : void 0,
               margin: wide ? void 0 : "auto 0",
               display: "flex",
               flexDirection: wide ? "row" : "column",
@@ -8455,7 +8668,7 @@ function BookingDialog({
             },
             children: [
               summary,
-              step === "slots" ? /* @__PURE__ */ jsxs6(Fragment5, { children: [
+              view === "loading" ? loading : view === "questions" ? ask : view === "slots" ? /* @__PURE__ */ jsxs6(Fragment5, { children: [
                 calendar,
                 times
               ] }) : form,
@@ -8542,6 +8755,7 @@ function Icon({ name }) {
     left: /* @__PURE__ */ jsx6("path", { d: "m15 18-6-6 6-6" }),
     right: /* @__PURE__ */ jsx6("path", { d: "m9 18 6-6-6-6" }),
     down: /* @__PURE__ */ jsx6("path", { d: "m6 9 6 6 6-6" }),
+    check: /* @__PURE__ */ jsx6("path", { d: "M20 6 9 17l-5-5" }),
     clock: /* @__PURE__ */ jsxs6(Fragment5, { children: [
       /* @__PURE__ */ jsx6("circle", { cx: "12", cy: "12", r: "9" }),
       /* @__PURE__ */ jsx6("path", { d: "M12 7v5l3 2" })
@@ -9073,6 +9287,17 @@ function GlitchgrabProviderInner({
     },
     [token, baseUrl, session]
   );
+  const submitLead = useCallback3(
+    async (lead) => {
+      try {
+        const context = captureContext(visitedPagesRef.current);
+        return await sendLead(token, { ...lead, pageUrl: context.url }, baseUrl);
+      } catch (e) {
+        return null;
+      }
+    },
+    [token, baseUrl]
+  );
   const openFeedbackDialog = useCallback3(() => {
     if (typeof window !== "undefined") {
       window.dispatchEvent(
@@ -9250,6 +9475,7 @@ function GlitchgrabProviderInner({
         setContext: setContext2,
         setContexts: setContexts2,
         sendFeedback: feedback,
+        submitLead,
         openFeedbackDialog,
         addBreadcrumb: addBreadcrumb2,
         openReportDialog,
@@ -9714,6 +9940,7 @@ export {
   matchesShortcut,
   sanitizeUrl,
   sendFeedback,
+  sendLead,
   sendReport,
   setContext,
   setContexts,