glitchgrab 1.40.0 → 1.41.0

package/dist/index.mjs

@@ -1259,6 +1259,7 @@ function AssistSheet({
   assist,
   theme: t2,
   screenshots,
+  pageShot = null,
   onAddImages,
   attachmentCount,
   context,
@@ -1304,6 +1305,34 @@ function AssistSheet({
   const inputRef = useRef2(null);
   const draftRef = useRef2(null);
   const seededRef = useRef2(false);
+  const eventsRef = useRef2([]);
+  const aiDraftRef = useRef2(null);
+  function logEvent(type, detail) {
+    eventsRef.current.push({ type, at: Date.now(), ...detail ? { detail } : {} });
+  }
+  function takeEvents() {
+    if (eventsRef.current.length === 0) return void 0;
+    const events = eventsRef.current;
+    eventsRef.current = [];
+    return events;
+  }
+  function flushEvents() {
+    if (!conversationId) return;
+    const events = takeEvents();
+    if (!events) return;
+    try {
+      void Promise.resolve(
+        assist({ messages: [], conversationId, events, screenshots: [], context: null })
+      ).catch(() => {
+      });
+    } catch (e) {
+    }
+  }
+  function leave(type, detail) {
+    logEvent(type, detail);
+    flushEvents();
+    onClose();
+  }
   useEffect2(() => {
     const el = scrollRef.current;
     if (el) el.scrollTop = el.scrollHeight;
@@ -1312,27 +1341,45 @@ function AssistSheet({
     var _a;
     if (phase === "draft") (_a = draftRef.current) == null ? void 0 : _a.focus();
   }, [phase]);
+  function degradeKeepingEvents(events, message) {
+    if (events) eventsRef.current = [...events, ...eventsRef.current];
+    flushEvents();
+    onDegrade(message);
+  }
   async function runTurn(history2) {
     var _a, _b, _c, _d, _e;
     setBusy(true);
     let result;
+    const events = takeEvents();
     try {
       const sent = screenshots.slice(-MAX_ASSIST_IMAGES);
       result = await assist({
-        messages: history2,
+        // `kind` only on drafts, so an older server sees the exact shape it
+        // always did — it just learns the draft text now instead of a
+        // placeholder line.
+        messages: history2.map(
+          (m) => m.kind ? { role: m.role, content: m.content, kind: m.kind } : m
+        ),
         conversationId,
         screenshots: sent,
         screenshot: (_a = sent[sent.length - 1]) != null ? _a : null,
-        context
+        context: {
+          ...context != null ? context : {},
+          imageSources: sent.map((shot) => pageShot && shot === pageShot ? "page" : "attached")
+        },
+        events
       });
     } catch (e) {
-      onDegrade("The assistant is unavailable \u2014 write your report below and send it as normal.");
+      degradeKeepingEvents(
+        events,
+        "The assistant is unavailable \u2014 write your report below and send it as normal."
+      );
       return;
     } finally {
       setBusy(false);
     }
     if (result.degraded) {
-      onDegrade(result.degraded);
+      degradeKeepingEvents(events, result.degraded);
       return;
     }
     if (result.conversationId) {
@@ -1349,7 +1396,9 @@ function AssistSheet({
     }
     if (result.report) {
       onDescriptionChange(result.report);
-      setMessages([...history2, { role: "assistant", content: "Here's your report \u2014 have a read." }]);
+      aiDraftRef.current = result.report;
+      logEvent("draft_shown");
+      setMessages([...history2, { role: "assistant", content: result.report, kind: "report" }]);
       setOptions([]);
       setPhase("draft");
       return;
@@ -1384,6 +1433,36 @@ function AssistSheet({
     onPickType(tile);
     setPhase(tile === "RATING" ? "rating" : "chat");
   }
+  function keepChatting() {
+    const current = description.trim();
+    logEvent(
+      "keep_chatting",
+      aiDraftRef.current && current !== aiDraftRef.current.trim() ? "after editing" : void 0
+    );
+    setMessages((prev) => {
+      const next = [...prev];
+      for (let i = next.length - 1; i >= 0; i--) {
+        if (next[i].kind === "report") {
+          if (current) next[i] = { ...next[i], content: current };
+          break;
+        }
+      }
+      return next;
+    });
+    setPhase("chat");
+    requestAnimationFrame(() => {
+      var _a;
+      return (_a = inputRef.current) == null ? void 0 : _a.focus();
+    });
+  }
+  function sendDraft() {
+    const edited = aiDraftRef.current !== null && description.trim() !== aiDraftRef.current.trim();
+    logEvent("draft_sent", edited ? "edited" : "as drafted");
+    flushEvents();
+    onSend();
+  }
+  const lastMessage = messages[messages.length - 1];
+  const correcting = phase === "chat" && (lastMessage == null ? void 0 : lastMessage.kind) === "report";
   const empty = phase === "chat" && messages.length === 0 && !busy;
   const initials = (reporterName != null ? reporterName : "").split(/\s+/).filter(Boolean).slice(0, 2).map((w) => {
     var _a, _b;
@@ -1429,7 +1508,7 @@ function AssistSheet({
             animation: "gg-sheet-fade .18s ease",
             fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'
           },
-          onClick: onClose,
+          onClick: () => leave("closed"),
           onPointerDown: (e) => e.stopPropagation(),
           children: /* @__PURE__ */ jsxs2(
             "div",
@@ -1509,7 +1588,7 @@ function AssistSheet({
                         {
                           type: "button",
                           "data-gg-write-myself": "",
-                          onClick: onClose,
+                          onClick: () => leave("write_myself", `header, ${phase}`),
                           "aria-label": "Write it myself instead",
                           style: {
                             flexShrink: 0,
@@ -1765,7 +1844,10 @@ function AssistSheet({
                                   {
                                     type: "button",
                                     "data-gg-chip": "",
-                                    onClick: () => send(s),
+                                    onClick: () => {
+                                      logEvent("starter_tap", s);
+                                      send(s);
+                                    },
                                     style: {
                                       border: `1px solid ${t2.inputBorder}`,
                                       background: "transparent",
@@ -1785,6 +1867,60 @@ function AssistSheet({
                           ] }),
                           messages.map((m, i) => {
                             const mine = m.role === "user";
+                            if (m.kind === "report") {
+                              const live = phase === "draft" && i === messages.length - 1;
+                              return /* @__PURE__ */ jsxs2("div", { style: { display: "flex", gap: "8px", minWidth: 0 }, children: [
+                                /* @__PURE__ */ jsx2(Avatar, { who: "assistant", theme: t2 }),
+                                /* @__PURE__ */ jsx2(
+                                  "div",
+                                  {
+                                    "data-gg-draft-bubble": "",
+                                    style: {
+                                      maxWidth: "82%",
+                                      minWidth: 0,
+                                      padding: "9px 12px",
+                                      borderRadius: "12px 12px 12px 4px",
+                                      fontSize: "13px",
+                                      lineHeight: 1.55,
+                                      backgroundColor: t2.bgSecondary,
+                                      color: t2.text,
+                                      border: live ? "none" : `1px solid ${t2.accent}66`
+                                    },
+                                    children: live ? "Here's your report \u2014 have a read." : /* @__PURE__ */ jsxs2(Fragment, { children: [
+                                      /* @__PURE__ */ jsx2(
+                                        "span",
+                                        {
+                                          style: {
+                                            display: "block",
+                                            fontSize: "10px",
+                                            fontWeight: 700,
+                                            letterSpacing: ".06em",
+                                            textTransform: "uppercase",
+                                            color: t2.accent,
+                                            marginBottom: "4px"
+                                          },
+                                          children: "Draft so far"
+                                        }
+                                      ),
+                                      /* @__PURE__ */ jsx2(
+                                        "span",
+                                        {
+                                          style: {
+                                            display: "block",
+                                            whiteSpace: "pre-wrap",
+                                            wordBreak: "break-word",
+                                            maxHeight: "160px",
+                                            overflowY: "auto",
+                                            color: t2.textMuted
+                                          },
+                                          children: m.content
+                                        }
+                                      )
+                                    ] })
+                                  }
+                                )
+                              ] }, i);
+                            }
                             return /* @__PURE__ */ jsxs2(
                               "div",
                               {
@@ -1839,7 +1975,10 @@ function AssistSheet({
                                   type: "button",
                                   "data-gg-chip": "",
                                   "data-gg-option": "",
-                                  onClick: () => send(option),
+                                  onClick: () => {
+                                    logEvent("option_tap", option);
+                                    send(option);
+                                  },
                                   style: {
                                     border: `1px solid ${t2.inputBorder}`,
                                     background: "transparent",
@@ -2041,7 +2180,7 @@ function AssistSheet({
                                   "button",
                                   {
                                     type: "button",
-                                    onClick: () => setPhase("chat"),
+                                    onClick: keepChatting,
                                     style: {
                                       alignSelf: "flex-start",
                                       border: "none",
@@ -2176,7 +2315,7 @@ function AssistSheet({
                           {
                             type: "button",
                             "data-gg-sheet-send": "",
-                            onClick: onSend,
+                            onClick: sendDraft,
                             disabled: isSubmitting || !description.trim(),
                             style: {
                               width: "100%",
@@ -2254,7 +2393,10 @@ function AssistSheet({
                                         onChange: (e) => {
                                           var _a;
                                           const files = Array.from((_a = e.target.files) != null ? _a : []);
-                                          if (files.length) onAddImages(files);
+                                          if (files.length) {
+                                            logEvent("image_added", String(files.length));
+                                            onAddImages(files);
+                                          }
                                           e.target.value = "";
                                         },
                                         style: { display: "none" }
@@ -2284,7 +2426,7 @@ function AssistSheet({
                                   send(input);
                                 }
                               },
-                              placeholder: "Type your answer\u2026",
+                              placeholder: correcting ? "What should change in the draft?" : "Type your answer\u2026",
                               rows: 1,
                               disabled: busy,
                               autoFocus: true,
@@ -2344,7 +2486,7 @@ function AssistSheet({
                         {
                           type: "button",
                           "data-gg-write-myself": "",
-                          onClick: onClose,
+                          onClick: () => leave("write_myself", "footer"),
                           style: {
                             display: "block",
                             margin: "8px auto 0",
@@ -2416,6 +2558,107 @@ var ATTACHMENT_ACCEPT = [
   ".xlsx",
   ".zip"
 ].join(",");
+var MAX_SCALE = 2;
+var FRAME_TIMEOUT_MS = 3e3;
+function canCaptureTabPixels() {
+  var _a;
+  try {
+    return typeof navigator !== "undefined" && typeof ((_a = navigator.mediaDevices) == null ? void 0 : _a.getDisplayMedia) === "function" && typeof globalThis.CaptureController !== "undefined";
+  } catch (e) {
+    return false;
+  }
+}
+var HAVE_CURRENT_DATA = 2;
+function waitForFrame(video) {
+  if (video.readyState >= HAVE_CURRENT_DATA && video.videoWidth > 0) {
+    return Promise.resolve(true);
+  }
+  return new Promise((resolve) => {
+    const timer = setTimeout(() => resolve(false), FRAME_TIMEOUT_MS);
+    const done = () => {
+      clearTimeout(timer);
+      resolve(true);
+    };
+    if (typeof video.requestVideoFrameCallback === "function") {
+      video.requestVideoFrameCallback(done);
+    } else if (video.readyState >= 2) {
+      done();
+    } else {
+      video.addEventListener("loadeddata", done, { once: true });
+    }
+  });
+}
+async function grabFrame(stream) {
+  const video = document.createElement("video");
+  video.muted = true;
+  video.playsInline = true;
+  video.srcObject = stream;
+  try {
+    await video.play();
+    if (!await waitForFrame(video)) return null;
+    if (!video.videoWidth || !video.videoHeight) return null;
+    const maxWidth = Math.max(1, window.innerWidth) * MAX_SCALE;
+    const factor = Math.min(1, maxWidth / video.videoWidth);
+    const canvas = document.createElement("canvas");
+    canvas.width = Math.round(video.videoWidth * factor);
+    canvas.height = Math.round(video.videoHeight * factor);
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return null;
+    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+    return canvas;
+  } finally {
+    video.srcObject = null;
+  }
+}
+async function captureViaTabPixels() {
+  var _a, _b;
+  if (!canCaptureTabPixels()) return null;
+  let stream = null;
+  try {
+    const options = {
+      video: { displaySurface: "browser" },
+      audio: false,
+      preferCurrentTab: true,
+      selfBrowserSurface: "include",
+      surfaceSwitching: "exclude",
+      monitorTypeSurfaces: "exclude"
+    };
+    stream = await navigator.mediaDevices.getDisplayMedia(options);
+    const surface = (_b = (_a = stream.getVideoTracks()[0]) == null ? void 0 : _a.getSettings()) == null ? void 0 : _b.displaySurface;
+    if (surface && surface !== "browser") return null;
+    const canvas = await grabFrame(stream);
+    return canvas ? encodeScreenshot(canvas) : null;
+  } catch (e) {
+    return null;
+  } finally {
+    stream == null ? void 0 : stream.getTracks().forEach((track) => track.stop());
+  }
+}
+async function captureViaHtml2Canvas() {
+  try {
+    const { default: html2canvas } = await import("html2canvas-pro");
+    const scale = Math.min(Math.max(window.devicePixelRatio || 1, 1), MAX_SCALE);
+    const canvas = await html2canvas(document.body, {
+      scale,
+      logging: false,
+      useCORS: true,
+      allowTaint: true,
+      x: window.scrollX,
+      y: window.scrollY,
+      width: window.innerWidth,
+      height: window.innerHeight,
+      windowWidth: window.innerWidth,
+      windowHeight: window.innerHeight
+    });
+    return encodeScreenshot(canvas);
+  } catch (e) {
+    return null;
+  }
+}
+async function captureDefaultScreenshot() {
+  var _a;
+  return (_a = await captureViaTabPixels()) != null ? _a : await captureViaHtml2Canvas();
+}
 var SEVERITY_REQUIRED = "Pick how bad it is before sending.";
 function useIsDark() {
   if (typeof window === "undefined") return true;
@@ -2690,27 +2933,6 @@ function isLowQualityText(text) {
   }
   return null;
 }
-async function captureViaHtml2Canvas() {
-  try {
-    const { default: html2canvas } = await import("html2canvas-pro");
-    const scale = Math.min(Math.max(window.devicePixelRatio || 1, 1), 2);
-    const canvas = await html2canvas(document.body, {
-      scale,
-      logging: false,
-      useCORS: true,
-      allowTaint: true,
-      x: window.scrollX,
-      y: window.scrollY,
-      width: window.innerWidth,
-      height: window.innerHeight,
-      windowWidth: window.innerWidth,
-      windowHeight: window.innerHeight
-    });
-    return encodeScreenshot(canvas);
-  } catch (e) {
-    return null;
-  }
-}
 var MIC_MESSAGES = {
   blocked: "Microphone is blocked for this site. Allow it in your browser's site settings, then reload this page. You can type your report instead.",
   notFound: "No microphone found. Connect one and try again, or type your report instead.",
@@ -2748,7 +2970,7 @@ function ReportDialog({
   transcribeAudio: transcribeAudio2,
   types,
   showSeverity = true,
-  captureScreenshot = captureViaHtml2Canvas,
+  captureScreenshot = captureDefaultScreenshot,
   reporter,
   onClose,
   headerSlot
@@ -2778,6 +3000,7 @@ function ReportDialog({
   const [isSubmitting, setIsSubmitting] = useState3(false);
   const [submitted, setSubmitted] = useState3(false);
   const [screenshots, setScreenshots] = useState3([]);
+  const [pageShot, setPageShot] = useState3(null);
   const [attachments, setAttachments] = useState3([]);
   const [previewIndex, setPreviewIndex] = useState3(null);
   const [annotatingIndex, setAnnotatingIndex] = useState3(null);
@@ -2943,6 +3166,7 @@ function ReportDialog({
       setStep(2);
     }
     const shot = await captureScreenshot();
+    setPageShot(shot != null ? shot : null);
     if (shot) setScreenshots([shot]);
     if (assist && !assistUsed) setAssistOpen(true);
     setIsOpen(true);
@@ -5140,6 +5364,7 @@ function ReportDialog({
           imageSrc: screenshots[annotatingIndex],
           onCancel: () => setAnnotatingIndex(null),
           onSave: (dataUrl) => {
+            if (screenshots[annotatingIndex] === pageShot) setPageShot(dataUrl);
             setScreenshots(
               (prev) => prev.map((s, i) => i === annotatingIndex ? dataUrl : s)
             );
@@ -5165,6 +5390,7 @@ function ReportDialog({
           accentText: t2.accentText
         },
         screenshots,
+        pageShot,
         onAddImages: addFiles,
         attachmentCount: screenshots.length + attachments.length,
         context: { ...assistContext != null ? assistContext : {}, reportType },