fix: improve presentation of chat related file suggestions (microsoft#242354)

* fix: improve presentation of chat related file suggestions

* Pin extractor version

---------

Co-authored-by: Logan Ramos <[email protected]>

Author: joyceerhl

.github/workflows/telemetry.yml

@@ -14,6 +14,6 @@ jobs:
           node-version: 'lts/*'
 
       - name: 'Run vscode-telemetry-extractor'
-        run: 'npx --package=@vscode/telemetry-extractor --yes vscode-telemetry-extractor -s .'
+        run: 'npx --package=@vscode/telemetry-extractor@1.14.0 --yes vscode-telemetry-extractor -s .'
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

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

@@ -33,9 +33,7 @@ import { EditorOptions } from '../../../../editor/common/config/editorOptions.js
 import { IDimension } from '../../../../editor/common/core/dimension.js';
 import { IPosition } from '../../../../editor/common/core/position.js';
 import { IRange, Range } from '../../../../editor/common/core/range.js';
-import { ILanguageService } from '../../../../editor/common/languages/language.js';
 import { ITextModel } from '../../../../editor/common/model.js';
-import { getIconClasses } from '../../../../editor/common/services/getIconClasses.js';
 import { IModelService } from '../../../../editor/common/services/model.js';
 import { ITextModelService } from '../../../../editor/common/services/resolverService.js';
 import { CopyPasteController } from '../../../../editor/contrib/dropOrPasteInto/browser/copyPasteController.js';
@@ -337,7 +335,6 @@ export class ChatInputPart extends Disposable implements IHistoryNavigationWidge
 		getContribsInputState: () => any,
 		@IChatWidgetHistoryService private readonly historyService: IChatWidgetHistoryService,
 		@IModelService private readonly modelService: IModelService,
-		@ILanguageService private readonly languageService: ILanguageService,
 		@IInstantiationService private readonly instantiationService: IInstantiationService,
 		@IContextKeyService private readonly contextKeyService: IContextKeyService,
 		@IConfigurationService private readonly configurationService: IConfigurationService,
@@ -729,8 +726,8 @@ export class ChatInputPart extends Disposable implements IHistoryNavigationWidge
 					dom.h('.chat-input-container@inputContainer', [
 						dom.h('.chat-attachments-container@attachmentsContainer', [
 							dom.h('.chat-attachment-toolbar@attachmentToolbar'),
-							dom.h('.chat-attached-context@attachedContextContainer'),
 							dom.h('.chat-related-files@relatedFilesContainer'),
+							dom.h('.chat-attached-context@attachedContextContainer'),
 						]),
 						dom.h('.chat-editor-container@editorContainer'),
 						dom.h('.chat-input-toolbars@inputToolbars'),
@@ -1422,7 +1419,7 @@ export class ChatInputPart extends Disposable implements IHistoryNavigationWidge
 				hoverDelegate
 			}));
 			uriLabel.label = this.labelService.getUriBasenameLabel(uri);
-			uriLabel.element.classList.add('monaco-icon-label', ...getIconClasses(this.modelService, this.languageService, uri, FileKind.FILE));
+			uriLabel.element.classList.add('monaco-icon-label');
 			uriLabel.element.title = localize('suggeste.title', "{0} - {1}", this.labelService.getUriLabel(uri, { relative: true }), metadata.description ?? '');
 
 			this._chatEditsActionsDisposables.add(uriLabel.onDidClick(() => {
@@ -1449,10 +1446,10 @@ export class ChatInputPart extends Disposable implements IHistoryNavigationWidge
 			sep.classList.add('separator');
 
 			const group = document.createElement('span');
-			group.classList.add('monaco-button-dropdown', 'sidebyside-button', 'show-file-icons');
-			group.appendChild(uriLabel.element);
-			group.appendChild(sep);
+			group.classList.add('monaco-button-dropdown', 'sidebyside-button');
 			group.appendChild(addButton.element);
+			group.appendChild(sep);
+			group.appendChild(uriLabel.element);
 			dom.append(anchor, group);
 
 			this._chatEditsActionsDisposables.add(toDisposable(() => {

src/vs/workbench/contrib/chat/browser/media/chat.css

@@ -700,7 +700,6 @@ have to be updated for changes to the rules above, or to support more deeply nes
 	flex-wrap: wrap;
 	align-items: center;
 	gap: 4px;
-	width: 100%;
 }
 
 .chat-related-files .monaco-button-dropdown .monaco-text-button {
@@ -725,18 +724,20 @@ have to be updated for changes to the rules above, or to support more deeply nes
 	border-style: dashed;
 	align-items: center;
 	overflow: hidden;
-	padding: 0 0 0 2px;
 	gap: 2px;
+	padding: 0 4px;
 }
 
 .chat-related-files .monaco-button.codicon.codicon-add {
 	display: flex;
 	flex-direction: column;
 	color: var(--vscode-descriptionForeground);
 	padding-top: 3px;
+	margin-left: -4px;
+	padding-left: 4px;
 	font-size: 14px; /* The + codicon is large, make it look more like the x codicon */
 	height: calc(100% - 3px);
-	width: 20px;
+	width: 17px;
 	outline-offset: -2px !important;
 }
 
@@ -1136,6 +1137,7 @@ have to be updated for changes to the rules above, or to support more deeply nes
 .action-item.chat-attached-context-attachment.chat-add-files .action-label {
 	color: var(--vscode-descriptionForeground);
 	font-family: unset;
+	gap: 5px;
 }
 
 .action-item.chat-attached-context-attachment.chat-add-files .action-label.codicon::before {