diff --git a/client/src/components/Chat/Messages/HoverButtons.tsx b/client/src/components/Chat/Messages/HoverButtons.tsx
index 180e8b599e..9472d28fa6 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 (
-
+
{/* Text to Speech */}
{TextToSpeech && (
)}
+
+ {/* Message Timestamp */}
+
);
};
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 (
+
{formattedDate}
+ );
+});
+
+MessageTimestamp.displayName = 'MessageTimestamp';
+
+export default MessageTimestamp;