voicelayer-rn 0.1.0

package/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "voicelayer-rn",
+  "version": "0.1.0",
+  "description": "Voice intelligence for React Native — Hindi, Hinglish, English. Zero config.",
+  "main": "src/index.js",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/voicelayer/voicelayer-sdk"
+  },
+  "keywords": ["react-native", "voice", "navigation", "hindi", "hinglish", "sdk"],
+  "peerDependencies": {
+    "@react-navigation/native": ">=6.0.0",
+    "react": ">=18.0.0",
+    "react-native": ">=0.70.0"
+  },
+  "files": ["src/"]
+}

package/src/LearningStore.ts

@@ -0,0 +1,170 @@
+// ─────────────────────────────────────────────────────────────────────────────
+// VoiceLayer RN — LearningStore
+//
+// Persists resolved voice commands in AsyncStorage (→ UserDefaults on iOS,
+// SharedPreferences on Android). Uses the same Levenshtein fuzzy matching
+// as the web SDK so learned commands survive app restarts.
+//
+// Fast path:  findMatch()  — fully in-memory, synchronous after hydration
+// Slow path:  store()      — writes to AsyncStorage in the background
+// ─────────────────────────────────────────────────────────────────────────────
+
+import AsyncStorage from '@react-native-async-storage/async-storage'
+import type { StoredCommand, VoiceResult } from './types'
+
+const MATCH_THRESHOLD = 0.20   // max edit distance as fraction of transcript length
+const SAME_SCREEN_BONUS = 0.04 // tighten threshold if on the same screen
+const MAX_ENTRIES = 300
+const DECAY_DAYS  = 60
+
+export class LearningStore {
+  private cache: StoredCommand[] = []
+  private readonly key: string
+  private readonly readyPromise: Promise<void>
+
+  constructor(appId: string) {
+    this.key = `vl_learning_rn_${appId}`
+    this.readyPromise = this.hydrate()
+  }
+
+  /** Wait for AsyncStorage hydration before first use. */
+  ready(): Promise<void> {
+    return this.readyPromise
+  }
+
+  // ── Public API ──────────────────────────────────────────────────────────────
+
+  /**
+   * Synchronous after ready() resolves.
+   * Returns the best matching stored command, or null if none passes the
+   * similarity threshold.
+   */
+  findMatch(transcript: string, screenName?: string): StoredCommand | null {
+    const normalised = LearningStore.normalise(transcript)
+    let best: { cmd: StoredCommand; dist: number } | null = null
+
+    for (const cmd of this.cache) {
+      const threshold = Math.floor(
+        normalised.length * (MATCH_THRESHOLD - (screenName ? SAME_SCREEN_BONUS : 0)),
+      )
+      const dist = LearningStore.levenshtein(normalised, cmd.transcript)
+      if (dist <= threshold) {
+        if (!best || dist < best.dist) best = { cmd, dist }
+      }
+    }
+
+    if (best) {
+      best.cmd.hitCount++
+      best.cmd.lastUsed = Date.now()
+      this.persist()   // fire-and-forget
+    }
+
+    return best?.cmd ?? null
+  }
+
+  /** Store a newly resolved command. Deduplicates and prunes old entries. */
+  async store(
+    originalTranscript: string,
+    result: VoiceResult,
+    screenName?: string,
+  ): Promise<void> {
+    const normalised = LearningStore.normalise(originalTranscript)
+
+    // Deduplicate — skip if very similar to an existing entry
+    const isDuplicate = this.cache.some((cmd) => {
+      const dist = LearningStore.levenshtein(normalised, cmd.transcript)
+      return dist <= Math.floor(normalised.length * 0.05)
+    })
+    if (isDuplicate) return
+
+    this.cache.push({
+      transcript: normalised,
+      original:   originalTranscript,
+      actionId:   result.actionId,
+      params:     result.params,
+      speak:      result.speak,
+      hitCount:   1,
+      lastUsed:   Date.now(),
+      confidence: result.confidence,
+    })
+
+    this.prune()
+    await this.persist()
+  }
+
+  /** Seed multiple variant transcripts for the same action (from VariantGenerator). */
+  async bulkStore(
+    variants: string[],
+    actionId: string,
+    speak: string,
+    confidence: number,
+  ): Promise<void> {
+    for (const v of variants) {
+      if (v.trim().length < 4) continue
+      await this.store(v, { actionId, params: {}, speak, confidence })
+    }
+  }
+
+  // ── Private ─────────────────────────────────────────────────────────────────
+
+  private async hydrate(): Promise<void> {
+    try {
+      const raw = await AsyncStorage.getItem(this.key)
+      if (raw) this.cache = JSON.parse(raw)
+    } catch {
+      // Corrupt storage — start fresh
+      this.cache = []
+    }
+  }
+
+  private async persist(): Promise<void> {
+    try {
+      await AsyncStorage.setItem(this.key, JSON.stringify(this.cache))
+    } catch { /* storage full — non-fatal */ }
+  }
+
+  private prune(): void {
+    const cutoff = Date.now() - DECAY_DAYS * 86_400_000
+    this.cache = this.cache
+      .filter((c) => c.lastUsed > cutoff)
+      .sort((a, b) => (b.hitCount * 10 + b.lastUsed / 1e10) - (a.hitCount * 10 + a.lastUsed / 1e10))
+      .slice(0, MAX_ENTRIES)
+  }
+
+  // ── Text normalisation ──────────────────────────────────────────────────────
+
+  static normalise(text: string): string {
+    return text
+      .toLowerCase()
+      // Strip punctuation but keep Devanagari and Latin word chars
+      .replace(/[^\w\sऀ-ॿ]/g, ' ')
+      // Remove Hindi filler words
+      .replace(/\b(hai|hain|toh|ji|ok|okay|please|kya|aap|mujhe|na|kar|do|de|meri|mera)\b/g, ' ')
+      .replace(/\s+/g, ' ')
+      .trim()
+  }
+
+  // ── Iterative Levenshtein — O(m×n) time, O(min(m,n)) space ────────────────
+
+  static levenshtein(a: string, b: string): number {
+    if (a === b) return 0
+    if (a.length === 0) return b.length
+    if (b.length === 0) return a.length
+
+    if (a.length > b.length) [a, b] = [b, a]
+
+    const row = Array.from({ length: a.length + 1 }, (_, i) => i)
+    for (let j = 1; j <= b.length; j++) {
+      let prev = j
+      for (let i = 1; i <= a.length; i++) {
+        const val = b[j - 1] === a[i - 1]
+          ? row[i - 1]
+          : 1 + Math.min(row[i - 1], row[i], prev)
+        row[i - 1] = prev
+        prev = val
+      }
+      row[a.length] = prev
+    }
+    return row[a.length]
+  }
+}

