5k Solution

2-copy-of-code/lesson-05/chatbot-project/src/components/ChatInput.css

@@ -1,6 +1,4 @@
-.send-button {
-  background-color: rgb(25, 135, 84);
-  color: white;
+.send-button, .clear-button {
   padding: 12px 20px;
   margin-left: 10px;
   border: none;
@@ -9,6 +7,15 @@
   cursor: pointer;
 }
 
+.send-button {
+  background-color: rgb(25, 135, 84);
+  color: white;
+}
+
+.clear-button {
+  background-color: rgb(230, 230, 230);
+}
+
 .chat-input {
   padding: 12px 15px;
   border-radius: 10px;

2-copy-of-code/lesson-05/chatbot-project/src/components/ChatInput.jsx

@@ -37,6 +37,17 @@ export function ChatInput({ chatMessages, setChatMessages }) {
     setInputText('');
   }
 
+  function clearMessages() {
+    setChatMessages([]);
+
+    // Here, you could also run:
+    // localStorage.setItem('messages', JSON.stringify([]));
+
+    // However, because chatMessages is being updated, the
+    // useEffect in the App component will run, and it will
+    // automatically update messages in localStorage to be [].
+  }
+
   return (
     <div className="chat-input-container">
       <input
@@ -50,6 +61,10 @@ export function ChatInput({ chatMessages, setChatMessages }) {
         onClick={sendMessage}
         className="send-button"
       >Send</button>
+      <button
+        onClick={clearMessages}
+        className="clear-button"
+      >Clear</button>
     </div>
   );
 }