glitchgrab 1.58.3 → 1.59.1

package/dist/index.mjs

@@ -711,12 +711,21 @@ function signedFields(identity) {
   return { userId: identity.userId, signature: identity.signature };
 }
 async function enhanceText(text, token, baseUrl, screenshot, context, identity) {
+  try {
+    return await enhanceTextOrThrow(text, token, baseUrl, screenshot, context, identity);
+  } catch (e) {
+    return text;
+  }
+}
+async function enhanceTextOrThrow(text, token, baseUrl, screenshot, context, identity) {
   var _a;
+  const trimmed = text.trim();
+  if (!trimmed) return text;
+  const unavailable = "AI enhance isn't available right now \u2014 send your report as written.";
+  let response;
   try {
-    const trimmed = text.trim();
-    if (!trimmed) return text;
     const url = `${baseUrl != null ? baseUrl : DEFAULT_BASE_URL}/api/v1/ai/enhance-text`;
-    const response = await fetch(url, {
+    response = await fetch(url, {
       method: "POST",
       headers: {
         "Content-Type": "application/json",
@@ -729,15 +738,20 @@ async function enhanceText(text, token, baseUrl, screenshot, context, identity)
         ...signedFields(identity)
       })
     });
-    if (!response.ok) return text;
-    const envelope = await response.json();
-    if ((envelope == null ? void 0 : envelope.success) && typeof ((_a = envelope.data) == null ? void 0 : _a.text) === "string") {
-      return envelope.data.text;
-    }
-    return text;
   } catch (e) {
-    return text;
+    throw new Error(unavailable);
+  }
+  if (response.status === 429) {
+    throw new Error("Too many AI enhance tries \u2014 wait a while, or send your report as written.");
   }
+  const envelope = await response.json().catch(() => null);
+  if (response.ok && (envelope == null ? void 0 : envelope.success) && typeof ((_a = envelope.data) == null ? void 0 : _a.text) === "string") {
+    return envelope.data.text;
+  }
+  if (response.status === 400 && typeof (envelope == null ? void 0 : envelope.error) === "string") {
+    throw new Error(envelope.error);
+  }
+  throw new Error(unavailable);
 }
 async function findSimilarIssues(description, token, baseUrl, identity, files) {
   var _a;
@@ -5494,6 +5508,7 @@ function ReportDialog({
   const [aiConversationId, setAiConversationId] = useState4(null);
   const [issueTitle, setIssueTitle] = useState4("");
   const [isEnhanced, setIsEnhanced] = useState4(false);
+  const [enhanceError, setEnhanceError] = useState4(null);
   const [originalDescription, setOriginalDescription] = useState4(
     null
   );
@@ -5948,6 +5963,7 @@ function ReportDialog({
     setSelfReportFrom(null);
     setVoiceError(null);
     setIsEnhanced(false);
+    setEnhanceError(null);
     setOriginalDescription(null);
     setAssistOpen(false);
     setAssistUsed(false);
@@ -6013,6 +6029,7 @@ function ReportDialog({
               const sep = base.trim() ? " " : "";
               setDescriptionFromVoice(base + sep + text.trim());
               setValidationError(null);
+              setEnhanceError(null);
               setIsEnhanced(false);
               setOriginalDescription(null);
             }
@@ -7108,6 +7125,7 @@ function ReportDialog({
                                 notePushToTalkEdit();
                                 setDescription(e.target.value);
                                 if (validationError) setValidationError(null);
+                                if (enhanceError) setEnhanceError(null);
                                 if (isEnhanced) {
                                   setIsEnhanced(false);
                                   setOriginalDescription(null);
@@ -7229,6 +7247,7 @@ function ReportDialog({
                                 var _a2;
                                 if (!description.trim() || isEnhancing) return;
                                 setIsEnhancing(true);
+                                setEnhanceError(null);
                                 try {
                                   const polished = await enhanceText2(
                                     description,
@@ -7241,6 +7260,10 @@ function ReportDialog({
                                     if (validationError)
                                       setValidationError(null);
                                   }
+                                } catch (err) {
+                                  setEnhanceError(
+                                    err instanceof Error && err.message ? err.message : "AI enhance isn't available right now \u2014 send your report as written."
+                                  );
                                 } finally {
                                   setIsEnhancing(false);
                                 }
@@ -7499,6 +7522,20 @@ function ReportDialog({
                             children: voiceError
                           }
                         ),
+                        enhanceError && /* @__PURE__ */ jsx5(
+                          "p",
+                          {
+                            role: "alert",
+                            style: {
+                              color: "#ef4444",
+                              fontSize: "11px",
+                              lineHeight: 1.5,
+                              marginTop: "4px",
+                              marginBottom: 0
+                            },
+                            children: enhanceError
+                          }
+                        ),
                         assistNotice && /* @__PURE__ */ jsx5(
                           "p",
                           {
@@ -8521,6 +8558,69 @@ 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";
+
+// src/phone.ts
+var COUNTRIES = [
+  { iso: "IN", name: "India", dial: "91" },
+  { iso: "AE", name: "UAE", dial: "971" },
+  { iso: "US", name: "US / Canada", dial: "1" },
+  { iso: "GB", name: "UK", dial: "44" },
+  { iso: "SG", name: "Singapore", dial: "65" },
+  { iso: "AU", name: "Australia", dial: "61" },
+  { iso: "SA", name: "Saudi Arabia", dial: "966" },
+  { iso: "QA", name: "Qatar", dial: "974" },
+  { iso: "NP", name: "Nepal", dial: "977" },
+  { iso: "BD", name: "Bangladesh", dial: "880" },
+  { iso: "LK", name: "Sri Lanka", dial: "94" },
+  { iso: "DE", name: "Germany", dial: "49" }
+];
+var ZONE_COUNTRY = {
+  "Asia/Kolkata": "91",
+  "Asia/Calcutta": "91",
+  "Asia/Dubai": "971",
+  "Europe/London": "44",
+  "Asia/Singapore": "65",
+  "Asia/Riyadh": "966",
+  "Asia/Qatar": "974",
+  "Asia/Kathmandu": "977",
+  "Asia/Katmandu": "977",
+  "Asia/Dhaka": "880",
+  "Asia/Colombo": "94",
+  "Europe/Berlin": "49"
+};
+function defaultDialForZone(zone) {
+  if (ZONE_COUNTRY[zone]) return ZONE_COUNTRY[zone];
+  if (zone.startsWith("America/")) return "1";
+  if (zone.startsWith("Australia/")) return "61";
+  return "91";
+}
+function splitTypedPhone(typed, dial) {
+  const trimmed = typed.trim();
+  const digits = trimmed.replace(/\D/g, "");
+  if (trimmed.startsWith("+")) {
+    const match = [...COUNTRIES].sort((a, b) => b.dial.length - a.dial.length).find((c) => digits.startsWith(c.dial));
+    if (match) return { dial: match.dial, national: digits.slice(match.dial.length) };
+  }
+  if (dial === "91" && digits.length === 12 && digits.startsWith("91")) return { dial, national: digits.slice(2) };
+  if (dial === "91" && digits.length === 11 && digits.startsWith("0")) return { dial, national: digits.slice(1) };
+  return { dial, national: digits };
+}
+function phoneProblem(dial, national) {
+  const digits = national.replace(/\D/g, "");
+  if (!digits) return "Enter your mobile number";
+  if (dial === "91") {
+    if (digits.length !== 10) return `An Indian mobile has 10 digits \u2014 this has ${digits.length}`;
+    if (!/^[6-9]/.test(digits)) return "An Indian mobile starts with 6, 7, 8 or 9";
+    return null;
+  }
+  if (digits.length < 6 || digits.length > 12) return "Check the number \u2014 it looks too short or too long";
+  return null;
+}
+function toE164(dial, national) {
+  return `+${dial}${national.replace(/\D/g, "")}`;
+}
+
+// src/booking-dialog.tsx
 import { Fragment as Fragment5, jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 function readQuestions(value) {
   if (!Array.isArray(value)) return [];
@@ -8663,7 +8763,9 @@ function BookingDialog({
   open,
   onClose,
   preview = false,
-  availabilityUrl
+  availabilityUrl,
+  intro,
+  onBooked
 }) {
   var _a, _b, _c, _d, _e;
   const wide = useMediaQuery(WIDE_QUERY, true);
@@ -8686,6 +8788,8 @@ function BookingDialog({
   const [name, setName] = useState5("");
   const [email, setEmail] = useState5("");
   const [phone, setPhone] = useState5("");
+  const [dial, setDial] = useState5(() => defaultDialForZone(localZone()));
+  const [phoneTouched, setPhoneTouched] = useState5(false);
   const [note, setNote] = useState5("");
   const [questions, setQuestions] = useState5([]);
   const [answers, setAnswers] = useState5({});
@@ -8796,8 +8900,12 @@ function BookingDialog({
   const view = step !== "slots" ? step : !pageLoaded ? "loading" : questions.length > 0 && !asked ? "questions" : "slots";
   const roomy = step === "slots";
   async function startBooking() {
-    var _a2, _b2;
+    var _a2, _b2, _c2;
     if (!selected) return;
+    if (phoneError) {
+      setPhoneTouched(true);
+      return;
+    }
     if (preview) {
       setPreviewEnded(true);
       return;
@@ -8811,7 +8919,7 @@ function BookingDialog({
         body: JSON.stringify({
           name,
           email,
-          phone,
+          phone: toE164(dial, phone),
           note,
           answers: Object.fromEntries(given.map((q) => [q.id, q.answer])),
           startsAt: selected.startsAt,
@@ -8830,6 +8938,7 @@ function BookingDialog({
       if (json.data.confirmed) {
         setMeetUrl((_b2 = json.data.meetUrl) != null ? _b2 : null);
         setStep("done");
+        reportBooked(json.data.bookingId, (_c2 = json.data.meetUrl) != null ? _c2 : null);
         return;
       }
       setBookingId(json.data.bookingId);
@@ -8840,8 +8949,16 @@ function BookingDialog({
       setBusy(false);
     }
   }
+  function reportBooked(id, meet) {
+    if (!onBooked || !id || !selected) return;
+    try {
+      onBooked({ bookingId: id, startsAt: selected.startsAt, name, email, phone: toE164(dial, phone), meetUrl: meet });
+    } catch (e) {
+      console.error("[glitchgrab] onBooked threw", e);
+    }
+  }
   async function confirmBooking() {
-    var _a2;
+    var _a2, _b2;
     if (!bookingId) return;
     setBusy(true);
     setError(null);
@@ -8858,13 +8975,15 @@ function BookingDialog({
       }
       setMeetUrl(json.data.meetUrl);
       setStep("done");
+      reportBooked(bookingId, (_b2 = json.data.meetUrl) != null ? _b2 : null);
     } catch (e) {
       setError("Couldn't reach the booking service");
     } finally {
       setBusy(false);
     }
   }
-  const canSubmitDetails = name.trim() && email.includes("@") && phone.replace(/\D/g, "").length >= 8;
+  const phoneError = phoneProblem(dial, phone);
+  const canSubmitDetails = Boolean(name.trim() && email.includes("@"));
   const selectedEnd = selected ? (_e = selected.endsAt) != null ? _e : new Date(new Date(selected.startsAt).getTime() + page.slotMinutes * 6e4).toISOString() : null;
   const monthDate = new Date(keyToUtc(`${month}-01`));
   const muted = { color: t.muted };
@@ -9011,6 +9130,14 @@ function BookingDialog({
             children: "Preview \u2014 nothing is booked"
           }
         ),
+        intro && /* @__PURE__ */ jsx6(
+          "div",
+          {
+            "data-glitchgrab-booking-intro": true,
+            style: { fontSize: 13, fontWeight: 600, lineHeight: 1.45, paddingRight: 32, color: t.ink, overflowWrap: "anywhere" },
+            children: intro
+          }
+        ),
         /* @__PURE__ */ jsx6("div", { style: { fontSize: 20, fontWeight: 600, lineHeight: 1.25, paddingRight: 32, overflowWrap: "anywhere" }, children: page.title }),
         page.description && /* @__PURE__ */ jsx6("div", { style: { fontSize: 13, lineHeight: 1.5, overflowWrap: "anywhere", ...muted }, children: page.description }),
         /* @__PURE__ */ jsxs6("div", { style: { display: "flex", flexDirection: "column", gap: 10, marginTop: 4, fontSize: 14 }, children: [
@@ -9453,14 +9580,17 @@ function BookingDialog({
           /* @__PURE__ */ jsx6(Field, { t, label: "Your name", value: name, onChange: setName, autoComplete: "name" }),
           /* @__PURE__ */ jsx6(Field, { t, label: "Email", value: email, onChange: setEmail, type: "email", autoComplete: "email" }),
           /* @__PURE__ */ jsx6(
-            Field,
+            PhoneField,
             {
               t,
-              label: "Mobile number",
-              value: phone,
-              onChange: setPhone,
-              type: "tel",
-              autoComplete: "tel",
+              dial,
+              national: phone,
+              onChange: (nextDial, national) => {
+                setDial(nextDial);
+                setPhone(national);
+              },
+              onBlur: () => setPhoneTouched(true),
+              error: phoneTouched ? phoneError : null,
               hint: requireOtp ? "We send a code here to confirm, then a reminder before the call." : "We send a reminder here before the call."
             }
           ),
@@ -9748,6 +9878,64 @@ function Field({
     hint && /* @__PURE__ */ jsx6("div", { style: { marginTop: 6, fontSize: 12, fontWeight: 400, color: t.muted }, children: hint })
   ] });
 }
+function PhoneField({
+  t,
+  dial,
+  national,
+  onChange,
+  onBlur,
+  error,
+  hint
+}) {
+  const box = {
+    boxSizing: "border-box",
+    padding: "9px 12px",
+    background: t.input,
+    color: t.text,
+    border: `1px solid ${error ? t.danger : t.border}`,
+    borderRadius: 8,
+    fontFamily: "inherit",
+    fontSize: 14,
+    outline: "none"
+  };
+  return /* @__PURE__ */ jsxs6("label", { style: { display: "block", fontSize: 13, fontWeight: 500, color: t.text }, children: [
+    "Mobile number",
+    /* @__PURE__ */ jsxs6("div", { style: { display: "flex", gap: 8, marginTop: 6 }, children: [
+      /* @__PURE__ */ jsx6(
+        "select",
+        {
+          "aria-label": "Country code",
+          value: dial,
+          onChange: (e) => onChange(e.target.value, national),
+          style: { ...box, flex: "0 0 auto", paddingRight: 8, cursor: "pointer" },
+          children: COUNTRIES.map((c) => /* @__PURE__ */ jsxs6("option", { value: c.dial, children: [
+            c.iso,
+            " +",
+            c.dial
+          ] }, c.iso))
+        }
+      ),
+      /* @__PURE__ */ jsx6(
+        "input",
+        {
+          type: "tel",
+          autoComplete: "tel",
+          inputMode: "numeric",
+          placeholder: dial === "91" ? "98765 43210" : "Mobile number",
+          value: national,
+          "aria-invalid": Boolean(error),
+          onChange: (e) => {
+            const next = splitTypedPhone(e.target.value, dial);
+            onChange(next.dial, next.national);
+          },
+          onBlur,
+          style: { ...box, flex: "1 1 auto", minWidth: 0, width: "100%" }
+        }
+      )
+    ] }),
+    error ? /* @__PURE__ */ jsx6("div", { role: "alert", style: { marginTop: 6, fontSize: 12, fontWeight: 500, color: t.danger }, children: error }) : /* @__PURE__ */ jsx6("div", { style: { marginTop: 6, fontSize: 12, fontWeight: 400, color: t.muted }, children: hint })
+  ] });
+}
 
 // src/rejection.ts
 var DETAILS_MAX_LENGTH = 1e3;
@@ -10252,21 +10440,27 @@ function GlitchgrabProviderInner({
     () => ({ userId: signedUserId != null ? signedUserId : null, signature }),
     [signedUserId, signature]
   );
+  const enhanceForDialog = useCallback3(
+    async (text, screenshot) => {
+      const ctx = captureContext(visitedPagesRef.current);
+      const context = {
+        url: ctx.url,
+        visitedPages: ctx.visitedPages.slice(-5),
+        breadcrumbs: ctx.breadcrumbs.slice(-10).map((b) => ({ type: b.type, message: b.message }))
+      };
+      return await enhanceTextOrThrow(text, token, baseUrl, screenshot, context, identity);
+    },
+    [token, baseUrl, identity]
+  );
   const enhance = useCallback3(
     async (text, screenshot) => {
       try {
-        const ctx = captureContext(visitedPagesRef.current);
-        const context = {
-          url: ctx.url,
-          visitedPages: ctx.visitedPages.slice(-5),
-          breadcrumbs: ctx.breadcrumbs.slice(-10).map((b) => ({ type: b.type, message: b.message }))
-        };
-        return await enhanceText(text, token, baseUrl, screenshot, context, identity);
+        return await enhanceForDialog(text, screenshot);
       } catch (e) {
         return text;
       }
     },
-    [token, baseUrl, identity]
+    [enhanceForDialog]
   );
   const assist = useCallback3(
     async (params) => {
@@ -10332,8 +10526,18 @@ function GlitchgrabProviderInner({
   const [signedUsers, setSignedUsers] = useState6("OFF");
   const aiBlockedUnsigned = signedUsers === "ENFORCE" && !signature;
   const [booking, setBooking] = useState6("closed");
-  const openBookingDialog = useCallback3(() => setBooking("live"), []);
-  const openBookingPreview = useCallback3(() => setBooking("preview"), []);
+  const [bookingOptions, setBookingOptions] = useState6({});
+  const openBookingDialog = useCallback3((options) => {
+    setBookingOptions({
+      intro: typeof (options == null ? void 0 : options.intro) === "string" ? options.intro : void 0,
+      onBooked: typeof (options == null ? void 0 : options.onBooked) === "function" ? options.onBooked : void 0
+    });
+    setBooking("live");
+  }, []);
+  const openBookingPreview = useCallback3(() => {
+    setBookingOptions({});
+    setBooking("preview");
+  }, []);
   useEffect6(() => {
     let cancelled = false;
     fetch(`${baseUrl}/api/v1/sdk/project`, {
@@ -10432,6 +10636,8 @@ function GlitchgrabProviderInner({
             baseUrl: baseUrl != null ? baseUrl : DEFAULT_BASE_URL2,
             open: booking !== "closed",
             preview: booking === "preview",
+            intro: bookingOptions.intro,
+            onBooked: bookingOptions.onBooked,
             onClose: () => setBooking("closed")
           }
         ),
@@ -10440,7 +10646,7 @@ function GlitchgrabProviderInner({
           {
             report,
             sendFeedback: feedback,
-            enhanceText: aiAssist && !aiBlockedUnsigned ? enhance : void 0,
+            enhanceText: aiAssist && !aiBlockedUnsigned ? enhanceForDialog : void 0,
             assist: aiAssist && !aiBlockedUnsigned ? assist : void 0,
             findSimilarIssues: aiAssist && !aiBlockedUnsigned ? findSimilar : void 0,
             readFile: aiAssist && !aiBlockedUnsigned ? readFile : void 0,
@@ -10573,12 +10779,13 @@ function BookDemoButton({
   children
 }) {
   const { openBookingDialog } = useGlitchgrab();
-  if (children) return /* @__PURE__ */ jsx9(Fragment8, { children: children({ onClick: openBookingDialog }) });
+  const open = () => openBookingDialog();
+  if (children) return /* @__PURE__ */ jsx9(Fragment8, { children: children({ onClick: open }) });
   return /* @__PURE__ */ jsx9(
     "button",
     {
       type: "button",
-      onClick: openBookingDialog,
+      onClick: open,
       className,
       style: className ? void 0 : {
         padding: "10px 18px",
@@ -10785,6 +10992,87 @@ function useGlitchgrabActions({
     error
   };
 }
+async function fetchGlitchgrabReportThread({
+  token,
+  reportId
+}) {
+  var _a, _b, _c;
+  const res = await fetch(`${BASE_URL}/api/v1/sdk/reports/${encodeURIComponent(reportId)}`, {
+    headers: { Authorization: `Bearer ${token}` }
+  });
+  const data = await res.json().catch(() => ({}));
+  if (!res.ok || !data.success) throw new Error((_a = data.error) != null ? _a : "Failed to fetch report");
+  return { ...data.data, comments: (_c = (_b = data.data) == null ? void 0 : _b.comments) != null ? _c : [] };
+}
+async function postGlitchgrabReportComment({
+  token,
+  reportId,
+  message,
+  reporterName,
+  reporterEmail
+}) {
+  var _a;
+  const res = await fetch(`${BASE_URL}/api/v1/sdk/reports/${encodeURIComponent(reportId)}/comments`, {
+    method: "POST",
+    headers: { Authorization: `Bearer ${token}`, "Content-Type": "application/json" },
+    body: JSON.stringify({ message, reporterName, reporterEmail })
+  });
+  const data = await res.json().catch(() => ({}));
+  if (!res.ok || !data.success) throw new Error((_a = data.error) != null ? _a : "Failed to post comment");
+  return data.data;
+}
+function useGlitchgrabReportThread({
+  token,
+  reportId,
+  reporterName,
+  reporterEmail
+}) {
+  var _a;
+  const [report, setReport] = useState8(null);
+  const [isLoading, setIsLoading] = useState8(!!reportId);
+  const [isFetching, setIsFetching] = useState8(false);
+  const [isPosting, setIsPosting] = useState8(false);
+  const [error, setError] = useState8(null);
+  const refetch = useCallback4(async () => {
+    if (!token || !reportId) {
+      setReport(null);
+      setIsLoading(false);
+      return;
+    }
+    setIsFetching(true);
+    setError(null);
+    try {
+      setReport(await fetchGlitchgrabReportThread({ token, reportId }));
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Network error");
+    } finally {
+      setIsLoading(false);
+      setIsFetching(false);
+    }
+  }, [token, reportId]);
+  useEffect7(() => {
+    refetch();
+  }, [refetch]);
+  const addComment = useCallback4(
+    async (message) => {
+      if (!token || !reportId || !message.trim()) return false;
+      setIsPosting(true);
+      setError(null);
+      try {
+        await postGlitchgrabReportComment({ token, reportId, message: message.trim(), reporterName, reporterEmail });
+        await refetch();
+        return true;
+      } catch (e) {
+        setError(e instanceof Error ? e.message : "Failed to post comment");
+        return false;
+      } finally {
+        setIsPosting(false);
+      }
+    },
+    [token, reportId, reporterName, reporterEmail, refetch]
+  );
+  return { report, comments: (_a = report == null ? void 0 : report.comments) != null ? _a : [], isLoading, isFetching, isPosting, error, refetch, addComment };
+}
 
 // src/use-feedback.ts
 import { useState as useState9, useEffect as useEffect8, useCallback as useCallback5 } from "react";
@@ -10865,12 +11153,14 @@ export {
   computeSignature,
   enhanceText,
   fetchGlitchgrabFeedback,
+  fetchGlitchgrabReportThread,
   fetchGlitchgrabReports,
   getAppContext,
   getBreadcrumbs,
   getShortcutLabel2 as getShortcutLabel,
   initBreadcrumbs,
   matchesShortcut,
+  postGlitchgrabReportComment,
   sanitizeUrl,
   sendFeedback,
   sendLead,
@@ -10881,6 +11171,7 @@ export {
   useGlitchgrab,
   useGlitchgrabActions,
   useGlitchgrabFeedback,
+  useGlitchgrabReportThread,
   useGlitchgrabReports
 };
 //# sourceMappingURL=index.mjs.map