@vanira/sdk-react-native 0.0.2

package/src/presets/call/CallSpeakerToggle.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import {Pressable, StyleSheet, Text, View} from 'react-native';
+import {useCallSpeaker} from './useCallSpeaker';
+
+type Props = {
+  compact?: boolean;
+  disabled?: boolean;
+};
+
+export function CallSpeakerToggle({compact = false, disabled = false}: Props) {
+  const {speakerOn, callAudioActive, toggleSpeaker} = useCallSpeaker();
+
+  if (!callAudioActive) {
+    return null;
+  }
+
+  return (
+    <View style={[styles.wrap, compact && styles.wrapCompact]}>
+      <Pressable
+        style={[
+          styles.button,
+          speakerOn && styles.buttonActive,
+          disabled && styles.buttonDisabled,
+        ]}
+        onPress={toggleSpeaker}
+        disabled={disabled}>
+        <Text style={styles.icon}>{speakerOn ? '🔊' : '🔈'}</Text>
+        <Text style={[styles.label, speakerOn && styles.labelActive]}>
+          {speakerOn ? 'Speaker' : 'Earpiece'}
+        </Text>
+      </Pressable>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  wrap: {marginBottom: 8},
+  wrapCompact: {marginBottom: 0},
+  button: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 8,
+    paddingVertical: 10,
+    paddingHorizontal: 14,
+    borderRadius: 10,
+    backgroundColor: '#1e293b',
+    borderWidth: 1,
+    borderColor: '#334155',
+  },
+  buttonActive: {
+    backgroundColor: '#312e81',
+    borderColor: '#4f46e5',
+  },
+  buttonDisabled: {opacity: 0.5},
+  icon: {fontSize: 16},
+  label: {color: '#94a3b8', fontWeight: '600', fontSize: 13},
+  labelActive: {color: '#e0e7ff'},
+});

package/src/presets/call/callAudioRouting.ts

@@ -0,0 +1,2 @@
+/** @deprecated Import from adapters/react-native/callAudioRouting */
+export * from '../../adapters/react-native/callAudioRouting';

package/src/presets/call/useCallSpeaker.ts

@@ -0,0 +1,31 @@
+import {useCallback, useSyncExternalStore} from 'react';
+import {
+  getCallAudioServerSnapshot,
+  getCallAudioSnapshot,
+  setSpeakerphoneOn,
+  subscribeCallAudio,
+  toggleSpeakerphone,
+} from '../../adapters/react-native/callAudioRouting';
+
+export function useCallSpeaker() {
+  const snapshot = useSyncExternalStore(
+    subscribeCallAudio,
+    getCallAudioSnapshot,
+    getCallAudioServerSnapshot,
+  );
+
+  const toggle = useCallback(() => {
+    toggleSpeakerphone();
+  }, []);
+
+  const setSpeaker = useCallback((on: boolean) => {
+    setSpeakerphoneOn(on);
+  }, []);
+
+  return {
+    speakerOn: snapshot.speakerOn,
+    callAudioActive: snapshot.active,
+    toggleSpeaker: toggle,
+    setSpeakerOn: setSpeaker,
+  };
+}

package/src/presets/camera/cameraPermissions.ts

@@ -0,0 +1,18 @@
+import {Platform} from 'react-native';
+import {PERMISSIONS, RESULTS, request} from 'react-native-permissions';
+
+export async function ensureCameraPermission(): Promise<boolean> {
+  const permission =
+    Platform.OS === 'ios'
+      ? PERMISSIONS.IOS.CAMERA
+      : Platform.OS === 'android'
+        ? PERMISSIONS.ANDROID.CAMERA
+        : null;
+
+  if (!permission) {
+    return true;
+  }
+
+  const result = await request(permission);
+  return result === RESULTS.GRANTED;
+}

package/src/presets/camera/cameraStream.ts

