fix: file attachments not displayed on forwarded messages

[OtavioStasiak]

Proposed changes

When a message containing a file attachment (PDF, document, etc.) is forwarded to another room or
user, the file was not displayed on iOS and Android — only the text part of the message was
visible. The same forwarded message rendered correctly on web and desktop.

Root cause

A forwarded message wraps the original message as a nested attachment:

  attachments: [{
    author_name: 'rocket.cat', message_link: '...', text: '',
    attachments: [{ type: 'file', title: 'document.pdf', title_link: '...' }] // the real file
  }]

At the top level, Message.tsx renders both and over the same array. These use
complementary filters that partition attachments between them: handles quote-style
attachments (plain files, documents, text replies) and handles media
(image/audio/video/actions/nested). Together they cover everything.

But inside Reply.tsx (the component that renders the forwarded wrapper), the nested attachments
were passed only to . Its removeQuote filter keeps media only, so a nested plain
file/document — which has no image_url/audio_url/video_url — was silently dropped. Images survived
solely because they carry image_url, which is why the bug looked file-type dependent.

Issue(s)

Closes #7363
https://rocketchat.atlassian.net/browse/NATIVE-1231

How to test or reproduce

• Open the app;
• Send a attachment in a room;
• Forward the attachment to another room;

Screenshots

Before	After

Types of changes

• Bugfix (non-breaking change which fixes an issue)
• Improvement (non-breaking change which improves a current function)
• New feature (non-breaking change which adds functionality)
• Documentation update (if none of the other choices apply)

Checklist

• I have read the CONTRIBUTING doc
• I have signed the CLA
• Lint and unit tests pass locally with my changes
• I have added tests that prove my fix is effective or that my feature works (if applicable)
• I have added necessary documentation (if applicable)
• Any dependent changes have been merged and published in downstream modules

Further comments

Summary by CodeRabbit

• New Features

  • Replies now display quoted content inline for clearer context.
  • Message examples include additional forwarded/nested attachment scenarios (audio, video, files).

• Bug Fixes / Improvements

  • Attachment classification improved to better separate quoted text from media/actions, reducing misdisplayed or hidden attachments.

• Tests

  • Added tests validating attachment classification behavior.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: d19a9cf3-e04a-4d5b-83a8-f62f10a25345

📥 Commits

Reviewing files that changed from the base of the PR and between a420edc and c659980.

📒 Files selected for processing (3)

• app/containers/message/Components/Attachments/Attachments.tsx
• app/containers/message/Components/Attachments/Quote.tsx
• app/containers/message/Components/Attachments/Reply.tsx

🚧 Files skipped from review as they are similar to previous changes (1)

• app/containers/message/Components/Attachments/Quote.tsx

📜 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)

• GitHub Check: ESLint and Test / run-eslint-and-test

🧰 Additional context used

📓 Path-based instructions (5)

**/*.{js,ts,jsx,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

**/*.{js,ts,jsx,tsx}: Use descriptive names for functions, variables, and classes that clearly convey their purpose
Write comments that explain the 'why' behind code decisions, not the 'what'
Keep functions small and focused on a single responsibility
Use const by default, let when reassignment is needed, and avoid var
Prefer async/await over .then() chains for handling asynchronous operations
Use explicit error handling with try/catch blocks for async operations
Avoid deeply nested code; refactor complex logic into helper functions

Files:

• app/containers/message/Components/Attachments/Reply.tsx
• app/containers/message/Components/Attachments/Attachments.tsx

**/*.{ts,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

**/*.{ts,tsx}: Use TypeScript for type safety; add explicit type annotations to function parameters and return types
Prefer interfaces over type aliases for defining object shapes in TypeScript
Use enums for sets of related constants rather than magic strings or numbers

Use TypeScript with strict mode enabled

Files:

• app/containers/message/Components/Attachments/Reply.tsx
• app/containers/message/Components/Attachments/Attachments.tsx

**/*.{js,jsx,ts,tsx,json}

📄 CodeRabbit inference engine (CLAUDE.md)

Use Prettier formatting with tabs, single quotes, 130 character line width, no trailing commas, and avoid arrow function parentheses

Files:

• app/containers/message/Components/Attachments/Reply.tsx
• app/containers/message/Components/Attachments/Attachments.tsx

**/*.{js,jsx,ts,tsx}

📄 CodeRabbit inference engine (CLAUDE.md)

