add status/message line to inline chat content widget (#207552)

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;
+}

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);
+	}
 }

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();