Use moment js for diff and format date

webroot/index.html

@@ -35,6 +35,8 @@
     <script src="//unpkg.com/showdown/dist/showdown.min.js" defer></script>
     <script type="module" src="https://cdn.jsdelivr.net/npm/@justinribeiro/lite-youtube@0.6.2/lite-youtube.js" defer></script>
 
+    <!-- moment js -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.0/moment.min.js" integrity="sha512-Izh34nqeeR7/nwthfeE0SI3c8uhFSnqxV0sI9TvTcXiFJkMd6fB644O64BRq2P/LA/+7eRvCw4GmLsXksyTHBg==" crossorigin="anonymous"></script>
 
     <link href="./styles/video.css" rel="stylesheet" />
     <link href="./styles/chat.css" rel="stylesheet" />

webroot/js/components/chat/message.js

@@ -8,6 +8,16 @@ import { generateAvatar } from '../../utils/helpers.js';
 import { SOCKET_MESSAGE_TYPES } from '../../utils/websocket.js';
 
 export default class Message extends Component {
+  formatTimestamp(sentAt) {
+    sentAt = moment(sentAt);
+
+    if (moment().diff(sentAt, 'days') >= 1) {
+      return `${sentAt.format('MMM D HH:mm:ss')}`
+    }
+
+    return sentAt.format("HH:mm:ss");
+  }
+
   render(props) {
     const { message, username } = props;
     const { type } = message;
@@ -20,6 +30,7 @@ export default class Message extends Component {
       const authorColor = messageBubbleColorForString(author);
       const avatarBgColor = { backgroundColor: authorColor };
       const authorTextColor = { color: authorColor };
+
       return (
         html`
           <div class="message flex flex-row items-start p-3">
@@ -35,7 +46,7 @@ export default class Message extends Component {
               </div>
               <div
                 class="message-text text-gray-300 font-normal overflow-y-hidden"
-                title=${timestamp}
+                title=${`Sent at ${this.formatTimestamp(timestamp)}`}
                 dangerouslySetInnerHTML=${
                   { __html: formattedMessage }
                 }