@akhilpulse/samadhaan-session-replay 0.1.0

package/README.md

@@ -0,0 +1,111 @@
+# @akhilpulse/samadhaan-session-replay
+
+React Native SDK for embedding **Samadhaan Guided Support** into your mobile app — session recording, live remote screen-share, take-control, and guided-tour overlays.
+
+The SDK talks to the Samadhaan dashboard at **https://samadhaan.pulseenergy.io** by default.
+
+## Install
+
+```bash
+npm install @akhilpulse/samadhaan-session-replay react-native-view-shot @react-native-async-storage/async-storage
+```
+
+iOS:
+
+```bash
+cd ios && pod install
+```
+
+## Usage
+
+```tsx
+import { SessionReplayProvider } from "@akhilpulse/samadhaan-session-replay";
+
+export default function App() {
+  return (
+    <SessionReplayProvider
+      config={{
+        // serverUrl is optional — defaults to https://samadhaan.pulseenergy.io
+        appId: "app_xxx",
+        user: { userId: "user_123", email: "user@example.com" },
+        appVersion: "1.4.2",
+      }}
+    >
+      <YourApp />
+    </SessionReplayProvider>
+  );
+}
+```
+
+To point at a staging/self-hosted dashboard, pass `serverUrl`:
+
+```tsx
+<SessionReplayProvider
+  config={{
+    serverUrl: "https://staging-samadhaan.pulseenergy.io",
+    appId: "app_xxx",
+  }}
+>
+```
+
+### Privacy masking
+
+Wrap any subtree to redact it from screenshots:
+
+```tsx
+import { PrivacyLayer } from "@akhilpulse/samadhaan-session-replay";
+
+<PrivacyLayer redact>
+  <CreditCardForm />
+</PrivacyLayer>
+```
+
+### Pause / resume
+
+```tsx
+import { useSessionReplay } from "@akhilpulse/samadhaan-session-replay";
+
+const { pause, resume, sessionId, status } = useSessionReplay();
+```
+
+## What it does
+
+- Creates a session against `POST /api/guided-support/sessions` and persists `sessionId` in AsyncStorage so it can be resumed after relaunch.
+- Captures gestures (tap, swipe) using a passive PanResponder + onTouchEnd bubble listener — host taps still work.
+- Captures screenshots every 10 s in background mode, every 200 ms in live mode, via `react-native-view-shot`. Uploads via `POST /api/guided-support/storage/uploads/request-url` then PUTs to the returned URL.
+- Auto-connects to `WS /ws/guided-support?sessionId=…&role=device&token=…` when the dashboard flips the session to `live`.
+- Streams binary frames as `[ts u32 BE | width u16 BE | height u16 BE] + JPEG bytes`.
+- Renders a remote-control overlay that visualizes incoming taps. Native touch dispatch (iOS UIEvent / Android AccessibilityService) is wired by the integrator via a small custom native module.
+- Auto-mounts a guided-tour overlay (singleton-guarded). On `guided_tour_request`, shows an inline absolutely-positioned consent prompt (NOT `<Modal>` — RN Modals leave a stale native window that swallows touches). On accept, renders a thin glowing edge halo (4 strips with `pointerEvents: "none"`) plus a small centered "End Tour" pill. Streams the agent's pointer as a red laser-pointer dot.
+- Pauses screenshot capture while the iOS keyboard is visible.
+
+## Critical constraints (don't skip)
+
+1. Never use RN `<Modal>` for transient consent UI — use absolutely-positioned `<View>` with `zIndex: 9999`.
+2. Never animate colors with `useNativeDriver: false` — causes 60fps JS commits that break touch handling on Fabric.
+3. The guided-tour overlay must NOT cover the screen center. Use 4 thin edge strips with `pointerEvents: "none"`.
+4. Pause screenshot capture while the iOS keyboard is visible.
+5. Auto-mount the guided-tour overlay inside the provider, and singleton-guard it.
+
+## Publishing
+
+This package is set up for the `@akhilpulse` npm scope.
+
+```bash
+# 1. Make sure you're logged in to npm with publish rights to @akhilpulse
+npm login
+
+# 2. From the mobile-sdk/ directory:
+npm install
+npm run build      # compiles src/ → dist/ via tsc
+npm publish        # uses publishConfig.access = "restricted"
+```
+
+To bump the version:
+
+```bash
+npm version patch   # or minor / major
+npm publish
+```
+
+See `src/SessionReplayProvider.tsx` for the full implementation.

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@akhilpulse/samadhaan-session-replay",
+  "version": "0.1.0",
+  "description": "React Native SDK for Samadhaan Guided Support — session recording, live remote screen-share, take-control, and guided-tour overlays.",
+  "main": "src/index.ts",
+  "module": "src/index.ts",
+  "types": "src/index.ts",
+  "react-native": "src/index.ts",
+  "source": "src/index.ts",
+  "files": [
+    "src",
+    "README.md"
+  ],
+  "scripts": {
+    "test": "echo \"no tests\" && exit 0"
+  },
+  "keywords": [
+    "react-native",
+    "session-replay",
+    "screen-share",
+    "remote-support",
+    "guided-tour",
+    "samadhaan",
+    "pulse-energy"
+  ],
+  "author": "Akhil / Pulse Energy",
+  "license": "UNLICENSED",
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://samadhaan.pulseenergy.io"
+  },
+  "homepage": "https://samadhaan.pulseenergy.io",
+  "peerDependencies": {
+    "react": ">=17.0.0",
+    "react-native": ">=0.68.0",
+    "react-native-view-shot": ">=3.0.0",
+    "@react-native-async-storage/async-storage": ">=1.17.0"
+  }
+}

