fix typing

@@ -20,7 +20,6 @@ function App() {
     message: "Welcome to AI-PRO... How can I help you?"
     message: "Welcome to AI-PRO... How can I help you?"
   }]);
   }]);
 
 
-  // clear chats
   function clearChat(){
   function clearChat(){
     setChatLog([]);
     setChatLog([]);
     setChatInput("");
     setChatInput("");
@@ -31,8 +30,6 @@ function App() {
     fetch(process.env.REACT_APP_SERVER_URL + "/models")
     fetch(process.env.REACT_APP_SERVER_URL + "/models")
     .then(res => res.json())
     .then(res => res.json())
     .then(data => {
     .then(data => {
-      // console.log(data.models.data)
-      // set models in order alpahbetically
       data.models.data.sort((a, b) => {
       data.models.data.sort((a, b) => {
         if(a.id < b.id) { return -1; }
         if(a.id < b.id) { return -1; }
         if(a.id > b.id) { return 1; }
         if(a.id > b.id) { return 1; }
@@ -44,7 +41,7 @@ function App() {
 
 
   async function handleSubmit(e){
   async function handleSubmit(e){
     e.preventDefault();
     e.preventDefault();
-    // console.log(chatInput)
+
     const userInput = ['what', 'why', 'when', 'where' , 'which', 'did', 'do', 'how', 'can', 'are', 'who'];
     const userInput = ['what', 'why', 'when', 'where' , 'which', 'did', 'do', 'how', 'can', 'are', 'who'];
     const userInputRegex = new RegExp(`\\b(${userInput.join('|')})\\b`, 'gi');
     const userInputRegex = new RegExp(`\\b(${userInput.join('|')})\\b`, 'gi');
     const inputMatches = chatInput.match(userInputRegex);
     const inputMatches = chatInput.match(userInputRegex);
@@ -53,16 +50,13 @@ function App() {
     const userPunctuationRegex = new RegExp(`[${userPunctuation.join('')}]$`);
     const userPunctuationRegex = new RegExp(`[${userPunctuation.join('')}]$`);
     const punctuationMatches = chatInput.match(userPunctuationRegex);
     const punctuationMatches = chatInput.match(userPunctuationRegex);
 
 
-    // console.log(punctuationMatches)
     var userModifiedInput = chatInput
     var userModifiedInput = chatInput
 
 
     if (!punctuationMatches) {
     if (!punctuationMatches) {
       if (!inputMatches) {
       if (!inputMatches) {
         userModifiedInput = chatInput + ".";
         userModifiedInput = chatInput + ".";
-        // console.log("not a question!")
       } else {
       } else {
         userModifiedInput = chatInput + "?";
         userModifiedInput = chatInput + "?";
-        // console.log("its a question!")
       }
       }
     }
     }
 
 
@@ -70,7 +64,6 @@ function App() {
     setChatInput("");
     setChatInput("");
     setChatLog(chatLogNew)
     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 messages = chatLogNew.map((message) => message.message).join("\n")
     const messages = chatLogNew.map((message) => message.message).join("\n")
 
 
     try {
     try {
@@ -95,10 +88,27 @@ function App() {
       } else {
       } else {
           replaceTags = (parsedData.replace(':',':<code>').replace('<?','&#60;?').replace('?>','?&#62;').replace(/\n/g, '<br>'))
           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) {
     } catch (error) {
       const errorMsg = "We apologize for any inconvenience caused due to the delay in the response time. Please try again.";
       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>`} ])
       setChatLog([...chatLogNew, { user: "gpt", message: `<div class="errormsg"><span>i</span><div class="msg">${errorMsg}</div></div>`} ])