Enforce ESLint rules from @rocket.chat/eslint-config with React, React Native, TypeScript, and Jest plugins

Files:

• app/containers/message/Components/Attachments/Reply.tsx
• app/containers/message/Components/Attachments/Attachments.tsx

app/containers/**/*.{ts,tsx}

📄 CodeRabbit inference engine (CLAUDE.md)

Place reusable UI components in 'app/containers/' directory

Files:

• app/containers/message/Components/Attachments/Reply.tsx
• app/containers/message/Components/Attachments/Attachments.tsx

🧠 Learnings (1)

📚 Learning: 2026-04-30T17:07:51.020Z

Learnt from: diegolmello
Repo: RocketChat/Rocket.Chat.ReactNative PR: 7274
File: app/lib/services/voip/MediaCallEvents.ts:0-0
Timestamp: 2026-04-30T17:07:51.020Z
Learning: In this Rocket.Chat React Native codebase, the ESLint rule `no-void: error` is enforced. When you see a promise returned from an async call that is not awaited (a “floating promise”), do not silence it with the `void somePromise()` pattern. Instead, handle the promise explicitly by attaching `.catch(...)` (or otherwise awaiting/handling the error) so unhandled-rejection risks are addressed in a way that satisfies the existing ESLint configuration.

Applied to files:

• app/containers/message/Components/Attachments/Reply.tsx
• app/containers/message/Components/Attachments/Attachments.tsx

🔇 Additional comments (2)

app/containers/message/Components/Attachments/Attachments.tsx (1)

1-1: LGTM!

Also applies to: 14-14, 16-16, 22-22

app/containers/message/Components/Attachments/Reply.tsx (1)

2-2: LGTM!

Also applies to: 16-16, 103-103, 122-122, 159-159, 175-175, 208-208, 256-261

---

Walkthrough

Reply now renders Quote to display forwarded message attachments; attachment classification predicates were centralized into utils with tests; storybook entries added for nested forwarded audio, video, and double-forwarded file cases (normal and large-font).

Changes

Forwarded Message Quote Display

Layer / File(s)	Summary
Attachment predicates and tests app/containers/message/Components/Attachments/utils.ts, app/containers/message/Components/Attachments/utils.test.ts	Adds isQuoteAttachment and isContentAttachment predicates and unit tests that validate classification across attachment shapes.
Components updated to use predicates app/containers/message/Components/Attachments/Attachments.tsx, app/containers/message/Components/Attachments/Quote.tsx	Attachments and Quote now import and use the shared predicate helpers instead of local inline predicates.
Quote component integration in Reply app/containers/message/Components/Attachments/Reply.tsx	Reply imports Quote and renders it with attachment.attachments, getCustomEmoji, timeFormat, and showAttachment props before rendering Attachments.
Story test coverage for forwarded attachments app/containers/message/Message.stories.tsx	Story definitions expanded with forwarded message scenarios (nested audio, nested video, double-forwarded file) for both normal and large-font message story variants.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Suggested reviewers

• diegolmello

🚥 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 directly describes the main fix: file attachments in forwarded messages now display correctly on mobile platforms.
Linked Issues check	✅ Passed	All code changes align with issue #7363 requirements: fixes nested attachment filtering logic to display file attachments in forwarded messages on mobile.
Out of Scope Changes check	✅ Passed	All changes are directly scoped to fixing the forwarded attachment display issue via predicate refactoring and nested attachment rendering.
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.}

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.

ESLint install timed out. The project may have too many dependencies for the sandbox.

Warning

Review ran into problems

🔥 Problems

Errors were encountered while retrieving linked issues.

Errors (2)

• NATIVE-1231: Request failed with status code 401
• CF4E-4978: 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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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

[coderabbitai]

Actionable comments posted: 1

🤖 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 `@app/containers/message/Components/Attachments/utils.ts`:
- Line 11: The predicates drop attachments with collapsed: false because they
check collapsed by truthiness (e.g., if (file.collapsed) or !!file.collapsed);
change these checks in isContentAttachment (and the other predicate at the
second occurrence) to test for the presence of the boolean instead (e.g., typeof
file.collapsed === 'boolean' or file.collapsed !== undefined) so attachments
with collapsed: false are preserved and will reach the Attachments branch that
expects a boolean collapsed flag.

