add: introduce bot response component

-implement auto typing effect for bot response

client/src/App.css

@@ -65,9 +65,9 @@ nav {
   width: 150px;
   margin: 0;
 }
-#botMessage span,
+
 .navPrompt span {
-  animation: fadeInChar 0.5s ease-in forwards;
+  animation: fadeInChar 1s ease-in forwards;
   opacity: 0;
 }
 #botMessage pre {

client/src/App.js

@@ -7,6 +7,7 @@ import NavPrompt from "./components/NavPrompt";
 import Loading from "./components/Loading";
 import Error from "./components/Error";
 import NavLinks from "./components/NavLink";
+import BotResponse from "./components/BotResponse";
 
 function App() {
   const [showMenu, setShowMenu] = useState(false);
@@ -240,16 +241,7 @@ function App() {
                     </Avatar>
                     {chat.botMessage ? (
                       <div id="botMessage">
-                        <pre>
-                          {chat.botMessage.split("").map((char, idx) => (
-                            <span
-                              key={idx}
-                              style={{ animationDelay: `${idx * 0.03}s` }}
-                            >
-                              {char}
-                            </span>
-                          ))}
-                        </pre>
+                        <BotResponse response={chat.botMessage} />
                       </div>
                     ) : err ? (
                       <Error err={err} />

client/src/components/BotResponse.jsx

@@ -0,0 +1,26 @@
+import React, { useEffect } from "react";
+import { useState } from "react";
+
+const BotResponse = ({ response }) => {
+  const [botResoponse, setBotResponse] = useState("");
+
+  useEffect(() => {
+    let index = 1;
+    let msg = setInterval(() => {
+      setBotResponse(response.slice(0, index));
+      if (index >= response.length) {
+        clearInterval(msg);
+      }
+      index++;
+    }, 100);
+  }, [response]);
+
+  return (
+    <pre>
+      {botResoponse}
+      {botResoponse === response ? "" : "|"}
+    </pre>
+  );
+};
+
+export default BotResponse;