@jarve/bug-reporter 0.1.0 → 0.2.0

package/dist/index.mjs

@@ -43,7 +43,7 @@ function FloatingButton({ isActive, onClick }) {
         "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"
+        "bottom-4 right-4 h-11 w-11 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",
@@ -111,7 +111,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)) {
@@ -127,10 +138,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) {
@@ -242,14 +253,51 @@ function clearCapturedErrors() {
 
 // src/network-capture.ts
 var MAX_REQUESTS = 30;
+var MAX_BODY_READ_BYTES = 64 * 1024;
+var TRUNCATE_LEN = 500;
 var capturedRequests = [];
 var isCapturing2 = false;
 var originalFetch = null;
-function truncateBody(body, maxLen = 500) {
+function truncateBody(body, maxLen = TRUNCATE_LEN) {
   if (!body) return null;
   if (body.length <= maxLen) return body;
   return body.slice(0, maxLen) + "...(truncated)";
 }
+async function readBoundedBody(response) {
+  try {
+    const contentLength = response.headers.get("Content-Length");
+    if (contentLength) {
+      const size = parseInt(contentLength, 10);
+      if (!isNaN(size) && size > MAX_BODY_READ_BYTES) {
+        return `[body too large: ${size} bytes]`;
+      }
+    }
+    const cloned = response.clone();
+    if (cloned.body && typeof cloned.body.getReader === "function") {
+      const reader = cloned.body.getReader();
+      const chunks = [];
+      let totalBytes = 0;
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+        totalBytes += value.byteLength;
+        if (totalBytes > MAX_BODY_READ_BYTES) {
+          reader.cancel().catch(() => {
+          });
+          return `[body too large: >${MAX_BODY_READ_BYTES} bytes]`;
+        }
+        chunks.push(value);
+      }
+      const decoder = new TextDecoder();
+      const text2 = chunks.map((c) => decoder.decode(c, { stream: true })).join("");
+      return truncateBody(text2);
+    }
+    const text = await cloned.text();
+    return truncateBody(text);
+  } catch (e) {
+    return null;
+  }
+}
 function startNetworkCapture() {
   if (isCapturing2 || typeof window === "undefined") return;
   if (window.fetch.__bugReporterPatched) return;
@@ -265,13 +313,7 @@ function startNetworkCapture() {
     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) {
-        }
+        const responseBody = await readBoundedBody(response);
         capturedRequests.push({
           url,
           method: method.toUpperCase(),
@@ -324,6 +366,15 @@ function clearCapturedNetworkErrors() {
 
 // src/capture-overlay.tsx
 import { Fragment, jsx as jsx2, jsxs } from "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,
@@ -335,12 +386,79 @@ function CaptureOverlay({
   const [hoveredElement, setHoveredElement] = useState(null);
   const [hoveredRect, setHoveredRect] = useState(null);
   const [isCapturing3, setIsCapturing] = useState(false);
+  const [isTouchMode, setIsTouchMode] = useState(false);
+  const [selectedSection, setSelectedSection] = useState(null);
+  const [selectedRect, setSelectedRect] = useState(null);
+  const [selectedTarget, setSelectedTarget] = useState(null);
   const overlayRef = useRef(null);
   const hoveredElementRef = useRef(null);
   const rafRef = useRef(null);
+  const touchCoordsRef = useRef(null);
+  useEffect(() => {
+    if (isActive) {
+      setIsTouchMode(isTouchCapable());
+    }
+  }, [isActive]);
+  const captureScreenshot = 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();
+        const pixelRatio = sectionRect.width > MAX_DIMENSION || sectionRect.height > MAX_DIMENSION ? 1 : 2;
+        const dataUrl = await toPng(section, {
+          quality: 0.9,
+          pixelRatio,
+          skipFonts: true
+        });
+        const blob = dataUrlToBlob(dataUrl);
+        const metadata = collectMetadata(section, siteId, reporterName, reporterEmail, elementInfo);
+        const consoleErrors = getCapturedErrors();
+        const networkErrors = getCapturedNetworkErrors();
+        onCapture({ screenshot: blob, metadata, consoleErrors, networkErrors });
+      } catch (err) {
+        console.warn("Bug reporter: first capture attempt failed, retrying with simpler settings", err);
+        try {
+          const dataUrl = await toPng(section, {
+            quality: 0.6,
+            pixelRatio: 1,
+            skipFonts: true,
+            cacheBust: true
+          });
+          const retryBlob = dataUrlToBlob(dataUrl);
+          const metadata = collectMetadata(section, siteId, reporterName, reporterEmail, elementInfo);
+          const consoleErrors = getCapturedErrors();
+          const networkErrors = getCapturedNetworkErrors();
+          onCapture({ screenshot: retryBlob, metadata, consoleErrors, networkErrors });
+        } catch (e) {
+          console.error("Bug reporter: screenshot capture failed after retry");
+          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);
+      }
+    },
+    [siteId, reporterName, reporterEmail, onCapture]
+  );
   const handleMouseMove = useCallback(
     (e) => {
-      if (!isActive || isCapturing3) return;
+      if (!isActive || isCapturing3 || isTouchMode) return;
       if (rafRef.current) return;
       rafRef.current = requestAnimationFrame(() => {
         rafRef.current = null;
@@ -358,12 +476,11 @@ function CaptureOverlay({
         setHoveredRect(section ? section.getBoundingClientRect() : null);
       });
     },
-    [isActive, isCapturing3]
+    [isActive, isCapturing3, isTouchMode]
   );
   const handleClick = useCallback(
     async (e) => {
-      var _a;
-      if (!isActive || isCapturing3) return;
+      if (!isActive || isCapturing3 || isTouchMode) return;
       const target = e.target;
       if (!(target instanceof HTMLElement)) return;
       if (target.closest("[data-bug-reporter]")) return;
@@ -371,59 +488,41 @@ function CaptureOverlay({
       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 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);
+      await captureScreenshot(section, target, extractCoordinates(e));
+    },
+    [isActive, isCapturing3, isTouchMode, captureScreenshot]
+  );
+  const handleTouchEnd = 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 = useCallback(async () => {
+    if (!selectedSection || !selectedTarget || !touchCoordsRef.current) return;
+    await captureScreenshot(selectedSection, selectedTarget, touchCoordsRef.current);
+  }, [selectedSection, selectedTarget, captureScreenshot]);
+  const handlePointerDown = useCallback(
+    (e) => {
+      if (!isActive) return;
+      if (e.pointerType === "touch") {
+        setIsTouchMode(true);
+      } else if (e.pointerType === "mouse") {
+        setIsTouchMode(false);
       }
     },
-    [isActive, isCapturing3, siteId, reporterName, reporterEmail, onCapture]
+    [isActive]
   );
   const handleKeyDown = useCallback(
     (e) => {
@@ -436,65 +535,126 @@ function CaptureOverlay({
     [isActive, onCancel]
   );
   const handleScroll = useCallback(() => {
-    if (!hoveredElementRef.current) return;
-    setHoveredRect(hoveredElementRef.current.getBoundingClientRect());
-  }, []);
+    if (hoveredElementRef.current) {
+      setHoveredRect(hoveredElementRef.current.getBoundingClientRect());
+    }
+    if (selectedSection) {
+      setSelectedRect(selectedSection.getBoundingClientRect());
+    }
+  }, [selectedSection]);
   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__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx2(
       "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: [
+        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 flex items-center justify-center gap-3",
+        children: isTouchMode ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx2("span", { children: "Tap the section with the bug" }),
+          /* @__PURE__ */ jsx2(
+            "button",
+            {
+              onClick: onCancel,
+              className: "px-3 py-1 min-h-[44px] bg-white/20 rounded-md text-sm font-medium",
+              children: "Cancel"
+            }
+          )
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
           "Click on the section with the bug. Press ",
           /* @__PURE__ */ jsx2("kbd", { className: "px-1.5 py-0.5 bg-indigo-800 rounded text-xs mx-1", children: "Esc" }),
           " to cancel."
-        ]
+        ] })
       }
     ),
-    /* @__PURE__ */ jsx2(
+    showHighlight && highlightRect && /* @__PURE__ */ jsx2(
       "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,
+          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__ */ jsx2("style", { children: `* { cursor: crosshair !important; }` })
+    isTouchMode && selectedSection && !isCapturing3 && /* @__PURE__ */ jsx2(
+      "div",
+      {
+        "data-bug-reporter": true,
+        className: "fixed bottom-0 left-0 right-0 z-[10000] bg-white border-t border-gray-200 shadow-lg",
+        style: { paddingBottom: "env(safe-area-inset-bottom, 0px)" },
+        children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-3 gap-3", children: [
+          /* @__PURE__ */ jsx2("span", { className: "text-sm font-medium text-gray-900 truncate", children: "Capture this section?" }),
+          /* @__PURE__ */ jsxs("div", { className: "flex gap-2 shrink-0", children: [
+            /* @__PURE__ */ jsx2(
+              "button",
+              {
+                onClick: () => {
+                  setSelectedSection(null);
+                  setSelectedRect(null);
+                  setSelectedTarget(null);
+                  touchCoordsRef.current = null;
+                },
+                className: "px-4 min-h-[44px] rounded-md border border-gray-300 text-sm font-medium text-gray-700",
+                children: "Cancel"
+              }
+            ),
+            /* @__PURE__ */ jsx2(
+              "button",
+              {
+                onClick: handleConfirmCapture,
+                className: "px-4 min-h-[44px] rounded-md bg-indigo-600 text-white text-sm font-medium",
+                children: "Capture"
+              }
+            )
+          ] })
+        ] })
+      }
+    ),
+    !isTouchMode && /* @__PURE__ */ jsx2("style", { children: `* { cursor: crosshair !important; }` })
   ] });
 }
 
 // src/report-modal.tsx
