fix

@@ -71,34 +71,36 @@ function App() {
     // fetch response to the api combining the chat log array of messages and seinding it as a message to localhost:3000 as a post
     // 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")
 
 
-    const response = await fetch(process.env.REACT_APP_SERVER_URL + "/api", {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json"
-      },
-      body: JSON.stringify({
-        message: messages,
-        currentModel,
-       })
+    try {
+      const response = await fetch(process.env.REACT_APP_SERVER_URL + "/api", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify({
+          message: messages,
+          currentModel,
+        })
       });
       });
-    const data = await response.json();
-    const parsedData = data.message.trim();
-    const programmingKeywords = ['code', 'application', 'controller', 'rails' , 'PHP', 'java', 'javascript', 'script', 'console', 'python', 'programming', 'table'];
-
-    const regex = new RegExp(`\\b(${programmingKeywords.join('|')})\\b`, 'gi');
-    // console.log(regex)
-    const matches = parsedData.match(regex);
-    // console.log(matches);
-    if (!matches) {
-      var replaceTags = (parsedData.replace(/(?:\r\n|\r|\n)/g, '<br>').replace(/\./g, '. '))
-      // console.log("not programming!")
-    } else {
-        replaceTags = (parsedData.replace(':',':<code>').replace('<?','&#60;?').replace('?>','?&#62;').replace(/\n/g, '<br>'))
-      // console.log("programming!")
+      const data = await response.json();
+      const parsedData = data.message.trim();
+      const programmingKeywords = ['code', 'application', 'controller', 'rails' , 'PHP', 'java', 'javascript', 'script', 'console', 'python', 'programming', 'table'];
+
+      const regex = new RegExp(`\\b(${programmingKeywords.join('|')})\\b`, 'gi');
+      const matches = parsedData.match(regex);
+      if (!matches) {
+        var replaceTags = (parsedData.replace(/(?:\r\n|\r|\n)/g, '<br>').replace(/\./g, '. '))
+      } 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;
+    } 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>`} ])
     }
     }
-    setChatLog([...chatLogNew, { user: "gpt", message: `${replaceTags}`} ])
-    var scrollToTheBottomChatLog = document.getElementsByClassName("chat-log")[0];
-    scrollToTheBottomChatLog.scrollTop = scrollToTheBottomChatLog.scrollHeight;
   }
   }
 
 
   function handleTemp(temp) {
   function handleTemp(temp) {

@@ -2,6 +2,32 @@
   background-color: #101827 !important;
   background-color: #101827 !important;
 }
 }
 
 
+.errormsg {
+    border: 1px solid #7ac5ff;
+    padding: 15px 25px;
+    border-radius: 10px;
+    background: rgb(0 139 245 / 6%);
+}
+
+.errormsg .msg {
+    display: inline-block;
+    width: 90%;
+}
+.errormsg span {
+    background: #008BF5;
+    padding: 1px 11px;
+    border-radius: 50px;
+    width: 25px;
+    height: 25px;
+    margin-right: 10px;
+    color: #fff;
+    font-weight: 900;
+    display: inline-block;
+    vertical-align: top;
+    font-family: auto;
+    font-size: 15px;
+}
+
 .side-menu-button {
 .side-menu-button {
   border:0 solid white;
   border:0 solid white;
     /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#cedbe9+0,aac5de+17,6199c7+50,3a84c3+51,419ad6+59,4bb8f0+71,3a8bc2+84,26558b+100;Blue+Gloss */
     /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#cedbe9+0,aac5de+17,6199c7+50,3a84c3+51,419ad6+59,4bb8f0+71,3a8bc2+84,26558b+100;Blue+Gloss */
@@ -172,9 +198,16 @@ code br:nth-child(-n+2) {
 }
 }
 
 
 @media (max-width: 414px) {
 @media (max-width: 414px) {
+  .errormsg .msg {
+      width: 80%;
+  }
   .message {
   .message {
       font-size: 14px;
       font-size: 14px;
   }
   }
+  .errormsg {
+    padding: 10px;
+    width: 100%;
+  }
   .chat-message-center {
   .chat-message-center {
     padding: 20px 5vw !important;
     padding: 20px 5vw !important;
   }
   }