style: animate nav prompt and bot message and fix navprompt box model

client/src/App.css

@@ -42,13 +42,15 @@ nav {
   max-width: 340px;
 }
 .navPromptWrapper {
-  border-bottom: 1px solid hsl(0deg 0% 100% / 20%);
+  border-bottom: 1px solid #ffffff33;
+  padding: 10px;
 }
 .navPrompt {
   display: flex;
   align-items: center;
   padding: 10px;
   column-gap: 5px;
+  margin: 5px 0;
 }
 .navPrompt p {
   font-size: 14px;
@@ -58,10 +60,24 @@ nav {
   white-space: nowrap;
   text-overflow: ellipsis;
   width: 150px;
+  margin: 0;
+}
+#botMessage span,
+.navPrompt span {
+  animation: fadeInChar 0.5s ease-in forwards;
+  opacity: 0;
+}
+@keyframes fadeInChar {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
 }
 .navCloseIcon {
   width: 20%;
-  margin-top: 10px;
+  margin: 10px;
 }
 nav svg {
   float: left;
@@ -82,6 +98,7 @@ nav svg {
   -moz-transition: all 0.25s ease;
   -o-transition: all 0.25s ease;
 }
+.navPrompt:hover,
 .sideMenuButton:hover {
   cursor: pointer;
   background-color: hsla(240, 9%, 59%, 0.1);
@@ -172,6 +189,7 @@ nav svg {
   object-fit: contain;
   object-position: center;
 }
+
 .inputPromptWrapper {
   padding: 8px;
   position: absolute;

client/src/App.js

@@ -61,8 +61,13 @@ function App() {
       {showMenu && (
         <nav>
           <div className="navItems">
-            <NewChat setChatLog={setChatLog} />
-            <NavPrompt />
+            <NewChat setChatLog={setChatLog} setShowMenu={setShowMenu} />
+            {chatLog.map(
+              (chat, idx) =>
+                chat.botMessage && (
+                  <NavPrompt chatPrompt={chat.chatPrompt} key={idx} />
+                )
+            )}
           </div>
           <div className="navCloseIcon">
             <svg
@@ -83,7 +88,14 @@ function App() {
 
       <aside className="sideMenu">
         <NewChat setChatLog={setChatLog} />
-        <NavPrompt />
+        <div className="navPromptWrapper">
+          {chatLog.map(
+            (chat, idx) =>
+              chat.botMessage && (
+                <NavPrompt chatPrompt={chat.chatPrompt} key={idx} />
+              )
+          )}
+        </div>
       </aside>
 
       <section className="chatBox">
@@ -132,7 +144,16 @@ function App() {
                       </svg>
                     </Avatar>
                     {chat.botMessage ? (
-                      <div id="botMessage">{chat.botMessage}</div>
+                      <div id="botMessage">
+                        {chat.botMessage.split("").map((char, idx) => (
+                          <span
+                            key={idx}
+                            style={{ animationDelay: `${idx * 0.03}s` }}
+                          >
+                            {char}
+                          </span>
+                        ))}
+                      </div>
                     ) : (
                       <Loading />
                     )}

client/src/components/NavPrompt.jsx

@@ -1,8 +1,8 @@
 import React from "react";
 
-const NavPrompt = () => {
+const NavPrompt = ({ chatPrompt }) => {
+  const chatPromptCharacters = chatPrompt.split("");
   return (
-    <div className="navPromptWrapper">
     <div className="navPrompt">
       <svg
         viewBox="0 0 16 16"
@@ -19,8 +19,13 @@ const NavPrompt = () => {
           clipRule="evenodd"
         />
       </svg>
-        <p>How do I make an HTTP request in Javascript?</p>
-      </div>
+      <p>
+        {chatPromptCharacters.map((char, idx) => (
+          <span key={idx} style={{ animationDelay: `${idx * 0.1}s` }}>
+            {char}
+          </span>
+        ))}
+      </p>
     </div>
   );
 };

client/src/components/NewChat.jsx

@@ -1,8 +1,14 @@
 import React from "react";
 
-const NewChat = ({ setChatLog }) => {
+const NewChat = ({ setChatLog, setShowMenu }) => {
   return (
-    <div className="sideMenuButton" onClick={() => setChatLog([])}>
+    <div
+      className="sideMenuButton"
+      onClick={() => {
+        setChatLog([]);
+        setShowMenu(false);
+      }}
+    >
       <span>+</span>
       New chat
     </div>