fix(omnichannel): wrap transfer comment to multiple lines (#26723)

[ShreyaRHipparagi]

Proposed changes

This PR fixes an issue where long omnichannel transfer comments are not properly wrapped to multiple lines, resulting in text bleeding out of the boundaries or being hidden behind ellipsis in the chat history.

I modified the SystemMessage component for livechat_transfer_history and ContactHistoryMessage for livechat-close to include word-break: break-word and white-space: pre-wrap, ensuring that comments explicitly wrap within the message constraints.

Issue(s)

Fixes #26723

Steps to test or reproduce

1. Start an omnichannel conversation.
2. Transfer it to another agent, leaving a very long text comment.
3. Observe the transferred message in the chat history. The text should now wrap to multiple lines correctly.
4. Also close the conversation with a long comment and observe that the close comment also neatly wraps to multiple lines.

Further comments

Tested locally by inspecting the updated components with React Fuselage components.

Summary by CodeRabbit

• Bug Fixes
  • Improved text rendering and word wrapping for system messages related to livechat transfer history and conversation closures. Messages now display properly with appropriate line breaks and whitespace handling.

[dionisio-bot]

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

• 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

[changeset-bot]

⚠️ No Changeset found

Latest commit: dca7d34

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

[CLAassistant]

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

[coderabbitai]

Walkthrough

The changes add CSS styling properties (word-break: break-word and white-space: pre-wrap) to MessageSystemBody components in two livechat message display locations to enable proper text wrapping for transfer comments that exceed line width.

Changes

Cohort / File(s)	Summary
Text Wrapping for Livechat Messages apps/meteor/client/components/message/variants/SystemMessage.tsx, apps/meteor/client/views/omnichannel/contactHistory/MessageList/ContactHistoryMessage.tsx	Added conditional CSS properties for text wrapping: word-break: break-word and style={ whiteSpace: 'pre-wrap' } to MessageSystemBody for livechat transfer history and close messages to prevent text overflow.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~5 minutes

Suggested labels

type: bug

🚥 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 pull request title accurately summarizes the main change: fixing omnichannel transfer comment wrapping to multiple lines, matching the primary objective of the changeset.
Linked Issues check	✅ Passed	The pull request successfully addresses the requirement from issue #26723 by adding CSS rules (word-break: break-word and white-space: pre-wrap) to ensure transfer and close comments wrap to multiple lines instead of overflowing or being truncated.
Out of Scope Changes check	✅ Passed	All changes are directly scoped to fixing the omnichannel transfer and close comment wrapping issue; no unrelated modifications are present in the SystemMessage or ContactHistoryMessage components.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

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

Tip

Try Coding Plans. Let us write the prompt for your AI agent so you can ship faster (with fewer bugs).
Share your feedback on Discord.

---

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.}

[cubic-dev-ai]

No issues found across 2 files

[coderabbitai]

🧹 Nitpick comments (1)

apps/meteor/client/views/omnichannel/contactHistory/MessageList/ContactHistoryMessage.tsx (1)

74-74: LGTM with optional formatting suggestion.

The styling fix correctly addresses text wrapping for livechat-close messages, consistent with the approach in SystemMessage.tsx. The line is quite long; consider splitting it for improved readability.

,

🧹 Optional: Split long line for readability

-						<MessageSystemBody title={message.msg} wordBreak='break-word' style={{ whiteSpace: 'pre-wrap' }}>{t('Conversation_closed', { comment: message.msg })}</MessageSystemBody>
+						<MessageSystemBody title={message.msg} wordBreak='break-word' style={{ whiteSpace: 'pre-wrap' }}>
+							{t('Conversation_closed', { comment: message.msg })}
+						</MessageSystemBody>

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In
`@apps/meteor/client/views/omnichannel/contactHistory/MessageList/ContactHistoryMessage.tsx`
at line 74, The MessageSystemBody JSX line is too long and should be split for
readability; refactor the render in ContactHistoryMessage.tsx by breaking the
props onto separate lines and placing the translated children on its own line
(identify the MessageSystemBody element and the props title, wordBreak, style
and the t('Conversation_closed', { comment: message.msg }) child) so the JSX is
easier to read while keeping the same props and behavior.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In
`@apps/meteor/client/views/omnichannel/contactHistory/MessageList/ContactHistoryMessage.tsx`:
- Line 74: The MessageSystemBody JSX line is too long and should be split for
readability; refactor the render in ContactHistoryMessage.tsx by breaking the
props onto separate lines and placing the translated children on its own line
(identify the MessageSystemBody element and the props title, wordBreak, style
and the t('Conversation_closed', { comment: message.msg }) child) so the JSX is
easier to read while keeping the same props and behavior.

---

ℹ️ Review info

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 5518503 and dca7d34.

