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

  

Summary by CodeRabbit

• New Features

  • Links in Ask Sourcebot chat responses now open in a new browser tab and show a subtle external-link icon for clearer navigation. Inline rendering for recognized issue links (e.g., Linear issues) remains intact and continues to display as embedded cards.

• Documentation

  • Changelog updated to note the new external-link behavior in chat responses.

[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: 81fb701a-4aa9-4bb7-a0a6-710eadc01043

📥 Commits

Reviewing files that changed from the base of the PR and between 8ae6e84 and 9b1a7c0.

📒 Files selected for processing (1)

• packages/web/src/features/chat/components/chatThread/markdownRenderer.tsx

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

• packages/web/src/features/chat/components/chatThread/markdownRenderer.tsx

---

Walkthrough

Markdown link rendering updated to open external links in a new tab and append an external-link icon; changelog entry added. No public API/type changes.

Changes

Cohort / File(s)	Summary
Documentation CHANGELOG.md	Added ## [Unreleased] → ### Changed entry noting that Ask Sourcebot chat links now open in a new tab and show an external-link icon.
Link rendering packages/web/src/features/chat/components/chatThread/markdownRenderer.tsx	Imported ExternalLinkIcon; updated components.a renderAnchor to render non-Linear anchors as <a target="_blank" rel="noopener noreferrer"> wrapped with inline-flex items-center gap-0.5 and append the external-link icon; preserved special-case LinearIssueCard handling.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• feat(web): Add Linear issue link card UI for chat responses #1060: Modifies the same markdownRenderer.tsx anchor rendering and adds external-link behavior/icons; closely related.

Suggested reviewers

• brendan-kellam

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title directly and accurately describes the main changes: links in chat responses now open in new tabs with an external link icon indicator.
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.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

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

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

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

Inline comments:
In `@packages/web/src/features/chat/components/chatThread/markdownRenderer.tsx`:
- Around line 174-187: The spread {...rest} in the renderAnchor component can
override explicit security props (target, rel, className); move {...rest} before
the explicit props inside the <a> element so incoming props cannot overwrite
target="_blank" and rel="noopener noreferrer". If you need to preserve incoming
className from the markdown AST, merge it with the existing class via the cn
utility (e.g., cn(rest.className, "inline-flex items-center gap-0.5")) and
remove className from rest before spreading to avoid duplication.

🪄 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: 9e28e8d3-6521-49d9-acd9-e2672506455d

📥 Commits

Reviewing files that changed from the base of the PR and between 9e07fcd and 1427d39.

📒 Files selected for processing (2)

• CHANGELOG.md
• packages/web/src/features/chat/components/chatThread/markdownRenderer.tsx