package/src/MicButton.tsx

@@ -0,0 +1,184 @@
+// ─────────────────────────────────────────────────────────────────────────────
+// VoiceLayer RN — MicButton
+//
+// Animated floating mic button. Pulses while listening, spins while processing.
+// ─────────────────────────────────────────────────────────────────────────────
+
+import React, { useEffect, useRef } from 'react'
+import {
+  Animated,
+  Pressable,
+  StyleSheet,
+  Text,
+  View,
+  ActivityIndicator,
+} from 'react-native'
+import type { VoiceState } from './types'
+
+interface MicButtonProps {
+  state:     VoiceState
+  onPress:   () => void
+  color?:    string
+  position?: 'bottom-right' | 'bottom-left' | 'bottom-center'
+  transcript?: string
+  message?:    string
+}
+
+const ICON: Record<VoiceState, string> = {
+  idle:       '🎙',
+  listening:  '⏹',   // tap to stop
+  processing: '…',
+  speaking:   '🔊',
+  error:      '⚠️',
+}
+
+export const MicButton: React.FC<MicButtonProps> = ({
+  state,
+  onPress,
+  color     = '#6C63FF',
+  position  = 'bottom-right',
+  transcript = '',
+  message    = '',
+}) => {
+  const pulse  = useRef(new Animated.Value(1)).current
+  const pulseAnim = useRef<Animated.CompositeAnimation | null>(null)
+
+  // Pulse animation while listening
+  useEffect(() => {
+    if (state === 'listening') {
+      pulseAnim.current = Animated.loop(
+        Animated.sequence([
+          Animated.timing(pulse, { toValue: 1.25, duration: 600, useNativeDriver: true }),
+          Animated.timing(pulse, { toValue: 1.0,  duration: 600, useNativeDriver: true }),
+        ]),
+      )
+      pulseAnim.current.start()
+    } else {
+      pulseAnim.current?.stop()
+      Animated.spring(pulse, { toValue: 1, useNativeDriver: true }).start()
+    }
+  }, [state, pulse])
+
+  const containerStyle = [
+    styles.container,
+    position === 'bottom-right'  && styles.bottomRight,
+    position === 'bottom-left'   && styles.bottomLeft,
+    position === 'bottom-center' && styles.bottomCenter,
+  ]
+
+  const showLabel = state === 'listening' || state === 'speaking' || state === 'processing'
+  const label = state === 'listening'
+    ? (transcript || 'Listening…')
+    : state === 'speaking' || state === 'processing'
+    ? (message || 'Processing…')
+    : ''
+
+  return (
+    <View style={containerStyle}>
+      {/* Transcript / response overlay */}
+      {showLabel && label ? (
+        <View style={styles.label}>
+          <Text style={styles.labelText} numberOfLines={3}>{label}</Text>
+        </View>
+      ) : null}
+
+      {/* Pulse ring behind button while listening */}
+      {state === 'listening' && (
+        <Animated.View
+          style={[
+            styles.ring,
+            { borderColor: color, transform: [{ scale: pulse }] },
+          ]}
+        />
+      )}
+
+      <Pressable
+        onPress={onPress}
+        disabled={state === 'processing' || state === 'speaking'}
+        style={({ pressed }) => [
+          styles.button,
+          { backgroundColor: state === 'error' ? '#EF4444' : color },
+          pressed && styles.buttonPressed,
+        ]}
+        accessibilityLabel="VoiceLayer mic button"
+        accessibilityHint="Tap to start or stop voice command"
+        accessibilityRole="button"
+      >
+        <Animated.View style={{ transform: [{ scale: state === 'listening' ? pulse : 1 }] }}>
+          {state === 'processing' ? (
+            <ActivityIndicator color="#fff" size="small" />
+          ) : (
+            <Text style={styles.icon}>{ICON[state]}</Text>
+          )}
+        </Animated.View>
+      </Pressable>
+    </View>
+  )
+}
+
+const BTN = 56
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    bottom:   24,
+    alignItems: 'center',
+    zIndex:   999,
+  },
+  bottomRight: {
+    right: 20,
+    alignItems: 'flex-end',
+  },
+  bottomLeft: {
+    left: 20,
+    alignItems: 'flex-start',
+  },
+  bottomCenter: {
+    alignSelf: 'center',
+    left: 0,
+    right: 0,
+    alignItems: 'center',
+  },
+  button: {
+    width:         BTN,
+    height:        BTN,
+    borderRadius:  BTN / 2,
+    alignItems:    'center',
+    justifyContent:'center',
+    elevation:     6,
+    shadowColor:   '#000',
+    shadowOffset:  { width: 0, height: 3 },
+    shadowOpacity: 0.25,
+    shadowRadius:  4,
+  },
+  buttonPressed: {
+    opacity: 0.85,
+    transform: [{ scale: 0.95 }],
+  },
+  icon: {
+    fontSize: 22,
+  },
+  ring: {
+    position:     'absolute',
+    width:        BTN + 16,
+    height:       BTN + 16,
+    borderRadius: (BTN + 16) / 2,
+    borderWidth:  2,
+    bottom:       -8,
+    opacity:      0.4,
+  },
+  label: {
+    backgroundColor:  'rgba(0,0,0,0.75)',
+    borderRadius:     10,
+    paddingHorizontal: 12,
+    paddingVertical:  8,
+    maxWidth:         220,
+    marginBottom:     10,
+  },
+  labelText: {
+    color:      '#fff',
+    fontSize:   13,
+    lineHeight: 18,
+    textAlign:  'center',
+  },
+})

