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

package/vscode/src/vs/workbench/contrib/chat/browser/chatEditing/chatEditingExplanationWidget.js

@@ -1,509 +0,0 @@
-
-import { registerCss } from '@codingame/monaco-vscode-api/css';
-import * as chatEditingExplanationWidget from './media/chatEditingExplanationWidget.css';
-import { Codicon } from '@codingame/monaco-vscode-api/vscode/vs/base/common/codicons';
-import { Disposable, DisposableStore } from '@codingame/monaco-vscode-api/vscode/vs/base/common/lifecycle';
-import { Event } from '@codingame/monaco-vscode-api/vscode/vs/base/common/event';
-import { EditorOption } from '@codingame/monaco-vscode-api/vscode/vs/editor/common/config/editorOptions';
-import { renderIcon } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/ui/iconLabel/iconLabels';
-import { $, addDisposableListener, clearNode, createTextNode, getTotalWidth } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/dom';
-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 { overviewRulerRangeHighlight } from '@codingame/monaco-vscode-api/vscode/vs/editor/common/core/editorColorRegistry';
-import { OverviewRulerLane } from '@codingame/monaco-vscode-api/vscode/vs/editor/common/model';
-import { themeColorFromId } from '@codingame/monaco-vscode-api/vscode/vs/platform/theme/common/themeService';
-import { ChatViewId } from '@codingame/monaco-vscode-api/vscode/vs/workbench/contrib/chat/browser/chat';
-import { localize } from '@codingame/monaco-vscode-api/vscode/vs/nls';
-import '@codingame/monaco-vscode-api/vscode/vs/base/common/observableInternal/index';
-import { autorun } from '@codingame/monaco-vscode-api/vscode/vs/base/common/observableInternal/reactions/autorun';
-
-registerCss(chatEditingExplanationWidget);
-function getChangeTexts(change, diffInfo) {
-    const originalLines = [];
-    const modifiedLines = [];
-    for (let i = change.original.startLineNumber; i < change.original.endLineNumberExclusive; i++) {
-        const line = diffInfo.originalModel.getLineContent(i);
-        originalLines.push(line);
-    }
-    for (let i = change.modified.startLineNumber; i < change.modified.endLineNumberExclusive; i++) {
-        const line = diffInfo.modifiedModel.getLineContent(i);
-        modifiedLines.push(line);
-    }
-    return {
-        originalText: originalLines.join("\n"),
-        modifiedText: modifiedLines.join("\n")
-    };
-}
-function groupNearbyChanges(changes, lineThreshold = 5) {
-    if (changes.length === 0) {
-        return [];
-    }
-    const groups = [];
-    let currentGroup = [changes[0]];
-    for (let i = 1; i < changes.length; i++) {
-        const firstChange = currentGroup[0];
-        const currentChange = changes[i];
-        const widgetLine = firstChange.modified.startLineNumber;
-        const lastLine = currentChange.modified.startLineNumber;
-        const verticalSpan = lastLine - widgetLine;
-        if (verticalSpan <= lineThreshold) {
-            currentGroup.push(currentChange);
-        } else {
-            groups.push(currentGroup);
-            currentGroup = [currentChange];
-        }
-    }
-    if (currentGroup.length > 0) {
-        groups.push(currentGroup);
-    }
-    return groups;
-}
-class ChatEditingExplanationWidget extends Disposable {
-    static {
-        this._idPool = 0;
-    }
-    constructor(
-        _editor,
-        _changes,
-        diffInfo,
-        _chatWidgetService,
-        _viewsService,
-        _chatSessionResource
-    ) {
-        super();
-        this._editor = _editor;
-        this._changes = _changes;
-        this._chatWidgetService = _chatWidgetService;
-        this._viewsService = _viewsService;
-        this._chatSessionResource = _chatSessionResource;
-        this._id = `chat-explanation-widget-${ChatEditingExplanationWidget._idPool++}`;
-        this._explanationItems = ( new Map());
-        this._position = null;
-        this._explanations = [];
-        this._isExpanded = true;
-        this._isAllRead = false;
-        this._disposed = false;
-        this._startLineNumber = 1;
-        this._eventStore = this._register(( new DisposableStore()));
-        this._uri = diffInfo.modifiedModel.uri;
-        this._rangeHighlightDecoration = this._editor.createDecorationsCollection();
-        this._explanations = ( this._changes.map(change => {
-            const {
-                originalText,
-                modifiedText
-            } = getChangeTexts(change, diffInfo);
-            return {
-                startLineNumber: change.modified.startLineNumber,
-                endLineNumber: change.modified.endLineNumberExclusive - 1,
-                explanation: ( localize(6131, "Generating explanation...")),
-                read: false,
-                loading: true,
-                originalText,
-                modifiedText
-            };
-        }));
-        this._domNode = $("div.chat-explanation-widget");
-        this._headerNode = $("div.chat-explanation-header");
-        this._readIndicator = $("div.chat-explanation-read-indicator");
-        this._updateReadIndicator();
-        this._headerNode.appendChild(this._readIndicator);
-        this._titleNode = $("span.chat-explanation-title");
-        this._updateTitle();
-        this._headerNode.appendChild(this._titleNode);
-        this._headerNode.appendChild($("span.chat-explanation-spacer"));
-        this._toggleButton = $("div.chat-explanation-toggle");
-        this._updateToggleButton();
-        this._headerNode.appendChild(this._toggleButton);
-        this._dismissButton = $("div.chat-explanation-dismiss");
-        this._dismissButton.appendChild(renderIcon(Codicon.close));
-        this._dismissButton.title = ( localize(6132, "Dismiss"));
-        this._headerNode.appendChild(this._dismissButton);
-        this._domNode.appendChild(this._headerNode);
-        this._bodyNode = $("div.chat-explanation-body");
-        this._buildExplanationItems();
-        this._domNode.appendChild(this._bodyNode);
-        const arrow = $("div.chat-explanation-arrow");
-        this._domNode.appendChild(arrow);
-        this._setupEventHandlers();
-        this._domNode.classList.add("visible");
-        this._editor.addOverlayWidget(this);
-    }
-    _setupEventHandlers() {
-        this._eventStore.add(addDisposableListener(this._readIndicator, "click", e => {
-            e.stopPropagation();
-            this._isAllRead = !this._isAllRead;
-            for (const exp of this._explanations) {
-                exp.read = this._isAllRead;
-            }
-            this._updateReadIndicator();
-            this._updateExplanationItemsReadState();
-        }));
-        this._eventStore.add(addDisposableListener(this._toggleButton, "click", e => {
-            e.stopPropagation();
-            this._toggleExpanded();
-        }));
-        this._eventStore.add(addDisposableListener(this._headerNode, "click", () => {
-            this._toggleExpanded();
-        }));
-        this._eventStore.add(addDisposableListener(this._dismissButton, "click", e => {
-            e.stopPropagation();
-            this._dismiss();
-        }));
-    }
-    _toggleExpanded() {
-        this._isExpanded = !this._isExpanded;
-        this._bodyNode.classList.toggle("collapsed", !this._isExpanded);
-        this._updateToggleButton();
-        this._editor.layoutOverlayWidget(this);
-    }
-    _dismiss() {
-        this._domNode.classList.add("fadeOut");
-        const dispose = () => {
-            this.dispose();
-        };
-        const handle = setTimeout(dispose, 150);
-        this._domNode.addEventListener("animationend", () => {
-            clearTimeout(handle);
-            dispose();
-        }, {
-            once: true
-        });
-    }
-    _updateReadIndicator() {
-        clearNode(this._readIndicator);
-        const allRead = this._explanations.every(e => e.read);
-        const someRead = ( this._explanations.some(e => e.read));
-        this._isAllRead = allRead;
-        if (allRead) {
-            this._readIndicator.appendChild(renderIcon(Codicon.circle));
-            this._readIndicator.classList.add("read");
-            this._readIndicator.classList.remove("partial", "unread");
-            this._readIndicator.title = ( localize(6133, "Mark as unread"));
-        } else if (someRead) {
-            this._readIndicator.appendChild(renderIcon(Codicon.circleFilled));
-            this._readIndicator.classList.remove("read", "unread");
-            this._readIndicator.classList.add("partial");
-            this._readIndicator.title = ( localize(6134, "Mark all as read"));
-        } else {
-            this._readIndicator.appendChild(renderIcon(Codicon.circleFilled));
-            this._readIndicator.classList.remove("read", "partial");
-            this._readIndicator.classList.add("unread");
-            this._readIndicator.title = ( localize(6135, "Mark as read"));
-        }
-    }
-    _updateTitle() {
-        const count = this._explanations.length;
-        if (count === 1) {
-            this._titleNode.textContent = ( localize(6136, "1 change"));
-        } else {
-            this._titleNode.textContent = ( localize(6137, "{0} changes", count));
-        }
-    }
-    _updateToggleButton() {
-        clearNode(this._toggleButton);
-        if (this._isExpanded) {
-            this._toggleButton.appendChild(renderIcon(Codicon.chevronUp));
-            this._toggleButton.title = ( localize(6138, "Collapse"));
-        } else {
-            this._toggleButton.appendChild(renderIcon(Codicon.chevronDown));
-            this._toggleButton.title = ( localize(6139, "Expand"));
-        }
-    }
-    _buildExplanationItems() {
-        clearNode(this._bodyNode);
-        this._explanationItems.clear();
-        for (let i = 0; i < this._explanations.length; i++) {
-            const exp = this._explanations[i];
-            const item = $("div.chat-explanation-item");
-            const lineInfo = $("span.chat-explanation-line-info");
-            if (exp.startLineNumber === exp.endLineNumber) {
-                lineInfo.textContent = ( localize(6140, "Line {0}", exp.startLineNumber));
-            } else {
-                lineInfo.textContent = ( localize(6141, "Lines {0}-{1}", exp.startLineNumber, exp.endLineNumber));
-            }
-            item.appendChild(lineInfo);
-            const text = $("span.chat-explanation-text");
-            if (exp.loading) {
-                const loadingIcon = renderIcon(ThemeIcon.modify(Codicon.loading, "spin"));
-                loadingIcon.classList.add("chat-explanation-loading");
-                text.appendChild(loadingIcon);
-                const loadingText = createTextNode(" " + exp.explanation);
-                text.appendChild(loadingText);
-            } else {
-                text.textContent = exp.explanation;
-            }
-            item.appendChild(text);
-            const itemReadIndicator = $("div.chat-explanation-item-read");
-            this._updateItemReadIndicator(itemReadIndicator, exp.read);
-            item.appendChild(itemReadIndicator);
-            const replyButton = $("div.chat-explanation-reply-button");
-            replyButton.appendChild(renderIcon(Codicon.arrowRight));
-            replyButton.title = ( localize(6142, "Follow up on this change"));
-            item.appendChild(replyButton);
-            this._eventStore.add(addDisposableListener(replyButton, "click", async e => {
-                e.stopPropagation();
-                const range = ( new Range(exp.startLineNumber, 1, exp.endLineNumber, 1));
-                let chatWidget;
-                if (this._chatSessionResource) {
-                    chatWidget = await this._chatWidgetService.openSession(this._chatSessionResource);
-                } else {
-                    await this._viewsService.openView(ChatViewId, true);
-                    chatWidget = this._chatWidgetService.lastFocusedWidget;
-                }
-                if (chatWidget) {
-                    chatWidget.attachmentModel.addContext(chatWidget.attachmentModel.asFileVariableEntry(this._uri, range));
-                }
-            }));
-            this._eventStore.add(addDisposableListener(item, "click", e => {
-                e.stopPropagation();
-                exp.read = !exp.read;
-                this._updateItemReadIndicator(itemReadIndicator, exp.read);
-                this._updateReadIndicator();
-            }));
-            this._eventStore.add(addDisposableListener(item, "mouseenter", () => {
-                const range = ( new Range(
-                    exp.startLineNumber,
-                    1,
-                    exp.endLineNumber,
-                    this._editor.getModel()?.getLineMaxColumn(exp.endLineNumber) ?? 1
-                ));
-                this._rangeHighlightDecoration.set([
-                {
-                    range,
-                    options: {
-                        description: "chat-explanation-range-highlight",
-                        className: "rangeHighlight",
-                        isWholeLine: true,
-                        linesDecorationsClassName: "chat-explanation-range-glyph"
-                    }
-                },
-                {
-                    range,
-                    options: {
-                        description: "chat-explanation-range-highlight-overview",
-                        overviewRuler: {
-                            color: themeColorFromId(overviewRulerRangeHighlight),
-                            position: OverviewRulerLane.Full
-                        }
-                    }
-                }]);
-            }));
-            this._eventStore.add(addDisposableListener(item, "mouseleave", () => {
-                this._rangeHighlightDecoration.clear();
-            }));
-            this._explanationItems.set(i, {
-                item,
-                readIndicator: itemReadIndicator,
-                textElement: text
-            });
-            this._bodyNode.appendChild(item);
-        }
-    }
-    setExplanationByLineNumber(startLineNumber, endLineNumber, explanation) {
-        for (let i = 0; i < this._explanations.length; i++) {
-            const exp = this._explanations[i];
-            if (exp.startLineNumber === startLineNumber && exp.endLineNumber === endLineNumber) {
-                exp.explanation = explanation;
-                exp.loading = false;
-                this._updateExplanationText(i);
-                return true;
-            }
-        }
-        return false;
-    }
-    get explanationCount() {
-        return this._explanations.length;
-    }
-    _updateExplanationText(index) {
-        const itemData = this._explanationItems.get(index);
-        const exp = this._explanations[index];
-        if (itemData && exp) {
-            clearNode(itemData.textElement);
-            itemData.textElement.textContent = exp.explanation;
-        }
-    }
-    _updateItemReadIndicator(element, read) {
-        clearNode(element);
-        if (read) {
-            element.appendChild(renderIcon(Codicon.circle));
-            element.classList.add("read");
-            element.classList.remove("unread");
-        } else {
-            element.appendChild(renderIcon(Codicon.circleFilled));
-            element.classList.remove("read");
-            element.classList.add("unread");
-        }
-    }
-    _updateExplanationItemsReadState() {
-        this._explanationItems.forEach((
-            {
-                readIndicator
-            },
-            index
-        ) => {
-            const exp = this._explanations[index];
-            this._updateItemReadIndicator(readIndicator, exp.read);
-        });
-    }
-    layout(startLineNumber) {
-        if (this._disposed) {
-            return;
-        }
-        this._startLineNumber = startLineNumber;
-        const lineHeight = this._editor.getOption(EditorOption.lineHeight);
-        const {
-            contentLeft,
-            contentWidth,
-            verticalScrollbarWidth
-        } = this._editor.getLayoutInfo();
-        const scrollTop = this._editor.getScrollTop();
-        const widgetWidth = getTotalWidth(this._domNode) || 280;
-        this._position = {
-            stackOrdinal: 2,
-            preference: {
-                top: this._editor.getTopForLineNumber(startLineNumber) - scrollTop - lineHeight,
-                left: contentLeft + contentWidth - (2 * verticalScrollbarWidth + widgetWidth)
-            }
-        };
-        this._editor.layoutOverlayWidget(this);
-    }
-    toggle(show) {
-        this._domNode.classList.toggle("visible", show);
-        if (show && this._explanations.length > 0) {
-            this.layout(this._explanations[0].startLineNumber);
-        }
-    }
-    relayout() {
-        if (this._startLineNumber) {
-            this.layout(this._startLineNumber);
-        }
-    }
-    getId() {
-        return this._id;
-    }
-    getDomNode() {
-        return this._domNode;
-    }
-    getPosition() {
-        return this._position;
-    }
-    dispose() {
-        if (this._disposed) {
-            return;
-        }
-        this._disposed = true;
-        this._rangeHighlightDecoration.clear();
-        this._editor.removeOverlayWidget(this);
-        super.dispose();
-    }
-}
-class ChatEditingExplanationWidgetManager extends Disposable {
-    constructor(_editor, _chatWidgetService, _viewsService, modelManager, _modelUri) {
-        super();
-        this._editor = _editor;
-        this._chatWidgetService = _chatWidgetService;
-        this._viewsService = _viewsService;
-        this._modelUri = _modelUri;
-        this._widgets = [];
-        this._visible = false;
-        this._register(this._editor.onDidChangeModel(() => {
-            const newUri = this._editor.getModel()?.uri;
-            if (this._modelUri) {
-                if (newUri && ( newUri.toString()) === ( this._modelUri.toString())) {
-                    for (const widget of this._widgets) {
-                        widget.toggle(this._visible);
-                        widget.relayout();
-                    }
-                } else {
-                    for (const widget of this._widgets) {
-                        widget.toggle(false);
-                    }
-                }
-            }
-        }));
-        this._register(autorun(r => {
-            const state = modelManager.state.read(r);
-            const uriState = state.get(this._modelUri);
-            if (uriState) {
-                this._diffInfo = uriState.diffInfo;
-                this._chatSessionResource = uriState.chatSessionResource;
-                if (this._widgets.length === 0 && this._diffInfo) {
-                    this._createWidgets(this._diffInfo, this._chatSessionResource);
-                }
-                if (uriState.progress === "complete") {
-                    this._handleExplanations(this._modelUri, uriState.explanations);
-                }
-                this.show();
-            } else {
-                this.hide();
-            }
-        }));
-    }
-    _createWidgets(diffInfo, chatSessionResource) {
-        if (diffInfo.identical || diffInfo.changes.length === 0) {
-            return;
-        }
-        const groups = groupNearbyChanges(diffInfo.changes, 5);
-        for (const group of groups) {
-            const widget = ( new ChatEditingExplanationWidget(
-                this._editor,
-                group,
-                diffInfo,
-                this._chatWidgetService,
-                this._viewsService,
-                chatSessionResource
-            ));
-            this._widgets.push(widget);
-            this._register(widget);
-            widget.layout(group[0].modified.startLineNumber);
-        }
-        this._register(
-            Event.any(this._editor.onDidScrollChange, this._editor.onDidLayoutChange)(() => {
-                for (const widget of this._widgets) {
-                    widget.relayout();
-                }
-            })
-        );
-    }
-    _handleExplanations(uri, explanations) {
-        if (!this._modelUri || ( uri.toString()) !== ( this._modelUri.toString())) {
-            return;
-        }
-        for (const explanation of explanations) {
-            for (const widget of this._widgets) {
-                if (widget.setExplanationByLineNumber(
-                    explanation.startLineNumber,
-                    explanation.endLineNumber,
-                    explanation.explanation
-                )) {
-                    break;
-                }
-            }
-        }
-    }
-    show() {
-        this._visible = true;
-        for (const widget of this._widgets) {
-            widget.toggle(true);
-            widget.relayout();
-        }
-    }
-    hide() {
-        this._visible = false;
-        for (const widget of this._widgets) {
-            widget.toggle(false);
-        }
-    }
-    _clearWidgets() {
-        for (const widget of this._widgets) {
-            widget.dispose();
-        }
-        this._widgets.length = 0;
-    }
-    dispose() {
-        this._clearWidgets();
-        super.dispose();
-    }
-}
-
-export { ChatEditingExplanationWidget, ChatEditingExplanationWidgetManager };

