fix issues. Remove babel.

components/ConversationThread.tsx

@@ -10,31 +10,22 @@ interface ConversationThreadProps {
   conversation: Conversation;
 }
 
-const ConversationThread = ({ language, navigation }: { language: language_matrix_entry, navigation: NavigationProp<ParamListBase> }) => {
+const ConversationThread = (p : ConversationThreadProps) => {
   const [messages, setMessages] = useState<Message[]>([]);
 
-  useEffect(async () => {
-    const db = await getDb();
-    const curs = await db.executeSql("SELECT host_language FROM settings LIMIT 1");
-  })
-
-  const translator = new Translator()
-
-  const conversation = new Conversation()
-
   useEffect(() => {
-    const updateMessages = () => {
-      setMessages([...conversation]);
+    const updateMessages = (c : Conversation) => {
+      setMessages([...c]);
     };
 
-    conversation.on('messageAdded', updateMessages);
-    conversation.on('messageUpdated', updateMessages);
+    p.conversation.onAddMessage = updateMessages;
+    p.conversation.onTranslationDone = updateMessages;
 
     return () => {
-      conversation.off('messageAdded', updateMessages);
-      conversation.off('messageUpdated', updateMessages);
+      p.conversation.onAddMessage = undefined;
+      p.conversation.onTranslationDone = undefined;
     };
-  }, [conversation]);
+  }, [p.conversation]);
 
   const renderMessages = () => (
     messages.map((message, index) => (

components/LanguageSelection.tsx

@@ -10,8 +10,9 @@ import { NavigationProp, ParamListBase } from "@react-navigation/native";
 
 
 export function LanguageSelection(props: {
-  navigation: NavigationProp<ParamListBase>
+  navigation?: NavigationProp<ParamListBase>
   translator?: Translator
+  onLangSelected? : (lang : language_matrix_entry) => any
 }) {
   const [languages, setLanguages] = useState<language_matrix | undefined>();
   const [languagesLoaded, setLanguagesLoaded] = useState<boolean>(false);
@@ -19,7 +20,7 @@ export function LanguageSelection(props: {
   const translator = props.translator || new CachedTranslator("en")
 
   function onLangSelected(language: language_matrix_entry) {
-    props.navigation.navigate("Conversation", { language, })
+    props.onLangSelected && props.onLangSelected(language)
   }
 
 
@@ -45,9 +46,7 @@ export function LanguageSelection(props: {
           {(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={onLangSelected} />
-                </View>
+                <ISpeakButton language={lang_entry} key={lang_entry.code} onLangSelected={onLangSelected} />
               );
             }
           ) : <Text>Waiting...</Text>
@@ -63,8 +62,6 @@ const styles = StyleSheet.create({
     flex: 1,
     flexDirection: 'row',
     flexWrap: 'wrap',
-    flexBasis: "auto",
-    flexGrow: 1,
     padding: 8,
   },
 })

components/ui/ISpeakButton.tsx

@@ -76,7 +76,7 @@ const ISpeakButton = (props : ISpeakButtonProps) => {
     
     return (
         title ? (
-            <TouchableOpacity style={styles.button}>
+            <TouchableOpacity style={styles.button} onPress={() => props.onLangSelected && props.onLangSelected(props.language)}>
                 <View>
                     <View style={styles.flag}>
                     {countries &&
@@ -105,7 +105,8 @@ const styles = StyleSheet.create({
         borderWidth: 1,
         borderStyle: "solid",
         height: 110,
-        alignContent: 'flex-start',
+        alignSelf: "flex-start",
+        margin: 8,
     },
     flag: {
     },

components/ui/MessageBubble.tsx

@@ -6,7 +6,6 @@ import { SafeAreaView } from "react-native-safe-area-context";
 
 type MessageProps = {
     message: Message;
-    translator: Translator;
 }
 
 const MessageBubble = (props: MessageProps) => {
@@ -20,7 +19,7 @@ const MessageBubble = (props: MessageProps) => {
 
     props.message.onTextDone = async (message: Message) => {
         setIsTranslating(true);
-        await props.message.translate(props.translator)
+        await props.message.translate()
     }
 
     props.message.onTranslationDone = (message: Message) => {