import React, { useState, useEffect } from "react"; import { ScrollView, StyleSheet, Text, TouchableHighlight, View } from "react-native"; import { useNavigation, Route } from "@react-navigation/native"; import { Conversation, Message } from "@/app/lib/conversation"; import MessageBubble from "@/components/ui/MessageBubble"; import { CachedTranslator, LanguageServer, language_matrix_entry } from "@/app/i18n/api"; const lasOptions = { sampleRate: 32000, // default is 44100 but 32000 is adequate for accurate voice recognition channels: 1, // 1 or 2, default 1 bitsPerSample: 16, // 8 or 16, default 16 audioSource: 6, // android only (see below) bufferSize: 4096, // default is 2048 }; // LiveAudioStream.init(lasOptions as any); const ConversationThread = ({ route } : {route?: Route<"Conversation", {conversation : Conversation}>}) => { const navigation = useNavigation(); if (!route) { return (Missing Params!) } /* 2. Get the param */ const { conversation } = route?.params; const [messages, setMessages] = useState([]); const [guestSpeak, setGuestSpeak] = useState(); const [guestSpeakLoaded, setGuestSpeakLoaded] = useState(false); const [cachedTranslator, setCachedTranslator] = useState< undefined | CachedTranslator >(); const [languageLabels, setLanguageLabels] = useState() useEffect(() => { (async () => { const languageServer = await LanguageServer.getDefault(); const languages = await languageServer.fetchLanguages(); const cc = new CachedTranslator( "en", conversation.guest.language, languageServer, ) setCachedTranslator(cc); setGuestSpeak(await cc.translate("Speak")); const hostLang1 = languages[conversation.host.language].name; const guestLang1 = languages[conversation.host.language].name; const hostLang2 = await cc.translate(languages[conversation.host.language].name); const guestLang2 = await cc.translate(languages[conversation.host.language].name); setLanguageLabels({ hostNative: { host: hostLang1, guest: guestLang1, }, guestNative: { host: hostLang2, guest: guestLang2, } }) })(); const updateMessages = (c: Conversation) => { setMessages([...c]); }; conversation.onAddMessage = updateMessages; conversation.onTranslationDone = updateMessages; return () => { conversation.onAddMessage = undefined; conversation.onTranslationDone = undefined; }; }, [conversation, guestSpeak]); const renderMessages = () => messages.map((message, index) => ( )); return cachedTranslator ? ( {languageLabels && ( { languageLabels.hostNative.host } / { languageLabels.hostNative.guest } { languageLabels.guestNative.host } / { languageLabels.guestNative.guest } ) } {renderMessages()} Speak Go Back {guestSpeak ? guestSpeak : "Speak"} ) : ( Loading... ); }; const styles = StyleSheet.create({ languageLabels: { }, nativeHostLabel: { }, nativeGuestLabel: { }, }) export default ConversationThread;