fix issue with sending first message

croma-app · Mar 30, 2024 · b857a2f · b857a2f
1 parent 9ac8ab3
commit b857a2f
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 34 deletions.
diff --git a/hooks/useChatSession.js b/hooks/useChatSession.js
@@ -5,54 +5,64 @@ const useChatSession = (initialMessages) => {
   const [messages, setMessages] = useState(initialMessages || []);
   const [isLoading, setIsLoading] = useState(false);
   const [isCreatingSession, setIsCreatingSession] = useState(false);
+  const [error, setError] = useState();
+
+  const fetchNewMessages = async (chatSession, latestMessage) => {
+    const interval = setInterval(async () => {
+      try {
+        const messageResponse = await getChatSession(chatSession.data.id, latestMessage.id);
+        if (messageResponse.data.length > 0) {
+          clearInterval(interval);
+          setMessages((prevMessages) => [...prevMessages, ...messageResponse.data]);
+          setIsLoading(false);
+        }
+      } catch (error) {
+        console.error('Error fetching chat session updates', error);
+        setError(error);
+        clearInterval(interval);
+      }
+    }, 2000);
+  };
 
   const createSession = async (message) => {
     setIsLoading(true);
     setIsCreatingSession(true);
+    setError(null);
     try {
       const chatSession = await createChatSession(message);
-      setIsCreatingSession(false);
+      const latestMessage = chatSession.data.messages[chatSession.data.messages.length - 1];
+      setMessages([...messages, latestMessage]);
+      await fetchNewMessages(chatSession, latestMessage);
       return chatSession;
     } catch (error) {
       console.error('Error creating chat session', error);
-      setIsCreatingSession(false);
+      setError(error);
       throw error;
     } finally {
-      setIsLoading(false);
+      setIsCreatingSession(false);
     }
   };
 
   const followUpSession = async (sessionId, message) => {
     setIsLoading(true);
+    setError(null);
+
     try {
       const chatSession = await followUpChatSession(sessionId, message);
       const latestMessage = chatSession.data.messages[chatSession.data.messages.length - 1];
       setMessages((prevMessages) => [...prevMessages, latestMessage]);
-
-      const interval = setInterval(async () => {
-        const messageResponse = await getChatSession(chatSession.data.id, latestMessage.id);
-        if (messageResponse.data.length > 0) {
-          clearInterval(interval);
-          setMessages((prevMessages) => [...prevMessages, ...messageResponse.data]);
-        }
-      }, 2000);
-
+      await fetchNewMessages(chatSession, latestMessage);
       return chatSession;
     } catch (error) {
       console.error('Error following up chat session', error);
+      setError(error);
       throw error;
     } finally {
       setIsLoading(false);
     }
   };
 
-  return {
-    messages,
-    isLoading,
-    isCreatingSession,
-    createSession,
-    followUpSession
-  };
+  return { messages, isLoading, isCreatingSession, error, createSession, followUpSession };
 };
 
 export default useChatSession;
diff --git a/screens/ChatSessionScreen.js b/screens/ChatSessionScreen.js
@@ -42,9 +42,8 @@ const ChatSessionScreen = (props) => {
   const scrollViewRef = useRef();
 
   const { isPro } = React.useContext(CromaContext);
-  const { messages, isLoading, isCreatingSession, createSession, followUpSession } = useChatSession(
-    route.params?.messages
-  );
+  const { messages, isLoading, isCreatingSession, error, createSession, followUpSession } =
+    useChatSession(route.params?.messages);
 
   const { userData, isUserDataLoading, getUserData } = useUserData();
   const [canUserCreateChat, setCanUserCreateChat] = useState();
@@ -81,18 +80,13 @@ const ChatSessionScreen = (props) => {
         ]
       }
     };
-
-    try {
-      if (messages.length === 0) {
-        await createSession(message);
-      } else {
-        await followUpSession(messages[0].chat_session_id, message);
-      }
-      setInputText('');
-      scrollViewRef.current.scrollToEnd({ animated: true });
-    } catch (error) {
-      console.error('Error sending message', error);
+    if (messages.length === 0) {
+      await createSession(message);
+    } else {
+      await followUpSession(messages[0].chat_session_id, message);
     }
+    setInputText('');
+    scrollViewRef.current.scrollToEnd({ animated: true });
   };
 
   useEffect(() => {
@@ -159,8 +153,14 @@ const ChatSessionScreen = (props) => {
                     />
                   ))
                 )}
-                <ActivityIndicator animating={isLoading} size="large" color="#ff7875" />
               </ScrollView>
+              {error && (
+                <View style={styles.errorMessageContainer}>
+                  <Text style={styles.errorMessageTitle}>Error: </Text>
+                  <Text style={styles.errorMessageText}>{error}</Text>
+                </View>
+              )}
+              <ActivityIndicator animating={isLoading} size="large" color="#ff7875" />
               {canUserCreateChat ? (
                 <View style={styles.inputContainer}>
                   <TextInput
@@ -321,6 +321,21 @@ const styles = StyleSheet.create({
     fontSize: 16,
     fontWeight: 'bold',
     textAlign: 'center'
+  },
+  errorMessageContainer: {
+    marginLeft: 10,
+    marginRight: 10,
+    backgroundColor: '#ff5c59',
+    borderRadius: 8
+  },
+  errorMessageText: {
+    color: 'white',
+    padding: 5
+  },
+  errorMessageTitle: {
+    color: 'white',
+    paddingLeft: 5,
+    paddingRight: 5
   }
 });