fix: quote image not loading

[OtavioStasiak]

Proposed changes

Fix quote image not loading and message quote with image not rendering as expected.

Issue(s)

https://rocketchat.atlassian.net/browse/SUP-879

How to test or reproduce

• Open the app;
• Navigate to room;
• Make a post on postman to chat.sendMessage with the object;

{
  "message": {
    "rid": "68dd5a2f272b63a6ee00f06f",
    "attachments": [
      {
        "title": "Rocket.Chat",
        "title_link": "https://rocket.chat",
        "text": "Rocket.Chat, the best open source chat",
        "image_url": "https://rc.jena.de/images/integration-attachment-example.png",
        "color": "#764FA5"
      }
    ]
  }
}

Screenshots

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

• Bug Fixes
  • Quote attachments are detected more accurately, ensuring quotes display even when color or text is present.
  • Media URLs resolve more reliably by using the original file URL when appropriate and handling external links without unnecessary authentication parameters.
  • Improved auto-download behavior for images, audio, and video by selecting the correct source URL.

[coderabbitai]

Warning

Rate limit exceeded

@OtavioStasiak has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 1 minutes and 22 seconds before requesting another review.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

📥 Commits

Reviewing files that changed from the base of the PR and between 754e331 and 5bb2680.

⛔ Files ignored due to path filters (1)

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

📒 Files selected for processing (1)

• app/containers/message/Message.stories.tsx (1 hunks)

Walkthrough

Tightened quote-attachment detection in Quote.tsx. Added original URL extraction in useMediaAutoDownload and passed it to formatAttachmentUrl. Extended formatAttachmentUrl to accept an optional original URL and short-circuit for non-server URLs while preserving existing handling for protected files and special schemes.

Changes

Cohort / File(s)	Summary
Quote detection predicate app/containers/message/Components/Attachments/Quote.tsx	Adjusted isQuoteAttachment: now only returns false when color and text are both absent and any of image_url, audio_url, video_url, or collapsed exist; otherwise treated as quote.
Media auto-download hook app/containers/message/hooks/useMediaAutoDownload.tsx	Added getOriginalURL(file) to derive originalUrl from image/video/audio; passes originalUrl to formatAttachmentUrl; keeps existing fallbacks (title_link, fileType URL).
Attachment URL formatter app/lib/methods/helpers/formatAttachmentUrl.ts	API extended with optional _originalUrl; if provided and external to current server, return it; retained existing token/protected-file logic and base64/file:// handling.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  actor UI as UI
  participant Hook as useMediaAutoDownload
  participant Formatter as formatAttachmentUrl
  participant Server as Current Server

  UI->>Hook: Render with file
  Hook->>Hook: getOriginalURL(file) → originalUrl
  Hook->>Formatter: formatAttachmentUrl(url, user, server, settings, originalUrl)
  alt originalUrl provided and not starting with Server
    Formatter-->>Hook: return originalUrl (short-circuit)
  else URL requires processing
    opt http(s) with rc_token
      Formatter->>Formatter: encode with token
    end
    opt protected files enabled
      Formatter->>Formatter: setParamInUrl
    end
    Formatter-->>Hook: return processed URL
  end
  Hook-->>UI: Final URL for media

Loading

sequenceDiagram
  autonumber
  actor Renderer as Message Renderer
  participant Quote as Quote.tsx

  Renderer->>Quote: Render attachment
  Quote->>Quote: Check image/audio/video/collapsed
  alt color & text both absent AND media/collapsed present
    Quote-->>Renderer: Not a quote
  else
    Quote-->>Renderer: Treat as quote
  end

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• regression: Collapsible quote not rendering after #6121 #6677: Adjusts attachment quote/non-quote predicate logic in a related component, overlapping with this PR’s tightened detection criteria.

Suggested reviewers

• diegolmello

Poem

I nudge the links with whiskered care,
Sniff out quotes—what’s truly there?
A hop to URLs, original and bright,
If not our burrow, I pass them right.
Carrots cached, attachments found—
Thump! The messages now hop around. 🥕🐇

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check	✅ Passed	The title “fix: quote image not loading” succinctly and accurately captures the core change of this pull request, which is to restore loading of images within quoted messages by adjusting attachment filtering and URL handling.
Linked Issues Check	✅ Passed	The changes address SUP-879 by modifying the quote attachment predicate to include images, updating the media download hook to propagate the original image URL, and extending formatAttachmentUrl to bypass server conversion for external URLs, ensuring quoted images now load correctly on mobile.
Out of Scope Changes Check	✅ Passed	All modifications are directly related to enabling image attachments in quoted messages and URL handling for attachments, with no unrelated features or files changed, so there are no out-of-scope alterations in this pull request.

---

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

🧹 Nitpick comments (1)

app/containers/message/hooks/useMediaAutoDownload.tsx (1)

38-49: Consider consolidating URL extraction logic.

getOriginalURL duplicates the priority order already established in getFileType (image → video → audio). This introduces maintenance overhead if the priority order ever changes.

Consider refactoring to reduce duplication:

+const getOriginalURL = (file: IAttachment, fileType: MediaTypes | null): string | null => {
+	if (!fileType) return null;
+	return file[`${fileType}_url`] || null;
+};

Then update the call site:

-	const originalUrl = getOriginalURL(file);
+	const originalUrl = getOriginalURL(file, fileType);

This keeps the priority order in one place (getFileType) and reduces code duplication.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

Disabled knowledge base sources:

• Jira integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between ff05e91 and 754e331.

📒 Files selected for processing (3)

• app/containers/message/Components/Attachments/Quote.tsx (1 hunks)
• app/containers/message/hooks/useMediaAutoDownload.tsx (2 hunks)
• app/lib/methods/helpers/formatAttachmentUrl.ts (1 hunks)

🧰 Additional context used

🧬 Code graph analysis (2)

app/lib/methods/helpers/formatAttachmentUrl.ts (2)

app/lib/store/auxStore.ts (1)

• store (6-6)

app/lib/methods/isImageBase64.ts (1)

• isImageBase64 (3-8)

app/containers/message/hooks/useMediaAutoDownload.tsx (2)

app/definitions/IAttachment.ts (1)

• IAttachment (9-48)

app/lib/methods/helpers/formatAttachmentUrl.ts (1)

• formatAttachmentUrl (13-44)

🔇 Additional comments (3)

app/lib/methods/helpers/formatAttachmentUrl.ts (1)

13-19: LGTM: Parameter formatting improved.

The multi-line parameter formatting enhances readability.

app/containers/message/hooks/useMediaAutoDownload.tsx (1)

64-71: LGTM: Original URL passed to formatAttachmentUrl.

The originalUrl is correctly extracted and passed to formatAttachmentUrl, enabling the new URL handling logic.

However, ensure that the guard in formatAttachmentUrl (line 26-28) handles cases where file.title_link is a relative path. If title_link is relative, the guard won't execute, and originalUrl won't be used. Verify this is the intended behavior.

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

14-14: LGTM: Tightened quote attachment criteria.

The updated predicate now correctly allows attachments with image_url, audio_url, or video_url to be treated as quotes when they also have color or text. This aligns with the PR objective to fix quote images not loading and ensures quote attachments with images render as expected.

The old logic unconditionally excluded attachments with media URLs from quotes, which caused the reported bug. The new logic fixes this by only excluding them when both color and text are absent.