feature/rn-automatic-messages-layout

[vitorguima]

Summary by CodeRabbit

Release Notes

• New Features
  • Added date headers above message groups in chat conversations to help users better understand message timelines. Dates display as "Today," "Yesterday," or the formatted date, appearing when messages span different days.

[changeset-bot]

⚠️ No Changeset found

Latest commit: 7663fb3

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: e5b45565-8bea-424c-af6b-1a1c9c7aa07a

📥 Commits

Reviewing files that changed from the base of the PR and between b70c5d5 and 7663fb3.

📒 Files selected for processing (5)

• packages/components/modules/messages/native/ChatRoomPage/MessagesList/MessagesGroup/index.tsx
• packages/components/modules/messages/native/ChatRoomPage/MessagesList/MessagesGroup/styles.ts
• packages/components/modules/messages/native/ChatRoomPage/MessagesList/MessagesGroup/types.ts
• packages/components/modules/messages/native/ChatRoomPage/MessagesList/MessagesGroup/utils.ts
• packages/components/modules/messages/native/ChatRoomPage/MessagesList/index.tsx

---

📝 Walkthrough

Walkthrough

MessagesGroup gains a hasNext optional boolean prop passed down from MessagesList. A new renderDateOnTopOfMessagesGroup callback conditionally renders a formatted date label above a group when the group is at the end of the list or when adjacent messages fall on different days. A displayFormattedDate utility and a dateGroup stylesheet entry support this rendering.

Changes

Date Header Rendering in MessagesGroup

Layer / File(s)	Summary
MessagesGroupProps contract and date utility ...MessagesGroup/types.ts, ...MessagesGroup/utils.ts	Adds hasNext?: boolean to MessagesGroupProps and exports displayFormattedDate, which returns "Today", "Yesterday", or a formatted date string via formatDateFromApi.
renderDateOnTopOfMessagesGroup logic and render wiring ...MessagesGroup/index.tsx	Imports datesDontHaveSameDay and displayFormattedDate, destructures hasNext (default false), adds a useCallback that checks end-of-list and day-boundary conditions to render a caption-styled date, and places the call in the output after the unread divider.
dateGroup stylesheet entry ...MessagesGroup/styles.ts	Adds dateGroup style with centered alignment, surface background color, border radius, padding, and margins.
hasNext prop threaded from MessagesList ...MessagesList/index.tsx	Passes hasNext from usePaginationFragment into each MessagesGroup instance inside renderMessagesGroup.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• silverlogic/baseapp-frontend#297: Introduced the original MessagesGroup/MessagesList chat-message grouping UI that this PR extends with hasNext and date header rendering.
• silverlogic/baseapp-frontend#123: Also modifies the chat MessagesGroup/MessagesList implementation with hasNext and displayFormattedDate conditional date group rendering.

Suggested reviewers

• priscilladeroode
• anicioalexandre
• deboracosilveira

Poem

🐇 Hop, hop through the chat each day,
A date badge pops to show the way!
"Today," "Yesterday," or a full date line,
Each message group now has a clear sign.
The rabbit cheers — the timeline's fine! 🎉

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (1 warning, 1 inconclusive)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	No pull request description was provided by the author, making it impossible to assess completeness against repository requirements.	Add a comprehensive pull request description explaining the changes, why they were made, and any relevant implementation details or testing notes.
Title check	❓ Inconclusive	The title 'feature/rn-automatic-messages-layout' uses a branch naming convention rather than describing the actual changes. While related to the feature work, it doesn't clarify what was implemented.	Use a descriptive title that summarizes the main change, such as 'Add automatic date display for message groups' instead of the branch name.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feature/rn-automatic-messages-layout

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

packages/components/modules/messages/native/ChatRoomPage/MessagesList/MessagesGroup/index.tsx

ESLint skipped: missing config or dependency (missing-dependency). The ESLint configuration references a package that is not available in the sandbox.

packages/components/modules/messages/native/ChatRoomPage/MessagesList/MessagesGroup/styles.ts

ESLint skipped: the ESLint configuration for this file references a package that is not available in the sandbox.

packages/components/modules/messages/native/ChatRoomPage/MessagesList/MessagesGroup/types.ts

ESLint skipped: the ESLint configuration for this file references a package that is not available in the sandbox.

• 2 others

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud