feat: add 12-hour/24-hour timestamp format toggle #10734
Draft
+334
−2
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Implements Issue #10539 - Adds the ability to display timestamps on chat messages. Features: - 24-hour format (14:34) - Full date for messages from previous days (e.g., "Jan 7, 14:34") - Configurable on/off toggle in UI Settings - Timestamps appear on the right side of header rows - Same styling as other header elements Files changed: - packages/types/src/global-settings.ts: Add showTimestamps setting - src/shared/ExtensionMessage.ts: Add to ExtensionState - webview-ui/src/context/ExtensionStateContext.tsx: Add state and setter - webview-ui/src/utils/formatTimestamp.ts: New timestamp formatting utility - webview-ui/src/components/settings/UISettings.tsx: Add toggle - webview-ui/src/components/settings/SettingsView.tsx: Pass prop - webview-ui/src/components/chat/ChatRow.tsx: Display timestamps - webview-ui/src/i18n/locales/en/settings.json: Translation strings - webview-ui/src/utils/__tests__/formatTimestamp.spec.ts: Tests - webview-ui/src/components/settings/__tests__/UISettings.spec.tsx: Update tests
- Add timestampFormat setting to global-settings.ts with enum type - Update formatTimestamp.ts to accept format parameter (12hour/24hour) - Add comprehensive tests for 12-hour format (AM/PM display) - Add time format dropdown in UI Settings when timestamps are enabled - Update i18n translations for the new setting Resolves: Issue #10539 - Request for 12hr/24hr time format toggle
Contributor
Author
Review complete. The implementation is well-structured with proper type definitions, state management, and UI integration. One minor test issue flagged:
Mention @roomote in a comment to request specific changes to this pull request or fix all unresolved issues. |
![roomote[bot]](https://avatars.githubusercontent.com/in/1546624?s=60&v=4){kind=small}
Comment on lines
+16
to
+20
| it("formats today's time in 24-hour format", () => { | ||
| // Same day at 10:15 | ||
| const timestamp = new Date("2026-01-09T10:15:00.000Z").getTime() | ||
| expect(formatTimestamp(timestamp)).toBe("10:15") | ||
| }) |
Contributor
Author
There was a problem hiding this comment.
These tests use UTC timestamp strings (e.g., 2026-01-09T10:15:00.000Z) but expect local time values. The formatTimestamp function correctly uses date.getHours() which returns local time, but the test assertions assume UTC equals local time. Tests will pass in UTC timezone but fail in other timezones.
For timezone-independent tests, use the local time constructor instead:
Suggested change
| it("formats today's time in 24-hour format", () => { | |
| // Same day at 10:15 | |
| const timestamp = new Date("2026-01-09T10:15:00.000Z").getTime() | |
| expect(formatTimestamp(timestamp)).toBe("10:15") | |
| }) | |
| it("formats today's time in 24-hour format", () => { | |
| // Same day at 10:15 local time | |
| const timestamp = new Date(2026, 0, 9, 10, 15, 0).getTime() | |
| expect(formatTimestamp(timestamp)).toBe("10:15") | |
| }) |
Fix it with Roo Code or mention @roomote and request a fix.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR attempts to address Issue #10539, which requested an option to swap between 12-hour (AM/PM) and 24-hour time formats for chat message timestamps.
Changes
timestampFormatsetting toglobal-settings.tswith enum type ("12hour"|"24hour")formatTimestamp.tsto accept a format parameter and properly handle 12-hour format with AM/PM displayHow it Works
When the "Show timestamps on messages" option is enabled in Settings > UI, a new "Time format" dropdown appears below it, allowing users to choose between:
Feedback and guidance are welcome!
Important
Adds a feature to toggle between 12-hour and 24-hour timestamp formats for chat messages, with UI settings and tests.
timestampFormatsetting inglobal-settings.tswith options for"12hour"and"24hour".formatTimestamp.tsto handle both 12-hour and 24-hour formats, including AM/PM for 12-hour.ChatRow.tsxto display timestamps based on the selected format.SettingsView.tsxandUISettings.tsxto include timestamp format options.formatTimestamp.spec.tsfor both 12-hour and 24-hour formats.UISettings.spec.tsxto test the new timestamp format setting.This description was created by
for 8c81d0c. You can customize this summary. It will automatically update as commits are pushed.