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

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

@@ -2,10 +2,10 @@
 import { registerCss } from '@codingame/monaco-vscode-api/css';
 import { __decorate, __param } from '@codingame/monaco-vscode-api/external/tslib/tslib.es6';
 import * as inlineChatOverlayWidget from './media/inlineChatOverlayWidget.css';
-import { $, append, addDisposableListener, trackFocus, isAncestorOfActiveElement, createElement, DisposableResizeObserver } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/dom';
-import { renderAsPlaintext } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/markdownRenderer';
+import { $, append, setVisibility, DisposableResizeObserver, getTotalWidth, addDisposableListener, isAncestorOfActiveElement, trackFocus, createElement } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/dom';
+import { DEFAULT_FONT_FAMILY } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/fonts';
 import { StandardKeyboardEvent } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/keyboardEvent';
-import { Separator } from '@codingame/monaco-vscode-api/vscode/vs/base/common/actions';
+import { renderAsPlaintext } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/markdownRenderer';
 import { ActionBar, ActionsOrientation } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/ui/actionbar/actionbar';
 import { Codicon } from '@codingame/monaco-vscode-api/vscode/vs/base/common/codicons';
 import { KeyCode } from '@codingame/monaco-vscode-api/vscode/vs/base/common/keyCodes';
@@ -19,43 +19,40 @@ import { CodeEditorWidget } from '@codingame/monaco-vscode-api/vscode/vs/editor/
 import { IModelService } from '@codingame/monaco-vscode-api/vscode/vs/editor/common/services/model.service';
 import { localize } from '@codingame/monaco-vscode-api/vscode/vs/nls';
 import { MenuWorkbenchToolBar, HiddenItemStrategy } from '@codingame/monaco-vscode-api/vscode/vs/platform/actions/browser/toolbar';
