diff --git a/app/(tabs)/_layout.tsx b/app/(tabs)/_layout.tsx index d7e8d14..007d12e 100644 --- a/app/(tabs)/_layout.tsx +++ b/app/(tabs)/_layout.tsx @@ -1,6 +1,6 @@ import { Tabs } from 'expo-router'; import React, { useCallback } from 'react'; -import { Platform, View, Alert } from 'react-native'; +import { Platform, View } from 'react-native'; import { Feather } from '@expo/vector-icons'; import { useSafeAreaInsets } from 'react-native-safe-area-context'; @@ -9,6 +9,7 @@ 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'; export default function TabLayout() { const colorScheme = useColorScheme(); @@ -17,15 +18,17 @@ export default function TabLayout() { // VoiceFAB uses VoiceCallContext internally to hide when call is active useVoiceCall(); // Ensure context is available - // Handle voice FAB press - initiate voice call + // Voice context for listening mode toggle + const { isListening, startSession, stopSession } = useVoice(); + + // Handle voice FAB press - toggle listening mode const handleVoiceFABPress = useCallback(() => { - // TODO: Integrate with voice call service when ready - Alert.alert( - 'Voice Call', - 'Voice call with Julia AI will be available soon.', - [{ text: 'OK' }] - ); - }, []); + 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 @@ -116,8 +119,8 @@ export default function TabLayout() { /> - {/* Voice FAB - shown when no call is active */} - + {/* Voice FAB - toggle listening mode */} + ); } diff --git a/components/VoiceFAB.tsx b/components/VoiceFAB.tsx index e90f24c..8baebe5 100644 --- a/components/VoiceFAB.tsx +++ b/components/VoiceFAB.tsx @@ -1,8 +1,8 @@ /** * Voice Floating Action Button Component * - * A floating action button for initiating voice calls with Julia AI. - * Shows on screens where voice chat is available. + * A floating action button for toggling voice listening mode. + * Tap to start/stop listening. * Hidden when a call is already active. */ @@ -23,11 +23,12 @@ interface VoiceFABProps { onPress: () => void; style?: ViewStyle; disabled?: boolean; + isListening?: boolean; } const FAB_SIZE = 56; -export function VoiceFAB({ onPress, style, disabled = false }: VoiceFABProps) { +export function VoiceFAB({ onPress, style, disabled = false, isListening = false }: VoiceFABProps) { const { isCallActive } = useVoiceCall(); const insets = useSafeAreaInsets(); @@ -103,7 +104,11 @@ export function VoiceFAB({ onPress, style, disabled = false }: VoiceFABProps) { ]} > @@ -141,6 +146,9 @@ const styles = StyleSheet.create({ shadowRadius: 8, elevation: 8, }, + fabListening: { + backgroundColor: AppColors.error, + }, fabDisabled: { backgroundColor: AppColors.surface, shadowOpacity: 0.1,