chat: feat: allow rendering links as links (#288142)

Author: ulugbekna

src/vs/workbench/contrib/chat/browser/chat.contribution.ts

@@ -262,6 +262,16 @@ configurationRegistry.registerConfiguration({
 			description: nls.localize('chat.renderRelatedFiles', "Controls whether related files should be rendered in the chat input."),
 			default: false
 		},
+		[ChatConfiguration.InlineReferencesStyle]: {
+			type: 'string',
+			enum: ['box', 'link'],
+			enumDescriptions: [
+				nls.localize('chat.inlineReferences.style.box', "Display file and symbol references as boxed widgets with icons."),
+				nls.localize('chat.inlineReferences.style.link', "Display file and symbol references as simple blue links without icons.")
+			],
+			description: nls.localize('chat.inlineReferences.style', "Controls how file and symbol references are displayed in chat messages."),
+			default: 'box'
+		},
 		'chat.notifyWindowOnConfirmation': {
 			type: 'boolean',
 			description: nls.localize('chat.notifyWindowOnConfirmation', "Controls whether a chat session should present the user with an OS notification when a confirmation is needed while the window is not in focus. This includes a window badge as well as notification toast."),

src/vs/workbench/contrib/chat/browser/widget/chatContentParts/chatInlineAnchorWidget.ts

@@ -44,6 +44,8 @@ import { IChatContentInlineReference } from '../../../common/chatService/chatSer
 import { IChatWidgetService } from '../../chat.js';
 import { chatAttachmentResourceContextKey, hookUpSymbolAttachmentDragAndContextMenu } from '../../attachments/chatAttachmentWidgets.js';
 import { IChatMarkdownAnchorService } from './chatMarkdownAnchorService.js';
+import { IConfigurationService } from '../../../../../../platform/configuration/common/configuration.js';
+import { ChatConfiguration } from '../../../common/constants.js';
 
 type ContentRefData =
 	| { readonly kind: 'symbol'; readonly symbol: IWorkspaceSymbol }
@@ -113,6 +115,7 @@ export class InlineAnchorWidget extends Disposable {
 		private readonly element: HTMLAnchorElement | HTMLElement,
 		public readonly inlineReference: IChatContentInlineReference,
 		private readonly metadata: InlineAnchorWidgetMetadata | undefined,
+		@IConfigurationService private readonly configurationService: IConfigurationService,
 		@IContextKeyService originalContextKeyService: IContextKeyService,
 		@IContextMenuService contextMenuService: IContextMenuService,
 		@IFileService fileService: IFileService,
@@ -248,6 +251,14 @@ export class InlineAnchorWidget extends Disposable {
 		const relativeLabel = labelService.getUriLabel(location.uri, { relative: true });
 		this._register(hoverService.setupManagedHover(getDefaultHoverDelegate('element'), element, relativeLabel));
 
+		// Apply link-style if configured
+		this.updateAppearance();
+		this._register(this.configurationService.onDidChangeConfiguration(e => {
+			if (e.affectsConfiguration(ChatConfiguration.InlineReferencesStyle)) {
+				this.updateAppearance();
+			}
+		}));
+
 		// Drag and drop
 		if (this.data.kind !== 'symbol') {
 			element.draggable = true;
@@ -268,6 +279,12 @@ export class InlineAnchorWidget extends Disposable {
 		return this.element;
 	}
 
+	private updateAppearance(): void {
+		const style = this.configurationService.getValue<string>(ChatConfiguration.InlineReferencesStyle);
+		const useLinkStyle = style === 'link';
+		this.element.classList.toggle('link-style', useLinkStyle);
+	}
+
 	private getCellIndex(location: URI) {
 		const notebook = this.notebookDocumentService.getNotebook(location);
 		const index = notebook?.getCellIndex(location) ?? -1;

src/vs/workbench/contrib/chat/browser/widget/chatContentParts/media/chatInlineAnchorWidget.css

@@ -59,3 +59,26 @@
 
 	flex-shrink: 0;
 }
+
+/* Link-style appearance - no box, no icon */
+.chat-inline-anchor-widget.link-style,
+.interactive-item-container .value .rendered-markdown .chat-inline-anchor-widget.link-style {
+	border: none;
+	background-color: transparent;
+	padding: 0;
+	margin: 0;
+	color: var(--vscode-textLink-foreground);
+}
+
+.chat-inline-anchor-widget.link-style:hover {
+	background-color: transparent;
+	text-decoration: underline;
+}
+
+.chat-inline-anchor-widget.link-style .icon {
+	display: none;
+}
+
+.chat-inline-anchor-widget.link-style .icon-label {
+	padding: 0;
+}

src/vs/workbench/contrib/chat/common/constants.ts

@@ -16,6 +16,7 @@ export enum ChatConfiguration {
 	ExtensionToolsEnabled = 'chat.extensionTools.enabled',
 	RepoInfoEnabled = 'chat.repoInfo.enabled',
 	EditRequests = 'chat.editRequests',
+	InlineReferencesStyle = 'chat.inlineReferences.style',
 	GlobalAutoApprove = 'chat.tools.global.autoApprove',
 	AutoApproveEdits = 'chat.tools.edits.autoApprove',
 	AutoApprovedUrls = 'chat.tools.urls.autoApprove',