+import { getFlatActionBarActions } 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 { 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 { ChatEditingAcceptRejectActionViewItem } from '../../chat/browser/chatEditing/chatEditingEditorOverlay.js';
-import { ACTION_START } from '../common/inlineChat.js';
+import { CTX_INLINE_CHAT_INPUT_HAS_TEXT, CTX_INLINE_CHAT_INPUT_WIDGET_FOCUSED } from '../common/inlineChat.js';
 import { StickyScrollController } from '@codingame/monaco-vscode-api/vscode/vs/editor/contrib/stickyScroll/browser/stickyScrollController';
 import { IKeybindingService } from '@codingame/monaco-vscode-api/vscode/vs/platform/keybinding/common/keybinding.service';
-import { getFlatActionBarActions } from '@codingame/monaco-vscode-api/vscode/vs/platform/actions/browser/menuEntryActionViewItem';
+import { ILogService } from '@codingame/monaco-vscode-api/vscode/vs/platform/log/common/log.service';
 import { IConfigurationService } from '@codingame/monaco-vscode-api/vscode/vs/platform/configuration/common/configuration.service';
 import { getSimpleEditorOptions } from '@codingame/monaco-vscode-api/vscode/vs/workbench/contrib/codeEditor/browser/simpleEditorOptions';
 import { PlaceholderTextContribution } from '@codingame/monaco-vscode-api/vscode/vs/editor/contrib/placeholderText/browser/placeholderTextContribution';
-import { Position } from '@codingame/monaco-vscode-api/vscode/vs/editor/common/core/position';
-import { CancelChatActionId } from '../../chat/browser/actions/chatExecuteActions.js';
 import { assertType } from '@codingame/monaco-vscode-api/vscode/vs/base/common/types';
 import { observableValue } from '@codingame/monaco-vscode-api/vscode/vs/base/common/observableInternal/observables/observableValue';
 import { observableFromEvent, observableFromEventOpts } from '@codingame/monaco-vscode-api/vscode/vs/base/common/observableInternal/observables/observableFromEvent';
 import { constObservable } from '@codingame/monaco-vscode-api/vscode/vs/base/common/observableInternal/observables/constObservable';
-import { autorun } from '@codingame/monaco-vscode-api/vscode/vs/base/common/observableInternal/reactions/autorun';
 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';
 
 registerCss(inlineChatOverlayWidget);
 let InlineChatInputWidget = class InlineChatInputWidget extends Disposable {
     constructor(
         _editorObs,
-        _keybindingService,
-        _menuService,
         _contextKeyService,
+        _menuService,
         instantiationService,
         modelService,
         configurationService
     ) {
         super();
         this._editorObs = _editorObs;
-        this._keybindingService = _keybindingService;
-        this._menuService = _menuService;
         this._contextKeyService = _contextKeyService;
+        this._menuService = _menuService;
         this._position = observableValue(this, null);
         this.position = this._position;
         this._showStore = this._store.add(( new DisposableStore()));
@@ -63,14 +60,30 @@ let InlineChatInputWidget = class InlineChatInputWidget extends Disposable {
         this._anchorLeft = 0;
         this._anchorAbove = false;
         this._domNode = $(".inline-chat-gutter-menu");
-        this._inputContainer = append(this._domNode, $(".input"));
-        this._inputContainer.style.width = "200px";
-        this._inputContainer.style.height = "26px";
-        this._inputContainer.style.display = "flex";
-        this._inputContainer.style.alignItems = "center";
-        this._inputContainer.style.justifyContent = "center";
+        this._container = append(this._domNode, $(".inline-chat-gutter-container"));
+        this._inputContainer = append(this._container, $(".input"));
+        this._toolbarContainer = append(this._container, $(".toolbar"));
+        const actionsContainer = append(this._domNode, $(".inline-chat-gutter-actions"));
+        const actionBar = this._store.add(( new ActionBar(actionsContainer, {
+            orientation: ActionsOrientation.VERTICAL,
+            preventLoopNavigation: true
+        })));
+        const actionsMenu = this._store.add(
+            this._menuService.createMenu(MenuId.ChatEditorInlineMenu, this._contextKeyService)
+        );
+        const updateActions = () => {
+            const actions = getFlatActionBarActions(actionsMenu.getActions({
+                shouldForwardArgs: true
+            }));
+            actionBar.clear();
+            actionBar.push(actions);
+            setVisibility(actions.length > 0, actionsContainer);
+        };
+        this._store.add(actionsMenu.onDidChange(updateActions));
+        updateActions();
         const options = getSimpleEditorOptions(configurationService);
-        options.wordWrap = "on";
+        options.wordWrap = "off";
+        options.wrappingStrategy = "advanced";
         options.lineNumbers = "off";
         options.glyphMargin = false;
         options.lineDecorationsWidth = 0;
@@ -80,12 +93,19 @@ let InlineChatInputWidget = class InlineChatInputWidget extends Disposable {
             enabled: false
         };
         options.scrollbar = {
-            vertical: "auto",
+            vertical: "hidden",
             horizontal: "hidden",
-            alwaysConsumeMouseWheel: true,
-            verticalSliderSize: 6
+            alwaysConsumeMouseWheel: true
         };
         options.renderLineHighlight = "none";
+        options.fontFamily = DEFAULT_FONT_FAMILY;
+        options.fontSize = 13;
+        options.lineHeight = 20;
+        options.cursorWidth = 1;
+        options.padding = {
+            top: 2,
+            bottom: 2
+        };
         const codeEditorWidgetOptions = {
             isSimpleWidget: true,
             contributions: EditorExtensionsRegistry.getSomeEditorContributions([PlaceholderTextContribution.ID])
@@ -95,78 +115,131 @@ let InlineChatInputWidget = class InlineChatInputWidget extends Disposable {
         );
         const model = this._store.add(modelService.createModel("", null, ( URI.parse(`gutter-input:${Date.now()}`)), true));
         this._input.setModel(model);
+        const toolbar = this._store.add(
+            instantiationService.createInstance(MenuWorkbenchToolBar, this._toolbarContainer, MenuId.InlineChatInput, {
+                telemetrySource: "inlineChatInput.toolbar",
+                hiddenItemStrategy: HiddenItemStrategy.NoHide,
+                toolbarOptions: {
+                    primaryGroup: () => true
+                },
+                menuOptions: {
+                    shouldForwardArgs: true
+                }
+            })
+        );
         const stickyScrollController = StickyScrollController.get(this._editorObs.editor);
         this._stickyScrollHeight = stickyScrollController ? observableFromEvent(
             stickyScrollController.onDidChangeStickyScrollHeight,
             () => stickyScrollController.stickyScrollWidgetHeight
         ) : constObservable(0);
+        const toolbarWidth = observableValue(this, 0);
+        const resizeObserver = new DisposableResizeObserver(() => {
+            toolbarWidth.set(getTotalWidth(toolbar.getElement()), undefined);
+        });
+        this._store.add(resizeObserver);
+        this._store.add(resizeObserver.observe(toolbar.getElement()));
+        const contentWidth = observableFromEvent(
+            this,
+            this._input.onDidChangeModelContent,
+            () => this._input.getContentWidth()
+        );
+        const contentHeight = observableFromEvent(
+            this,
+            this._input.onDidContentSizeChange,
+            () => this._input.getContentHeight()
+        );
+        this._layoutData = derived(r => {
+            const editorPad = 6;
+            const totalWidth = contentWidth.read(r) + editorPad + toolbarWidth.read(r);
+            const minWidth = 220;
+            const maxWidth = 600;
+            const clampedWidth = this._input.getOption(EditorOption.wordWrap) === "on" ? maxWidth : Math.max(minWidth, Math.min(totalWidth, maxWidth));
+            const lineHeight = this._input.getOption(EditorOption.lineHeight);
+            const clampedHeight = Math.min(contentHeight.read(r), (3 * lineHeight));
+            if (totalWidth > clampedWidth) {
+                this._input.updateOptions({
+                    wordWrap: "on"
+                });
+            }
+            return {
+                editorPad,
+                toolbarWidth: toolbarWidth.read(r),
+                totalWidth: clampedWidth,
+                height: clampedHeight
+            };
+        });
         this._store.add(autorun(r => {
-            const selection = this._editorObs.cursorSelection.read(r);
-            const hasSelection = selection && !selection.isEmpty();
-            const placeholderText = hasSelection ? ( localize(8829, "Modify selected code")) : ( localize(8830, "Generate code"));
-            this._input.updateOptions({
-                placeholder: this._keybindingService.appendKeybinding(placeholderText, ACTION_START)
+            const {
+                editorPad,
+                toolbarWidth,
+                totalWidth,
+                height
+            } = this._layoutData.read(r);
+            const inputWidth = totalWidth - toolbarWidth - editorPad;
+            this._container.style.width = `${totalWidth}px`;
+            this._inputContainer.style.width = `${inputWidth}px`;
+            this._input.layout({
+                width: inputWidth,
+                height
             });
         }));
-        this._store.add(this._input.onDidContentSizeChange(e => {
-            if (e.contentHeightChanged) {
-                this._updateInputHeight(e.contentHeight);
-            }
+        this._store.add(
+            this._input.onDidFocusEditorText(() => this._container.classList.add("focused"))
+        );
+        this._store.add(
+            this._input.onDidBlurEditorText(() => this._container.classList.remove("focused"))
+        );
+        this._store.add(this._input.onDidScrollChange(e => {
+            this._toolbarContainer.classList.toggle("fake-scroll-decoration", e.scrollTop > 0);
+        }));
+        const inputHasText = CTX_INLINE_CHAT_INPUT_HAS_TEXT.bindTo(this._contextKeyService);
+        this._store.add(this._input.onDidChangeModelContent(() => {
+            inputHasText.set(this._input.getModel().getValue().trim().length > 0);
         }));
+        this._store.add(toDisposable(() => inputHasText.reset()));
+        const inputWidgetFocused = CTX_INLINE_CHAT_INPUT_WIDGET_FOCUSED.bindTo(this._contextKeyService);
+        this._store.add(this._input.onDidFocusEditorText(() => inputWidgetFocused.set(true)));
+        this._store.add(this._input.onDidBlurEditorText(() => inputWidgetFocused.set(false)));
+        this._store.add(toDisposable(() => inputWidgetFocused.reset()));
         this._store.add(this._input.onKeyDown(e => {
-            if (e.keyCode === KeyCode.Enter && !e.shiftKey) {
-                const value = this._input.getModel().getValue() ?? "";
-                if (this._inlineStartAction && value) {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    this._actionBar.actionRunner.run(this._inlineStartAction, {
-                        message: value,
-                        autoSend: true
-                    });
-                }
-            } else if (e.keyCode === KeyCode.Escape) {
-                const value = this._input.getModel().getValue() ?? "";
-                if (!value) {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    this._hide();
-                }
-            } else if (e.keyCode === KeyCode.DownArrow) {
-                const inputModel = this._input.getModel();
+            if (e.keyCode === KeyCode.DownArrow && !actionBar.isEmpty()) {
+                const model = this._input.getModel();
                 const position = this._input.getPosition();
-                const lastLineNumber = inputModel.getLineCount();
-                const lastLineMaxColumn = inputModel.getLineMaxColumn(lastLineNumber);
-                if (Position.equals(position, ( new Position(lastLineNumber, lastLineMaxColumn)))) {
+                if (position && position.lineNumber === model.getLineCount()) {
                     e.preventDefault();
                     e.stopPropagation();
-                    this._actionBar.focus();
+                    actionBar.focus(0);
                 }
             }
         }));
-        this._actionBar = this._store.add(( new ActionBar(this._domNode, {
-            orientation: ActionsOrientation.VERTICAL,
-            preventLoopNavigation: true
-        })));
-        this._store.add(addDisposableListener(this._actionBar.domNode, "keydown", e => {
+        this._store.add(addDisposableListener(actionBar.domNode, "keydown", e => {
             const event = ( new StandardKeyboardEvent(e));
-            if (event.equals(KeyCode.UpArrow) && this._actionBar.isFocused(
-                this._actionBar.viewItems.findIndex(item => item.action.id !== Separator.ID)
-            )) {
+            if (event.keyCode === KeyCode.Escape) {
                 event.preventDefault();
                 event.stopPropagation();
-                this._input.focus();
+                this.hide();
+            } else if (event.keyCode === KeyCode.UpArrow) {
+                const firstItem = actionBar.viewItems[0];
+                if (firstItem?.element && isAncestorOfActiveElement(firstItem.element)) {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    this._input.focus();
+                }
             }
         }, true));
         const focusTracker = this._store.add(trackFocus(this._domNode));
-        this._store.add(focusTracker.onDidBlur(() => this._hide()));
-        this._store.add(this._actionBar.onDidCancel(() => this._hide()));
-        this._store.add(this._actionBar.onWillRun(() => this._hide()));
+        this._store.add(focusTracker.onDidBlur(() => this.hide()));
     }
-    show(lineNumber, left, anchorAbove) {
+    get value() {
+        return this._input.getModel().getValue().trim();
+    }
+    show(lineNumber, left, anchorAbove, placeholder) {
         this._showStore.clear();
+        this._input.updateOptions({
+            wordWrap: "off",
+            placeholder
+        });
         this._input.getModel().setValue("");
-        this._updateInputHeight(this._input.getContentHeight());
-        this._refreshActions();
         this._anchorLineNumber = lineNumber;
         this._anchorLeft = left;
         this._anchorAbove = anchorAbove;
@@ -187,7 +260,7 @@ let InlineChatInputWidget = class InlineChatInputWidget extends Disposable {
             ));
             const hasContent = !!this._input.getModel().getValue();
             if (!isLineVisible && !hasContent) {
-                this._hide();
+                this.hide();
             } else {
                 this._updatePosition();
             }
@@ -221,54 +294,24 @@ let InlineChatInputWidget = class InlineChatInputWidget extends Disposable {
             stackOrdinal: 10000
         }, undefined);
     }
-    _hide() {
+    hide() {
         const editorDomNode = this._editorObs.editor.getDomNode();
         if (editorDomNode && isAncestorOfActiveElement(editorDomNode)) {
             this._editorObs.editor.focus();
         }
         this._position.set(null, undefined);
+        this._input.getModel().setValue("");
         this._showStore.clear();
     }
-    _refreshActions() {
-        this._actionBar.clear();
-        this._inlineStartAction = undefined;
-        const actions = getFlatActionBarActions(
-            this._menuService.getMenuActions(MenuId.ChatEditorInlineGutter, this._contextKeyService, {
-                shouldForwardArgs: true
-            })
-        );
-        for (const action of actions) {
-            if (action.id === ACTION_START) {
-                this._inlineStartAction = action;
-                continue;
-            }
-            const keybinding = this._keybindingService.lookupKeybinding(action.id)?.getLabel();
-            this._actionBar.push(action, {
-                icon: false,
-                label: true,
-                keybinding
-            });
-        }
-    }
-    _updateInputHeight(contentHeight) {
-        const lineHeight = this._input.getOption(EditorOption.lineHeight);
-        const maxHeight = 3 * lineHeight;
-        const clampedHeight = Math.min(contentHeight, maxHeight);
-        const containerPadding = 8;
-        this._inputContainer.style.height = `${clampedHeight + containerPadding}px`;
-        this._input.layout({
-            width: 200,
-            height: clampedHeight
-        });
-    }
 };
-InlineChatInputWidget = ( __decorate([( __param(1, IKeybindingService)), ( __param(2, IMenuService)), ( __param(3, IContextKeyService)), ( __param(4, IInstantiationService)), ( __param(5, IModelService)), ( __param(6, IConfigurationService))], InlineChatInputWidget));
+InlineChatInputWidget = ( __decorate([( __param(1, IContextKeyService)), ( __param(2, IMenuService)), ( __param(3, IInstantiationService)), ( __param(4, IModelService)), ( __param(5, IConfigurationService))], InlineChatInputWidget));
 let InlineChatSessionOverlayWidget = class InlineChatSessionOverlayWidget extends Disposable {
-    constructor(_editorObs, _instaService, _keybindingService) {
+    constructor(_editorObs, _instaService, _keybindingService, _logService) {
         super();
         this._editorObs = _editorObs;
         this._instaService = _instaService;
         this._keybindingService = _keybindingService;
+        this._logService = _logService;
         this._domNode = createElement("div");
         this._showStore = this._store.add(( new DisposableStore()));
         this._position = observableValue(this, null);
@@ -302,7 +345,7 @@ let InlineChatSessionOverlayWidget = class InlineChatSessionOverlayWidget extend
             const response = chatModel.lastRequestObs.read(r)?.response;
             if (!response) {
                 return {
-                    message: ( localize(8831, "Working...")),
+                    message: ( localize(9479, "Working...")),
                     icon: ThemeIcon.modify(Codicon.loading, "spin")
                 };
             }
@@ -310,16 +353,23 @@ let InlineChatSessionOverlayWidget = class InlineChatSessionOverlayWidget extend
                 const result = response.result;
                 if (result?.errorDetails) {
                     return {
-                        message: ( localize(8832, "Sorry, your request failed")),
+                        message: ( localize(9480, "Sorry, your request failed")),
                         icon: Codicon.error
                     };
                 }
                 const changes = entry.read(r)?.changesCount.read(r) ?? 0;
                 return {
-                    message: changes === 0 ? ( localize(8833, "Done")) : changes === 1 ? ( localize(8834, "Done, 1 change")) : ( localize(8835, "Done, {0} changes", changes)),
+                    message: changes === 0 ? ( localize(9481, "Done")) : changes === 1 ? ( localize(9482, "Done, 1 change")) : ( localize(9483, "Done, {0} changes", changes)),
                     icon: Codicon.check
                 };
             }
+            const pendingConfirmation = response.isPendingConfirmation.read(r);
+            if (pendingConfirmation) {
+                return {
+                    message: ( localize(9484, "Sorry, but an expected error happened")),
+                    icon: Codicon.error
+                };
+            }
             const lastPart = observableFromEventOpts({
                 equalsFn: () => false
             }, response.onDidChange, () => response.response.value).read(r).filter(part => part.kind === "progressMessage" || part.kind === "toolInvocation").at(-1);
@@ -335,7 +385,7 @@ let InlineChatSessionOverlayWidget = class InlineChatSessionOverlayWidget extend
                 };
             } else {
                 return {
-                    message: ( localize(8831, "Working...")),
+                    message: ( localize(9479, "Working...")),
                     icon: ThemeIcon.modify(Codicon.loading, "spin")
                 };
             }
@@ -351,6 +401,13 @@ let InlineChatSessionOverlayWidget = class InlineChatSessionOverlayWidget extend
                 this._icon.className = "";
             }
         }));
+        this._showStore.add(autorun(r => {
+            const response = session.chatModel.lastRequestObs.read(r)?.response;
+            const pending = response?.isPendingConfirmation.read(r);
+            if (pending) {
+                this._logService.info(`[InlineChat] UNEXPECTED approval needed: ${pending.detail ?? "unknown"}`);
+            }
+        }));
         this._container.appendChild(this._toolbarNode);
         this._showStore.add(toDisposable(() => this._toolbarNode.remove()));
         const that = this;
@@ -366,12 +423,15 @@ let InlineChatSessionOverlayWidget = class InlineChatSessionOverlayWidget extend
                     renderShortTitle: true
                 },
                 actionViewItemProvider: (action, options) => {
-                    const primaryActions = [CancelChatActionId, "inlineChat2.keep"];
+                    const primaryActions = ["inlineChat2.cancel", "inlineChat2.keep", "inlineChat2.close"];
                     const labeledActions = primaryActions.concat(["inlineChat2.undo"]);
                     if (!labeledActions.includes(action.id)) {
                         return undefined;
                     }
-                    return ( new ChatEditingAcceptRejectActionViewItem(action, options, entry, undefined, that._keybindingService, primaryActions));
+                    return ( new ChatEditingAcceptRejectActionViewItem(action, {
+                        ...options,
+                        keybinding: undefined
+                    }, entry, undefined, that._keybindingService, primaryActions));
                 }
             })
         );
@@ -411,6 +471,6 @@ let InlineChatSessionOverlayWidget = class InlineChatSessionOverlayWidget extend
         this._showStore.clear();
     }
 };
-InlineChatSessionOverlayWidget = ( __decorate([( __param(1, IInstantiationService)), ( __param(2, IKeybindingService))], InlineChatSessionOverlayWidget));
+InlineChatSessionOverlayWidget = ( __decorate([( __param(1, IInstantiationService)), ( __param(2, IKeybindingService)), ( __param(3, ILogService))], InlineChatSessionOverlayWidget));
 
 export { InlineChatInputWidget, InlineChatSessionOverlayWidget };

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

@@ -248,7 +248,7 @@ let InlineChatWidget = class InlineChatWidget {
         );
         this._store.add(this._chatService.onDidPerformUserAction(e => {
             if (isEqual(e.sessionResource, this._chatWidget.viewModel?.model.sessionResource) && e.action.kind === "vote") {
-                this.updateStatus(( localize(8844, "Thank you for your feedback!")), {
+                this.updateStatus(( localize(9493, "Thank you for your feedback!")), {
                     resetAfter: 1250
                 });
             }
@@ -261,11 +261,11 @@ let InlineChatWidget = class InlineChatWidget {
             if (this._configurationService.getValue(AccessibilityVerbositySettingId.InlineChat)) {
                 const kbLabel = this._keybindingService.lookupKeybinding(AccessibilityCommandId.OpenAccessibilityHelp)?.getLabel();
                 label = kbLabel ? ( localize(
-                    8845,
+                    9494,
                     "Inline Chat Input, Use {0} for Inline Chat Accessibility Help.",
                     kbLabel
                 )) : ( localize(
-                    8846,
+                    9495,
                     "Inline Chat Input, Run the Inline Chat Accessibility Help command for more information."
                 ));
             }
@@ -286,7 +286,7 @@ let InlineChatWidget = class InlineChatWidget {
             this._elements.disclaimerLabel.classList.toggle("hidden", !showDisclaimer);
             if (showDisclaimer) {
                 const renderedMarkdown = disposables.add(this._markdownRendererService.render(( new MarkdownString(( localize(
-                    8847,
+                    9496,
                     "By continuing with {0} Copilot, you agree to {1}'s [Terms]({2}) and [Privacy Statement]({3})",
                     product.defaultChatAgent?.provider?.default?.name ?? "",
                     product.defaultChatAgent?.provider?.default?.name ?? "",
@@ -495,7 +495,7 @@ let InlineChatWidget = class InlineChatWidget {
     }
 };
 InlineChatWidget = ( __decorate([( __param(2, IInstantiationService)), ( __param(3, IContextKeyService)), ( __param(4, IKeybindingService)), ( __param(5, IAccessibilityService)), ( __param(6, IConfigurationService)), ( __param(7, IAccessibleViewService)), ( __param(8, ITextModelService)), ( __param(9, IChatService)), ( __param(10, IHoverService)), ( __param(11, IChatEntitlementService)), ( __param(12, IMarkdownRendererService))], InlineChatWidget));
-const defaultAriaLabel = ( localize(8848, "Inline Chat Input"));
+const defaultAriaLabel = ( localize(9497, "Inline Chat Input"));
 let EditorBasedInlineChatWidget = class EditorBasedInlineChatWidget extends InlineChatWidget {
     constructor(
         location,

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

@@ -240,7 +240,7 @@ let InlineChatZoneWidget = class InlineChatZoneWidget extends ZoneWidget {
         this._ctxCursorPosition.reset();
         this.widget.chatWidget.setVisible(false);
         super.hide();
-        status(( localize(8849, "Closed inline chat widget")));
+        status(( localize(9498, "Closed inline chat widget")));
         scrollState.restore(this.editor);
     }
 };

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

@@ -321,45 +321,3 @@
 .monaco-workbench .inline-chat .chat-attached-context {
 	padding: 2px 0px;
 }
-
-/* Gutter menu overlay widget */
-.inline-chat-gutter-menu {
-	background: var(--vscode-menu-background);
-	border: 1px solid var(--vscode-menu-border, var(--vscode-widget-border));
-	border-radius: 4px;
-	box-shadow: 0 2px 8px var(--vscode-widget-shadow);
-	padding: 4px 0;
-	min-width: 160px;
-	z-index: 10000;
-}
-
-.inline-chat-gutter-menu .input {
-	padding: 0 8px;
-}
-
-.inline-chat-gutter-menu .monaco-action-bar.vertical .action-item {
-	display: flex;
-	justify-content: space-between;
-	border-radius: 3px;
-	margin: 0 4px;
-}
-
-.inline-chat-gutter-menu .monaco-action-bar.vertical .action-item .action-label {
-	font-size: 13px;
-	width: 100%;
-}
-
-.inline-chat-gutter-menu .monaco-action-bar.vertical .action-item:not(.disabled):hover,
-.inline-chat-gutter-menu .monaco-action-bar.vertical .action-item:not(.disabled):focus-within {
-	background-color: var(--vscode-list-activeSelectionBackground);
-	color: var(--vscode-list-activeSelectionForeground);
-	outline: 1px solid var(--vscode-menu-selectionBorder, transparent);
-	outline-offset: -1px;
-}
-
-.inline-chat-gutter-menu .monaco-action-bar.vertical .action-item:not(.disabled):hover .action-label,
-.inline-chat-gutter-menu .monaco-action-bar.vertical .action-item:not(.disabled):focus-within .action-label {
-	color: var(--vscode-list-activeSelectionForeground);
-	outline: 1px solid var(--vscode-menu-selectionBorder, transparent);
-	outline-offset: -1px;
-}

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

@@ -4,8 +4,8 @@
  *--------------------------------------------------------------------------------------------*/
 
 .inline-chat-content-widget {
-	background-color: var(--vscode-editor-background);
-	padding: 2px;
+	background-color: var(--vscode-panel-background);
+	padding: 0 1px;
 	border-radius: 8px;
 	display: flex;
 	align-items: center;
@@ -14,9 +14,33 @@
 	min-width: var(--vscode-inline-chat-affordance-height);
 	min-height: var(--vscode-inline-chat-affordance-height);
 	line-height: var(--vscode-inline-chat-affordance-height);
+	border: 1px solid var(--vscode-input-border, transparent);
+	z-index: 100;
 }
 
-.inline-chat-content-widget .icon.codicon {
+.inline-chat-content-widget .action-label.codicon.codicon-light-bulb,
+.inline-chat-content-widget .action-label.codicon.codicon-lightbulb-sparkle,
+.inline-edits-view-gutter-indicator .codicon.codicon-light-bulb,
+.inline-edits-view-gutter-indicator .codicon.codicon-lightbulb-sparkle {
 	margin: 0;
 	color: var(--vscode-editorLightBulb-foreground);
 }
+
+.inline-chat-content-widget .action-label.codicon.codicon-lightbulb-autofix,
+.inline-chat-content-widget .action-label.codicon.codicon-lightbulb-sparkle-autofix,
+.inline-edits-view-gutter-indicator .codicon.codicon-lightbulb-autofix,
+.inline-edits-view-gutter-indicator .codicon.codicon-lightbulb-sparkle-autofix {
+	margin: 0;
+	color: var(--vscode-editorLightBulbAutoFix-foreground, var(--vscode-editorLightBulb-foreground));
+}
+
+.inline-chat-content-widget .action-label.codicon.codicon-sparkle-filled,
+.inline-edits-view-gutter-indicator .codicon.codicon-sparkle-filled {
+	margin: 0;
+	color: var(--vscode-editorLightBulbAi-foreground, var(--vscode-icon-foreground));
+}
+
+.inline-chat-content-widget .inline-chat-keybinding {
+	opacity: 0.7;
+	margin-left: 4px;
+}