-import { useState as useState2, useRef as useRef2, useEffect as useEffect2, useCallback as useCallback2 } from "react";
+import { useState as useState2, useRef as useRef2, useEffect as useEffect2, useCallback as useCallback2, useMemo } from "react";
 import { X, Send, Loader2, CheckCircle2 } from "lucide-react";
 import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 function ReportModal({
@@ -515,34 +675,31 @@ function ReportModal({
   const chatEndRef = useRef2(null);
   const inputRef = useRef2(null);
   const hasInitRef = useRef2(false);
-  const apiHeaders = {
-    "Content-Type": "application/json",
-    "X-Bug-Reporter-Key": apiConfig.apiKey
-  };
+  const apiHeaders = useMemo(
+    () => ({
+      "Content-Type": "application/json",
+      "X-Bug-Reporter-Key": apiConfig.apiKey
+    }),
+    [apiConfig.apiKey]
+  );
   useEffect2(() => {
     if ((captureResult == null ? void 0 : captureResult.screenshot) && captureResult.screenshot.size > 0) {
       const url = URL.createObjectURL(captureResult.screenshot);
-      setScreenshotUrl(url);
-      return () => URL.revokeObjectURL(url);
+      setScreenshotUrl((prev) => {
+        if (prev) URL.revokeObjectURL(prev);
+        return url;
+      });
+      return () => {
+        URL.revokeObjectURL(url);
+        setScreenshotUrl(null);
+      };
     }
+    setScreenshotUrl((prev) => {
+      if (prev) URL.revokeObjectURL(prev);
+      return null;
+    });
   }, [captureResult]);
-  useEffect2(() => {
-    if (isOpen && captureResult && !hasInitRef.current) {
-      hasInitRef.current = true;
-      sendInitialMessage();
-    }
-  }, [isOpen, captureResult]);
-  useEffect2(() => {
-    var _a;
-    (_a = chatEndRef.current) == null ? void 0 : _a.scrollIntoView({ behavior: "smooth" });
-  }, [messages]);
-  useEffect2(() => {
-    var _a;
-    if (isOpen && !isLoading) {
-      (_a = inputRef.current) == null ? void 0 : _a.focus();
-    }
-  }, [isOpen, isLoading, messages]);
-  async function sendInitialMessage() {
+  const sendInitialMessage = useCallback2(async () => {
     if (!captureResult) return;
     setIsLoading(true);
     try {
@@ -557,6 +714,16 @@ function ReportModal({
           clickedElement: captureResult.metadata.clickedElement || null
         })
       });
+      if (response.status === 401) {
+        console.error("Bug reporter: invalid or missing API key. Check your BugReporter apiKey prop.");
+        setMessages([
+          {
+            role: "assistant",
+            content: "The bug reporter service isn't configured correctly. Please let the site administrator know."
+          }
+        ]);
+        return;
+      }
       if (!response.ok) throw new Error("Failed to get AI response");
       const data = await response.json();
       setMessages([{ role: "assistant", content: data.message }]);
@@ -570,53 +737,23 @@ function ReportModal({
     } 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);
+  }, [captureResult, apiConfig.apiUrl, apiHeaders]);
+  useEffect2(() => {
+    if (isOpen && captureResult && !hasInitRef.current) {
+      hasInitRef.current = true;
+      sendInitialMessage();
     }
-  }
+  }, [isOpen, captureResult, sendInitialMessage]);
+  useEffect2(() => {
+    var _a;
+    (_a = chatEndRef.current) == null ? void 0 : _a.scrollIntoView({ behavior: "smooth" });
+  }, [messages]);
+  useEffect2(() => {
+    var _a;
+    if (isOpen && !isLoading) {
+      (_a = inputRef.current) == null ? void 0 : _a.focus();
+    }
+  }, [isOpen, isLoading, messages]);
   const submitReport = useCallback2(
     async (conversation, structuredReport) => {
       if (!captureResult || modalState !== "chatting") return;
@@ -681,10 +818,67 @@ function ReportModal({
         setModalState("error");
       }
     },
-    [captureResult, apiConfig, apiHeaders, modalState]
+    [captureResult, apiConfig.apiUrl, apiHeaders, modalState]
   );
-  function handleManualSubmit() {
+  const handleManualSubmit = useCallback2(() => {
     submitReport(messages);
+  }, [submitReport, messages]);
+  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.status === 401) {
+        console.error("Bug reporter: invalid or missing API key. Check your BugReporter apiKey prop.");
+        setMessages([
+          ...newMessages,
+          {
+            role: "assistant",
+            content: "The bug reporter service isn't configured correctly. Please let the site administrator know."
+          }
+        ]);
+        return;
+      }
+      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);
+    }
   }
   function handleClose() {
     setMessages([]);
@@ -692,11 +886,15 @@ function ReportModal({
     setModalState("chatting");
     setReportId(null);
     setErrorMessage(null);
+    if (screenshotUrl) {
+      URL.revokeObjectURL(screenshotUrl);
+    }
+    setScreenshotUrl(null);
     hasInitRef.current = false;
     onClose();
   }
   function handleKeyDown(e) {
-    if (e.key === "Enter" && !e.shiftKey) {
+    if (e.key === "Enter" && !e.shiftKey && !isTouchCapable()) {
       e.preventDefault();
       sendMessage();
     }