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;