@akhilpulse/samadhaan-session-replay 0.2.5 → 0.2.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akhilpulse/samadhaan-session-replay",
-  "version": "0.2.5",
+  "version": "0.2.7",
   "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",

package/src/SessionReplayProvider.tsx

@@ -30,12 +30,13 @@ import {
   UIManager,
   findNodeHandle,
   StyleSheet,
+  Pressable,
 } 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.2.5";
+const SDK_VERSION = "0.2.6";
 
 /** Default Samadhaan production endpoint. Override via `config.serverUrl` for staging. */
 export const DEFAULT_SERVER_URL = "https://samadhaan.pulseenergy.io";
@@ -412,28 +413,43 @@ export function SessionReplayProvider({ config, children }: { config: Config; ch
           />
         ))}
 
-        {/* Guided tour consent — absolutely-positioned View, NOT <Modal> */}
+        {/* Guided tour consent — centered modal card with backdrop */}
         {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 style={styles.consentBackdrop} pointerEvents="auto">
+            <View style={styles.consentCard}>
+              <View style={styles.consentIconWrap}>
+                <View style={styles.consentIconRing} />
+                <View style={styles.consentIconDot} />
+              </View>
+              <Text style={styles.consentTitle}>Guided support request</Text>
+              <Text style={styles.consentBody}>
+                <Text style={styles.consentEmphasis}>{tourState.agentName || "A support agent"}</Text>
+                {" wants to guide you through your screen.\n\nYou'll see a pointer showing where they're pointing. They "}
+                <Text style={styles.consentEmphasis}>cannot tap or type for you</Text>
+                {" — you stay in full control."}
+              </Text>
+              <View style={styles.consentRow}>
+                <Pressable onPress={() => consentTour(false)} style={({ pressed }) => [styles.btn, styles.btnGhost, pressed && styles.btnPressed]}>
+                  <Text style={styles.btnGhostText}>Not now</Text>
+                </Pressable>
+                <Pressable onPress={() => consentTour(true)} style={({ pressed }) => [styles.btn, styles.btnPrimary, pressed && styles.btnPressed]}>
+                  <Text style={styles.btnPrimaryText}>Allow</Text>
+                </Pressable>
+              </View>
             </View>
           </View>
         )}
 
-        {/* Guided tour active overlay — 4 thin edge strips, never centered */}
+        {/* Guided tour active overlay — 4 thin edge strips, end-tour button on top-right (avoids iOS Dynamic Island) */}
         {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>
+            <Pressable onPress={endTourLocal} style={({ pressed }) => [styles.endTourPill, pressed && styles.btnPressed]} hitSlop={8}>
+              <Text style={styles.endTourText}>End tour</Text>
+            </Pressable>
             {pointer && (
               <>
                 <View pointerEvents="none" style={[styles.pointerHalo, { left: pointer.x - 24, top: pointer.y - 24 }]} />
@@ -495,25 +511,49 @@ const styles = StyleSheet.create({
     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,
+  consentBackdrop: {
+    position: "absolute", top: 0, left: 0, right: 0, bottom: 0,
+    backgroundColor: "rgba(0,0,0,0.55)", justifyContent: "center", alignItems: "center",
+    paddingHorizontal: 24, zIndex: 9999,
+  },
+  consentCard: {
+    width: "100%", maxWidth: 360, backgroundColor: "#ffffff", borderRadius: 20,
+    paddingVertical: 24, paddingHorizontal: 22, alignItems: "center",
+    shadowColor: "#000", shadowOpacity: 0.25, shadowRadius: 24, shadowOffset: { width: 0, height: 12 }, elevation: 12,
+  },
+  consentIconWrap: {
+    width: 56, height: 56, borderRadius: 28, alignItems: "center", justifyContent: "center",
+    backgroundColor: "rgba(239,68,68,0.12)", marginBottom: 14,
+  },
+  consentIconRing: {
+    position: "absolute", width: 36, height: 36, borderRadius: 18,
+    borderWidth: 2, borderColor: "#ef4444",
   },
-  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" },
+  consentIconDot: {
+    width: 14, height: 14, borderRadius: 7, backgroundColor: "#ef4444",
+  },
+  consentTitle: { color: "#0f172a", fontSize: 18, fontWeight: "700", marginBottom: 8, textAlign: "center" },
+  consentBody: { color: "#475569", fontSize: 14, lineHeight: 20, textAlign: "center", marginBottom: 20 },
+  consentEmphasis: { color: "#0f172a", fontWeight: "600" },
+  consentRow: { flexDirection: "row", justifyContent: "center", gap: 10, width: "100%" },
+  btn: {
+    flex: 1, paddingVertical: 12, paddingHorizontal: 16, borderRadius: 10,
+    alignItems: "center", justifyContent: "center", minHeight: 44,
+  },
+  btnPressed: { opacity: 0.7 },
+  btnGhost: { backgroundColor: "#f1f5f9" },
+  btnGhostText: { color: "#475569", fontSize: 15, fontWeight: "600" },
+  btnPrimary: { backgroundColor: "#22c55e" },
+  btnPrimaryText: { color: "#fff", fontSize: 15, fontWeight: "600" },
   edge: { position: "absolute", backgroundColor: "rgba(34,197,94,0.7)", zIndex: 9998 },
+  // End-tour pill: anchored to TOP-RIGHT with safe top inset (~64px) to clear iOS Dynamic Island & status bar.
   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",
+    position: "absolute", top: 64, right: 12, zIndex: 9999,
+    backgroundColor: "rgba(17,24,39,0.92)", paddingVertical: 8, paddingHorizontal: 14,
+    borderRadius: 999, flexDirection: "row", alignItems: "center",
+    shadowColor: "#000", shadowOpacity: 0.3, shadowRadius: 6, shadowOffset: { width: 0, height: 2 }, elevation: 6,
   },
+  endTourText: { color: "#fff", fontSize: 13, fontWeight: "600" },
   pointer: {
     position: "absolute", width: 24, height: 24, borderRadius: 12,
     backgroundColor: "rgba(239,68,68,1)", borderWidth: 3, borderColor: "#fff",