fix

@@ -266,3 +266,30 @@ ul.suggested-options {
       padding: 10px 10px 0 10px;
       padding: 10px 10px 0 10px;
   }
   }
 }
 }
+
+.message .error_msg {
+    background: rgb(18 0 255 / 20%);
+    padding: 10px;
+    border-radius: 5px;
+    display: flex;
+}
+
+.message .error_msg span {
+    background: #0023ff;
+    width: 25px;
+    height: 25px;
+    display: inline-block;
+    text-align: center;
+    padding-top: 1px;
+    border-radius: 50px;
+    font-family: auto;
+    font-weight: 600;
+    vertical-align: top;
+}
+
+.message .error_msg .msg {
+    display: inline-block;
+    margin: 0 10px;
+    font-style: italic;
+    width: 80%;
+}

@@ -47,7 +47,7 @@ function App() {
     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);
 
 
-    const userPunctuation = ['\.', '?', '!', ':', ';', ','];
+    const userPunctuation = ['.', '?', '!', ':', ';', ','];
     const userPunctuationRegex = new RegExp(`[${userPunctuation.join('')}]$`);
     const userPunctuationRegex = new RegExp(`[${userPunctuation.join('')}]$`);
     const punctuationMatches = chatInput.match(userPunctuationRegex);
     const punctuationMatches = chatInput.match(userPunctuationRegex);
 
 
@@ -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;
   }
   }

@@ -3,6 +3,7 @@ const express = require('express')
 const bodyParser = require('body-parser')
 const bodyParser = require('body-parser')
 const cors = require('cors')
 const cors = require('cors')
 require('dotenv').config()
 require('dotenv').config()
+const rateLimit = require('express-rate-limit')
 
 
 // Open AI Configuration
 // Open AI Configuration
 // console.log(process.env.OPENAI_API_ORG)
 // console.log(process.env.OPENAI_API_ORG)
@@ -12,6 +13,12 @@ const configuration = new Configuration({
 });
 });
 const openai = new OpenAIApi(configuration);
 const openai = new OpenAIApi(configuration);
 
 
+const rateLimiter = rateLimit({
+  windowMs: 1000 * 60 * 1, // 1 minute (refreshTime)
+  max: 3000, // limit each IP to x requests per windowMs (refreshTime)
+  message: 'Sorry, too many requests. Please try again in a bit!',
+});
+
 // Express Configuration
 // Express Configuration
 const app = express()
 const app = express()
 const port = 3080
 const port = 3080
@@ -19,7 +26,7 @@ const port = 3080
 app.use(bodyParser.json())
 app.use(bodyParser.json())
 app.use(cors())
 app.use(cors())
 app.use(require('morgan')('dev'))
 app.use(require('morgan')('dev'))
-
+app.use(rateLimiter)
 
 
 // Routing
 // Routing
 
 

@@ -13,6 +13,7 @@
     "cors": "^2.8.5",
     "cors": "^2.8.5",
     "dotenv": "^16.0.3",
     "dotenv": "^16.0.3",
     "express": "^4.18.2",
     "express": "^4.18.2",
+    "express-rate-limit": "^6.7.0",
     "morgan": "^1.10.0",
     "morgan": "^1.10.0",
     "openai": "^3.1.0"
     "openai": "^3.1.0"
   }
   }