@codingame/monaco-vscode-katex-common 24.1.0

package/vscode/src/vs/workbench/contrib/inlineChat/browser/inlineChatZoneWidget.js

@@ -0,0 +1,279 @@
+
+import { __decorate, __param } from '@codingame/monaco-vscode-api/external/tslib/tslib.es6';
+import { addDisposableListener, Dimension } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/dom';
+import { status } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/ui/aria/aria';
+import { toDisposable, MutableDisposable } from '@codingame/monaco-vscode-api/vscode/vs/base/common/lifecycle';
+import '@codingame/monaco-vscode-api/vscode/vs/base/common/observableInternal/index';
+import { isEqual } from '@codingame/monaco-vscode-api/vscode/vs/base/common/resources';
+import { assertType } from '@codingame/monaco-vscode-api/vscode/vs/base/common/types';
+import { StableEditorBottomScrollState } from '@codingame/monaco-vscode-api/vscode/vs/editor/browser/stableEditorScroll';
+import { EditorOption } from '@codingame/monaco-vscode-api/vscode/vs/editor/common/config/editorOptions';
+import { ScrollType } from '@codingame/monaco-vscode-api/vscode/vs/editor/common/editorCommon';
+import { ZoneWidget } from '@codingame/monaco-vscode-api/vscode/vs/editor/contrib/zoneWidget/browser/zoneWidget';
+import { localize } from '@codingame/monaco-vscode-api/vscode/vs/nls';
+import { IContextKeyService } from '@codingame/monaco-vscode-api/vscode/vs/platform/contextkey/common/contextkey.service';
+import { IInstantiationService } from '@codingame/monaco-vscode-api/vscode/vs/platform/instantiation/common/instantiation';
+import { ILogService } from '@codingame/monaco-vscode-api/vscode/vs/platform/log/common/log.service';
+import { ChatMode } from '@codingame/monaco-vscode-api/vscode/vs/workbench/contrib/chat/common/chatModes';
+import { isResponseVM } from '@codingame/monaco-vscode-api/vscode/vs/workbench/contrib/chat/common/chatViewModel';
+import { CTX_INLINE_CHAT_OUTER_CURSOR_POSITION, MENU_INLINE_CHAT_SIDE, MENU_INLINE_CHAT_WIDGET_SECONDARY, ACTION_REGENERATE_RESPONSE, ACTION_TOGGLE_DIFF, ACTION_REPORT_ISSUE, MENU_INLINE_CHAT_WIDGET_STATUS } from '../common/inlineChat.js';
+import { EditorBasedInlineChatWidget } from './inlineChatWidget.js';
+import { autorun } from '@codingame/monaco-vscode-api/vscode/vs/base/common/observableInternal/reactions/autorun';
+
+var InlineChatZoneWidget_1;
+let InlineChatZoneWidget = class InlineChatZoneWidget extends ZoneWidget {
+    static { InlineChatZoneWidget_1 = this; }
+    static { this._options = {
+        showFrame: true,
+        frameWidth: 1,
+        isResizeable: true,
+        showArrow: false,
+        isAccessible: true,
+        className: 'inline-chat-widget',
+        keepEditorSelection: true,
+        showInHiddenAreas: true,
+        ordinal: 50000,
+    }; }
+    constructor(location, options, editors,
+    clearDelegate, _instaService, _logService, contextKeyService) {
+        super(editors.editor, InlineChatZoneWidget_1._options);
+        this._instaService = _instaService;
+        this._logService = _logService;
+        this._scrollUp = this._disposables.add(( new ScrollUpState(this.editor)));
+        this.notebookEditor = editors.notebookEditor;
+        this._ctxCursorPosition = CTX_INLINE_CHAT_OUTER_CURSOR_POSITION.bindTo(contextKeyService);
+        this._disposables.add(toDisposable(() => {
+            this._ctxCursorPosition.reset();
+        }));
+        this.widget = this._instaService.createInstance(EditorBasedInlineChatWidget, location, this.editor, {
+            statusMenuId: {
+                menu: MENU_INLINE_CHAT_WIDGET_STATUS,
+                options: {
+                    buttonConfigProvider: (action, index) => {
+                        const isSecondary = index > 0;
+                        if (( ( new Set([ACTION_REGENERATE_RESPONSE, ACTION_TOGGLE_DIFF, ACTION_REPORT_ISSUE])).has(action.id))) {
+                            return { isSecondary, showIcon: true, showLabel: false };
+                        }
+                        else {
+                            return { isSecondary };
+                        }
+                    }
+                }
+            },
+            secondaryMenuId: MENU_INLINE_CHAT_WIDGET_SECONDARY,
+            inZoneWidget: true,
+            chatWidgetViewOptions: {
+                menus: {
+                    telemetrySource: 'interactiveEditorWidget-toolbar',
+                    inputSideToolbar: MENU_INLINE_CHAT_SIDE
+                },
+                clear: clearDelegate,
+                ...options,
+                rendererOptions: {
+                    renderTextEditsAsSummary: (uri) => {
+                        return isEqual(uri, editors.editor.getModel()?.uri);
+                    },
+                    renderDetectedCommandsWithRequest: true,
+                    ...options?.rendererOptions
+                },
+                defaultMode: ChatMode.Ask
+            }
+        });
+        this._disposables.add(this.widget);
+        let revealFn;
+        this._disposables.add(this.widget.chatWidget.onWillMaybeChangeHeight(() => {
+            if (this.position) {
+                revealFn = this._createZoneAndScrollRestoreFn(this.position);
+            }
+        }));
+        this._disposables.add(this.widget.onDidChangeHeight(() => {
+            if (this.position && !this._usesResizeHeight) {
+                revealFn ??= this._createZoneAndScrollRestoreFn(this.position);
+                const height = this._computeHeight();
+                this._relayout(height.linesValue);
+                revealFn?.();
+                revealFn = undefined;
+            }
+        }));
+        this.create();
+        this._disposables.add(autorun(r => {
+            const isBusy = this.widget.requestInProgress.read(r);
+            this.domNode.firstElementChild?.classList.toggle('busy', isBusy);
+        }));
+        this._disposables.add(addDisposableListener(this.domNode, 'click', e => {
+            if (!this.editor.hasWidgetFocus() && !this.widget.hasFocus()) {
+                this.editor.focus();
+            }
+        }, true));
+        const updateCursorIsAboveContextKey = () => {
+            if (!this.position || !this.editor.hasModel()) {
+                this._ctxCursorPosition.reset();
+            }
+            else if (this.position.lineNumber === this.editor.getPosition().lineNumber) {
+                this._ctxCursorPosition.set('above');
+            }
+            else if (this.position.lineNumber + 1 === this.editor.getPosition().lineNumber) {
+                this._ctxCursorPosition.set('below');
+            }
+            else {
+                this._ctxCursorPosition.reset();
+            }
+        };
+        this._disposables.add(this.editor.onDidChangeCursorPosition(e => updateCursorIsAboveContextKey()));
+        this._disposables.add(this.editor.onDidFocusEditorText(e => updateCursorIsAboveContextKey()));
+        updateCursorIsAboveContextKey();
+    }
+    _fillContainer(container) {
+        container.style.setProperty('--vscode-inlineChat-background', 'var(--vscode-editor-background)');
+        container.appendChild(this.widget.domNode);
+    }
+    _doLayout(heightInPixel) {
+        this._updatePadding();
+        const info = this.editor.getLayoutInfo();
+        const width = info.contentWidth - info.verticalScrollbarWidth;
+        this._dimension = ( new Dimension(width, heightInPixel));
+        this.widget.layout(this._dimension);
+    }
+    _computeHeight() {
+        const chatContentHeight = this.widget.contentHeight;
+        const editorHeight = this.notebookEditor?.getLayoutInfo().height ?? this.editor.getLayoutInfo().height;
+        const contentHeight = this._decoratingElementsHeight() + Math.min(chatContentHeight, Math.max(this.widget.minHeight, editorHeight * 0.42));
+        const heightInLines = contentHeight / this.editor.getOption(EditorOption.lineHeight);
+        return { linesValue: heightInLines, pixelsValue: contentHeight };
+    }
+    _getResizeBounds() {
+        const lineHeight = this.editor.getOption(EditorOption.lineHeight);
+        const decoHeight = this._decoratingElementsHeight();
+        const minHeightPx = decoHeight + this.widget.minHeight;
+        const maxHeightPx = decoHeight + this.widget.contentHeight;
+        return {
+            minLines: minHeightPx / lineHeight,
+            maxLines: maxHeightPx / lineHeight
+        };
+    }
+    _onWidth(_widthInPixel) {
+        if (this._dimension) {
+            this._doLayout(this._dimension.height);
+        }
+    }
+    show(position) {
+        assertType(this.container);
+        this._updatePadding();
+        const revealZone = this._createZoneAndScrollRestoreFn(position);
+        super.show(position, this._computeHeight().linesValue);
+        this.widget.chatWidget.setVisible(true);
+        this.widget.focus();
+        revealZone();
+        this._scrollUp.enable();
+    }
+    _updatePadding() {
+        assertType(this.container);
+        const info = this.editor.getLayoutInfo();
+        const marginWithoutIndentation = info.glyphMarginWidth + info.lineNumbersWidth + info.decorationsWidth;
+        this.container.style.paddingLeft = `${marginWithoutIndentation}px`;
+    }
+    reveal(position) {
+        const stickyScroll = this.editor.getOption(EditorOption.stickyScroll);
+        const magicValue = stickyScroll.enabled ? stickyScroll.maxLineCount : 0;
+        this.editor.revealLines(position.lineNumber + magicValue, position.lineNumber + magicValue, ScrollType.Immediate);
+        this._scrollUp.reset();
+        this.updatePositionAndHeight(position);
+    }
+    updatePositionAndHeight(position) {
+        const revealZone = this._createZoneAndScrollRestoreFn(position);
+        super.updatePositionAndHeight(position, !this._usesResizeHeight ? this._computeHeight().linesValue : undefined);
+        revealZone();
+    }
+    _createZoneAndScrollRestoreFn(position) {
+        const scrollState = StableEditorBottomScrollState.capture(this.editor);
+        const lineNumber = position.lineNumber <= 1 ? 1 : 1 + position.lineNumber;
+        const scrollTop = this.editor.getScrollTop();
+        const lineTop = this.editor.getTopForLineNumber(lineNumber);
+        const zoneTop = lineTop - this._computeHeight().pixelsValue;
+        const hasResponse = this.widget.chatWidget.viewModel?.getItems().find(candidate => {
+            return isResponseVM(candidate) && candidate.response.value.length > 0;
+        });
+        if (hasResponse && zoneTop < scrollTop || this._scrollUp.didScrollUpOrDown) {
+            return this._scrollUp.runIgnored(() => {
+                scrollState.restore(this.editor);
+            });
+        }
+        return this._scrollUp.runIgnored(() => {
+            scrollState.restore(this.editor);
+            const scrollTop = this.editor.getScrollTop();
+            const lineTop = this.editor.getTopForLineNumber(lineNumber);
+            const zoneTop = lineTop - this._computeHeight().pixelsValue;
+            const editorHeight = this.editor.getLayoutInfo().height;
+            const lineBottom = this.editor.getBottomForLineNumber(lineNumber);
+            let newScrollTop = zoneTop;
+            let forceScrollTop = false;
+            if (lineBottom >= (scrollTop + editorHeight)) {
+                newScrollTop = lineBottom - editorHeight;
+                forceScrollTop = true;
+            }
+            if (newScrollTop < scrollTop || forceScrollTop) {
+                this._logService.trace('[IE] REVEAL zone', { zoneTop, lineTop, lineBottom, scrollTop, newScrollTop, forceScrollTop });
+                this.editor.setScrollTop(newScrollTop, ScrollType.Immediate);
+            }
+        });
+    }
+    revealRange(range, isLastLine) {
+    }
+    hide() {
+        const scrollState = StableEditorBottomScrollState.capture(this.editor);
+        this._scrollUp.disable();
+        this._ctxCursorPosition.reset();
+        this.widget.chatWidget.setVisible(false);
+        super.hide();
+        status(( localize(8325, 'Closed inline chat widget')));
+        scrollState.restore(this.editor);
+    }
+};
+InlineChatZoneWidget = InlineChatZoneWidget_1 = ( __decorate([
+    ( __param(4, IInstantiationService)),
+    ( __param(5, ILogService)),
+    ( __param(6, IContextKeyService))
+], InlineChatZoneWidget));
+class ScrollUpState {
+    constructor(_editor) {
+        this._editor = _editor;
+        this._ignoreEvents = false;
+        this._listener = ( new MutableDisposable());
+    }
+    dispose() {
+        this._listener.dispose();
+    }
+    reset() {
+        this._didScrollUpOrDown = undefined;
+    }
+    enable() {
+        this._didScrollUpOrDown = undefined;
+        this._listener.value = this._editor.onDidScrollChange(e => {
+            if (!e.scrollTopChanged || this._ignoreEvents) {
+                return;
+            }
+            this._listener.clear();
+            this._didScrollUpOrDown = true;
+        });
+    }
+    disable() {
+        this._listener.clear();
+        this._didScrollUpOrDown = undefined;
+    }
+    runIgnored(callback) {
+        return () => {
+            this._ignoreEvents = true;
+            try {
+                return callback();
+            }
+            finally {
+                this._ignoreEvents = false;
+            }
+        };
+    }
+    get didScrollUpOrDown() {
+        return this._didScrollUpOrDown;
+    }
+}
+
+export { InlineChatZoneWidget };