package/src/TTSPlayer.ts

@@ -0,0 +1,38 @@
+// ─────────────────────────────────────────────────────────────────────────────
+// VoiceLayer RN — TTSPlayer
+//
+// Uses expo-speech (on-device, free) by default.
+// Falls back to ElevenLabs or OpenAI TTS via the proxy for better Hindi voice.
+// ─────────────────────────────────────────────────────────────────────────────
+
+import * as Speech from 'expo-speech'
+import type { TranscriberLanguage } from './Transcriber'
+
+export class TTSPlayer {
+  constructor(private readonly language: TranscriberLanguage) {}
+
+  async speak(text: string): Promise<void> {
+    // Stop any current speech first
+    await Speech.stop()
+
+    return new Promise((resolve) => {
+      Speech.speak(text, {
+        language: this.resolveLocale(),
+        pitch:    1.0,
+        rate:     0.9,   // slightly slower for clarity
+        onDone:   resolve,
+        onError:  () => resolve(),   // non-fatal
+      })
+    })
+  }
+
+  async stop(): Promise<void> {
+    await Speech.stop()
+  }
+
+  private resolveLocale(): string {
+    if (this.language === 'hi')   return 'hi-IN'
+    if (this.language === 'en')   return 'en-US'
+    return 'hi-IN'   // default: Hindi (Repeatly's primary language)
+  }
+}

