[gabriellsh]

Proposed changes (including videos or screenshots)

Adds the list engine to @rocket.chat/ui-message-list: the row model, the scroll reducer and scroller, the keyboard model, the MessageList with its date bubble, new-messages and jump-to-latest overlays, stories with play tests, and the docs (docs/features/message-list/, docs/frontend/message-list.md, two entries in CLAUDE.md and ADR 0001 in the package). Nothing in apps/meteor uses the list yet; this part only adds it with its tests.

Enabling commits are at the bottom: useFormatDate and a viewport mode for the overlay scrollbars in @rocket.chat/ui-client, and deterministic fixtures in @rocket.chat/mock-providers. The list is copied from the reference implementation and then fixed where it would not hold for the room and thread: a position given before the first messages are listed, isAtBottom read from the position, a visibility report on resize, a bottomThreshold option, a repeated check for a due page, row redraws only when what a row shows changed, an arrow key that reaches the adjacent row and keeps trying for a few frames, and no waiting for a latest page that cannot be asked for. Each of these fixes is its own commit with a test that failed first.

What the list does to match develop's room and thread:

• an older page is a true prepend: the row above the messages (the older loader or the header) is set aside when the list plans a commit, so the messages on screen stay in place and the next page is asked for only when the viewer comes near the top again (R36);
• the first page's spinner sits at the top of the list (R4); the loaders are 32px high and use develop's spinner (R3);
• while the list places itself, its rows are out of sight, for at most 500ms, and the list is aria-busy meanwhile; rows show at once on the viewer's first input or when the focus enters the list. A list that already showed rows, its header or a loader is never hidden again, and does not place itself again for its first messages (R29, R84);
• the floating date follows develop's rules: it shows on every scroll, hides the day divider it stands in for, is pushed up by the next day's divider, and fades out 1s after the last scroll, over 0.6s (R51, R52).

New options, used by parts 08 and 09 of the stack: deferPagingUntilInput, no page before the viewer's first input (R82); startSpacing and endSpacing, space above the first row and below the last one, counted as part of those rows (R83); overlayTopInset, the height a consumer draws over the top of the list, below which the floating date rests and measures, placed again at once when the inset changes (R85). The list also places itself again when its first messages arrive late or its viewport gets a size, and reports no position before it has placed itself (R29, R59).

Spacing in the list uses the spacing scale tokens. The package spec is docs/specs/message-list.md (R1 to R85; part 08 of the stack adds R81).

This is part 07 of the stack (00 to 09). Review it against its base branch message-list/06-variants, not against develop.

Stack

• 00 chore(ui-message-list): add the spec-first ui-message-list package: chore(ui-message-list): add the spec-first ui-message-list package #43721
• 01 refactor: move message helpers to where the new list needs them: refactor: move message helpers to where the new list needs them #43722
• 02 fix: correct six defects of the room and thread message lists: fix: correct six defects of the room and thread message lists #43723
• 03 feat(ui-message-list): add message contexts and content parts: feat(ui-message-list): add message contexts and content parts #43724
• 04 feat(ui-message-list): add message attachments: feat(ui-message-list): add message attachments #43725
• 05 feat(ui-message-list): add the message toolbar: feat(ui-message-list): add the message toolbar #43726
• 06 feat(ui-message-list): add the message variants, delete the app copies: feat(ui-message-list): add the message variants, delete the app copies #43727
• 07 feat(ui-message-list): add the message list engine: feat(ui-message-list): add the message list engine #43728 ← this PR
• 08 feat: render the room's messages with the ui-message-list list: feat: render the room's messages with the ui-message-list list #43729
• 09 feat: render thread messages with ui-message-list, remove old lists: feat: render thread messages with ui-message-list, remove old lists #43730

Visible changes

No change visible to users: the list is not used yet. No changeset for @rocket.chat/ui-message-list.

• .changeset/ui-client-viewport-scrollbars.md, '@rocket.chat/ui-client': minor: adds useFormatDate and useViewportScrollbars.
• .changeset/mock-providers-fixtures.md, '@rocket.chat/mock-providers': minor: adds createFakeUser, createFakeRoom, createFakeSubscription, createFakeMessageWithAttachment and createFakeConversation.

Known differences from develop

None. The package's own copy of the item-list keyboard hook follows the app's current hook; the app's copy is untouched.

Issue(s)

Steps to test or reproduce

Walk the Components/MessageList stories (yarn workspace @rocket.chat/ui-message-list storybook) against the behaviors in docs/features/message-list/README.md. Each story is one behavior.

