107 lines
3.2 KiB
TypeScript
107 lines
3.2 KiB
TypeScript
|
|
interface ConversationPlayProps {
|
|
translator: Translator;
|
|
}
|
|
|
|
function ConversationPlay (props : ConversationPlayProps) {
|
|
const [language, setLanguage] = useState<string>(languages[0].code);
|
|
const [message, setMessage] = useState<string>('');
|
|
const [conversation, setConversation] = useState<Conversation | null>(null);
|
|
|
|
const startConversation = () => {
|
|
const speaker: Speaker = { id: "user", language };
|
|
const newConversation = new Conversation(translator, speaker);
|
|
setConversation(newConversation);
|
|
};
|
|
|
|
const addMessage = async () => {
|
|
if (conversation) {
|
|
conversation.addMessage({ id: "user", language }, message);
|
|
await conversation.translateLast();
|
|
setMessage('');
|
|
}
|
|
};
|
|
|
|
return (
|
|
<View>
|
|
<Text>Select Language:</Text>
|
|
{languages.map(lang => (
|
|
<Button key={lang.code} title={lang.name} onPress={() => setLanguage(lang.code)} />
|
|
))}
|
|
<Button title="Start Conversation" onPress={startConversation} />
|
|
{conversation && (
|
|
<>
|
|
<TextInput
|
|
placeholder="Type a message"
|
|
value={message}
|
|
onChangeText={setMessage}
|
|
/>
|
|
<Button title="Send Message" onPress={addMessage} />
|
|
{conversation.messages.map((msg, index) => (
|
|
<View key={index}>
|
|
<Text>{msg.text}</Text>
|
|
{msg.translation && <Text>Translation: {msg.translation}</Text>}
|
|
</View>
|
|
))}
|
|
</>
|
|
)}
|
|
</View>
|
|
);
|
|
};
|
|
|
|
export default ConversationPlay;import React, { useState } from 'react';
|
|
import { View, Text, TextInput, Button } from 'react-native';
|
|
import { Conversation, Speaker, Translator } from './index';
|
|
import { languages } from './lang';
|
|
|
|
interface ConversationPlayProps {
|
|
translator: Translator;
|
|
}
|
|
|
|
const ConversationPlay: React.FC<ConversationPlayProps> = ({ translator }) => {
|
|
const [language, setLanguage] = useState<string>(languages[0].code);
|
|
const [message, setMessage] = useState<string>('');
|
|
const [conversation, setConversation] = useState<Conversation | null>(null);
|
|
|
|
const startConversation = () => {
|
|
const speaker: Speaker = { id: "user", language };
|
|
const newConversation = new Conversation(translator, speaker);
|
|
setConversation(newConversation);
|
|
};
|
|
|
|
const addMessage = async () => {
|
|
if (conversation) {
|
|
conversation.addMessage({ id: "user", language }, message);
|
|
await conversation.translateLast();
|
|
setMessage('');
|
|
}
|
|
};
|
|
|
|
return (
|
|
<View>
|
|
<Text>Select Language:</Text>
|
|
{languages.map(lang => (
|
|
<Button key={lang.code} title={lang.name} onPress={() => setLanguage(lang.code)} />
|
|
))}
|
|
<Button title="Start Conversation" onPress={startConversation} />
|
|
{conversation && (
|
|
<>
|
|
<TextInput
|
|
placeholder="Type a message"
|
|
value={message}
|
|
onChangeText={setMessage}
|
|
/>
|
|
<Button title="Send Message" onPress={addMessage} />
|
|
{conversation.messages.map((msg, index) => (
|
|
<View key={index}>
|
|
<Text>{msg.text}</Text>
|
|
{msg.translation && <Text>Translation: {msg.translation}</Text>}
|
|
</View>
|
|
))}
|
|
</>
|
|
)}
|
|
</View>
|
|
);
|
|
};
|
|
|
|
export default ConversationPlay; |