From 01b570f32593840ed0cfdb196489a160ae4c7709 Mon Sep 17 00:00:00 2001
From: Dario Spagnolo <i@dariospagnolo.org>
Date: Mon, 5 Jan 2026 16:21:32 +0100
Subject: [PATCH] feat: display message timestamps in conversation

- Add MessageTimestamp component showing localized date/time
- Integrate timestamp at the end of HoverButtons (action bar)
- Timestamp displays: day, month, year, hour, minute
- Uses browser's toLocaleString() with app language setting
- Aligned to the right of the action buttons row
---
 .../components/Chat/Messages/HoverButtons.tsx |  6 +++-
 .../Chat/Messages/MessageTimestamp.tsx        | 33 +++++++++++++++++++
 2 files changed, 38 insertions(+), 1 deletion(-)
 create mode 100644 client/src/components/Chat/Messages/MessageTimestamp.tsx

diff --git a/client/src/components/Chat/Messages/HoverButtons.tsx b/client/src/components/Chat/Messages/HoverButtons.tsx
index 5d60223d08..93e5b6f26b 100644
--- a/client/src/components/Chat/Messages/HoverButtons.tsx
+++ b/client/src/components/Chat/Messages/HoverButtons.tsx
@@ -4,6 +4,7 @@ import type { TConversation, TMessage, TFeedback } from 'librechat-data-provider
 import { EditIcon, Clipboard, CheckMark, ContinueIcon, RegenerateIcon } from '@librechat/client';
 import { useGenerationsByLatest, useLocalize } from '~/hooks';
 import { Fork } from '~/components/Conversations';
+import MessageTimestamp from './MessageTimestamp';
 import MessageAudio from './MessageAudio';
 import Feedback from './Feedback';
 import { cn } from '~/utils';
@@ -185,7 +186,7 @@ const HoverButtons = ({
   const handleCopy = () => copyToClipboard(setIsCopied);
 
   return (
-    <div className="group visible flex justify-center gap-0.5 self-end focus-within:outline-none lg:justify-start">
+    <div className="group visible flex w-full justify-center gap-0.5 self-end focus-within:outline-none lg:justify-start">
       {/* Text to Speech */}
       {TextToSpeech && (
         <MessageAudio
@@ -269,6 +270,9 @@ const HoverButtons = ({
           className="active"
         />
       )}
+
+      {/* Message Timestamp */}
+      <MessageTimestamp createdAt={message.createdAt} />
     </div>
   );
 };
diff --git a/client/src/components/Chat/Messages/MessageTimestamp.tsx b/client/src/components/Chat/Messages/MessageTimestamp.tsx
new file mode 100644
index 0000000000..eb2967ad53
--- /dev/null
+++ b/client/src/components/Chat/Messages/MessageTimestamp.tsx
@@ -0,0 +1,33 @@
+import { memo } from 'react';
+import { useRecoilValue } from 'recoil';
+import store from '~/store';
+
+type MessageTimestampProps = {
+  createdAt?: string | Date;
+};
+
+const MessageTimestamp = memo(({ createdAt }: MessageTimestampProps) => {
+  const lang = useRecoilValue(store.lang);
+
+  if (!createdAt) {
+    return null;
+  }
+
+  const date = new Date(createdAt);
+
+  const formattedDate = date.toLocaleString(lang, {
+    day: 'numeric',
+    month: 'short',
+    year: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+  });
+
+  return (
+    <span className="ml-auto flex items-center text-xs text-text-secondary">{formattedDate}</span>
+  );
+});
+
+MessageTimestamp.displayName = 'MessageTimestamp';
+
+export default MessageTimestamp;