• Opening at the newest message, staying at the bottom while content grows, older and newer pages loading without moving the content.
• A jump lands on the message; the highlight lasts and clears.
• The new-messages and jump-to-latest buttons.
• Arrow keys between rows, including from a row kept mounted far from the viewport (it must move to the adjacent row).
• The threshold story: with 60 px, a viewer a few pixels off the bottom still follows new messages.
• LoadingStates, FirstPageLoading and FirstPageLoadingBelowTheSpace: the loaders are 32px high with develop's spinner, and the first page's spinner shows at the top.
• OlderPageOfTheSameDay and InfiniteOlderHistory: an older page does not move what is on screen, and the next page loads only when the top is near again.
• PagingWaitsForInput and PagingWaitsForInputOnAShortPage: no page loads until the first wheel, scroll key or pointer press in the list.
• SpaceAtTheEnds: the space above the first row and below the last one stays as messages arrive and the viewport resizes.
• OpensWhereItLands: switching rooms shows no frame of rows anywhere but where the list lands. Press Tab into the list within half a second of opening a room: the rows show, and so does the focus.
• FirstMessageStaysInSight: the first message of an empty conversation arrives under its header and nothing blinks.
• FloatingDate, FloatingDateNeverDoublesADay, FloatingDateBelowAnInset and FloatingDateFollowsTheInset: the date hides the divider it stands in for, is pushed up by the next divider, fades, rests below the inset, and moves at once when the inset changes.
• Reduced motion: the date bubble fade (checked by hand only, R51).

Further comments

Decisions to check

• Bottom threshold. How near the bottom counts as "at the bottom": (a) 1 px, as in the reference, listed as a known difference (recommended by the author of the spec); (b) the base's 60 px in the room and 20 px in the thread. Chosen: (b), as a bottomThreshold option on the list with a default of 1; parts 08 (room) and 09 (thread) of the stack pass 60 and 20. Reason: the base wins, and 1 px would stop following new messages for a viewer a few pixels off the bottom. If the reducer could not take it without breaking its invariants, the fallback was (a) with a changeset. Please check this.
• Pinned defects. D1 (an own message followed by another in the same update is not recognised) and D3 (a rejected onJumpToLatest leaves the list waiting for it and it later jumps to the bottom by itself) are recorded with skipped tests in message-list.md. D3 is fixed in part 09 of the stack.
• Held row. The row the list holds in view (a jump target, a restored message) may stay mounted while it is held (R65). The package's contributor guide and review checklist forbade rows kept mounted for UI state, and were reworded for it.
• The floating date's hold. It copies develop's rule: the date stays without fading while the divider it stands in for is above the top of the list and below the top of the window. So when the list sits low in the window, a divider just out of view, inside the window's top margin, keeps the date on screen (R52).
• Changesets for @rocket.chat/ui-message-list. This PR adds none for the private package; parts 08 and 09 of the stack do. The repo versions private packages (other private packages carry changesets), so 08 and 09 follow the repo, and 03 to 07 may need changesets too. Undecided.
• Unresolved: with a threshold of 60, a viewer scrolling up slowly still counts as at the bottom within the last 60 px, so a resize there brings the list back to the bottom (R16, R17, R80). Fix and feature commits sit above the docs and test commits: 34e9c872c98 above the test commits, and df00a650826 to a4a2aa4f0bb above the commit that marks the spec implemented; each of those updates the spec and plan with its change. In the plays, a paused load and the floating date's fade run in real time on purpose.

Not run

• The e2e suites, and the app in a browser: the list is not mounted in the app.
• @rocket.chat/mock-providers has no typecheck script; its build runs tsc.
• Checks ran on the branch tip only, not commit by commit.

🤖 Generated with Claude Code

[changeset-bot]

🦋 Changeset detected

Latest commit: a4a2aa4

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 18 packages

Name	Type
@rocket.chat/mock-providers	Minor
@rocket.chat/ui-client	Minor
@rocket.chat/meteor	Patch
@rocket.chat/fuselage-ui-kit	Patch
@rocket.chat/ui-account	Patch
@rocket.chat/ui-composer	Patch
@rocket.chat/ui-conference	Patch
@rocket.chat/ui-emoji-picker	Patch
@rocket.chat/ui-media	Patch
@rocket.chat/ui-message-list	Patch
@rocket.chat/ui-setup-wizard	Patch
@rocket.chat/ui-voip	Patch
@rocket.chat/gazzodown	Patch
@rocket.chat/ui-livekit	Patch
@rocket.chat/livechat	Patch
@rocket.chat/uikit-playground	Patch
@rocket.chat/core-typings	Patch
@rocket.chat/rest-typings	Patch

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

[coderabbitai]

Important

Draft PR not reviewed

Draft PRs are not automatically reviewed by default.

• Trigger a manual review

To automatically review draft PRs, update your CodeRabbit configuration:

reviews:
  auto_review:
    drafts: true

• Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

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

[dionisio-bot]

Looks like this PR is not ready to merge, because of the following issues:

• This PR is still a draft
• This PR is missing the 'stat: QA assured' label
• This PR is missing the required milestone or project

Please fix the issues and try again

If you have any trouble, please check the PR guidelines

[codecov]

Codecov Report

❌ Patch coverage is 69.32055% with 736 lines in your changes missing coverage. Please review.
✅ Project coverage is 70.48%. Comparing base (bb86c64) to head (a4a2aa4).

Additional details and impacted files

@@                     Coverage Diff                      @@
##           message-list/06-variants   #43728      +/-   ##
============================================================
- Coverage                     71.20%   70.48%   -0.73%     
============================================================
  Files                          5565     3938    -1627     
  Lines                        247439   216833   -30606     
  Branches                      46375    35714   -10661     
============================================================
- Hits                         176196   152826   -23370     
+ Misses                        66869    62434    -4435     
+ Partials                       4374     1573    -2801     

Flag	Coverage Δ
e2e	?
e2e-api	?
unit	70.48% <69.32%> (+0.49%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.