@akhilpulse/samadhaan-session-replay 0.6.6 → 0.6.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akhilpulse/samadhaan-session-replay",
-  "version": "0.6.6",
+  "version": "0.6.8",
   "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.6";
+const SDK_VERSION = "0.6.8";
 
 // ---- Module-level session singleton --------------------------------------
 // Multiple SessionReplayProvider mounts (intentional or via React StrictMode's
@@ -162,7 +162,7 @@ export function SessionReplayProvider({ config, children }: { config: Config; ch
   const [assistantPhase, setAssistantPhase] = useState<AssistantPhase>("idle");
   const [assistMicStatus, setAssistMicStatus] = useState<MicStatus | null>(null);
   const [assistantArrow, setAssistantArrow] = useState<
-    { nx: number; ny: number; label?: string; instruction?: string } | null
+    { nx: number; ny: number; nw?: number; nh?: number; label?: string; instruction?: string } | null
   >(null);
   const assistantSessionIdRef = useRef<string | null>(null);
   const voiceRef = useRef<UltravoxVoiceSession | null>(null);
@@ -537,9 +537,15 @@ export function SessionReplayProvider({ config, children }: { config: Config; ch
         setPointer(null);
         break;
       case "assistant_arrow": {
-        // AI voice guide pointing at the next element. Coords are normalized 0..1.
+        // AI voice guide highlighting the next element. Coords are normalized 0..1;
+        // nw/nh are the target's bounding-box size (optional, defaults applied in UI).
         if (typeof msg.nx === "number" && typeof msg.ny === "number") {
-          setAssistantArrow({ nx: msg.nx, ny: msg.ny, label: msg.label, instruction: msg.instruction });
+          setAssistantArrow({
+            nx: msg.nx, ny: msg.ny,
+            nw: typeof msg.nw === "number" ? msg.nw : undefined,
+            nh: typeof msg.nh === "number" ? msg.nh : undefined,
+            label: msg.label, instruction: msg.instruction,
+          });
         }
         break;
       }
@@ -877,20 +883,15 @@ export function SessionReplayProvider({ config, children }: { config: Config; ch
           </Animated.View>
         )}
 
-        {/* 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. */}
+        {/* Shake-to-Assist: iOS glass-style floating voice pill — frosted
+            translucent white pill with the multicolor voice wave + status
+            text, and a small ✕ to end the session. (Approximated glass:
+            translucency + hairline border + soft shadow; a real native blur
+            would require an extra native dependency.) */}
         {assistantActive && (
           <View style={styles.assistDock} pointerEvents="box-none">
-            <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 style={styles.assistGlassPill} pointerEvents="box-none">
+              {/* Wave + text are display-only: pass touches through. */}
               <View pointerEvents="none">
                 <VoiceWave phase={assistantPhase} />
               </View>
@@ -910,15 +911,17 @@ export function SessionReplayProvider({ config, children }: { config: Config; ch
           </View>
         )}
 
-        {/* Shake-to-Assist: on-screen arrow pointing at the next element to tap.
-            Rendered LAST so it draws above the bottom voice dock — targets near
-            the bottom of the screen used to be hidden underneath it. */}
+        {/* Shake-to-Assist: glowing highlight border around the element to tap.
+            No text bubble — the voice says the instruction; the border shows
+            where. Rendered LAST so it draws above the voice pill. The overlay
+            stays mounted between steps so the border GLIDES from the previous
+            target to the next instead of popping. */}
         {assistantActive && assistantArrow && (
-          <AssistArrowOverlay
+          <AssistHighlightOverlay
             nx={assistantArrow.nx}
             ny={assistantArrow.ny}
-            label={assistantArrow.label}
-            instruction={assistantArrow.instruction}
+            nw={assistantArrow.nw}
+            nh={assistantArrow.nh}
             w={viewSizeRef.current.w}
             h={viewSizeRef.current.h}
           />
@@ -930,75 +933,86 @@ 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.
- * - The label bubble is clamped so it never hides behind the bottom voice dock
- *   (which occupies roughly the bottom 110px of the screen).
+ * Glowing rounded-rectangle highlight border around the element to tap.
+ * - No text: the voice speaks the instruction, the border shows where.
+ * - Position + size are spring-animated, so when the next step arrives the
+ *   border GLIDES from the old target to the new one instead of popping.
+ * - On first appearance it fades in while settling down from a slightly
+ *   larger scale (a soft "landing" effect).
+ * - The border glow pulses gently so the target stays easy to spot.
+ * - When the vision model doesn't return a box size (nw/nh), a sensible
+ *   button-sized default is used around the center point.
  */
-function AssistArrowOverlay({
-  nx, ny, label, instruction, w, h,
-}: { nx: number; ny: number; label?: string; instruction?: string; w: number; h: number }) {
-  const pulse = useRef(new Animated.Value(0)).current;
+function AssistHighlightOverlay({
+  nx, ny, nw, nh, w, h,
+}: { nx: number; ny: number; nw?: number; nh?: number; w: number; h: number }) {
+  const W = w || 0;
+  const H = h || 0;
+  // Default box ~ a typical button when no size is provided; clamp to screen.
+  const boxW = Math.min(Math.max((nw || 0.42) * W, 56), Math.max(W - 16, 56));
+  const boxH = Math.min(Math.max((nh || 0.065) * H, 44), Math.max(H * 0.5, 44));
+  const left = Math.min(Math.max(nx * W - boxW / 2, 8), Math.max(W - boxW - 8, 8));
+  const top = Math.min(Math.max(ny * H - boxH / 2, 8), Math.max(H - boxH - 8, 8));
+
+  // Layout values animate with the JS driver (native driver can't animate
+  // left/top/width/height).
+  const anim = useRef({
+    left: new Animated.Value(left),
+    top: new Animated.Value(top),
+    width: new Animated.Value(boxW),
+    height: new Animated.Value(boxH),
+    appear: new Animated.Value(0),
+    pulse: new Animated.Value(0),
+  }).current;
+
   useEffect(() => {
+    // Glide to the (new) target with a soft spring.
+    const springCfg = { useNativeDriver: false, friction: 9, tension: 50 };
+    Animated.parallel([
+      Animated.spring(anim.left, { toValue: left, ...springCfg }),
+      Animated.spring(anim.top, { toValue: top, ...springCfg }),
+      Animated.spring(anim.width, { toValue: boxW, ...springCfg }),
+      Animated.spring(anim.height, { toValue: boxH, ...springCfg }),
+    ]).start();
+  }, [left, top, boxW, boxH, anim]);
+
+  useEffect(() => {
+    Animated.timing(anim.appear, { toValue: 1, duration: 320, useNativeDriver: false }).start();
     const loop = Animated.loop(
       Animated.sequence([
-        Animated.timing(pulse, { toValue: 1, duration: 650, useNativeDriver: true }),
-        Animated.timing(pulse, { toValue: 0, duration: 650, useNativeDriver: true }),
+        Animated.timing(anim.pulse, { toValue: 1, duration: 750, useNativeDriver: false }),
+        Animated.timing(anim.pulse, { toValue: 0, duration: 750, useNativeDriver: false }),
       ])
     );
     loop.start();
     return () => loop.stop();
-  }, [pulse]);
-
-  const px = nx * (w || 0);
-  const py = ny * (h || 0);
-  // 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] });
+  }, [anim]);
+
+  const glowOpacity = anim.pulse.interpolate({ inputRange: [0, 1], outputRange: [0.25, 0.75] });
+  const entryScale = anim.appear.interpolate({ inputRange: [0, 1], outputRange: [1.18, 1] });
 
   return (
     <View pointerEvents="none" style={StyleSheet.absoluteFill}>
       <Animated.View
-        style={[styles.assistHalo, { left: px - 26, top: py - 26, transform: [{ scale }], opacity }]}
-      />
-      <View style={[styles.assistDot, { left: px - 9, top: py - 9 }]} />
-      {/* Arrow shaft pointing down at the target (or up when flipped). */}
-      <View
-        style={[
-          styles.assistArrow,
-          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, ...bubblePos }]}>
-          {!!label && <Text style={styles.assistBubbleLabel}>{label}</Text>}
-          {!!instruction && <Text style={styles.assistBubbleText}>{instruction}</Text>}
-        </View>
-      )}
+        style={{
+          position: "absolute",
+          left: anim.left,
+          top: anim.top,
+          width: anim.width,
+          height: anim.height,
+          opacity: anim.appear,
+          transform: [{ scale: entryScale }],
+        }}
+      >
+        {/* Outer soft pulsing glow ring */}
+        <Animated.View style={[styles.assistGlowRing, { opacity: glowOpacity }]} />
+        {/* Crisp inner border */}
+        <View style={styles.assistHighlightBorder} />
+      </Animated.View>
     </View>
   );
 }
@@ -1170,37 +1184,35 @@ const styles = StyleSheet.create({
     position: "absolute", width: 48, height: 48, borderRadius: 24,
     backgroundColor: "rgba(239,68,68,0.25)",
   },
-  // ---- Shake-to-Assist arrow + bubble ----
-  assistHalo: {
-    position: "absolute", width: 52, height: 52, borderRadius: 26,
-    backgroundColor: "rgba(59,130,246,0.22)",
+  // ---- Shake-to-Assist glowing highlight border ----
+  // Outer soft glow ring: slightly larger than the target box, thick
+  // translucent border whose opacity pulses.
+  assistGlowRing: {
+    position: "absolute", left: -7, top: -7, right: -7, bottom: -7,
+    borderRadius: 20, borderWidth: 6, borderColor: "rgba(59,130,246,0.45)",
   },
-  assistDot: {
-    position: "absolute", width: 18, height: 18, borderRadius: 9,
-    backgroundColor: "#3b82f6", borderWidth: 3, borderColor: "#fff",
-    shadowColor: "#3b82f6", shadowOpacity: 0.9, shadowRadius: 8,
+  // Crisp inner border hugging the target element.
+  assistHighlightBorder: {
+    position: "absolute", left: 0, top: 0, right: 0, bottom: 0,
+    borderRadius: 14, borderWidth: 3, borderColor: "#3b82f6",
+    shadowColor: "#3b82f6", shadowOpacity: 0.7, shadowRadius: 10,
+    shadowOffset: { width: 0, height: 0 },
   },
-  // A simple chevron-like arrow built from a rotated bordered box.
-  assistArrow: {
-    position: "absolute", width: 18, height: 18,
-    borderRightWidth: 4, borderBottomWidth: 4, borderColor: "#3b82f6",
-    transform: [{ rotate: "45deg" }],
-  },
-  assistBubble: {
-    position: "absolute", backgroundColor: "rgba(17,24,39,0.94)",
-    borderRadius: 12, paddingVertical: 10, paddingHorizontal: 14,
-    shadowColor: "#000", shadowOpacity: 0.3, shadowRadius: 10, shadowOffset: { width: 0, height: 4 },
-  },
-  assistBubbleLabel: { color: "#93c5fd", fontSize: 12, fontWeight: "700", marginBottom: 2 },
-  assistBubbleText: { color: "#fff", fontSize: 14, lineHeight: 19 },
-  // ---- Shake-to-Assist Siri-style bottom overlay ----
+  // ---- Shake-to-Assist iOS glass-style floating voice pill ----
   assistDock: {
-    position: "absolute", left: 0, right: 0, bottom: 0,
-    height: 140, justifyContent: "flex-end",
+    position: "absolute", left: 0, right: 0, bottom: 24,
+    alignItems: "center", paddingHorizontal: 16,
   },
-  assistStatusRow: {
-    flexDirection: "row", alignItems: "center", justifyContent: "center",
-    paddingBottom: 30, paddingHorizontal: 20,
+  assistGlassPill: {
+    flexDirection: "row", alignItems: "center",
+    maxWidth: "100%",
+    backgroundColor: "rgba(255,255,255,0.78)",
+    borderRadius: 999,
+    borderWidth: 1, borderColor: "rgba(255,255,255,0.95)",
+    paddingVertical: 12, paddingHorizontal: 18,
+    shadowColor: "#000", shadowOpacity: 0.18, shadowRadius: 18,
+    shadowOffset: { width: 0, height: 8 },
+    elevation: 10,
   },
   assistStatusText: {
     color: "#111827", fontSize: 15, fontWeight: "600",

package/src/voice.ts

@@ -23,11 +23,26 @@
 
 import { NativeModules, PermissionsAndroid, Platform } from "react-native";
 
+type OptionalModuleName = "react-native-shake" | "react-native-live-audio-stream";
+
 // Loads an optional native module without crashing Metro when it's absent.
-function loadOptional<T = any>(name: string): T | null {
+// NOTE: `require()` must be called with a static string literal — Metro's
+// bundler cannot resolve `require(someVariable)` (it throws "Dynamic require
+// ... not supported by Metro" at runtime, every time, regardless of whether
+// the package is actually installed). A switch over literal require() calls
+// keeps each one statically analyzable.
+function loadOptional<T = any>(name: OptionalModuleName): T | null {
   try {
-    // eslint-disable-next-line @typescript-eslint/no-var-requires, global-require
-    return require(name) as T;
+    switch (name) {
+      case "react-native-shake":
+        // eslint-disable-next-line @typescript-eslint/no-var-requires, global-require
+        return require("react-native-shake") as T;
+      case "react-native-live-audio-stream":
+        // eslint-disable-next-line @typescript-eslint/no-var-requires, global-require
+        return require("react-native-live-audio-stream") as T;
+      default:
+        return null;
+    }
   } catch {
     return null;
   }