package/src/Transcriber.ts

@@ -0,0 +1,117 @@
+// ─────────────────────────────────────────────────────────────────────────────
+// VoiceLayer RN — Transcriber
+//
+// Two-tier STT:
+//   Primary:  whisper.rn  — on-device, ~100ms, no server call, works offline
+//   Fallback: /api/voice  — server-side Whisper when model isn't loaded yet
+//
+// The model is a one-time 39MB download (ggml-tiny.bin). After that every
+// transcription is local and instant.
+// ─────────────────────────────────────────────────────────────────────────────
+
+import * as FileSystem from 'expo-file-system'
+import { initWhisper, type WhisperContext } from 'whisper.rn'
+
+export type TranscriberLanguage = 'hi' | 'en' | 'auto'
+
+const WHISPER_TINY_URL =
+  'https://huggingface.co/ggerganov/whisper.cpp/resolve/main/ggml-tiny.bin'
+
+const MODEL_FILENAME = 'ggml-tiny.bin'
+
+export class Transcriber {
+  private ctx: WhisperContext | null = null
+  private modelReady = false
+  private initPromise: Promise<void> | null = null
+
+  constructor(
+    private readonly language: TranscriberLanguage,
+    /** Pass require('../assets/ggml-tiny.bin') if bundled, or omit to auto-download. */
+    private readonly modelPath?: number | string,
+    private readonly debug = false,
+  ) {}
+
+  /**
+   * Initialise the on-device Whisper model.
+   * Call this early (e.g. on component mount) to warm up before first use.
+   * Safe to call multiple times — initialises only once.
+   */
+  async init(): Promise<void> {
+    if (this.modelReady) return
+    if (this.initPromise) return this.initPromise
+
+    this.initPromise = this._init()
+    return this.initPromise
+  }
+
+  /** Returns true if the on-device model is ready. */
+  get isReady(): boolean {
+    return this.modelReady
+  }
+
+  /**
+   * Transcribe an audio file URI.
+   * Uses on-device model if ready, otherwise returns null
+   * (caller should fall back to server).
+   */
+  async transcribe(audioUri: string): Promise<string | null> {
+    if (!this.ctx) return null
+
+    try {
+      const { promise } = this.ctx.transcribe(audioUri, {
+        language: this.language === 'auto' ? undefined : this.language,
+        maxLen: 1,
+        // Suppress blank audio tokens
+        suppressBlank: true,
+        temperature: 0,
+      })
+      const { result } = await promise
+      return result?.trim() ?? null
+    } catch (err) {
+      if (this.debug) console.warn('[VoiceLayer/Transcriber] whisper.rn error:', err)
+      return null
+    }
+  }
+
+  // ── Private ─────────────────────────────────────────────────────────────────
+
+  private async _init(): Promise<void> {
+    try {
+      const filePath = await this.resolveModelPath()
+      if (!filePath) {
+        if (this.debug) console.log('[VoiceLayer/Transcriber] No model path — will use server STT')
+        return
+      }
+
+      this.ctx = await initWhisper({ filePath })
+      this.modelReady = true
+      if (this.debug) console.log('[VoiceLayer/Transcriber] on-device Whisper ready')
+    } catch (err) {
+      if (this.debug) console.warn('[VoiceLayer/Transcriber] init failed, falling back to server:', err)
+    }
+  }
+
+  private async resolveModelPath(): Promise<string | number | null> {
+    // Developer passed require('../assets/ggml-tiny.bin') or a file URI
+    if (this.modelPath !== undefined) return this.modelPath
+
+    // Auto-download to DocumentDirectory
+    const dest = `${FileSystem.documentDirectory}${MODEL_FILENAME}`
+    const info = await FileSystem.getInfoAsync(dest)
+    if (info.exists) return dest
+
+    if (this.debug) console.log('[VoiceLayer/Transcriber] Downloading Whisper tiny model (~39MB)…')
+
+    try {
+      const { status } = await FileSystem.downloadAsync(WHISPER_TINY_URL, dest)
+      if (status === 200) {
+        if (this.debug) console.log('[VoiceLayer/Transcriber] Model downloaded to', dest)
+        return dest
+      }
+    } catch (err) {
+      if (this.debug) console.warn('[VoiceLayer/Transcriber] Model download failed:', err)
+    }
+
+    return null
+  }
+}

