@codingame/monaco-vscode-katex-common 30.0.1 → 31.0.0

package/vscode/src/vs/workbench/contrib/chat/browser/widget/chatArtifactsWidget.js

@@ -1,23 +1,29 @@
 
 import { __decorate, __param } from '@codingame/monaco-vscode-api/external/tslib/tslib.es6';
 import { $, clearNode, append } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/dom';
+import { ActionBar } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/ui/actionbar/actionbar';
 import { Button } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/ui/button/button';
 import { Codicon } from '@codingame/monaco-vscode-api/vscode/vs/base/common/codicons';
-import { Disposable, MutableDisposable, DisposableStore } from '@codingame/monaco-vscode-api/vscode/vs/base/common/lifecycle';
+import { Disposable, DisposableStore } from '@codingame/monaco-vscode-api/vscode/vs/base/common/lifecycle';
 import '@codingame/monaco-vscode-api/vscode/vs/base/common/observableInternal/index';
 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 { localize } from '@codingame/monaco-vscode-api/vscode/vs/nls';
+import { toAction } from '@codingame/monaco-vscode-api/vscode/vs/base/common/actions';
 import { IConfigurationService } from '@codingame/monaco-vscode-api/vscode/vs/platform/configuration/common/configuration.service';
+import { ICommandService } from '@codingame/monaco-vscode-api/vscode/vs/platform/commands/common/commands.service';
 import { IFileDialogService } from '@codingame/monaco-vscode-api/vscode/vs/platform/dialogs/common/dialogs.service';
 import { IFileService } from '@codingame/monaco-vscode-api/vscode/vs/platform/files/common/files.service';
 import { IInstantiationService } from '@codingame/monaco-vscode-api/vscode/vs/platform/instantiation/common/instantiation';
 import { WorkbenchObjectTree } from '@codingame/monaco-vscode-api/vscode/vs/platform/list/browser/listService';
 import { IOpenerService } from '@codingame/monaco-vscode-api/vscode/vs/platform/opener/common/opener.service';
 import { ChatConfiguration } from '@codingame/monaco-vscode-api/vscode/vs/workbench/contrib/chat/common/constants';
+import { ChatMemoryFileResource } from '../../common/chatArtifactExtraction.js';
 import { IChatArtifactsService } from '@codingame/monaco-vscode-api/vscode/vs/workbench/contrib/chat/common/tools/chatArtifactsService.service';
 import { IChatImageCarouselService } from '@codingame/monaco-vscode-api/vscode/vs/workbench/contrib/chat/browser/chatImageCarouselService.service';
 import { getEditorOverrideForChatResource } from './chatContentParts/chatInlineAnchorWidget.js';
+import { observableValue } from '@codingame/monaco-vscode-api/vscode/vs/base/common/observableInternal/observables/observableValue';
+import { derived } from '@codingame/monaco-vscode-api/vscode/vs/base/common/observableInternal/observables/derived';
 import { autorun } from '@codingame/monaco-vscode-api/vscode/vs/base/common/observableInternal/reactions/autorun';
 
 var ChatArtifactsWidget_1;
