chore(real time composer): refactor messageboxes to use same base and sync feats with develop - #41374
Merged
MartinSchoeler merged 5 commits intoJul 20, 2026
Conversation
Contributor
|
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 |
|
Contributor
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
📜 Recent review details⏰ Context from checks skipped due to timeout. (3)
|
| Layer / File(s) | Summary |
|---|---|
Composer API and draft lifecycle apps/meteor/app/ui-message/client/messageBox/createRichTextComposerAPI.ts |
The composer API accepts caller-provided draft persistence and initial content, applies quote-chain limits, and removes input listeners during release. |
Composer input helpers apps/meteor/client/views/room/composer/messageBox/messageBoxHelpers.ts, apps/meteor/client/views/room/composer/messageBox/wrapSelection.ts |
Formatting shortcuts, clipboard image extraction, and rich-text selection wrapping are provided as shared helpers. |
Shared message box rendering apps/meteor/client/views/room/composer/messageBox/MessageBoxBase.tsx |
A shared component renders replies, previews, hints, recorders, composer controls, attachments, and send or join actions. |
MessageBox integration apps/meteor/client/views/room/composer/messageBox/MessageBox.tsx |
MessageBox delegates rendering to MessageBoxBase and routes pasted image files through the optional upload callback or internal uploader. |
Rich-text composer integration apps/meteor/client/views/room/composer/messageBox/RichTextMessageBox.tsx |
RichTextMessageBox integrates room-scoped drafts, quote limits, lifecycle cleanup, upload-state gating, editing reset behavior, emoji insertion, and rich-text input handlers. |
Estimated code review effort: 4 (Complex) | ~45 minutes
Sequence Diagram(s)
sequenceDiagram
participant User
participant RichTextMessageBox
participant MessageBoxBase
participant createRichTextComposerAPI
participant useDraft
participant handleUploadFiles
User->>RichTextMessageBox: type, paste image, or submit
RichTextMessageBox->>useDraft: load or persist room draft
RichTextMessageBox->>createRichTextComposerAPI: initialize composer with draft and quote limit
RichTextMessageBox->>MessageBoxBase: pass composer, input, files, and action state
User->>RichTextMessageBox: paste clipboard image
RichTextMessageBox->>handleUploadFiles: upload extracted image files
User->>MessageBoxBase: activate send or join action
MessageBoxBase->>RichTextMessageBox: invoke onSend or onJoin
Possibly related PRs
- RocketChat/Rocket.Chat#41212: Both changes update the
MessageBoxPropscontract andonUploadFileshandling. - RocketChat/Rocket.Chat#41286: Both changes update rich-text composer persistence, quote-chain handling, input events, and release lifecycle wiring.
- RocketChat/Rocket.Chat#41355: Both changes integrate the message composer with draft persistence and thread-scoped draft state.
Suggested labels: type: feature
🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
| Check name | Status | Explanation |
|---|---|---|
| Description Check | ✅ Passed | Check skipped - CodeRabbit’s high-level summary is enabled. |
| Title check | ✅ Passed | The title matches the main change: message boxes were refactored to a shared base and composer features were synced with develop. |
| 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. |
Warning
Review ran into problems
🔥 Problems
Errors were encountered while retrieving linked issues.
Errors (2)
- RTC-5: Request failed with status code 401
- RTC-50: Request failed with status code 401
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 help to get the list of available commands.
MartinSchoeler
force-pushed
the
poc/real-time-composer
branch
from
July 14, 2026 18:32
f79f20b to
fe2f3c2
Compare
Codecov Report❌ Patch coverage is Additional details and impacted files@@ Coverage Diff @@
## poc/real-time-composer #41374 +/- ##
==========================================================
- Coverage 68.11% 68.04% -0.07%
==========================================================
Files 3979 3979
Lines 155833 155718 -115
Branches 28063 28004 -59
==========================================================
- Hits 106142 105955 -187
- Misses 44939 45021 +82
+ Partials 4752 4742 -10
Flags with carried forward coverage won't be shown. Click here to find out more. 🚀 New features to boost your workflow:
|
MartinSchoeler
force-pushed
the
poc/real-time-composer
branch
from
July 15, 2026 12:49
fe2f3c2 to
6eda512
Compare
MartinSchoeler
force-pushed
the
chore/real-time-composer-msgbox-split
branch
from
July 15, 2026 14:23
9e5147a to
0e1e773
Compare
MartinSchoeler
force-pushed
the
poc/real-time-composer
branch
from
July 15, 2026 14:25
6eda512 to
7021e91
Compare
MartinSchoeler
force-pushed
the
chore/real-time-composer-msgbox-split
branch
2 times, most recently
from
July 15, 2026 17:19
99f2b5a to
76e90ff
Compare
MartinSchoeler
changed the base branch from
poc/real-time-composer
to
feat-b/real-time-refactor
July 15, 2026 17:19
MartinSchoeler
changed the title
Base automatically changed from
feat-b/real-time-refactor
to
poc/real-time-composer
July 16, 2026 19:01
MartinSchoeler
force-pushed
the
chore/real-time-composer-msgbox-split
branch
from
July 16, 2026 19:24
76e90ff to
77135a1
Compare
coderabbitai
Bot
added
the
type: feature
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 5
🧹 Nitpick comments (3)
apps/meteor/client/views/room/composer/messageBox/RichTextMessageBox.tsx (1)
164-164: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winRemove the added implementation comments.
Prefer self-explanatory names or extracted helpers; track the parser TODO outside implementation code.
As per coding guidelines, “Avoid code comments in the implementation.”
Also applies to: 249-251, 281-281, 290-290
🤖 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 `@apps/meteor/client/views/room/composer/messageBox/RichTextMessageBox.tsx` at line 164, Remove the added implementation comments in RichTextMessageBox, including the comments around the room-change raw markdown state update and the referenced locations near lines 249–251, 281, and 290. Keep the surrounding logic unchanged and track any parser TODO outside the implementation code.Source: Coding guidelines
apps/meteor/client/views/room/composer/messageBox/MessageBoxBase.tsx (2)
104-109: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winRemove the newly added implementation comments.
apps/meteor/client/views/room/composer/messageBox/MessageBoxBase.tsx#L104-L109: express the preview condition through a named value or helper.apps/meteor/client/views/room/composer/messageBox/messageBoxHelpers.ts#L33-L35: rely on thepreventDefaultbranch and function naming.apps/meteor/client/views/room/composer/messageBox/wrapSelection.ts#L69-L79: rely on the rich-text handler name and named comparison predicate.As per coding guidelines: “Avoid code comments in the implementation.”
🤖 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 `@apps/meteor/client/views/room/composer/messageBox/MessageBoxBase.tsx` around lines 104 - 109, Remove the implementation comments at MessageBoxBase.tsx lines 104-109, messageBoxHelpers.ts lines 33-35, and wrapSelection.ts lines 69-79. In MessageBoxBase, express the preview condition through a named value or helper; in messageBoxHelpers, rely on the preventDefault branch and function naming; and in wrapSelection, rely on the rich-text handler name and a named comparison predicate.Source: Coding guidelines
113-114: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winReplace the
anyescape hatches with explicit contracts.
apps/meteor/client/views/room/composer/messageBox/MessageBoxBase.tsx#L113-L114: narrow the preview option or alignuseComposerBoxPopupandComposerBoxPopupPreviewprop types instead of castingitemsandfocused.apps/meteor/client/views/room/composer/messageBox/messageBoxHelpers.ts#L9-L10: type the stable fallback as the actual formatter snapshot type rather thanany[].As per coding guidelines: “Write concise, technical TypeScript/JavaScript with accurate typing.”
🤖 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 `@apps/meteor/client/views/room/composer/messageBox/MessageBoxBase.tsx` around lines 113 - 114, Replace the any casts passed to ComposerBoxPopupPreview in MessageBoxBase.tsx by narrowing the preview option or aligning useComposerBoxPopup with the component’s item and focused prop types; in messageBoxHelpers.ts, type the stable fallback using the actual formatter snapshot type instead of any[].Source: Coding guidelines
🤖 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.
Inline comments:
In `@apps/meteor/client/views/room/composer/messageBox/MessageBox.tsx`:
- Line 47: Update the paste handling in MessageBox so images are still uploaded
when onUploadFiles is undefined: preserve the existing native fallback behavior
instead of preventing the paste, and only invoke the callback and prevent the
default event when the callback is available. Apply this consistently to the
related handlers around the referenced upload logic.
- Around line 401-404: Update the MessageBox component’s Join button wiring to
invoke joinMutation.mutate or mutateAsync through its callback instead of
passing onJoin directly. Keep the existing join behavior and ensure
joinMutation.isPending controls the button while the join request is active.
In `@apps/meteor/client/views/room/composer/messageBox/RichTextMessageBox.tsx`:
- Around line 191-208: Update callbackRef to track the composer API instance
created by this component, and during node === null cleanup call
chat.setComposerAPI() only when chat.composer matches that tracked instance.
Preserve the existing registration skip for an already-owned chat.composer and
ensure this component’s cleanup cannot clear another rich-text composer’s API.
- Around line 161-168: Update useDraft so its initial-value ref is refreshed
whenever the derived storageKey changes, ensuring initialValue reflects the
current room or thread draft after navigation. Preserve the existing draft
persistence behavior while resetting the stored initial value for each new
storage key.
- Around line 505-508: Update the Join action wiring in RichTextMessageBox so
onJoin invokes the joinMutation rather than bypassing it. Preserve the existing
join behavior while ensuring joinMutation.isPending reflects the operation and
disables repeated Join clicks.
---
Nitpick comments:
In `@apps/meteor/client/views/room/composer/messageBox/MessageBoxBase.tsx`:
- Around line 104-109: Remove the implementation comments at MessageBoxBase.tsx
lines 104-109, messageBoxHelpers.ts lines 33-35, and wrapSelection.ts lines
69-79. In MessageBoxBase, express the preview condition through a named value or
helper; in messageBoxHelpers, rely on the preventDefault branch and function
naming; and in wrapSelection, rely on the rich-text handler name and a named
comparison predicate.
- Around line 113-114: Replace the any casts passed to ComposerBoxPopupPreview
in MessageBoxBase.tsx by narrowing the preview option or aligning
useComposerBoxPopup with the component’s item and focused prop types; in
messageBoxHelpers.ts, type the stable fallback using the actual formatter
snapshot type instead of any[].
In `@apps/meteor/client/views/room/composer/messageBox/RichTextMessageBox.tsx`:
- Line 164: Remove the added implementation comments in RichTextMessageBox,
including the comments around the room-change raw markdown state update and the
referenced locations near lines 249–251, 281, and 290. Keep the surrounding
logic unchanged and track any parser TODO outside the implementation code.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: cb1693a4-b833-476b-8fc3-5f2aa78b9d7d
📒 Files selected for processing (6)
apps/meteor/app/ui-message/client/messageBox/createRichTextComposerAPI.tsapps/meteor/client/views/room/composer/messageBox/MessageBox.tsxapps/meteor/client/views/room/composer/messageBox/MessageBoxBase.tsxapps/meteor/client/views/room/composer/messageBox/RichTextMessageBox.tsxapps/meteor/client/views/room/composer/messageBox/messageBoxHelpers.tsapps/meteor/client/views/room/composer/messageBox/wrapSelection.ts
📜 Review details
🧰 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:
apps/meteor/client/views/room/composer/messageBox/wrapSelection.tsapps/meteor/client/views/room/composer/messageBox/messageBoxHelpers.tsapps/meteor/app/ui-message/client/messageBox/createRichTextComposerAPI.tsapps/meteor/client/views/room/composer/messageBox/MessageBoxBase.tsxapps/meteor/client/views/room/composer/messageBox/MessageBox.tsxapps/meteor/client/views/room/composer/messageBox/RichTextMessageBox.tsx
🧠 Learnings (6)
📚 Learning: 2026-02-10T16:32:42.586Z
Learnt from: tassoevan
Repo: RocketChat/Rocket.Chat PR: 38528
File: apps/meteor/client/startup/roles.ts:14-14
Timestamp: 2026-02-10T16:32:42.586Z
Learning: In Rocket.Chat's Meteor client code, DDP streams use EJSON and Date fields arrive as Date objects; do not manually construct new Date() in stream handlers (for example, in sdk.stream()). Only REST API responses return plain JSON where dates are strings, so implement explicit conversion there if needed. Apply this guidance to all TypeScript files under apps/meteor/client to ensure consistent date handling in DDP streams and REST responses.
Applied to files:
apps/meteor/client/views/room/composer/messageBox/wrapSelection.tsapps/meteor/client/views/room/composer/messageBox/messageBoxHelpers.ts
📚 Learning: 2026-05-11T20:30:35.265Z
Learnt from: tassoevan
Repo: RocketChat/Rocket.Chat PR: 40480
File: apps/meteor/client/meteor/startup/accounts.ts:59-61
Timestamp: 2026-05-11T20:30:35.265Z
Learning: In Rocket.Chat’s Meteor client code, when calling `dispatchToastMessage` with `{ type: 'error' }`, pass the raw caught error object as `message` without manual normalization. `dispatchToastMessage` is designed to accept `message: unknown` for error toasts, so avoid converting errors to strings (e.g., `String(error)`) or extracting `error.message` before passing them.
Applied to files:
apps/meteor/client/views/room/composer/messageBox/wrapSelection.tsapps/meteor/client/views/room/composer/messageBox/messageBoxHelpers.ts
📚 Learning: 2026-02-26T19:25:44.063Z
Learnt from: gabriellsh
Repo: RocketChat/Rocket.Chat PR: 38778
File: packages/ui-voip/src/providers/useMediaSession.ts:192-192
Timestamp: 2026-02-26T19:25:44.063Z
Learning: In the Rocket.Chat repository, do not reference Biome lint rules in code review feedback. Biome is not used even if biome.json exists; only reference Biome rules if there is explicit, project-wide usage documented. For TypeScript files, review lint implications without Biome guidance unless the project enables Biome rules.
Applied to files:
apps/meteor/client/views/room/composer/messageBox/wrapSelection.tsapps/meteor/client/views/room/composer/messageBox/messageBoxHelpers.tsapps/meteor/app/ui-message/client/messageBox/createRichTextComposerAPI.ts
📚 Learning: 2026-02-26T19:25:44.063Z
Learnt from: gabriellsh
Repo: RocketChat/Rocket.Chat PR: 38778
File: packages/ui-voip/src/providers/useMediaSession.ts:192-192
Timestamp: 2026-02-26T19:25:44.063Z
Learning: In this repository (RocketChat/Rocket.Chat), Biome lint rules are not used even if a biome.json exists. When reviewing TypeScript files (e.g., packages/ui-voip/src/providers/useMediaSession.ts), ensure lint suggestions do not reference Biome-specific rules. Rely on general ESLint/TypeScript lint rules and project conventions instead.
Applied to files:
apps/meteor/client/views/room/composer/messageBox/wrapSelection.tsapps/meteor/client/views/room/composer/messageBox/messageBoxHelpers.tsapps/meteor/app/ui-message/client/messageBox/createRichTextComposerAPI.ts
📚 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:
apps/meteor/client/views/room/composer/messageBox/wrapSelection.tsapps/meteor/client/views/room/composer/messageBox/messageBoxHelpers.tsapps/meteor/app/ui-message/client/messageBox/createRichTextComposerAPI.tsapps/meteor/client/views/room/composer/messageBox/MessageBoxBase.tsxapps/meteor/client/views/room/composer/messageBox/MessageBox.tsxapps/meteor/client/views/room/composer/messageBox/RichTextMessageBox.tsx
📚 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:
apps/meteor/client/views/room/composer/messageBox/MessageBoxBase.tsxapps/meteor/client/views/room/composer/messageBox/MessageBox.tsxapps/meteor/client/views/room/composer/messageBox/RichTextMessageBox.tsx
🔇 Additional comments (7)
apps/meteor/app/ui-message/client/messageBox/createRichTextComposerAPI.ts (1)
6-15: LGTM!Also applies to: 54-66, 186-189
apps/meteor/client/views/room/composer/messageBox/RichTextMessageBox.tsx (2)
4-40: LGTM!Also applies to: 73-99, 211-248, 296-316, 429-479, 481-504, 509-533
107-107: 🎯 Functional CorrectnessNo default cast needed here.
useSetting('Message_QuoteChainLimit', 2)already returnsnumber, so this does not violatecreateRichTextComposerAPI’s contract.> Likely an incorrect or invalid review comment.apps/meteor/client/views/room/composer/messageBox/messageBoxHelpers.ts (1)
1-8: LGTM!Also applies to: 12-33, 35-75
apps/meteor/client/views/room/composer/messageBox/wrapSelection.ts (1)
1-1: LGTM!Also applies to: 70-78, 80-103
apps/meteor/client/views/room/composer/messageBox/MessageBoxBase.tsx (1)
1-103: LGTM!Also applies to: 110-112, 115-184
apps/meteor/client/views/room/composer/messageBox/MessageBox.tsx (1)
4-46: LGTM!Also applies to: 48-64, 380-400, 405-421
MartinSchoeler
marked this pull request as ready for review
July 17, 2026 19:49
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
All reported issues were addressed across 6 files
Reply with feedback, questions, or to request a fix.
Re-trigger cubic
cardoso
approved these changes
Jul 20, 2026
MartinSchoeler
merged commit Jul 20, 2026
c30ea7d
into
poc/real-time-composer
84 of 87 checks passed
MartinSchoeler
added a commit
that referenced
this pull request
Jul 22, 2026
… sync feats with develop (#41374)
MartinSchoeler
added a commit
that referenced
this pull request
Jul 22, 2026
… sync feats with develop (#41374)
MartinSchoeler
added a commit
that referenced
this pull request
Jul 23, 2026
… sync feats with develop (#41374)
MartinSchoeler
added a commit
that referenced
this pull request
Jul 27, 2026
… sync feats with develop (#41374)
This was referenced Jul 28, 2026
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
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.
Proposed changes (including videos or screenshots)
Stops the code duplication at RichTextMessageBox by using a shared base for the message boxes.
Also syncs the realtime composer features with the ones in develop (multiple file uploads)
Issue(s)
RTC-5
RTC-50
Steps to test or reproduce
Further comments
Summary by CodeRabbit