package/vscode/src/vs/workbench/contrib/inlineChat/browser/media/inlineChat.css

@@ -0,0 +1,411 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+
+.monaco-workbench .inline-chat {
+	color: inherit;
+	border-radius: 4px;
+	border: 1px solid var(--vscode-inlineChat-border);
+	box-shadow: 0 2px 4px 0 var(--vscode-widget-shadow);
+	background: var(--vscode-inlineChat-background);
+	padding-top: 3px;
+	position: relative;
+}
+
+.monaco-workbench .zone-widget.inline-chat-widget {
+	z-index: 3;
+}
+
+.monaco-workbench .zone-widget.inline-chat-widget .interactive-session {
+	max-width: unset;
+}
+
+.monaco-workbench .zone-widget.inline-chat-widget .interactive-session .chat-input-container {
+	border-color: var(--vscode-inlineChat-border);
+}
+
+.monaco-workbench .zone-widget.inline-chat-widget .interactive-session .chat-input-container:focus-within {
+	border-color: var(--vscode-focusBorder);
+}
+
+.monaco-workbench .zone-widget.inline-chat-widget .interactive-session .chat-input-container .interactive-input-part {
+	padding-top: 0px
+}
+
+.monaco-workbench .zone-widget.inline-chat-widget > .zone-widget-container {
+	background: var(--vscode-inlineChat-background);
+}
+
+@property --inline-chat-frame-progress {
+	syntax: '<percentage>';
+	initial-value: 0%;
+	inherits: false;
+}
+
+@keyframes shift {
+	0% {
+		--inline-chat-frame-progress: 0%;
+	}
+	50% {
+		--inline-chat-frame-progress: 100%;
+	}
+	100% {
+		--inline-chat-frame-progress: 0%;
+	}
+}
+
+.monaco-workbench .zone-widget.inline-chat-widget > .zone-widget-container.busy {
+	--inline-chat-frame-progress: 0%;
+	border-image: linear-gradient(90deg, var(--vscode-editorGutter-addedBackground) var(--inline-chat-frame-progress), var(--vscode-button-background)) 1;
+	animation: 3s shift linear infinite;
+}
+
+.monaco-workbench .zone-widget.inline-chat-widget > .zone-widget-container > .inline-chat {
+	color: inherit;
+	border-radius: unset;
+	border: unset;
+	box-shadow: unset;
+	background: var(--vscode-inlineChat-background);
+	position: relative;
+	outline: none;
+}
+
+.monaco-workbench .inline-chat .chat-widget {
+	.checkpoint-container,
+	.checkpoint-restore-container {
+		display: none;
+	}
+}
+
+.monaco-workbench .inline-chat .chat-widget .interactive-session .interactive-input-part {
+	padding: 4px 0 0 0;
+}
+
+
+@keyframes pulse-opacity {
+	0%, 100% {
+		opacity: 1;
+	}
+	33% {
+		opacity: .6;
+	}
+}
+
+.monaco-workbench .zone-widget.inline-chat-widget.inline-chat-2 {
+
+	.inline-chat .chat-widget .interactive-session .interactive-input-part {
+		padding: 8px 0 0 0;
+	}
+
+	.interactive-session .chat-input-container {
+		border-color: var(--vscode-input-border, transparent);
+	}
+
+	.interactive-session .chat-input-container:focus-within {
+		border-color: var(--vscode-input-border, transparent);
+	}
+
+	.chat-attachments-container > .chat-input-toolbar {
+		margin-left: auto;
+		margin-right: 16px;
+	}
+
+	/* TODO@jrieken this isn't the nicest selector... */
+	.request-in-progress .monaco-editor [class^="ced-chat-session-detail"]::after {
+		animation: pulse-opacity 2.5s ease-in-out infinite;
+	}
+}
+
+
+.monaco-workbench .inline-chat .chat-widget .interactive-session .interactive-input-part .interactive-execute-toolbar {
+	margin-bottom: 1px;
+}
+
+.monaco-workbench .inline-chat .chat-widget .interactive-session .interactive-input-part .interactive-input-and-execute-toolbar {
+	width: 100%;
+	border-radius: 2px;
+}
+
+
+.monaco-workbench .inline-chat .chat-widget .interactive-session .interactive-input-part .interactive-input-followups .interactive-session-followups {
+	margin: 3px 0 0 4px;
+}
+
+.monaco-workbench .inline-chat .chat-widget .interactive-session .interactive-list .monaco-scrollable-element {
+	border-top-left-radius: 3px;
+	border-top-right-radius: 3px;
+}
+
+.monaco-workbench .inline-chat .chat-widget .interactive-session .interactive-list .monaco-scrollable-element .shadow.top {
+	box-shadow: none;
+}
+
+.monaco-workbench .inline-chat .chat-widget .interactive-session .interactive-list .interactive-item-container.interactive-item-compact {
+	gap: 8px;
+	padding: 3px 20px 3px 8px;
+}
+
+.monaco-workbench .inline-chat .chat-widget .interactive-session .interactive-list .interactive-item-container.interactive-item-compact .header .avatar {
+	outline-offset: -1px;
+}
+
+.monaco-workbench .inline-chat .chat-widget .interactive-session .interactive-list .interactive-item-container.interactive-item-compact .chat-notification-widget {
+	margin-bottom: 0;
+	padding: 0;
+	border: none;
+}
+
+.monaco-workbench .inline-chat .chat-widget .interactive-session .interactive-list .interactive-request {
+	border: none;
+}
+
+.monaco-workbench .inline-chat .chat-widget .interactive-session .interactive-list .interactive-item-container.minimal > .header {
+	top: 5px;
+	right: 10px;
+	display: none;
+}
+
+.monaco-workbench .inline-chat .chat-widget .interactive-session .interactive-list .interactive-item-container.minimal > .chat-footer-toolbar {
+	display: none;
+}
+
+.monaco-workbench .inline-chat .chat-widget .interactive-session .chat-input-toolbars {
+	max-width: 66%;
+}
+
+.monaco-workbench .inline-chat .chat-widget .interactive-session .chat-input-toolbars > .chat-execute-toolbar .chat-modelPicker-item {
+	min-width: 40px;
+	max-width: 132px;
+}
+
+/* status */
+
+.monaco-workbench .inline-chat > .status {
+	display: flex;
+	align-items: center;
+	padding-right: 16px;
+}
+
+.monaco-workbench .inline-chat > .status {
+	.label,
+	.actions {
+		padding: 4px 0;
+	}
+}
+
+.monaco-workbench .inline-chat .status .actions.hidden {
+	display: none;
+}
+
+.monaco-workbench .inline-chat .status .label {
+	overflow: hidden;
+	color: var(--vscode-descriptionForeground);
+	font-size: 12px;
+	display: flex;
+	white-space: nowrap;
+}
+
+.monaco-workbench .inline-chat .status .label.info {
+	margin-right: auto;
+}
+
+.monaco-workbench .inline-chat .status .label.status {
+	margin-left: auto;
+	padding-right: 8px;
+	padding-left: 8px;
+}
+
+.monaco-workbench .inline-chat .status .label.hidden,
+.monaco-workbench .inline-chat .status .label:empty {
+	display: none;
+}
+
+.monaco-workbench .inline-chat .status .label.error {
+	color: var(--vscode-errorForeground);
+}
+
+.monaco-workbench .inline-chat .status .label.warn {
+	color: var(--vscode-editorWarning-foreground);
+}
+
+.monaco-workbench .inline-chat .status .label > .codicon {
+	padding: 0 3px;
+	font-size: 12px;
+	line-height: 18px;
+}
+
+.monaco-workbench .inline-chat .status .rerun {
+	display: inline-flex;
+}
+
+.monaco-workbench .inline-chat .status .rerun:not(:empty) {
+	padding-top: 8px;
+	padding-left: 4px;
+}
+
+.monaco-workbench .inline-chat .status .rerun .agentOrSlashCommandDetected A {
+	cursor: pointer;
+	color: var(--vscode-textLink-foreground);
+}
+
+.monaco-workbench .inline-chat .interactive-item-container.interactive-response .detail-container .detail .agentOrSlashCommandDetected,
+.monaco-workbench .inline-chat .interactive-item-container.interactive-response .detail-container .chat-animated-ellipsis {
+	display: none;
+}
+
+.monaco-workbench .inline-chat .status .actions,
+.monaco-workbench .inline-chat-diff-overlay {
+
+	display: flex;
+	height: 18px;
+
+	.actions-container {
+		gap: 3px
+	}
+
+	.monaco-button-dropdown > .monaco-dropdown-button {
+		display: flex;
+		align-items: center;
+		padding: 0 4px;
+	}
+
+	.monaco-button.codicon {
+		display: flex;
+	}
+
+	.monaco-button.codicon::before {
+		align-self: center;
+		color: var(--vscode-button-foreground);
+	}
+
+	.monaco-button.secondary.codicon::before {
+		align-self: center;
+		color: var(--vscode-button-secondaryForeground);
+	}
+
+	.monaco-text-button {
+		padding: 0 6px;
+		font-size: 12px;
+		white-space: nowrap;
+	}
+}
+
+.monaco-workbench .inline-chat .status .actions {
+	gap: 4px;
+}
+
+.monaco-workbench .inline-chat .status .actions.secondary {
+	margin-left: auto;
+	display: none;
+}
+
+.monaco-workbench .inline-chat .status:hover .actions.secondary:not(.has-no-actions),
+.monaco-workbench .inline-chat:focus .status .actions.secondary:not(.has-no-actions),
+.monaco-workbench .inline-chat .status:focus-within .actions.secondary:not(.has-no-actions) {
+	display: inherit;
+}
+
+.monaco-workbench .inline-chat-diff-overlay {
+
+	.monaco-button {
+		border-radius: 0;
+	}
+
+	.monaco-button.secondary.checked {
+		background-color: var(--vscode-button-secondaryHoverBackground);
+	}
+
+	.monaco-button:first-child {
+		border-top-left-radius: 2px;
+		border-bottom-left-radius: 2px;
+	}
+
+	.monaco-button:last-child {
+		border-top-right-radius: 2px;
+		border-bottom-right-radius: 2px;
+	}
+
+	.monaco-button:not(:last-child) {
+		border-right: 1px solid var(--vscode-button-foreground);
+	}
+}
+
+.monaco-workbench .inline-chat .status .disclaimer {
+	a {
+		color: var(--vscode-textLink-foreground);
+	}
+
+	p {
+		margin: 0;
+	}
+}
+
+/* TODO@jrieken not needed? */
+.monaco-workbench .inline-chat .status .monaco-toolbar .action-label.checked {
+	color: var(--vscode-inputOption-activeForeground);
+	background-color: var(--vscode-inputOption-activeBackground);
+	outline: 1px solid var(--vscode-inputOption-activeBorder);
+}
+
+
+.monaco-workbench .inline-chat .status .monaco-toolbar .action-item.button-item .action-label:is(:hover, :focus) {
+	background-color: var(--vscode-button-hoverBackground);
+}
+
+/* accessible diff viewer */
+
+.monaco-workbench .inline-chat .diff-review {
+	padding: 4px 6px;
+	background-color: unset;
+}
+
+.monaco-workbench .inline-chat .diff-review.hidden {
+	display: none;
+}
+
+/* decoration styles */
+
+.monaco-workbench .inline-chat-inserted-range {
+	background-color: var(--vscode-inlineChatDiff-inserted);
+}
+
+.monaco-workbench .inline-chat-inserted-range-linehighlight {
+	background-color: var(--vscode-diffEditor-insertedLineBackground);
+}
+
+.monaco-workbench .inline-chat-original-zone2 {
+	background-color: var(--vscode-diffEditor-removedLineBackground);
+	opacity: 0.8;
+}
+
+.monaco-workbench .inline-chat-lines-inserted-range {
+	background-color: var(--vscode-diffEditor-insertedTextBackground);
+}
+
+/* gutter decoration */
+
+.monaco-workbench .glyph-margin-widgets .cgmr.codicon-inline-chat-opaque,
+.monaco-workbench .glyph-margin-widgets .cgmr.codicon-inline-chat-transparent {
+	display: block;
+	cursor: pointer;
+	transition: opacity .2s ease-in-out;
+}
+
+.monaco-workbench .glyph-margin-widgets .cgmr.codicon-inline-chat-opaque {
+	opacity: 0.5;
+}
+
+.monaco-workbench .glyph-margin-widgets .cgmr.codicon-inline-chat-transparent {
+	opacity: 0;
+}
+
+.monaco-workbench .glyph-margin-widgets .cgmr.codicon-inline-chat-opaque:hover,
+.monaco-workbench .glyph-margin-widgets .cgmr.codicon-inline-chat-transparent:hover {
+	opacity: 1;
+}
+
+.monaco-workbench .inline-chat .chat-attached-context {
+	padding: 2px 0px;
+}

