style: use pre tag to preserve white space in bot response

client/src/App.css

@@ -70,6 +70,17 @@ nav {
   animation: fadeInChar 0.5s ease-in forwards;
   opacity: 0;
 }
+#botMessage pre {
+  margin: 0;
+  padding: 0;
+  text-indent: 0;
+  white-space: pre-wrap;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  position: relative;
+  top: -45px;
+}
+
 @keyframes fadeInChar {
   0% {
     opacity: 0;

client/src/App.js

@@ -11,12 +11,7 @@ import NavLinks from "./components/NavLink";
 function App() {
   const [showMenu, setShowMenu] = useState(false);
   const [inputPrompt, setInputPrompt] = useState("");
-  const [chatLog, setChatLog] = useState([
-    {
-      chatPrompt: "Hello bot!",
-      botMessage: "Hey human! I am an AI. Tell me how can I help you.",
-    },
-  ]);
+  const [chatLog, setChatLog] = useState([]);
   const [err, setErr] = useState(false);
 
   const handleSubmit = (e) => {
@@ -245,14 +240,16 @@ function App() {
                     </Avatar>
                     {chat.botMessage ? (
                       <div id="botMessage">
-                        {chat.botMessage.split("").map((char, idx) => (
-                          <span
-                            key={idx}
-                            style={{ animationDelay: `${idx * 0.03}s` }}
-                          >
-                            {char}
-                          </span>
-                        ))}
+                        <pre>
+                          {chat.botMessage.split("").map((char, idx) => (
+                            <span
+                              key={idx}
+                              style={{ animationDelay: `${idx * 0.03}s` }}
+                            >
+                              {char}
+                            </span>
+                          ))}
+                        </pre>
                       </div>
                     ) : err ? (
                       <Error err={err} />