Open chat links in default browser with external-link icon

src/main/main.ts

@@ -2,7 +2,7 @@ import crypto from 'node:crypto';
 import fs from 'node:fs';
 import path from 'node:path';
 
-import { app, BrowserWindow, net, protocol } from 'electron';
+import { app, BrowserWindow, net, protocol, shell } from 'electron';
 import started from 'electron-squirrel-startup';
 
 import { windowFullscreen } from './channels/window-fullscreen';
@@ -151,6 +151,21 @@ const createWindow = () => {
 	// permission requests). Auto-unsubscribes when the window is destroyed.
 	getTaskManager().registerWindow( mainWindow.webContents );
 
+	// Prevent the app window from navigating to external URLs (e.g. when a
+	// user clicks a link in the chat transcript). Open them in the default
+	// browser instead.
+	mainWindow.webContents.on( 'will-navigate', ( event, url ) => {
+		const allowed = MAIN_WINDOW_VITE_DEV_SERVER_URL ?? 'file://';
+		if ( ! url.startsWith( allowed ) ) {
+			event.preventDefault();
+			shell.openExternal( url );
+		}
+	} );
+	mainWindow.webContents.setWindowOpenHandler( ( { url } ) => {
+		shell.openExternal( url );
+		return { action: 'deny' };
+	} );
+
 	if ( MAIN_WINDOW_VITE_DEV_SERVER_URL ) {
 		mainWindow.loadURL( MAIN_WINDOW_VITE_DEV_SERVER_URL );
 	} else {

src/renderer/components/ChatTranscript.tsx

@@ -60,6 +60,34 @@ type TranscriptItem =
 	| { kind: 'tool-group'; tools: ToolMessage[] }
 	| CreatedFileItem;
 
+function ExternalLink( {
+	children,
+	href,
+	...rest
+}: React.AnchorHTMLAttributes< HTMLAnchorElement > ) {
+	const handleClick = useCallback(
+		( e: React.MouseEvent< HTMLAnchorElement > ) => {
+			e.preventDefault();
+			if ( href ) {
+				window.api.shell.openExternal( href );
+			}
+		},
+		[ href ]
+	);
+	/* eslint-disable jsx-a11y/click-events-have-key-events -- native <a> handles Enter already */
+	return (
+		<a
+			{ ...rest }
+			href={ href }
+			onClick={ handleClick }
+			rel="noopener noreferrer"
+		>
+			{ children }
+		</a>
+	);
+	/* eslint-enable jsx-a11y/click-events-have-key-events */
+}
+
 export function groupMessages( messages: ChatMessage[] ): TranscriptItem[] {
 	const items: TranscriptItem[] = [];
 	for ( const m of messages ) {
@@ -319,6 +347,9 @@ export function ChatTranscript( {
 								<div className="bubble-text bubble-markdown">
 									<ReactMarkdown
 										remarkPlugins={ [ remarkGfm ] }
+										components={ {
+											a: ExternalLink,
+										} }
 									>
 										{ item.text }
 									</ReactMarkdown>

src/renderer/index.css

@@ -2717,6 +2717,23 @@ button.resources-grid-card[data-drop-target="true"]:hover {
 	color: var(--accent);
 }
 
+.bubble-markdown a[href^="http"]::after {
+	content: "";
+	display: inline-block;
+	width: 0.7em;
+	height: 0.7em;
+	margin-left: 0.15em;
+	vertical-align: baseline;
+	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 3.5H3a1 1 0 0 0-1 1V13a1 1 0 0 0 1 1h8.5a1 1 0 0 0 1-1V9.5'/%3E%3Cpath d='M9.5 2h4.5v4.5M14 2 7.5 8.5'/%3E%3C/svg%3E");
+	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 3.5H3a1 1 0 0 0-1 1V13a1 1 0 0 0 1 1h8.5a1 1 0 0 0 1-1V9.5'/%3E%3Cpath d='M9.5 2h4.5v4.5M14 2 7.5 8.5'/%3E%3C/svg%3E");
+	-webkit-mask-size: contain;
+	mask-size: contain;
+	-webkit-mask-repeat: no-repeat;
+	mask-repeat: no-repeat;
+	background-color: currentcolor;
+	opacity: 0.55;
+}
+
 .bubble-markdown table {
 	border-collapse: collapse;
 	margin: 0 0 0.6em;