fix

@@ -266,3 +266,30 @@ ul.suggested-options {
       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 inputMatches = chatInput.match(userInputRegex);
 
-    const userPunctuation = ['\.', '?', '!', ':', ';', ','];
+    const userPunctuation = ['.', '?', '!', ':', ';', ','];
     const userPunctuationRegex = new RegExp(`[${userPunctuation.join('')}]$`);
     const punctuationMatches = chatInput.match(userPunctuationRegex);
 
@@ -71,6 +71,7 @@ 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
     const messages = chatLogNew.map((message) => message.message).join("\n")
 
+    try {
       const response = await fetch(process.env.REACT_APP_SERVER_URL + "/api", {
         method: "POST",
         headers: {
@@ -86,19 +87,20 @@ function App() {
       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!")
       }
       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>`} ])
+    }
   }
 
   function handleTemp(temp) {

@@ -2,6 +2,32 @@
   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 {
   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 */
@@ -172,9 +198,16 @@ code br:nth-child(-n+2) {
 }
 
 @media (max-width: 414px) {
+  .errormsg .msg {
+      width: 80%;
+  }
   .message {
       font-size: 14px;
   }
+  .errormsg {
+    padding: 10px;
+    width: 100%;
+  }
   .chat-message-center {
     padding: 20px 5vw !important;
   }

@@ -3,6 +3,7 @@ const express = require('express')
 const bodyParser = require('body-parser')
 const cors = require('cors')
 require('dotenv').config()
+const rateLimit = require('express-rate-limit')
 
 // Open AI Configuration
 // console.log(process.env.OPENAI_API_ORG)
@@ -12,6 +13,12 @@ const configuration = new 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
 const app = express()
 const port = 3080
@@ -19,7 +26,7 @@ const port = 3080
 app.use(bodyParser.json())
 app.use(cors())
 app.use(require('morgan')('dev'))
-
+app.use(rateLimiter)
 
 // Routing
 

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