feat: implement realtime audio with VAD for Android

- Install react-native-vad and expo-audio-studio for voice detection
- Create use-realtime-audio hook for continuous recording + VAD segmentation
- Add Android FOREGROUND_SERVICE permissions for background mic access
- Update UI components with Lucide icons and markdown rendering
- Add npm overrides to resolve peer dependency conflicts with Expo SDK 54
- Integrate realtime mode toggle with pulse animation for speech detection

Generated with [Claude Code](https://claude.ai/code)
via [Happy](https://happy.engineering)

Co-Authored-By: Claude <noreply@anthropic.com>
Co-Authored-By: Happy <yesreply@happy.engineering>
This commit is contained in:
Mohamed Boudra
2025-10-21 21:33:14 +02:00
co-authored by Claude Happy
parent cc3dbb88cb
commit 0f1450381a
9 changed files with 1013 additions and 177 deletions
@@ -1,11 +1,14 @@
import { useAudioRecorder as useExpoAudioRecorder, RecordingOptions, RecordingPresets, requestRecordingPermissionsAsync, setAudioModeAsync } from 'expo-audio';
import { Paths, File, Directory, FileInfo } from 'expo-file-system';
import { useState } from 'react';
import { useState, useEffect } from 'react';
export interface AudioCaptureConfig {
sampleRate?: number;
numberOfChannels?: number;
bitRate?: number;
onAudioLevel?: (level: number) => void;
onSpeechSegment?: (audioBlob: Blob) => void;
enableContinuousRecording?: boolean;
}
/**
@@ -133,6 +136,7 @@ export function useAudioRecorder(config?: AudioCaptureConfig) {
numberOfChannels: config?.numberOfChannels || 1,
bitRate: config?.bitRate || 128000,
extension: '.m4a',
isMeteringEnabled: !!config?.onAudioLevel, // Enable metering if callback provided
android: {
extension: '.m4a',
outputFormat: 'mpeg4',
@@ -156,6 +160,24 @@ export function useAudioRecorder(config?: AudioCaptureConfig) {
const audioRecorder = useExpoAudioRecorder(recordingOptions);
// Monitor audio levels if metering is enabled
useEffect(() => {
if (!config?.onAudioLevel || !isRecording) return;
const interval = setInterval(() => {
const metering = audioRecorder.state?.metering;
if (metering !== undefined && metering !== null) {
// Normalize metering value (typically ranges from -160 to 0 dB)
// Convert to 0-1 range where 0 is silence and 1 is loud
// We'll use -40 dB as the threshold for "loud"
const normalized = Math.max(0, Math.min(1, (metering + 40) / 40));
config.onAudioLevel(normalized);
}
}, 100); // Check every 100ms
return () => clearInterval(interval);
}, [isRecording, config, audioRecorder.state?.metering]);
async function start(): Promise<void> {
if (isRecording) {
throw new Error('Already recording');