From 069960dbeaa58768db372db1eea797125dffd1eb Mon Sep 17 00:00:00 2001 From: Justin Chen <54879025+justschen@users.noreply.github.com> Date: Mon, 15 Dec 2025 13:36:44 +0800 Subject: [PATCH] move attachment x and + to the left (#283510) * move x and + to the left * remove duplicate clear buttons * some comment cleanup: --- .../attachments/implicitContextAttachment.ts | 22 ++++++++++--------- .../chat/browser/chatAttachmentWidgets.ts | 22 +------------------ .../contrib/chat/browser/media/chat.css | 22 ++++++++----------- 3 files changed, 22 insertions(+), 44 deletions(-) diff --git a/src/vs/workbench/contrib/chat/browser/attachments/implicitContextAttachment.ts b/src/vs/workbench/contrib/chat/browser/attachments/implicitContextAttachment.ts index 58c42bbaec6..244809b8019 100644 --- a/src/vs/workbench/contrib/chat/browser/attachments/implicitContextAttachment.ts +++ b/src/vs/workbench/contrib/chat/browser/attachments/implicitContextAttachment.ts @@ -65,21 +65,12 @@ export class ImplicitContextAttachmentWidget extends Disposable { this.renderDisposables.clear(); this.domNode.classList.toggle('disabled', !this.attachment.enabled); - const label = this.resourceLabels.create(this.domNode, { supportIcons: true }); const file: URI | undefined = this.attachment.uri; const attachmentTypeName = file?.scheme === Schemas.vscodeNotebookCell ? localize('cell.lowercase', "cell") : localize('file.lowercase', "file"); - let title: string; - if (isStringImplicitContextValue(this.attachment.value)) { - title = this.renderString(label); - } else { - title = this.renderResource(this.attachment.value, label); - } - const isSuggestedEnabled = this.configService.getValue('chat.implicitContext.suggestedContext'); - this._register(this.hoverService.setupManagedHover(getDefaultHoverDelegate('element'), this.domNode, title)); - + // Create toggle button BEFORE the label so it appears on the left if (isSuggestedEnabled) { if (!this.attachment.isSelection) { const buttonMsg = this.attachment.enabled ? localize('disable', "Disable current {0} context", attachmentTypeName) : ''; @@ -125,6 +116,17 @@ export class ImplicitContextAttachmentWidget extends Disposable { })); } + const label = this.resourceLabels.create(this.domNode, { supportIcons: true }); + + let title: string; + if (isStringImplicitContextValue(this.attachment.value)) { + title = this.renderString(label); + } else { + title = this.renderResource(this.attachment.value, label); + } + + this._register(this.hoverService.setupManagedHover(getDefaultHoverDelegate('element'), this.domNode, title)); + // Context menu const scopedContextKeyService = this.renderDisposables.add(this.contextKeyService.createScoped(this.domNode)); diff --git a/src/vs/workbench/contrib/chat/browser/chatAttachmentWidgets.ts b/src/vs/workbench/contrib/chat/browser/chatAttachmentWidgets.ts index 5949b4ca6ec..18fd30215b2 100644 --- a/src/vs/workbench/contrib/chat/browser/chatAttachmentWidgets.ts +++ b/src/vs/workbench/contrib/chat/browser/chatAttachmentWidgets.ts @@ -99,6 +99,7 @@ abstract class AbstractChatAttachmentWidget extends Disposable { ) { super(); this.element = dom.append(container, $('.chat-attached-context-attachment.show-file-icons')); + this.attachClearButton(); this.label = contextResourceLabels.create(this.element, { supportIcons: true, hoverTargetOverride: this.element }); this._register(this.label); this.element.tabIndex = 0; @@ -238,8 +239,6 @@ export class FileAttachmentWidget extends AbstractChatAttachmentWidget { this._register(hookUpResourceAttachmentDragAndContextMenu(accessor, this.element, resource)); }); this.addResourceOpenHandlers(resource, range); - - this.attachClearButton(); } private renderOmittedWarning(friendlyName: string, ariaLabel: string) { @@ -288,8 +287,6 @@ export class TerminalCommandAttachmentWidget extends AbstractChatAttachmentWidge await clickHandler(); } })); - - this.attachClearButton(); } } @@ -411,8 +408,6 @@ export class ImageAttachmentWidget extends AbstractChatAttachmentWidget { this._register(hookUpResourceAttachmentDragAndContextMenu(accessor, this.element, resource)); }); } - - this.attachClearButton(); } } @@ -542,8 +537,6 @@ export class PasteAttachmentWidget extends AbstractChatAttachmentWidget { this._register(this.instantiationService.invokeFunction(hookUpResourceAttachmentDragAndContextMenu, this.element, copiedFromResource)); this.addResourceOpenHandlers(copiedFromResource, range); } - - this.attachClearButton(); } } @@ -589,8 +582,6 @@ export class DefaultChatAttachmentWidget extends AbstractChatAttachmentWidget { if (resource) { this.addResourceOpenHandlers(resource, range); } - - this.attachClearButton(); } } @@ -620,8 +611,6 @@ export class PromptFileAttachmentWidget extends AbstractChatAttachmentWidget { this._register(hookUpResourceAttachmentDragAndContextMenu(accessor, this.element, attachment.value)); }); this.addResourceOpenHandlers(attachment.value, undefined); - - this.attachClearButton(); } private updateLabel(attachment: IPromptFileVariableEntry) { @@ -762,8 +751,6 @@ export class ToolSetOrToolItemAttachmentWidget extends AbstractChatAttachmentWid content: hoverContent, }, commonHoverLifecycleOptions)); } - - this.attachClearButton(); } @@ -806,7 +793,6 @@ export class NotebookCellOutputChatAttachmentWidget extends AbstractChatAttachme this._register(hookUpResourceAttachmentDragAndContextMenu(accessor, this.element, resource)); }); this.addResourceOpenHandlers(resource, undefined); - this.attachClearButton(); } getAriaLabel(attachment: INotebookOutputVariableEntry): string { return localize('chat.NotebookImageAttachment', "Attached Notebook output, {0}", attachment.name); @@ -898,8 +884,6 @@ export class ElementChatAttachmentWidget extends AbstractChatAttachmentWidget { } }); })); - - this.attachClearButton(); } } @@ -942,8 +926,6 @@ export class SCMHistoryItemAttachmentWidget extends AbstractChatAttachmentWidget this._openAttachment(attachment); } })); - - this.attachClearButton(); } private async _openAttachment(attachment: ISCMHistoryItemVariableEntry): Promise { @@ -981,7 +963,6 @@ export class SCMHistoryItemChangeAttachmentWidget extends AbstractChatAttachment this._store.add(disposables); this.addResourceOpenHandlers(attachment.value, undefined); - this.attachClearButton(); } protected override async openResource(resource: URI, options: IOpenEditorOptions, isDirectory: true): Promise; @@ -1020,7 +1001,6 @@ export class SCMHistoryItemChangeRangeAttachmentWidget extends AbstractChatAttac this.element.ariaLabel = localize('chat.attachment', "Attached context, {0}", attachment.name); this.addResourceOpenHandlers(attachment.value, undefined); - this.attachClearButton(); } protected override async openResource(resource: URI, options: IOpenEditorOptions, isDirectory: true): Promise; diff --git a/src/vs/workbench/contrib/chat/browser/media/chat.css b/src/vs/workbench/contrib/chat/browser/media/chat.css index 23323923025..b145d368fb4 100644 --- a/src/vs/workbench/contrib/chat/browser/media/chat.css +++ b/src/vs/workbench/contrib/chat/browser/media/chat.css @@ -1582,10 +1582,9 @@ have to be updated for changes to the rules above, or to support more deeply nes .action-item.chat-attachment-button .action-label, .interactive-session .chat-attached-context .chat-attached-context-attachment { display: flex; - gap: 2px; overflow: hidden; font-size: 11px; - padding: 0 4px; + padding: 0 4px 0 0; border: 1px solid var(--vscode-chat-requestBorder, var(--vscode-input-background, transparent)); border-radius: 4px; height: 18px; @@ -1657,16 +1656,16 @@ have to be updated for changes to the rules above, or to support more deeply nes display: flex; align-items: center; margin-top: -2px; - margin-right: -4px; - padding-right: 4px; - padding-left: 2px; + padding-right: 2px; + padding-left: 3px; height: calc(100% + 4px); outline-offset: -4px; + font-size: 12px; } .interactive-session .chat-attached-context .chat-attached-context-attachment .monaco-button.codicon.codicon-plus { - padding: 0 5px 0 3px; - font-size: 12px; + padding-left: 4px; + font-size: 11px; } .chat-related-files .monaco-button.codicon.codicon-add:hover, @@ -1699,7 +1698,9 @@ have to be updated for changes to the rules above, or to support more deeply nes } .interactive-session .chat-attached-context .chat-attached-context-attachment .monaco-icon-label .monaco-button.codicon.codicon-close, -.interactive-session .chat-attached-context .chat-attached-context-attachment .monaco-button.codicon.codicon-close { +.interactive-session .chat-attached-context .chat-attached-context-attachment .monaco-button.codicon.codicon-close, +.interactive-session .chat-attached-context .chat-attached-context-attachment .monaco-icon-label .monaco-button.codicon.codicon-plus, +.interactive-session .chat-attached-context .chat-attached-context-attachment .monaco-button.codicon.codicon-plus { color: var(--vscode-descriptionForeground); cursor: pointer; } @@ -1734,11 +1735,6 @@ have to be updated for changes to the rules above, or to support more deeply nes flex-wrap: wrap; } -.interactive-session .chat-attached-context .chat-attached-context-attachment.implicit { - display: flex; - gap: 4px; -} - .interactive-session .chat-attached-context .chat-attached-context-attachment.implicit .chat-implicit-hint { opacity: 0.7; font-size: .9em;