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,64 +7,59 @@ 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
+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 [languages, setLanguages] = useState<language_matrix | undefined>();
+  const [languagesLoaded, setLanguagesLoaded] = useState<boolean>(false);
 
-    const translator = props.translator || new CachedTranslator("en")
+  const translator = props.translator || new CachedTranslator("en")
 
-    useEffect(() => {
-        const fetchData = async () => {
-          try {
-            // Replace with your actual async data fetching logic
-            const languages = await translator.fetchLanguages();
-            setLanguages(languages);
-            setLanguagesLoaded(true);
-          } catch (error) {
-            console.error('Error fetching data:', error);
-          }
-        };
-    
-        fetchData();
-      }, []);
 
-    return (
-        <ScrollView >
-            <SafeAreaProvider >
-                <SafeAreaView>
-            {(languages && languagesLoaded) ? Object.entries(languages).filter((l) => (LANG_FLAGS as any)[l[0]] !== undefined).map(
-                    ([lang, lang_entry]) => {
-                        return (
-                            <View style={styles.column}>
-                              <ISpeakButton language={lang_entry} key={lang_entry.code} onLangSelected={beginConversation} />
-                            </View>
-                        );
-                    }
-                ) : <Text>Waiting...</Text>
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        // Replace with your actual async data fetching logic
+        const languages = await translator.fetchLanguages();
+        setLanguages(languages);
+        setLanguagesLoaded(true);
+      } catch (error) {
+        console.error('Error fetching data:', error);
+      }
+    };
+
+    fetchData();
+  }, []);
+
+  return (
+    <ScrollView >
+      <SafeAreaProvider >
+        <SafeAreaView>
+          {(languages && languagesLoaded) ? Object.entries(languages).filter((l) => (LANG_FLAGS as any)[l[0]] !== undefined).map(
+            ([lang, lang_entry]) => {
+              return (
+                <View style={styles.column}>
+                  <ISpeakButton language={lang_entry} key={lang_entry.code} onLangSelected={props.onLanguageSelected && props.onLanguageSelected(lang_entry)} />
+                </View>
+              );
             }
-            </SafeAreaView>
-            </SafeAreaProvider>
+          ) : <Text>Waiting...</Text>
+          }
+        </SafeAreaView>
+      </SafeAreaProvider>
     </ScrollView>
-)
+  )
 }
 
 const styles = StyleSheet.create({
-    column: {
-      flex: 1,
-      flexDirection: 'row',
-      flexWrap: 'wrap',
-      flexBasis: "auto",
-      flexGrow: 1,
-      padding: 8,
-    },
+  column: {
+    flex: 1,
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    flexBasis: "auto",
+    flexGrow: 1,
+    padding: 8,
+  },
 })