@codingame/monaco-vscode-katex-common 24.1.0

package/vscode/src/vs/workbench/contrib/chat/browser/chatContentParts/chatMarkdownContentPart.js

@@ -0,0 +1,567 @@
+
+import { registerCss } from '@codingame/monaco-vscode-api/css';
+import { __decorate, __param } from '@codingame/monaco-vscode-api/external/tslib/tslib.es6';
+import { $ as $$1, getWindow, isHTMLElement, addDisposableListener, EventType, EventHelper } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/dom';
+import { allowedMarkdownHtmlAttributes } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/markdownRenderer';
+import { StandardMouseEvent } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/mouseEvent';
+import { status } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/ui/aria/aria';
+import { HoverStyle } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/ui/hover/hover';
+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 { coalesce } from '@codingame/monaco-vscode-api/vscode/vs/base/common/arrays';
+import { findLast } from '@codingame/monaco-vscode-api/vscode/vs/base/common/arraysFind';
+import { Codicon } from '@codingame/monaco-vscode-api/vscode/vs/base/common/codicons';
+import { Emitter } from '@codingame/monaco-vscode-api/vscode/vs/base/common/event';
+import { Lazy } from '@codingame/monaco-vscode-api/vscode/vs/base/common/lazy';
+import { Disposable, toDisposable, MutableDisposable, DisposableStore } from '@codingame/monaco-vscode-api/vscode/vs/base/common/lifecycle';
+import '@codingame/monaco-vscode-api/vscode/vs/base/common/observableInternal/index';
+import { ScrollbarVisibility } from '@codingame/monaco-vscode-api/vscode/vs/base/common/scrollable';
+import { equalsIgnoreCase } from '@codingame/monaco-vscode-api/vscode/vs/base/common/strings';
+import { ThemeIcon } from '@codingame/monaco-vscode-api/vscode/vs/base/common/themables';
+import { Range } from '@codingame/monaco-vscode-api/vscode/vs/editor/common/core/range';
+import { ILanguageService } from '@codingame/monaco-vscode-api/vscode/vs/editor/common/languages/language.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 { EditDeltaInfo } from '@codingame/monaco-vscode-api/vscode/vs/editor/common/textModelEditSource';
+import { localize } from '@codingame/monaco-vscode-api/vscode/vs/nls';
+import { getFlatContextMenuActions } from '@codingame/monaco-vscode-api/vscode/vs/platform/actions/browser/menuEntryActionViewItem';
+import { MenuId } from '@codingame/monaco-vscode-api/vscode/vs/platform/actions/common/actions';
+import { IMenuService } from '@codingame/monaco-vscode-api/vscode/vs/platform/actions/common/actions.service';
+import { IConfigurationService } from '@codingame/monaco-vscode-api/vscode/vs/platform/configuration/common/configuration.service';
+import { IContextKeyService } from '@codingame/monaco-vscode-api/vscode/vs/platform/contextkey/common/contextkey.service';
+import { IContextMenuService } from '@codingame/monaco-vscode-api/vscode/vs/platform/contextview/browser/contextView.service';
+import { registerOpenEditorListeners } from '../../../../../platform/editor/browser/editor.js';
+import { FileKind } from '@codingame/monaco-vscode-api/vscode/vs/platform/files/common/files';
+import { IHoverService } from '@codingame/monaco-vscode-api/vscode/vs/platform/hover/browser/hover.service';
+import { IInstantiationService } from '@codingame/monaco-vscode-api/vscode/vs/platform/instantiation/common/instantiation';
+import { ILabelService } from '@codingame/monaco-vscode-api/vscode/vs/platform/label/common/label.service';
+import { SIDE_GROUP } from '@codingame/monaco-vscode-api/vscode/vs/workbench/services/editor/common/editorService';
+import { IEditorService } from '@codingame/monaco-vscode-api/vscode/vs/workbench/services/editor/common/editorService.service';
+import { AccessibilityWorkbenchSettingId } from '@codingame/monaco-vscode-api/vscode/vs/workbench/contrib/accessibility/browser/accessibilityConfiguration';
+import { IAiEditTelemetryService } from '@codingame/monaco-vscode-api/vscode/vs/workbench/contrib/editTelemetry/browser/telemetry/aiEditTelemetry/aiEditTelemetryService.service';
+import { MarkedKatexSupport } from '../../../markdown/browser/markedKatexSupport.js';
+import { extractCodeblockUrisFromText } from '@codingame/monaco-vscode-api/vscode/vs/workbench/contrib/chat/common/annotations';
+import { IChatService } from '@codingame/monaco-vscode-api/vscode/vs/workbench/contrib/chat/common/chatService.service';
+import { isResponseVM, isRequestVM } from '@codingame/monaco-vscode-api/vscode/vs/workbench/contrib/chat/common/chatViewModel';
+import { ChatConfiguration } from '@codingame/monaco-vscode-api/vscode/vs/workbench/contrib/chat/common/constants';
+import { allowedChatMarkdownHtmlTags } from '../chatContentMarkdownRenderer.js';
+import { parseUnifiedDiff, MarkdownDiffBlockPart } from '../chatDiffBlockPart.js';
+import { ChatMarkdownDecorationsRenderer } from '../chatMarkdownDecorationsRenderer.js';
+import { localFileLanguageId, parseLocalFileData, CodeBlockPart } from '../codeBlockPart.js';
+import * as chatCodeBlockPill from '../media/chatCodeBlockPill.css';
+import { ChatExtensionsContentPart } from './chatExtensionsContentPart.js';
+import * as chatMarkdownPart from './media/chatMarkdownPart.css';
+import { derived } from '@codingame/monaco-vscode-api/vscode/vs/base/common/observableInternal/observables/derived';
+import { autorun, autorunSelfDisposable } from '@codingame/monaco-vscode-api/vscode/vs/base/common/observableInternal/reactions/autorun';
+
+var ChatMarkdownContentPart_1;
+registerCss(chatCodeBlockPill);
+registerCss(chatMarkdownPart);
+const $ = $$1;
+let ChatMarkdownContentPart = class ChatMarkdownContentPart extends Disposable {
+    static { ChatMarkdownContentPart_1 = this; }
+    static { this.ID_POOL = 0; }
+    get codeblocks() {
+        return this._codeblocks;
+    }
+    constructor(markdown, context, editorPool, fillInIncompleteTokens = false, codeBlockStartIndex = 0, renderer, markdownRenderOptions, currentWidth, codeBlockModelCollection, rendererOptions, contextKeyService, configurationService, textModelService, instantiationService, aiEditTelemetryService) {
+        super();
+        this.markdown = markdown;
+        this.editorPool = editorPool;
+        this.codeBlockModelCollection = codeBlockModelCollection;
+        this.rendererOptions = rendererOptions;
+        this.textModelService = textModelService;
+        this.instantiationService = instantiationService;
+        this.aiEditTelemetryService = aiEditTelemetryService;
+        this.codeblocksPartId = String(++ChatMarkdownContentPart_1.ID_POOL);
+        this.allRefs = [];
+        this._onDidChangeHeight = this._register(( new Emitter()));
+        this.onDidChangeHeight = this._onDidChangeHeight.event;
+        this._codeblocks = [];
+        this.mathLayoutParticipants = ( new Set());
+        const element = context.element;
+        const inUndoStop = findLast(context.content, e => e.kind === 'undoStop', context.contentIndex)?.id;
+        const orderedDisposablesList = [];
+        let globalCodeBlockIndexStart = codeBlockStartIndex;
+        let thisPartCodeBlockIndexStart = 0;
+        this.domNode = $('div.chat-markdown-part');
+        if (this.rendererOptions.accessibilityOptions?.statusMessage) {
+            this.domNode.ariaLabel = this.rendererOptions.accessibilityOptions.statusMessage;
+            if (configurationService.getValue(AccessibilityWorkbenchSettingId.VerboseChatProgressUpdates)) {
+                status(this.rendererOptions.accessibilityOptions.statusMessage);
+            }
+        }
+        const enableMath = configurationService.getValue(ChatConfiguration.EnableMath);
+        const doRenderMarkdown = () => {
+            if (this._store.isDisposed) {
+                return;
+            }
+            const markedExtensions = enableMath
+                ? coalesce([MarkedKatexSupport.getExtension(getWindow(context.container), {
+                        throwOnError: false
+                    })])
+                : [];
+            const markedOpts = {
+                gfm: true,
+                breaks: true,
+            };
+            const result = this._register(renderer.render(markdown.content, {
+                sanitizerConfig: MarkedKatexSupport.getSanitizerOptions({
+                    allowedTags: allowedChatMarkdownHtmlTags,
+                    allowedAttributes: allowedMarkdownHtmlAttributes,
+                }),
+                fillInIncompleteTokens,
+                codeBlockRendererSync: (languageId, text, raw) => {
+                    const isCodeBlockComplete = !isResponseVM(context.element) || context.element.isComplete || !raw || codeblockHasClosingBackticks(raw);
+                    if ((!text || (text.startsWith('<vscode_codeblock_uri') && !text.includes('\n'))) && !isCodeBlockComplete) {
+                        const hideEmptyCodeblock = $('div');
+                        hideEmptyCodeblock.style.display = 'none';
+                        return hideEmptyCodeblock;
+                    }
+                    if (languageId === 'diff' && raw && this.rendererOptions.allowInlineDiffs) {
+                        const match = raw.match(/^```diff:(\w+)/);
+                        if (match && isResponseVM(context.element)) {
+                            const actualLanguageId = match[1];
+                            const codeBlockUri = extractCodeblockUrisFromText(text);
+                            const { before, after } = parseUnifiedDiff(codeBlockUri?.textWithoutResult ?? text);
+                            const diffData = {
+                                element: context.element,
+                                codeBlockIndex: globalCodeBlockIndexStart++,
+                                languageId: actualLanguageId,
+                                beforeContent: before,
+                                afterContent: after,
+                                codeBlockResource: codeBlockUri?.uri,
+                                isReadOnly: true,
+                                horizontalPadding: this.rendererOptions.horizontalPadding,
+                            };
+                            const diffPart = this.instantiationService.createInstance(MarkdownDiffBlockPart, diffData, context.diffEditorPool, context.currentWidth());
+                            const ref = {
+                                object: diffPart,
+                                isStale: () => false,
+                                dispose: () => diffPart.dispose()
+                            };
+                            this.allRefs.push(ref);
+                            this._register(diffPart.onDidChangeContentHeight(() => this._onDidChangeHeight.fire()));
+                            orderedDisposablesList.push(ref);
+                            return diffPart.element;
+                        }
+                    }
+                    if (languageId === 'vscode-extensions') {
+                        const chatExtensions = this._register(instantiationService.createInstance(ChatExtensionsContentPart, { kind: 'extensions', extensions: text.split(',') }));
+                        this._register(chatExtensions.onDidChangeHeight(() => this._onDidChangeHeight.fire()));
+                        return chatExtensions.domNode;
+                    }
+                    const globalIndex = globalCodeBlockIndexStart++;
+                    const thisPartIndex = thisPartCodeBlockIndexStart++;
+                    let textModel;
+                    let range;
+                    let vulns;
+                    let codeblockEntry;
+                    if (equalsIgnoreCase(languageId, localFileLanguageId)) {
+                        try {
+                            const parsedBody = parseLocalFileData(text);
+                            range = parsedBody.range && Range.lift(parsedBody.range);
+                            textModel = this.textModelService.createModelReference(parsedBody.uri).then(ref => ref.object.textEditorModel);
+                        }
+                        catch (e) {
+                            return $('div');
+                        }
+                    }
+                    else {
+                        if (isResponseVM(element) || isRequestVM(element)) {
+                            const modelEntry = this.codeBlockModelCollection.getOrCreate(element.sessionResource, element, globalIndex);
+                            const fastUpdateModelEntry = this.codeBlockModelCollection.updateSync(element.sessionResource, element, globalIndex, { text, languageId, isComplete: isCodeBlockComplete });
+                            vulns = modelEntry.vulns;
+                            codeblockEntry = fastUpdateModelEntry;
+                            textModel = modelEntry.model;
+                        }
+                        else {
+                            textModel = undefined;
+                        }
+                    }
+                    const hideToolbar = isResponseVM(element) && element.errorDetails?.responseIsFiltered;
+                    const renderOptions = {
+                        ...this.rendererOptions.codeBlockRenderOptions,
+                    };
+                    if (hideToolbar !== undefined) {
+                        renderOptions.hideToolbar = hideToolbar;
+                    }
+                    const codeBlockInfo = { languageId, textModel, codeBlockIndex: globalIndex, codeBlockPartIndex: thisPartIndex, element, range, parentContextKeyService: contextKeyService, vulns, codemapperUri: codeblockEntry?.codemapperUri, renderOptions, chatSessionResource: element.sessionResource };
+                    if (element.isCompleteAddedRequest || !codeblockEntry?.codemapperUri || !codeblockEntry.isEdit) {
+                        const ref = this.renderCodeBlock(codeBlockInfo, text, isCodeBlockComplete, currentWidth);
+                        this.allRefs.push(ref);
+                        this._register(ref.object.onDidChangeContentHeight(() => this._onDidChangeHeight.fire()));
+                        const ownerMarkdownPartId = this.codeblocksPartId;
+                        const info = new (class {
+                            constructor() {
+                                this.ownerMarkdownPartId = ownerMarkdownPartId;
+                                this.codeBlockIndex = globalIndex;
+                                this.elementId = element.id;
+                                this.chatSessionResource = element.sessionResource;
+                                this.languageId = languageId;
+                                this.isStreamingEdit = false;
+                                this.editDeltaInfo = EditDeltaInfo.fromText(text);
+                                this.codemapperUri = undefined;
+                                this.uriPromise = textModel?.then(model => model.uri) ?? Promise.resolve(undefined);
+                            }
+                            get uri() {
+                                return ref.object.uri;
+                            }
+                            focus() {
+                                ref.object.focus();
+                            }
+                        })();
+                        this._codeblocks.push(info);
+                        orderedDisposablesList.push(ref);
+                        return ref.object.element;
+                    }
+                    else {
+                        const requestId = isRequestVM(element) ? element.id : element.requestId;
+                        const ref = this.renderCodeBlockPill(element.sessionResource, requestId, inUndoStop, codeBlockInfo.codemapperUri, this.markdown.fromSubagent);
+                        if (isResponseVM(codeBlockInfo.element)) {
+                            this.codeBlockModelCollection.update(codeBlockInfo.element.sessionResource, codeBlockInfo.element, codeBlockInfo.codeBlockIndex, { text, languageId: codeBlockInfo.languageId, isComplete: isCodeBlockComplete }).then((e) => {
+                                this._codeblocks[codeBlockInfo.codeBlockPartIndex].codemapperUri = e.codemapperUri;
+                                this._onDidChangeHeight.fire();
+                            });
+                        }
+                        this.allRefs.push(ref);
+                        const ownerMarkdownPartId = this.codeblocksPartId;
+                        const info = new (class {
+                            constructor() {
+                                this.ownerMarkdownPartId = ownerMarkdownPartId;
+                                this.codeBlockIndex = globalIndex;
+                                this.elementId = element.id;
+                                this.codemapperUri = codeblockEntry?.codemapperUri;
+                                this.chatSessionResource = element.sessionResource;
+                                this.isStreamingEdit = !isCodeBlockComplete;
+                                this.uriPromise = Promise.resolve(undefined);
+                                this.languageId = languageId;
+                                this.editDeltaInfo = EditDeltaInfo.fromText(text);
+                            }
+                            get uri() {
+                                return undefined;
+                            }
+                            focus() {
+                                return ref.object.element.focus();
+                            }
+                        })();
+                        this._codeblocks.push(info);
+                        orderedDisposablesList.push(ref);
+                        return ref.object.element;
+                    }
+                },
+                asyncRenderCallback: () => this._onDidChangeHeight.fire(),
+                markedOptions: markedOpts,
+                markedExtensions,
+                ...markdownRenderOptions,
+            }, this.domNode));
+            if (isResponseVM(element) && !element.model.codeBlockInfos && element.model.isComplete) {
+                element.model.initializeCodeBlockInfos(( this._codeblocks.map(info => {
+                    return {
+                        suggestionId: this.aiEditTelemetryService.createSuggestionId({
+                            presentation: 'codeBlock',
+                            feature: 'sideBarChat',
+                            editDeltaInfo: info.editDeltaInfo,
+                            languageId: info.languageId,
+                            modeId: element.model.request?.modeInfo?.modeId,
+                            modelId: element.model.request?.modelId,
+                            applyCodeBlockSuggestionId: undefined,
+                            source: undefined,
+                        })
+                    };
+                })));
+            }
+            const markdownDecorationsRenderer = instantiationService.createInstance(ChatMarkdownDecorationsRenderer);
+            this._register(markdownDecorationsRenderer.walkTreeAndAnnotateReferenceLinks(markdown, result.element));
+            const layoutParticipants = ( new Lazy(() => {
+                const observer = ( new ResizeObserver(() => this.mathLayoutParticipants.forEach(layout => layout())));
+                observer.observe(this.domNode);
+                this._register(toDisposable(() => observer.disconnect()));
+                return this.mathLayoutParticipants;
+            }));
+            for (const katexBlock of this.domNode.querySelectorAll('.katex-display')) {
+                if (!isHTMLElement(katexBlock)) {
+                    continue;
+                }
+                const scrollable = ( new DomScrollableElement(katexBlock.cloneNode(true), {
+                    vertical: ScrollbarVisibility.Hidden,
+                    horizontal: ScrollbarVisibility.Auto,
+                }));
+                orderedDisposablesList.push(scrollable);
+                katexBlock.replaceWith(scrollable.getDomNode());
+                layoutParticipants.value.add(() => { scrollable.scanDomNode(); });
+                scrollable.scanDomNode();
+            }
+            orderedDisposablesList.reverse().forEach(d => this._register(d));
+        };
+        if (enableMath && !MarkedKatexSupport.getExtension(getWindow(context.container))) {
+            MarkedKatexSupport.loadExtension(getWindow(context.container))
+                .catch(e => {
+                console.error('Failed to load MarkedKatexSupport extension:', e);
+            }).finally(() => {
+                doRenderMarkdown();
+                if (!this._store.isDisposed) {
+                    this._onDidChangeHeight.fire();
+                }
+            });
+        }
+        else {
+            doRenderMarkdown();
+        }
+    }
+    renderCodeBlockPill(sessionResource, requestId, inUndoStop, codemapperUri, fromSubagent) {
+        const codeBlock = this.instantiationService.createInstance(CollapsedCodeBlock, sessionResource, requestId, inUndoStop);
+        if (codemapperUri) {
+            codeBlock.render(codemapperUri, fromSubagent);
+        }
+        return {
+            object: codeBlock,
+            isStale: () => false,
+            dispose: () => codeBlock.dispose()
+        };
+    }
+    renderCodeBlock(data, text, isComplete, currentWidth) {
+        const ref = this.editorPool.get();
+        const editorInfo = ref.object;
+        if (isResponseVM(data.element)) {
+            this.codeBlockModelCollection.update(data.element.sessionResource, data.element, data.codeBlockIndex, { text, languageId: data.languageId, isComplete }).then((e) => {
+                this._codeblocks[data.codeBlockPartIndex].codemapperUri = e.codemapperUri;
+                this._onDidChangeHeight.fire();
+            });
+        }
+        editorInfo.render(data, currentWidth).then(() => {
+            this._onDidChangeHeight.fire();
+        });
+        return ref;
+    }
+    hasSameContent(other) {
+        if (other.kind !== 'markdownContent') {
+            return false;
+        }
+        if (other.content.value === this.markdown.content.value) {
+            return true;
+        }
+        const lastCodeblock = this._codeblocks.at(-1);
+        if (lastCodeblock && lastCodeblock.codemapperUri !== undefined && lastCodeblock.isStreamingEdit) {
+            return other.content.value.lastIndexOf('```') === this.markdown.content.value.lastIndexOf('```');
+        }
+        return false;
+    }
+    layout(width) {
+        this.allRefs.forEach((ref, index) => {
+            if (ref.object instanceof CodeBlockPart) {
+                ref.object.layout(width);
+            }
+            else if (ref.object instanceof MarkdownDiffBlockPart) {
+                ref.object.layout(width);
+            }
+            else if (ref.object instanceof CollapsedCodeBlock) {
+                const codeblockModel = this._codeblocks[index];
+                if (codeblockModel.codemapperUri && ref.object.uri?.toString() !== ( codeblockModel.codemapperUri.toString())) {
+                    ref.object.render(codeblockModel.codemapperUri);
+                }
+            }
+        });
+        this.mathLayoutParticipants.forEach(layout => layout());
+    }
+    addDisposable(disposable) {
+        this._register(disposable);
+    }
+};
+ChatMarkdownContentPart = ChatMarkdownContentPart_1 = ( __decorate([
+    ( __param(10, IContextKeyService)),
+    ( __param(11, IConfigurationService)),
+    ( __param(12, ITextModelService)),
+    ( __param(13, IInstantiationService)),
+    ( __param(14, IAiEditTelemetryService))
+], ChatMarkdownContentPart));
+function codeblockHasClosingBackticks(str) {
+    str = str.trim();
+    return !!str.match(/\n```+$/);
+}
+let CollapsedCodeBlock = class CollapsedCodeBlock extends Disposable {
+    get uri() { return this._uri; }
+    constructor(sessionResource, requestId, inUndoStop, labelService, editorService, modelService, languageService, contextMenuService, contextKeyService, menuService, hoverService, chatService, configurationService) {
+        super();
+        this.sessionResource = sessionResource;
+        this.requestId = requestId;
+        this.inUndoStop = inUndoStop;
+        this.labelService = labelService;
+        this.editorService = editorService;
+        this.modelService = modelService;
+        this.languageService = languageService;
+        this.contextMenuService = contextMenuService;
+        this.contextKeyService = contextKeyService;
+        this.menuService = menuService;
+        this.hoverService = hoverService;
+        this.chatService = chatService;
+        this.configurationService = configurationService;
+        this.hover = this._register(( new MutableDisposable()));
+        this.progressStore = this._store.add(( new DisposableStore()));
+        this.element = $('div.chat-codeblock-pill-container');
+        this.statusIndicatorContainer = $('div.status-indicator-container');
+        this.pillElement = $('.chat-codeblock-pill-widget');
+        this.pillElement.tabIndex = 0;
+        this.pillElement.classList.add('show-file-icons');
+        this.pillElement.role = 'button';
+        this.element.appendChild(this.statusIndicatorContainer);
+        this.element.appendChild(this.pillElement);
+        this.registerListeners();
+    }
+    registerListeners() {
+        this._register(registerOpenEditorListeners(this.pillElement, e => this.showDiff(e)));
+        this._register(addDisposableListener(this.pillElement, EventType.CONTEXT_MENU, e => {
+            const event = ( new StandardMouseEvent(getWindow(e), e));
+            EventHelper.stop(e, true);
+            this.contextMenuService.showContextMenu({
+                contextKeyService: this.contextKeyService,
+                getAnchor: () => event,
+                getActions: () => {
+                    if (!this.uri) {
+                        return [];
+                    }
+                    const menu = this.menuService.getMenuActions(MenuId.ChatEditingCodeBlockContext, this.contextKeyService, {
+                        arg: {
+                            sessionResource: this.sessionResource,
+                            requestId: this.requestId,
+                            uri: this.uri,
+                            stopId: this.inUndoStop
+                        }
+                    });
+                    return getFlatContextMenuActions(menu);
+                },
+            });
+        }));
+    }
+    showDiff({ editorOptions: options, openToSide }) {
+        if (this.currentDiff) {
+            this.editorService.openEditor({
+                original: { resource: this.currentDiff.originalURI },
+                modified: { resource: this.currentDiff.modifiedURI },
+                options
+            }, openToSide ? SIDE_GROUP : undefined);
+        }
+        else if (this.uri) {
+            this.editorService.openEditor({ resource: this.uri, options }, openToSide ? SIDE_GROUP : undefined);
+        }
+    }
+    render(uri, fromSubagent) {
+        this.pillElement.classList.toggle('from-sub-agent', !!fromSubagent);
+        this.progressStore.clear();
+        this._uri = uri;
+        const session = this.chatService.getSession(this.sessionResource);
+        const iconText = this.labelService.getUriBasenameLabel(uri);
+        const statusIconEl = $$1('span.status-icon');
+        const statusLabelEl = $$1('span.status-label', {}, '');
+        this.statusIndicatorContainer.replaceChildren(statusIconEl, statusLabelEl);
+        const iconEl = $$1('span.icon');
+        const iconLabelEl = $$1('span.icon-label', {}, iconText);
+        const labelDetail = $$1('span.label-detail', {}, '');
+        const progressFill = $$1('span.progress-fill');
+        this.pillElement.replaceChildren(progressFill, iconEl, iconLabelEl, labelDetail);
+        const tooltipLabel = this.labelService.getUriLabel(uri, { relative: true });
+        this.updateTooltip(tooltipLabel);
+        const editSession = session?.editingSession;
+        if (!editSession) {
+            return;
+        }
+        const diffObservable = ( derived(reader => {
+            const entry = editSession.readEntry(uri, reader);
+            return entry && editSession.getEntryDiffBetweenStops(entry.modifiedURI, this.requestId, this.inUndoStop);
+        }).map((d, r) => d?.read(r)));
+        const isStreaming = derived(r => {
+            const entry = editSession.readEntry(uri, r);
+            const currentlyModified = entry?.isCurrentlyBeingModifiedBy.read(r);
+            return !!currentlyModified && currentlyModified.responseModel.requestId === this.requestId && currentlyModified.undoStopId === this.inUndoStop;
+        });
+        let statusIconClasses = [];
+        let pillIconClasses = [];
+        this.progressStore.add(autorun(r => {
+            statusIconEl.classList.remove(...statusIconClasses);
+            iconEl.classList.remove(...pillIconClasses);
+            if (isStreaming.read(r)) {
+                const codicon = ThemeIcon.modify(Codicon.loading, 'spin');
+                statusIconClasses = ThemeIcon.asClassNameArray(codicon);
+                statusIconEl.classList.add(...statusIconClasses);
+                const entry = editSession.readEntry(uri, r);
+                const rwRatio = Math.floor((entry?.rewriteRatio.read(r) || 0) * 100);
+                statusLabelEl.textContent = ( localize(5057, 'Applying edits'));
+                const showAnimation = this.configurationService.getValue(ChatConfiguration.ShowCodeBlockProgressAnimation);
+                if (showAnimation) {
+                    progressFill.style.width = `${rwRatio}%`;
+                    this.pillElement.classList.add('progress-filling');
+                    labelDetail.textContent = '';
+                }
+                else {
+                    progressFill.style.width = '0%';
+                    this.pillElement.classList.remove('progress-filling');
+                    labelDetail.textContent = rwRatio === 0 || !rwRatio ? ( localize(5058, "Generating edits...")) : ( localize(5059, "({0}%)...", rwRatio));
+                }
+            }
+            else {
+                const statusCodeicon = Codicon.check;
+                statusIconClasses = ThemeIcon.asClassNameArray(statusCodeicon);
+                statusIconEl.classList.add(...statusIconClasses);
+                statusLabelEl.textContent = ( localize(5060, 'Edited'));
+                const fileKind = uri.path.endsWith('/') ? FileKind.FOLDER : FileKind.FILE;
+                pillIconClasses = getIconClasses(this.modelService, this.languageService, uri, fileKind);
+                iconEl.classList.add(...pillIconClasses);
+                this.pillElement.classList.remove('progress-filling');
+                progressFill.style.width = '0%';
+                labelDetail.textContent = '';
+            }
+        }));
+        this.progressStore.add(autorunSelfDisposable(r => {
+            const changes = diffObservable.read(r);
+            if (changes === undefined) {
+                return;
+            }
+            const labelAdded = this.pillElement.querySelector('.label-added') ?? this.pillElement.appendChild($$1('span.label-added'));
+            const labelRemoved = this.pillElement.querySelector('.label-removed') ?? this.pillElement.appendChild($$1('span.label-removed'));
+            if (changes && !changes?.identical && !changes?.quitEarly) {
+                this.currentDiff = changes;
+                labelAdded.textContent = `+${changes.added}`;
+                labelRemoved.textContent = `-${changes.removed}`;
+                const insertionsFragment = changes.added === 1 ? ( localize(5061, "1 insertion")) : ( localize(5062, "{0} insertions", changes.added));
+                const deletionsFragment = changes.removed === 1 ? ( localize(5063, "1 deletion")) : ( localize(5064, "{0} deletions", changes.removed));
+                const summary = ( localize(
+                    5065,
+                    'Edited {0}, {1}, {2}',
+                    iconText,
+                    insertionsFragment,
+                    deletionsFragment
+                ));
+                this.element.ariaLabel = summary;
+                if (changes.isFinal) {
+                    r.dispose();
+                }
+            }
+        }));
+    }
+    updateTooltip(tooltip) {
+        this.tooltip = tooltip;
+        if (!this.hover.value) {
+            this.hover.value = this.hoverService.setupDelayedHover(this.pillElement, () => ({
+                content: this.tooltip,
+                style: HoverStyle.Pointer,
+                position: { hoverPosition: HoverPosition.BELOW },
+                persistence: { hideOnKeyDown: true },
+            }));
+        }
+    }
+};
+CollapsedCodeBlock = ( __decorate([
+    ( __param(3, ILabelService)),
+    ( __param(4, IEditorService)),
+    ( __param(5, IModelService)),
+    ( __param(6, ILanguageService)),
+    ( __param(7, IContextMenuService)),
+    ( __param(8, IContextKeyService)),
+    ( __param(9, IMenuService)),
+    ( __param(10, IHoverService)),
+    ( __param(11, IChatService)),
+    ( __param(12, IConfigurationService))
+], CollapsedCodeBlock));
+
+export { ChatMarkdownContentPart, CollapsedCodeBlock, codeblockHasClosingBackticks };

package/vscode/src/vs/workbench/contrib/chat/browser/chatContentParts/chatMcpServersInteractionContentPart.d.ts

@@ -0,0 +1,34 @@
+import { Disposable, IDisposable } from "@codingame/monaco-vscode-api/vscode/vs/base/common/lifecycle";
+import { IMarkdownRendererService } from "@codingame/monaco-vscode-api/vscode/vs/platform/markdown/browser/markdownRenderer.service";
+import { IInstantiationService } from "@codingame/monaco-vscode-api/vscode/vs/platform/instantiation/common/instantiation";
+import { IOpenerService } from "@codingame/monaco-vscode-api/vscode/vs/platform/opener/common/opener.service";
+import { IMcpService } from "@codingame/monaco-vscode-api/vscode/vs/workbench/contrib/mcp/common/mcpTypes.service";
+import { IChatMcpServersStarting } from "@codingame/monaco-vscode-api/vscode/vs/workbench/contrib/chat/common/chatService";
+import { IChatRendererContent } from "@codingame/monaco-vscode-api/vscode/vs/workbench/contrib/chat/common/chatViewModel";
+import { IChatContentPart, IChatContentPartRenderContext } from "@codingame/monaco-vscode-api/vscode/vs/workbench/contrib/chat/browser/chatContentParts/chatContentParts";
+export declare class ChatMcpServersInteractionContentPart extends Disposable implements IChatContentPart {
+    private readonly data;
+    private readonly context;
+    private readonly mcpService;
+    private readonly instantiationService;
+    private readonly _openerService;
+    private readonly _markdownRendererService;
+    readonly domNode: HTMLElement;
+    private readonly _onDidChangeHeight;
+    readonly onDidChangeHeight: import("@codingame/monaco-vscode-api/vscode/vs/base/common/event").Event<void>;
+    private workingProgressPart;
+    private interactionContainer;
+    private readonly interactionMd;
+    private readonly showSpecificServersScheduler;
+    private readonly previousParts;
+    constructor(data: IChatMcpServersStarting, context: IChatContentPartRenderContext, mcpService: IMcpService, instantiationService: IInstantiationService, _openerService: IOpenerService, _markdownRendererService: IMarkdownRendererService);
+    private updateForState;
+    private createServerCommandLinks;
+    private updateDetailedProgress;
+    private renderInteractionRequired;
+    private updateInteractionRequired;
+    private createInteractionMessage;
+    private _start;
+    hasSameContent(other: IChatRendererContent): boolean;
+    addDisposable(disposable: IDisposable): void;
+}