feat: update ui

ui/src/app/messages.tsx

@@ -3,13 +3,12 @@ import { getFormattedName, getId, getInitial } from "@/lib/utils";
 import type { ChatDTO } from "@shared/dto";
 import { useQuery } from "@tanstack/react-query";
 import { cn } from "cn";
-import {
-  ArrowLeftIcon,
-  CircleHelpIcon,
-  PaperclipIcon,
-  SendIcon,
-} from "lucide-react";
+import { ArrowLeftIcon, PaperclipIcon, SendIcon } from "lucide-react";
 import React, { useMemo, useState } from "react";
+import dayjs from "dayjs";
+import relativeTime from "dayjs/plugin/relativeTime";
+
+dayjs.extend(relativeTime);
 
 type Props = {
   chat: ChatDTO;
@@ -200,7 +199,7 @@ export default function MessagesSection({
                 <div
                   className={`mt-1 flex items-center justify-end gap-1 text-[10px] ${item.fromMe ? "text-primary" : "text-muted-foreground"}`}
                 >
-                  <span>{item.timestamp}</span>
+                  <span>{dayjs((item.timestamp ?? 0) * 1000).fromNow()}</span>
                   {/* {item.fromMe &&
                         (item.read ? (
                           <CheckCheck size={14} />
@@ -258,9 +257,9 @@ export default function MessagesSection({
             <SendIcon size={17} />
           </button>
         </div>
-        <div className="mx-auto mt-2 hidden max-w-2xl items-center justify-center gap-1 text-[10px] text-muted-foreground sm:flex">
+        {/* <div className="mx-auto mt-2 hidden max-w-2xl items-center justify-center gap-1 text-[10px] text-muted-foreground sm:flex">
           <CircleHelpIcon size={12} /> Press Enter to send
-        </div>
+        </div> */}
       </div>
     </section>
   );