package/vscode/src/vs/workbench/contrib/chat/browser/chatEditing/media/chatEditingEditorOverlay.css

@@ -1,130 +0,0 @@
-/*---------------------------------------------------------------------------------------------
- *  Copyright (c) Microsoft Corporation. All rights reserved.
- *  Licensed under the MIT License. See License.txt in the project root for license information.
- *--------------------------------------------------------------------------------------------*/
-
-.chat-editor-overlay-widget {
-	padding: 2px 4px;
-	color: var(--vscode-foreground);
-	background-color: var(--vscode-editorWidget-background);
-	border-radius: 6px;
-	border: 1px solid var(--vscode-editorWidget-border);
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	gap: 4px;
-	z-index: 10;
-	box-shadow: var(--vscode-shadow-md);
-	overflow: hidden;
-}
-
-@keyframes pulse {
-	0% {
-		box-shadow: var(--vscode-shadow-md);
-	}
-	50% {
-		box-shadow: var(--vscode-shadow-lg);
-	}
-	100% {
-		box-shadow: var(--vscode-shadow-md);
-	}
-}
-
-.chat-editor-overlay-widget.busy {
-	animation: pulse ease-in 2.3s infinite;
-}
-
-.chat-editor-overlay-widget .chat-editor-overlay-progress {
-	align-items: center;
-	display: none;
-	padding: 5px 0 5px 5px;
-	font-size: 12px;
-	overflow: hidden;
-	gap: 6px;
-}
-
-.chat-editor-overlay-widget.busy .chat-editor-overlay-progress {
-	display: inline-flex;
-}
-
-.chat-editor-overlay-widget .chat-editor-overlay-progress .progress-message {
-	white-space: nowrap;
-	max-width: 13em;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	padding-right: 8px;
-}
-
-.chat-editor-overlay-widget .action-item > .action-label {
-	padding: 4px 6px;
-	font-size: 11px;
-	line-height: 14px;
-	border-radius: 4px; /* same as overlay widget */
-}
-
-.chat-editor-overlay-widget .monaco-action-bar .actions-container {
-	gap: 4px;
-}
-
-.chat-editor-overlay-widget .action-item.primary > .action-label {
-	background-color: var(--vscode-button-background);
-	color: var(--vscode-button-foreground);
-}
-
-.monaco-workbench .chat-editor-overlay-widget .monaco-action-bar .action-item.primary > .action-label:hover {
-	background-color: var(--vscode-button-hoverBackground);
-}
-
-.chat-editor-overlay-widget.busy .chat-editor-overlay-progress .codicon {
-	color: var(--vscode-foreground);
-}
-
-.chat-editor-overlay-widget .action-item > .action-label.codicon:not(.separator) {
-	color: var(--vscode-foreground);
-	width: 22px; /* align with default icon button dimensions */
-	height: 22px;
-	padding: 0;
-	font-size: 16px;
-	line-height: 22px;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-}
-
-.chat-diff-change-content-widget .monaco-action-bar .action-item.disabled,
-.chat-editor-overlay-widget .monaco-action-bar .action-item.disabled {
-
-	> .action-label.codicon::before,
-	> .action-label.codicon,
-	> .action-label,
-	> .action-label:hover {
-		color: var(--vscode-button-separator);
-		opacity: 1;
-	}
-}
-
-.chat-editor-overlay-widget .action-item.label-item {
-	font-variant-numeric: tabular-nums;
-}
-
-.chat-editor-overlay-widget .monaco-action-bar .action-item.label-item > .action-label,
-.chat-editor-overlay-widget .monaco-action-bar .action-item.label-item > .action-label:hover {
-	color: var(--vscode-foreground);
-	opacity: 1;
-}
-
-.chat-editor-overlay-widget .action-item.auto {
-	position: relative;
-	overflow: hidden;
-}
-
-.chat-editor-overlay-widget .action-item.auto::before {
-	content: '';
-	position: absolute;
-	top: 0;
-	left: var(--vscode-action-item-auto-timeout, -100%);
-	width: 100%;
-	height: 100%;
-	background-color: var(--vscode-toolbar-hoverBackground);
-	transition: left 0.5s linear;
-}