Merge branch '26988_chatgpt_look_and_feel' into 'master'

26988 chatgpt look and feel

See merge request !37

@@ -247,6 +247,7 @@
     padding: 10px;
     border-radius: 5px;
     margin: 0 0 10px;
+    font-size: 14px;
 }
 
 ul.suggested-options {

@@ -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; }
@@ -44,7 +41,7 @@ function App() {
 
   async function handleSubmit(e){
     e.preventDefault();
-    // console.log(chatInput)
+
     const userInput = ['what', 'why', 'when', 'where' , 'which', 'did', 'do', 'how', 'can', 'are', 'who'];
     const userInputRegex = new RegExp(`\\b(${userInput.join('|')})\\b`, 'gi');
     const inputMatches = chatInput.match(userInputRegex);
@@ -53,16 +50,13 @@ function App() {
     const userPunctuationRegex = new RegExp(`[${userPunctuation.join('')}]$`);
     const punctuationMatches = chatInput.match(userPunctuationRegex);
 
-    // console.log(punctuationMatches)
     var userModifiedInput = chatInput
 
     if (!punctuationMatches) {
       if (!inputMatches) {
         userModifiedInput = chatInput + ".";
-        // console.log("not a question!")
       } else {
         userModifiedInput = chatInput + "?";
-        // console.log("its a question!")
       }
     }
 
@@ -70,8 +64,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", {
@@ -86,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');
@@ -95,14 +93,46 @@ function App() {
       } else {
           replaceTags = (parsedData.replace(':',':<code>').replace('<?','&#60;?').replace('?>','?&#62;').replace(/\n/g, '<br>'))
       }
-      setChatLog([...chatLogNew, { user: "gpt", message: `${replaceTags}`} ])
 
+      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) {

+@import url('https://fonts.googleapis.com/css2?family=Alegreya+Sans:ital,wght@0,400;0,500;1,400&display=swap');
+
+body {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-family: "Alegreya Sans", sans-serif;
+}
 .sidemenu {
   background-color: #101827 !important;
 }
@@ -7,11 +14,12 @@
     padding: 15px 25px;
     border-radius: 10px;
     background: rgb(0 139 245 / 6%);
+    font-size: 16px;
 }
 
 .errormsg .msg {
     display: inline-block;
-    width: 90%;
+    width: 85%;
 }
 .errormsg span {
     background: #008BF5;
@@ -117,10 +125,10 @@ span.info {
 }
 
 .message {
+  font-size: 20px;
   padding: 7px 20px !important;
   line-height: 25px;
   font-size: 14px;
-  font-family: "Poppins", "Karla", sans-serif;
   color: #353b4f;
    -moz-osx-font-smoothing: grayscale;
     -webkit-font-smoothing: antialiased !important;
@@ -209,19 +217,22 @@ code br:nth-child(-n+2) {
 
 @media (min-width: 1280px) {
   .message {
-      font-size: 18px;
+      font-size: 20px;
   }
 }
 
 @media (max-width: 1279px) {
   .message {
-      font-size: 16px;
+      font-size: 18px;
   }
 }
 
 @media (max-width: 991px) {
+  .errormsg .msg {
+      width: 75%;
+  }
   .message {
-      font-size: 14px;
+      font-size: 16px;
   }
   .chat-message-center {
     padding: 20px 5vw !important;
@@ -233,7 +244,7 @@ code br:nth-child(-n+2) {
       width: 80%;
   }
   .message {
-      font-size: 14px;
+      font-size: 16px;
   }
   .errormsg {
     padding: 10px;