5i Solution

2-copy-of-code/lesson-05/chatbot-project/package.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "dayjs": "^1.11.13",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "supersimpledev": "^8.3.1"

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

@@ -8,19 +8,23 @@ function App() {
   const [chatMessages, setChatMessages] = useState([{
     message: 'hello chatbot',
     sender: 'user',
-    id: 'id1'
+    id: 'id1',
+    time: 1736127288920
   }, {
     message: 'Hello! How can I help you?',
     sender: 'robot',
-    id: 'id2'
+    id: 'id2',
+    time: 1736127291230
   }, {
     message: 'can you get me todays date?',
     sender: 'user',
-    id: 'id3'
+    id: 'id3',
+    time: 1736127385356
   }, {
     message: 'Today is September 27',
     sender: 'robot',
-    id: 'id4'
+    id: 'id4',
+    time: 1736127385500
   }]);
   // const [chatMessages, setChatMessages] = array;
   // const chatMessages = array[0];

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

@@ -1,3 +1,4 @@
+import dayjs from 'dayjs';
 import { useState } from 'react'
 import { Chatbot } from 'supersimpledev';
 import './ChatInput.css';
@@ -15,7 +16,8 @@ export function ChatInput({ chatMessages, setChatMessages }) {
       {
         message: inputText,
         sender: 'user',
-        id: crypto.randomUUID()
+        id: crypto.randomUUID(),
+        time: dayjs().valueOf()
       }
     ];
 
@@ -27,7 +29,8 @@ export function ChatInput({ chatMessages, setChatMessages }) {
       {
         message: response,
         sender: 'robot',
-        id: crypto.randomUUID()
+        id: crypto.randomUUID(),
+        time: dayjs().valueOf()
       }
     ]);
 

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

@@ -24,4 +24,10 @@
   height: 45px;
   border-radius: 45px;
   object-fit: cover;
+}
+
+.chat-message-time {
+  font-size: 14px;
+  color: rgb(125, 125, 125);
+  margin-top: 5px;
 }

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

@@ -1,8 +1,9 @@
+import dayjs from 'dayjs';
 import RobotProfileImage from '../assets/robot.png';
 import UserProfileImage from '../assets/profile-1.jpg';
 import './ChatMessage.css';
 
-export function ChatMessage({ message, sender }) {
+export function ChatMessage({ message, sender, time }) {
   // const message = props.message;
   // const sender = props.sender;
   // const { message, sender } = props;
@@ -29,6 +30,13 @@ export function ChatMessage({ message, sender }) {
       )}
       <div className="chat-message-text">
         {message}
+
+        {/* The "time && (" check is optional. I added it just to be safe. */}
+        {time && (
+          <div className='chat-message-time'>
+            {dayjs(time).format('h:mma')}
+          </div>
+        )}
       </div>
       {sender === 'user' && (
         <img src={UserProfileImage} className="chat-message-profile" />

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

@@ -19,6 +19,7 @@ function ChatMessages({ chatMessages }) {
           <ChatMessage
             message={chatMessage.message}
             sender={chatMessage.sender}
+            time={chatMessage.time}
             key={chatMessage.id}
           />
         );