Fix hovers in chat attachments 2 (microsoft#229831)

fix attachment in other attachments render location...

Author: benibenj

src/vs/workbench/contrib/chat/browser/chatContentParts/chatAttachmentsContentPart.ts

@@ -16,10 +16,9 @@ import { basename, dirname } from '../../../../../base/common/path.js';
 import { localize } from '../../../../../nls.js';
 import { ChatResponseReferencePartStatusKind, IChatContentReference } from '../../common/chatService.js';
 import { IOpenerService } from '../../../../../platform/opener/common/opener.js';
-import { StandardKeyboardEvent } from '../../../../../base/browser/keyboardEvent.js';
-import { KeyCode } from '../../../../../base/common/keyCodes.js';
 import { IHoverService } from '../../../../../platform/hover/browser/hover.js';
 import { createInstantHoverDelegate } from '../../../../../base/browser/ui/hover/hoverDelegateFactory.js';
+import { IManagedHoverContentOrFactory } from '../../../../../base/browser/ui/hover/hover.js';
 
 export class ChatAttachmentsContentPart extends Disposable {
 	private readonly attachedContextDisposables = this._register(new DisposableStore());
@@ -49,19 +48,22 @@ export class ChatAttachmentsContentPart extends Disposable {
 
 		this.variables.forEach(async (attachment) => {
 			const widget = dom.append(container, dom.$('.chat-attached-context-attachment.show-file-icons'));
-			const label = this._contextResourceLabels.create(widget, { supportIcons: true });
+			const label = this._contextResourceLabels.create(widget, { supportIcons: true, hoverDelegate });
 			const file = URI.isUri(attachment.value) ? attachment.value : attachment.value && typeof attachment.value === 'object' && 'uri' in attachment.value && URI.isUri(attachment.value.uri) ? attachment.value.uri : undefined;
 			const range = attachment.value && typeof attachment.value === 'object' && 'range' in attachment.value && Range.isIRange(attachment.value.range) ? attachment.value.range : undefined;
 
 			const correspondingContentReference = this.contentReferences.find((ref) => typeof ref.reference === 'object' && 'variableName' in ref.reference && ref.reference.variableName === attachment.name);
 			const isAttachmentOmitted = correspondingContentReference?.options?.status?.kind === ChatResponseReferencePartStatusKind.Omitted;
 			const isAttachmentPartialOrOmitted = isAttachmentOmitted || correspondingContentReference?.options?.status?.kind === ChatResponseReferencePartStatusKind.Partial;
 
+			let hoverElement: IManagedHoverContentOrFactory;
+			let ariaLabel: string | undefined;
+
 			if (file && attachment.isFile) {
 				const fileBasename = basename(file.path);
 				const fileDirname = dirname(file.path);
 				const friendlyName = `${fileBasename} ${fileDirname}`;
-				let ariaLabel;
+
 				if (isAttachmentOmitted) {
 					ariaLabel = range ? localize('chat.omittedFileAttachmentWithRange', "Omitted: {0}, line {1} to line {2}.", friendlyName, range.startLineNumber, range.endLineNumber) : localize('chat.omittedFileAttachment', "Omitted: {0}.", friendlyName);
 				} else if (isAttachmentPartialOrOmitted) {
@@ -70,42 +72,27 @@ export class ChatAttachmentsContentPart extends Disposable {
 					ariaLabel = range ? localize('chat.fileAttachmentWithRange3', "Attached: {0}, line {1} to line {2}.", friendlyName, range.startLineNumber, range.endLineNumber) : localize('chat.fileAttachment3', "Attached: {0}.", friendlyName);
 				}
 
+				hoverElement = file.fsPath;
+
 				label.setFile(file, {
 					fileKind: FileKind.FILE,
 					hidePath: true,
 					range,
 					title: correspondingContentReference?.options?.status?.description
 				});
-				widget.ariaLabel = ariaLabel;
-				widget.tabIndex = 0;
-				widget.style.cursor = 'pointer';
-
-				this.attachedContextDisposables.add(dom.addDisposableListener(widget, dom.EventType.CLICK, async (e: MouseEvent) => {
-					dom.EventHelper.stop(e, true);
-					if (file) {
-						this.openerService.open(
-							file,
-							{
-								fromUserGesture: true,
-								editorOptions: {
-									selection: range
-								} as any
-							});
-					}
-				}));
 			} else if (attachment.isImage) {
-				let buffer: Uint8Array;
-				const ariaLabel = localize('chat.imageAttachment', "Attached image, {0}", attachment.name);
-				const pillIcon = dom.$('div.chat-attached-context-pill', {}, dom.$('span.codicon.codicon-file-media'));
+				ariaLabel = localize('chat.imageAttachment', "Attached image, {0}", attachment.name);
 
-				const hoverElement = dom.$('div.chat-attached-context-hover');
+				hoverElement = dom.$('div.chat-attached-context-hover');
 				hoverElement.setAttribute('aria-label', ariaLabel);
 
 				// Custom label
+				const pillIcon = dom.$('div.chat-attached-context-pill', {}, dom.$('span.codicon.codicon-file-media'));
 				const textLabel = dom.$('span.chat-attached-context-custom-text', {}, attachment.name);
 				widget.appendChild(pillIcon);
 				widget.appendChild(textLabel);
 
+				let buffer: Uint8Array;
 				try {
 					if (attachment.value instanceof URI) {
 						const readFile = await this.fileService.readFile(attachment.value);
@@ -120,43 +107,50 @@ export class ChatAttachmentsContentPart extends Disposable {
 				}
 
 				widget.style.position = 'relative';
-				widget.ariaLabel = ariaLabel;
-				widget.tabIndex = 0;
-
-				if (!this.attachedContextDisposables.isDisposed) {
-					this.attachedContextDisposables.add(this.hoverService.setupManagedHover(hoverDelegate, widget, hoverElement));
-
-					// No delay for keyboard
-					this.attachedContextDisposables.add(dom.addDisposableListener(widget, 'keydown', (event) => {
-						const keyboardEvent = new StandardKeyboardEvent(event);
-						if (keyboardEvent.keyCode === KeyCode.Enter || keyboardEvent.keyCode === KeyCode.Space) {
-							this.hoverService.showManagedHover(widget);
-						}
-					}));
-				}
-
 			} else {
 				const attachmentLabel = attachment.fullName ?? attachment.name;
 				const withIcon = attachment.icon?.id ? `$(${attachment.icon.id}) ${attachmentLabel}` : attachmentLabel;
 				label.setLabel(withIcon, correspondingContentReference?.options?.status?.description);
 
-				widget.ariaLabel = localize('chat.attachment3', "Attached context: {0}.", attachment.name);
-				widget.tabIndex = 0;
+				hoverElement = attachmentLabel;
+				ariaLabel = localize('chat.attachment3', "Attached context: {0}.", attachment.name);
 			}
 
 			if (isAttachmentPartialOrOmitted) {
 				widget.classList.add('warning');
 			}
 			const description = correspondingContentReference?.options?.status?.description;
 			if (isAttachmentPartialOrOmitted) {
-				widget.ariaLabel = `${widget.ariaLabel}${description ? ` ${description}` : ''}`;
+				ariaLabel = `${ariaLabel}${description ? ` ${description}` : ''}`;
+				hoverElement = description;
 				for (const selector of ['.monaco-icon-suffix-container', '.monaco-icon-name-container']) {
 					const element = label.element.querySelector(selector);
 					if (element) {
 						element.classList.add('warning');
 					}
 				}
 			}
+
+			if (file) {
+				widget.style.cursor = 'pointer';
+				this.attachedContextDisposables.add(dom.addDisposableListener(widget, dom.EventType.CLICK, async (e: MouseEvent) => {
+					dom.EventHelper.stop(e, true);
+					this.openerService.open(
+						file,
+						{
+							fromUserGesture: true,
+							editorOptions: {
+								selection: range
+							} as any
+						});
+				}));
+			}
+
+			widget.ariaLabel = ariaLabel;
+			widget.tabIndex = 0;
+			if (!this.attachedContextDisposables.isDisposed) {
+				this.attachedContextDisposables.add(this.hoverService.setupManagedHover(hoverDelegate, widget, hoverElement));
+			}
 		});
 	}