Merge branch '26988_chatgpt_look_and_feel' into 'master'

26988 chatgpt look and feel See merge request !37

Merge branch '26988_chatgpt_look_and_feel' into 'master'
26988 chatgpt look and feel See merge request !37
Ryan
Showing 3 changed files with 59 additions and 17 deletions
client/src/App.css
client/src/App.js
client/src/color_theme_1.css
--- a/client/src/App.css
View file @5630ade
+++ b/client/src/App.css
View file @5630ade
@@ -247,6 +247,7 @@
    padding: 10px;
    border-radius: 5px;
    margin: 0 0 10px;
+    font-size: 14px;
 }
 ul.suggested-options {
--- a/client/src/App.js
View file @5630ade
+++ b/client/src/App.js
View file @5630ade
@@ -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}`} ])
-      var scrollToTheBottomChatLog = document.getElementsByClassName("chat-log")[0];
+      for (let i = 0; i < replaceTags.length; i++) {
-      scrollToTheBottomChatLog.scrollTop = scrollToTheBottomChatLog.scrollHeight;
+        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) {
--- a/client/src/color_theme_1.css
View file @5630ade
+++ b/client/src/color_theme_1.css
View file @5630ade
+@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;