Improved message box date

package-lock.json

@@ -15,9 +15,11 @@
         "@radix-ui/react-separator": "^1.1.7",
         "@radix-ui/react-slot": "^1.2.3",
         "@radix-ui/react-tooltip": "^1.2.8",
+        "@types/date-fns": "^2.5.3",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "cmdk": "^1.1.1",
+        "date-fns": "^4.1.0",
         "emoji-picker-react": "^4.13.2",
         "lexical": "^0.34.0",
         "lucide-react": "^0.541.0",
@@ -1925,6 +1927,12 @@
         "tailwindcss": "4.1.12"
       }
     },
+    "node_modules/@types/date-fns": {
+      "version": "2.5.3",
+      "resolved": "https://registry.npmjs.org/@types/date-fns/-/date-fns-2.5.3.tgz",
+      "integrity": "sha512-4KVPD3g5RjSgZtdOjvI/TDFkLNUHhdoWxmierdQbDeEg17Rov0hbBYtIzNaQA67ORpteOhvR9YEMTb6xeDCang==",
+      "license": "MIT"
+    },
     "node_modules/@types/node": {
       "version": "20.19.11",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.19.11.tgz",
@@ -2092,6 +2100,16 @@
       "devOptional": true,
       "license": "MIT"
     },
+    "node_modules/date-fns": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz",
+      "integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/kossnocorp"
+      }
+    },
     "node_modules/detect-libc": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.4.tgz",

package.json

@@ -15,9 +15,11 @@
     "@radix-ui/react-separator": "^1.1.7",
     "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-tooltip": "^1.2.8",
+    "@types/date-fns": "^2.5.3",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
+    "date-fns": "^4.1.0",
     "emoji-picker-react": "^4.13.2",
     "lexical": "^0.34.0",
     "lucide-react": "^0.541.0",

src/components/MessageBox.tsx

@@ -12,6 +12,7 @@ import {
 } from "./ui/dropdown-menu";
 import { SmilePlusIcon } from "lucide-react";
 import { useState } from "react";
+import { format, isToday, isYesterday } from "date-fns";
 
 function MessageContainer({ message }: { message: Message }) {
   return (
@@ -21,7 +22,14 @@ function MessageContainer({ message }: { message: Message }) {
         <div className="flex flex-col">
           <span className="font-bold flex gap-1 items-center">
             {message.authorId}
-            <p className="text-neutral-500 text-xs">26/8/25, 12:45 AM</p>
+
+            <p className="text-neutral-500 text-xs">
+              {isToday(message.timestamp)
+                ? format(message.timestamp, "p")
+                : isYesterday(message.timestamp)
+                ? "Yesterday, " + format(message.timestamp, "p")
+                : format(message.timestamp, "PP, p")}
+            </p>
           </span>
 
           <span className="text-sm text-foreground/85">{message.content}</span>