@jarve/bug-reporter 0.1.0

package/dist/index.js

@@ -0,0 +1,943 @@
+'use client';
+"use strict";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  JarveBugReporter: () => JarveBugReporter
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/bug-reporter.tsx
+var import_react3 = require("react");
+
+// src/floating-button.tsx
+var import_lucide_react = require("lucide-react");
+
+// src/cn.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+function cn(...inputs) {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+}
+
+// src/floating-button.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function FloatingButton({ isActive, onClick }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "button",
+    {
+      onClick,
+      className: cn(
+        "fixed bottom-6 right-6 z-[9999] flex h-12 w-12 items-center justify-center rounded-full shadow-lg transition-all duration-200",
+        "hover:scale-110 focus:outline-none focus:ring-2 focus:ring-offset-2",
+        isActive ? "bg-red-500 text-white animate-pulse focus:ring-red-400" : "bg-indigo-600 text-white hover:bg-indigo-700 focus:ring-indigo-400",
+        "bottom-4 right-4 h-10 w-10 md:bottom-6 md:right-6 md:h-12 md:w-12"
+      ),
+      title: isActive ? "Cancel bug capture" : "Report a bug",
+      "aria-label": isActive ? "Cancel bug capture" : "Report a bug",
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Bug, { className: "h-4 w-4 md:h-5 md:w-5" })
+    }
+  );
+}
+
+// src/capture-overlay.tsx
+var import_react = require("react");
+var import_html_to_image = require("html-to-image");
+
+// src/utils.ts
+var import_ua_parser_js = require("ua-parser-js");
+function getNearestSection(element) {
+  let current = element;
+  while (current && current !== document.body) {
+    if (current.id || current.dataset.section || current.tagName === "SECTION" || current.tagName === "MAIN" || current.tagName === "ARTICLE" || current.tagName === "NAV" || current.tagName === "HEADER" || current.tagName === "FOOTER" || current.role === "main" || current.role === "navigation") {
+      return current;
+    }
+    current = current.parentElement;
+  }
+  return document.querySelector("main") || document.body;
+}
+function getSectionId(element) {
+  var _a;
+  if (element.id) return `#${element.id}`;
+  if (element.dataset.section) return element.dataset.section;
+  if (element.tagName === "MAIN") return "main";
+  if (element.tagName === "SECTION") {
+    const heading = element.querySelector("h1, h2, h3");
+    if (heading) return ((_a = heading.textContent) == null ? void 0 : _a.trim().slice(0, 60)) || null;
+  }
+  return element.tagName.toLowerCase();
+}
+function getDeviceType() {
+  const width = window.innerWidth;
+  const hasTouch = "ontouchstart" in window || navigator.maxTouchPoints > 0;
+  if (width <= 768 && hasTouch) return "mobile";
+  if (width <= 1024 && hasTouch) return "tablet";
+  return "desktop";
+}
+function parseUserAgent() {
+  const parser = new import_ua_parser_js.UAParser(navigator.userAgent);
+  const browser = parser.getBrowser();
+  const osInfo = parser.getOS();
+  return {
+    browser: `${browser.name || "Unknown"} ${browser.version || ""}`.trim(),
+    os: `${osInfo.name || "Unknown"} ${osInfo.version || ""}`.trim()
+  };
+}
+function buildSelectorPath(element, stopAt) {
+  const parts = [];
+  let current = element;
+  while (current && current !== document.body && current !== stopAt) {
+    let selector = current.tagName.toLowerCase();
+    if (current.id) {
+      selector += `#${current.id}`;
+    } else if (current.className && typeof current.className === "string") {
+      const classes = current.className.trim().split(/\s+/).slice(0, 2).join(".");
+      if (classes) selector += `.${classes}`;
+    }
+    parts.unshift(selector);
+    current = current.parentElement;
+  }
+  return parts.join(" > ");
+}
+function collectElementInfo(target, section, event) {
+  const sectionRect = section.getBoundingClientRect();
+  const dataAttributes = {};
+  for (const attr of Array.from(target.attributes)) {
+    if (attr.name.startsWith("data-") && attr.name !== "data-bug-reporter") {
+      dataAttributes[attr.name] = attr.value;
+    }
+  }
+  return {
+    tagName: target.tagName,
+    textContent: (target.textContent || "").trim().slice(0, 200) || null,
+    className: typeof target.className === "string" ? target.className : "",
+    id: target.id || null,
+    ariaLabel: target.getAttribute("aria-label") || null,
+    dataAttributes,
+    selectorPath: buildSelectorPath(target, section),
+    clickX: event.pageX,
+    clickY: event.pageY,
+    relativeClickX: event.clientX - sectionRect.left,
+    relativeClickY: event.clientY - sectionRect.top
+  };
+}
+function collectMetadata(sectionElement, siteId, reporterName, reporterEmail, clickedElement) {
+  const { browser, os } = parseUserAgent();
+  const now = /* @__PURE__ */ new Date();
+  return {
+    pageUrl: window.location.href,
+    sectionId: getSectionId(sectionElement),
+    viewportWidth: window.innerWidth,
+    viewportHeight: window.innerHeight,
+    deviceType: getDeviceType(),
+    browser,
+    os,
+    timestamp: now.toISOString(),
+    timestampUtc: now.toUTCString(),
+    siteId,
+    reporterName,
+    reporterEmail,
+    clickedElement
+  };
+}
+
+// src/console-capture.ts
+var MAX_ERRORS = 50;
+var capturedErrors = [];
+var isCapturing = false;
+var originalConsoleError = null;
+var errorListener = null;
+var rejectionListener = null;
+function startCapturing() {
+  if (isCapturing) return;
+  if (console.error.__bugReporterPatched)
+    return;
+  isCapturing = true;
+  capturedErrors = [];
+  originalConsoleError = console.error;
+  const patchedConsoleError = (...args) => {
+    const MAX_MSG_LEN = 500;
+    const message = args.map((a) => {
+      if (typeof a === "string") return a.slice(0, MAX_MSG_LEN);
+      try {
+        const s = JSON.stringify(a);
+        return s.slice(0, MAX_MSG_LEN);
+      } catch (e) {
+        return String(a).slice(0, MAX_MSG_LEN);
+      }
+    }).join(" ").slice(0, MAX_MSG_LEN);
+    capturedErrors.push({
+      message,
+      timestamp: (/* @__PURE__ */ new Date()).toISOString()
+    });
+    if (capturedErrors.length > MAX_ERRORS) {
+      capturedErrors = capturedErrors.slice(-MAX_ERRORS);
+    }
+    originalConsoleError.apply(console, args);
+  };
+  patchedConsoleError.__bugReporterPatched = true;
+  console.error = patchedConsoleError;
+  errorListener = (event) => {
+    capturedErrors.push({
+      message: event.message,
+      source: event.filename,
+      lineno: event.lineno,
+      colno: event.colno,
+      timestamp: (/* @__PURE__ */ new Date()).toISOString()
+    });
+    if (capturedErrors.length > MAX_ERRORS) {
+      capturedErrors = capturedErrors.slice(-MAX_ERRORS);
+    }
+  };
+  window.addEventListener("error", errorListener);
+  rejectionListener = (event) => {
+    capturedErrors.push({
+      message: `Unhandled Promise Rejection: ${event.reason instanceof Error ? event.reason.message : String(event.reason)}`,
+      timestamp: (/* @__PURE__ */ new Date()).toISOString()
+    });
+    if (capturedErrors.length > MAX_ERRORS) {
+      capturedErrors = capturedErrors.slice(-MAX_ERRORS);
+    }
+  };
+  window.addEventListener("unhandledrejection", rejectionListener);
+}
+function stopCapturing() {
+  if (!isCapturing) return;
+  isCapturing = false;
+  if (originalConsoleError) {
+    const restoreTarget = originalConsoleError;
+    console.error = restoreTarget;
+    if (console.error !== restoreTarget) {
+      console.warn("Bug reporter: failed to restore original console.error");
+    }
+    originalConsoleError = null;
+  }
+  if (errorListener) {
+    window.removeEventListener("error", errorListener);
+    errorListener = null;
+  }
+  if (rejectionListener) {
+    window.removeEventListener("unhandledrejection", rejectionListener);
+    rejectionListener = null;
+  }
+}
+function getCapturedErrors() {
+  return [...capturedErrors];
+}
+function clearCapturedErrors() {
+  capturedErrors = [];
+}
+
+// src/network-capture.ts
+var MAX_REQUESTS = 30;
+var capturedRequests = [];
+var isCapturing2 = false;
+var originalFetch = null;
+function truncateBody(body, maxLen = 500) {
+  if (!body) return null;
+  if (body.length <= maxLen) return body;
+  return body.slice(0, maxLen) + "...(truncated)";
+}
+function startNetworkCapture() {
+  if (isCapturing2 || typeof window === "undefined") return;
+  if (window.fetch.__bugReporterPatched) return;
+  isCapturing2 = true;
+  capturedRequests = [];
+  originalFetch = window.fetch;
+  const patchedFetch = async function patchedFetch2(input, init) {
+    const url = typeof input === "string" ? input : input instanceof URL ? input.toString() : input.url;
+    const method = (init == null ? void 0 : init.method) || (typeof input !== "string" && !(input instanceof URL) ? input.method : "GET") || "GET";
+    if (url.includes("/api/bug-reporter/") || url.includes("/bug-reporter/external/") || url.startsWith("data:") || url.startsWith("blob:")) {
+      return originalFetch.call(window, input, init);
+    }
+    try {
+      const response = await originalFetch.call(window, input, init);
+      if (response.status >= 400) {
+        let responseBody = null;
+        try {
+          const cloned = response.clone();
+          const text = await cloned.text();
+          responseBody = truncateBody(text);
+        } catch (e) {
+        }
+        capturedRequests.push({
+          url,
+          method: method.toUpperCase(),
+          status: response.status,
+          statusText: response.statusText,
+          responseBody,
+          timestamp: (/* @__PURE__ */ new Date()).toISOString()
+        });
+        if (capturedRequests.length > MAX_REQUESTS) {
+          capturedRequests = capturedRequests.slice(-MAX_REQUESTS);
+        }
+      }
+      return response;
+    } catch (error) {
+      capturedRequests.push({
+        url,
+        method: method.toUpperCase(),
+        status: 0,
+        statusText: error instanceof Error ? error.message : "Network error",
+        responseBody: null,
+        timestamp: (/* @__PURE__ */ new Date()).toISOString()
+      });
+      if (capturedRequests.length > MAX_REQUESTS) {
+        capturedRequests = capturedRequests.slice(-MAX_REQUESTS);
+      }
+      throw error;
+    }
+  };
+  patchedFetch.__bugReporterPatched = true;
+  window.fetch = patchedFetch;
+}
+function stopNetworkCapture() {
+  if (!isCapturing2) return;
+  isCapturing2 = false;
+  if (originalFetch) {
+    const restoreTarget = originalFetch;
+    window.fetch = restoreTarget;
+    if (window.fetch !== restoreTarget) {
+      console.warn("Bug reporter: failed to restore original fetch");
+    }
+    originalFetch = null;
+  }
+}
+function getCapturedNetworkErrors() {
+  return [...capturedRequests];
+}
+function clearCapturedNetworkErrors() {
+  capturedRequests = [];
+}
+
+// src/capture-overlay.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function CaptureOverlay({
+  isActive,
+  siteId,
+  reporterName,
+  reporterEmail,
+  onCapture,
+  onCancel
+}) {
+  const [hoveredElement, setHoveredElement] = (0, import_react.useState)(null);
+  const [hoveredRect, setHoveredRect] = (0, import_react.useState)(null);
+  const [isCapturing3, setIsCapturing] = (0, import_react.useState)(false);
+  const overlayRef = (0, import_react.useRef)(null);
+  const hoveredElementRef = (0, import_react.useRef)(null);
+  const rafRef = (0, import_react.useRef)(null);
+  const handleMouseMove = (0, import_react.useCallback)(
+    (e) => {
+      if (!isActive || isCapturing3) return;
+      if (rafRef.current) return;
+      rafRef.current = requestAnimationFrame(() => {
+        rafRef.current = null;
+        const target = e.target;
+        if (!(target instanceof HTMLElement)) return;
+        if (target.closest("[data-bug-reporter]")) {
+          setHoveredElement(null);
+          setHoveredRect(null);
+          hoveredElementRef.current = null;
+          return;
+        }
+        const section = getNearestSection(target);
+        setHoveredElement(section);
+        hoveredElementRef.current = section;
+        setHoveredRect(section ? section.getBoundingClientRect() : null);
+      });
+    },
+    [isActive, isCapturing3]
+  );
+  const handleClick = (0, import_react.useCallback)(
+    async (e) => {
+      var _a;
+      if (!isActive || isCapturing3) return;
+      const target = e.target;
+      if (!(target instanceof HTMLElement)) return;
+      if (target.closest("[data-bug-reporter]")) return;
+      e.preventDefault();
+      e.stopPropagation();
+      const section = getNearestSection(target);
+      if (!section) return;
+      const elementInfo = collectElementInfo(target, section, e);
+      setIsCapturing(true);
+      try {
+        setHoveredElement(null);
+        setHoveredRect(null);
+        hoveredElementRef.current = null;
+        await new Promise((r) => setTimeout(r, 50));
+        const MAX_DIMENSION = 2e3;
+        const sectionRect = section.getBoundingClientRect();
+        const pixelRatio = sectionRect.width > MAX_DIMENSION || sectionRect.height > MAX_DIMENSION ? 1 : 2;
+        const dataUrl = await (0, import_html_to_image.toPng)(section, {
+          quality: 0.9,
+          pixelRatio,
+          skipFonts: true
+        });
+        const [header, base64] = dataUrl.split(",");
+        const mime = ((_a = header.match(/:(.*?);/)) == null ? void 0 : _a[1]) || "image/png";
+        const bytes = atob(base64);
+        const arr = new Uint8Array(bytes.length);
+        for (let i = 0; i < bytes.length; i++) arr[i] = bytes.charCodeAt(i);
+        const blob = new Blob([arr], { type: mime });
+        const metadata = collectMetadata(
+          section,
+          siteId,
+          reporterName,
+          reporterEmail,
+          elementInfo
+        );
+        const consoleErrors = getCapturedErrors();
+        const networkErrors = getCapturedNetworkErrors();
+        onCapture({ screenshot: blob, metadata, consoleErrors, networkErrors });
+      } catch (err) {
+        console.error("Bug reporter: failed to capture screenshot", err);
+        const metadata = collectMetadata(
+          section,
+          siteId,
+          reporterName,
+          reporterEmail,
+          elementInfo
+        );
+        const consoleErrors = getCapturedErrors();
+        const networkErrors = getCapturedNetworkErrors();
+        onCapture({
+          screenshot: new Blob(),
+          metadata: __spreadProps(__spreadValues({}, metadata), { screenshotCaptureFailed: true }),
+          consoleErrors,
+          networkErrors
+        });
+      } finally {
+        setIsCapturing(false);
+      }
+    },
+    [isActive, isCapturing3, siteId, reporterName, reporterEmail, onCapture]
+  );
+  const handleKeyDown = (0, import_react.useCallback)(
+    (e) => {
+      if (e.key === "Escape" && isActive) {
+        e.preventDefault();
+        e.stopPropagation();
+        onCancel();
+      }
+    },
+    [isActive, onCancel]
+  );
+  const handleScroll = (0, import_react.useCallback)(() => {
+    if (!hoveredElementRef.current) return;
+    setHoveredRect(hoveredElementRef.current.getBoundingClientRect());
+  }, []);
+  (0, import_react.useEffect)(() => {
+    if (!isActive) {
+      setHoveredElement(null);
+      setHoveredRect(null);
+      hoveredElementRef.current = null;
+      return;
+    }
+    document.addEventListener("mousemove", handleMouseMove, true);
+    document.addEventListener("click", handleClick, true);
+    document.addEventListener("keydown", handleKeyDown);
+    window.addEventListener("scroll", handleScroll, { passive: true });
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove, true);
+      document.removeEventListener("click", handleClick, true);
+      document.removeEventListener("keydown", handleKeyDown);
+      window.removeEventListener("scroll", handleScroll);
+      if (rafRef.current) cancelAnimationFrame(rafRef.current);
+    };
+  }, [isActive, handleMouseMove, handleClick, handleKeyDown, handleScroll]);
+  if (!isActive || !hoveredElement || !hoveredRect) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+      "div",
+      {
+        "data-bug-reporter": true,
+        role: "alert",
+        "aria-live": "assertive",
+        className: "fixed top-0 left-0 right-0 z-[10000] bg-indigo-600 text-white text-center py-2 px-4 text-sm font-medium",
+        children: [
+          "Click on the section with the bug. Press ",
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("kbd", { className: "px-1.5 py-0.5 bg-indigo-800 rounded text-xs mx-1", children: "Esc" }),
+          " to cancel."
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "div",
+      {
+        ref: overlayRef,
+        "data-bug-reporter": true,
+        className: "fixed pointer-events-none z-[9998] border-2 border-indigo-500 rounded-sm transition-all duration-150 ease-out",
+        style: {
+          top: hoveredRect.top - 2,
+          left: hoveredRect.left - 2,
+          width: hoveredRect.width + 4,
+          height: hoveredRect.height + 4,
+          backgroundColor: "rgba(99, 102, 241, 0.08)"
+        }
+      }
+    ),
+    isActive && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("style", { children: `* { cursor: crosshair !important; }` })
+  ] });
+}
+
+// src/report-modal.tsx
+var import_react2 = require("react");
+var import_lucide_react2 = require("lucide-react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function ReportModal({
+  isOpen,
+  captureResult,
+  apiConfig,
+  siteId,
+  user,
+  onClose
+}) {
+  const [messages, setMessages] = (0, import_react2.useState)([]);
+  const [input, setInput] = (0, import_react2.useState)("");
+  const [isLoading, setIsLoading] = (0, import_react2.useState)(false);
+  const [modalState, setModalState] = (0, import_react2.useState)("chatting");
+  const [reportId, setReportId] = (0, import_react2.useState)(null);
+  const [screenshotUrl, setScreenshotUrl] = (0, import_react2.useState)(null);
+  const [errorMessage, setErrorMessage] = (0, import_react2.useState)(null);
+  const chatEndRef = (0, import_react2.useRef)(null);
+  const inputRef = (0, import_react2.useRef)(null);
+  const hasInitRef = (0, import_react2.useRef)(false);
+  const apiHeaders = {
+    "Content-Type": "application/json",
+    "X-Bug-Reporter-Key": apiConfig.apiKey
+  };
+  (0, import_react2.useEffect)(() => {
+    if ((captureResult == null ? void 0 : captureResult.screenshot) && captureResult.screenshot.size > 0) {
+      const url = URL.createObjectURL(captureResult.screenshot);
+      setScreenshotUrl(url);
+      return () => URL.revokeObjectURL(url);
+    }
+  }, [captureResult]);
+  (0, import_react2.useEffect)(() => {
+    if (isOpen && captureResult && !hasInitRef.current) {
+      hasInitRef.current = true;
+      sendInitialMessage();
+    }
+  }, [isOpen, captureResult]);
+  (0, import_react2.useEffect)(() => {
+    var _a;
+    (_a = chatEndRef.current) == null ? void 0 : _a.scrollIntoView({ behavior: "smooth" });
+  }, [messages]);
+  (0, import_react2.useEffect)(() => {
+    var _a;
+    if (isOpen && !isLoading) {
+      (_a = inputRef.current) == null ? void 0 : _a.focus();
+    }
+  }, [isOpen, isLoading, messages]);
+  async function sendInitialMessage() {
+    if (!captureResult) return;
+    setIsLoading(true);
+    try {
+      const response = await fetch(`${apiConfig.apiUrl}/chat`, {
+        method: "POST",
+        headers: apiHeaders,
+        body: JSON.stringify({
+          messages: [],
+          metadata: captureResult.metadata,
+          consoleErrors: captureResult.consoleErrors,
+          networkErrors: captureResult.networkErrors,
+          clickedElement: captureResult.metadata.clickedElement || null
+        })
+      });
+      if (!response.ok) throw new Error("Failed to get AI response");
+      const data = await response.json();
+      setMessages([{ role: "assistant", content: data.message }]);
+    } catch (e) {
+      setMessages([
+        {
+          role: "assistant",
+          content: "I can see you've captured a section of the page. What's going wrong here? Please describe the issue you're experiencing."
+        }
+      ]);
+    } finally {
+      setIsLoading(false);
+    }
+  }
+  async function sendMessage() {
+    if (!input.trim() || isLoading || !captureResult) return;
+    const userMessage = input.trim();
+    setInput("");
+    const newMessages = [
+      ...messages,
+      { role: "user", content: userMessage }
+    ];
+    setMessages(newMessages);
+    setIsLoading(true);
+    try {
+      const response = await fetch(`${apiConfig.apiUrl}/chat`, {
+        method: "POST",
+        headers: apiHeaders,
+        body: JSON.stringify({
+          messages: newMessages,
+          metadata: captureResult.metadata,
+          consoleErrors: captureResult.consoleErrors,
+          networkErrors: captureResult.networkErrors,
+          clickedElement: captureResult.metadata.clickedElement || null
+        })
+      });
+      if (!response.ok) throw new Error("Failed to get AI response");
+      const data = await response.json();
+      setMessages([
+        ...newMessages,
+        { role: "assistant", content: data.message }
+      ]);
+      if (data.readyToSubmit && data.structuredReport) {
+        await submitReport(
+          [...newMessages, { role: "assistant", content: data.message }],
+          data.structuredReport
+        );
+      }
+    } catch (e) {
+      setMessages([
+        ...newMessages,
+        {
+          role: "assistant",
+          content: "I had trouble processing that. Could you try describing the issue again?"
+        }
+      ]);
+    } finally {
+      setIsLoading(false);
+    }
+  }
+  const submitReport = (0, import_react2.useCallback)(
+    async (conversation, structuredReport) => {
+      if (!captureResult || modalState !== "chatting") return;
+      setModalState("submitting");
+      try {
+        let screenshotBase64;
+        if (captureResult.screenshot.size > 0) {
+          const reader = new FileReader();
+          screenshotBase64 = await new Promise((resolve, reject) => {
+            reader.onload = () => resolve(reader.result);
+            reader.onerror = reject;
+            reader.readAsDataURL(captureResult.screenshot);
+          });
+        }
+        let report = structuredReport;
+        if (!report) {
+          try {
+            const summaryResponse = await fetch(`${apiConfig.apiUrl}/chat`, {
+              method: "POST",
+              headers: apiHeaders,
+              body: JSON.stringify({
+                messages: conversation,
+                metadata: captureResult.metadata,
+                consoleErrors: captureResult.consoleErrors,
+                networkErrors: captureResult.networkErrors,
+                clickedElement: captureResult.metadata.clickedElement || null,
+                requestSummary: true
+              })
+            });
+            if (summaryResponse.ok) {
+              const data2 = await summaryResponse.json();
+              report = data2.structuredReport;
+            }
+          } catch (e) {
+          }
+        }
+        const response = await fetch(`${apiConfig.apiUrl}/submit`, {
+          method: "POST",
+          headers: apiHeaders,
+          body: JSON.stringify({
+            screenshot: screenshotBase64,
+            metadata: captureResult.metadata,
+            conversation,
+            structuredReport: report,
+            consoleErrors: captureResult.consoleErrors,
+            networkErrors: captureResult.networkErrors,
+            clickedElement: captureResult.metadata.clickedElement || null
+          })
+        });
+        if (!response.ok) {
+          const errorData = await response.json().catch(() => ({}));
+          throw new Error(errorData.error || "Failed to submit report");
+        }
+        const data = await response.json();
+        setReportId(data.id);
+        setModalState("submitted");
+      } catch (err) {
+        console.error("Bug reporter: failed to submit report", err);
+        setErrorMessage(
+          err instanceof Error ? err.message : "Failed to submit report"
+        );
+        setModalState("error");
+      }
+    },
+    [captureResult, apiConfig, apiHeaders, modalState]
+  );
+  function handleManualSubmit() {
+    submitReport(messages);
+  }
+  function handleClose() {
+    setMessages([]);
+    setInput("");
+    setModalState("chatting");
+    setReportId(null);
+    setErrorMessage(null);
+    hasInitRef.current = false;
+    onClose();
+  }
+  function handleKeyDown(e) {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      sendMessage();
+    }
+  }
+  if (!isOpen) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "div",
+    {
+      "data-bug-reporter": true,
+      className: "fixed inset-0 z-[10001] flex items-center justify-center bg-black/50 backdrop-blur-sm",
+      onClick: (e) => {
+        if (e.target === e.currentTarget) handleClose();
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+        "div",
+        {
+          className: cn(
+            "bg-white dark:bg-gray-950 rounded-xl shadow-2xl border border-gray-200 dark:border-gray-800 flex flex-col overflow-hidden",
+            "w-full max-w-lg mx-4",
+            "max-[768px]:mx-0 max-[768px]:rounded-none max-[768px]:max-w-none max-[768px]:h-full",
+            "min-[769px]:max-h-[85vh]"
+          ),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center justify-between px-4 py-3 border-b border-gray-200 dark:border-gray-800 bg-gray-50/30 dark:bg-gray-900/30", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h2", { className: "font-semibold text-sm text-gray-900 dark:text-gray-100", children: "Bug Report" }),
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: siteId })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                "button",
+                {
+                  onClick: handleClose,
+                  className: "p-1.5 rounded-md hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors",
+                  "aria-label": "Close",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react2.X, { className: "h-4 w-4 text-gray-600 dark:text-gray-400" })
+                }
+              )
+            ] }),
+            screenshotUrl && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "px-4 py-3 border-b border-gray-200 dark:border-gray-800 bg-gray-50/10 dark:bg-gray-900/10", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              "img",
+              {
+                src: screenshotUrl,
+                alt: "Captured section",
+                className: "w-full max-h-40 object-contain rounded-md border border-gray-200 dark:border-gray-700"
+              }
+            ) }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "flex-1 overflow-y-auto px-4 py-3 space-y-3 min-h-0", children: modalState === "submitted" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex flex-col items-center justify-center py-8 text-center", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react2.CheckCircle2, { className: "h-12 w-12 text-green-500 mb-3" }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h3", { className: "font-semibold text-lg text-gray-900 dark:text-gray-100", children: "Report Submitted" }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("p", { className: "text-sm text-gray-500 dark:text-gray-400 mt-1", children: [
+                "Reference: ",
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("code", { className: "text-xs bg-gray-100 dark:bg-gray-800 px-1.5 py-0.5 rounded", children: reportId == null ? void 0 : reportId.slice(0, 8) })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "text-sm text-gray-500 dark:text-gray-400 mt-2", children: "Thanks for the report \u2014 we'll look into it." }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                "button",
+                {
+                  onClick: handleClose,
+                  className: "mt-4 px-4 py-2 bg-indigo-600 text-white rounded-md text-sm hover:bg-indigo-700 transition-colors",
+                  children: "Done"
+                }
+              )
+            ] }) : modalState === "error" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex flex-col items-center justify-center py-8 text-center", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react2.X, { className: "h-12 w-12 text-red-500 mb-3" }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h3", { className: "font-semibold text-lg text-gray-900 dark:text-gray-100", children: "Submission Failed" }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "text-sm text-gray-500 dark:text-gray-400 mt-1", children: errorMessage || "Something went wrong. Please try again." }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                "button",
+                {
+                  onClick: () => setModalState("chatting"),
+                  className: "mt-4 px-4 py-2 bg-indigo-600 text-white rounded-md text-sm hover:bg-indigo-700 transition-colors",
+                  children: "Try Again"
+                }
+              )
+            ] }) : modalState === "submitting" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex flex-col items-center justify-center py-8", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react2.Loader2, { className: "h-8 w-8 animate-spin text-indigo-500 mb-3" }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: "Submitting your report..." })
+            ] }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+              (captureResult == null ? void 0 : captureResult.screenshot.size) === 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "text-xs text-amber-600", children: "Screenshot could not be captured. Please describe the visual issue in detail." }),
+              messages.map((msg, i) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                "div",
+                {
+                  className: cn(
+                    "text-sm leading-relaxed",
+                    msg.role === "assistant" ? "bg-gray-100/50 dark:bg-gray-800/50 rounded-lg p-3 text-gray-900 dark:text-gray-100" : "bg-indigo-600 text-white rounded-lg p-3 ml-8"
+                  ),
+                  children: msg.content
+                },
+                i
+              )),
+              isLoading && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "bg-gray-100/50 dark:bg-gray-800/50 rounded-lg p-3 flex items-center gap-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react2.Loader2, { className: "h-3.5 w-3.5 animate-spin text-gray-500" }),
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-sm text-gray-500 dark:text-gray-400", children: "Thinking..." })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { ref: chatEndRef })
+            ] }) }),
+            modalState === "chatting" && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "border-t border-gray-200 dark:border-gray-800 px-4 py-3", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex gap-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  "textarea",
+                  {
+                    ref: inputRef,
+                    value: input,
+                    onChange: (e) => setInput(e.target.value),
+                    onKeyDown: handleKeyDown,
+                    placeholder: "Describe what's wrong...",
+                    rows: 2,
+                    className: "flex-1 resize-none rounded-md border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-950 px-3 py-2 text-sm text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:border-transparent",
+                    disabled: isLoading
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex flex-col gap-1", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                    "button",
+                    {
+                      onClick: sendMessage,
+                      disabled: !input.trim() || isLoading,
+                      className: "p-2 rounded-md bg-indigo-600 text-white hover:bg-indigo-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors",
+                      title: "Send message",
+                      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react2.Send, { className: "h-4 w-4" })
+                    }
+                  ),
+                  messages.length >= 2 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                    "button",
+                    {
+                      onClick: handleManualSubmit,
+                      disabled: isLoading,
+                      className: "px-2 py-1 rounded-md bg-green-600 text-white hover:bg-green-700 disabled:opacity-50 text-xs font-medium transition-colors",
+                      title: "Submit report now",
+                      children: "Submit"
+                    }
+                  )
+                ] })
+              ] }),
+              captureResult && (captureResult.consoleErrors.length > 0 || captureResult.networkErrors.length > 0) && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("p", { className: "text-xs text-amber-600 mt-1.5", children: [
+                [
+                  captureResult.consoleErrors.length > 0 ? `${captureResult.consoleErrors.length} console error${captureResult.consoleErrors.length !== 1 ? "s" : ""}` : null,
+                  captureResult.networkErrors.length > 0 ? `${captureResult.networkErrors.length} failed request${captureResult.networkErrors.length !== 1 ? "s" : ""}` : null
+                ].filter(Boolean).join(" + "),
+                " ",
+                "captured \u2014 these will be included in the report."
+              ] })
+            ] })
+          ]
+        }
+      )
+    }
+  );
+}
+
+// src/bug-reporter.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function JarveBugReporter({
+  apiUrl,
+  apiKey,
+  user,
+  children
+}) {
+  const [captureMode, setCaptureMode] = (0, import_react3.useState)(false);
+  const [captureResult, setCaptureResult] = (0, import_react3.useState)(null);
+  const [showModal, setShowModal] = (0, import_react3.useState)(false);
+  (0, import_react3.useEffect)(() => {
+    startCapturing();
+    startNetworkCapture();
+    return () => {
+      stopCapturing();
+      stopNetworkCapture();
+    };
+  }, []);
+  const toggleCaptureMode = (0, import_react3.useCallback)(() => {
+    setCaptureMode((prev) => !prev);
+  }, []);
+  const handleCapture = (0, import_react3.useCallback)((result) => {
+    setCaptureResult(result);
+    setCaptureMode(false);
+    setShowModal(true);
+  }, []);
+  const handleCancelCapture = (0, import_react3.useCallback)(() => {
+    setCaptureMode(false);
+  }, []);
+  const handleCloseModal = (0, import_react3.useCallback)(() => {
+    setShowModal(false);
+    setCaptureResult(null);
+    clearCapturedErrors();
+    clearCapturedNetworkErrors();
+  }, []);
+  const siteId = apiKey.startsWith("brk_") ? apiKey.slice(4, 12) : "external";
+  const reporterName = (user == null ? void 0 : user.name) || "Anonymous";
+  const reporterEmail = (user == null ? void 0 : user.email) || "unknown@external";
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+    children,
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(FloatingButton, { isActive: captureMode, onClick: toggleCaptureMode }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      CaptureOverlay,
+      {
+        isActive: captureMode,
+        siteId,
+        reporterName,
+        reporterEmail,
+        onCapture: handleCapture,
+        onCancel: handleCancelCapture
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      ReportModal,
+      {
+        isOpen: showModal,
+        captureResult,
+        apiConfig: { apiUrl, apiKey },
+        siteId,
+        user: { name: reporterName, email: reporterEmail },
+        onClose: handleCloseModal
+      }
+    )
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  JarveBugReporter
+});
+//# sourceMappingURL=index.js.map