@kelet-ai/feedback-ui 1.0.2 → 1.1.3

package/dist/feedback-ui.umd.js

@@ -355,8 +355,90 @@
     return jsxRuntime.exports;
   }
   var jsxRuntimeExports = requireJsxRuntime();
+  let latestEvent = null;
+  let isInitialized = false;
+  function serializeTarget(target) {
+    if (!target || !(target instanceof Element)) return "unknown";
+    const el = target;
+    if (el.id) return `#${el.id}`;
+    const dataId = el.getAttribute("data-feedback-id");
+    if (dataId) return `[data-feedback-id="${dataId}"]`;
+    const path = [];
+    let current = el;
+    let depth = 0;
+    const MAX_DEPTH = 5;
+    while (current && current !== document.body && depth < MAX_DEPTH) {
+      let selector = current.tagName.toLowerCase();
+      if (current.classList.length > 0) {
+        const className = Array.from(current.classList)[0];
+        selector += `.${className}`;
+      }
+      const parent = current.parentElement;
+      if (parent) {
+        const siblings = Array.from(parent.children);
+        const index = siblings.indexOf(current) + 1;
+        if (siblings.length > 1) {
+          selector += `:nth-child(${index})`;
+        }
+      }
+      path.unshift(selector);
+      current = parent;
+      depth++;
+    }
+    return path.join(" > ");
+  }
+  function getTargetText(target) {
+    if (!target || !(target instanceof Element)) return "";
+    const el = target;
+    const ariaLabel = el.getAttribute("aria-label");
+    if (ariaLabel) return ariaLabel.substring(0, 50);
+    const text = el.textContent?.trim() || "";
+    return text.substring(0, 50);
+  }
+  function captureEvent(e) {
+    const captured = {
+      type: e.type,
+      targetSelector: serializeTarget(e.target),
+      targetText: getTargetText(e.target),
+      timestamp: Date.now()
+    };
+    if (e instanceof MouseEvent) {
+      captured.coordinates = { x: e.clientX, y: e.clientY };
+    } else if (e instanceof KeyboardEvent) {
+      captured.key = e.key;
+    }
+    return captured;
+  }
+  function initEventCapture() {
+    if (isInitialized || typeof window === "undefined") return;
+    const eventTypes = ["click", "keydown", "submit", "change"];
+    eventTypes.forEach((type) => {
+      window.addEventListener(
+        type,
+        (e) => {
+          latestEvent = captureEvent(e);
+        },
+        {
+          capture: true,
+          // Intercept before React handlers
+          passive: true
+          // Better scroll performance
+        }
+      );
+    });
+    isInitialized = true;
+  }
+  function getLatestEvent() {
+    if (!latestEvent) return null;
+    const age = Date.now() - latestEvent.timestamp;
+    if (age > 1e4) {
+      latestEvent = null;
+      return null;
+    }
+    return { ...latestEvent };
+  }
   const KeletContext = require$$0$1.createContext(null);
-  const DefaultKeletBaseUrl = "https://api.kelet.ai/api";
+  const DefaultKeletBaseUrl = "https://api.kelet.ai";
   const useKelet = () => {
     const context = require$$0$1.useContext(KeletContext);
     if (!context) {
@@ -377,6 +459,9 @@
     }
   };
   const KeletProvider = ({ apiKey, project, baseUrl, children }) => {
+    require$$0$1.useEffect(() => {
+      initEventCapture();
+    }, []);
     const parentContext = require$$0$1.useContext(KeletContext);
     const resolvedApiKey = apiKey || parentContext?.api_key;
     if (!resolvedApiKey) {
@@ -384,17 +469,29 @@
         "apiKey is required either directly or from a parent KeletProvider"
       );
     }
