feat: display message timestamps in conversations

[dario-spagnolo]

feat: display message timestamps in conversations

Summary

Adds a localized timestamp display for each message in conversations, showing when the message was created.

Changes:

• New component: MessageTimestamp.tsx - displays localized date/time for each message
• Modified: HoverButtons.tsx - integrates the timestamp at the end of the action buttons row

Features:

• Displays: day, month (short), year, hour (2-digit), minute (2-digit)
• Automatically localized using the app's language setting via toLocaleString()
• Positioned at the right end of the action buttons row
• Appears/disappears with the hover buttons (same behavior as existing action buttons)

Example output by locale:

Locale	Format
English (en)	5 Jan 2026, 14:32
French (fr)	5 janv. 2026, 14:32
German (de)	5. Jan. 2026, 14:32

Technical notes:

• Uses existing createdAt field already available in the message object
• No database changes required (timestamps already stored via Mongoose { timestamps: true })
• No new localization strings needed (uses native toLocaleString())
• No new dependencies

Change Type

• New feature (non-breaking change which adds functionality)

Testing

1. Start the LibreChat application
2. Open any conversation with messages
3. Hover over a message to reveal the action buttons
4. Verify the timestamp appears at the right end of the action buttons row
5. Change the app language in settings and verify the timestamp format updates accordingly

Checklist

• My code adheres to this project's style guidelines
• I have performed a self-review of my own code
• My changes do not introduce new warnings
• Local unit tests pass with my changes

[Copilot]

Pull request overview

This PR adds a timestamp display feature to message hover buttons in conversations, showing users when each message was created. The implementation introduces a new reusable component and integrates it into the existing hover buttons UI.

Key Changes:

• New MessageTimestamp component that formats and displays message creation timestamps with automatic localization
• Integration of the timestamp into HoverButtons component at the end of the action buttons row
• Uses native browser localization via toLocaleString() with the app's language setting

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.

File	Description
client/src/components/Chat/Messages/MessageTimestamp.tsx	New component that retrieves the app language from state and formats the createdAt timestamp using toLocaleString() with specified date/time options
client/src/components/Chat/Messages/HoverButtons.tsx	Imports and renders the new MessageTimestamp component, passing message.createdAt; adds w-full class to container to support ml-auto positioning of timestamp

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

The component doesn't validate whether the Date object is valid before attempting to format it. If createdAt contains an invalid date string, date.toLocaleString() will return "Invalid Date", which will be displayed to the user. Consider adding validation similar to the pattern used in VersionItem.tsx, which checks isNaN(date.getTime()) to detect invalid dates and handles them appropriately.

[Copilot]

The timestamp should use a semantic <time> element with a dateTime attribute for better accessibility and semantic HTML. Additionally, consider adding an aria-label with a more descriptive text for screen readers. See PromptVersions.tsx line 121 for an example pattern used elsewhere in the codebase that wraps formatted dates in a <time> element with a proper dateTime attribute.

Suggested change

	return (
	<span className="ml-auto flex items-center text-xs text-text-secondary">{formattedDate}</span>
	const dateTimeAttr = date.toISOString();
	const ariaLabel = date.toLocaleString(lang, {
	weekday: 'long',
	year: 'numeric',
	month: 'long',
	day: 'numeric',
	hour: 'numeric',
	minute: '2-digit',
	second: '2-digit',
	});
	return (
	<span className="ml-auto flex items-center text-xs text-text-secondary">
	<time dateTime={dateTimeAttr} aria-label={ariaLabel}>
	{formattedDate}
	</time>
	</span>