Remove LiveKit integration from chat.tsx
- Remove all LiveKit imports (registerGlobals, LiveKitRoom, useVoiceAssistant, etc.) - Remove VoiceCallTranscriptHandler component - Remove voice call state management (callState, isCallActive) - Remove voice call functions (startVoiceCall, endVoiceCall, handleVoiceTranscript) - Remove LiveKitRoom component from JSX - Remove debug panel for voice calls - Clean up unused imports (Clipboard, Animated, expo-keep-awake, useAuth, useVoiceTranscript, useVoiceCall) - Remove unused styles (voiceButton, callActiveIndicator, debug panel styles) - Update initial message text to remove voice call references 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
parent
260a722cd9
commit
bd12aadfb3
@ -1,7 +1,7 @@
|
|||||||
/**
|
/**
|
||||||
* Chat Screen - Text Chat with Julia AI
|
* Chat Screen - Text Chat with Julia AI
|
||||||
*
|
*
|
||||||
* Clean text chat interface with integrated voice calls.
|
* Clean text chat interface.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import React, { useState, useCallback, useRef, useEffect } from 'react';
|
import React, { useState, useCallback, useRef, useEffect } from 'react';
|
||||||
@ -17,38 +17,16 @@ import {
|
|||||||
Keyboard,
|
Keyboard,
|
||||||
Platform,
|
Platform,
|
||||||
Alert,
|
Alert,
|
||||||
Animated,
|
|
||||||
ScrollView,
|
|
||||||
} from 'react-native';
|
} from 'react-native';
|
||||||
import * as Clipboard from 'expo-clipboard';
|
|
||||||
import { KeyboardAvoidingView } from 'react-native-keyboard-controller';
|
import { KeyboardAvoidingView } from 'react-native-keyboard-controller';
|
||||||
import { Ionicons } from '@expo/vector-icons';
|
import { Ionicons } from '@expo/vector-icons';
|
||||||
import { SafeAreaView } from 'react-native-safe-area-context';
|
import { SafeAreaView } from 'react-native-safe-area-context';
|
||||||
import { useRouter, useFocusEffect } from 'expo-router';
|
import { useRouter, useFocusEffect } from 'expo-router';
|
||||||
import { activateKeepAwakeAsync, deactivateKeepAwake } from 'expo-keep-awake';
|
|
||||||
import { api } from '@/services/api';
|
import { api } from '@/services/api';
|
||||||
import { useBeneficiary } from '@/contexts/BeneficiaryContext';
|
import { useBeneficiary } from '@/contexts/BeneficiaryContext';
|
||||||
import { useVoiceTranscript } from '@/contexts/VoiceTranscriptContext';
|
|
||||||
import { useVoiceCall } from '@/contexts/VoiceCallContext';
|
|
||||||
import { AppColors, BorderRadius, FontSizes, Spacing } from '@/constants/theme';
|
import { AppColors, BorderRadius, FontSizes, Spacing } from '@/constants/theme';
|
||||||
import type { Message, Beneficiary } from '@/types';
|
import type { Message, Beneficiary } from '@/types';
|
||||||
|
|
||||||
// LiveKit imports
|
|
||||||
import {
|
|
||||||
registerGlobals,
|
|
||||||
LiveKitRoom,
|
|
||||||
useVoiceAssistant,
|
|
||||||
useConnectionState,
|
|
||||||
useTrackTranscription,
|
|
||||||
useTracks,
|
|
||||||
} from '@livekit/react-native';
|
|
||||||
import { ConnectionState, Track } from 'livekit-client';
|
|
||||||
import { getToken, type BeneficiaryData } from '@/services/livekitService';
|
|
||||||
import { useAuth } from '@/contexts/AuthContext';
|
|
||||||
|
|
||||||
// Register LiveKit globals (must be called before using LiveKit)
|
|
||||||
registerGlobals();
|
|
||||||
|
|
||||||
const API_URL = 'https://eluxnetworks.net/function/well-api/api';
|
const API_URL = 'https://eluxnetworks.net/function/well-api/api';
|
||||||
|
|
||||||
// WellNuo API credentials (same as julia-agent)
|
// WellNuo API credentials (same as julia-agent)
|
||||||
@ -128,165 +106,15 @@ function normalizeQuestion(userMessage: string): string {
|
|||||||
return userMessage;
|
return userMessage;
|
||||||
}
|
}
|
||||||
|
|
||||||
// ============================================================================
|
|
||||||
// Voice Call Transcript Handler (invisible - just captures transcripts)
|
|
||||||
// ============================================================================
|
|
||||||
|
|
||||||
interface VoiceCallTranscriptHandlerProps {
|
|
||||||
onTranscript: (role: 'user' | 'assistant', text: string) => void;
|
|
||||||
onDurationUpdate: (seconds: number) => void;
|
|
||||||
onLog?: (message: string) => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Debug log entry type
|
|
||||||
interface DebugLogEntry {
|
|
||||||
id: string;
|
|
||||||
timestamp: string;
|
|
||||||
level: 'info' | 'warn' | 'error' | 'success';
|
|
||||||
message: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
function VoiceCallTranscriptHandler({ onTranscript, onDurationUpdate, onLog }: VoiceCallTranscriptHandlerProps) {
|
|
||||||
const connectionState = useConnectionState();
|
|
||||||
const { audioTrack, state: agentState } = useVoiceAssistant();
|
|
||||||
const [callDuration, setCallDuration] = useState(0);
|
|
||||||
const [lastProcessedId, setLastProcessedId] = useState<string | null>(null);
|
|
||||||
const prevConnectionStateRef = useRef<ConnectionState | null>(null);
|
|
||||||
const prevAgentStateRef = useRef<string | null>(null);
|
|
||||||
|
|
||||||
// Track all audio tracks for transcription
|
|
||||||
const tracks = useTracks([Track.Source.Microphone, Track.Source.Unknown], { onlySubscribed: false });
|
|
||||||
|
|
||||||
// Get transcription from agent's audio track
|
|
||||||
const { segments: agentSegments } = useTrackTranscription(audioTrack);
|
|
||||||
|
|
||||||
// Get transcription from user's microphone
|
|
||||||
const localTrack = tracks.find(t => t.participant?.isLocal);
|
|
||||||
const { segments: userSegments } = useTrackTranscription(localTrack);
|
|
||||||
|
|
||||||
// Log connection state changes
|
|
||||||
useEffect(() => {
|
|
||||||
if (prevConnectionStateRef.current !== connectionState) {
|
|
||||||
const msg = `Connection: ${prevConnectionStateRef.current || 'initial'} -> ${connectionState}`;
|
|
||||||
console.log('[VoiceCall]', msg);
|
|
||||||
onLog?.(msg);
|
|
||||||
prevConnectionStateRef.current = connectionState;
|
|
||||||
}
|
|
||||||
}, [connectionState, onLog]);
|
|
||||||
|
|
||||||
// Log agent state changes
|
|
||||||
useEffect(() => {
|
|
||||||
if (agentState && prevAgentStateRef.current !== agentState) {
|
|
||||||
const msg = `Agent state: ${prevAgentStateRef.current || 'initial'} -> ${agentState}`;
|
|
||||||
console.log('[VoiceCall]', msg);
|
|
||||||
onLog?.(msg);
|
|
||||||
prevAgentStateRef.current = agentState;
|
|
||||||
}
|
|
||||||
}, [agentState, onLog]);
|
|
||||||
|
|
||||||
// Log audio track info
|
|
||||||
useEffect(() => {
|
|
||||||
if (audioTrack) {
|
|
||||||
// audioTrack may have different properties depending on LiveKit version
|
|
||||||
const trackInfo = JSON.stringify({
|
|
||||||
hasTrack: !!audioTrack,
|
|
||||||
publication: (audioTrack as any)?.publication?.sid || 'no-pub',
|
|
||||||
trackSid: (audioTrack as any)?.sid || (audioTrack as any)?.trackSid || 'unknown',
|
|
||||||
});
|
|
||||||
const msg = `Audio track received: ${trackInfo}`;
|
|
||||||
console.log('[VoiceCall]', msg);
|
|
||||||
onLog?.(msg);
|
|
||||||
}
|
|
||||||
}, [audioTrack, onLog]);
|
|
||||||
|
|
||||||
// Log all tracks
|
|
||||||
useEffect(() => {
|
|
||||||
if (tracks.length > 0) {
|
|
||||||
const trackInfo = tracks.map(t => {
|
|
||||||
const participant = t.participant?.identity || 'unknown';
|
|
||||||
const source = t.source || 'unknown';
|
|
||||||
const isLocal = t.participant?.isLocal ? 'local' : 'remote';
|
|
||||||
return `${participant}(${isLocal}):${source}`;
|
|
||||||
}).join(', ');
|
|
||||||
const msg = `Tracks (${tracks.length}): ${trackInfo}`;
|
|
||||||
console.log('[VoiceCall]', msg);
|
|
||||||
onLog?.(msg);
|
|
||||||
}
|
|
||||||
}, [tracks, onLog]);
|
|
||||||
|
|
||||||
// Process agent transcription
|
|
||||||
useEffect(() => {
|
|
||||||
if (agentSegments && agentSegments.length > 0) {
|
|
||||||
const lastSegment = agentSegments[agentSegments.length - 1];
|
|
||||||
if (lastSegment && lastSegment.final && lastSegment.id !== lastProcessedId) {
|
|
||||||
setLastProcessedId(lastSegment.id);
|
|
||||||
onTranscript('assistant', lastSegment.text);
|
|
||||||
const msg = `Julia said: "${lastSegment.text}"`;
|
|
||||||
console.log('[VoiceCall]', msg);
|
|
||||||
onLog?.(msg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}, [agentSegments, lastProcessedId, onTranscript, onLog]);
|
|
||||||
|
|
||||||
// Process user transcription
|
|
||||||
const [lastUserSegmentId, setLastUserSegmentId] = useState<string | null>(null);
|
|
||||||
useEffect(() => {
|
|
||||||
if (userSegments && userSegments.length > 0) {
|
|
||||||
const lastSegment = userSegments[userSegments.length - 1];
|
|
||||||
if (lastSegment && lastSegment.final && lastSegment.id !== lastUserSegmentId) {
|
|
||||||
setLastUserSegmentId(lastSegment.id);
|
|
||||||
onTranscript('user', lastSegment.text);
|
|
||||||
const msg = `User said: "${lastSegment.text}"`;
|
|
||||||
console.log('[VoiceCall]', msg);
|
|
||||||
onLog?.(msg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}, [userSegments, lastUserSegmentId, onTranscript, onLog]);
|
|
||||||
|
|
||||||
// Call duration timer - use ref to avoid state updates during render
|
|
||||||
const durationRef = useRef(0);
|
|
||||||
useEffect(() => {
|
|
||||||
if (connectionState === ConnectionState.Connected) {
|
|
||||||
const interval = setInterval(() => {
|
|
||||||
durationRef.current += 1;
|
|
||||||
onDurationUpdate(durationRef.current);
|
|
||||||
}, 1000);
|
|
||||||
return () => clearInterval(interval);
|
|
||||||
}
|
|
||||||
}, [connectionState, onDurationUpdate]);
|
|
||||||
|
|
||||||
// Keep screen awake during call
|
|
||||||
useEffect(() => {
|
|
||||||
activateKeepAwakeAsync('voice-call');
|
|
||||||
return () => {
|
|
||||||
deactivateKeepAwake('voice-call');
|
|
||||||
};
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
// This component renders nothing - it just handles transcripts
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function ChatScreen() {
|
export default function ChatScreen() {
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const { currentBeneficiary, setCurrentBeneficiary } = useBeneficiary();
|
const { currentBeneficiary, setCurrentBeneficiary } = useBeneficiary();
|
||||||
const { addTranscriptEntry, clearTranscript } = useVoiceTranscript();
|
|
||||||
const { user } = useAuth();
|
|
||||||
const {
|
|
||||||
callState,
|
|
||||||
startCall,
|
|
||||||
endCall: endVoiceCallContext,
|
|
||||||
minimizeCall,
|
|
||||||
maximizeCall,
|
|
||||||
updateDuration,
|
|
||||||
isCallActive,
|
|
||||||
} = useVoiceCall();
|
|
||||||
|
|
||||||
// Helper to create initial message with beneficiary name
|
// Helper to create initial message with beneficiary name
|
||||||
const createInitialMessage = useCallback((beneficiaryName?: string | null): Message => ({
|
const createInitialMessage = useCallback((beneficiaryName?: string | null): Message => ({
|
||||||
id: '1',
|
id: '1',
|
||||||
role: 'assistant',
|
role: 'assistant',
|
||||||
content: `Hello! I'm Julia, your AI wellness companion.${beneficiaryName ? `\n\nI'm here to help you monitor ${beneficiaryName}.` : ''}\n\nTap the phone button to start a voice call, or type a message below.`,
|
content: `Hello! I'm Julia, your AI wellness companion.${beneficiaryName ? `\n\nI'm here to help you monitor ${beneficiaryName}.` : ''}\n\nType a message below to chat with me.`,
|
||||||
timestamp: new Date(),
|
timestamp: new Date(),
|
||||||
}), []);
|
}), []);
|
||||||
|
|
||||||
@ -298,84 +126,6 @@ export default function ChatScreen() {
|
|||||||
const [messages, setMessages] = useState<Message[]>([createInitialMessage(null)]);
|
const [messages, setMessages] = useState<Message[]>([createInitialMessage(null)]);
|
||||||
const [sortNewestFirst, setSortNewestFirst] = useState(false);
|
const [sortNewestFirst, setSortNewestFirst] = useState(false);
|
||||||
|
|
||||||
// Voice call state (local connecting state only)
|
|
||||||
const [isConnectingVoice, setIsConnectingVoice] = useState(false);
|
|
||||||
|
|
||||||
// Debug logs state
|
|
||||||
const [debugLogs, setDebugLogs] = useState<DebugLogEntry[]>([]);
|
|
||||||
const [showDebugPanel, setShowDebugPanel] = useState(false);
|
|
||||||
const debugLogIdRef = useRef(0);
|
|
||||||
|
|
||||||
// Add debug log entry
|
|
||||||
const addDebugLog = useCallback((message: string, level: DebugLogEntry['level'] = 'info') => {
|
|
||||||
const now = new Date();
|
|
||||||
const timestamp = now.toLocaleTimeString('en-US', {
|
|
||||||
hour12: false,
|
|
||||||
hour: '2-digit',
|
|
||||||
minute: '2-digit',
|
|
||||||
second: '2-digit',
|
|
||||||
}) + '.' + now.getMilliseconds().toString().padStart(3, '0');
|
|
||||||
|
|
||||||
const entry: DebugLogEntry = {
|
|
||||||
id: `log-${++debugLogIdRef.current}`,
|
|
||||||
timestamp,
|
|
||||||
level,
|
|
||||||
message,
|
|
||||||
};
|
|
||||||
setDebugLogs(prev => [...prev.slice(-100), entry]); // Keep last 100 logs
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
// Copy logs to clipboard
|
|
||||||
const copyLogsToClipboard = useCallback(async () => {
|
|
||||||
const logsText = debugLogs.map(log => `[${log.timestamp}] ${log.level.toUpperCase()}: ${log.message}`).join('\n');
|
|
||||||
await Clipboard.setStringAsync(logsText);
|
|
||||||
Alert.alert('Copied', `${debugLogs.length} log entries copied to clipboard`);
|
|
||||||
}, [debugLogs]);
|
|
||||||
|
|
||||||
// Clear debug logs
|
|
||||||
const clearDebugLogs = useCallback(() => {
|
|
||||||
setDebugLogs([]);
|
|
||||||
addDebugLog('Logs cleared', 'info');
|
|
||||||
}, [addDebugLog]);
|
|
||||||
|
|
||||||
// Pulsing animation for active call
|
|
||||||
const pulseAnim = useRef(new Animated.Value(1)).current;
|
|
||||||
|
|
||||||
// Start pulsing animation when call is active
|
|
||||||
useEffect(() => {
|
|
||||||
if (isCallActive) {
|
|
||||||
const pulse = Animated.loop(
|
|
||||||
Animated.sequence([
|
|
||||||
Animated.timing(pulseAnim, {
|
|
||||||
toValue: 1.15,
|
|
||||||
duration: 600,
|
|
||||||
useNativeDriver: true,
|
|
||||||
}),
|
|
||||||
Animated.timing(pulseAnim, {
|
|
||||||
toValue: 1,
|
|
||||||
duration: 600,
|
|
||||||
useNativeDriver: true,
|
|
||||||
}),
|
|
||||||
])
|
|
||||||
);
|
|
||||||
pulse.start();
|
|
||||||
return () => pulse.stop();
|
|
||||||
} else {
|
|
||||||
pulseAnim.setValue(1);
|
|
||||||
}
|
|
||||||
}, [isCallActive, pulseAnim]);
|
|
||||||
|
|
||||||
// Track if we've shown the voice call separator for current call
|
|
||||||
const [hasShownVoiceSeparator, setHasShownVoiceSeparator] = useState(false);
|
|
||||||
|
|
||||||
// Reset separator flag when starting a new call
|
|
||||||
useEffect(() => {
|
|
||||||
if (isCallActive && !hasShownVoiceSeparator) {
|
|
||||||
// Will show separator on first voice message
|
|
||||||
} else if (!isCallActive) {
|
|
||||||
setHasShownVoiceSeparator(false);
|
|
||||||
}
|
|
||||||
}, [isCallActive]);
|
|
||||||
const [input, setInput] = useState('');
|
const [input, setInput] = useState('');
|
||||||
const [isSending, setIsSending] = useState(false);
|
const [isSending, setIsSending] = useState(false);
|
||||||
const inputRef = useRef('');
|
const inputRef = useRef('');
|
||||||
@ -428,20 +178,15 @@ export default function ChatScreen() {
|
|||||||
old: previousDeploymentIdRef.current,
|
old: previousDeploymentIdRef.current,
|
||||||
new: customDeploymentId,
|
new: customDeploymentId,
|
||||||
name: deploymentName,
|
name: deploymentName,
|
||||||
isCallActive,
|
|
||||||
});
|
});
|
||||||
|
|
||||||
// End any active call
|
|
||||||
endVoiceCallContext();
|
|
||||||
|
|
||||||
// Clear chat with new initial message (use name instead of ID)
|
// Clear chat with new initial message (use name instead of ID)
|
||||||
setMessages([createInitialMessage(deploymentName)]);
|
setMessages([createInitialMessage(deploymentName)]);
|
||||||
setHasShownVoiceSeparator(false);
|
|
||||||
|
|
||||||
// Update ref
|
// Update ref
|
||||||
previousDeploymentIdRef.current = customDeploymentId;
|
previousDeploymentIdRef.current = customDeploymentId;
|
||||||
}
|
}
|
||||||
}, [customDeploymentId, deploymentName, createInitialMessage, isCallActive, endVoiceCallContext]);
|
}, [customDeploymentId, deploymentName, createInitialMessage]);
|
||||||
|
|
||||||
// Update initial message when deploymentName is loaded (but only if chat has just the initial message)
|
// Update initial message when deploymentName is loaded (but only if chat has just the initial message)
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@ -515,127 +260,6 @@ export default function ChatScreen() {
|
|||||||
setShowBeneficiaryPicker(false);
|
setShowBeneficiaryPicker(false);
|
||||||
}, [setCurrentBeneficiary]);
|
}, [setCurrentBeneficiary]);
|
||||||
|
|
||||||
// ============================================================================
|
|
||||||
// Voice Call Functions
|
|
||||||
// ============================================================================
|
|
||||||
|
|
||||||
// Start voice call
|
|
||||||
const startVoiceCall = useCallback(async () => {
|
|
||||||
if (isConnectingVoice || isCallActive) return;
|
|
||||||
|
|
||||||
setIsConnectingVoice(true);
|
|
||||||
addDebugLog('Starting voice call...', 'info');
|
|
||||||
console.log('[Chat] Starting voice call...');
|
|
||||||
|
|
||||||
try {
|
|
||||||
// Build beneficiary data for the agent
|
|
||||||
// Priority: customDeploymentId from settings > currentBeneficiary > first beneficiary > fallback
|
|
||||||
const beneficiaryData: BeneficiaryData = {
|
|
||||||
deploymentId: customDeploymentId || currentBeneficiary?.id?.toString() || beneficiaries[0]?.id?.toString() || '21',
|
|
||||||
beneficiaryNamesDict: {},
|
|
||||||
};
|
|
||||||
addDebugLog(`Deployment ID: ${beneficiaryData.deploymentId}`, 'info');
|
|
||||||
|
|
||||||
// Add names dict if not in single deployment mode
|
|
||||||
if (!SINGLE_DEPLOYMENT_MODE) {
|
|
||||||
beneficiaries.forEach(b => {
|
|
||||||
beneficiaryData.beneficiaryNamesDict[b.id.toString()] = b.name;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Get LiveKit token
|
|
||||||
addDebugLog('Requesting LiveKit token...', 'info');
|
|
||||||
const userIdStr = user?.user_id?.toString() || 'user-' + Date.now();
|
|
||||||
const tokenResponse = await getToken(userIdStr, beneficiaryData);
|
|
||||||
|
|
||||||
if (!tokenResponse.success || !tokenResponse.data) {
|
|
||||||
throw new Error(tokenResponse.error || 'Failed to get voice token');
|
|
||||||
}
|
|
||||||
|
|
||||||
addDebugLog(`Token received! Room: ${tokenResponse.data.roomName}`, 'success');
|
|
||||||
addDebugLog(`WS URL: ${tokenResponse.data.wsUrl}`, 'info');
|
|
||||||
console.log('[Chat] Got voice token, connecting to room:', tokenResponse.data.roomName);
|
|
||||||
|
|
||||||
// Add call start message to chat
|
|
||||||
const callStartMessage: Message = {
|
|
||||||
id: `call-start-${Date.now()}`,
|
|
||||||
role: 'assistant',
|
|
||||||
content: 'Voice call started',
|
|
||||||
timestamp: new Date(),
|
|
||||||
isSystem: true,
|
|
||||||
};
|
|
||||||
setMessages(prev => [...prev, callStartMessage]);
|
|
||||||
|
|
||||||
// Clear previous transcript and start call via context
|
|
||||||
clearTranscript();
|
|
||||||
addDebugLog('Calling startCall with token and wsUrl...', 'info');
|
|
||||||
startCall({
|
|
||||||
token: tokenResponse.data.token,
|
|
||||||
wsUrl: tokenResponse.data.wsUrl,
|
|
||||||
beneficiaryName: currentBeneficiary?.name,
|
|
||||||
beneficiaryId: currentBeneficiary?.id?.toString(),
|
|
||||||
});
|
|
||||||
addDebugLog('startCall called, waiting for LiveKitRoom to connect...', 'success');
|
|
||||||
} catch (error) {
|
|
||||||
const errorMsg = error instanceof Error ? error.message : 'Unknown error';
|
|
||||||
addDebugLog(`Voice call error: ${errorMsg}`, 'error');
|
|
||||||
console.error('[Chat] Voice call error:', error);
|
|
||||||
Alert.alert(
|
|
||||||
'Voice Call Error',
|
|
||||||
error instanceof Error ? error.message : 'Failed to start voice call'
|
|
||||||
);
|
|
||||||
} finally {
|
|
||||||
setIsConnectingVoice(false);
|
|
||||||
}
|
|
||||||
}, [isConnectingVoice, isCallActive, currentBeneficiary, beneficiaries, user, clearTranscript, startCall, customDeploymentId, addDebugLog]);
|
|
||||||
|
|
||||||
// End voice call and log to chat
|
|
||||||
const endVoiceCall = useCallback(() => {
|
|
||||||
console.log('[Chat] Ending voice call...');
|
|
||||||
|
|
||||||
// Add call end message to chat with duration
|
|
||||||
const duration = callState.callDuration;
|
|
||||||
const minutes = Math.floor(duration / 60);
|
|
||||||
const seconds = duration % 60;
|
|
||||||
const durationStr = `${minutes}:${seconds.toString().padStart(2, '0')}`;
|
|
||||||
|
|
||||||
const callEndMessage: Message = {
|
|
||||||
id: `call-end-${Date.now()}-${Math.random().toString(36).slice(2)}`,
|
|
||||||
role: 'assistant',
|
|
||||||
content: `Call ended (${durationStr})`,
|
|
||||||
timestamp: new Date(),
|
|
||||||
isSystem: true,
|
|
||||||
};
|
|
||||||
setMessages(prev => [...prev, callEndMessage]);
|
|
||||||
setHasShownVoiceSeparator(false);
|
|
||||||
|
|
||||||
endVoiceCallContext();
|
|
||||||
}, [endVoiceCallContext, callState.callDuration]);
|
|
||||||
|
|
||||||
// Handle voice transcript entries - add to chat in real-time
|
|
||||||
const handleVoiceTranscript = useCallback((role: 'user' | 'assistant', text: string) => {
|
|
||||||
if (!text.trim()) return;
|
|
||||||
|
|
||||||
// Create voice message and add to chat immediately
|
|
||||||
const voiceMessage: Message = {
|
|
||||||
id: `voice-${Date.now()}-${Math.random().toString(36).slice(2)}`,
|
|
||||||
role,
|
|
||||||
content: text.trim(),
|
|
||||||
timestamp: new Date(),
|
|
||||||
isVoice: true,
|
|
||||||
};
|
|
||||||
|
|
||||||
setMessages(prev => [...prev, voiceMessage]);
|
|
||||||
|
|
||||||
// Scroll to latest message (respects sort mode)
|
|
||||||
setTimeout(() => {
|
|
||||||
scrollToLatestMessage(true);
|
|
||||||
}, 100);
|
|
||||||
|
|
||||||
// Also store in transcript context for persistence
|
|
||||||
addTranscriptEntry(role, text);
|
|
||||||
}, [hasShownVoiceSeparator, addTranscriptEntry, scrollToLatestMessage]);
|
|
||||||
|
|
||||||
// Cached API token for WellNuo
|
// Cached API token for WellNuo
|
||||||
const apiTokenRef = useRef<string | null>(null);
|
const apiTokenRef = useRef<string | null>(null);
|
||||||
|
|
||||||
@ -764,7 +388,7 @@ export default function ChatScreen() {
|
|||||||
const isVoice = item.isVoice;
|
const isVoice = item.isVoice;
|
||||||
const isSystem = item.isSystem;
|
const isSystem = item.isSystem;
|
||||||
|
|
||||||
// System messages (like "Voice Call Transcript" separator)
|
// System messages
|
||||||
if (isSystem) {
|
if (isSystem) {
|
||||||
return (
|
return (
|
||||||
<View style={styles.systemMessageContainer}>
|
<View style={styles.systemMessageContainer}>
|
||||||
@ -841,7 +465,7 @@ export default function ChatScreen() {
|
|||||||
{
|
{
|
||||||
id: '1',
|
id: '1',
|
||||||
role: 'assistant',
|
role: 'assistant',
|
||||||
content: 'Hello! I\'m Julia, your AI wellness assistant. You can type a message or tap the phone button to start a voice call.',
|
content: 'Hello! I\'m Julia, your AI wellness assistant. Type a message below to chat with me.',
|
||||||
timestamp: new Date(),
|
timestamp: new Date(),
|
||||||
},
|
},
|
||||||
]);
|
]);
|
||||||
@ -911,53 +535,6 @@ export default function ChatScreen() {
|
|||||||
</View>
|
</View>
|
||||||
</Modal>
|
</Modal>
|
||||||
|
|
||||||
{/* Debug Logs Modal */}
|
|
||||||
<Modal
|
|
||||||
visible={showDebugPanel}
|
|
||||||
transparent
|
|
||||||
animationType="slide"
|
|
||||||
onRequestClose={() => setShowDebugPanel(false)}
|
|
||||||
>
|
|
||||||
<View style={styles.modalOverlay}>
|
|
||||||
<View style={[styles.modalContent, styles.debugModalContent]}>
|
|
||||||
<View style={styles.modalHeader}>
|
|
||||||
<Text style={styles.modalTitle}>Debug Logs ({debugLogs.length})</Text>
|
|
||||||
<View style={styles.debugHeaderButtons}>
|
|
||||||
<TouchableOpacity style={styles.debugHeaderBtn} onPress={copyLogsToClipboard}>
|
|
||||||
<Ionicons name="copy-outline" size={20} color={AppColors.primary} />
|
|
||||||
</TouchableOpacity>
|
|
||||||
<TouchableOpacity style={styles.debugHeaderBtn} onPress={clearDebugLogs}>
|
|
||||||
<Ionicons name="trash-outline" size={20} color={AppColors.error} />
|
|
||||||
</TouchableOpacity>
|
|
||||||
<TouchableOpacity onPress={() => setShowDebugPanel(false)}>
|
|
||||||
<Ionicons name="close" size={24} color={AppColors.textPrimary} />
|
|
||||||
</TouchableOpacity>
|
|
||||||
</View>
|
|
||||||
</View>
|
|
||||||
|
|
||||||
<ScrollView style={styles.debugLogsContainer}>
|
|
||||||
{debugLogs.length === 0 ? (
|
|
||||||
<Text style={styles.debugEmptyText}>No logs yet. Start a voice call to see logs.</Text>
|
|
||||||
) : (
|
|
||||||
debugLogs.map(log => (
|
|
||||||
<View key={log.id} style={styles.debugLogEntry}>
|
|
||||||
<Text style={styles.debugTimestamp}>{log.timestamp}</Text>
|
|
||||||
<Text style={[
|
|
||||||
styles.debugMessage,
|
|
||||||
log.level === 'error' && styles.debugError,
|
|
||||||
log.level === 'warn' && styles.debugWarn,
|
|
||||||
log.level === 'success' && styles.debugSuccess,
|
|
||||||
]}>
|
|
||||||
{log.message}
|
|
||||||
</Text>
|
|
||||||
</View>
|
|
||||||
))
|
|
||||||
)}
|
|
||||||
</ScrollView>
|
|
||||||
</View>
|
|
||||||
</View>
|
|
||||||
</Modal>
|
|
||||||
|
|
||||||
{/* Messages */}
|
{/* Messages */}
|
||||||
<KeyboardAvoidingView
|
<KeyboardAvoidingView
|
||||||
style={styles.chatContainer}
|
style={styles.chatContainer}
|
||||||
@ -989,37 +566,6 @@ export default function ChatScreen() {
|
|||||||
|
|
||||||
{/* Input */}
|
{/* Input */}
|
||||||
<View style={styles.inputContainer}>
|
<View style={styles.inputContainer}>
|
||||||
{/* Voice Call Button - becomes pulsing bubble during call */}
|
|
||||||
<Animated.View style={{ transform: [{ scale: pulseAnim }] }}>
|
|
||||||
<TouchableOpacity
|
|
||||||
style={[
|
|
||||||
styles.voiceButton,
|
|
||||||
isConnectingVoice && styles.voiceButtonConnecting,
|
|
||||||
isCallActive && styles.voiceButtonActive,
|
|
||||||
]}
|
|
||||||
onPress={isCallActive ? endVoiceCall : startVoiceCall}
|
|
||||||
disabled={isConnectingVoice}
|
|
||||||
>
|
|
||||||
{isConnectingVoice ? (
|
|
||||||
<ActivityIndicator size="small" color={AppColors.primary} />
|
|
||||||
) : isCallActive ? (
|
|
||||||
<View style={styles.callActiveIndicator}>
|
|
||||||
<Ionicons name="call" size={20} color={AppColors.white} />
|
|
||||||
</View>
|
|
||||||
) : (
|
|
||||||
<Ionicons name="call" size={20} color={AppColors.primary} />
|
|
||||||
)}
|
|
||||||
</TouchableOpacity>
|
|
||||||
</Animated.View>
|
|
||||||
{/* Call duration badge */}
|
|
||||||
{isCallActive && (
|
|
||||||
<View style={styles.callDurationBadge}>
|
|
||||||
<Text style={styles.callDurationText}>
|
|
||||||
{Math.floor(callState.callDuration / 60).toString().padStart(2, '0')}:
|
|
||||||
{(callState.callDuration % 60).toString().padStart(2, '0')}
|
|
||||||
</Text>
|
|
||||||
</View>
|
|
||||||
)}
|
|
||||||
<TextInput
|
<TextInput
|
||||||
style={styles.input}
|
style={styles.input}
|
||||||
placeholder="Type a message..."
|
placeholder="Type a message..."
|
||||||
@ -1043,38 +589,6 @@ export default function ChatScreen() {
|
|||||||
</TouchableOpacity>
|
</TouchableOpacity>
|
||||||
</View>
|
</View>
|
||||||
</KeyboardAvoidingView>
|
</KeyboardAvoidingView>
|
||||||
|
|
||||||
{/* Invisible LiveKit Room - runs in background during call */}
|
|
||||||
{isCallActive && callState.token && callState.wsUrl && (
|
|
||||||
<LiveKitRoom
|
|
||||||
serverUrl={callState.wsUrl}
|
|
||||||
token={callState.token}
|
|
||||||
connect={true}
|
|
||||||
audio={true}
|
|
||||||
video={false}
|
|
||||||
onConnected={() => {
|
|
||||||
console.log('[Chat] LiveKit connected');
|
|
||||||
addDebugLog('LiveKitRoom: CONNECTED to server!', 'success');
|
|
||||||
}}
|
|
||||||
onDisconnected={() => {
|
|
||||||
addDebugLog('LiveKitRoom: DISCONNECTED', 'warn');
|
|
||||||
endVoiceCall();
|
|
||||||
}}
|
|
||||||
onError={(error) => {
|
|
||||||
const errorMsg = error?.message || 'Unknown error';
|
|
||||||
addDebugLog(`LiveKitRoom ERROR: ${errorMsg}`, 'error');
|
|
||||||
console.error('[Chat] LiveKit error:', error);
|
|
||||||
Alert.alert('Voice Call Error', error.message);
|
|
||||||
endVoiceCall();
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<VoiceCallTranscriptHandler
|
|
||||||
onTranscript={handleVoiceTranscript}
|
|
||||||
onDurationUpdate={updateDuration}
|
|
||||||
onLog={addDebugLog}
|
|
||||||
/>
|
|
||||||
</LiveKitRoom>
|
|
||||||
)}
|
|
||||||
</SafeAreaView>
|
</SafeAreaView>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@ -1213,48 +727,6 @@ const styles = StyleSheet.create({
|
|||||||
maxHeight: 100,
|
maxHeight: 100,
|
||||||
marginRight: Spacing.sm,
|
marginRight: Spacing.sm,
|
||||||
},
|
},
|
||||||
voiceButton: {
|
|
||||||
width: 44,
|
|
||||||
height: 44,
|
|
||||||
borderRadius: BorderRadius.full,
|
|
||||||
backgroundColor: AppColors.surface,
|
|
||||||
justifyContent: 'center',
|
|
||||||
alignItems: 'center',
|
|
||||||
marginRight: Spacing.sm,
|
|
||||||
borderWidth: 1,
|
|
||||||
borderColor: AppColors.primary,
|
|
||||||
},
|
|
||||||
voiceButtonConnecting: {
|
|
||||||
borderColor: AppColors.success,
|
|
||||||
backgroundColor: 'rgba(90, 200, 168, 0.1)',
|
|
||||||
},
|
|
||||||
voiceButtonActive: {
|
|
||||||
backgroundColor: AppColors.error,
|
|
||||||
borderColor: AppColors.error,
|
|
||||||
},
|
|
||||||
callActiveIndicator: {
|
|
||||||
width: '100%',
|
|
||||||
height: '100%',
|
|
||||||
justifyContent: 'center',
|
|
||||||
alignItems: 'center',
|
|
||||||
},
|
|
||||||
callDurationBadge: {
|
|
||||||
position: 'absolute',
|
|
||||||
left: 32,
|
|
||||||
top: -8,
|
|
||||||
backgroundColor: AppColors.error,
|
|
||||||
paddingHorizontal: 6,
|
|
||||||
paddingVertical: 2,
|
|
||||||
borderRadius: 8,
|
|
||||||
minWidth: 42,
|
|
||||||
alignItems: 'center',
|
|
||||||
},
|
|
||||||
callDurationText: {
|
|
||||||
fontSize: 10,
|
|
||||||
fontWeight: '600',
|
|
||||||
color: AppColors.white,
|
|
||||||
fontVariant: ['tabular-nums'],
|
|
||||||
},
|
|
||||||
sendButton: {
|
sendButton: {
|
||||||
width: 44,
|
width: 44,
|
||||||
height: 44,
|
height: 44,
|
||||||
@ -1376,19 +848,6 @@ const styles = StyleSheet.create({
|
|||||||
fontWeight: '500',
|
fontWeight: '500',
|
||||||
color: AppColors.textPrimary,
|
color: AppColors.textPrimary,
|
||||||
},
|
},
|
||||||
// Voice message styles
|
|
||||||
voiceBubble: {
|
|
||||||
borderWidth: 1,
|
|
||||||
borderColor: 'rgba(59, 130, 246, 0.3)',
|
|
||||||
},
|
|
||||||
voiceIndicator: {
|
|
||||||
position: 'absolute',
|
|
||||||
top: 6,
|
|
||||||
right: 6,
|
|
||||||
},
|
|
||||||
voiceIndicatorEmoji: {
|
|
||||||
fontSize: 10,
|
|
||||||
},
|
|
||||||
// System message styles
|
// System message styles
|
||||||
systemMessageContainer: {
|
systemMessageContainer: {
|
||||||
flexDirection: 'row',
|
flexDirection: 'row',
|
||||||
@ -1415,59 +874,4 @@ const styles = StyleSheet.create({
|
|||||||
color: AppColors.textMuted,
|
color: AppColors.textMuted,
|
||||||
marginLeft: 4,
|
marginLeft: 4,
|
||||||
},
|
},
|
||||||
// Debug panel styles
|
|
||||||
debugButtonActive: {
|
|
||||||
backgroundColor: 'rgba(59, 130, 246, 0.1)',
|
|
||||||
},
|
|
||||||
debugModalContent: {
|
|
||||||
maxHeight: '80%',
|
|
||||||
},
|
|
||||||
debugHeaderButtons: {
|
|
||||||
flexDirection: 'row',
|
|
||||||
alignItems: 'center',
|
|
||||||
gap: Spacing.md,
|
|
||||||
},
|
|
||||||
debugHeaderBtn: {
|
|
||||||
padding: Spacing.xs,
|
|
||||||
},
|
|
||||||
debugLogsContainer: {
|
|
||||||
flex: 1,
|
|
||||||
padding: Spacing.sm,
|
|
||||||
backgroundColor: '#1a1a2e',
|
|
||||||
},
|
|
||||||
debugEmptyText: {
|
|
||||||
color: AppColors.textMuted,
|
|
||||||
textAlign: 'center',
|
|
||||||
padding: Spacing.lg,
|
|
||||||
fontSize: FontSizes.sm,
|
|
||||||
},
|
|
||||||
debugLogEntry: {
|
|
||||||
flexDirection: 'row',
|
|
||||||
paddingVertical: 3,
|
|
||||||
borderBottomWidth: 1,
|
|
||||||
borderBottomColor: 'rgba(255,255,255,0.05)',
|
|
||||||
},
|
|
||||||
debugTimestamp: {
|
|
||||||
color: '#6b7280',
|
|
||||||
fontSize: 11,
|
|
||||||
fontFamily: Platform.OS === 'ios' ? 'Menlo' : 'monospace',
|
|
||||||
marginRight: Spacing.sm,
|
|
||||||
minWidth: 90,
|
|
||||||
},
|
|
||||||
debugMessage: {
|
|
||||||
color: '#e5e7eb',
|
|
||||||
fontSize: 11,
|
|
||||||
fontFamily: Platform.OS === 'ios' ? 'Menlo' : 'monospace',
|
|
||||||
flex: 1,
|
|
||||||
flexWrap: 'wrap',
|
|
||||||
},
|
|
||||||
debugError: {
|
|
||||||
color: '#ef4444',
|
|
||||||
},
|
|
||||||
debugWarn: {
|
|
||||||
color: '#f59e0b',
|
|
||||||
},
|
|
||||||
debugSuccess: {
|
|
||||||
color: '#10b981',
|
|
||||||
},
|
|
||||||
});
|
});
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user