package/vscode/src/vs/workbench/contrib/inlineChat/browser/utils.d.ts

@@ -0,0 +1,13 @@
+import { IRange } from "@codingame/monaco-vscode-api/vscode/vs/editor/common/core/range";
+import { IIdentifiedSingleEditOperation, ITextModel, IValidEditOperation } from "@codingame/monaco-vscode-api/vscode/vs/editor/common/model";
+import { IEditObserver } from "./inlineChatStrategies.js";
+import { IProgress } from "@codingame/monaco-vscode-api/vscode/vs/platform/progress/common/progress";
+import { IntervalTimer } from "@codingame/monaco-vscode-api/vscode/vs/base/common/async";
+import { CancellationToken } from "@codingame/monaco-vscode-api/vscode/vs/base/common/cancellation";
+import { TextModelEditSource } from "@codingame/monaco-vscode-api/vscode/vs/editor/common/textModelEditSource";
+export interface AsyncTextEdit {
+    readonly range: IRange;
+    readonly newText: AsyncIterable<string>;
+}
+export declare function performAsyncTextEdit(model: ITextModel, edit: AsyncTextEdit, progress?: IProgress<IValidEditOperation[]>, obs?: IEditObserver, editSource?: TextModelEditSource): Promise<void>;
+export declare function asProgressiveEdit(interval: IntervalTimer, edit: IIdentifiedSingleEditOperation, wordsPerSec: number, token: CancellationToken): AsyncTextEdit;