109 lines
3.5 KiB
TypeScript
109 lines
3.5 KiB
TypeScript
import React, { useState, useEffect } from "react";
|
|
import { ScrollView, 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 { WhisperContext } from "whisper.rn";
|
|
import { NavigationProp, ParamListBase } from "@react-navigation/native";
|
|
import { CachedTranslator, LanguageServer } from "@/app/i18n/api";
|
|
import { getDb } from "@/app/lib/db";
|
|
import LiveAudioStream from "react-native-live-audio-stream";
|
|
|
|
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 (<View><Text>Missing Params!</Text></View>)
|
|
}
|
|
|
|
/* 2. Get the param */
|
|
const { conversation } = route?.params;
|
|
|
|
const [messages, setMessages] = useState<Message[]>([]);
|
|
const [guestSpeak, setGuestSpeak] = useState<string | undefined>();
|
|
const [guestSpeakLoaded, setGuestSpeakLoaded] = useState<boolean>(false);
|
|
const [cachedTranslator, setCachedTranslator] = useState<
|
|
undefined | CachedTranslator
|
|
>();
|
|
|
|
useEffect(() => {
|
|
(async () => {
|
|
setCachedTranslator(
|
|
new CachedTranslator(
|
|
"en",
|
|
conversation.guest.language,
|
|
await LanguageServer.getDefault()
|
|
)
|
|
);
|
|
if (!cachedTranslator) throw new Error("cachedTranslator is undefined");
|
|
setGuestSpeak(await cachedTranslator.translate("Speak"));
|
|
})();
|
|
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) => (
|
|
<MessageBubble key={index} message={message} />
|
|
));
|
|
|
|
return cachedTranslator ? (
|
|
<View style={{ flex: 1, flexDirection: "column" }}>
|
|
<ScrollView
|
|
style={{
|
|
borderColor: "black",
|
|
borderWidth: 1,
|
|
borderStyle: "solid",
|
|
height: "90%",
|
|
}}
|
|
>
|
|
{renderMessages()}
|
|
</ScrollView>
|
|
<View style={{ alignSelf: "center", flexDirection: "row" }}>
|
|
<TouchableHighlight
|
|
style={{ backgroundColor: "blue", padding: 3, borderRadius: 5 }}
|
|
>
|
|
<Text style={{ color: "white", fontSize: 30 }}>Speak</Text>
|
|
</TouchableHighlight>
|
|
<TouchableHighlight
|
|
style={{ backgroundColor: "gray", padding: 3, borderRadius: 5 }}
|
|
onPress={navigation.goBack}
|
|
>
|
|
<Text style={{ color: "white", fontSize: 30 }}>Go Back</Text>
|
|
</TouchableHighlight>
|
|
<TouchableHighlight
|
|
style={{ backgroundColor: "blue", padding: 3, borderRadius: 5 }}
|
|
>
|
|
<Text style={{ color: "white", fontSize: 30 }}>
|
|
{guestSpeak ? guestSpeak : "Speak"}
|
|
</Text>
|
|
</TouchableHighlight>
|
|
</View>
|
|
</View>
|
|
) : (
|
|
<View>
|
|
<Text>Loading...</Text>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
export default ConversationThread;
|