fix: show timestamp on system messages

[deepak0x]

System messages (user added, user removed, room name changed, etc.) don't display a timestamp on mobile, even though the web client shows one. This is because the isInfo rendering path in Message.tsx takes an early return that skips the MessageTime component entirely. Regular messages get their timestamp through the User component header, but info messages never reach that code path.

Added <MessageTime> to the info message block so system messages show their timestamp alongside the message text.

Issue(s)

Closes #3190

How to test or reproduce

1. Open any channel
2. Perform actions that generate system messages (add a user, remove a user, change room topic, etc.)
3. Before fix: system messages show no timestamp
4. After fix: system messages display their timestamp

Screenshots

N/A — will add if requested.

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

Summary by CodeRabbit

• Bug Fixes
  • Fixed timestamps not displaying in certain message types, improving message readability and accessibility in information and special message contexts.

[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: ffe72e1c-0293-4ec9-ab1a-41c52f8b75b2

📥 Commits

Reviewing files that changed from the base of the PR and between e3bb5e8 and e872243.

📒 Files selected for processing (1)

• app/containers/message/Message.tsx

📜 Recent review details

🧰 Additional context used

📓 Path-based instructions (5)

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

📄 CodeRabbit inference engine (CLAUDE.md)

Configure Prettier with tabs, single quotes, 130 character width, no trailing commas, arrow parens avoid, and bracket same line

Files:

• app/containers/message/Message.tsx

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

📄 CodeRabbit inference engine (CLAUDE.md)

Use ESLint with @rocket.chat/eslint-config base configuration including React, React Native, TypeScript, and Jest plugins

Files:

• app/containers/message/Message.tsx

**/*.{ts,tsx}

📄 CodeRabbit inference engine (CLAUDE.md)

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

**/*.{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

Files:

• app/containers/message/Message.tsx

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

📄 CodeRabbit inference engine (CLAUDE.md)

Place reusable UI components in app/containers/ directory

Files:

• app/containers/message/Message.tsx

**/*.{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/Message.tsx

🔇 Additional comments (1)

app/containers/message/Message.tsx (1)

174-174: Good fix: info messages now render timestamps.

Line 174 correctly adds MessageTime to the isInfo path, which directly addresses the missing system-message timestamp issue without impacting other message render paths.

---

Walkthrough

Added rendering of the MessageTime component within the accessibility-focused layout path for info messages (system messages) in the Message component, enabling display of timestamps for system messages on mobile platforms.

Changes

Cohort / File(s)	Summary
Message Component Update app/containers/message/Message.tsx	Added conditional rendering of <MessageTime /> component for info messages within the existing thread/sequential/info/ignored message branch to display timestamps for system messages.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 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 title accurately summarizes the main change: adding timestamp display to system messages in the mobile app.
Linked Issues check	✅ Passed	The PR change directly addresses issue #3190 by adding MessageTime rendering to info messages, ensuring system messages display timestamps.
Out of Scope Changes check	✅ Passed	The single-line change is narrowly scoped to the specific issue: adding MessageTime to the info message rendering path with no extraneous modifications.
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.}

---

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