@akhilpulse/samadhaan-session-replay 0.6.4 → 0.6.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akhilpulse/samadhaan-session-replay",
-  "version": "0.6.4",
+  "version": "0.6.6",
   "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.4";
+const SDK_VERSION = "0.6.6";
 
 // ---- Module-level session singleton --------------------------------------
 // Multiple SessionReplayProvider mounts (intentional or via React StrictMode's
@@ -877,20 +877,34 @@ 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}>
-              <VoiceWave phase={assistantPhase} />
-              <Text style={styles.assistStatusText}>
+            <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">
+              {/* Wave + text are display-only: pass touches through to the app. */}
+              <View pointerEvents="none">
+                <VoiceWave phase={assistantPhase} />
+              </View>
+              <Text style={styles.assistStatusText} numberOfLines={1} pointerEvents="none">
                 {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 +930,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.
@@ -1025,7 +1048,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,
+            },
           ]}
         />
       ))}
@@ -1166,23 +1193,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",
+  },
+  assistStatusRow: {
+    flexDirection: "row", alignItems: "center", justifyContent: "center",
+    paddingBottom: 30, paddingHorizontal: 20,
   },
-  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 },
+  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,