@@ -0,0 +1,19 @@
+import {mediaDevices} from 'react-native-webrtc';
+import type {FacingMode} from './cameraUtils';
+
+export async function openCameraStream(
+  facing: FacingMode,
+): Promise<import('react-native-webrtc').MediaStream> {
+  return mediaDevices.getUserMedia({
+    video: {
+      facingMode: facing === 'user' ? 'user' : 'environment',
+    },
+    audio: false,
+  });
+}
+
+export function closeCameraStream(
+  stream: import('react-native-webrtc').MediaStream | null,
+): void {
+  stream?.getTracks().forEach(track => track.stop());
+}

package/src/presets/camera/cameraUtils.ts

@@ -0,0 +1,21 @@
+export type FacingMode = 'user' | 'environment';
+
+export function parseFacingMode(raw: unknown): FacingMode {
+  const value = String(raw ?? 'environment').toLowerCase();
+  return value === 'user' || value === 'front' ? 'user' : 'environment';
+}
+
+export function parseLivenessDefault(
+  clientFields: Record<string, unknown>,
+  args: Record<string, unknown>,
+): boolean {
+  const raw =
+    clientFields.liveness_check ??
+    args.liveness_check ??
+    false;
+  return raw === true || raw === 'true';
+}
+
+export function buildCaptureFileName(): string {
+  return `capture-${Date.now()}.jpg`;
+}

package/src/presets/camera/useLivenessFlow.ts

@@ -0,0 +1,95 @@
+import {useCallback, useEffect, useRef, useState} from 'react';
+
+/**
+ * RN simplified liveness — timer-based UX matching web states.
+ * Web uses canvas pixel-diff; RN defers pixel analysis (see RN_CAMERA_TEST_PLAN).
+ */
+export type LivenessPhase =
+  | 'idle'
+  | 'calibrating'
+  | 'action'
+  | 'verified';
+
+type Options = {
+  enabled: boolean;
+  onVerified: () => void;
+};
+
+const CALIBRATE_MS = 1500;
+const ACTION_MS = 4000;
+
+export function useLivenessFlow({enabled, onVerified}: Options) {
+  const [phase, setPhase] = useState<LivenessPhase>('idle');
+  const [progress, setProgress] = useState(0);
+  const [guideText, setGuideText] = useState('Align your face in center');
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
+
+  const clearTimers = useCallback(() => {
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+      timerRef.current = null;
+    }
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current);
+      intervalRef.current = null;
+    }
+  }, []);
+
+  const start = useCallback(() => {
+    clearTimers();
+    setPhase('calibrating');
+    setProgress(0);
+    setGuideText('Hold still to calibrate…');
+
+    const started = Date.now();
+    intervalRef.current = setInterval(() => {
+      const elapsed = Date.now() - started;
+      const pct = Math.min(30, Math.round((elapsed / CALIBRATE_MS) * 30));
+      setProgress(pct);
+    }, 100);
+
+    timerRef.current = setTimeout(() => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+        intervalRef.current = null;
+      }
+      setPhase('action');
+      setProgress(30);
+      setGuideText('Now blink or turn head slightly');
+
+      const actionStart = Date.now();
+      intervalRef.current = setInterval(() => {
+        const elapsed = Date.now() - actionStart;
+        const pct = Math.min(100, 30 + Math.round((elapsed / ACTION_MS) * 70));
+        setProgress(pct);
+      }, 100);
+
+      timerRef.current = setTimeout(() => {
+        clearTimers();
+        setPhase('verified');
+        setProgress(100);
+        setGuideText('✓ Liveness Verified! Tap Capture & Send.');
+        onVerified();
+      }, ACTION_MS);
+    }, CALIBRATE_MS);
+  }, [clearTimers, onVerified]);
+
+  const reset = useCallback(() => {
+    clearTimers();
+    setPhase('idle');
+    setProgress(0);
+    setGuideText('Align your face in center');
+  }, [clearTimers]);
+
+  useEffect(() => {
+    if (!enabled) {
+      reset();
+      return;
+    }
+    start();
+    return clearTimers;
+  }, [clearTimers, enabled, reset, start]);
+
+  return {phase, progress, guideText, reset};
+}

package/src/presets/chalkboard/ChalkboardOverlay.tsx

