fix(livechat): wrap transfer comment in message body to prevent overflow(#26723)#39734
Open
rohitbansal2005 wants to merge 3 commits into
Open
fix(livechat): wrap transfer comment in message body to prevent overflow(#26723)#39734rohitbansal2005 wants to merge 3 commits into
rohitbansal2005 wants to merge 3 commits into
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 due to trivial changes (1)
📜 Recent 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)
WalkthroughAdds a new VS Code TypeScript SDK setting, adds Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes Suggested labels
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. 📝 Coding Plan
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 |
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
![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: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@apps/meteor/client/components/message/MessageContentBody.tsx`:
- Line 18: The MessageBody JSX in MessageContentBody.tsx currently passes style
before {...props}, allowing callers to fully override the wrapping rules; fix by
destructuring style out of props in the MessageContentBody component (e.g.,
const { style, ...rest } = props) and merge the default wrapping styles with the
incoming style (e.g., mergedStyle = { overflowWrap: 'anywhere', wordBreak:
'break-word', whiteSpace: 'normal', ...style }) then pass style={mergedStyle}
and {...rest} to <MessageBody> so the wrapping rules are preserved while still
honoring caller styles.
🪄 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: 18d0dc78-f703-424f-a31e-e9ca68025961
⛔ Files ignored due to path filters (2)
.yarn-install-last.logis excluded by!**/*.log.yarn-install.logis excluded by!**/*.log
📒 Files selected for processing (4)
.vscode/settings.jsonapps/meteor/client/components/TwoFactorModal/TwoFactorEmailModal.tsxapps/meteor/client/components/TwoFactorModal/TwoFactorTotpModal.tsxapps/meteor/client/components/message/MessageContentBody.tsx
📜 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:
apps/meteor/client/components/TwoFactorModal/TwoFactorEmailModal.tsxapps/meteor/client/components/TwoFactorModal/TwoFactorTotpModal.tsxapps/meteor/client/components/message/MessageContentBody.tsx
🧠 Learnings (5)
📓 Common learnings
Learnt from: ggazzo
Repo: RocketChat/Rocket.Chat PR: 35995
File: apps/meteor/app/api/server/v1/rooms.ts:1107-1112
Timestamp: 2026-02-23T17:53:18.785Z
Learning: In Rocket.Chat PR reviews, maintain strict scope boundaries—when a PR is focused on a specific endpoint (e.g., rooms.favorite), avoid reviewing or suggesting changes to other endpoints that were incidentally refactored (e.g., rooms.invite) unless explicitly requested by maintainers.
Learnt from: ahmed-n-abdeltwab
Repo: RocketChat/Rocket.Chat PR: 38974
File: apps/meteor/app/api/server/v1/im.ts:220-221
Timestamp: 2026-02-24T19:09:09.561Z
Learning: In RocketChat/Rocket.Chat OpenAPI migration PRs for apps/meteor/app/api/server/v1 endpoints, maintainers prefer to avoid any logic changes; style-only cleanups (like removing inline comments) may be deferred to follow-ups to keep scope tight.
Learnt from: smirk-dev
Repo: RocketChat/Rocket.Chat PR: 39625
File: apps/meteor/app/api/server/v1/push.ts:85-97
Timestamp: 2026-03-14T14:58:58.834Z
Learning: In RocketChat/Rocket.Chat, the `push.token` POST/DELETE endpoints in `apps/meteor/app/api/server/v1/push.ts` were already migrated to the chained router API pattern on `develop` prior to PR `#39625`. `cleanTokenResult` (which strips `authToken` and returns `PushTokenResult`) and `isPushTokenPOSTProps`/`isPushTokenDELETEProps` validators already exist on `develop`. PR `#39625` only migrates `push.get` and `push.info` to the chained pattern. Do not flag `cleanTokenResult` or `PushTokenResult` as newly introduced behavior-breaking changes when reviewing this PR.
📚 Learning: 2026-03-18T16:08:11.691Z
Learnt from: juliajforesti
Repo: RocketChat/Rocket.Chat PR: 39590
File: apps/meteor/client/views/omnichannel/contactInfo/EditContactInfo.tsx:97-99
Timestamp: 2026-03-18T16:08:11.691Z
Learning: In `apps/meteor/client/views/omnichannel/contactInfo/EditContactInfo.tsx`, `reValidateMode: 'onBlur'` is intentionally used (not 'onChange') because the `validateEmailFormat` and `validatePhone` functions are async and call the `checkExistenceEndpoint` API to check for duplicates. Using 'onChange' would trigger excessive network requests on every keystroke. The combination of `mode: 'onSubmit'` with `reValidateMode: 'onBlur'` is a deliberate design decision to minimize API calls while still providing revalidation feedback.
Applied to files:
apps/meteor/client/components/TwoFactorModal/TwoFactorEmailModal.tsxapps/meteor/client/components/TwoFactorModal/TwoFactorTotpModal.tsx
📚 Learning: 2026-03-03T11:11:48.541Z
Learnt from: ahmed-n-abdeltwab
Repo: RocketChat/Rocket.Chat PR: 39230
File: apps/meteor/app/api/server/v1/chat.ts:214-222
Timestamp: 2026-03-03T11:11:48.541Z
Learning: In apps/meteor/server/lib/moderation/reportMessage.ts, the reportMessage function validates that description is not empty or whitespace-only with `if (!description.trim())`. When migrating the chat.reportMessage endpoint to OpenAPI, adding minLength validation to the schema preserves this existing behavior.
Applied to files:
apps/meteor/client/components/message/MessageContentBody.tsx
📚 Learning: 2026-03-15T14:31:28.969Z
Learnt from: amitb0ra
Repo: RocketChat/Rocket.Chat PR: 39647
File: apps/meteor/app/api/server/v1/users.ts:710-757
Timestamp: 2026-03-15T14:31:28.969Z
Learning: In RocketChat/Rocket.Chat, the `UserCreateParamsPOST` type in `apps/meteor/app/api/server/v1/users.ts` (migrated from `packages/rest-typings/src/v1/users/UserCreateParamsPOST.ts`) intentionally has `fields: string` (non-optional) and `settings?: IUserSettings` without a corresponding AJV schema entry. This is a pre-existing divergence carried over verbatim from the original rest-typings source (PR `#39647`). Do not flag this type/schema misalignment during the OpenAPI migration review — it is tracked as a separate follow-up fix.
Applied to files:
.vscode/settings.json
📚 Learning: 2025-11-24T17:08:17.065Z
Learnt from: CR
Repo: RocketChat/Rocket.Chat PR: 0
File: .cursor/rules/playwright.mdc:0-0
Timestamp: 2025-11-24T17:08:17.065Z
Learning: Applies to **/*.{ts,tsx,js} : Write concise, technical TypeScript/JavaScript with accurate typing in Playwright tests
Applied to files:
.vscode/settings.json
🔇 Additional comments (3)
.vscode/settings.json (1)
20-20:⚠️ Potential issue | 🟡 MinorRemove the invalid
"js/ts.tsdk.path"VS Code setting.The setting name
"js/ts.tsdk.path"is not a valid current VS Code configuration option. The correct TypeScript SDK setting is"typescript.tsdk"(already present at line 2). The added setting at line 20 is either deprecated or archived and should be removed.⛔ Skipped due to learnings
Learnt from: amitb0ra Repo: RocketChat/Rocket.Chat PR: 39647 File: apps/meteor/app/api/server/v1/users.ts:710-757 Timestamp: 2026-03-15T14:31:28.969Z Learning: In RocketChat/Rocket.Chat, the `UserCreateParamsPOST` type in `apps/meteor/app/api/server/v1/users.ts` (migrated from `packages/rest-typings/src/v1/users/UserCreateParamsPOST.ts`) intentionally has `fields: string` (non-optional) and `settings?: IUserSettings` without a corresponding AJV schema entry. This is a pre-existing divergence carried over verbatim from the original rest-typings source (PR `#39647`). Do not flag this type/schema misalignment during the OpenAPI migration review — it is tracked as a separate follow-up fix.Learnt from: KevLehman Repo: RocketChat/Rocket.Chat PR: 37091 File: ee/packages/abac/jest.config.ts:4-7 Timestamp: 2025-12-10T21:00:54.909Z Learning: Rocket.Chat monorepo: Jest testMatch pattern '<rootDir>/src/**/*.spec.(ts|js|mjs)' is valid in this repo and used across multiple packages (e.g., packages/tools, ee/packages/omnichannel-services). Do not flag it as invalid in future reviews.Learnt from: CR Repo: RocketChat/Rocket.Chat PR: 0 File: .cursor/rules/playwright.mdc:0-0 Timestamp: 2025-11-24T17:08:17.065Z Learning: Applies to **/*.{ts,tsx,js} : Avoid code comments in the implementationLearnt from: CR Repo: RocketChat/Rocket.Chat PR: 0 File: .cursor/rules/playwright.mdc:0-0 Timestamp: 2025-11-24T17:08:17.065Z Learning: Applies to **/*.{ts,tsx,js} : Write concise, technical TypeScript/JavaScript with accurate typing in Playwright testsapps/meteor/client/components/TwoFactorModal/TwoFactorEmailModal.tsx (1)
68-68: Good UX enhancement for email 2FA input.The addition of
autoComplete='one-time-code'enables browsers and password managers to autofill the OTP from SMS/email, andhtmlSize={6}provides an appropriate visual hint for the expected 6-digit code length.apps/meteor/client/components/TwoFactorModal/TwoFactorTotpModal.tsx (1)
52-52: Good UX enhancement for TOTP input.The addition of
autoComplete='one-time-code'andhtmlSize={6}aligns with the email 2FA modal changes and improves the user experience by enabling autofill support and providing a visual hint for the typical 6-digit TOTP code length.
|
|
||
| return ( | ||
| <MessageBody role='document' aria-roledescription={t('message_body')} dir='auto' {...props}> | ||
| <MessageBody role='document' aria-roledescription={t('message_body')} dir='auto' style={{ overflowWrap: 'anywhere', wordBreak: 'break-word', whiteSpace: 'normal' }} {...props}> |
Contributor
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Verify if call sites pass `style` to MessageContentBody (which currently overrides wrapping rules).
rg -nP --type=tsx -C2 '<MessageContentBody\b[^>]*\bstyle='Repository: RocketChat/Rocket.Chat
Length of output: 93
🏁 Script executed:
#!/bin/bash
# 1. Check the component implementation
echo "=== Component Implementation ==="
cat -n apps/meteor/client/components/message/MessageContentBody.tsx | head -50
echo -e "\n=== Search for MessageContentBody usage with style prop ==="
# Try broader search without file type specification
rg -nC2 '<MessageContentBody\b[^>]*\bstyle=' --type-listRepository: RocketChat/Rocket.Chat
Length of output: 1870
🏁 Script executed:
#!/bin/bash
# Search for all usages of MessageContentBody component
rg '<MessageContentBody' -A3 -B1 | head -100Repository: RocketChat/Rocket.Chat
Length of output: 6843
🏁 Script executed:
#!/bin/bash
# Check the full MessageContentBody usage in RoomMessageContent.tsx
rg '<MessageContentBody' -A10 apps/meteor/client/components/message/variants/room/RoomMessageContent.tsxRepository: RocketChat/Rocket.Chat
Length of output: 324
🏁 Script executed:
#!/bin/bash
# Verify: Does any call site actually pass a 'style' prop to MessageContentBody?
rg 'MessageContentBody' -A5 | grep -E '(MessageContentBody|style=)' | head -50Repository: RocketChat/Rocket.Chat
Length of output: 4979
Prevent style prop override at call sites by merging instead of replacing (Line 18).
The current prop order (style={...} {...props}) means any caller passing a style prop would completely override the wrapping rules. While no current call sites do this, the API is exposed. Extract style from props and merge it to ensure wrapping rules are always preserved:
-const MessageContentBody = ({ mentions, channels, md, searchText, ...props }: MessageContentBodyProps) => {
+const MessageContentBody = ({ mentions, channels, md, searchText, style, ...props }: MessageContentBodyProps) => {
const { t } = useTranslation();
return (
- <MessageBody role='document' aria-roledescription={t('message_body')} dir='auto' style={{ overflowWrap: 'anywhere', wordBreak: 'break-word', whiteSpace: 'normal' }} {...props}>
+ <MessageBody
+ role='document'
+ aria-roledescription={t('message_body')}
+ dir='auto'
+ {...props}
+ style={{ ...style, overflowWrap: 'anywhere', wordBreak: 'break-word', whiteSpace: 'normal' }}
+ >🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@apps/meteor/client/components/message/MessageContentBody.tsx` at line 18, The
MessageBody JSX in MessageContentBody.tsx currently passes style before
{...props}, allowing callers to fully override the wrapping rules; fix by
destructuring style out of props in the MessageContentBody component (e.g.,
const { style, ...rest } = props) and merge the default wrapping styles with the
incoming style (e.g., mergedStyle = { overflowWrap: 'anywhere', wordBreak:
'break-word', whiteSpace: 'normal', ...style }) then pass style={mergedStyle}
and {...rest} to <MessageBody> so the wrapping rules are preserved while still
honoring caller styles.
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
1 participant
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.
Summary: Fixes an issue where long omnichannel transfer comments were rendered on a single line and clipped. Adds safe wrapping rules to the message body so transfer comments (and other long/no-space strings) break into multiple lines.
Files changed: apps\meteor\client\components\message\MessageContentBody.tsx
Proposed changes
Rationale: some transfer comments contain long strings (no spaces) or long sentences that previously overflowed the message container causing the text to be hidden.
Issue(s)
Fixes: #26723
Steps to test or reproduce
1.Open an omnichannel conversation as Agent A.
2.Transfer the conversation to Agent B and include a long comment (long sentence or very long no-space string).
3.Switch to Agent B (or open the chat on Agent B’s side) and observe the transfer message:
Summary by CodeRabbit
Bug Fixes
Improvements