@akhilpulse/samadhaan-session-replay 0.4.0 → 0.4.1

package/README.md

@@ -74,12 +74,24 @@ const { pause, resume, sessionId, status } = useSessionReplay();
 
 ### Shake-to-Assist (AI voice guide)
 
-**New in 0.4.0.** The user shakes their phone, a voice assistant connects, they ask
-a question out loud ("how do I pay my bill?"), the AI looks at their current screen
-and draws an **on-screen arrow** pointing at the next element to tap — step by step.
+**New in 0.4.0.** The user opens the voice assistant, asks a question out loud
+("how do I pay my bill?"), the AI looks at their current screen and draws an
+**on-screen arrow** pointing at the next element to tap — step by step.
 Works in **English and Hindi**. Every assistant session (questions + AI steps +
 screenshots) is recorded and visible in the dashboard.
 
+**New in 0.4.1 — floating help button (default trigger).** A small draggable
+`?` button floats at the top-right of the screen. Tapping it starts the voice
+guide; the user can drag it anywhere and it stays inside the screen. This is
+the definitive trigger for **Expo** apps, where the native shake module isn't
+available. Shake (if `react-native-shake` is installed) and `triggerAssist()`
+still work as alternate triggers.
+
+```tsx
+// The button shows by default. To hide it:
+<SessionReplayProvider config={{ appId: "app_xxx", showAssistButton: false }}>
+```
+
 ```tsx
 <SessionReplayProvider
   config={{

package/package.json

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

@@ -53,7 +53,7 @@ const SessionReplayPixelCopy: PixelCopyNative | undefined =
 let pixelCopyDisabled = false; // turned true after a runtime failure to avoid retrying every frame
 
 const STORAGE_KEY = "@akhilpulse/samadhaan-session-replay/sessionId";
-const SDK_VERSION = "0.4.0";
+const SDK_VERSION = "0.4.1";
 
 // ---- Module-level session singleton --------------------------------------
 // Multiple SessionReplayProvider mounts (intentional or via React StrictMode's
@@ -93,6 +93,12 @@ type Config = {
   assistantLang?: "en" | "hi";
   /** Disable the shake-to-assist voice guide entirely. */
   disableAssistant?: boolean;
+  /**
+   * Show a small draggable floating help button (top-right) that opens the
+   * voice guide on tap. This is the definitive trigger for Expo apps where
+   * the native shake module isn't available. Default: true.
+   */
+  showAssistButton?: boolean;
   /**
    * Optional streaming-PCM player for the agent's voice. Without it the
    * assistant still listens + shows the on-screen arrow, but won't speak aloud.
@@ -671,6 +677,43 @@ export function SessionReplayProvider({ config, children }: { config: Config; ch
     [endTourPan]
   );
 
+  // ---- Draggable floating Assist help button (definitive trigger for Expo) ----
+  const assistFabPan = useRef(new Animated.ValueXY({ x: 0, y: 0 })).current;
+  const assistFabPanResponder = useMemo(
+    () =>
+      PanResponder.create({
+        // Don't claim taps — let the inner Pressable receive onPress.
+        onStartShouldSetPanResponder: () => false,
+        // Only claim once the user clearly starts dragging (>4px).
+        onMoveShouldSetPanResponder: (_e, g) => Math.abs(g.dx) > 4 || Math.abs(g.dy) > 4,
+        onPanResponderGrant: () => {
+          assistFabPan.extractOffset();
+        },
+        onPanResponderMove: Animated.event(
+          [null, { dx: assistFabPan.x, dy: assistFabPan.y }],
+          { useNativeDriver: false }
+        ),
+        onPanResponderRelease: () => {
+          assistFabPan.flattenOffset();
+          // Clamp inside the visible root-view bounds so the button never escapes off-screen.
+          const { w, h } = viewSizeRef.current;
+          const FAB = 44, ANCHOR_TOP = 96, ANCHOR_RIGHT = 12, MARGIN = 8;
+          const minX = -(Math.max(0, w - ANCHOR_RIGHT - FAB - MARGIN));
+          const maxX = 0;
+          const minY = -(ANCHOR_TOP - MARGIN);
+          const maxY = Math.max(0, h - ANCHOR_TOP - FAB - MARGIN);
+          const cx = (assistFabPan.x as any)._value;
+          const cy = (assistFabPan.y as any)._value;
+          const nx = Math.min(maxX, Math.max(minX, cx));
+          const ny = Math.min(maxY, Math.max(minY, cy));
+          if (nx !== cx || ny !== cy) {
+            Animated.spring(assistFabPan, { toValue: { x: nx, y: ny }, useNativeDriver: false, friction: 7 }).start();
+          }
+        },
+      }),
+    [assistFabPan]
+  );
+
   function consentTour(accept: boolean) {
     if (accept) {
       setTourState((s) => ({ phase: "active", agentName: s.agentName }));
@@ -811,6 +854,25 @@ export function SessionReplayProvider({ config, children }: { config: Config; ch
           );
         })()}
 
+        {/* Floating help button — draggable, tap to open the AI voice guide.
+            This is the definitive trigger for Expo apps (no native shake module). */}
+        {!config.disableAssistant && config.showAssistButton !== false && !assistantActive && (
+          <Animated.View
+            style={[styles.assistFab, { transform: assistFabPan.getTranslateTransform() }]}
+            {...assistFabPanResponder.panHandlers}
+          >
+            <Pressable
+              onPress={() => startAssist()}
+              style={({ pressed }) => [styles.assistFabPressable, pressed && styles.btnPressed]}
+              hitSlop={8}
+              accessibilityRole="button"
+              accessibilityLabel="Open voice help"
+            >
+              <Text style={styles.assistFabIcon}>?</Text>
+            </Pressable>
+          </Animated.View>
+        )}
+
         {/* Shake-to-Assist: bottom voice "wave" control + status. */}
         {assistantActive && (
           <View style={styles.assistDock} pointerEvents="box-none">
@@ -1029,6 +1091,19 @@ const styles = StyleSheet.create({
     paddingVertical: 8, paddingHorizontal: 16, minHeight: 36, justifyContent: "center",
   },
   assistCloseText: { color: "#fff", fontSize: 14, fontWeight: "700" },
+  assistFab: {
+    position: "absolute", top: 96, right: 12,
+    width: 44, height: 44, borderRadius: 22,
+    shadowColor: "#000", shadowOpacity: 0.3, shadowRadius: 8, shadowOffset: { width: 0, height: 4 },
+    elevation: 6,
+  },
+  assistFabPressable: {
+    width: 44, height: 44, borderRadius: 22,
+    backgroundColor: "#3b82f6",
+    alignItems: "center", justifyContent: "center",
+    borderWidth: 2, borderColor: "rgba(255,255,255,0.85)",
+  },
+  assistFabIcon: { color: "#fff", fontSize: 20, fontWeight: "800", lineHeight: 24 },
   waveRow: { flexDirection: "row", alignItems: "center", height: 28, width: 44 },
   waveBar: {
     width: 4, height: 22, marginHorizontal: 2, borderRadius: 2, backgroundColor: "#60a5fa",