mirror of
https://github.com/danny-avila/LibreChat.git
synced 2026-04-07 00:15:23 +02:00
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:
parent
211b39f311
commit
01b570f325
2 changed files with 38 additions and 1 deletions
|
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
33
client/src/components/Chat/Messages/MessageTimestamp.tsx
Normal file
33
client/src/components/Chat/Messages/MessageTimestamp.tsx
Normal 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;
|
||||
Loading…
Add table
Add a link
Reference in a new issue