@codingame/monaco-vscode-katex-common 26.2.2 → 27.0.0

package/vscode/src/vs/workbench/contrib/chat/browser/attachments/chatAttachmentWidgets.js

@@ -7,6 +7,7 @@ import { Button } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/ui/b
 import { HoverStyle } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/ui/hover/hover';
 import { createInstantHoverDelegate } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/ui/hover/hoverDelegateFactory';
 import { HoverPosition } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/ui/hover/hoverWidget';
+import { DomScrollableElement } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/ui/scrollbar/scrollableElement';
 import { Codicon } from '@codingame/monaco-vscode-api/vscode/vs/base/common/codicons';
 import { Emitter, Event } from '@codingame/monaco-vscode-api/vscode/vs/base/common/event';
 import { MarkdownString } from '@codingame/monaco-vscode-api/vscode/vs/base/common/htmlContent';
@@ -15,11 +16,13 @@ import { KeyCode } from '@codingame/monaco-vscode-api/vscode/vs/base/common/keyC
 import { Disposable, DisposableStore, MutableDisposable } from '@codingame/monaco-vscode-api/vscode/vs/base/common/lifecycle';
 import { Schemas } from '@codingame/monaco-vscode-api/vscode/vs/base/common/network';
 import { basename, dirname } from '@codingame/monaco-vscode-api/vscode/vs/base/common/path';
+import { ScrollbarVisibility } from '@codingame/monaco-vscode-api/vscode/vs/base/common/scrollable';
 import { ThemeIcon } from '@codingame/monaco-vscode-api/vscode/vs/base/common/themables';
 import { URI } from '@codingame/monaco-vscode-api/vscode/vs/base/common/uri';
 import { EditorContextKeys } from '@codingame/monaco-vscode-api/vscode/vs/editor/common/editorContextKeys';
 import { ILanguageService } from '@codingame/monaco-vscode-api/vscode/vs/editor/common/languages/language.service';
 import { ILanguageFeaturesService } from '@codingame/monaco-vscode-api/vscode/vs/editor/common/services/languageFeatures.service';
+import { getIconClasses } from '@codingame/monaco-vscode-api/vscode/vs/editor/common/services/getIconClasses';
 import { IModelService } from '@codingame/monaco-vscode-api/vscode/vs/editor/common/services/model.service';
 import { ITextModelService } from '@codingame/monaco-vscode-api/vscode/vs/editor/common/services/resolverService.service';
 import { localize } from '@codingame/monaco-vscode-api/vscode/vs/nls';
@@ -55,6 +58,7 @@ import { getHistoryItemEditorTitle } from '@codingame/monaco-vscode-api/vscode/v
 import { ITerminalService } from '@codingame/monaco-vscode-api/vscode/vs/workbench/contrib/terminal/browser/terminal.service';
 import { OmittedState, isStringVariableEntry, PromptFileVariableKind } from '@codingame/monaco-vscode-api/vscode/vs/workbench/contrib/chat/common/attachments/chatVariableEntries';
 import { ILanguageModelsService } from '@codingame/monaco-vscode-api/vscode/vs/workbench/contrib/chat/common/languageModels.service';
+import { IChatEntitlementService } from '@codingame/monaco-vscode-api/vscode/vs/workbench/services/chat/common/chatEntitlementService.service';
 import { isToolSet } from '@codingame/monaco-vscode-api/vscode/vs/workbench/contrib/chat/common/tools/languageModelToolsService';
 import { ILanguageModelToolsService } from '@codingame/monaco-vscode-api/vscode/vs/workbench/contrib/chat/common/tools/languageModelToolsService.service';
 import { getCleanPromptName } from '@codingame/monaco-vscode-api/vscode/vs/workbench/contrib/chat/common/promptSyntax/config/promptFileLocations';