+    let resolvedBaseUrl = baseUrl || DefaultKeletBaseUrl;
+    if (resolvedBaseUrl.endsWith("/api")) {
+      resolvedBaseUrl = resolvedBaseUrl.slice(0, -4);
+    }
+    if (resolvedBaseUrl.endsWith("/")) {
+      resolvedBaseUrl = resolvedBaseUrl.slice(0, -1);
+    }
     const feedback = async (data) => {
-      const resolvedBaseUrl = baseUrl || DefaultKeletBaseUrl;
-      const url = `${resolvedBaseUrl}/projects/${project}/feedback`;
+      const url = `${resolvedBaseUrl}/api/projects/${project}/signal`;
+      const capturedEvent = getLatestEvent();
+      const metadata = {
+        ...data.extra_metadata ?? {},
+        ...capturedEvent && { $dom_event: capturedEvent }
+      };
       const req = {
-        tx_id: data.tx_id,
+        session_id: data.session_id,
         source: data.source || "EXPLICIT",
         vote: data.vote,
         explanation: data.explanation,
         correction: data.correction,
-        selection: data.selection
-        // Include trigger_name if needed in the future
+        selection: data.selection,
+        trigger_name: data.trigger_name,
+        metadata: Object.keys(metadata).length > 0 ? metadata : void 0
       };
       const response = await fetch(url, {
         method: "POST",
@@ -456,11 +553,11 @@
     children,
     onFeedback,
     defaultText = "",
-    tx_id: txIdProp,
+    session_id: sessionIdProp,
     extra_metadata,
     trigger_name
   }) => {
-    const tx_id = typeof txIdProp === "function" ? txIdProp() : txIdProp;
+    const session_id = typeof sessionIdProp === "function" ? sessionIdProp() : sessionIdProp;
     const [showPopover, setShowPopover] = require$$0$1.useState(false);
     const [feedbackText, setFeedbackText] = require$$0$1.useState(defaultText);
     const [isSubmitting, setIsSubmitting] = require$$0$1.useState(false);
@@ -477,11 +574,11 @@
       setIsSubmitting(false);
       setVote(null);
       setTimeout(() => triggerRef.current?.focus(), 0);
-    }, [tx_id, defaultText]);
+    }, [session_id, defaultText]);
     const handleUpvote = require$$0$1.useCallback(async () => {
       setVote("upvote");
       const data = {
-        tx_id,
+        session_id,
         vote: "upvote",
         ...extra_metadata && { extra_metadata },
         ...trigger_name && { trigger_name }
@@ -492,12 +589,12 @@
       } finally {
         setIsSubmitting(false);
       }
-    }, [handler, tx_id, extra_metadata, trigger_name]);
+    }, [handler, session_id, extra_metadata, trigger_name]);
     const handleDownvote = require$$0$1.useCallback(async () => {
       setVote("downvote");
       if (handler) {
         const data = {
-          tx_id,
+          session_id,
           vote: "downvote",
           ...extra_metadata && { extra_metadata },
           ...trigger_name && { trigger_name }
@@ -520,7 +617,7 @@
         document.body.appendChild(announcement);
         setTimeout(() => document.body.removeChild(announcement), 1e3);
       }, 0);
-    }, [handler, tx_id, extra_metadata, trigger_name]);
+    }, [handler, session_id, extra_metadata, trigger_name]);
     const handleTextareaChange = require$$0$1.useCallback(
       (e) => {
         setFeedbackText(e.target.value);
@@ -531,7 +628,7 @@
       const hasText = feedbackText.trim().length > 0;
       if (hasText) {
         const data = {
-          tx_id,
+          session_id,
           vote: "downvote",
           explanation: feedbackText,
           ...extra_metadata && { extra_metadata },
@@ -555,7 +652,14 @@
         document.body.appendChild(announcement);
         setTimeout(() => document.body.removeChild(announcement), 1e3);
       }
-    }, [handler, feedbackText, defaultText, tx_id, extra_metadata, trigger_name]);
+    }, [
+      handler,
+      feedbackText,
+      defaultText,
+      session_id,
+      extra_metadata,
+      trigger_name
+    ]);
     const handleKeyDown = require$$0$1.useCallback(
       (e) => {
         if (e.key === "Escape") {
@@ -604,7 +708,7 @@
       triggerRef,
       popoverId,
       triggerId,
-      tx_id,
+      session_id,
       extra_metadata,
       trigger_name
     };
@@ -2019,7 +2123,7 @@
       return String(value);
     }
   }
-  function useStateChangeTracking(currentState, tx_id, options) {
+  function useStateChangeTracking(currentState, session_id, options) {
     const defaultFeedbackHandler = useDefaultFeedbackHandler();
     const feedbackHandler = options?.onFeedback || defaultFeedbackHandler;
     const debounceMs = options?.debounceMs ?? 3e3;
@@ -2054,9 +2158,9 @@
         } else {
           vote = diffPercentage > 0.5 ? "downvote" : "upvote";
         }
-        const idString = typeof tx_id === "function" ? tx_id(endState) : tx_id;
+        const idString = typeof session_id === "function" ? session_id(endState) : session_id;
         feedbackHandler({
-          tx_id: idString,
+          session_id: idString,
           vote,
           explanation: `State change with diff percentage: ${(diffPercentage * 100).toFixed(1)}%`,
           correction: diffString,
@@ -2065,7 +2169,7 @@
           trigger_name: triggerName
         });
       },
-      [options, tx_id, diffType, feedbackHandler]
+      [options, session_id, diffType, feedbackHandler]
     );
     const notifyChange = require$$0$1.useCallback(
       (trigger_name) => {
@@ -2134,7 +2238,7 @@
       };
     }, [
       currentState,
-      tx_id,
+      session_id,
       options,
       feedbackHandler,
       diffType,
@@ -2148,9 +2252,9 @@
       notifyChange
     };
   }
-  function useFeedbackState(initialState, tx_id, options) {
+  function useFeedbackState(initialState, session_id, options) {
     const [state, setStateInternal] = require$$0$1.useState(initialState);
-    const { notifyChange } = useStateChangeTracking(state, tx_id, options);
+    const { notifyChange } = useStateChangeTracking(state, session_id, options);
     const setState = require$$0$1.useCallback(
       (value, trigger_name) => {
         notifyChange(trigger_name);