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 ( -
+
{/* 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;