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
This commit is contained in:
Dario Spagnolo 2026-01-05 16:21:32 +01:00
parent 211b39f311
commit 01b570f325
2 changed files with 38 additions and 1 deletions

View file

@ -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>
);
};

View file

@ -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;