package/src/VoiceLayer.tsx

@@ -0,0 +1,51 @@
+// ─────────────────────────────────────────────────────────────────────────────
+// VoiceLayer RN — <VoiceLayer /> component
+//
+// Drop this into any screen. It renders an absolute-positioned floating mic
+// button. On first voice command it hits the server; after that, everything
+// runs on-device from the LearningStore cache.
+//
+// Usage:
+//   import { VoiceLayer } from 'voicelayer-rn'
+//
+//   <VoiceLayer
+//     proxyUrl="https://your-server.com"
+//     appId="repeatly"
+//     screenName="CustomerList"
+//     language="hi"
+//     actions={[
+//       {
+//         id: 'show-inactive',
+//         description: 'Show inactive or expired subscription customers',
+//         onTrigger: () => setFilter('inactive'),
+//       },
+//       {
+//         id: 'register-customer',
+//         description: 'Register a new customer',
+//         params: ['name', 'phone', 'plan'],
+//         onTrigger: (params) =>
+//           navigation.navigate('CustomerForm', { prefill: params }),
+//       },
+//     ]}
+//   />
+// ─────────────────────────────────────────────────────────────────────────────
+
+import React from 'react'
+import { MicButton }      from './MicButton'
+import { useVoiceLayer }  from './useVoiceLayer'
+import type { VoiceLayerProps } from './types'
+
+export const VoiceLayer: React.FC<VoiceLayerProps> = (props) => {
+  const { state, transcript, message, toggle } = useVoiceLayer(props)
+
+  return (
+    <MicButton
+      state={state}
+      onPress={toggle}
+      color={props.color}
+      position={props.position ?? 'bottom-right'}
+      transcript={transcript}
+      message={message}
+    />
+  )
+}