@@ -27,7 +33,10 @@ const ARTIFACT_TYPE_ICONS = {
     plan: Codicon.book
 };
 function isGroupNode(element) {
-    return "kind" in element && element.kind === "group";
+    return element.kind === "group";
+}
+function isLeafNode(element) {
+    return element.kind === "leaf";
 }
 let ChatArtifactsWidget = class ChatArtifactsWidget extends Disposable {
     static {
@@ -44,6 +53,7 @@ let ChatArtifactsWidget = class ChatArtifactsWidget extends Disposable {
         _instantiationService,
         _openerService,
         _configurationService,
+        _commandService,
         _fileService,
         _fileDialogService,
         _chatImageCarouselService
@@ -53,102 +63,104 @@ let ChatArtifactsWidget = class ChatArtifactsWidget extends Disposable {
         this._instantiationService = _instantiationService;
         this._openerService = _openerService;
         this._configurationService = _configurationService;
+        this._commandService = _commandService;
         this._fileService = _fileService;
         this._fileDialogService = _fileDialogService;
         this._chatImageCarouselService = _chatImageCarouselService;
-        this._autorunDisposable = this._register(( new MutableDisposable()));
-        this._isCollapsed = false;
-        this._treeStore = this._register(( new DisposableStore()));
+        this._sessionResource = observableValue(this, undefined);
+        this._isCollapsed = observableValue(this, false);
+        this._currentArtifacts = derived(this, reader => {
+            const sr = this._sessionResource.read(reader);
+            return sr ? this._chatArtifactsService.getArtifacts(sr) : undefined;
+        });
+        this._treeData = derived(this, reader => {
+            const artifacts = this._currentArtifacts.read(reader);
+            if (!artifacts) {
+                return undefined;
+            }
+            const groups = artifacts.artifactGroups.read(reader);
+            const totalCount = groups.reduce((sum, g) => sum + g.artifacts.length, 0);
+            if (totalCount === 0) {
+                return undefined;
+            }
+            const multiSource = groups.length > 1;
+            const treeElements = buildTreeElementsFromGroups(groups, multiSource, source => this._clearSource(source));
+            const visibleCount = countVisibleRows(treeElements);
+            const itemsShown = Math.min(visibleCount, ChatArtifactsWidget_1.MAX_ITEMS_SHOWN);
+            return {
+                totalCount,
+                treeElements,
+                treeHeight: itemsShown * ChatArtifactsWidget_1.ELEMENT_HEIGHT
+            };
+        });
         this.domNode = $(".chat-artifacts-widget");
         this.domNode.style.display = "none";
-    }
-    render(sessionResource) {
-        this._currentArtifacts = this._chatArtifactsService.getArtifacts(sessionResource);
-        clearNode(this.domNode);
-        this._treeStore.clear();
-        const expandoContainer = $(".chat-artifacts-expand");
-        const headerButton = this._treeStore.add(( new Button(expandoContainer, {
-            supportIcons: true
-        })));
-        headerButton.element.setAttribute("aria-expanded", String(!this._isCollapsed));
-        const titleSection = $(".chat-artifacts-title-section");
-        this._expandIcon = $(".expand-icon.codicon");
-        this._expandIcon.classList.add(this._isCollapsed ? "codicon-chevron-right" : "codicon-chevron-down");
-        this._expandIcon.setAttribute("aria-hidden", "true");
-        this._titleElement = $(".chat-artifacts-title");
-        titleSection.appendChild(this._expandIcon);
-        titleSection.appendChild(this._titleElement);
-        headerButton.element.appendChild(titleSection);
-        const clearButtonContainer = $(".artifacts-clear-button-container");
-        this._clearButton = this._treeStore.add(( new Button(clearButtonContainer, {
-            supportIcons: true,
-            ariaLabel: ( localize(6710, "Clear all artifacts"))
-        })));
-        this._clearButton.element.tabIndex = 0;
-        this._clearButton.icon = Codicon.clearAll;
-        this._treeStore.add(this._clearButton.onDidClick(() => {
-            this._clearAllArtifacts();
-        }));
-        headerButton.element.appendChild(clearButtonContainer);
-        this.domNode.appendChild(expandoContainer);
-        const listContainer = $(".chat-artifacts-list");
-        listContainer.style.display = this._isCollapsed ? "none" : "block";
-        this.domNode.appendChild(listContainer);
-        this._tree = this._treeStore.add(
-            this._instantiationService.createInstance(WorkbenchObjectTree, "ChatArtifactsTree", listContainer, ( new ChatArtifactsTreeDelegate()), [( new ChatArtifactGroupRenderer()), ( new ChatArtifactLeafRenderer(artifact => this._saveArtifact(artifact)))], {
-                alwaysConsumeMouseWheel: false,
-                accessibilityProvider: ( new ChatArtifactsAccessibilityProvider())
-            })
-        );
-        this._treeStore.add(this._tree.onDidOpen(e => {
-            if (!e.element) {
+        this._register(autorun(reader => {
+            const artifacts = this._currentArtifacts.read(reader);
+            clearNode(this.domNode);
+            if (!artifacts) {
+                this.domNode.style.display = "none";
                 return;
             }
-            if (isGroupNode(e.element)) {
-                if (e.element.onlyShowGroup) {
-                    this._openGroupInCarousel(e.element);
+            const store = reader.store;
+            const expandoContainer = $(".chat-artifacts-expand");
+            const headerButton = store.add(( new Button(expandoContainer, {
+                supportIcons: true
+            })));
+            const titleSection = $(".chat-artifacts-title-section");
+            const expandIcon = $(".expand-icon.codicon");
+            expandIcon.setAttribute("aria-hidden", "true");
+            const titleElement = $(".chat-artifacts-title");
+            titleSection.appendChild(expandIcon);
+            titleSection.appendChild(titleElement);
+            headerButton.element.appendChild(titleSection);
+            this.domNode.appendChild(expandoContainer);
+            const listContainer = $(".chat-artifacts-list");
+            this.domNode.appendChild(listContainer);
+            const tree = store.add(
+                this._instantiationService.createInstance(WorkbenchObjectTree, "ChatArtifactsTree", listContainer, ( new ChatArtifactsTreeDelegate()), [( new ChatArtifactGroupRenderer()), ( new ChatArtifactLeafRenderer(artifact => this._saveArtifact(artifact)))], {
+                    alwaysConsumeMouseWheel: false,
+                    accessibilityProvider: ( new ChatArtifactsAccessibilityProvider())
+                })
+            );
+            store.add(tree.onDidOpen(e => {
+                if (!e.element) {
+                    return;
                 }
-            } else {
-                const artifact = e.element;
-                if (artifact.type === "screenshot" && this._configurationService.getValue(ChatConfiguration.ImageCarouselEnabled)) {
-                    this._openScreenshotInCarousel(artifact);
-                } else if (artifact.uri) {
-                    const uri = ( URI.parse(artifact.uri));
-                    const editorOverride = getEditorOverrideForChatResource(uri, this._configurationService);
-                    this._openerService.open(uri, {
-                        fromUserGesture: true,
-                        editorOptions: {
-                            override: editorOverride
-                        }
-                    });
+                if (isGroupNode(e.element)) {
+                    if (e.element.onlyShowGroup) {
+                        this._openGroupInCarousel(e.element);
+                    }
+                } else if (isLeafNode(e.element)) {
+                    this._openLeafArtifact(e.element.artifact);
                 }
-            }
-        }));
-        this._treeStore.add(headerButton.onDidClick(() => {
-            this._isCollapsed = !this._isCollapsed;
-            this._expandIcon.classList.toggle("codicon-chevron-down", !this._isCollapsed);
-            this._expandIcon.classList.toggle("codicon-chevron-right", this._isCollapsed);
-            headerButton.element.setAttribute("aria-expanded", String(!this._isCollapsed));
-            listContainer.style.display = this._isCollapsed ? "none" : "block";
+            }));
+            store.add(headerButton.onDidClick(() => {
+                this._isCollapsed.set(!this._isCollapsed.read(undefined), undefined);
+            }));
+            store.add(autorun(reader => {
+                const collapsed = this._isCollapsed.read(reader);
+                expandIcon.classList.toggle("codicon-chevron-down", !collapsed);
+                expandIcon.classList.toggle("codicon-chevron-right", collapsed);
+                headerButton.element.setAttribute("aria-expanded", String(!collapsed));
+                listContainer.style.display = collapsed ? "none" : "block";
+            }));
+            store.add(autorun(reader => {
+                const data = this._treeData.read(reader);
+                if (!data) {
+                    this.domNode.style.display = "none";
+                    return;
+                }
+                this.domNode.style.display = "";
+                titleElement.textContent = data.totalCount === 1 ? ( localize(6793, "1 Artifact")) : ( localize(6794, "{0} Artifacts", data.totalCount));
+                tree.layout(data.treeHeight);
+                tree.getHTMLElement().style.height = `${data.treeHeight}px`;
+                tree.setChildren(null, data.treeElements);
+            }));
         }));
-        this._autorunDisposable.value = autorun(reader => {
-            const artifacts = this._currentArtifacts.artifacts.read(reader);
-            const mutable = this._currentArtifacts.mutable.read(reader);
-            if (artifacts.length === 0) {
-                this.domNode.style.display = "none";
-                return;
-            }
-            this.domNode.style.display = "";
-            this._clearButton.element.style.display = mutable ? "" : "none";
-            this._titleElement.textContent = artifacts.length === 1 ? ( localize(6711, "1 Artifact")) : ( localize(6712, "{0} Artifacts", artifacts.length));
-            const treeElements = buildTreeElements(artifacts);
-            const visibleCount = countVisibleRows(treeElements);
-            const itemsShown = Math.min(visibleCount, ChatArtifactsWidget_1.MAX_ITEMS_SHOWN);
-            const treeHeight = itemsShown * ChatArtifactsWidget_1.ELEMENT_HEIGHT;
-            this._tree.layout(treeHeight);
-            this._tree.getHTMLElement().style.height = `${treeHeight}px`;
-            this._tree.setChildren(null, treeElements);
-        });
+    }
+    setSessionResource(sessionResource) {
+        this._sessionResource.set(sessionResource, undefined);
     }
     async _openGroupInCarousel(group) {
         const first = group.artifacts[0];
@@ -156,16 +168,63 @@ let ChatArtifactsWidget = class ChatArtifactsWidget extends Disposable {
             await this._chatImageCarouselService.openCarouselAtResource(( URI.parse(first.uri)));
         }
     }
+    _openLeafArtifact(artifact) {
+        if (artifact.type === "screenshot" && this._configurationService.getValue(ChatConfiguration.ImageCarouselEnabled)) {
+            this._openScreenshotInCarousel(artifact);
+        } else if (artifact.uri) {
+            const uri = ( URI.parse(artifact.uri));
+            if (ChatMemoryFileResource.isChatMemoryFileUri(uri)) {
+                this._openMemoryFileArtifact(uri);
+            } else {
+                const editorOverride = getEditorOverrideForChatResource(uri, this._configurationService);
+                this._openerService.open(uri, {
+                    fromUserGesture: true,
+                    editorOptions: {
+                        override: editorOverride
+                    }
+                });
+            }
+        }
+    }
     async _openScreenshotInCarousel(clicked) {
         if (clicked.uri) {
             await this._chatImageCarouselService.openCarouselAtResource(( URI.parse(clicked.uri)));
         }
     }
-    _clearAllArtifacts() {
-        if (!this._currentArtifacts?.mutable.get()) {
+    async _openMemoryFileArtifact(uri) {
+        const {
+            memoryPath,
+            sessionResource
+        } = ChatMemoryFileResource.parse(uri);
+        const resolvedUriStr = await this._commandService.executeCommand(
+            "github.copilot.chat.tools.memory.resolveMemoryFileUri",
+            memoryPath,
+            sessionResource
+        );
+        if (resolvedUriStr) {
+            const resolvedUri = ( URI.parse(resolvedUriStr));
+            const editorOverride = getEditorOverrideForChatResource(resolvedUri, this._configurationService);
+            this._openerService.open(resolvedUri, {
+                fromUserGesture: true,
+                editorOptions: {
+                    override: editorOverride
+                }
+            });
+        }
+    }
+    _clearSource(source) {
+        const artifacts = this._currentArtifacts.get();
+        if (!artifacts) {
             return;
         }
-        this._currentArtifacts.clear();
+        switch (source.kind) {
+        case "agent":
+            artifacts.clearAgentArtifacts();
+            break;
+        case "subagent":
+            artifacts.clearSubagentArtifacts(source.invocationId);
+            break;
+        }
     }
     async _saveArtifact(artifact) {
         const sourceUri = ( URI.parse(artifact.uri));
@@ -174,70 +233,133 @@ let ChatArtifactsWidget = class ChatArtifactsWidget extends Disposable {
         const defaultUri = URI.joinPath(defaultPath, defaultFileName);
         const targetUri = await this._fileDialogService.showSaveDialog({
             defaultUri,
-            title: ( localize(6713, "Save Artifact"))
+            title: ( localize(6795, "Save Artifact"))
         });
         if (targetUri) {
             const content = await this._fileService.readFile(sourceUri);
             await this._fileService.writeFile(targetUri, content.value);
         }
     }
-    hide() {
-        this._autorunDisposable.clear();
-        this.domNode.style.display = "none";
-    }
 };
-ChatArtifactsWidget = ChatArtifactsWidget_1 = ( __decorate([( __param(0, IChatArtifactsService)), ( __param(1, IInstantiationService)), ( __param(2, IOpenerService)), ( __param(3, IConfigurationService)), ( __param(4, IFileService)), ( __param(5, IFileDialogService)), ( __param(6, IChatImageCarouselService))], ChatArtifactsWidget));
-function buildTreeElements(artifacts) {
-    const groups = ( new Map());
-    const ungrouped = [];
-    for (const artifact of artifacts) {
-        if (artifact.groupName) {
-            let group = groups.get(artifact.groupName);
-            if (!group) {
-                group = {
-                    config: {
-                        groupName: artifact.groupName,
-                        onlyShowGroup: artifact.onlyShowGroup ?? false
-                    },
-                    artifacts: []
-                };
-                groups.set(artifact.groupName, group);
-            }
-            group.artifacts.push(artifact);
-        } else {
-            ungrouped.push(artifact);
-        }
+ChatArtifactsWidget = ChatArtifactsWidget_1 = ( __decorate([( __param(0, IChatArtifactsService)), ( __param(1, IInstantiationService)), ( __param(2, IOpenerService)), ( __param(3, IConfigurationService)), ( __param(4, ICommandService)), ( __param(5, IFileService)), ( __param(6, IFileDialogService)), ( __param(7, IChatImageCarouselService))], ChatArtifactsWidget));
+function sourceDisplayName(source) {
+    switch (source.kind) {
+    case "rules":
+        return localize(6796, "Rules");
+    case "agent":
+        return localize(6797, "Agent");
+    case "subagent":
+        return source.name ?? ( localize(6798, "Subagent"));
     }
+}
+function buildTreeElementsFromGroups(sourceGroups, multiSource, onClearSource) {
     const elements = [];
-    for (const [, group] of groups) {
-        const groupNode = {
-            kind: "group",
-            groupName: group.config.groupName,
-            artifacts: group.artifacts,
-            onlyShowGroup: group.config.onlyShowGroup
-        };
-        if (group.config.onlyShowGroup) {
-            elements.push({
-                element: groupNode,
-                collapsible: false,
-                collapsed: false
-            });
+    for (const sourceGroup of sourceGroups) {
+        const prefix = multiSource ? sourceDisplayName(sourceGroup.source) : undefined;
+        const clearable = sourceGroup.source.kind !== "rules";
+        const onClear = clearable ? () => onClearSource(sourceGroup.source) : undefined;
+        const groups = ( new Map());
+        const ungrouped = [];
+        for (const artifact of sourceGroup.artifacts) {
+            if (artifact.groupName) {
+                let group = groups.get(artifact.groupName);
+                if (!group) {
+                    group = {
+                        config: {
+                            groupName: artifact.groupName,
+                            onlyShowGroup: artifact.onlyShowGroup ?? false
+                        },
+                        artifacts: []
+                    };
+                    groups.set(artifact.groupName, group);
+                }
+                group.artifacts.push(artifact);
+            } else {
+                ungrouped.push(artifact);
+            }
+        }
+        for (const [, group] of groups) {
+            const displayName = prefix ? `${prefix}: ${group.config.groupName}` : group.config.groupName;
+            if (group.artifacts.length === 1 && !group.config.onlyShowGroup) {
+                elements.push({
+                    element: {
+                        kind: "leaf",
+                        artifact: group.artifacts[0],
+                        description: displayName,
+                        onClear
+                    }
+                });
+                continue;
+            }
+            const groupNode = {
+                kind: "group",
+                groupName: displayName,
+                artifacts: group.artifacts,
+                onlyShowGroup: group.config.onlyShowGroup,
+                onClear
+            };
+            if (group.config.onlyShowGroup) {
+                elements.push({
+                    element: groupNode,
+                    collapsible: false,
+                    collapsed: false
+                });
+            } else {
+                elements.push({
+                    element: groupNode,
+                    collapsible: true,
+                    collapsed: false,
+                    children: ( group.artifacts.map(a => ({
+                        element: {
+                            kind: "leaf",
+                            artifact: a
+                        }
+                    })))
+                });
+            }
+        }
+        if (ungrouped.length > 0 && prefix) {
+            if (ungrouped.length === 1) {
+                elements.push({
+                    element: {
+                        kind: "leaf",
+                        artifact: ungrouped[0],
+                        description: prefix,
+                        onClear
+                    }
+                });
+            } else {
+                const groupNode = {
+                    kind: "group",
+                    groupName: prefix,
+                    artifacts: ungrouped,
+                    onlyShowGroup: false,
+                    onClear
+                };
+                elements.push({
+                    element: groupNode,
+                    collapsible: true,
+                    collapsed: false,
+                    children: ( ungrouped.map(a => ({
+                        element: {
+                            kind: "leaf",
+                            artifact: a
+                        }
+                    })))
+                });
+            }
         } else {
-            elements.push({
-                element: groupNode,
-                collapsible: true,
-                collapsed: false,
-                children: ( group.artifacts.map(a => ({
-                    element: a
-                })))
-            });
+            for (const artifact of ungrouped) {
+                elements.push({
+                    element: {
+                        kind: "leaf",
+                        artifact,
+                        onClear
+                    }
+                });
+            }
         }
     }
-    for (const artifact of ungrouped) {
-        elements.push({
-            element: artifact
-        });
-    }
     return elements;
 }
 function countVisibleRows(elements) {
@@ -261,12 +383,12 @@ class ChatArtifactsTreeDelegate {
 class ChatArtifactsAccessibilityProvider {
     getAriaLabel(element) {
         if (isGroupNode(element)) {
-            return localize(6714, "{0} ({1} items)", element.groupName, element.artifacts.length);
+            return localize(6799, "{0} ({1} items)", element.groupName, element.artifacts.length);
         }
-        return element.label;
+        return element.artifact.label;
     }
     getWidgetAriaLabel() {
-        return localize(6715, "Chat Artifacts");
+        return localize(6800, "Chat Artifacts");
     }
 }
 class ChatArtifactGroupRenderer {
@@ -280,10 +402,15 @@ class ChatArtifactGroupRenderer {
         const row = append(container, $(".chat-artifacts-list-row"));
         const iconElement = append(row, $(".chat-artifacts-list-icon"));
         const labelElement = append(row, $(".chat-artifacts-list-label"));
+        const actionsContainer = append(row, $(".chat-artifacts-list-actions"));
+        const elementDisposables = ( new DisposableStore());
+        const actionBar = ( new ActionBar(actionsContainer));
         return {
             container: row,
             iconElement,
-            labelElement
+            labelElement,
+            actionBar,
+            elementDisposables
         };
     }
     renderElement(node, _index, templateData) {
@@ -291,13 +418,33 @@ class ChatArtifactGroupRenderer {
         if (!isGroupNode(group)) {
             return;
         }
+        templateData.elementDisposables.clear();
         const firstType = group.artifacts[0]?.type;
         const icon = (firstType && ARTIFACT_TYPE_ICONS[firstType]) || Codicon.archive;
         templateData.iconElement.className = "chat-artifacts-list-icon " + ThemeIcon.asClassName(icon);
         templateData.labelElement.textContent = `${group.groupName} (${group.artifacts.length})`;
         templateData.container.title = group.groupName;
+        templateData.actionBar.clear();
+        if (group.onClear) {
+            const clearFn = group.onClear;
+            templateData.actionBar.push(toAction({
+                id: "chatArtifacts.clearSource",
+                label: ( localize(6801, "Clear")),
+                class: ThemeIcon.asClassName(Codicon.close),
+                run: () => clearFn()
+            }), {
+                icon: true,
+                label: false
+            });
+        }
+    }
+    disposeElement(_element, _index, templateData) {
+        templateData.elementDisposables.clear();
+    }
+    disposeTemplate(templateData) {
+        templateData.elementDisposables.dispose();
+        templateData.actionBar.dispose();
     }
-    disposeTemplate() {}
 }
 class ChatArtifactLeafRenderer {
     static {
@@ -311,33 +458,64 @@ class ChatArtifactLeafRenderer {
         const row = append(container, $(".chat-artifacts-list-row"));
         const iconElement = append(row, $(".chat-artifacts-list-icon"));
         const labelElement = append(row, $(".chat-artifacts-list-label"));
-        const saveButton = append(
-            row,
-            $(".chat-artifacts-list-save" + ThemeIcon.asCSSSelector(Codicon.save))
-        );
-        saveButton.title = ( localize(6716, "Save artifact"));
+        const descriptionElement = append(row, $(".chat-artifacts-list-description"));
+        const actionsContainer = append(row, $(".chat-artifacts-list-actions"));
+        const elementDisposables = ( new DisposableStore());
+        const actionBar = ( new ActionBar(actionsContainer));
         return {
             container: row,
             iconElement,
             labelElement,
-            saveButton
+            descriptionElement,
+            actionBar,
+            elementDisposables
         };
     }
     renderElement(node, _index, templateData) {
-        const artifact = node.element;
-        if (isGroupNode(artifact)) {
+        if (!isLeafNode(node.element)) {
             return;
         }
+        templateData.elementDisposables.clear();
+        const {
+            artifact,
+            description,
+            onClear
+        } = node.element;
         const icon = (artifact.type && ARTIFACT_TYPE_ICONS[artifact.type]) || Codicon.archive;
         templateData.iconElement.className = "chat-artifacts-list-icon " + ThemeIcon.asClassName(icon);
         templateData.labelElement.textContent = artifact.label;
+        templateData.descriptionElement.textContent = description ?? "";
+        templateData.descriptionElement.style.display = description ? "" : "none";
         templateData.container.title = artifact.uri;
-        templateData.saveButton.onclick = e => {
-            e.stopPropagation();
-            this._onSave(artifact);
-        };
+        templateData.actionBar.clear();
+        const actions = [];
+        if (onClear) {
+            const clearFn = onClear;
+            actions.push(toAction({
+                id: "chatArtifacts.clearSource",
+                label: ( localize(6801, "Clear")),
+                class: ThemeIcon.asClassName(Codicon.close),
+                run: () => clearFn()
+            }));
+        }
+        actions.push(toAction({
+            id: "chatArtifacts.save",
+            label: ( localize(6802, "Save artifact")),
+            class: ThemeIcon.asClassName(Codicon.save),
+            run: () => this._onSave(artifact)
+        }));
+        templateData.actionBar.push(actions, {
+            icon: true,
+            label: false
+        });
+    }
+    disposeElement(_element, _index, templateData) {
+        templateData.elementDisposables.clear();
+    }
+    disposeTemplate(templateData) {
+        templateData.elementDisposables.dispose();
+        templateData.actionBar.dispose();
     }
-    disposeTemplate() {}
 }
 
 export { ChatArtifactsWidget };

package/vscode/src/vs/workbench/contrib/chat/browser/widget/chatContentMarkdownRenderer.js

@@ -9,6 +9,8 @@ import { IConfigurationService } from '@codingame/monaco-vscode-api/vscode/vs/pl
 import { IHoverService } from '@codingame/monaco-vscode-api/vscode/vs/platform/hover/browser/hover.service';
 import { IOpenerService } from '@codingame/monaco-vscode-api/vscode/vs/platform/opener/common/opener.service';
 import product from '@codingame/monaco-vscode-api/vscode/vs/platform/product/common/product';
+import { Schemas } from '@codingame/monaco-vscode-api/vscode/vs/base/common/network';
+import { AGENT_HOST_SCHEME } from '@codingame/monaco-vscode-api/vscode/vs/platform/agentHost/common/agentHostUri';
 
 const _remoteImageDisallowed = () => false;
 const allowedChatMarkdownHtmlTags = ( Object.freeze([
@@ -69,14 +71,19 @@ let ChatContentMarkdownRenderer = class ChatContentMarkdownRenderer {
                 },
                 ...options?.sanitizerConfig,
                 allowedLinkSchemes: {
-                    augment: [product.urlProtocol, "copilot-skill"]
+                    augment: [
+                        product.urlProtocol,
+                        "copilot-skill",
+                        Schemas.vscodeBrowser,
+                        AGENT_HOST_SCHEME
+                    ]
                 },
                 remoteImageIsAllowed: _remoteImageDisallowed
             }
         };
         const mdWithBody = (markdown && markdown.supportHtml) ? {
             ...markdown,
-            value: `<body>\n\n${markdown.value}</body>`
+            value: `<body>\n\n${markdown.value}\n\n</body>`
         } : markdown;
         const result = this.markdownRendererService.render(mdWithBody, options, outElement);
         result.element.normalize();