sergei_t/wellnua-lite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Display voice messages in chat in real-time

Browse Source 
Voice transcripts from both user and Julia now appear in the chat
immediately during the call, not just after it ends. Each voice call
shows a "Voice Call" separator, and voice messages display with a
microphone icon indicator.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Sergei 2026-01-24 20:43:24 -08:00
parent 560722e8af
commit 09fc6ce8ad
1 changed files with 44 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
app/(tabs)/chat.tsx
View File

@ -387,7 +387,7 @@ const voiceStyles = StyleSheet.create({
export default function ChatScreen() {
const router = useRouter();
const { currentBeneficiary, setCurrentBeneficiary } = useBeneficiary();
const { getTranscriptAsMessages, hasNewTranscript, markTranscriptAsShown, addTranscriptEntry, clearTranscript } = useVoiceTranscript();
const { addTranscriptEntry, clearTranscript } = useVoiceTranscript();
const { user } = useAuth();
const {
callState,
@ -412,30 +412,17 @@ export default function ChatScreen() {
// Voice call state (local connecting state only)
const [isConnectingVoice, setIsConnectingVoice] = useState(false);
// Add voice call transcript to messages when returning from call
// 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 (hasNewTranscript) {
const transcriptMessages = getTranscriptAsMessages();
if (transcriptMessages.length > 0) {
// Add a separator message
const separatorMessage: Message = {
id: `voice-separator-${Date.now()}`,
role: 'assistant',
content: '--- Voice Call Transcript ---',
timestamp: new Date(),
isSystem: true,
};
setMessages(prev => [...prev, separatorMessage, ...transcriptMessages]);
markTranscriptAsShown();
// Scroll to bottom
setTimeout(() => {
flatListRef.current?.scrollToEnd({ animated: true });
}, 100);
}
if (isCallActive && !hasShownVoiceSeparator) {
// Will show separator on first voice message
} else if (!isCallActive) {
setHasShownVoiceSeparator(false);
}
}, [hasNewTranscript, getTranscriptAsMessages, markTranscriptAsShown]);
}, [isCallActive]);
const [input, setInput] = useState('');
const [isSending, setIsSending] = useState(false);
const flatListRef = useRef<FlatList>(null);
@ -559,10 +546,42 @@ export default function ChatScreen() {
endVoiceCallContext();
}, [endVoiceCallContext]);
// Handle voice transcript entries
// Handle voice transcript entries - add to chat in real-time
const handleVoiceTranscript = useCallback((role: 'user' | 'assistant', text: string) => {
if (!text.trim()) return;
// Add separator before first voice message of this call
if (!hasShownVoiceSeparator) {
const separatorMessage: Message = {
id: `voice-separator-${Date.now()}`,
role: 'assistant',
content: 'Voice Call',
timestamp: new Date(),
isSystem: true,
};
setMessages(prev => [...prev, separatorMessage]);
setHasShownVoiceSeparator(true);
}
// 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 bottom
setTimeout(() => {
flatListRef.current?.scrollToEnd({ animated: true });
}, 100);
// Also store in transcript context for persistence
addTranscriptEntry(role, text);
}, [addTranscriptEntry]);
}, [hasShownVoiceSeparator, addTranscriptEntry]);
// Cached API token for WellNuo
const apiTokenRef = useRef<string | null>(null);