fix conflict

@@ -20,7 +20,6 @@ function App() {
     message: "Welcome to AI-PRO... How can I help you?"
   }]);
 
-  // clear chats
   function clearChat(){
     setChatLog([]);
     setChatInput("");
@@ -31,8 +30,6 @@ function App() {
     fetch(process.env.REACT_APP_SERVER_URL + "/models")
     .then(res => res.json())
     .then(data => {
-      // console.log(data.models.data)
-      // set models in order alpahbetically
       data.models.data.sort((a, b) => {
         if(a.id < b.id) { return -1; }
         if(a.id > b.id) { return 1; }
@@ -66,8 +63,11 @@ function App() {
     setChatInput("");
     setChatLog(chatLogNew)
 
-    // fetch response to the api combining the chat log array of messages and seinding it as a message to localhost:3000 as a post
+    const userMessage = { user: "gpt", message: "..." };
+    setChatLog(prevChatLog => [...prevChatLog, userMessage]);
+
     const messages = chatLogNew.map((message) => message.message).join("\n")
+    let intervalId = startInterval();
 
     try {
       const response = await fetch(process.env.REACT_APP_SERVER_URL + "/api", {
@@ -83,6 +83,7 @@ function App() {
 
       const data = await response.json();
       const parsedData = data.message.trim();
+      clearInterval(intervalId);
       const programmingKeywords = ['code', 'application', 'controller', 'rails' , 'PHP', 'java', 'javascript', 'script', 'console', 'python', 'programming', 'table'];
 
       const regex = new RegExp(`\\b(${programmingKeywords.join('|')})\\b`, 'gi');
@@ -92,15 +93,47 @@ function App() {
       } else {
           replaceTags = (parsedData.replace(':',':<code>').replace('<?','&#60;?').replace('?>','?&#62;').replace(/\n/g, '<br>'))
       }
-      setChatLog([...chatLogNew, { user: "gpt", message: `${replaceTags}`} ])
 
-      var scrollToTheBottomChatLog = document.getElementsByClassName("chat-log")[0];
-      scrollToTheBottomChatLog.scrollTop = scrollToTheBottomChatLog.scrollHeight;
+      for (let i = 0; i < replaceTags.length; i++) {
+        setTimeout(() => {
+          const parsedMsg = replaceTags.slice(0, i + 1);
+          updateLastMessage(parsedMsg);
+          var scrollToTheBottomChatLog = document.getElementsByClassName("chat-log")[0];
+          scrollToTheBottomChatLog.scrollTop = scrollToTheBottomChatLog.scrollHeight;
+        }, i * 5);
+      }
+
+      function updateLastMessage(parsedMsg) {
+        setChatLog(prevChatLog => {
+          const lastMsg = prevChatLog[prevChatLog.length - 1];
+          if (lastMsg && lastMsg.user === "gpt") {
+            return [...prevChatLog.slice(0, prevChatLog.length - 1), { user: lastMsg.user, message: parsedMsg }];
+          } else {
+            return [...prevChatLog, { user: "gpt", message: parsedMsg }];
+          }
+        });
+      }
+
     } catch (error) {
       const errorMsg = "We apologize for any inconvenience caused due to the delay in the response time. Please try again.";
       setChatLog([...chatLogNew, { user: "gpt", message: `<div class="errormsg"><span>i</span><div class="msg">${errorMsg}</div></div>`} ])
 
     }
+
+    function startInterval() {
+      return setInterval(function() {
+        if (userMessage.message.length === 3) {
+          userMessage.message = ".";
+        } else if (userMessage.message.length === 1) {
+          userMessage.message = "..";
+        } else {
+          userMessage.message = "...";
+        }
+        var thinkingDots = document.getElementsByClassName("message");
+        var thinkingDot = thinkingDots[thinkingDots.length - 1];
+        thinkingDot.innerHTML = userMessage.message;
+      }, 500);
+    }
   }
 
   function handleTemp(temp) {