diff --git a/src/vs/workbench/contrib/inlineChat/browser/inlineChatContentWidget.css b/src/vs/workbench/contrib/inlineChat/browser/inlineChatContentWidget.css index 011978066d584..dd658f7303d1e 100644 --- a/src/vs/workbench/contrib/inlineChat/browser/inlineChatContentWidget.css +++ b/src/vs/workbench/contrib/inlineChat/browser/inlineChatContentWidget.css @@ -4,8 +4,25 @@ *--------------------------------------------------------------------------------------------*/ .monaco-workbench .inline-chat-content-widget { - padding: 6px; + padding: 6px 6px 2px 6px; border-radius: 4px; background-color: var(--vscode-inlineChat-background); box-shadow: 0 4px 8px var(--vscode-inlineChat-shadow); } + +.monaco-workbench .inline-chat-content-widget .hidden { + display: none; +} + +.monaco-workbench .inline-chat-content-widget .message { + overflow: hidden; + color: var(--vscode-descriptionForeground); + font-size: 11px; + display: inline-flex; +} + +.monaco-workbench .inline-chat-content-widget .message > .codicon { + padding-right: 5px; + font-size: 12px; + line-height: 18px; +} diff --git a/src/vs/workbench/contrib/inlineChat/browser/inlineChatContentWidget.ts b/src/vs/workbench/contrib/inlineChat/browser/inlineChatContentWidget.ts index 1462e6066dbc3..3cdd1db51b11e 100644 --- a/src/vs/workbench/contrib/inlineChat/browser/inlineChatContentWidget.ts +++ b/src/vs/workbench/contrib/inlineChat/browser/inlineChatContentWidget.ts @@ -12,6 +12,7 @@ import { InlineChatInputWidget } from 'vs/workbench/contrib/inlineChat/browser/i import { DisposableStore } from 'vs/base/common/lifecycle'; import { IPosition, Position } from 'vs/editor/common/core/position'; import { clamp } from 'vs/base/common/numbers'; +import { renderLabelWithIcons } from 'vs/base/browser/ui/iconLabel/iconLabels'; export class InlineChatContentWidget implements IContentWidget { @@ -20,6 +21,8 @@ export class InlineChatContentWidget implements IContentWidget { private readonly _store = new DisposableStore(); private readonly _domNode = document.createElement('div'); + private readonly _inputContainer = document.createElement('div'); + private readonly _messageContainer = document.createElement('div'); private _position?: IPosition; @@ -36,16 +39,20 @@ export class InlineChatContentWidget implements IContentWidget { ) { this._store.add(this._widget.onDidChangeHeight(() => _editor.layoutContentWidget(this))); - // this._store.add(dom.addStandardDisposableListener(this._domNode, 'click', _e => { this._widget.focus(); })); - this._domNode.tabIndex = -1; this._domNode.className = 'inline-chat-content-widget'; - this._domNode.appendChild(this._widget.domNode); + + this._domNode.appendChild(this._inputContainer); + + this._messageContainer.classList.add('hidden', 'message'); + this._domNode.appendChild(this._messageContainer); + + this._widget.moveTo(this._inputContainer); const tracker = dom.trackFocus(this._domNode); this._store.add(tracker.onDidBlur(() => { if (this._visible) { - this._onDidBlur.fire(); + // this._onDidBlur.fire(); } })); this._store.add(tracker); @@ -100,7 +107,8 @@ export class InlineChatContentWidget implements IContentWidget { this._visible = true; this._focusNext = true; - this._widget.moveTo(this._domNode); + + this._widget.moveTo(this._inputContainer); this._widget.reset(); const wordInfo = this._editor.getModel()?.getWordAtPosition(position); @@ -116,4 +124,11 @@ export class InlineChatContentWidget implements IContentWidget { this._editor.removeContentWidget(this); } } + + updateMessage(message: string) { + this._messageContainer.classList.toggle('hidden', !message); + const renderedMessage = renderLabelWithIcons(message); + dom.reset(this._messageContainer, ...renderedMessage); + this._editor.layoutContentWidget(this); + } } diff --git a/src/vs/workbench/contrib/inlineChat/browser/inlineChatController.ts b/src/vs/workbench/contrib/inlineChat/browser/inlineChatController.ts index c7174bd3e5642..dce950c201a72 100644 --- a/src/vs/workbench/contrib/inlineChat/browser/inlineChatController.ts +++ b/src/vs/workbench/contrib/inlineChat/browser/inlineChatController.ts @@ -372,7 +372,9 @@ export class InlineChatController implements IEditorContribution { this._zone.value.widget.updateSlashCommands(this._session.session.slashCommands ?? []); this._updatePlaceholder(); - this._zone.value.widget.updateInfo(this._session.session.message ?? localize('welcome.1', "AI-generated code may be incorrect")); + const message = this._session.session.message ?? localize('welcome.1', "AI-generated code may be incorrect"); + this._input.value.updateMessage(message); + this._zone.value.widget.updateInfo(message); this._zone.value.widget.value = this._session.session.input ?? this._session.lastInput?.value ?? this._zone.value.widget.value; if (this._session.session.input) { this._zone.value.widget.selectAll();