@mhosaic/feedback 0.12.2 → 0.14.0

package/dist/{chunk-TBT2OODO.mjs → chunk-A4MBOFRR.mjs}

@@ -43,6 +43,13 @@ function createApiClient(options) {
     if (payload.synthetic) {
       headers["X-Mhosaic-Capture-Source"] = "error-tracking";
     }
+    const signed = options.getSignedIdentity?.();
+    if (signed && signed.userHash && signed.exp && payload.user?.id) {
+      headers["X-Mhosaic-User"] = String(payload.user.id);
+      headers["X-Mhosaic-User-Hmac"] = signed.userHash;
+      headers["X-Mhosaic-User-Exp"] = String(signed.exp);
+      if (signed.email) headers["X-Mhosaic-User-Email"] = signed.email;
+    }
     const response = await fetcher(`${endpoint}/api/feedback/v1/reports/`, {
       method: "POST",
       headers,
@@ -55,10 +62,17 @@ function createApiClient(options) {
     return response.json();
   }
   function widgetHeaders(externalId) {
-    return {
+    const headers = {
       Authorization: `Bearer ${options.apiKey}`,
       "X-Mhosaic-User": externalId
     };
+    const signed = options.getSignedIdentity?.();
+    if (signed && signed.userHash && signed.exp) {
+      headers["X-Mhosaic-User-Hmac"] = signed.userHash;
+      headers["X-Mhosaic-User-Exp"] = String(signed.exp);
+      if (signed.email) headers["X-Mhosaic-User-Email"] = signed.email;
+    }
+    return headers;
   }
   async function listMine(externalId) {
     const response = await fetcher(`${endpoint}/api/feedback/v1/reports/widget/mine/`, {
@@ -537,10 +551,6 @@ var DEFAULT_STRINGS = {
   "form.screenshot.annotate": "Annotate",
   "form.screenshot.error_type": "Unsupported file type. Use PNG, JPEG or WebP.",
   "form.screenshot.error_size": "File too large (max {max} MB).",
-  "form.screenshot.or": "or",
-  "form.screenshot.capture_page": "Capture this page",
-  "form.screenshot.capture_page_hint": "Pick a tab or window to share",
-  "form.screenshot.capture_error": "Couldn\u2019t capture the page. Try uploading a screenshot instead.",
   "form.context.label": "Page",
   "type.bug": "Bug",
   "type.feature": "Feature request",
@@ -674,10 +684,6 @@ var FRENCH_STRINGS = {
   "form.screenshot.annotate": "Annoter",
   "form.screenshot.error_type": "Format non support\xE9. Utilisez PNG, JPEG ou WebP.",
   "form.screenshot.error_size": "Fichier trop volumineux (max {max} Mo).",
-  "form.screenshot.or": "ou",
-  "form.screenshot.capture_page": "Capturer la page",
-  "form.screenshot.capture_page_hint": "Choisissez un onglet ou une fen\xEAtre \xE0 partager",
-  "form.screenshot.capture_error": "Impossible de capturer la page. T\xE9l\xE9versez une capture \xE0 la place.",
   "form.context.label": "Page",
   "type.bug": "Bogue",
   "type.feature": "Suggestion",
@@ -866,65 +872,6 @@ function truncateUrl(url, maxLength = 80) {
   const keepEnd = maxLength - 1 - keepStart;
   return `${url.slice(0, keepStart)}\u2026${url.slice(url.length - keepEnd)}`;
 }
-async function captureWithDisplayMedia() {
-  if (typeof navigator === "undefined" || !navigator.mediaDevices?.getDisplayMedia) {
-    return null;
-  }
-  let stream = null;
-  try {
-    stream = await navigator.mediaDevices.getDisplayMedia({
-      video: { displaySurface: "browser" },
-      audio: false
-      // Hint that audio isn't needed; not all browsers honor this but it
-      // avoids the audio-share toggle being defaulted on in some.
-    });
-  } catch {
-    return null;
-  }
-  try {
-    const track = stream.getVideoTracks()[0];
-    if (!track) return null;
-    const ImageCaptureCtor = window.ImageCapture;
-    let bitmap = null;
-    if (ImageCaptureCtor) {
-      try {
-        const ic = new ImageCaptureCtor(track);
-        bitmap = await ic.grabFrame();
-      } catch {
-        bitmap = null;
-      }
-    }
-    if (!bitmap) {
-      bitmap = await grabFrameViaVideo(stream);
-    }
-    if (!bitmap) return null;
-    const canvas = document.createElement("canvas");
-    canvas.width = bitmap.width;
-    canvas.height = bitmap.height;
-    const ctx = canvas.getContext("2d");
-    if (!ctx) return null;
-    ctx.drawImage(bitmap, 0, 0);
-    return await new Promise(
-      (resolve) => canvas.toBlob(resolve, "image/png")
-    );
-  } finally {
-    stream.getTracks().forEach((t) => t.stop());
-  }
-}
-async function grabFrameViaVideo(stream) {
-  const video = document.createElement("video");
-  video.muted = true;
-  video.playsInline = true;
-  video.srcObject = stream;
-  try {
-    await video.play();
-    await new Promise((r) => requestAnimationFrame(() => r()));
-    if (!video.videoWidth || !video.videoHeight) return null;
-    return await createImageBitmap(video);
-  } catch {
-    return null;
-  }
-}
 
 // src/widget/ReportDetailView.tsx
 import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "preact/jsx-runtime";
@@ -2333,10 +2280,8 @@ function Form({ strings, onSubmit, onCancel, status, errorMessage }) {
   const [localError, setLocalError] = useState5("");
   const [screenshotBlob, setScreenshotBlob] = useState5(null);
   const [screenshotPreview, setScreenshotPreview] = useState5(null);
-  const [screenshotMethod, setScreenshotMethod] = useState5("manual");
   const [isDragOver, setIsDragOver] = useState5(false);
   const [annotatorOpen, setAnnotatorOpen] = useState5(false);
-  const [capturing, setCapturing] = useState5(false);
   const fileInputRef = useRef4(null);
   const dropZoneRef = useRef4(null);
   const submitting = status === "submitting";
@@ -2347,7 +2292,7 @@ function Form({ strings, onSubmit, onCancel, status, errorMessage }) {
       if (screenshotPreview) URL.revokeObjectURL(screenshotPreview);
     };
   }, [screenshotPreview]);
-  const acceptFile = (file, method = "manual") => {
+  const acceptFile = (file) => {
     setLocalError("");
     if (file instanceof File) {
       const err = validateScreenshotFile(file);
@@ -2361,41 +2306,14 @@ function Form({ strings, onSubmit, onCancel, status, errorMessage }) {
     if (screenshotPreview) URL.revokeObjectURL(screenshotPreview);
     setScreenshotBlob(file);
     setScreenshotPreview(URL.createObjectURL(file));
-    setScreenshotMethod(method);
   };
   const clearScreenshot = () => {
     if (screenshotPreview) URL.revokeObjectURL(screenshotPreview);
     setScreenshotPreview(null);
     setScreenshotBlob(null);
-    setScreenshotMethod("manual");
     setLocalError("");
     if (fileInputRef.current) fileInputRef.current.value = "";
   };
-  const handleCapturePage = async () => {
-    if (capturing) return;
-    setLocalError("");
-    setCapturing(true);
-    try {
-      const blob = await captureWithDisplayMedia();
-      if (!blob) {
-        if (typeof navigator === "undefined" || !navigator.mediaDevices?.getDisplayMedia) {
-          setLocalError(strings["form.screenshot.capture_error"]);
-        }
-        return;
-      }
-      if (blob.size > 10 * 1024 * 1024) {
-        setLocalError(
-          strings["form.screenshot.error_size"].replace("{max}", "10")
-        );
-        return;
-      }
-      acceptFile(blob, "display_media");
-    } catch {
-      setLocalError(strings["form.screenshot.capture_error"]);
-    } finally {
-      setCapturing(false);
-    }
-  };
   const handleFileInputChange = (e) => {
     const file = e.target.files?.[0];
     if (file) acceptFile(file);
@@ -2457,7 +2375,7 @@ function Form({ strings, onSubmit, onCancel, status, errorMessage }) {
     };
     if (screenshotBlob) {
       values.screenshot = screenshotBlob;
-      values.capture_method = screenshotMethod;
+      values.capture_method = "manual";
     }
     onSubmit(values);
   };
@@ -2570,43 +2488,7 @@ function Form({ strings, onSubmit, onCancel, status, errorMessage }) {
             /* @__PURE__ */ jsx8("div", { class: "screenshot-formats", children: strings["form.screenshot.formats"] })
           ]
         }
-      ),
-      !screenshotPreview && /* @__PURE__ */ jsxs7("div", { class: "screenshot-alt", children: [
-        /* @__PURE__ */ jsx8("span", { class: "screenshot-or", children: strings["form.screenshot.or"] }),
-        /* @__PURE__ */ jsxs7(
-          "button",
-          {
-            type: "button",
-            class: "btn btn--ghost screenshot-capture-page",
-            onClick: handleCapturePage,
-            disabled: capturing || submitting,
-            "aria-label": strings["form.screenshot.capture_page"],
-            children: [
-              /* @__PURE__ */ jsxs7(
-                "svg",
-                {
-                  width: "14",
-                  height: "14",
-                  viewBox: "0 0 24 24",
-                  fill: "none",
-                  stroke: "currentColor",
-                  "stroke-width": "2",
-                  "stroke-linecap": "round",
-                  "stroke-linejoin": "round",
-                  "aria-hidden": "true",
-                  children: [
-                    /* @__PURE__ */ jsx8("rect", { x: "2", y: "3", width: "20", height: "14", rx: "2", ry: "2" }),
-                    /* @__PURE__ */ jsx8("line", { x1: "8", y1: "21", x2: "16", y2: "21" }),
-                    /* @__PURE__ */ jsx8("line", { x1: "12", y1: "17", x2: "12", y2: "21" })
-                  ]
-                }
-              ),
-              capturing ? strings["form.submitting"] : strings["form.screenshot.capture_page"]
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx8("span", { class: "screenshot-capture-hint", children: strings["form.screenshot.capture_page_hint"] })
-      ] })
+      )
     ] }),
     pageUrl && /* @__PURE__ */ jsxs7("div", { class: "page-context", title: pageUrl, children: [
       /* @__PURE__ */ jsx8("span", { class: "page-context-label", children: strings["form.context.label"] }),
@@ -3247,40 +3129,6 @@ var WIDGET_STYLES = `
 .screenshot-cta strong { color: var(--mfb-accent); font-weight: 600; }
 .screenshot-formats { font-size: var(--mfb-text-xs); color: var(--mfb-text-muted); }
 
-/* "or \u2014 Capture this page" row sits below the dropzone. The thin "or"
- * separator borrows the pattern from auth forms so the second option
- * reads as an alternative, not a follow-up step. v0.12. */
-.screenshot-alt {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  margin-top: 8px;
-  flex-wrap: wrap;
-}
-.screenshot-or {
-  position: relative;
-  font-size: var(--mfb-text-xs);
-  color: var(--mfb-text-muted);
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  padding: 0 4px;
-}
-.screenshot-capture-page {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-}
-.screenshot-capture-page:disabled {
-  opacity: 0.55;
-  cursor: progress;
-}
-.screenshot-capture-hint {
-  font-size: var(--mfb-text-xs);
-  color: var(--mfb-text-muted);
-  flex: 1 1 100%;
-  margin-top: 4px;
-}
-
 .screenshot-preview {
   position: relative;
   border: 1px solid var(--mfb-border);
@@ -4516,6 +4364,7 @@ function mountWidget(options) {
   const mountPoint = document.createElement("div");
   shadow.appendChild(mountPoint);
   let currentState = { open: false, status: "idle", tab: "send" };
+  let postSubmitTimer = null;
   function rerender(state) {
     currentState = state;
     render(h(Root, { state }), mountPoint);
@@ -4531,8 +4380,10 @@ function mountWidget(options) {
       try {
         await options.onSubmit(values);
         rerender({ ...currentState, status: "success" });
-        setTimeout(
-          () => rerender({
+        if (postSubmitTimer !== null) clearTimeout(postSubmitTimer);
+        postSubmitTimer = setTimeout(() => {
+          postSubmitTimer = null;
+          rerender({
             ...currentState,
             open: false,
             status: "idle",
@@ -4540,9 +4391,8 @@ function mountWidget(options) {
             // they immediately see their just-filed report in the list
             // (and the conversation that's about to start).
             tab: options.api ? "mine" : "send"
-          }),
-          1200
-        );
+          });
+        }, 1200);
       } catch (err) {
         rerender({
           ...currentState,
@@ -4677,6 +4527,10 @@ function mountWidget(options) {
       rerender({ ...currentState, open: false, status: "idle" });
     },
     dispose() {
+      if (postSubmitTimer !== null) {
+        clearTimeout(postSubmitTimer);
+        postSubmitTimer = null;
+      }
       render(null, mountPoint);
       options.host.innerHTML = "";
     },
@@ -4697,14 +4551,26 @@ function createFeedback(config) {
   const capture = installCapture({
     ...config.sanitizeUrl !== void 0 && { sanitizeUrl: config.sanitizeUrl }
   });
+  let user = config.user;
+  let metadata = config.metadata ?? {};
   const api = createApiClient({
     apiKey: config.apiKey,
     endpoint: config.endpoint,
     ...config.fetchImpl !== void 0 && { fetch: config.fetchImpl },
-    ...config.beforeSend !== void 0 && { beforeSend: config.beforeSend }
+    ...config.beforeSend !== void 0 && { beforeSend: config.beforeSend },
+    // v0.13: the API client reads this on every request so a late
+    // `identify({userHash, exp, ...})` lights up signed headers
+    // immediately on subsequent calls. Returns null when the host
+    // hasn't supplied a signature (legacy unsigned path).
+    getSignedIdentity: () => {
+      if (!user || !user.userHash || !user.exp || !user.email) return null;
+      return {
+        userHash: user.userHash,
+        exp: user.exp,
+        email: user.email
+      };
+    }
   });
-  let user = config.user;
-  let metadata = config.metadata ?? {};
   const transformers = [];
   const host = document.createElement("div");
   host.className = "mhosaic-feedback";
@@ -4732,8 +4598,8 @@ function createFeedback(config) {
       capture_method: captureMethod,
       technical_context
     };
-    if ("0.12.2") {
-      payload.widget_version = "0.12.2";
+    if ("0.14.0") {
+      payload.widget_version = "0.14.0";
     }
     if (manualScreenshot) payload.screenshot = manualScreenshot;
     if (values.synthetic) payload.synthetic = true;
@@ -4819,4 +4685,4 @@ function createFeedback(config) {
 export {
   createFeedback
 };
-//# sourceMappingURL=chunk-TBT2OODO.mjs.map
+//# sourceMappingURL=chunk-A4MBOFRR.mjs.map