@@ -70,6 +74,16 @@ const commonHoverOptions = {
 const commonHoverLifecycleOptions = {
     groupId: "chat-attachments"
 };
+const KEY_ELEMENT_HOVER_COMPUTED_STYLE_PROPERTIES = [
+    "display",
+    "position",
+    "margin",
+    "padding",
+    "font-size",
+    "font-family",
+    "color",
+    "background-color"
+];
 let AbstractChatAttachmentWidget = class AbstractChatAttachmentWidget extends Disposable {
     get onDidDelete() {
         return this._onDidDelete.event;
@@ -125,7 +139,7 @@ let AbstractChatAttachmentWidget = class AbstractChatAttachmentWidget extends Di
         const clearButton = ( new Button(this.element, {
             supportIcons: true,
             hoverDelegate: createInstantHoverDelegate(),
-            title: ( localize(5082, "Remove from context"))
+            title: ( localize(5325, "Remove from context"))
         }));
         clearButton.element.tabIndex = -1;
         clearButton.icon = Codicon.close;
@@ -216,14 +230,14 @@ let FileAttachmentWidget = class FileAttachmentWidget extends AbstractChatAttach
         const fileDirname = dirname(resource.path);
         const friendlyName = `${fileBasename} ${fileDirname}`;
         let ariaLabel = range ? ( localize(
-            5083,
+            5326,
             "Attached file, {0}, line {1} to line {2}",
             friendlyName,
             range.startLineNumber,
             range.endLineNumber
-        )) : ( localize(5084, "Attached file, {0}", friendlyName));
+        )) : ( localize(5327, "Attached file, {0}", friendlyName));
         if (attachment.omittedState === OmittedState.Full) {
-            ariaLabel = ( localize(5085, "Omitted this file: {0}", attachment.name));
+            ariaLabel = ( localize(5328, "Omitted this file: {0}", attachment.name));
             this.renderOmittedWarning(friendlyName, ariaLabel);
         } else {
             const fileOptions = {
@@ -261,7 +275,7 @@ let FileAttachmentWidget = class FileAttachmentWidget extends AbstractChatAttach
         hoverElement.setAttribute("aria-label", ariaLabel);
         this.element.classList.add("warning");
         hoverElement.textContent = ( localize(
-            5086,
+            5329,
             "{0} does not support this file type.",
             this.currentLanguageModel ? this.languageModelsService.lookupLanguageModel(this.currentLanguageModel.identifier)?.name : this.currentLanguageModel ?? "This model"
         ));
@@ -298,7 +312,7 @@ let TerminalCommandAttachmentWidget = class TerminalCommandAttachmentWidget exte
         );
         this.hoverService = hoverService;
         this.terminalService = terminalService;
-        const ariaLabel = ( localize(5087, "Terminal command, {0}", attachment.command));
+        const ariaLabel = ( localize(5330, "Terminal command, {0}", attachment.command));
         const clickHandler = () => this.openResource(attachment.resource, {
             editorOptions: {
                 preserveFocus: true
@@ -351,16 +365,16 @@ function getHoverContent(ariaLabel, attachment) {
         const hoverElement = $("div.chat-attached-context-hover");
         hoverElement.setAttribute("aria-label", ariaLabel);
         const commandTitle = $("div", {}, typeof attachment.exitCode === "number" ? ( localize(
-            5088,
+            5331,
             "Command: {0}, exit code: {1}",
             attachment.command,
             attachment.exitCode
-        )) : ( localize(5089, "Command")));
+        )) : ( localize(5332, "Command")));
         commandTitle.classList.add("attachment-additional-info");
         const commandBlock = $("pre.chat-terminal-command-block");
         hoverElement.append(commandTitle, commandBlock);
         if (attachment.output && attachment.output.trim().length > 0) {
-            const outputTitle = $("div", {}, ( localize(5090, "Output:")));
+            const outputTitle = $("div", {}, ( localize(5333, "Output:")));
             outputTitle.classList.add("attachment-additional-info");
             const outputBlock = $("pre.chat-terminal-command-output");
             const fullOutputLines = attachment.output.split("\n");
@@ -403,7 +417,8 @@ let ImageAttachmentWidget = class ImageAttachmentWidget extends AbstractChatAtta
         hoverService,
         languageModelsService,
         instantiationService,
-        labelService
+        labelService,
+        chatEntitlementService
     ) {
         super(
             attachment,
@@ -418,13 +433,14 @@ let ImageAttachmentWidget = class ImageAttachmentWidget extends AbstractChatAtta
         this.hoverService = hoverService;
         this.languageModelsService = languageModelsService;
         this.labelService = labelService;
+        this.chatEntitlementService = chatEntitlementService;
         let ariaLabel;
         if (attachment.omittedState === OmittedState.Full) {
-            ariaLabel = ( localize(5091, "Omitted this image: {0}", attachment.name));
+            ariaLabel = ( localize(5334, "Omitted this image: {0}", attachment.name));
         } else if (attachment.omittedState === OmittedState.Partial) {
-            ariaLabel = ( localize(5092, "Partially omitted this image: {0}", attachment.name));
+            ariaLabel = ( localize(5335, "Partially omitted this image: {0}", attachment.name));
         } else {
-            ariaLabel = ( localize(5093, "Attached image, {0}", attachment.name));
+            ariaLabel = ( localize(5336, "Attached image, {0}", attachment.name));
         }
         const ref = attachment.references?.[0]?.reference;
         resource = ref && URI.isUri(ref) ? ref : undefined;
@@ -450,7 +466,8 @@ let ImageAttachmentWidget = class ImageAttachmentWidget extends AbstractChatAtta
             currentLanguageModelName,
             clickHandler,
             this.currentLanguageModel,
-            attachment.omittedState
+            attachment.omittedState,
+            this.chatEntitlementService.previewFeaturesDisabled
         ));
         if (resource) {
             this.addResourceOpenHandlers(resource, undefined);
@@ -462,7 +479,7 @@ let ImageAttachmentWidget = class ImageAttachmentWidget extends AbstractChatAtta
         }
     }
 };
-ImageAttachmentWidget = ( __decorate([( __param(6, ICommandService)), ( __param(7, IOpenerService)), ( __param(8, IConfigurationService)), ( __param(9, IHoverService)), ( __param(10, ILanguageModelsService)), ( __param(11, IInstantiationService)), ( __param(12, ILabelService))], ImageAttachmentWidget));
+ImageAttachmentWidget = ( __decorate([( __param(6, ICommandService)), ( __param(7, IOpenerService)), ( __param(8, IConfigurationService)), ( __param(9, IHoverService)), ( __param(10, ILanguageModelsService)), ( __param(11, IInstantiationService)), ( __param(12, ILabelService)), ( __param(13, IChatEntitlementService))], ImageAttachmentWidget));
 function createImageElements(
     resource,
     name,
@@ -474,7 +491,8 @@ function createImageElements(
     currentLanguageModelName,
     clickHandler,
     currentLanguageModel,
-    omittedState
+    omittedState,
+    previewFeaturesDisabled
 ) {
     const disposable = ( new DisposableStore());
     if (omittedState === OmittedState.Partial) {
@@ -488,17 +506,24 @@ function createImageElements(
     }
     const supportsVision = modelSupportsVision(currentLanguageModel);
     const pillIcon = $("div.chat-attached-context-pill", {}, $(
-        supportsVision ? "span.codicon.codicon-file-media" : "span.codicon.codicon-warning"
+        (supportsVision && !previewFeaturesDisabled) ? "span.codicon.codicon-file-media" : "span.codicon.codicon-warning"
     ));
     const textLabel = $("span.chat-attached-context-custom-text", {}, name);
     element.appendChild(pillIcon);
     element.appendChild(textLabel);
     const hoverElement = $("div.chat-attached-context-hover");
     hoverElement.setAttribute("aria-label", ariaLabel);
-    if ((!supportsVision && currentLanguageModel) || omittedState === OmittedState.Full) {
+    if (previewFeaturesDisabled) {
+        element.classList.add("warning");
+        hoverElement.textContent = ( localize(5337, "Vision is disabled by your organization."));
+        disposable.add(hoverService.setupDelayedHover(element, {
+            content: hoverElement,
+            style: HoverStyle.Pointer
+        }));
+    } else if ((!supportsVision && currentLanguageModel) || omittedState === OmittedState.Full) {
         element.classList.add("warning");
         hoverElement.textContent = ( localize(
-            5094,
+            5338,
             "{0} does not support images.",
             currentLanguageModelName ?? "This model"
         ));
@@ -534,7 +559,7 @@ function createImageElements(
             const urlContainer = $(
                 "a.chat-attached-context-url",
                 {},
-                omittedState === OmittedState.Partial ? ( localize(5095, "This GIF was partially omitted - current frame will be sent.")) : fullName
+                omittedState === OmittedState.Partial ? ( localize(5339, "This GIF was partially omitted - current frame will be sent.")) : fullName
             );
             const separator = $("div.chat-attached-context-url-separator");
             disposable.add(addDisposableListener(urlContainer, "click", () => clickHandler()));
@@ -583,7 +608,7 @@ let PasteAttachmentWidget = class PasteAttachmentWidget extends AbstractChatAtta
         );
         this.hoverService = hoverService;
         this.instantiationService = instantiationService;
-        const ariaLabel = ( localize(5096, "Attached context, {0}", attachment.name));
+        const ariaLabel = ( localize(5340, "Attached context, {0}", attachment.name));
         this.element.ariaLabel = ariaLabel;
         const classNames = ["file-icon", `${attachment.language}-lang-file-icon`];
         let resource;
@@ -641,7 +666,9 @@ let DefaultChatAttachmentWidget = class DefaultChatAttachmentWidget extends Abst
         configurationService,
         contextKeyService,
         instantiationService,
-        hoverService
+        hoverService,
+        modelService,
+        languageService
     ) {
         super(
             attachment,
@@ -656,11 +683,25 @@ let DefaultChatAttachmentWidget = class DefaultChatAttachmentWidget extends Abst
         this.contextKeyService = contextKeyService;
         this.instantiationService = instantiationService;
         this.hoverService = hoverService;
+        this.modelService = modelService;
+        this.languageService = languageService;
         this._tooltipHover = this._register(( new MutableDisposable()));
         const attachmentLabel = attachment.fullName ?? attachment.name;
-        const withIcon = attachment.icon?.id ? `$(${attachment.icon.id})\u00A0${attachmentLabel}` : attachmentLabel;
-        this.label.setLabel(withIcon, correspondingContentReference?.options?.status?.description);
-        this.element.ariaLabel = ( localize(5096, "Attached context, {0}", attachment.name));
+        if (isStringVariableEntry(attachment) && attachment.icon && (ThemeIcon.isFile(attachment.icon) || ThemeIcon.isFolder(attachment.icon)) && attachment.resourceUri) {
+            const fileKind = ThemeIcon.isFolder(attachment.icon) ? FileKind.FOLDER : FileKind.FILE;
+            const iconClasses = getIconClasses(this.modelService, this.languageService, attachment.resourceUri, fileKind);
+            this.label.setLabel(
+                attachmentLabel,
+                correspondingContentReference?.options?.status?.description,
+                {
+                    extraClasses: iconClasses
+                }
+            );
+        } else {
+            const withIcon = attachment.icon?.id ? `$(${attachment.icon.id})\u00A0${attachmentLabel}` : attachmentLabel;
+            this.label.setLabel(withIcon, correspondingContentReference?.options?.status?.description);
+        }
+        this.element.ariaLabel = ( localize(5340, "Attached context, {0}", attachment.name));
         if (attachment.kind === "diagnostic") {
             if (attachment.filterUri) {
                 resource = attachment.filterUri ? URI.revive(attachment.filterUri) : undefined;
@@ -673,11 +714,10 @@ let DefaultChatAttachmentWidget = class DefaultChatAttachmentWidget extends Abst
             }
         }
         if (attachment.kind === "symbol") {
-            const scopedContextKeyService = this._register(this.contextKeyService.createScoped(this.element));
             this._register(this.instantiationService.invokeFunction(
                 hookUpSymbolAttachmentDragAndContextMenu,
                 this.element,
-                scopedContextKeyService,
+                this.contextKeyService,
                 {
                     ...attachment,
                     kind: attachment.symbolKind
@@ -709,7 +749,7 @@ let DefaultChatAttachmentWidget = class DefaultChatAttachmentWidget extends Abst
         });
     }
 };
-DefaultChatAttachmentWidget = ( __decorate([( __param(8, ICommandService)), ( __param(9, IOpenerService)), ( __param(10, IConfigurationService)), ( __param(11, IContextKeyService)), ( __param(12, IInstantiationService)), ( __param(13, IHoverService))], DefaultChatAttachmentWidget));
+DefaultChatAttachmentWidget = ( __decorate([( __param(8, ICommandService)), ( __param(9, IOpenerService)), ( __param(10, IConfigurationService)), ( __param(11, IContextKeyService)), ( __param(12, IInstantiationService)), ( __param(13, IHoverService)), ( __param(14, IModelService)), ( __param(15, ILanguageService))], DefaultChatAttachmentWidget));
 let PromptFileAttachmentWidget = class PromptFileAttachmentWidget extends AbstractChatAttachmentWidget {
     constructor(
         attachment,
@@ -750,8 +790,8 @@ let PromptFileAttachmentWidget = class PromptFileAttachmentWidget extends Abstra
         const fileDirname = dirname(resource.path);
         const friendlyName = `${fileBasename} ${fileDirname}`;
         const isPrompt = attachment.id.startsWith(PromptFileVariableKind.PromptFile);
-        const ariaLabel = isPrompt ? ( localize(5097, "Prompt file, {0}", friendlyName)) : ( localize(5098, "Instructions attachment, {0}", friendlyName));
-        const typeLabel = isPrompt ? ( localize(5099, "Prompt")) : ( localize(5100, "Instructions"));
+        const ariaLabel = isPrompt ? ( localize(5341, "Prompt file, {0}", friendlyName)) : ( localize(5342, "Instructions attachment, {0}", friendlyName));
+        const typeLabel = isPrompt ? ( localize(5343, "Prompt")) : ( localize(5344, "Instructions"));
         const title = this.labelService.getUriLabel(resource) + (attachment.originLabel ? `\n${attachment.originLabel}` : "");
         this.element.classList.remove("warning", "error");
         const fileWithoutExtension = getCleanPromptName(resource);
@@ -811,7 +851,7 @@ let PromptTextAttachmentWidget = class PromptTextAttachmentWidget extends Abstra
                 })
             );
         }
-        this.label.setLabel(( localize(5101, "Additional Instructions")), undefined, undefined);
+        this.label.setLabel(( localize(5345, "Additional Instructions")), undefined, undefined);
         this._register(hoverService.setupDelayedHover(this.element, {
             ...commonHoverOptions,
             content: attachment.value
@@ -858,18 +898,18 @@ let ToolSetOrToolItemAttachmentWidget = class ToolSetOrToolItemAttachmentWidget
         }
         this.label.setLabel(`$(${icon.id})\u00A0${name}`, undefined);
         this.element.style.cursor = "pointer";
-        this.element.ariaLabel = ( localize(5096, "Attached context, {0}", name));
+        this.element.ariaLabel = ( localize(5340, "Attached context, {0}", name));
         let hoverContent;
         if (isToolSet(toolOrToolSet)) {
             hoverContent = ( localize(
-                5102,
+                5346,
                 "{0} - {1}",
                 toolOrToolSet.description ?? toolOrToolSet.referenceName,
                 toolOrToolSet.source.label
             ));
         } else if (toolOrToolSet) {
             hoverContent = ( localize(
-                5103,
+                5347,
                 "{0} - {1}",
                 toolOrToolSet.userDescription ?? toolOrToolSet.modelDescription,
                 toolOrToolSet.source.label
@@ -898,7 +938,8 @@ let NotebookCellOutputChatAttachmentWidget = class NotebookCellOutputChatAttachm
         hoverService,
         languageModelsService,
         notebookService,
-        instantiationService
+        instantiationService,
+        chatEntitlementService
     ) {
         super(
             attachment,
@@ -914,6 +955,7 @@ let NotebookCellOutputChatAttachmentWidget = class NotebookCellOutputChatAttachm
         this.languageModelsService = languageModelsService;
         this.notebookService = notebookService;
         this.instantiationService = instantiationService;
+        this.chatEntitlementService = chatEntitlementService;
         switch (attachment.mimeType) {
         case "application/vnd.code.notebook.error":
             {
@@ -940,7 +982,7 @@ let NotebookCellOutputChatAttachmentWidget = class NotebookCellOutputChatAttachm
         this.addResourceOpenHandlers(resource, undefined);
     }
     getAriaLabel(attachment) {
-        return localize(5104, "Attached Notebook output, {0}", attachment.name);
+        return localize(5348, "Attached Notebook output, {0}", attachment.name);
     }
     renderErrorOutput(resource, attachment) {
         const attachmentLabel = attachment.name;
@@ -968,9 +1010,9 @@ let NotebookCellOutputChatAttachmentWidget = class NotebookCellOutputChatAttachm
     renderImageOutput(resource, attachment) {
         let ariaLabel;
         if (attachment.omittedState === OmittedState.Full) {
-            ariaLabel = ( localize(5105, "Omitted this Notebook ouput: {0}", attachment.name));
+            ariaLabel = ( localize(5349, "Omitted this Notebook ouput: {0}", attachment.name));
         } else if (attachment.omittedState === OmittedState.Partial) {
-            ariaLabel = ( localize(5106, "Partially omitted this Notebook output: {0}", attachment.name));
+            ariaLabel = ( localize(5350, "Partially omitted this Notebook output: {0}", attachment.name));
         } else {
             ariaLabel = this.getAriaLabel(attachment);
         }
@@ -992,7 +1034,8 @@ let NotebookCellOutputChatAttachmentWidget = class NotebookCellOutputChatAttachm
             currentLanguageModelName,
             clickHandler,
             this.currentLanguageModel,
-            attachment.omittedState
+            attachment.omittedState,
+            this.chatEntitlementService.previewFeaturesDisabled
         ));
     }
     getOutputItem(resource, attachment) {
@@ -1012,7 +1055,7 @@ let NotebookCellOutputChatAttachmentWidget = class NotebookCellOutputChatAttachm
         return output?.outputs.find(o => o.mime === attachment.mimeType);
     }
 };
-NotebookCellOutputChatAttachmentWidget = ( __decorate([( __param(6, ICommandService)), ( __param(7, IOpenerService)), ( __param(8, IConfigurationService)), ( __param(9, IHoverService)), ( __param(10, ILanguageModelsService)), ( __param(11, INotebookService)), ( __param(12, IInstantiationService))], NotebookCellOutputChatAttachmentWidget));
+NotebookCellOutputChatAttachmentWidget = ( __decorate([( __param(6, ICommandService)), ( __param(7, IOpenerService)), ( __param(8, IConfigurationService)), ( __param(9, IHoverService)), ( __param(10, ILanguageModelsService)), ( __param(11, INotebookService)), ( __param(12, IInstantiationService)), ( __param(13, IChatEntitlementService))], NotebookCellOutputChatAttachmentWidget));
 let ElementChatAttachmentWidget = class ElementChatAttachmentWidget extends AbstractChatAttachmentWidget {
     constructor(
         attachment,
@@ -1023,7 +1066,8 @@ let ElementChatAttachmentWidget = class ElementChatAttachmentWidget extends Abst
         commandService,
         openerService,
         configurationService,
-        editorService
+        editorService,
+        hoverService
     ) {
         super(
             attachment,
@@ -1035,28 +1079,261 @@ let ElementChatAttachmentWidget = class ElementChatAttachmentWidget extends Abst
             openerService,
             configurationService
         );
-        const ariaLabel = ( localize(5107, "Attached element, {0}", attachment.name));
+        this.editorService = editorService;
+        this.hoverService = hoverService;
+        const ariaLabel = ( localize(5351, "Attached element, {0}", attachment.name));
         this.element.ariaLabel = ariaLabel;
         this.element.style.position = "relative";
         this.element.style.cursor = "pointer";
         const attachmentLabel = attachment.name;
         const withIcon = attachment.icon?.id ? `$(${attachment.icon.id})\u00A0${attachmentLabel}` : attachmentLabel;
         this.label.setLabel(withIcon, undefined, {
-            title: ( localize(5108, "Click to view the contents of: {0}", attachmentLabel))
+            title: ( localize(5352, "Click to view the contents of: {0}", attachmentLabel))
         });
+        this._register(this.hoverService.setupDelayedHover(
+            this.element,
+            this.getHoverContent(attachment),
+            commonHoverLifecycleOptions
+        ));
         this._register(addDisposableListener(this.element, EventType.CLICK, async () => {
-            const content = attachment.value?.toString() || "";
-            await editorService.openEditor({
-                resource: undefined,
-                contents: content,
-                options: {
-                    pinned: true
-                }
-            });
+            await this.openElementAttachment(attachment);
         }));
     }
+    getHoverContent(attachment) {
+        if (!this.shouldRenderRichElementHover(attachment)) {
+            return this.getSimpleHoverContent(attachment);
+        }
+        const hoverElement = $("div.chat-attached-context-hover.chat-element-hover");
+        const scrollableContent = $("div.chat-element-hover-content");
+        const innerScrollables = [];
+        {
+            const section = $("div.chat-element-hover-section");
+            const header = $("div.chat-element-hover-header", {}, ( localize(5353, "ELEMENT")));
+            section.appendChild(header);
+            const elementPre = $("pre.chat-element-hover-code");
+            const elementCode = $("code");
+            const tagDisplay = this.formatElementTag(attachment);
+            elementCode.textContent = tagDisplay;
+            elementPre.appendChild(elementCode);
+            const elementScrollable = this._register(( new DomScrollableElement(elementPre, {
+                horizontal: ScrollbarVisibility.Auto,
+                vertical: ScrollbarVisibility.Hidden
+            })));
+            innerScrollables.push(elementScrollable);
+            section.appendChild(elementScrollable.getDomNode());
+            scrollableContent.appendChild(section);
+        }
+        const computedStyleEntries = this.getComputedStyleEntriesForHover(attachment.computedStyles);
+        if (computedStyleEntries.length > 0) {
+            const section = $("div.chat-element-hover-section");
+            const header = $("div.chat-element-hover-header", {}, ( localize(5354, "KEY COMPUTED STYLES")));
+            section.appendChild(header);
+            const table = $("div.chat-element-hover-table");
+            for (const [name, value] of computedStyleEntries) {
+                const row = $("div.chat-element-hover-row");
+                row.appendChild($("span.chat-element-hover-label", {}, `${name}:`));
+                const valueContainer = $("span.chat-element-hover-value");
+                if ((name === "color" || name === "background-color") && value) {
+                    const swatch = $("span.chat-element-hover-color-swatch");
+                    swatch.style.backgroundColor = value;
+                    valueContainer.appendChild(swatch);
+                }
+                valueContainer.appendChild(document.createTextNode(value));
+                row.appendChild(valueContainer);
+                table.appendChild(row);
+            }
+            section.appendChild(table);
+            const showMoreButton = $("button.chat-element-hover-show-more", {
+                type: "button"
+            }, ( localize(5355, "Show More...")));
+            this._register(
+                addDisposableListener(showMoreButton, EventType.CLICK, async e => {
+                    EventHelper.stop(e, true);
+                    await this.openElementAttachment(attachment);
+                })
+            );
+            section.appendChild(showMoreButton);
+            scrollableContent.appendChild(section);
+        }
+        if (attachment.ancestors && attachment.ancestors.length > 1) {
+            const section = $("div.chat-element-hover-section");
+            const header = $("div.chat-element-hover-header", {}, ( localize(5356, "HTML PATH")));
+            section.appendChild(header);
+            const lines = [];
+            for (let i = 0; i < attachment.ancestors.length; i++) {
+                const ancestor = attachment.ancestors[i];
+                const indent = "  ".repeat(i);
+                const tag = this.formatAncestorTag(ancestor);
+                lines.push(`${indent}${tag}`);
+            }
+            const pathPre = $("pre.chat-element-hover-code");
+            const pathCode = $("code");
+            pathCode.textContent = lines.join("\n");
+            pathPre.appendChild(pathCode);
+            const pathScrollable = this._register(( new DomScrollableElement(pathPre, {
+                horizontal: ScrollbarVisibility.Auto,
+                vertical: ScrollbarVisibility.Hidden
+            })));
+            innerScrollables.push(pathScrollable);
+            section.appendChild(pathScrollable.getDomNode());
+            scrollableContent.appendChild(section);
+        }
+        if (attachment.attributes && ( Object.keys(attachment.attributes)).length > 0) {
+            const section = $("div.chat-element-hover-section");
+            const header = $("div.chat-element-hover-header", {}, ( localize(5357, "ATTRIBUTES")));
+            section.appendChild(header);
+            const table = $("div.chat-element-hover-table");
+            for (const [name, value] of Object.entries(attachment.attributes)) {
+                const row = $("div.chat-element-hover-row");
+                row.appendChild($("span.chat-element-hover-label", {}, `${name}:`));
+                row.appendChild($("span.chat-element-hover-value", {}, value));
+                table.appendChild(row);
+            }
+            section.appendChild(table);
+            scrollableContent.appendChild(section);
+        }
+        if (attachment.dimensions) {
+            const section = $("div.chat-element-hover-section");
+            const header = $("div.chat-element-hover-header", {}, ( localize(5358, "POSITION & SIZE")));
+            section.appendChild(header);
+            const table = $("div.chat-element-hover-table");
+            const dims = [
+                ["top:", attachment.dimensions.top],
+                ["left:", attachment.dimensions.left],
+                ["width:", attachment.dimensions.width],
+                ["height:", attachment.dimensions.height]
+            ];
+            for (const [label, val] of dims) {
+                const row = $("div.chat-element-hover-row");
+                row.appendChild($("span.chat-element-hover-label", {}, label));
+                row.appendChild($("span.chat-element-hover-value", {}, `${Math.round(val)}px`));
+                table.appendChild(row);
+            }
+            section.appendChild(table);
+            scrollableContent.appendChild(section);
+        }
+        if (attachment.innerText) {
+            const section = $("div.chat-element-hover-section");
+            const header = $("div.chat-element-hover-header", {}, ( localize(5359, "INNER TEXT")));
+            section.appendChild(header);
+            section.appendChild($("div.chat-element-hover-text", {}, attachment.innerText));
+            scrollableContent.appendChild(section);
+        }
+        const scrollableElement = this._register(( new DomScrollableElement(scrollableContent, {
+            vertical: ScrollbarVisibility.Auto,
+            horizontal: ScrollbarVisibility.Hidden,
+            consumeMouseWheelIfScrollbarIsNeeded: true
+        })));
+        const scrollableDomNode = scrollableElement.getDomNode();
+        scrollableDomNode.classList.add("chat-element-hover-scrollable");
+        hoverElement.appendChild(scrollableDomNode);
+        return {
+            ...commonHoverOptions,
+            content: hoverElement,
+            additionalClasses: ["chat-element-data-hover"],
+            onDidShow: () => {
+                for (const s of innerScrollables) {
+                    s.scanDomNode();
+                }
+                scrollableElement.scanDomNode();
+            }
+        };
+    }
+    shouldRenderRichElementHover(attachment) {
+        if (attachment.dimensions || attachment.innerText) {
+            return true;
+        }
+        if (attachment.ancestors && attachment.ancestors.length > 0) {
+            return true;
+        }
+        if (attachment.attributes && ( Object.keys(attachment.attributes)).length > 0) {
+            return true;
+        }
+        if (attachment.computedStyles && ( Object.keys(attachment.computedStyles)).length > 0) {
+            return true;
+        }
+        return false;
+    }
+    getSimpleHoverContent(attachment) {
+        const content = attachment.value?.toString() ?? "";
+        const hoverContent = ( new MarkdownString());
+        hoverContent.appendText(attachment.fullName ?? attachment.name);
+        if (content.trim().length > 0) {
+            hoverContent.appendMarkdown("\n\n");
+            hoverContent.appendCodeblock("text", content);
+        }
+        return {
+            ...commonHoverOptions,
+            content: hoverContent
+        };
+    }
+    getComputedStyleEntriesForHover(computedStyles) {
+        if (!computedStyles) {
+            return [];
+        }
+        const keyEntries = [];
+        for (const property of KEY_ELEMENT_HOVER_COMPUTED_STYLE_PROPERTIES) {
+            if (property === "margin" || property === "padding") {
+                const shorthand = this.getBoxShorthandValue(computedStyles, property);
+                if (typeof shorthand === "string") {
+                    keyEntries.push([property, shorthand]);
+                    continue;
+                }
+            }
+            const value = computedStyles[property];
+            if (typeof value === "string") {
+                keyEntries.push([property, value]);
+            }
+        }
+        if (keyEntries.length > 0) {
+            return keyEntries;
+        }
+        return Object.entries(computedStyles).slice(0, KEY_ELEMENT_HOVER_COMPUTED_STYLE_PROPERTIES.length);
+    }
+    getBoxShorthandValue(computedStyles, propertyName) {
+        const top = computedStyles[`${propertyName}-top`];
+        const right = computedStyles[`${propertyName}-right`];
+        const bottom = computedStyles[`${propertyName}-bottom`];
+        const left = computedStyles[`${propertyName}-left`];
+        if (typeof top === "string" && typeof right === "string" && typeof bottom === "string" && typeof left === "string") {
+            return `${top} ${right} ${bottom} ${left}`;
+        }
+        return computedStyles[propertyName];
+    }
+    async openElementAttachment(attachment) {
+        const content = attachment.value?.toString() || "";
+        await this.editorService.openEditor({
+            resource: undefined,
+            contents: content,
+            options: {
+                pinned: true
+            }
+        });
+    }
+    formatElementTag(attachment) {
+        const content = attachment.value?.toString() ?? "";
+        const htmlMatch = content.match(/\n\n(<[^>]+>)/);
+        if (htmlMatch) {
+            return htmlMatch[1];
+        }
+        const fallback = content.match(/<([^>]+)>/);
+        if (fallback) {
+            return `<${fallback[1]}>`;
+        }
+        return `<${attachment.name}>`;
+    }
+    formatAncestorTag(ancestor) {
+        const parts = [`<${ancestor.tagName}`];
+        if (ancestor.classNames?.length) {
+            parts.push(` class="${ancestor.classNames.join(" ")}"`);
+        }
+        if (ancestor.id) {
+            parts.push(` id="${ancestor.id}"`);
+        }
+        return parts.join("") + ">";
+    }
 };
-ElementChatAttachmentWidget = ( __decorate([( __param(5, ICommandService)), ( __param(6, IOpenerService)), ( __param(7, IConfigurationService)), ( __param(8, IEditorService))], ElementChatAttachmentWidget));
+ElementChatAttachmentWidget = ( __decorate([( __param(5, ICommandService)), ( __param(6, IOpenerService)), ( __param(7, IConfigurationService)), ( __param(8, IEditorService)), ( __param(9, IHoverService))], ElementChatAttachmentWidget));
 let SCMHistoryItemAttachmentWidget = class SCMHistoryItemAttachmentWidget extends AbstractChatAttachmentWidget {
     constructor(
         attachment,
@@ -1083,7 +1360,7 @@ let SCMHistoryItemAttachmentWidget = class SCMHistoryItemAttachmentWidget extend
         );
         this.label.setLabel(attachment.name, undefined);
         this.element.style.cursor = "pointer";
-        this.element.ariaLabel = ( localize(5096, "Attached context, {0}", attachment.name));
+        this.element.ariaLabel = ( localize(5340, "Attached context, {0}", attachment.name));
         const {
             content,
             disposables
@@ -1145,7 +1422,7 @@ let SCMHistoryItemChangeAttachmentWidget = class SCMHistoryItemChangeAttachmentW
             hidePath: true,
             nameSuffix
         });
-        this.element.ariaLabel = ( localize(5096, "Attached context, {0}", attachment.name));
+        this.element.ariaLabel = ( localize(5340, "Attached context, {0}", attachment.name));
         const {
             content,
             disposables
@@ -1201,7 +1478,7 @@ let SCMHistoryItemChangeRangeAttachmentWidget = class SCMHistoryItemChangeRangeA
             hidePath: true,
             nameSuffix
         });
-        this.element.ariaLabel = ( localize(5096, "Attached context, {0}", attachment.name));
+        this.element.ariaLabel = ( localize(5340, "Attached context, {0}", attachment.name));
         this.addResourceOpenHandlers(attachment.value, undefined);
     }
     async openResource(resource, options, isDirectory, range) {
@@ -1245,16 +1522,13 @@ function hookUpResourceAttachmentDragAndContextMenu(accessor, widget, resource)
     ));
     return store;
 }
-function hookUpSymbolAttachmentDragAndContextMenu(accessor, widget, scopedContextKeyService, attachment, contextMenuId) {
+function hookUpSymbolAttachmentDragAndContextMenu(accessor, widget, parentContextKeyService, attachment, contextMenuId) {
     const instantiationService = accessor.get(IInstantiationService);
     const languageFeaturesService = accessor.get(ILanguageFeaturesService);
     const textModelService = accessor.get(ITextModelService);
+    const contextMenuService = accessor.get(IContextMenuService);
+    const menuService = accessor.get(IMenuService);
     const store = ( new DisposableStore());
-    store.add(
-        setResourceContext(accessor, scopedContextKeyService, attachment.value.uri)
-    );
-    const chatResourceContext = chatAttachmentResourceContextKey.bindTo(scopedContextKeyService);
-    chatResourceContext.set(( attachment.value.uri.toString()));
     widget.draggable = true;
     store.add(addDisposableListener(widget, "dragstart", e => {
         instantiationService.invokeFunction(accessor => fillEditorsDragData(accessor, [{
@@ -1269,20 +1543,31 @@ function hookUpSymbolAttachmentDragAndContextMenu(accessor, widget, scopedContex
         }], e);
         e.dataTransfer?.setDragImage(widget, 0, 0);
     }));
-    const providerContexts = [[
-        EditorContextKeys.hasDefinitionProvider.bindTo(scopedContextKeyService),
-        languageFeaturesService.definitionProvider
-    ], [
-        EditorContextKeys.hasReferenceProvider.bindTo(scopedContextKeyService),
-        languageFeaturesService.referenceProvider
-    ], [
-        EditorContextKeys.hasImplementationProvider.bindTo(scopedContextKeyService),
-        languageFeaturesService.implementationProvider
-    ], [
-        EditorContextKeys.hasTypeDefinitionProvider.bindTo(scopedContextKeyService),
-        languageFeaturesService.typeDefinitionProvider
-    ]];
+    const scopedContextKeyService = store.add(parentContextKeyService.createScoped(widget));
+    chatAttachmentResourceContextKey.bindTo(scopedContextKeyService).set(( attachment.value.uri.toString()));
+    store.add(
+        setResourceContext(accessor, scopedContextKeyService, attachment.value.uri)
+    );
+    let providerContexts;
+    const ensureProviderContexts = () => {
+        if (!providerContexts) {
+            providerContexts = [[
+                EditorContextKeys.hasDefinitionProvider.bindTo(scopedContextKeyService),
+                languageFeaturesService.definitionProvider
+            ], [
+                EditorContextKeys.hasReferenceProvider.bindTo(scopedContextKeyService),
+                languageFeaturesService.referenceProvider
+            ], [
+                EditorContextKeys.hasImplementationProvider.bindTo(scopedContextKeyService),
+                languageFeaturesService.implementationProvider
+            ], [
+                EditorContextKeys.hasTypeDefinitionProvider.bindTo(scopedContextKeyService),
+                languageFeaturesService.typeDefinitionProvider
+            ]];
+        }
+    };
     const updateContextKeys = async () => {
+        ensureProviderContexts();
         const modelRef = await textModelService.createModelReference(attachment.value.uri);
         try {
             const model = modelRef.object.textEditorModel;
@@ -1293,14 +1578,27 @@ function hookUpSymbolAttachmentDragAndContextMenu(accessor, widget, scopedContex
             modelRef.dispose();
         }
     };
-    store.add(addBasicContextMenu(
-        accessor,
-        widget,
-        scopedContextKeyService,
-        contextMenuId,
-        attachment.value,
-        updateContextKeys
-    ));
+    store.add(
+        addDisposableListener(widget, EventType.CONTEXT_MENU, async domEvent => {
+            const event = ( new StandardMouseEvent(getWindow(domEvent), domEvent));
+            EventHelper.stop(domEvent, true);
+            try {
+                await updateContextKeys();
+            } catch (e) {
+                console.error(e);
+            }
+            contextMenuService.showContextMenu({
+                contextKeyService: scopedContextKeyService,
+                getAnchor: () => event,
+                getActions: () => {
+                    const menu = menuService.getMenuActions(contextMenuId, scopedContextKeyService, {
+                        arg: attachment.value
+                    });
+                    return getFlatContextMenuActions(menu);
+                }
+            });
+        })
+    );
     return store;
 }
 function setResourceContext(accessor, scopedContextKeyService, resource) {
@@ -1337,7 +1635,7 @@ function addBasicContextMenu(accessor, widget, scopedContextKeyService, menuId,
 const chatAttachmentResourceContextKey = ( new RawContextKey("chatAttachmentResource", undefined, {
     type: "URI",
     description: ( localize(
-        5109,
+        5360,
         "The full value of the chat attachment resource, including scheme and path"
     ))
 }));