64 lines
1.5 KiB
TypeScript
64 lines
1.5 KiB
TypeScript
import { Translator } from "@/app/i18n/api";
|
|
import { Message, Speaker } from "@/app/lib/conversation";
|
|
import { useState } from "react";
|
|
import { StyleSheet, Text } from "react-native";
|
|
import { SafeAreaView } from "react-native-safe-area-context";
|
|
|
|
type MessageProps = {
|
|
message: Message;
|
|
translator: Translator;
|
|
}
|
|
|
|
const MessageBubble = (props: MessageProps) => {
|
|
const [text, setText] = useState(props.message.text);
|
|
const [translatedText, setTranslatedText] = useState(props.message.text);
|
|
const [isTranslating, setIsTranslating] = useState<boolean>(false);
|
|
|
|
props.message.onTextUpdate = (message: Message) => {
|
|
setText(message.text);
|
|
}
|
|
|
|
props.message.onTextDone = async (message: Message) => {
|
|
setIsTranslating(true);
|
|
await props.message.translate(props.translator)
|
|
}
|
|
|
|
props.message.onTranslationDone = (message: Message) => {
|
|
if (!message.translation) throw new Error("Missing translation");
|
|
setTranslatedText(message.translation);
|
|
setIsTranslating(false);
|
|
}
|
|
|
|
const spId = props.message.speaker.id
|
|
|
|
return (
|
|
<SafeAreaView>
|
|
{text && (
|
|
<Text>{text}</Text>
|
|
)}
|
|
{translatedText &&
|
|
<Text>{translatedText}</Text>
|
|
}
|
|
</SafeAreaView>
|
|
)
|
|
}
|
|
|
|
// const bubbleStyle = StyleSheet.create({
|
|
// host: {
|
|
|
|
// },
|
|
// guest: {
|
|
|
|
// },
|
|
// })
|
|
|
|
// const textStyles = StyleSheet.create({
|
|
// native: {
|
|
|
|
// },
|
|
// translation: {
|
|
|
|
// },
|
|
// });
|
|
|
|
export default MessageBubble; |