@akhilpulse/samadhaan-session-replay 0.6.2 → 0.6.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akhilpulse/samadhaan-session-replay",
-  "version": "0.6.2",
+  "version": "0.6.4",
   "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.2";
+const SDK_VERSION = "0.6.4";
 
 // ---- Module-level session singleton --------------------------------------
 // Multiple SessionReplayProvider mounts (intentional or via React StrictMode's
@@ -857,36 +857,6 @@ export function SessionReplayProvider({ config, children }: { config: Config; ch
           </>
         )}
 
-        {/* Shake-to-Assist: on-screen arrow pointing at the next element to tap. */}
-        {assistantActive && assistantArrow && (() => {
-          const { w, h } = viewSizeRef.current;
-          const px = assistantArrow.nx * (w || 0);
-          const py = assistantArrow.ny * (h || 0);
-          // Keep the label bubble on-screen: flip below the target near the top edge.
-          const below = py < 96;
-          return (
-            <View pointerEvents="none" style={StyleSheet.absoluteFill}>
-              <View style={[styles.assistHalo, { left: px - 26, top: py - 26 }]} />
-              <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,
-                  below
-                    ? { left: px - 9, top: py + 12 }
-                    : { left: px - 9, top: py - 30, transform: [{ rotate: "180deg" }] },
-                ]}
-              />
-              {!!(assistantArrow.label || assistantArrow.instruction) && (
-                <View style={[styles.assistBubble, { left: 16, right: 16, [below ? "top" : "bottom"]: below ? py + 36 : (h || 0) - py + 36 } as any]}>
-                  {!!assistantArrow.label && <Text style={styles.assistBubbleLabel}>{assistantArrow.label}</Text>}
-                  {!!assistantArrow.instruction && <Text style={styles.assistBubbleText}>{assistantArrow.instruction}</Text>}
-                </View>
-              )}
-            </View>
-          );
-        })()}
-
         {/* Floating help button — draggable, tap to open the AI voice guide.
             This is the definitive trigger for Expo apps (no native shake module).
             Hidden during guided tours so it never collides with the End-tour pill. */}
@@ -925,12 +895,90 @@ export function SessionReplayProvider({ config, children }: { config: Config; ch
             </View>
           </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. */}
+        {assistantActive && assistantArrow && (
+          <AssistArrowOverlay
+            nx={assistantArrow.nx}
+            ny={assistantArrow.ny}
+            label={assistantArrow.label}
+            instruction={assistantArrow.instruction}
+            w={viewSizeRef.current.w}
+            h={viewSizeRef.current.h}
+          />
+        )}
       </View>
     </SessionReplayContext.Provider>
   );
 }
 
 // ---- Shake-to-Assist UI bits ----
+
+/**
+ * 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).
+ */
+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;
+  useEffect(() => {
+    const loop = Animated.loop(
+      Animated.sequence([
+        Animated.timing(pulse, { toValue: 1, duration: 650, useNativeDriver: true }),
+        Animated.timing(pulse, { toValue: 0, duration: 650, useNativeDriver: true }),
+      ])
+    );
+    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] });
+
+  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>
+      )}
+    </View>
+  );
+}
 function assistantStatusLabel(phase: AssistantPhase, micStatus?: MicStatus | null): string {
   // Be honest when we can't actually hear the user — a fake "Listening…"
   // with a dead mic is the worst possible UX (bar stuck forever).