@jarve/bug-reporter 0.1.1 → 0.3.0

package/dist/index.js

@@ -57,16 +57,21 @@ function cn(...inputs) {
 
 // src/floating-button.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
-function FloatingButton({ isActive, onClick }) {
+function FloatingButton({ isActive, onClick, position = "right" }) {
+  const sideClasses = position === "left" ? "left-4 md:left-6" : "right-4 md:right-6";
   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"
+        "fixed z-[9999] flex items-center justify-center rounded-full shadow-lg transition-all duration-200",
+        "hover:scale-110 focus:ring-2 focus:ring-offset-2 focus:outline-none",
+        // size + vertical position
+        "bottom-4 h-11 w-11 md:bottom-6 md:h-12 md:w-12",
+        // horizontal side
+        sideClasses,
+        // active vs idle colors
+        isActive ? "animate-pulse bg-red-500 text-white focus:ring-red-400" : "bg-indigo-600 text-white hover:bg-indigo-700 focus:ring-indigo-400"
       ),
       title: isActive ? "Cancel bug capture" : "Report a bug",
       "aria-label": isActive ? "Cancel bug capture" : "Report a bug",
@@ -134,7 +139,18 @@ function buildSelectorPath(element, stopAt) {
   }
   return parts.join(" > ");
 }
-function collectElementInfo(target, section, event) {
+function isTouchCapable() {
+  return "ontouchstart" in window || navigator.maxTouchPoints > 0;
+}
+function extractCoordinates(e) {
+  return {
+    pageX: e.pageX,
+    pageY: e.pageY,
+    clientX: e.clientX,
+    clientY: e.clientY
+  };
+}
+function collectElementInfo(target, section, coords) {
   const sectionRect = section.getBoundingClientRect();
   const dataAttributes = {};
   for (const attr of Array.from(target.attributes)) {
@@ -150,10 +166,10 @@ function collectElementInfo(target, section, event) {
     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
+    clickX: coords.pageX,
+    clickY: coords.pageY,
+    relativeClickX: coords.clientX - sectionRect.left,
+    relativeClickY: coords.clientY - sectionRect.top
   };
 }
 function collectMetadata(sectionElement, siteId, reporterName, reporterEmail, clickedElement) {
@@ -185,8 +201,7 @@ var errorListener = null;
 var rejectionListener = null;
 function startCapturing() {
   if (isCapturing) return;
-  if (console.error.__bugReporterPatched)
-    return;
+  if (console.error.__bugReporterPatched) return;
   isCapturing = true;
   capturedErrors = [];
   originalConsoleError = console.error;
@@ -378,6 +393,15 @@ function clearCapturedNetworkErrors() {
 
 // src/capture-overlay.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
+function dataUrlToBlob(dataUrl) {
+  var _a;
+  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);
+  return new Blob([arr], { type: mime });
+}
 function CaptureOverlay({
   isActive,
   siteId,
@@ -389,48 +413,30 @@ function CaptureOverlay({
   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 [isTouchMode, setIsTouchMode] = (0, import_react.useState)(false);
+  const [selectedSection, setSelectedSection] = (0, import_react.useState)(null);
+  const [selectedRect, setSelectedRect] = (0, import_react.useState)(null);
+  const [selectedTarget, setSelectedTarget] = (0, import_react.useState)(null);
   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, _b;
-      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);
+  const touchCoordsRef = (0, import_react.useRef)(null);
+  (0, import_react.useEffect)(() => {
+    if (isActive) {
+      setIsTouchMode(isTouchCapable());
+    }
+  }, [isActive]);
+  const captureScreenshot = (0, import_react.useCallback)(
+    async (section, target, coords) => {
+      const elementInfo = collectElementInfo(target, section, coords);
       setIsCapturing(true);
       try {
         setHoveredElement(null);
         setHoveredRect(null);
         hoveredElementRef.current = null;
+        setSelectedSection(null);
+        setSelectedRect(null);
+        setSelectedTarget(null);
         await new Promise((r) => setTimeout(r, 50));
         const MAX_DIMENSION = 2e3;
         const sectionRect = section.getBoundingClientRect();
@@ -440,12 +446,7 @@ function CaptureOverlay({
           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 blob = dataUrlToBlob(dataUrl);
         const metadata = collectMetadata(
           section,
           siteId,
@@ -457,7 +458,10 @@ function CaptureOverlay({
         const networkErrors = getCapturedNetworkErrors();
         onCapture({ screenshot: blob, metadata, consoleErrors, networkErrors });
       } catch (err) {
-        console.warn("Bug reporter: first capture attempt failed, retrying with simpler settings", err);
+        console.warn(
+          "Bug reporter: first capture attempt failed, retrying with simpler settings",
+          err
+        );
         try {
           const dataUrl = await (0, import_html_to_image.toPng)(section, {
             quality: 0.6,
@@ -465,12 +469,7 @@ function CaptureOverlay({
             skipFonts: true,
             cacheBust: true
           });
-          const [header, base64] = dataUrl.split(",");
-          const mime = ((_b = header.match(/:(.*?);/)) == null ? void 0 : _b[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 retryBlob = new Blob([arr], { type: mime });
+          const retryBlob = dataUrlToBlob(dataUrl);
           const metadata = collectMetadata(
             section,
             siteId,
@@ -481,7 +480,7 @@ function CaptureOverlay({
           const consoleErrors = getCapturedErrors();
           const networkErrors = getCapturedNetworkErrors();
           onCapture({ screenshot: retryBlob, metadata, consoleErrors, networkErrors });
-        } catch (e2) {
+        } catch (e) {
           console.error("Bug reporter: screenshot capture failed after retry");
           const metadata = collectMetadata(
             section,
@@ -503,7 +502,75 @@ function CaptureOverlay({
         setIsCapturing(false);
       }
     },
-    [isActive, isCapturing3, siteId, reporterName, reporterEmail, onCapture]
+    [siteId, reporterName, reporterEmail, onCapture]
+  );
+  const handleMouseMove = (0, import_react.useCallback)(
+    (e) => {
+      if (!isActive || isCapturing3 || isTouchMode) 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, isTouchMode]
+  );
+  const handleClick = (0, import_react.useCallback)(
+    async (e) => {
+      if (!isActive || isCapturing3 || isTouchMode) 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;
+      await captureScreenshot(section, target, extractCoordinates(e));
+    },
+    [isActive, isCapturing3, isTouchMode, captureScreenshot]
+  );
+  const handleTouchEnd = (0, import_react.useCallback)(
+    (e) => {
+      if (!isActive || isCapturing3) return;
+      const touch = e.changedTouches[0];
+      if (!touch) return;
+      const target = document.elementFromPoint(touch.clientX, touch.clientY);
+      if (!(target instanceof HTMLElement)) return;
+      if (target.closest("[data-bug-reporter]")) return;
+      const section = getNearestSection(target);
+      if (!section) return;
+      setSelectedSection(section);
+      setSelectedRect(section.getBoundingClientRect());
+      setSelectedTarget(target);
+      touchCoordsRef.current = extractCoordinates(touch);
+    },
+    [isActive, isCapturing3]
+  );
+  const handleConfirmCapture = (0, import_react.useCallback)(async () => {
+    if (!selectedSection || !selectedTarget || !touchCoordsRef.current) return;
+    await captureScreenshot(selectedSection, selectedTarget, touchCoordsRef.current);
+  }, [selectedSection, selectedTarget, captureScreenshot]);
+  const handlePointerDown = (0, import_react.useCallback)(
+    (e) => {
+      if (!isActive) return;
+      if (e.pointerType === "touch") {
+        setIsTouchMode(true);
+      } else if (e.pointerType === "mouse") {
+        setIsTouchMode(false);
+      }
+    },
+    [isActive]
   );
   const handleKeyDown = (0, import_react.useCallback)(
     (e) => {
@@ -516,60 +583,131 @@ function CaptureOverlay({
     [isActive, onCancel]
   );
   const handleScroll = (0, import_react.useCallback)(() => {
-    if (!hoveredElementRef.current) return;
-    setHoveredRect(hoveredElementRef.current.getBoundingClientRect());
-  }, []);
+    if (hoveredElementRef.current) {
+      setHoveredRect(hoveredElementRef.current.getBoundingClientRect());
+    }
+    if (selectedSection) {
+      setSelectedRect(selectedSection.getBoundingClientRect());
+    }
+  }, [selectedSection]);
   (0, import_react.useEffect)(() => {
     if (!isActive) {
       setHoveredElement(null);
       setHoveredRect(null);
       hoveredElementRef.current = null;
+      setSelectedSection(null);
+      setSelectedRect(null);
+      setSelectedTarget(null);
+      touchCoordsRef.current = null;
       return;
     }
-    document.addEventListener("mousemove", handleMouseMove, true);
-    document.addEventListener("click", handleClick, true);
+    document.addEventListener("pointerdown", handlePointerDown);
     document.addEventListener("keydown", handleKeyDown);
     window.addEventListener("scroll", handleScroll, { passive: true });
+    if (isTouchMode) {
+      document.addEventListener("touchend", handleTouchEnd, { passive: true });
+    } else {
+      document.addEventListener("mousemove", handleMouseMove, true);
+      document.addEventListener("click", handleClick, true);
+    }
     return () => {
-      document.removeEventListener("mousemove", handleMouseMove, true);
-      document.removeEventListener("click", handleClick, true);
+      document.removeEventListener("pointerdown", handlePointerDown);
       document.removeEventListener("keydown", handleKeyDown);
       window.removeEventListener("scroll", handleScroll);
+      document.removeEventListener("touchend", handleTouchEnd);
+      document.removeEventListener("mousemove", handleMouseMove, true);
+      document.removeEventListener("click", handleClick, true);
       if (rafRef.current) cancelAnimationFrame(rafRef.current);
     };
-  }, [isActive, handleMouseMove, handleClick, handleKeyDown, handleScroll]);
-  if (!isActive || !hoveredElement || !hoveredRect) return null;
+  }, [
+    isActive,
+    isTouchMode,
+    handleMouseMove,
+    handleClick,
+    handleTouchEnd,
+    handlePointerDown,
+    handleKeyDown,
+    handleScroll
+  ]);
+  const highlightRect = isTouchMode ? selectedRect : hoveredRect;
+  const showHighlight = isTouchMode ? !!selectedSection : !!hoveredElement && !!hoveredRect;
+  if (!isActive) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       "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" }),
+        className: "fixed top-0 right-0 left-0 z-[10000] flex items-center justify-center gap-3 bg-indigo-600 px-4 py-2 text-center text-sm font-medium text-white",
+        children: isTouchMode ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "Tap the section with the bug" }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            "button",
+            {
+              onClick: onCancel,
+              className: "min-h-[44px] rounded-md bg-white/20 px-3 py-1 text-sm font-medium",
+              children: "Cancel"
+            }
+          )
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+          "Click on the section with the bug. Press",
+          " ",
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("kbd", { className: "mx-1 rounded bg-indigo-800 px-1.5 py-0.5 text-xs", children: "Esc" }),
           " to cancel."
-        ]
+        ] })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    showHighlight && highlightRect && /* @__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",
+        className: "pointer-events-none fixed z-[9998] rounded-sm border-2 border-indigo-500 transition-all duration-150 ease-out",
         style: {
-          top: hoveredRect.top - 2,
-          left: hoveredRect.left - 2,
-          width: hoveredRect.width + 4,
-          height: hoveredRect.height + 4,
+          top: highlightRect.top - 2,
+          left: highlightRect.left - 2,
+          width: highlightRect.width + 4,
+          height: highlightRect.height + 4,
           backgroundColor: "rgba(99, 102, 241, 0.08)"
         }
       }
     ),
-    isActive && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("style", { children: `* { cursor: crosshair !important; }` })
+    isTouchMode && selectedSection && !isCapturing3 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "div",
+      {
+        "data-bug-reporter": true,
+        className: "fixed right-0 bottom-0 left-0 z-[10000] border-t border-gray-200 bg-white shadow-lg",
+        style: { paddingBottom: "env(safe-area-inset-bottom, 0px)" },
+        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center justify-between gap-3 px-4 py-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "truncate text-sm font-medium text-gray-900", children: "Capture this section?" }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex shrink-0 gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              "button",
+              {
+                onClick: () => {
+                  setSelectedSection(null);
+                  setSelectedRect(null);
+                  setSelectedTarget(null);
+                  touchCoordsRef.current = null;
+                },
+                className: "min-h-[44px] rounded-md border border-gray-300 px-4 text-sm font-medium text-gray-700",
+                children: "Cancel"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              "button",
+              {
+                onClick: handleConfirmCapture,
+                className: "min-h-[44px] rounded-md bg-indigo-600 px-4 text-sm font-medium text-white",
+                children: "Capture"
+              }
+            )
+          ] })
+        ] })
+      }
+    ),
+    !isTouchMode && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("style", { children: `* { cursor: crosshair !important; }` })
   ] });
 }
 
@@ -635,7 +773,9 @@ function ReportModal({
         })
       });
       if (response.status === 401) {
-        console.error("Bug reporter: invalid or missing API key. Check your BugReporter apiKey prop.");
+        console.error(
+          "Bug reporter: invalid or missing API key. Check your BugReporter apiKey prop."
+        );
         setMessages([
           {
             role: "assistant",
@@ -732,9 +872,7 @@ function ReportModal({
         setModalState("submitted");
       } catch (err) {
         console.error("Bug reporter: failed to submit report", err);
-        setErrorMessage(
-          err instanceof Error ? err.message : "Failed to submit report"
-        );
+        setErrorMessage(err instanceof Error ? err.message : "Failed to submit report");
         setModalState("error");
       }
     },
@@ -747,10 +885,7 @@ function ReportModal({
     if (!input.trim() || isLoading || !captureResult) return;
     const userMessage = input.trim();
     setInput("");
-    const newMessages = [
-      ...messages,
-      { role: "user", content: userMessage }
-    ];
+    const newMessages = [...messages, { role: "user", content: userMessage }];
     setMessages(newMessages);
     setIsLoading(true);
     try {
@@ -766,7 +901,9 @@ function ReportModal({
         })
       });
       if (response.status === 401) {
-        console.error("Bug reporter: invalid or missing API key. Check your BugReporter apiKey prop.");
+        console.error(
+          "Bug reporter: invalid or missing API key. Check your BugReporter apiKey prop."
+        );
         setMessages([
           ...newMessages,
           {
@@ -778,10 +915,7 @@ function ReportModal({
       }
       if (!response.ok) throw new Error("Failed to get AI response");
       const data = await response.json();
-      setMessages([
-        ...newMessages,
-        { role: "assistant", content: data.message }
-      ]);
+      setMessages([...newMessages, { role: "assistant", content: data.message }]);
       if (data.readyToSubmit && data.structuredReport) {
         await submitReport(
           [...newMessages, { role: "assistant", content: data.message }],
@@ -814,7 +948,7 @@ function ReportModal({
     onClose();
   }
   function handleKeyDown(e) {
-    if (e.key === "Enter" && !e.shiftKey) {
+    if (e.key === "Enter" && !e.shiftKey && !isTouchCapable()) {
       e.preventDefault();
       sendMessage();
     }
@@ -832,65 +966,66 @@ function ReportModal({
         "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",
+            "flex flex-col overflow-hidden rounded-xl border border-gray-200 bg-white shadow-2xl dark:border-gray-800 dark:bg-gray-950",
+            "mx-4 w-full max-w-lg",
+            "max-[768px]:mx-0 max-[768px]:h-full max-[768px]:max-w-none max-[768px]:rounded-none",
             "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", { className: "flex items-center justify-between border-b border-gray-200 bg-gray-50/30 px-4 py-3 dark:border-gray-800 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)("h2", { className: "text-sm font-semibold 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",
+                  className: "rounded-md p-1.5 transition-colors hover:bg-gray-100 dark:hover:bg-gray-800",
                   "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)(
+            screenshotUrl && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "border-b border-gray-200 bg-gray-50/10 px-4 py-3 dark:border-gray-800 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"
+                className: "max-h-40 w-full rounded-md border border-gray-200 object-contain 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)("div", { className: "min-h-0 flex-1 space-y-3 overflow-y-auto px-4 py-3", 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: "mb-3 h-12 w-12 text-green-500" }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h3", { className: "text-lg font-semibold text-gray-900 dark:text-gray-100", children: "Report Submitted" }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("p", { className: "mt-1 text-sm text-gray-500 dark:text-gray-400", children: [
+                "Reference:",
+                " ",
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("code", { className: "rounded bg-gray-100 px-1.5 py-0.5 text-xs dark:bg-gray-800", 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)("p", { className: "mt-2 text-sm text-gray-500 dark:text-gray-400", 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",
+                  className: "mt-4 rounded-md bg-indigo-600 px-4 py-2 text-sm text-white transition-colors hover:bg-indigo-700",
                   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)(import_lucide_react2.X, { className: "mb-3 h-12 w-12 text-red-500" }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h3", { className: "text-lg font-semibold text-gray-900 dark:text-gray-100", children: "Submission Failed" }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "mt-1 text-sm text-gray-500 dark:text-gray-400", 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",
+                  className: "mt-4 rounded-md bg-indigo-600 px-4 py-2 text-sm text-white transition-colors hover:bg-indigo-700",
                   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)(import_lucide_react2.Loader2, { className: "mb-3 h-8 w-8 animate-spin text-indigo-500" }),
               /* @__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." }),
@@ -899,42 +1034,53 @@ function ReportModal({
                 {
                   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"
+                    msg.role === "assistant" ? "rounded-lg bg-gray-100/50 p-3 text-gray-900 dark:bg-gray-800/50 dark:text-gray-100" : "ml-8 rounded-lg bg-indigo-600 p-3 text-white"
                   ),
                   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: [
+              isLoading && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center gap-2 rounded-lg bg-gray-100/50 p-3 dark:bg-gray-800/50", 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)(
+            modalState === "chatting" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "border-t border-gray-200 px-4 py-3 dark:border-gray-800", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex flex-col 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: "w-full resize-none rounded-md border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 focus:border-transparent focus:ring-2 focus:ring-indigo-400 focus:outline-none dark:border-gray-700 dark:bg-gray-950 dark:text-gray-100",
+                  disabled: isLoading
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex flex-col gap-2", children: [
+                captureResult && (captureResult.consoleErrors.length > 0 || captureResult.networkErrors.length > 0) && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("p", { className: "flex-1 text-xs text-amber-600", 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."
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex justify-end gap-2", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
                     "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",
+                      className: "flex items-center gap-1 rounded-md bg-indigo-600 px-3 py-2 text-nowrap text-white transition-colors hover:bg-indigo-700 disabled:cursor-not-allowed disabled:opacity-50",
                       title: "Send message",
-                      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react2.Send, { className: "h-4 w-4" })
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react2.Send, { className: "h-4 w-4" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-sm font-medium", children: "Send message" })
+                      ]
                     }
                   ),
                   messages.length >= 2 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
@@ -942,22 +1088,14 @@ function ReportModal({
                     {
                       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",
+                      className: "rounded-md bg-green-600 px-3 py-2 text-xs font-medium text-nowrap text-white transition-colors hover:bg-green-700 disabled:opacity-50",
                       title: "Submit report now",
-                      children: "Submit"
+                      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-sm font-medium", children: "Submit report" })
                     }
                   )
                 ] })
-              ] }),
-              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."
               ] })
-            ] })
+            ] }) })
           ]
         }
       )
@@ -971,8 +1109,10 @@ function JarveBugReporter({
   apiUrl,
   apiKey,
   user,
+  buttonPosition,
   children
 }) {
+  const safeApiKey = apiKey || "";
   const [captureMode, setCaptureMode] = (0, import_react3.useState)(false);
   const [captureResult, setCaptureResult] = (0, import_react3.useState)(null);
   const [showModal, setShowModal] = (0, import_react3.useState)(false);
@@ -1001,12 +1141,19 @@ function JarveBugReporter({
     clearCapturedErrors();
     clearCapturedNetworkErrors();
   }, []);
-  const siteId = apiKey.startsWith("brk_") ? apiKey.slice(4, 12) : "external";
+  const siteId = safeApiKey.startsWith("brk_") ? safeApiKey.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)(
+      FloatingButton,
+      {
+        isActive: captureMode,
+        onClick: toggleCaptureMode,
+        position: buttonPosition
+      }
+    ),
     /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       CaptureOverlay,
       {