@@ -0,0 +1,156 @@
+import React, {useCallback, useEffect, useRef} from 'react';
+import {
+  ActivityIndicator,
+  Modal,
+  Pressable,
+  ScrollView,
+  StyleSheet,
+  Text,
+  TextInput,
+  View,
+} from 'react-native';
+import {
+  getChalkboardSnapshot,
+  hideChalkboard,
+  setChalkboardContent,
+  subscribeChalkboard,
+} from './chalkboardSession';
+
+type Props = {
+  onUserDismiss?: () => void;
+};
+
+const SERVER_CHALKBOARD_SNAPSHOT = {visible: false, content: '', typing: false};
+
+function useChalkboardStore() {
+  return React.useSyncExternalStore(
+    subscribeChalkboard,
+    getChalkboardSnapshot,
+    () => SERVER_CHALKBOARD_SNAPSHOT,
+  );
+}
+
+export function ChalkboardOverlay({onUserDismiss}: Props) {
+  const {visible, content, typing} = useChalkboardStore();
+  const scrollRef = useRef<ScrollView>(null);
+
+  useEffect(() => {
+    if (visible && content.length > 0) {
+      scrollRef.current?.scrollToEnd({animated: true});
+    }
+  }, [content, visible]);
+
+  const handleClose = useCallback(() => {
+    hideChalkboard();
+    onUserDismiss?.();
+  }, [onUserDismiss]);
+
+  if (!visible) {
+    return null;
+  }
+
+  return (
+    <Modal
+      visible
+      transparent
+      animationType="fade"
+      statusBarTranslucent
+      onRequestClose={handleClose}>
+      <View style={styles.backdrop}>
+        <View style={styles.frame}>
+          <Pressable style={styles.closeBtn} onPress={handleClose} hitSlop={8}>
+            <Text style={styles.closeText}>✕</Text>
+          </Pressable>
+          <View style={styles.headerRow}>
+            <Text style={styles.title}>Chalkboard</Text>
+            {typing ? (
+              <View style={styles.typingRow}>
+                <ActivityIndicator size="small" color="#a5b4fc" />
+                <Text style={styles.typingLabel}>Writing…</Text>
+              </View>
+            ) : null}
+          </View>
+          <ScrollView
+            ref={scrollRef}
+            style={styles.scroll}
+            contentContainerStyle={styles.scrollContent}
+            keyboardShouldPersistTaps="handled">
+            <TextInput
+              style={styles.textarea}
+              multiline
+              value={content}
+              onChangeText={setChalkboardContent}
+              placeholder="Chalkboard active..."
+              placeholderTextColor="#6b7280"
+              textAlignVertical="top"
+              editable={!typing}
+            />
+          </ScrollView>
+        </View>
+      </View>
+    </Modal>
+  );
+}
+
+const styles = StyleSheet.create({
+  backdrop: {
+    flex: 1,
+    backgroundColor: 'rgba(0,0,0,0.85)',
+    justifyContent: 'center',
+    padding: 16,
+  },
+  frame: {
+    flex: 1,
+    maxHeight: '85%',
+    backgroundColor: '#0d0e12',
+    borderWidth: 10,
+    borderColor: '#5c4033',
+    borderRadius: 16,
+    padding: 12,
+    overflow: 'hidden',
+  },
+  closeBtn: {
+    position: 'absolute',
+    top: 12,
+    right: 12,
+    zIndex: 2,
+    width: 32,
+    height: 32,
+    borderRadius: 16,
+    backgroundColor: 'rgba(0,0,0,0.5)',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  closeText: {color: '#9ca3af', fontWeight: '700', fontSize: 14},
+  headerRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginBottom: 8,
+    paddingRight: 40,
+  },
+  title: {
+    color: '#6b7280',
+    fontSize: 11,
+    fontWeight: '700',
+    letterSpacing: 1,
+    textTransform: 'uppercase',
+  },
+  typingRow: {flexDirection: 'row', alignItems: 'center', gap: 6},
+  typingLabel: {color: '#a5b4fc', fontSize: 11, fontWeight: '600'},
+  scroll: {flex: 1},
+  scrollContent: {flexGrow: 1},
+  textarea: {
+    flex: 1,
+    minHeight: 320,
+    color: '#fff',
+    fontSize: 22,
+    lineHeight: 32,
+    fontFamily: 'serif',
+    textShadowColor: 'rgba(255,255,255,0.25)',
+    textShadowOffset: {width: 0, height: 0},
+    textShadowRadius: 4,
+    padding: 8,
+    backgroundColor: '#0a0a0c',
+  },
+});