🪄 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: c09fb9de-dfb7-4975-b466-cfd6e2aad307

📥 Commits

Reviewing files that changed from the base of the PR and between 831d086 and a420edc.

⛔ Files ignored due to path filters (1)

• app/containers/message/__snapshots__/Message.test.tsx.snap is excluded by !**/*.snap

📒 Files selected for processing (4)

• app/containers/message/Components/Attachments/Attachments.tsx
• app/containers/message/Components/Attachments/Quote.tsx
• app/containers/message/Components/Attachments/utils.test.ts
• app/containers/message/Components/Attachments/utils.ts

📜 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). (2)

• GitHub Check: ESLint and Test / run-eslint-and-test
• GitHub Check: format

🧰 Additional context used

📓 Path-based instructions (4)

**/*.{js,ts,jsx,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

**/*.{js,ts,jsx,tsx}: Use descriptive names for functions, variables, and classes that clearly convey their purpose
Write comments that explain the 'why' behind code decisions, not the 'what'
Keep functions small and focused on a single responsibility
Use const by default, let when reassignment is needed, and avoid var
Prefer async/await over .then() chains for handling asynchronous operations
Use explicit error handling with try/catch blocks for async operations
Avoid deeply nested code; refactor complex logic into helper functions

Files:

• app/containers/message/Components/Attachments/utils.test.ts
• app/containers/message/Components/Attachments/Quote.tsx
• app/containers/message/Components/Attachments/Attachments.tsx
• app/containers/message/Components/Attachments/utils.ts

**/*.{ts,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

**/*.{ts,tsx}: Use TypeScript for type safety; add explicit type annotations to function parameters and return types
Prefer interfaces over type aliases for defining object shapes in TypeScript
Use enums for sets of related constants rather than magic strings or numbers

Use TypeScript with strict mode and baseUrl set to app/ for import resolution

Files:

• app/containers/message/Components/Attachments/utils.test.ts
• app/containers/message/Components/Attachments/Quote.tsx
• app/containers/message/Components/Attachments/Attachments.tsx
• app/containers/message/Components/Attachments/utils.ts

**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (CLAUDE.md)

**/*.{ts,tsx,js,jsx}: Use Prettier with tabs, single quotes, 130 char width, no trailing commas, arrow parens avoid, bracket same line
Use @rocket.chat/eslint-config base with React, React Native, TypeScript, Jest plugins

Files:

• app/containers/message/Components/Attachments/utils.test.ts
• app/containers/message/Components/Attachments/Quote.tsx
• app/containers/message/Components/Attachments/Attachments.tsx
• app/containers/message/Components/Attachments/utils.ts

app/containers/**/*.{ts,tsx}

📄 CodeRabbit inference engine (CLAUDE.md)

Reusable UI components should be placed in app/containers/ directory

Files:

• app/containers/message/Components/Attachments/utils.test.ts
• app/containers/message/Components/Attachments/Quote.tsx
• app/containers/message/Components/Attachments/Attachments.tsx
• app/containers/message/Components/Attachments/utils.ts

🧠 Learnings (1)

📚 Learning: 2026-04-30T17:07:51.020Z

Learnt from: diegolmello
Repo: RocketChat/Rocket.Chat.ReactNative PR: 7274
File: app/lib/services/voip/MediaCallEvents.ts:0-0
Timestamp: 2026-04-30T17:07:51.020Z
Learning: In this Rocket.Chat React Native codebase, the ESLint rule `no-void: error` is enforced. When you see a promise returned from an async call that is not awaited (a “floating promise”), do not silence it with the `void somePromise()` pattern. Instead, handle the promise explicitly by attaching `.catch(...)` (or otherwise awaiting/handling the error) so unhandled-rejection risks are addressed in a way that satisfies the existing ESLint configuration.

Applied to files:

• app/containers/message/Components/Attachments/utils.test.ts
• app/containers/message/Components/Attachments/Quote.tsx
• app/containers/message/Components/Attachments/Attachments.tsx
• app/containers/message/Components/Attachments/utils.ts

🔇 Additional comments (3)

app/containers/message/Components/Attachments/utils.test.ts (1)

4-56: LGTM!

app/containers/message/Components/Attachments/Attachments.tsx (1)

14-14: LGTM!

Also applies to: 22-22

app/containers/message/Components/Attachments/Quote.tsx (1)

10-10: LGTM!

Also applies to: 18-18