@diegotsi/flint-react 0.5.0 → 0.6.0

package/dist/index.cjs

@@ -321,7 +321,8 @@ function FlintModal({
   getConsoleLogs,
   getNetworkErrors,
   getReplayEvents,
-  getExternalReplayUrl
+  getExternalReplayUrl,
+  initialSelection = ""
 }) {
   const { t } = (0, import_react_i18next.useTranslation)();
   const colors = resolveTheme(theme);
@@ -334,6 +335,12 @@ function FlintModal({
   const [status, setStatus] = (0, import_react2.useState)("idle");
   const [result, setResult] = (0, import_react2.useState)(null);
   const [errorMsg, setErrorMsg] = (0, import_react2.useState)("");
+  const [mode, setMode] = (0, import_react2.useState)(initialSelection ? "text" : "bug");
+  const [textOriginal, setTextOriginal] = (0, import_react2.useState)(initialSelection);
+  const [textSuggested, setTextSuggested] = (0, import_react2.useState)("");
+  const [textLang, setTextLang] = (0, import_react2.useState)(
+    typeof document !== "undefined" ? document.documentElement.lang?.split("-")[0] || "en" : "en"
+  );
   const fileRef = (0, import_react2.useRef)(null);
   const overlayRef = (0, import_react2.useRef)(null);
   (0, import_react2.useEffect)(() => {
@@ -354,7 +361,12 @@ function FlintModal({
   );
   const handleSubmit = async (e) => {
     e.preventDefault();
-    if (!description.trim()) return;
+    const isText = mode === "text";
+    if (isText) {
+      if (!textOriginal.trim() || !textSuggested.trim()) return;
+    } else {
+      if (!description.trim()) return;
+    }
     setStatus("submitting");
     setErrorMsg("");
     const collectedMeta = {
@@ -363,6 +375,13 @@ function FlintModal({
       consoleLogs: getConsoleLogs(),
       networkErrors: getNetworkErrors()
     };
+    if (isText) {
+      collectedMeta.textIssue = {
+        original: textOriginal.trim(),
+        suggested: textSuggested.trim(),
+        lang: textLang
+      };
+    }
     try {
       const res = await submitReport(
         serverUrl,
@@ -370,14 +389,15 @@ function FlintModal({
         {
           reporterId: user?.id ?? "anonymous",
           reporterName: user?.name ?? "Anonymous",
-          description: description.trim(),
-          expectedBehavior: expectedBehavior.trim() || void 0,
+          description: isText ? `[Text issue] "${textOriginal.trim()}" \u2192 "${textSuggested.trim()}"` : description.trim(),
+          expectedBehavior: !isText ? expectedBehavior.trim() || void 0 : void 0,
           externalReplayUrl: getExternalReplayUrl() || void 0,
-          severity,
+          severity: isText ? "P3" : severity,
           url: window.location.href,
-          meta: collectedMeta
+          meta: collectedMeta,
+          label: isText ? "TEXT" : void 0
         },
-        screenshot ?? void 0
+        !isText ? screenshot ?? void 0 : void 0
       );
       setResult(res);
       setStatus("success");
@@ -612,7 +632,88 @@ function FlintModal({
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("form", { onSubmit: handleSubmit, style: { padding: "20px 24px 24px" }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { marginBottom: 18 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: {
+          display: "flex",
+          gap: 4,
+          marginBottom: 20,
+          background: colors.backgroundSecondary,
+          borderRadius: 12,
+          padding: 4,
+          border: `1px solid ${inputBorder}`
+        }, children: ["bug", "text"].map((m) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: () => setMode(m),
+            style: {
+              flex: 1,
+              padding: "8px 10px",
+              borderRadius: 9,
+              border: "none",
+              cursor: "pointer",
+              fontSize: 13,
+              fontWeight: mode === m ? 700 : 500,
+              fontFamily: "inherit",
+              transition: "background 0.15s, color 0.15s",
+              background: mode === m ? `linear-gradient(135deg, ${colors.accent}, ${colors.accentHover})` : "transparent",
+              color: mode === m ? colors.buttonText : colors.textMuted,
+              boxShadow: mode === m ? `0 2px 8px ${colors.accent}30` : "none"
+            },
+            children: m === "bug" ? "\u{1F41B} Bug" : "\u{1F524} Text / Translation"
+          },
+          m
+        )) }),
+        mode === "text" && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { marginBottom: 14 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(FieldLabel, { colors, htmlFor: "flint-text-original", children: "Original text" }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              "textarea",
+              {
+                id: "flint-text-original",
+                style: { ...inputStyle, resize: "vertical", minHeight: 60 },
+                value: textOriginal,
+                onChange: (e) => setTextOriginal(e.target.value),
+                placeholder: "Text that is wrong on screen\u2026",
+                required: true
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { marginBottom: 14 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(FieldLabel, { colors, htmlFor: "flint-text-suggested", children: "Suggested correction" }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              "textarea",
+              {
+                id: "flint-text-suggested",
+                style: { ...inputStyle, resize: "vertical", minHeight: 60 },
+                value: textSuggested,
+                onChange: (e) => setTextSuggested(e.target.value),
+                placeholder: "How it should read\u2026",
+                required: true
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { marginBottom: 20 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(FieldLabel, { colors, htmlFor: "flint-text-lang", children: "Language" }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+              "select",
+              {
+                id: "flint-text-lang",
+                value: textLang,
+                onChange: (e) => setTextLang(e.target.value),
+                style: {
+                  ...inputStyle,
+                  appearance: "none",
+                  cursor: "pointer"
+                },
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: "en", children: "English (en)" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: "he", children: "\u05E2\u05D1\u05E8\u05D9\u05EA (he)" })
+                ]
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { marginBottom: 18, display: mode === "text" ? "none" : void 0 }, children: [
           /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(FieldLabel, { colors, children: t("severityLabel") }),
           /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 8 }, children: SEVERITIES.map((sev) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
             SeverityButton,
@@ -631,7 +732,7 @@ function FlintModal({
             sev
           )) })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { marginBottom: 14 }, children: [
+        mode === "bug" && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { marginBottom: 14 }, children: [
           /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(FieldLabel, { colors, htmlFor: "flint-description", children: t("whatIsBrokenLabel") }),
           /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
             "textarea",
@@ -645,7 +746,7 @@ function FlintModal({
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { marginBottom: 14 }, children: [
+        mode === "bug" && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { marginBottom: 14 }, children: [
           /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(FieldLabel, { colors, htmlFor: "flint-expected", children: t("expectedBehaviorLabel") }),
           /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
             "textarea",
@@ -658,7 +759,7 @@ function FlintModal({
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { marginBottom: 20 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { marginBottom: 20, display: mode === "text" ? "none" : void 0 }, children: [
           /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(FieldLabel, { colors, children: t("screenshotLabel") }),
           screenshot ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 10 }, children: [
             /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
@@ -1130,7 +1231,7 @@ function createConsoleCollector() {
 }
 
 // src/collectors/network.ts
-var MAX_ENTRIES2 = 20;
+var MAX_ENTRIES2 = 50;
 var BLOCKED_HOSTS = /* @__PURE__ */ new Set([
   "browser-intake-datadoghq.com",
   "rum.browser-intake-datadoghq.com",
@@ -1175,7 +1276,7 @@ function createNetworkCollector(extraBlockedHosts = []) {
         const url = typeof input === "string" ? input : input instanceof URL ? input.href : input.url;
         const startTime = Date.now();
         const res = await origFetch.call(window, input, init);
-        if (!isBlockedUrl(url, blocked)) {
+        if (res.status >= 400 && !isBlockedUrl(url, blocked)) {
           push({
             method,
             url: truncateUrl(url),
@@ -1191,7 +1292,7 @@ function createNetworkCollector(extraBlockedHosts = []) {
         const startTime = Date.now();
         const urlStr = typeof url === "string" ? url : url.href;
         this.addEventListener("load", () => {
-          if (!isBlockedUrl(urlStr, blocked)) {
+          if (this.status >= 400 && !isBlockedUrl(urlStr, blocked)) {
             push({
               method: method.toUpperCase(),
               url: truncateUrl(urlStr),
@@ -1269,19 +1370,77 @@ function WidgetContent({
   extraFields,
   buttonLabel,
   theme = "dark",
-  zIndex = 9999
+  zIndex = 9999,
+  datadogSite
 }) {
   const globalState = useFlintStore();
   const resolvedUser = user ?? globalState.user;
   const resolvedSessionReplay = extraFields?.sessionReplay ?? globalState.sessionReplay;
   const getExternalReplayUrl = () => {
     const src = resolvedSessionReplay;
-    return typeof src === "function" ? src() : src;
+    const explicit = typeof src === "function" ? src() : src;
+    if (explicit) return explicit;
+    if (datadogSite) {
+      try {
+        const ddRum = window.DD_RUM;
+        const ctx = ddRum?.getInternalContext?.();
+        if (ctx?.session_id) {
+          const now = Date.now();
+          const fromTs = now - 3e4;
+          const toTs = now + 5e3;
+          return `https://${datadogSite}/rum/replay/sessions/${ctx.session_id}?from_ts=${fromTs}&to_ts=${toTs}&tab=replay&live=false`;
+        }
+      } catch {
+      }
+    }
+    return void 0;
   };
   const { t } = (0, import_react_i18next3.useTranslation)();
   const [open, setOpen] = (0, import_react4.useState)(false);
   const [hovered, setHovered] = (0, import_react4.useState)(false);
+  const pendingSelection = (0, import_react4.useRef)("");
   const colors = resolveTheme(theme);
+  const [selectionTooltip, setSelectionTooltip] = (0, import_react4.useState)(null);
+  const tooltipRef = (0, import_react4.useRef)(null);
+  const triggerRef = (0, import_react4.useRef)(null);
+  const handleMouseUp = (0, import_react4.useCallback)((e) => {
+    const target = e.target;
+    if (tooltipRef.current?.contains(target)) return;
+    if (triggerRef.current?.contains(target)) return;
+    requestAnimationFrame(() => {
+      const sel = window.getSelection();
+      const text = sel?.toString().trim() ?? "";
+      if (text.length < 2) {
+        setSelectionTooltip(null);
+        return;
+      }
+      const range = sel?.getRangeAt(0);
+      if (!range) return;
+      const rect = range.getBoundingClientRect();
+      setSelectionTooltip({
+        text,
+        x: rect.left + rect.width / 2,
+        y: rect.top - 8
+      });
+    });
+  }, []);
+  const handleSelectionChange = (0, import_react4.useCallback)(() => {
+    const text = window.getSelection()?.toString().trim() ?? "";
+    if (text.length < 2) setSelectionTooltip(null);
+  }, []);
+  (0, import_react4.useEffect)(() => {
+    document.addEventListener("mouseup", handleMouseUp);
+    document.addEventListener("selectionchange", handleSelectionChange);
+    return () => {
+      document.removeEventListener("mouseup", handleMouseUp);
+      document.removeEventListener("selectionchange", handleSelectionChange);
+    };
+  }, [handleMouseUp, handleSelectionChange]);
+  const openWithSelection = (text) => {
+    pendingSelection.current = text;
+    setSelectionTooltip(null);
+    setOpen(true);
+  };
   const consoleCollector = (0, import_react4.useRef)(null);
   const networkCollector = (0, import_react4.useRef)(null);
   const replayEvents = (0, import_react4.useRef)([]);
@@ -1323,6 +1482,10 @@ function WidgetContent({
     /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
       "button",
       {
+        ref: triggerRef,
+        onMouseDown: () => {
+          pendingSelection.current = window.getSelection()?.toString().trim() ?? "";
+        },
         onClick: () => setOpen(true),
         onMouseEnter: () => setHovered(true),
         onMouseLeave: () => setHovered(false),
@@ -1355,6 +1518,44 @@ function WidgetContent({
         ]
       }
     ),
+    selectionTooltip && !open && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      "button",
+      {
+        ref: tooltipRef,
+        onClick: () => openWithSelection(selectionTooltip.text),
+        style: {
+          position: "fixed",
+          left: Math.max(8, Math.min(selectionTooltip.x - 70, window.innerWidth - 148)),
+          top: Math.max(8, selectionTooltip.y - 36),
+          zIndex: zIndex + 1,
+          display: "flex",
+          alignItems: "center",
+          gap: 6,
+          padding: "6px 12px",
+          borderRadius: 10,
+          border: "none",
+          background: `linear-gradient(135deg, ${colors.accent}, ${colors.accentHover})`,
+          color: colors.buttonText,
+          fontSize: 12,
+          fontWeight: 600,
+          cursor: "pointer",
+          fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+          boxShadow: `0 4px 20px rgba(0,0,0,0.25), 0 0 12px ${colors.accent}40`,
+          animation: "flint-tooltip-in 0.15s ease-out",
+          whiteSpace: "nowrap"
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(TextIcon, {}),
+          "Report text issue"
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("style", { children: `
+        @keyframes flint-tooltip-in {
+          from { opacity: 0; transform: translateY(4px); }
+          to { opacity: 1; transform: translateY(0); }
+        }
+      ` }),
     open && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       FlintModal,
       {
@@ -1364,16 +1565,28 @@ function WidgetContent({
         meta,
         theme,
         zIndex,
-        onClose: () => setOpen(false),
+        onClose: () => {
+          setOpen(false);
+          pendingSelection.current = "";
+        },
         getEnvironment: collectEnvironment,
         getConsoleLogs: () => consoleCollector.current?.getEntries() ?? [],
         getNetworkErrors: () => networkCollector.current?.getEntries() ?? [],
         getReplayEvents: () => [...replayEvents.current],
-        getExternalReplayUrl
+        getExternalReplayUrl,
+        initialSelection: pendingSelection.current
       }
     )
   ] });
 }
+function TextIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M17 10H3" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M21 6H3" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M21 14H3" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M17 18H3" })
+  ] });
+}
 function SparkIcon2() {
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     "svg",