📒 Files selected for processing (2)

• apps/meteor/client/components/message/variants/SystemMessage.tsx
• apps/meteor/client/views/omnichannel/contactHistory/MessageList/ContactHistoryMessage.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/message/variants/SystemMessage.tsx
• apps/meteor/client/views/omnichannel/contactHistory/MessageList/ContactHistoryMessage.tsx

🧠 Learnings (6)

📓 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.

📚 Learning: 2026-02-24T19:36:55.089Z

Learnt from: juliajforesti
Repo: RocketChat/Rocket.Chat PR: 38493
File: apps/meteor/tests/e2e/page-objects/fragments/home-content.ts:60-82
Timestamp: 2026-02-24T19:36:55.089Z
Learning: In RocketChat/Rocket.Chat e2e tests (apps/meteor/tests/e2e/page-objects/fragments/home-content.ts), thread message preview listitems do not have aria-roledescription="message", so lastThreadMessagePreview locator cannot be scoped to messageListItems (which filters for aria-roledescription="message"). It should remain scoped to page.getByRole('listitem') or mainMessageList.getByRole('listitem').

Applied to files:

• apps/meteor/client/components/message/variants/SystemMessage.tsx
• apps/meteor/client/views/omnichannel/contactHistory/MessageList/ContactHistoryMessage.tsx

📚 Learning: 2025-11-19T18:20:07.720Z

Learnt from: gabriellsh
Repo: RocketChat/Rocket.Chat PR: 37419
File: packages/i18n/src/locales/en.i18n.json:918-921
Timestamp: 2025-11-19T18:20:07.720Z
Learning: Repo: RocketChat/Rocket.Chat — i18n/formatting
Learning: This repository uses a custom message formatting parser in UI blocks/messages; do not assume standard Markdown rules. For keys like Call_ended_bold, Call_not_answered_bold, Call_failed_bold, and Call_transferred_bold in packages/i18n/src/locales/en.i18n.json, retain the existing single-asterisk emphasis unless maintainers request otherwise.

Applied to files:

• apps/meteor/client/components/message/variants/SystemMessage.tsx
• apps/meteor/client/views/omnichannel/contactHistory/MessageList/ContactHistoryMessage.tsx

📚 Learning: 2026-02-24T19:16:35.307Z

Learnt from: sampaiodiego
Repo: RocketChat/Rocket.Chat PR: 39003
File: apps/meteor/client/lib/chats/flows/sendMessage.ts:39-45
Timestamp: 2026-02-24T19:16:35.307Z
Learning: In apps/meteor/client/lib/chats/flows/sendMessage.ts, when sdk.call('sendMessage', ...) throws an error, the message is intentionally left with temp: true (not deleted or cleaned up) to support a future retry UI feature. This allows users to retry sending failed messages rather than losing them.

Applied to files:

• apps/meteor/client/components/message/variants/SystemMessage.tsx

📚 Learning: 2026-01-17T01:51:47.764Z

Learnt from: tassoevan
Repo: RocketChat/Rocket.Chat PR: 38219
File: packages/core-typings/src/cloud/Announcement.ts:5-6
Timestamp: 2026-01-17T01:51:47.764Z
Learning: In packages/core-typings/src/cloud/Announcement.ts, the AnnouncementSchema.createdBy field intentionally overrides IBannerSchema.createdBy (object with _id and optional username) with a string enum ['cloud', 'system'] to match existing runtime behavior. This is documented as technical debt with a FIXME comment at apps/meteor/app/cloud/server/functions/syncWorkspace/handleCommsSync.ts:53 and should not be flagged as an error until the runtime behavior is corrected.

Applied to files:

• apps/meteor/client/components/message/variants/SystemMessage.tsx

📚 Learning: 2025-12-18T15:18:31.688Z

Learnt from: gabriellsh
Repo: RocketChat/Rocket.Chat PR: 37773
File: apps/meteor/client/views/mediaCallHistory/MediaCallHistoryInternal.tsx:24-34
Timestamp: 2025-12-18T15:18:31.688Z
Learning: In apps/meteor/client/views/mediaCallHistory/MediaCallHistoryInternal.tsx, for internal call history items, the item.contactId is guaranteed to always match either the caller.id or callee.id in the call data, so the contact resolution in getContact will never result in undefined.

Applied to files:

• apps/meteor/client/views/omnichannel/contactHistory/MessageList/ContactHistoryMessage.tsx

🔇 Additional comments (1)

apps/meteor/client/components/message/variants/SystemMessage.tsx (1)

90-97: LGTM!

The conditional spread pattern correctly applies the text-wrapping styles only to livechat_transfer_history messages. The combination of wordBreak: 'break-word' and whiteSpace: 'pre-wrap' appropriately addresses the overflow issue while preserving existing accessibility attributes.