From 7c85b1fc57f5b7c1225a72555ab69040ad299502 Mon Sep 17 00:00:00 2001
From: sushant dhimal <sushant07.dhimal@gmail.com>
Date: Fri, 20 Jan 2023 16:06:57 +0545
Subject: [PATCH] add: introduce bot response component -implement auto typing
 effect for bot response

---
 client/src/App.css                    |  4 ++--
 client/src/App.js                     | 12 ++----------
 client/src/components/BotResponse.jsx | 26 ++++++++++++++++++++++++++
 3 files changed, 30 insertions(+), 12 deletions(-)
 create mode 100644 client/src/components/BotResponse.jsx

diff --git a/client/src/App.css b/client/src/App.css
index 5fa8be9..39be4d0 100644
--- a/client/src/App.css
+++ b/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 {
diff --git a/client/src/App.js b/client/src/App.js
index c692f5f..b590208 100644
--- a/client/src/App.js
+++ b/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} />
diff --git a/client/src/components/BotResponse.jsx b/client/src/components/BotResponse.jsx
new file mode 100644
index 0000000..db8b285
--- /dev/null
+++ b/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;