feat(button): add stop or regenerate response button

client/src/App.css

@@ -204,6 +204,7 @@ nav svg {
 .botMessageMainContainer {
   width: 100%;
   background-color: #444654;
+  position: relative;
 }
 .botMessageWrapper {
   max-width: 800px;
@@ -215,7 +216,22 @@ nav svg {
   /* align-items: center; */
   column-gap: 25px;
 }
-
+.stop-messgage {
+  position: absolute;
+  bottom: 10px;
+  right: 100px;
+  width: fit-content;
+  padding: 10px 15px;
+  border-radius: 10%;
+  border: 1px solid rgb(86, 88, 105);
+  background-color: rgb(52, 53, 65);
+  color: rgb(217, 217, 217);
+  cursor: pointer;
+}
+.stop-messgage:hover {
+  background-color: rgb(64, 65, 79);
+  /* border: none; */
+}
 .errorMessage {
   color: #ef4444;
   font-size: 16px;
@@ -308,7 +324,7 @@ nav svg {
   }
   #introsection h1,
   pre {
-    font-size: 25px;
+    font-size: 16px;
     white-space: pre-wrap;
   }
   #introsection h2 {

client/src/components/BotResponse.jsx

@@ -3,23 +3,41 @@ import { useState } from "react";
 
 const BotResponse = ({ response }) => {
   const [botResoponse, setBotResponse] = useState("");
+  const [isPrinting, setIsPrinting] = useState(true);
+  const [isButtonVisible, setIsButtonVisible] = useState(true);
 
   useEffect(() => {
     let index = 1;
     let msg = setInterval(() => {
+      if (!isPrinting) {
+        // if isPrinting is false, clear interval and return
+        clearInterval(msg);
+        return;
+      }
       setBotResponse(response.slice(0, index));
       if (index >= response.length) {
         clearInterval(msg);
+        setIsButtonVisible(false);
       }
       index++;
     }, 100);
-  }, [response]);
+    return () => clearInterval(msg); // clear interval on component unmount
+  }, [response, isPrinting]);
+
+  const stopPrinting = () => setIsPrinting(!isPrinting);
 
   return (
-    <pre>
-      {botResoponse}
-      {botResoponse === response ? "" : "|"}
-    </pre>
+    <>
+      <pre>
+        {botResoponse}
+        {botResoponse === response ? "" : "|"}
+      </pre>
+      {isButtonVisible && (
+        <button className="stop-messgage" onClick={stopPrinting}>
+          {isPrinting ? "Stop Message" : "Regenerate Message"}
+        </button>
+      )}
+    </>
   );
 };
 

client/src/components/IntroSection.jsx

@@ -14,16 +14,14 @@ const IntroSection = () => {
         answers again. Whether you need information for school or work, or just
         want to know the latest news, Talkbot has you covered.
       </h2>
-      <p>
-        Features:
-        <ul>
-          <li>Instant answers to any question</li>
-          <li>Deep learning technology that improves with usage</li>
-          <li>Continuously Learning</li>
-          <li>User-friendly interface</li>
-          <li>Available 24/7</li>
-        </ul>
-      </p>
+      Features:
+      <ul>
+        <li>Instant answers to any question</li>
+        <li>Deep learning technology that improves with usage</li>
+        <li>Continuously Learning</li>
+        <li>User-friendly interface</li>
+        <li>Available 24/7</li>
+      </ul>
       <p>
         Say goodbye to endless searching and typing, and say hello to TalkBot,
         your personal AI assistant. Try it now and see for yourself how TalkBot