@akhilpulse/samadhaan-session-replay 0.6.3 → 0.6.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akhilpulse/samadhaan-session-replay",
-  "version": "0.6.3",
+  "version": "0.6.5",
   "description": "React Native SDK for Samadhaan Guided Support — session recording, live remote screen-share, take-control, guided-tour overlays, and Shake-to-Assist AI voice guide.",
   "main": "src/index.ts",
   "module": "src/index.ts",

package/src/SessionReplayProvider.tsx

@@ -56,7 +56,7 @@ let pixelCopyDisabled = false; // turned true after repeated runtime failures to
 let pixelCopyFailStreak = 0; // consecutive non-busy failures; resets on success
 
 const STORAGE_KEY = "@akhilpulse/samadhaan-session-replay/sessionId";
-const SDK_VERSION = "0.6.3";
+const SDK_VERSION = "0.6.5";
 
 // ---- Module-level session singleton --------------------------------------
 // Multiple SessionReplayProvider mounts (intentional or via React StrictMode's
@@ -877,20 +877,31 @@ export function SessionReplayProvider({ config, children }: { config: Config; ch
           </Animated.View>
         )}
 
-        {/* Shake-to-Assist: bottom voice "wave" control + status. */}
+        {/* Shake-to-Assist: Siri-style bottom overlay — a white translucent
+            gradient rising from the bottom edge (no dark pill bar) with the
+            multicolor voice wave + status text floating over it, and a small
+            frosted ✕ to end the session. Gradient is built from stacked
+            strips so we don't need a native linear-gradient dependency. */}
         {assistantActive && (
           <View style={styles.assistDock} pointerEvents="box-none">
-            <View style={styles.assistDockCard}>
+            <View style={StyleSheet.absoluteFill} pointerEvents="none">
+              {ASSIST_GRADIENT_STOPS.map((o, i) => (
+                <View key={i} style={{ flex: 1, backgroundColor: "#ffffff", opacity: o }} />
+              ))}
+            </View>
+            <View style={styles.assistStatusRow} pointerEvents="box-none">
               <VoiceWave phase={assistantPhase} />
-              <Text style={styles.assistStatusText}>
+              <Text style={styles.assistStatusText} numberOfLines={1}>
                 {assistantStatusLabel(assistantPhase, assistMicStatus)}
               </Text>
               <Pressable
                 onPress={endAssist}
                 style={({ pressed }) => [styles.assistClose, pressed && styles.btnPressed]}
-                hitSlop={10}
+                hitSlop={12}
+                accessibilityRole="button"
+                accessibilityLabel="End voice help"
               >
-                <Text style={styles.assistCloseText}>Done</Text>
+                <Text style={styles.assistCloseText}>✕</Text>
               </Pressable>
             </View>
           </View>
@@ -916,6 +927,15 @@ export function SessionReplayProvider({ config, children }: { config: Config; ch
 
 // ---- Shake-to-Assist UI bits ----
 
+// Opacity stops for the Siri-style white gradient (top → bottom). Many thin
+// strips fake a smooth linear gradient without a native gradient dependency.
+const ASSIST_GRADIENT_STOPS = [
+  0, 0.03, 0.07, 0.13, 0.2, 0.29, 0.39, 0.5, 0.61, 0.71, 0.8, 0.87, 0.92, 0.95,
+];
+
+// Apple-ish multicolor voice wave bars.
+const SIRI_WAVE_COLORS = ["#0A84FF", "#64D2FF", "#BF5AF2", "#FF375F", "#5E5CE6"];
+
 /**
  * Pulsing arrow + label bubble pointing at the next element to tap.
  * - Halo pulses continuously so the target is hard to miss.
@@ -939,10 +959,19 @@ function AssistArrowOverlay({
 
   const px = nx * (w || 0);
   const py = ny * (h || 0);
-  // Keep the label bubble on-screen: flip below the target near the top edge.
-  const below = py < 96;
-  // Never let the bubble sink behind the bottom voice dock (~110px tall).
-  const bubbleBottom = Math.max((h || 0) - py + 36, 122);
+  // Bubble placement:
+  // - target near the TOP edge   -> bubble just below the target
+  // - target near the BOTTOM     -> bubble pinned to the top of the screen, so it
+  //                                 never covers the target or the app's bottom UI
+  //                                 (bottom sheets / nav bars live there)
+  // - otherwise                  -> bubble just above the target
+  const nearTop = py < 96;
+  const nearBottom = py > (h || 0) - 260;
+  const bubblePos: any = nearTop
+    ? { top: py + 36 }
+    : nearBottom
+      ? { top: 70 }
+      : { bottom: (h || 0) - py + 36 };
   const scale = pulse.interpolate({ inputRange: [0, 1], outputRange: [1, 1.45] });
   const opacity = pulse.interpolate({ inputRange: [0, 1], outputRange: [1, 0.35] });
 
@@ -956,13 +985,13 @@ function AssistArrowOverlay({
       <View
         style={[
           styles.assistArrow,
-          below
+          nearTop
             ? { left: px - 9, top: py + 12 }
             : { left: px - 9, top: py - 30, transform: [{ rotate: "180deg" }] },
         ]}
       />
       {!!(label || instruction) && (
-        <View style={[styles.assistBubble, { left: 16, right: 16, [below ? "top" : "bottom"]: below ? py + 36 : bubbleBottom } as any]}>
+        <View style={[styles.assistBubble, { left: 16, right: 16, ...bubblePos }]}>
           {!!label && <Text style={styles.assistBubbleLabel}>{label}</Text>}
           {!!instruction && <Text style={styles.assistBubbleText}>{instruction}</Text>}
         </View>
@@ -1016,7 +1045,11 @@ function VoiceWave({ phase }: { phase: AssistantPhase }) {
           key={i}
           style={[
             styles.waveBar,
-            { transform: [{ scaleY: b }], opacity: active ? 1 : 0.5 },
+            {
+              backgroundColor: SIRI_WAVE_COLORS[i % SIRI_WAVE_COLORS.length],
+              transform: [{ scaleY: b }],
+              opacity: active ? 1 : 0.5,
+            },
           ]}
         />
       ))}
@@ -1157,23 +1190,25 @@ const styles = StyleSheet.create({
   },
   assistBubbleLabel: { color: "#93c5fd", fontSize: 12, fontWeight: "700", marginBottom: 2 },
   assistBubbleText: { color: "#fff", fontSize: 14, lineHeight: 19 },
-  // ---- Shake-to-Assist bottom dock ----
+  // ---- Shake-to-Assist Siri-style bottom overlay ----
   assistDock: {
     position: "absolute", left: 0, right: 0, bottom: 0,
-    alignItems: "center", paddingBottom: 28, paddingHorizontal: 16,
+    height: 140, justifyContent: "flex-end",
   },
-  assistDockCard: {
-    flexDirection: "row", alignItems: "center",
-    backgroundColor: "rgba(17,24,39,0.96)", borderRadius: 999,
-    paddingVertical: 10, paddingHorizontal: 16, maxWidth: "100%",
-    shadowColor: "#000", shadowOpacity: 0.3, shadowRadius: 12, shadowOffset: { width: 0, height: 6 },
+  assistStatusRow: {
+    flexDirection: "row", alignItems: "center", justifyContent: "center",
+    paddingBottom: 30, paddingHorizontal: 20,
+  },
+  assistStatusText: {
+    color: "#111827", fontSize: 15, fontWeight: "600",
+    marginHorizontal: 12, flexShrink: 1,
   },
-  assistStatusText: { color: "#e5e7eb", fontSize: 14, fontWeight: "600", marginHorizontal: 12, flexShrink: 1 },
   assistClose: {
-    backgroundColor: "#3b82f6", borderRadius: 999,
-    paddingVertical: 8, paddingHorizontal: 16, minHeight: 36, justifyContent: "center",
+    width: 30, height: 30, borderRadius: 15,
+    backgroundColor: "rgba(17,24,39,0.10)",
+    alignItems: "center", justifyContent: "center",
   },
-  assistCloseText: { color: "#fff", fontSize: 14, fontWeight: "700" },
+  assistCloseText: { color: "#374151", fontSize: 13, fontWeight: "700", lineHeight: 16 },
   assistFab: {
     position: "absolute", top: 96, right: 12,
     width: 44, height: 44, borderRadius: 22,