fix(livechat): show Today/Yesterday labels in message date separator#40928
fix(livechat): show Today/Yesterday labels in message date separator#40928rish106-hub wants to merge 2 commits into
Conversation
|
Looks like this PR is not ready to merge, because of the following issues:
Please fix the issues and try again If you have any trouble, please check the PR guidelines |
🦋 Changeset detectedLatest commit: 150be60 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
WalkthroughThis PR updates the livechat message separator to display relative date labels ("Today"/"Yesterday") instead of always showing the formatted date. The ChangesLivechat message separator relative date display
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes Suggested labels
Suggested reviewers
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. Warning Review ran into problems🔥 ProblemsErrors were encountered while retrieving linked issues. Errors (1)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (1)
packages/livechat/src/components/Messages/MessageSeparator/index.tsx (1)
19-27: ⚡ Quick winConsider using
parseISOfor consistency with MessageList.The
formatDateLabelhelper usesnew Date(date)to parse the date string, whileMessageList(which provides thisdateprop) usesparseISO(message.ts)from date-fns for the same timestamp. For consistency and robustness, consider usingparseISOhere as well.♻️ Suggested refactor
-import { isToday, isYesterday } from 'date-fns'; +import { isToday, isYesterday, parseISO } from 'date-fns'; const formatDateLabel = (date: string, t: TFunction): string => { - const d = new Date(date); + const d = parseISO(date); if (isToday(d)) return t('today').toUpperCase();Based on context snippet from
packages/livechat/src/components/Messages/MessageList/index.js:149-175showing MessageList usesparseISO(message.ts).🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/livechat/src/components/Messages/MessageSeparator/index.tsx` around lines 19 - 27, The formatDateLabel function currently uses new Date(date) which is inconsistent with MessageList's parseISO(message.ts); update formatDateLabel to parse the incoming date string using parseISO from date-fns (import parseISO) before passing it to isToday/isYesterday and formatting; keep the rest of the logic and t(...) call intact so the output casing and translation key usage remain unchanged.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Nitpick comments:
In `@packages/livechat/src/components/Messages/MessageSeparator/index.tsx`:
- Around line 19-27: The formatDateLabel function currently uses new Date(date)
which is inconsistent with MessageList's parseISO(message.ts); update
formatDateLabel to parse the incoming date string using parseISO from date-fns
(import parseISO) before passing it to isToday/isYesterday and formatting; keep
the rest of the logic and t(...) call intact so the output casing and
translation key usage remain unchanged.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 0725798f-c1f9-40c5-8646-26c7da9d3a01
📒 Files selected for processing (3)
.changeset/fix-message-separator-today-label.mdpackages/livechat/src/components/Messages/MessageSeparator/index.tsxpackages/livechat/src/i18n/en.json
📜 Review details
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: cubic · AI code reviewer
🧰 Additional context used
📓 Path-based instructions (1)
**/*.{ts,tsx,js}
📄 CodeRabbit inference engine (.cursor/rules/playwright.mdc)
**/*.{ts,tsx,js}: Write concise, technical TypeScript/JavaScript with accurate typing in Playwright tests
Avoid code comments in the implementation
Files:
packages/livechat/src/components/Messages/MessageSeparator/index.tsx
🧠 Learnings (3)
📚 Learning: 2026-03-16T21:50:37.589Z
Learnt from: amitb0ra
Repo: RocketChat/Rocket.Chat PR: 39676
File: .changeset/migrate-users-register-openapi.md:3-3
Timestamp: 2026-03-16T21:50:37.589Z
Learning: For changes related to OpenAPI migrations in Rocket.Chat/OpenAPI, when removing endpoint types and validators from rocket.chat/rest-typings (e.g., UserRegisterParamsPOST, /v1/users.register) document this as a minor changeset (not breaking) per RocketChat/Rocket.Chat-Open-API#150 Rule 7. Note that the endpoint type is re-exposed via a module augmentation .d.ts in the consuming package (e.g., packages/web-ui-registration/src/users-register.d.ts). In reviews, ensure the changeset clearly states: this is a non-breaking change, the major version should not be bumped, and the changeset reflects a minor version bump. Do not treat this as a breaking change during OpenAPI migrations.
Applied to files:
.changeset/fix-message-separator-today-label.md
📚 Learning: 2026-03-27T14:52:56.865Z
Learnt from: dougfabris
Repo: RocketChat/Rocket.Chat PR: 39892
File: apps/meteor/client/views/room/contextualBar/Threads/Thread.tsx:150-155
Timestamp: 2026-03-27T14:52:56.865Z
Learning: In Rocket.Chat, there are two different `ModalBackdrop` components with different prop APIs. During review, confirm the import source: (1) `rocket.chat/fuselage` `ModalBackdrop` uses `ModalBackdropProps` based on `BoxProps` (so it supports `onClick` and other Box/DOM props) and does not have an `onDismiss` prop; (2) `rocket.chat/ui-client` `ModalBackdrop` uses a narrower props interface like `{ children?: ReactNode; onDismiss?: () => void }` and handles Escape keypress and outside mouse-up, and it does not forward arbitrary DOM props such as `onClick`. Flag mismatched props (e.g., `onDismiss` passed to the fuselage component or `onClick` passed to the ui-client component) and ensure the usage matches the correct component being imported.
Applied to files:
packages/livechat/src/components/Messages/MessageSeparator/index.tsx
📚 Learning: 2026-05-06T12:21:44.083Z
Learnt from: juliajforesti
Repo: RocketChat/Rocket.Chat PR: 40256
File: apps/meteor/client/components/CreateDiscussion/CreateDiscussion.tsx:121-149
Timestamp: 2026-05-06T12:21:44.083Z
Learning: Field wrappers in rocket.chat/fuselage-forms (Field, FieldLabel, FieldRow, FieldError, FieldHint) auto-create htmlFor/id associations, aria-describedby, and role="alert" for errors. Do not manually set htmlFor, id, aria-describedby, or role attributes when using these wrappers. This automatic wiring does not apply to plain rocket.chat/fuselage components, which require explicit ID wiring per the accessibility docs. In code reviews, prefer using fuselage-forms wrappers for form fields and verify there is no unnecessary manual ID/aria wiring in files that use these wrappers. If a component uses plain fuselage components, ensure proper id wiring as per docs.
Applied to files:
packages/livechat/src/components/Messages/MessageSeparator/index.tsx
🔇 Additional comments (5)
packages/livechat/src/components/Messages/MessageSeparator/index.tsx (3)
1-1: LGTM!
47-47: LGTM!
19-27: Add/ensure tests forMessageSeparatordate-label branches (today/yesterday/older).
formatDateLabelinpackages/livechat/src/components/Messages/MessageSeparator/index.tsx(lines 19-27) needs coverage for all three branches (isToday,isYesterday, and themessage_separator_datefallback) and assertions that the result is uppercased with the expected translation params.packages/livechat/src/i18n/en.json (1)
62-63: LGTM!.changeset/fix-message-separator-today-label.md (1)
1-5: LGTM!
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
1 participant
fix(livechat): show Today/Yesterday labels in message date separator
Closes #40588
Proposed changes (including videos or screenshots)
The
MessageSeparatorcomponent in the livechat widget always displayed a full formatted date (e.g. "MAY 17, 2026") even for messages sent today or yesterday. This is inconsistent with common chat UX patterns (Slack, WhatsApp, Discord all show "Today"/"Yesterday").Fix:
formatDateLabelhelper that checksisToday/isYesterdayfromdate-fns(already a project dependency) before falling back to the existing formattertodayandyesterdaytranslation keys toen.jsonIssue(s)
Closes #40588
Steps to test or reproduce
Further comments
isTodayandisYesterdayare imported fromdate-fnswhich is already listed as a dependency inpackages/livechat/package.json. No new dependencies added.Summary by CodeRabbit