feat(web): open chat links in new tab with external link icon

[msukkari]

Overview

This PR makes links in Ask Sourcebot chat responses open in new tabs and adds a subtle external link icon (↗) to indicate this behavior.

Changes

Added a custom anchor renderer (renderAnchor) to the MarkdownRenderer component that:

1. Sets target="_blank" and rel="noopener noreferrer" on all links for new-tab behavior and security
2. Displays an ExternalLinkIcon from lucide-react inline after the link text
3. Uses subtle styling (opacity-60, w-3 h-3) so the icon doesn't overwhelm the content

Demo

external_link_demo.mp4

Screenshots

Chat message showing links with external link icons

Close-up of external link icon styling

Testing

• Verified links display with the external link icon
• Confirmed links open in new browser tabs
• Verified icon styling works in both light and dark themes
• Tested that file references and code blocks remain unaffected

Fixes #SOU-822

Linear Issue: SOU-822

  

[coderabbitai]

Important

Review skipped

Draft detected.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 69bb0ab3-feea-4f14-ab17-44a8ccfef310

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch cursor/SOU-822-7df0

---

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