package/src/presets/chalkboard/EraseTextHandler.tsx

@@ -0,0 +1,95 @@
+import React, {useEffect, useRef} from 'react';
+import type {PresetContext} from '../types';
+import {
+  getChalkboardContent,
+  isChalkboardVisible,
+  setChalkboardContent,
+  setChalkboardTyping,
+  showChalkboard,
+} from './chalkboardSession';
+import {eraseLastWords, parseEraseTextArgs} from './textUtils';
+
+type Props = {
+  ctx: PresetContext;
+  onEraseComplete: (payload: Record<string, unknown>) => void;
+  onDismiss: () => void;
+};
+
+/** vanira_erase_text — mutates chalkboard (web whiteboard fallback). */
+export function EraseTextHandler({ctx, onEraseComplete, onDismiss}: Props) {
+  const timersRef = useRef<ReturnType<typeof setTimeout>[]>([]);
+  const cancelledRef = useRef(false);
+  const onEraseCompleteRef = useRef(onEraseComplete);
+  const onDismissRef = useRef(onDismiss);
+  onEraseCompleteRef.current = onEraseComplete;
+  onDismissRef.current = onDismiss;
+
+  const toolCallId = ctx.toolCallId;
+
+  useEffect(() => {
+    cancelledRef.current = false;
+
+    const clearTimers = () => {
+      timersRef.current.forEach(t => clearTimeout(t));
+      timersRef.current = [];
+    };
+
+    const finish = (payload: Record<string, unknown>) => {
+      setChalkboardTyping(false);
+      onEraseCompleteRef.current(payload);
+      onDismissRef.current();
+    };
+
+    const {mode, numWords, delayMs} = parseEraseTextArgs(ctx);
+    const hadChalkboard =
+      isChalkboardVisible() || getChalkboardContent().length > 0;
+
+    if (!hadChalkboard) {
+      finish({status: 'error', message: 'Target element not found'});
+      return () => clearTimers();
+    }
+
+    showChalkboard();
+    setChalkboardTyping(true);
+
+    const currentVal = getChalkboardContent();
+    const targetVal =
+      mode === 'words' ? eraseLastWords(currentVal, numWords) : '';
+
+    if (delayMs <= 0 || currentVal === targetVal) {
+      setChalkboardContent(targetVal);
+      finish({status: 'success'});
+      return () => {
+        cancelledRef.current = true;
+        clearTimers();
+        setChalkboardTyping(false);
+      };
+    }
+
+    let working = currentVal;
+    const deleteNext = () => {
+      if (cancelledRef.current) {
+        return;
+      }
+      if (working.length > targetVal.length) {
+        working = working.slice(0, -1);
+        setChalkboardContent(working);
+        const t = setTimeout(deleteNext, Math.max(10, delayMs / 2));
+        timersRef.current.push(t);
+      } else {
+        finish({status: 'success'});
+      }
+    };
+
+    deleteNext();
+
+    return () => {
+      cancelledRef.current = true;
+      clearTimers();
+      setChalkboardTyping(false);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [toolCallId]);
+
+  return null;
+}

package/src/presets/chalkboard/TypeTextHandler.tsx

@@ -0,0 +1,107 @@
+import React, {useEffect, useRef} from 'react';
+import type {PresetContext} from '../types';
+import {
+  getChalkboardContent,
+  setChalkboardContent,
+  setChalkboardTyping,
+  showChalkboard,
+} from './chalkboardSession';
+import {parseTypeTextArgs} from './textUtils';
+
+type Props = {
+  ctx: PresetContext;
+  onTypingComplete: () => void;
+  onCancel: (reason?: string) => void;
+  onDismiss: () => void;
+};
+
+/**
+ * vanira_type_text — RN chalkboard fallback with character-by-character typing.
+ * Effect keyed on toolCallId only — unstable parent callbacks must not restart typing.
+ */
+export function TypeTextHandler({
+  ctx,
+  onTypingComplete,
+  onDismiss,
+}: Props) {
+  const timersRef = useRef<ReturnType<typeof setTimeout>[]>([]);
+  const cancelledRef = useRef(false);
+  const onTypingCompleteRef = useRef(onTypingComplete);
+  const onDismissRef = useRef(onDismiss);
+  onTypingCompleteRef.current = onTypingComplete;
+  onDismissRef.current = onDismiss;
+
+  const toolCallId = ctx.toolCallId;
+
+  useEffect(() => {
+    cancelledRef.current = false;
+
+    const clearTimers = () => {
+      timersRef.current.forEach(t => clearTimeout(t));
+      timersRef.current = [];
+    };
+
+    const finish = () => {
+      setChalkboardTyping(false);
+      onTypingCompleteRef.current();
+      onDismissRef.current();
+    };
+
+    const {text, delayMs} = parseTypeTextArgs(ctx);
+    console.log('[TypeTextHandler] start', {toolCallId, text, delayMs});
+
+    showChalkboard();
+    setChalkboardTyping(true);
+
+    const initial = getChalkboardContent();
+    const textToAppend = initial && text ? `\n${text}` : text;
+
+    if (!textToAppend) {
+      finish();
+      return () => {
+        cancelledRef.current = true;
+        clearTimers();
+        setChalkboardTyping(false);
+      };
+    }
+
+    if (delayMs <= 0) {
+      setChalkboardContent(initial + textToAppend);
+      finish();
+      return () => {
+        cancelledRef.current = true;
+        clearTimers();
+        setChalkboardTyping(false);
+      };
+    }
+
+    let current = initial;
+    let index = 0;
+
+    const typeNext = () => {
+      if (cancelledRef.current) {
+        return;
+      }
+      if (index < textToAppend.length) {
+        current += textToAppend[index];
+        setChalkboardContent(current);
+        index += 1;
+        const t = setTimeout(typeNext, delayMs);
+        timersRef.current.push(t);
+      } else {
+        finish();
+      }
+    };
+
+    typeNext();
+
+    return () => {
+      cancelledRef.current = true;
+      clearTimers();
+      setChalkboardTyping(false);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- keyed on tool call only
+  }, [toolCallId]);
+
+  return null;
+}

package/src/presets/chalkboard/boardAbort.ts

@@ -0,0 +1,36 @@
+/** Mirrors vanira-sdk VANIRA_BOARD_ABORT_EVENT — RN-safe pub/sub (no window required). */
+
+export const VANIRA_BOARD_ABORT_EVENT = 'vanira:board_abort';
+
+export type VaniraBoardAbortDetail = {
+  reason?: string;
+  toolCallId?: string;
+};
+
+type BoardAbortListener = (detail: VaniraBoardAbortDetail) => void;
+
+const listeners = new Set<BoardAbortListener>();
+
+export function subscribeBoardAbort(listener: BoardAbortListener): () => void {
+  listeners.add(listener);
+  return () => listeners.delete(listener);
+}
+
+export function dispatchBoardAbort(
+  reason: string,
+  toolCallId?: string,
+): void {
+  const detail: VaniraBoardAbortDetail = {reason, toolCallId};
+  console.log('[BoardAbort] dispatch:', detail);
+  listeners.forEach(listener => listener(detail));
+
+  if (typeof globalThis !== 'undefined' && typeof globalThis.dispatchEvent === 'function') {
+    try {
+      globalThis.dispatchEvent(
+        new CustomEvent(VANIRA_BOARD_ABORT_EVENT, {detail}),
+      );
+    } catch {
+      /* RN may lack CustomEvent in some builds */
+    }
+  }
+}