@probat/react 0.1.5 → 0.2.0

package/dist/index.mjs

@@ -1,6 +1,6 @@
 "use client";
 "use client";
-import React4, { createContext, useMemo, useContext, useCallback, useState, useEffect } from 'react';
+import React4, { createContext, useMemo, useEffect, useContext, useCallback, useState } from 'react';
 
 // src/utils/environment.ts
 function detectEnvironment() {
@@ -14,6 +14,336 @@ function detectEnvironment() {
   return "prod";
 }
 
+// src/utils/heatmapTracker.ts
+function getStoredExperimentInfo() {
+  if (typeof window === "undefined") return {};
+  try {
+    const proposalId = window.localStorage.getItem("probat_active_proposal_id") || void 0;
+    const variantLabel = window.localStorage.getItem("probat_active_variant_label") || void 0;
+    return { proposalId, variantLabel };
+  } catch {
+    return {};
+  }
+}
+var HeatmapTracker = class {
+  constructor(config) {
+    this.clicks = [];
+    this.movements = [];
+    this.batchTimer = null;
+    this.cursorBatchTimer = null;
+    this.lastCursorTime = 0;
+    this.isInitialized = false;
+    this.handleMouseMove = (event) => {
+      if (!this.config.enabled || !this.config.trackCursor) return;
+      if (typeof window === "undefined") return;
+      const stored = getStoredExperimentInfo();
+      const proposalId = this.config.proposalId || stored.proposalId;
+      const variantLabel = this.config.variantLabel || stored.variantLabel;
+      const now2 = Date.now();
+      const cursorThrottle = this.config.cursorThrottle ?? 100;
+      if (now2 - this.lastCursorTime < cursorThrottle) {
+        return;
+      }
+      this.lastCursorTime = now2;
+      if (this.movements.length < 3) {
+        console.log("[PROBAT Heatmap] Cursor movement captured:", {
+          x: event.clientX,
+          y: event.clientY,
+          movementsInBatch: this.movements.length + 1
+        });
+      }
+      const pageUrl = window.location.href;
+      const siteUrl = window.location.origin;
+      const x = event.clientX;
+      const y = event.clientY;
+      const viewportWidth = window.innerWidth;
+      const viewportHeight = window.innerHeight;
+      const movementEvent = {
+        page_url: pageUrl,
+        site_url: siteUrl,
+        x_coordinate: x,
+        y_coordinate: y,
+        viewport_width: viewportWidth,
+        viewport_height: viewportHeight,
+        session_id: this.sessionId,
+        proposal_id: proposalId,
+        variant_label: variantLabel
+      };
+      this.movements.push(movementEvent);
+      const cursorBatchSize = this.config.cursorBatchSize ?? 50;
+      if (this.movements.length >= cursorBatchSize) {
+        this.sendCursorBatch();
+      } else {
+        this.scheduleCursorBatchSend();
+      }
+    };
+    this.handleClick = (event) => {
+      if (!this.config.enabled) return;
+      if (typeof window === "undefined") return;
+      const stored = getStoredExperimentInfo();
+      const proposalId = this.config.proposalId || stored.proposalId;
+      const variantLabel = this.config.variantLabel || stored.variantLabel;
+      const target = event.target;
+      if (!target) return;
+      if (this.shouldExcludeElement(target)) {
+        return;
+      }
+      const pageUrl = window.location.href;
+      const siteUrl = window.location.origin;
+      const x = event.clientX;
+      const y = event.clientY;
+      const viewportWidth = window.innerWidth;
+      const viewportHeight = window.innerHeight;
+      const elementInfo = this.extractElementInfo(target);
+      const clickEvent = {
+        page_url: pageUrl,
+        site_url: siteUrl,
+        x_coordinate: x,
+        y_coordinate: y,
+        viewport_width: viewportWidth,
+        viewport_height: viewportHeight,
+        element_tag: elementInfo.tag,
+        element_class: elementInfo.class,
+        element_id: elementInfo.id,
+        session_id: this.sessionId,
+        proposal_id: proposalId,
+        variant_label: variantLabel
+      };
+      this.clicks.push(clickEvent);
+      const batchSize = this.config.batchSize ?? 10;
+      if (this.clicks.length >= batchSize) {
+        this.sendBatch();
+      } else {
+        this.scheduleBatchSend();
+      }
+    };
+    this.sessionId = this.getOrCreateSessionId();
+    const stored = getStoredExperimentInfo();
+    this.config = {
+      apiBaseUrl: config.apiBaseUrl,
+      batchSize: config.batchSize || 10,
+      batchInterval: config.batchInterval || 5e3,
+      enabled: config.enabled !== false,
+      excludeSelectors: config.excludeSelectors || [
+        "[data-heatmap-exclude]",
+        'input[type="password"]',
+        'input[type="email"]',
+        "textarea"
+      ],
+      trackCursor: config.trackCursor !== false,
+      // Enable cursor tracking by default
+      cursorThrottle: config.cursorThrottle || 100,
+      // Capture cursor position every 100ms
+      cursorBatchSize: config.cursorBatchSize || 50,
+      // Send every 50 movements
+      proposalId: config.proposalId || stored.proposalId,
+      variantLabel: config.variantLabel || stored.variantLabel
+    };
+  }
+  getOrCreateSessionId() {
+    if (typeof window === "undefined") return "";
+    const storageKey = "probat_heatmap_session_id";
+    let sessionId = localStorage.getItem(storageKey);
+    if (!sessionId) {
+      sessionId = `heatmap_${Date.now()}_${Math.random().toString(36).substring(2, 15)}`;
+      localStorage.setItem(storageKey, sessionId);
+    }
+    return sessionId;
+  }
+  shouldExcludeElement(element) {
+    if (!this.config.excludeSelectors) return false;
+    for (const selector of this.config.excludeSelectors) {
+      if (element.matches(selector) || element.closest(selector)) {
+        return true;
+      }
+    }
+    return false;
+  }
+  extractElementInfo(element) {
+    return {
+      tag: element.tagName || null,
+      class: element.className && typeof element.className === "string" ? element.className : null,
+      id: element.id || null
+    };
+  }
+  scheduleCursorBatchSend() {
+    if (this.cursorBatchTimer) {
+      clearTimeout(this.cursorBatchTimer);
+    }
+    this.cursorBatchTimer = setTimeout(() => {
+      if (this.movements.length > 0) {
+        this.sendCursorBatch();
+      }
+    }, this.config.batchInterval ?? 5e3);
+  }
+  async sendCursorBatch() {
+    if (this.movements.length === 0) return;
+    const siteUrl = this.movements[0]?.site_url || window.location.origin;
+    const batch = {
+      movements: this.movements,
+      site_url: siteUrl,
+      proposal_id: this.config.proposalId,
+      variant_label: this.config.variantLabel
+    };
+    this.movements = [];
+    if (this.cursorBatchTimer) {
+      clearTimeout(this.cursorBatchTimer);
+      this.cursorBatchTimer = null;
+    }
+    try {
+      console.log("[PROBAT Heatmap] Sending cursor movements batch:", {
+        count: batch.movements.length,
+        site_url: batch.site_url
+      });
+      const response = await fetch(`${this.config.apiBaseUrl}/api/heatmap/cursor-movements`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify(batch)
+        // Don't wait for response - fire and forget for performance
+      });
+      if (!response.ok) {
+        console.warn("[PROBAT Heatmap] Failed to send cursor movements:", response.status);
+      } else {
+        console.log("[PROBAT Heatmap] Successfully sent cursor movements batch");
+      }
+    } catch (error) {
+      console.warn("[PROBAT Heatmap] Error sending cursor movements:", error);
+    }
+  }
+  scheduleBatchSend() {
+    if (this.batchTimer) {
+      clearTimeout(this.batchTimer);
+    }
+    this.batchTimer = setTimeout(() => {
+      if (this.clicks.length > 0) {
+        this.sendBatch();
+      }
+    }, this.config.batchInterval ?? 5e3);
+  }
+  async sendBatch() {
+    if (this.clicks.length === 0) return;
+    if (this.batchTimer) {
+      clearTimeout(this.batchTimer);
+      this.batchTimer = null;
+    }
+    const siteUrl = this.clicks[0]?.site_url || window.location.origin;
+    const batch = {
+      clicks: [...this.clicks],
+      site_url: siteUrl
+    };
+    this.clicks = [];
+    try {
+      const response = await fetch(`${this.config.apiBaseUrl}/api/heatmap/clicks`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify(batch)
+      });
+      if (!response.ok) {
+        console.warn("[PROBAT Heatmap] Failed to send clicks:", response.status);
+      }
+    } catch (error) {
+      console.warn("[PROBAT Heatmap] Error sending clicks:", error);
+    }
+  }
+  init() {
+    if (this.isInitialized) {
+      console.warn("[PROBAT Heatmap] Tracker already initialized");
+      return;
+    }
+    if (typeof window === "undefined") {
+      return;
+    }
+    document.addEventListener("click", this.handleClick, true);
+    if (this.config.trackCursor) {
+      document.addEventListener("mousemove", this.handleMouseMove, { passive: true });
+      console.log("[PROBAT Heatmap] Cursor tracking enabled");
+    } else {
+      console.log("[PROBAT Heatmap] Cursor tracking disabled");
+    }
+    this.isInitialized = true;
+    console.log("[PROBAT Heatmap] Tracker initialized", {
+      enabled: this.config.enabled,
+      trackCursor: this.config.trackCursor,
+      cursorThrottle: this.config.cursorThrottle,
+      cursorBatchSize: this.config.cursorBatchSize
+    });
+    window.addEventListener("beforeunload", () => {
+      if (this.clicks.length > 0) {
+        const siteUrl = this.clicks[0]?.site_url || window.location.origin;
+        const batch = {
+          clicks: this.clicks,
+          site_url: siteUrl
+        };
+        const blob = new Blob([JSON.stringify(batch)], {
+          type: "application/json"
+        });
+        navigator.sendBeacon(
+          `${this.config.apiBaseUrl}/api/heatmap/clicks`,
+          blob
+        );
+      }
+      if (this.movements.length > 0) {
+        const siteUrl = this.movements[0]?.site_url || window.location.origin;
+        const batch = {
+          movements: this.movements,
+          site_url: siteUrl
+        };
+        const blob = new Blob([JSON.stringify(batch)], {
+          type: "application/json"
+        });
+        navigator.sendBeacon(
+          `${this.config.apiBaseUrl}/api/heatmap/cursor-movements`,
+          blob
+        );
+      }
+    });
+  }
+  stop() {
+    if (!this.isInitialized) return;
+    if (this.clicks.length > 0) {
+      this.sendBatch();
+    }
+    if (this.movements.length > 0) {
+      this.sendCursorBatch();
+    }
+    document.removeEventListener("click", this.handleClick, true);
+    if (this.config.trackCursor) {
+      document.removeEventListener("mousemove", this.handleMouseMove);
+    }
+    if (this.batchTimer) {
+      clearTimeout(this.batchTimer);
+      this.batchTimer = null;
+    }
+    if (this.cursorBatchTimer) {
+      clearTimeout(this.cursorBatchTimer);
+      this.cursorBatchTimer = null;
+    }
+    this.isInitialized = false;
+  }
+};
+var trackerInstance = null;
+function initHeatmapTracking(config) {
+  if (trackerInstance) {
+    trackerInstance.stop();
+  }
+  trackerInstance = new HeatmapTracker(config);
+  trackerInstance.init();
+  return trackerInstance;
+}
+function getHeatmapTracker() {
+  return trackerInstance;
+}
+function stopHeatmapTracking() {
+  if (trackerInstance) {
+    trackerInstance.stop();
+    trackerInstance = null;
+  }
+}
+
 // src/context/ProbatContext.tsx
 var ProbatContext = createContext(null);
 function ProbatProvider({
@@ -21,8 +351,12 @@ function ProbatProvider({
   clientKey,
   environment: explicitEnvironment,
   repoFullName: explicitRepoFullName,
+  proposalId,
+  variantLabel,
   children
 }) {
+  const storedProposalId = typeof window !== "undefined" ? window.localStorage.getItem("probat_active_proposal_id") || void 0 : void 0;
+  const storedVariantLabel = typeof window !== "undefined" ? window.localStorage.getItem("probat_active_variant_label") || void 0 : void 0;
   const contextValue = useMemo(() => {
     const resolvedApiBaseUrl = apiBaseUrl || typeof import.meta !== "undefined" && import.meta.env?.VITE_PROBAT_API || typeof globalThis !== "undefined" && globalThis.process?.env?.NEXT_PUBLIC_PROBAT_API || typeof window !== "undefined" && window.__PROBAT_API || "https://gushi.onrender.com";
     const environment = explicitEnvironment || detectEnvironment();
@@ -31,9 +365,38 @@ function ProbatProvider({
       apiBaseUrl: resolvedApiBaseUrl,
       environment,
       clientKey,
-      repoFullName: resolvedRepoFullName
+      repoFullName: resolvedRepoFullName,
+      proposalId: proposalId || storedProposalId,
+      variantLabel: variantLabel || storedVariantLabel
     };
-  }, [apiBaseUrl, clientKey, explicitEnvironment, explicitRepoFullName]);
+  }, [apiBaseUrl, clientKey, explicitEnvironment, explicitRepoFullName, proposalId, variantLabel, storedProposalId, storedVariantLabel]);
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      initHeatmapTracking({
+        apiBaseUrl: contextValue.apiBaseUrl,
+        batchSize: 10,
+        batchInterval: 5e3,
+        enabled: true,
+        excludeSelectors: [
+          "[data-heatmap-exclude]",
+          'input[type="password"]',
+          'input[type="email"]',
+          "textarea"
+        ],
+        // Explicitly enable cursor tracking with sensible defaults
+        trackCursor: true,
+        cursorThrottle: 100,
+        // capture every 100ms
+        cursorBatchSize: 50,
+        // send every 50 movements (or after batchInterval)
+        proposalId: contextValue.proposalId,
+        variantLabel: contextValue.variantLabel
+      });
+    }
+    return () => {
+      stopHeatmapTracking();
+    };
+  }, [contextValue.apiBaseUrl]);
   return /* @__PURE__ */ React4.createElement(ProbatContext.Provider, { value: contextValue }, children);
 }
 function useProbatContext() {
@@ -67,6 +430,14 @@ async function fetchDecision(baseUrl, proposalId) {
       const data = await res.json();
       const experiment_id = (data.experiment_id || `exp_${proposalId}`).toString();
       const label = data.label && data.label.trim() ? data.label : "control";
+      if (typeof window !== "undefined") {
+        try {
+          window.localStorage.setItem("probat_active_proposal_id", proposalId);
+          window.localStorage.setItem("probat_active_variant_label", label);
+        } catch (e) {
+          console.warn("[PROBAT] Failed to set proposal/variant in localStorage:", e);
+        }
+      }
       return { experiment_id, label };
     } finally {
       pendingFetches.delete(proposalId);
@@ -145,6 +516,13 @@ async function fetchComponentExperimentConfig(baseUrl, repoFullName, componentPa
         throw new Error(`HTTP ${res.status}`);
       }
       const data = await res.json();
+      if (typeof window !== "undefined" && data?.proposal_id) {
+        try {
+          window.localStorage.setItem("probat_active_proposal_id", data.proposal_id);
+        } catch (e) {
+          console.warn("[PROBAT] Failed to set proposal_id in localStorage:", e);
+        }
+      }
       return data;
     } catch (e) {
       console.warn(`[PROBAT] Failed to fetch component config: ${e}`);
@@ -779,23 +1157,50 @@ function withExperiment(Control, options) {
       let alive = true;
       const cached = readChoice(proposalId);
       if (cached) {
-        setChoice({
+        const choiceData = {
           experiment_id: cached.experiment_id,
           label: cached.label
-        });
+        };
+        setChoice(choiceData);
+        if (typeof window !== "undefined") {
+          try {
+            window.localStorage.setItem("probat_active_proposal_id", proposalId);
+            window.localStorage.setItem("probat_active_variant_label", cached.label);
+          } catch (e) {
+            console.warn("[PROBAT] Failed to set proposal/variant in localStorage:", e);
+          }
+        }
       } else {
         (async () => {
           try {
             const { experiment_id, label: label2 } = await fetchDecision(apiBaseUrl, proposalId);
             if (!alive) return;
             writeChoice(proposalId, experiment_id, label2);
-            setChoice({ experiment_id, label: label2 });
+            const choiceData = { experiment_id, label: label2 };
+            setChoice(choiceData);
+            if (typeof window !== "undefined") {
+              try {
+                window.localStorage.setItem("probat_active_proposal_id", proposalId);
+                window.localStorage.setItem("probat_active_variant_label", label2);
+              } catch (e) {
+                console.warn("[PROBAT] Failed to set proposal/variant in localStorage:", e);
+              }
+            }
           } catch (e) {
             if (!alive) return;
-            setChoice({
+            const choiceData = {
               experiment_id: `exp_${proposalId}`,
               label: "control"
-            });
+            };
+            setChoice(choiceData);
+            if (typeof window !== "undefined") {
+              try {
+                window.localStorage.setItem("probat_active_proposal_id", proposalId);
+                window.localStorage.setItem("probat_active_variant_label", "control");
+              } catch (err) {
+                console.warn("[PROBAT] Failed to set proposal/variant in localStorage:", err);
+              }
+            }
           }
         })();
       }
@@ -853,6 +1258,6 @@ function withExperiment(Control, options) {
   return Wrapped;
 }
 
-export { ProbatProvider, ProbatProviderClient, detectEnvironment, extractClickMeta, fetchDecision, hasTrackedVisit, markTrackedVisit, readChoice, sendMetric, useExperiment, useProbatContext, useProbatMetrics, withExperiment, writeChoice };
+export { ProbatProvider, ProbatProviderClient, detectEnvironment, extractClickMeta, fetchDecision, getHeatmapTracker, hasTrackedVisit, initHeatmapTracking, markTrackedVisit, readChoice, sendMetric, stopHeatmapTracking, useExperiment, useProbatContext, useProbatMetrics, withExperiment, writeChoice };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map