Sergei
bdb4ceb8d2
Add watchdog mechanism to ensure STT continues when switching tabs: - Monitor STT state every 500ms and restart if session active but STT stopped - Handle AppState changes to restart STT when app returns to foreground - Prevents session interruption due to native audio session changes 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
298 lines
10 KiB
TypeScript
298 lines
10 KiB
TypeScript
import { Tabs } from 'expo-router';
|
|
import React, { useCallback, useEffect, useRef } from 'react';
|
|
import { Platform, View, AppState, AppStateStatus } from 'react-native';
|
|
import { Feather } from '@expo/vector-icons';
|
|
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
|
|
|
import { HapticTab } from '@/components/haptic-tab';
|
|
import { VoiceFAB } from '@/components/VoiceFAB';
|
|
import { AppColors } from '@/constants/theme';
|
|
import { useColorScheme } from '@/hooks/use-color-scheme';
|
|
import { useVoiceCall } from '@/contexts/VoiceCallContext';
|
|
import { useVoice } from '@/contexts/VoiceContext';
|
|
import { useSpeechRecognition } from '@/hooks/useSpeechRecognition';
|
|
|
|
export default function TabLayout() {
|
|
const colorScheme = useColorScheme();
|
|
const isDark = colorScheme === 'dark';
|
|
const insets = useSafeAreaInsets();
|
|
// VoiceFAB uses VoiceCallContext internally to hide when call is active
|
|
useVoiceCall(); // Ensure context is available
|
|
|
|
// Voice context for listening mode toggle and TTS interruption
|
|
const {
|
|
isListening,
|
|
isSpeaking,
|
|
status,
|
|
startSession,
|
|
stopSession,
|
|
interruptIfSpeaking,
|
|
setTranscript,
|
|
setPartialTranscript,
|
|
sendTranscript,
|
|
} = useVoice();
|
|
|
|
// Track whether session is active (listening mode on, even during TTS)
|
|
const sessionActiveRef = useRef(false);
|
|
// Track if we need to restart STT after it ends during active session
|
|
const shouldRestartSTTRef = useRef(false);
|
|
|
|
// Callback for voice detection - interrupt TTS when user speaks
|
|
const handleVoiceDetected = useCallback(() => {
|
|
// Interrupt TTS when user starts speaking during 'speaking' state
|
|
if (status === 'speaking' || isSpeaking) {
|
|
console.log('[TabLayout] Voice detected during TTS playback - interrupting');
|
|
interruptIfSpeaking();
|
|
}
|
|
}, [status, isSpeaking, interruptIfSpeaking]);
|
|
|
|
// Callback when STT ends - may need to restart if session is still active
|
|
const handleSTTEnd = useCallback(() => {
|
|
console.log('[TabLayout] STT ended, sessionActive:', sessionActiveRef.current);
|
|
// If session is still active (user didn't stop it), we should restart STT
|
|
// This ensures STT continues during and after TTS playback
|
|
if (sessionActiveRef.current) {
|
|
shouldRestartSTTRef.current = true;
|
|
}
|
|
}, []);
|
|
|
|
// Callback for STT results
|
|
const handleSpeechResult = useCallback((transcript: string, isFinal: boolean) => {
|
|
if (isFinal) {
|
|
// Only process final results when NOT speaking (avoid processing interrupted speech)
|
|
if (!isSpeaking && status !== 'speaking') {
|
|
setTranscript(transcript);
|
|
// Send to API when final result is received
|
|
sendTranscript(transcript);
|
|
} else {
|
|
// Got final result while speaking - this is the interruption
|
|
console.log('[TabLayout] Got final result while TTS playing - user interrupted');
|
|
}
|
|
} else {
|
|
setPartialTranscript(transcript);
|
|
}
|
|
}, [setTranscript, setPartialTranscript, sendTranscript, isSpeaking, status]);
|
|
|
|
// Speech recognition with voice detection callback
|
|
const {
|
|
startListening,
|
|
stopListening,
|
|
isListening: sttIsListening,
|
|
} = useSpeechRecognition({
|
|
lang: 'ru-RU',
|
|
continuous: true,
|
|
interimResults: true,
|
|
onVoiceDetected: handleVoiceDetected,
|
|
onResult: handleSpeechResult,
|
|
onEnd: handleSTTEnd,
|
|
});
|
|
|
|
// Update session active ref when isListening changes
|
|
useEffect(() => {
|
|
sessionActiveRef.current = isListening;
|
|
if (!isListening) {
|
|
shouldRestartSTTRef.current = false;
|
|
}
|
|
}, [isListening]);
|
|
|
|
// Start/stop STT when voice session starts/stops
|
|
useEffect(() => {
|
|
if (isListening) {
|
|
console.log('[TabLayout] Starting STT for voice session');
|
|
startListening();
|
|
} else {
|
|
console.log('[TabLayout] Stopping STT - session ended');
|
|
stopListening();
|
|
}
|
|
}, [isListening, startListening, stopListening]);
|
|
|
|
// Restart STT if it ended while session is still active
|
|
// This ensures continuous listening even during/after TTS playback
|
|
useEffect(() => {
|
|
if (shouldRestartSTTRef.current && sessionActiveRef.current && !sttIsListening) {
|
|
console.log('[TabLayout] Restarting STT - session still active');
|
|
shouldRestartSTTRef.current = false;
|
|
// Small delay to ensure clean restart
|
|
const timer = setTimeout(() => {
|
|
if (sessionActiveRef.current) {
|
|
startListening();
|
|
}
|
|
}, 100);
|
|
return () => clearTimeout(timer);
|
|
}
|
|
}, [sttIsListening, startListening]);
|
|
|
|
// Track previous status to detect transition from speaking to listening
|
|
const prevStatusRef = useRef<typeof status>('idle');
|
|
|
|
// Auto-restart STT when TTS finishes (status changes from 'speaking' to 'listening')
|
|
useEffect(() => {
|
|
const prevStatus = prevStatusRef.current;
|
|
prevStatusRef.current = status;
|
|
|
|
// When transitioning from speaking to listening, restart STT
|
|
if (prevStatus === 'speaking' && status === 'listening' && sessionActiveRef.current) {
|
|
console.log('[TabLayout] TTS finished - auto-restarting STT');
|
|
// Small delay to ensure TTS cleanup is complete
|
|
const timer = setTimeout(() => {
|
|
if (sessionActiveRef.current && !sttIsListening) {
|
|
startListening();
|
|
}
|
|
}, 200);
|
|
return () => clearTimeout(timer);
|
|
}
|
|
}, [status, sttIsListening, startListening]);
|
|
|
|
// ============================================================================
|
|
// TAB NAVIGATION PERSISTENCE
|
|
// Ensure voice session continues when user switches between tabs.
|
|
// The session state is in VoiceContext (root level), but STT may stop due to:
|
|
// 1. Native audio session changes
|
|
// 2. Tab unmount/remount (though tabs layout doesn't unmount)
|
|
// 3. AppState changes (background/foreground)
|
|
// ============================================================================
|
|
|
|
// Monitor and recover STT state during tab navigation
|
|
// If session is active but STT stopped unexpectedly, restart it
|
|
useEffect(() => {
|
|
// Check every 500ms if STT needs to be restarted
|
|
const intervalId = setInterval(() => {
|
|
// Only act if session should be active (isListening from VoiceContext)
|
|
// but STT is not actually listening, and we're not in speaking/processing mode
|
|
if (
|
|
sessionActiveRef.current &&
|
|
!sttIsListening &&
|
|
status !== 'speaking' &&
|
|
status !== 'processing'
|
|
) {
|
|
console.log('[TabLayout] STT watchdog: restarting STT (session active but STT stopped)');
|
|
startListening();
|
|
}
|
|
}, 500);
|
|
|
|
return () => clearInterval(intervalId);
|
|
}, [sttIsListening, status, startListening]);
|
|
|
|
// Handle app state changes (background/foreground)
|
|
// When app comes back to foreground, restart STT if session was active
|
|
useEffect(() => {
|
|
const handleAppStateChange = (nextAppState: AppStateStatus) => {
|
|
if (nextAppState === 'active' && sessionActiveRef.current) {
|
|
// App came to foreground, give it a moment then check STT
|
|
setTimeout(() => {
|
|
if (sessionActiveRef.current && !sttIsListening && status !== 'speaking' && status !== 'processing') {
|
|
console.log('[TabLayout] App foregrounded - restarting STT');
|
|
startListening();
|
|
}
|
|
}, 300);
|
|
}
|
|
};
|
|
|
|
const subscription = AppState.addEventListener('change', handleAppStateChange);
|
|
return () => subscription.remove();
|
|
}, [sttIsListening, status, startListening]);
|
|
|
|
// Handle voice FAB press - toggle listening mode
|
|
const handleVoiceFABPress = useCallback(() => {
|
|
if (isListening) {
|
|
stopSession();
|
|
} else {
|
|
startSession();
|
|
}
|
|
}, [isListening, startSession, stopSession]);
|
|
|
|
// Calculate tab bar height based on safe area
|
|
// On iOS with home indicator, insets.bottom is ~34px
|
|
// On Android with gesture navigation or software buttons (Samsung/Pixel):
|
|
// - insets.bottom should reflect the navigation bar height
|
|
// - But some devices/modes may return 0, so we add a minimum for Android
|
|
// Android minimum: 16px to ensure content doesn't touch system buttons
|
|
const androidMinPadding = Platform.OS === 'android' ? 16 : 0;
|
|
const bottomPadding = Math.max(insets.bottom, androidMinPadding, 10);
|
|
const tabBarHeight = 60 + bottomPadding; // 60px for content + safe area padding
|
|
|
|
return (
|
|
<View style={{ flex: 1 }}>
|
|
<Tabs
|
|
screenOptions={{
|
|
tabBarActiveTintColor: AppColors.primary,
|
|
tabBarInactiveTintColor: isDark ? '#9BA1A6' : '#687076',
|
|
tabBarStyle: {
|
|
backgroundColor: isDark ? '#151718' : AppColors.background,
|
|
borderTopColor: isDark ? '#2D3135' : AppColors.border,
|
|
height: tabBarHeight,
|
|
paddingBottom: bottomPadding,
|
|
paddingTop: 10,
|
|
},
|
|
tabBarLabelStyle: {
|
|
fontSize: 11,
|
|
fontWeight: '500',
|
|
},
|
|
headerShown: false,
|
|
tabBarButton: HapticTab,
|
|
}}
|
|
>
|
|
<Tabs.Screen
|
|
name="index"
|
|
options={{
|
|
title: 'Dashboard',
|
|
tabBarIcon: ({ color, size }) => (
|
|
<Feather name="grid" size={22} color={color} />
|
|
),
|
|
}}
|
|
/>
|
|
{/* Hide old dashboard - now index shows WebView dashboard */}
|
|
<Tabs.Screen
|
|
name="dashboard"
|
|
options={{
|
|
href: null,
|
|
}}
|
|
/>
|
|
{/* Chat with Julia AI */}
|
|
<Tabs.Screen
|
|
name="chat"
|
|
options={{
|
|
title: 'Julia',
|
|
tabBarIcon: ({ color, size }) => (
|
|
<Feather name="message-circle" size={22} color={color} />
|
|
),
|
|
}}
|
|
/>
|
|
<Tabs.Screen
|
|
name="profile"
|
|
options={{
|
|
title: 'Profile',
|
|
tabBarIcon: ({ color, size }) => (
|
|
<Feather name="user" size={22} color={color} />
|
|
),
|
|
}}
|
|
/>
|
|
{/* Hide explore tab */}
|
|
<Tabs.Screen
|
|
name="explore"
|
|
options={{
|
|
href: null,
|
|
}}
|
|
/>
|
|
{/* Audio Debug - hidden */}
|
|
<Tabs.Screen
|
|
name="audio-debug"
|
|
options={{
|
|
href: null,
|
|
}}
|
|
/>
|
|
{/* Beneficiaries - hidden from tab bar but keeps tab bar visible */}
|
|
<Tabs.Screen
|
|
name="beneficiaries"
|
|
options={{
|
|
href: null,
|
|
}}
|
|
/>
|
|
</Tabs>
|
|
|
|
{/* Voice FAB - toggle listening mode */}
|
|
<VoiceFAB onPress={handleVoiceFABPress} isListening={isListening} />
|
|
</View>
|
|
);
|
|
}
|