start to develop conversationplay.

app/(tabs)/index.tsx

@@ -1,10 +1,17 @@
 import { LanguageSelection } from '@/components/LanguageSelection';
+import { useState } from 'react';
 import { Text } from 'react-native';
 import { Image, StyleSheet, Platform } from 'react-native';
+import { Conversation, Speaker } from '../lib/conversation';
+import { language_matrix_entry, Translator } from '../i18n/api';
 
 export default function HomeScreen() {
+
+  const [language, setLanguage] = useState<language_matrix_entry | undefined>()
+
   return (
-    <LanguageSelection />
+    language ? <ConversationPlay language={language} /> :
+      <LanguageSelection onLanguageSelected={(l) => setLanguage(l)} />
   );
 }
 

components/ConversationPlay.tsx

@@ -0,0 +1,107 @@
+
+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;

components/LanguageSelection.tsx

@@ -7,22 +7,17 @@ import { ScrollView, StyleSheet, Text, View } from "react-native";
 import { SafeAreaProvider, SafeAreaView } from "react-native-safe-area-context";
 import { Conversation, Speaker } from "@/app/lib/conversation";
 
-async function beginConversation(language : language_matrix_entry) {
-  const translator = new Translator(language.code)
-  const s1 : Speaker = {language : "en", id: "s1"};
-  const s2 : Speaker = {id: "s2", language: language.code}
-  const conversation = new Conversation(translator, s1, s2);
-}
-
 
 export function LanguageSelection(props: {
   translator?: Translator
+  onLanguageSelected?: (language: language_matrix_entry) => any,
 }) {
   const [languages, setLanguages] = useState<language_matrix | undefined>();
   const [languagesLoaded, setLanguagesLoaded] = useState<boolean>(false);
 
   const translator = props.translator || new CachedTranslator("en")
 
+
   useEffect(() => {
     const fetchData = async () => {
       try {
@@ -46,7 +41,7 @@ export function LanguageSelection(props : {
             ([lang, lang_entry]) => {
               return (
                 <View style={styles.column}>
-                              <ISpeakButton language={lang_entry} key={lang_entry.code} onLangSelected={beginConversation} />
+                  <ISpeakButton language={lang_entry} key={lang_entry.code} onLangSelected={props.onLanguageSelected && props.onLanguageSelected(lang_entry)} />
                 </View>
               );
             }