package/src/SessionReplayProvider.tsx

@@ -0,0 +1,448 @@
+/**
+ * @akhilpulse/samadhaan-session-replay — SessionReplayProvider
+ *
+ * Reference implementation. Drop this into a React Native app and wrap your
+ * root with <SessionReplayProvider config={...}>. Read mobile-sdk/README.md
+ * for the contract and the critical "do not skip" constraints.
+ *
+ * Peer deps:
+ *   - react-native-view-shot
+ *   - @react-native-async-storage/async-storage
+ */
+
+import React, {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import {
+  View,
+  Text,
+  PanResponder,
+  Keyboard,
+  AppState,
+  Animated,
+  Platform,
+  UIManager,
+  findNodeHandle,
+  StyleSheet,
+} from "react-native";
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import { captureRef } from "react-native-view-shot";
+
+const STORAGE_KEY = "@akhilpulse/samadhaan-session-replay/sessionId";
+const SDK_VERSION = "0.1.0";
+
+/** Default Samadhaan production endpoint. Override via `config.serverUrl` for staging. */
+export const DEFAULT_SERVER_URL = "https://samadhaan.pulseenergy.io";
+
+type SessionUser = {
+  userId?: string;
+  userName?: string;
+  email?: string;
+  phone?: string;
+  metadata?: Record<string, any>;
+};
+
+type Config = {
+  /** Backend base URL. Defaults to https://samadhaan.pulseenergy.io. */
+  serverUrl?: string;
+  appId: string;
+  user?: SessionUser;
+  appVersion?: string;
+  /** Disable screenshot capture entirely */
+  disableScreenshots?: boolean;
+};
+
+type Ctx = {
+  sessionId: string | null;
+  status: "idle" | "active" | "live" | "ended";
+  pause: () => void;
+  resume: () => void;
+};
+
+const SessionReplayContext = createContext<Ctx>({
+  sessionId: null,
+  status: "idle",
+  pause: () => {},
+  resume: () => {},
+});
+
+export function useSessionReplay() {
+  return useContext(SessionReplayContext);
+}
+
+// ---- Singleton guard for GuidedTourOverlay -------------------------------
+let _tourSingletonClaimed = false;
+
+// ---- Privacy layer -------------------------------------------------------
+const PrivacyContext = createContext<boolean>(false);
+export function PrivacyLayer({ redact = true, children }: { redact?: boolean; children: React.ReactNode }) {
+  return <PrivacyContext.Provider value={redact}>{children}</PrivacyContext.Provider>;
+}
+
+// ---- Provider ------------------------------------------------------------
+export function SessionReplayProvider({ config, children }: { config: Config; children: React.ReactNode }) {
+  const serverUrl = (config.serverUrl || DEFAULT_SERVER_URL).replace(/\/$/, "");
+  const [sessionId, setSessionId] = useState<string | null>(null);
+  const [ingestToken, setIngestToken] = useState<string | null>(null);
+  const [status, setStatus] = useState<Ctx["status"]>("idle");
+  const [paused, setPaused] = useState(false);
+  const [keyboardVisible, setKeyboardVisible] = useState(false);
+  const rootRef = useRef<View>(null);
+  const wsRef = useRef<WebSocket | null>(null);
+  const eventBufRef = useRef<any[]>([]);
+  const lastTapRef = useRef<{ x: number; y: number; t: number } | null>(null);
+
+  const flushEvents = useCallback(async () => {
+    if (!sessionId || !ingestToken || eventBufRef.current.length === 0) return;
+    const events = eventBufRef.current.splice(0, eventBufRef.current.length);
+    try {
+      await fetch(`${serverUrl}/api/guided-support/sessions/${sessionId}/events`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json", "x-ingest-token": ingestToken },
+        body: JSON.stringify({ events }),
+      });
+    } catch {
+      // requeue on failure
+      eventBufRef.current.unshift(...events);
+    }
+  }, [sessionId, ingestToken, serverUrl]);
+
+  const queueEvent = useCallback((type: string, data: any = {}, screenshotPath?: string) => {
+    eventBufRef.current.push({ type, ts: Date.now(), data, screenshotPath: screenshotPath || null });
+  }, []);
+
+  // Periodic flush
+  useEffect(() => {
+    const id = setInterval(() => { flushEvents(); }, 2000);
+    return () => clearInterval(id);
+  }, [flushEvents]);
+
+  // ---- Session init / resume ----
+  useEffect(() => {
+    let cancelled = false;
+    (async () => {
+      try {
+        const stored = await AsyncStorage.getItem(STORAGE_KEY);
+        if (stored && !cancelled) {
+          // resume via PUBLIC status endpoint (no auth needed) — also returns the ingest token
+          const r = await fetch(`${serverUrl}/api/guided-support/sessions/${stored}/status`);
+          if (r.ok) {
+            const j = await r.json();
+            if (!cancelled) { setSessionId(stored); setStatus(j.status || "active"); setIngestToken(j.ingestToken); }
+            return;
+          }
+        }
+        const res = await fetch(`${serverUrl}/api/guided-support/sessions`, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            appId: config.appId,
+            user: config.user,
+            appVersion: config.appVersion,
+            sdkVersion: SDK_VERSION,
+            deviceInfo: {
+              os: Platform.OS,
+              osVersion: String(Platform.Version),
+            },
+          }),
+        });
+        const j = await res.json();
+        if (!cancelled && j.sessionId) {
+          setSessionId(j.sessionId);
+          setIngestToken(j.ingestToken);
+          setStatus("active");
+          await AsyncStorage.setItem(STORAGE_KEY, j.sessionId);
+        }
+      } catch (e) {
+        // best-effort; SDK is non-blocking
+      }
+    })();
+    return () => { cancelled = true; };
+  }, [config.appId, serverUrl, config.appVersion, config.user]);
+
+  // ---- Keyboard tracking (iOS auto-pause) ----
+  useEffect(() => {
+    const showSub = Keyboard.addListener(Platform.OS === "ios" ? "keyboardWillShow" : "keyboardDidShow", () => setKeyboardVisible(true));
+    const hideSub = Keyboard.addListener(Platform.OS === "ios" ? "keyboardWillHide" : "keyboardDidHide", () => setKeyboardVisible(false));
+    return () => { showSub.remove(); hideSub.remove(); };
+  }, []);
+
+  // ---- Status polling via PUBLIC status endpoint (so we know when dashboard flips to live) ----
+  useEffect(() => {
+    if (!sessionId) return;
+    const id = setInterval(async () => {
+      try {
+        const r = await fetch(`${serverUrl}/api/guided-support/sessions/${sessionId}/status`);
+        if (r.ok) {
+          const j = await r.json();
+          setStatus(j.status);
+        }
+      } catch {}
+    }, 5000);
+    return () => clearInterval(id);
+  }, [sessionId, serverUrl]);
+
+  // ---- Screenshot capture ----
+  const liveMode = status === "live";
+  useEffect(() => {
+    if (config.disableScreenshots || !sessionId) return;
+    let stopped = false;
+    const interval = liveMode ? 200 : 10000;
+    const tick = async () => {
+      if (stopped) return;
+      if (paused || keyboardVisible) { setTimeout(tick, interval); return; }
+      try {
+        const ref = rootRef.current;
+        if (ref) {
+          const uri = await captureRef(ref as any, { format: "jpg", quality: liveMode ? 0.4 : 0.7, result: "base64" });
+          // upload via request-url then PUT
+          const blob = base64ToUint8Array(uri);
+          let path: string | null = null;
+          try {
+            const r = await fetch(`${serverUrl}/api/guided-support/storage/uploads/request-url`, {
+              method: "POST",
+              headers: { "Content-Type": "application/json", "x-ingest-token": ingestToken || "" },
+              body: JSON.stringify({ sessionId, name: `frame-${Date.now()}.jpg`, size: blob.length, contentType: "image/jpeg" }),
+            });
+            const meta = await r.json();
+            const fd = new FormData();
+            // @ts-ignore
+            fd.append("file", { uri: `data:image/jpeg;base64,${uri}`, name: "frame.jpg", type: "image/jpeg" });
+            const up = await fetch(`${serverUrl}${meta.uploadUrl}`, { method: "POST", body: fd as any });
+            if (up.ok) path = meta.path;
+          } catch {}
+          queueEvent("screenshot", { w: 0, h: 0 }, path || undefined);
+          if (liveMode && wsRef.current && wsRef.current.readyState === WebSocket.OPEN) {
+            // also stream binary frame
+            sendBinaryFrame(wsRef.current, blob, 0, 0);
+          }
+        }
+      } catch {}
+      setTimeout(tick, interval);
+    };
+    setTimeout(tick, interval);
+    return () => { stopped = true; };
+  }, [sessionId, ingestToken, liveMode, paused, keyboardVisible, config.disableScreenshots, serverUrl, queueEvent]);
+
+  // ---- WebSocket (live mode) ----
+  useEffect(() => {
+    if (!sessionId || !ingestToken || !liveMode) {
+      if (wsRef.current) { try { wsRef.current.close(); } catch {} wsRef.current = null; }
+      return;
+    }
+    const proto = serverUrl.startsWith("https") ? "wss" : "ws";
+    const host = serverUrl.replace(/^https?:\/\//, "");
+    const ws = new WebSocket(`${proto}://${host}/ws/guided-support?sessionId=${sessionId}&role=device&token=${encodeURIComponent(ingestToken)}`);
+    ws.binaryType = "arraybuffer" as any;
+    wsRef.current = ws;
+    ws.onmessage = (ev) => {
+      try {
+        const msg = typeof ev.data === "string" ? JSON.parse(ev.data) : null;
+        if (!msg) return;
+        handleAgentCommand(msg);
+      } catch {}
+    };
+    ws.onclose = () => { if (wsRef.current === ws) wsRef.current = null; };
+    return () => { try { ws.close(); } catch {} };
+  }, [sessionId, ingestToken, liveMode, serverUrl]);
+
+  // ---- Gesture capture (passive PanResponder) ----
+  const panResponder = useMemo(() => PanResponder.create({
+    onStartShouldSetPanResponder: () => false,
+    onMoveShouldSetPanResponder: () => false,
+    onStartShouldSetPanResponderCapture: () => false,
+    onMoveShouldSetPanResponderCapture: () => false,
+  }), []);
+
+  function onTouchEndCapture(e: any) {
+    const { pageX, pageY } = e.nativeEvent;
+    const now = Date.now();
+    const last = lastTapRef.current;
+    if (last && now - last.t < 1000 && Math.hypot(pageX - last.x, pageY - last.y) > 20) {
+      queueEvent("swipe", { fromX: last.x, fromY: last.y, toX: pageX, toY: pageY });
+    } else {
+      queueEvent("tap", { x: pageX, y: pageY });
+    }
+    lastTapRef.current = { x: pageX, y: pageY, t: now };
+  }
+
+  // ---- Agent command handling ----
+  function handleAgentCommand(msg: any) {
+    switch (msg.type) {
+      case "tap":
+      case "swipe":
+      case "scroll":
+      case "text_input":
+      case "back":
+      case "home":
+        queueEvent("agent_command", msg);
+        // Synthetic dispatch — implementations differ by platform:
+        // - iOS: use UIManager.dispatchViewManagerCommand on a custom native module that calls UIEvent injection.
+        // - Android: dispatch via accessibility service or a custom native module.
+        // This SDK includes the visual ripple; integrators wire native dispatch via a custom module.
+        showRipple(msg.x ?? msg.toX ?? 0, msg.y ?? msg.toY ?? 0);
+        break;
+      case "guided_tour_request":
+        setTourState({ phase: "consent", agentName: msg.agentName });
+        break;
+      case "guided_tour_pointer":
+        setPointer({ x: msg.x, y: msg.y, t: Date.now() });
+        break;
+      case "guided_tour_end":
+        setTourState({ phase: "idle" });
+        setPointer(null);
+        break;
+    }
+  }
+
+  // ---- Ripple overlay ----
+  const [ripples, setRipples] = useState<{ id: string; x: number; y: number }[]>([]);
+  function showRipple(x: number, y: number) {
+    const id = String(Date.now() + Math.random());
+    setRipples((r) => [...r, { id, x, y }]);
+    setTimeout(() => setRipples((r) => r.filter((p) => p.id !== id)), 600);
+  }
+
+  // ---- Guided tour state ----
+  const [tourState, setTourState] = useState<{ phase: "idle" | "consent" | "active"; agentName?: string }>({ phase: "idle" });
+  const [pointer, setPointer] = useState<{ x: number; y: number; t: number } | null>(null);
+
+  function consentTour(accept: boolean) {
+    if (accept) {
+      setTourState((s) => ({ phase: "active", agentName: s.agentName }));
+    } else {
+      setTourState({ phase: "idle" });
+      try { wsRef.current?.send(JSON.stringify({ type: "guided_tour_declined" })); } catch {}
+    }
+  }
+  function endTourLocal() {
+    setTourState({ phase: "idle" });
+    setPointer(null);
+    try { wsRef.current?.send(JSON.stringify({ type: "guided_tour_end" })); } catch {}
+  }
+
+  // Singleton guard
+  const tourActiveHere = useRef(false);
+  useEffect(() => {
+    if (!_tourSingletonClaimed) {
+      _tourSingletonClaimed = true;
+      tourActiveHere.current = true;
+    } else if (__DEV__) {
+      console.warn("[session-replay] Multiple GuidedTourOverlay instances mounted — only the first is active.");
+    }
+    return () => { if (tourActiveHere.current) _tourSingletonClaimed = false; };
+  }, []);
+
+  const ctx: Ctx = {
+    sessionId,
+    status,
+    pause: () => setPaused(true),
+    resume: () => setPaused(false),
+  };
+
+  return (
+    <SessionReplayContext.Provider value={ctx}>
+      <View
+        ref={rootRef}
+        collapsable={false}
+        style={{ flex: 1 }}
+        {...panResponder.panHandlers}
+        onTouchEndCapture={onTouchEndCapture}
+      >
+        {children}
+
+        {/* Ripple overlays for incoming agent taps */}
+        {ripples.map((r) => (
+          <View
+            key={r.id}
+            pointerEvents="none"
+            style={[styles.ripple, { left: r.x - 20, top: r.y - 20 }]}
+          />
+        ))}
+
+        {/* Guided tour consent — absolutely-positioned View, NOT <Modal> */}
+        {tourActiveHere.current && tourState.phase === "consent" && (
+          <View style={styles.consent} pointerEvents="auto">
+            <Text style={styles.consentTitle}>{tourState.agentName || "Support"} would like to guide you</Text>
+            <Text style={styles.consentBody}>They will see a pointer overlaid on your screen. They cannot tap for you.</Text>
+            <View style={styles.consentRow}>
+              <Text onPress={() => consentTour(false)} style={[styles.btn, styles.btnGhost]}>Decline</Text>
+              <Text onPress={() => consentTour(true)} style={[styles.btn, styles.btnPrimary]}>Accept</Text>
+            </View>
+          </View>
+        )}
+
+        {/* Guided tour active overlay — 4 thin edge strips, never centered */}
+        {tourActiveHere.current && tourState.phase === "active" && (
+          <>
+            <View pointerEvents="none" style={[styles.edge, { top: 0, left: 0, right: 0, height: 4 }]} />
+            <View pointerEvents="none" style={[styles.edge, { bottom: 0, left: 0, right: 0, height: 4 }]} />
+            <View pointerEvents="none" style={[styles.edge, { top: 0, bottom: 0, left: 0, width: 4 }]} />
+            <View pointerEvents="none" style={[styles.edge, { top: 0, bottom: 0, right: 0, width: 4 }]} />
+            <View style={styles.endTourPill}>
+              <Text onPress={endTourLocal} style={styles.endTourText}>End Tour</Text>
+            </View>
+            {pointer && (
+              <View pointerEvents="none" style={[styles.pointer, { left: pointer.x - 8, top: pointer.y - 8 }]} />
+            )}
+          </>
+        )}
+      </View>
+    </SessionReplayContext.Provider>
+  );
+}
+
+// ---- helpers ----
+function base64ToUint8Array(b64: string): Uint8Array {
+  const bin = globalThis.atob ? globalThis.atob(b64) : Buffer.from(b64, "base64").toString("binary");
+  const out = new Uint8Array(bin.length);
+  for (let i = 0; i < bin.length; i++) out[i] = bin.charCodeAt(i);
+  return out;
+}
+
+function sendBinaryFrame(ws: WebSocket, jpeg: Uint8Array, w: number, h: number) {
+  const buf = new ArrayBuffer(8 + jpeg.length);
+  const view = new DataView(buf);
+  view.setUint32(0, Math.floor(Date.now() / 1000), false);
+  view.setUint16(4, w, false);
+  view.setUint16(6, h, false);
+  new Uint8Array(buf, 8).set(jpeg);
+  try { ws.send(buf); } catch {}
+}
+
+const styles = StyleSheet.create({
+  ripple: {
+    position: "absolute", width: 40, height: 40, borderRadius: 20,
+    backgroundColor: "rgba(34,197,94,0.45)", borderWidth: 2, borderColor: "#22c55e",
+  },
+  consent: {
+    position: "absolute", left: 16, right: 16, bottom: 32, padding: 16,
+    backgroundColor: "rgba(17,24,39,0.96)", borderRadius: 12, zIndex: 9999,
+  },
+  consentTitle: { color: "#fff", fontSize: 16, fontWeight: "600", marginBottom: 6 },
+  consentBody: { color: "#d1d5db", fontSize: 13, marginBottom: 12 },
+  consentRow: { flexDirection: "row", justifyContent: "flex-end", gap: 8 },
+  btn: { paddingVertical: 8, paddingHorizontal: 14, borderRadius: 6, fontSize: 14, overflow: "hidden" },
+  btnGhost: { color: "#9ca3af" },
+  btnPrimary: { color: "#fff", backgroundColor: "#22c55e" },
+  edge: { position: "absolute", backgroundColor: "rgba(34,197,94,0.7)", zIndex: 9998 },
+  endTourPill: {
+    position: "absolute", top: 12, alignSelf: "center", left: 0, right: 0,
+    flexDirection: "row", justifyContent: "center", zIndex: 9999,
+  },
+  endTourText: {
+    color: "#fff", backgroundColor: "rgba(17,24,39,0.92)", paddingVertical: 6, paddingHorizontal: 14,
+    borderRadius: 999, fontSize: 13, fontWeight: "600", overflow: "hidden",
+  },
+  pointer: {
+    position: "absolute", width: 16, height: 16, borderRadius: 8,
+    backgroundColor: "rgba(239,68,68,0.95)", borderWidth: 2, borderColor: "#fff",
+    shadowColor: "#ef4444", shadowOpacity: 0.7, shadowRadius: 6, zIndex: 9999,
+  },
+});

package/src/index.ts

@@ -0,0 +1,6 @@
+export {
+  SessionReplayProvider,
+  PrivacyLayer,
+  useSessionReplay,
+  DEFAULT_SERVER_URL,
+} from "./SessionReplayProvider";