Inline chat fixes and polish (microsoft#218398)

* react to changes of `inlineChat.experimental.textButtons` (no more window reload)

microsoft#217845

* fix status label wrapping

* remove unused toolbar

* fix microsoft#218395

Author: jrieken

src/vs/workbench/contrib/inlineChat/browser/inlineChat.contribution.ts

@@ -125,9 +125,15 @@ class MenuCopier implements IDisposable {
 				updateMenu();
 			}
 		});
+		const listener2 = configService.onDidChangeConfiguration(e => {
+			if (e.affectsConfiguration(InlineChatConfigKeys.ExpTextButtons)) {
+				updateMenu();
+			}
+		});
 
 		this.dispose = () => {
 			listener.dispose();
+			listener2.dispose();
 			store.dispose();
 		};
 	}

src/vs/workbench/contrib/inlineChat/browser/inlineChatWidget.ts

@@ -64,11 +64,6 @@ export interface IInlineChatWidgetConstructionOptions {
 	 */
 	statusMenuId: MenuId | { menu: MenuId; options: IWorkbenchButtonBarOptions };
 
-	/**
-	 * The men that rendered in the lower right corner, use for feedback
-	 */
-	feedbackMenuId?: MenuId;
-
 	/**
 	 * The options for the chat widget
 	 */
@@ -97,9 +92,9 @@ export class InlineChatWidget {
 			h('div.accessibleViewer@accessibleViewer'),
 			h('div.status@status', [
 				h('div.label.info.hidden@infoLabel'),
-				h('div.actions.hidden@statusToolbar'),
+				h('div.actions.text-style.hidden@toolbar1'),
+				h('div.actions.button-style.hidden@toolbar2'),
 				h('div.label.status.hidden@statusLabel'),
-				h('div.actions.hidden@feedbackToolbar'),
 			]),
 		]
 	);
@@ -200,46 +195,34 @@ export class InlineChatWidget {
 
 		const statusMenuId = options.statusMenuId instanceof MenuId ? options.statusMenuId : options.statusMenuId.menu;
 
-		if (this._configurationService.getValue(InlineChatConfigKeys.ExpTextButtons)) {
-			// TEXT-ONLY bar
-			const statusToolbarMenu = scopedInstaService.createInstance(MenuWorkbenchToolBar, this._elements.statusToolbar, statusMenuId, {
-				hiddenItemStrategy: HiddenItemStrategy.NoHide,
-				telemetrySource: options.chatWidgetViewOptions?.menus?.telemetrySource,
-				actionViewItemProvider: action => action instanceof MenuItemAction ? this._instantiationService.createInstance(TextOnlyMenuEntryActionViewItem, action, { conversational: true }) : undefined,
-				toolbarOptions: { primaryGroup: '0_main' },
-				menuOptions: { renderShortTitle: true },
-				label: true,
-				icon: false
-			});
-			this._store.add(statusToolbarMenu.onDidChangeMenuItems(() => this._onDidChangeHeight.fire()));
-			this._store.add(statusToolbarMenu);
-
-		} else {
-			// BUTTON bar
-			const statusMenuOptions = options.statusMenuId instanceof MenuId ? undefined : options.statusMenuId.options;
-			const statusButtonBar = scopedInstaService.createInstance(MenuWorkbenchButtonBar, this._elements.statusToolbar, statusMenuId, {
-				toolbarOptions: { primaryGroup: '0_main' },
-				telemetrySource: options.chatWidgetViewOptions?.menus?.telemetrySource,
-				menuOptions: { renderShortTitle: true },
-				...statusMenuOptions,
-			});
-			this._store.add(statusButtonBar.onDidChange(() => this._onDidChangeHeight.fire()));
-			this._store.add(statusButtonBar);
-		}
-
-		const workbenchToolbarOptions = {
+		// TEXT-ONLY bar
+		const statusToolbarMenu = scopedInstaService.createInstance(MenuWorkbenchToolBar, this._elements.toolbar1, statusMenuId, {
 			hiddenItemStrategy: HiddenItemStrategy.NoHide,
-			toolbarOptions: {
-				primaryGroup: () => true,
-				useSeparatorsInPrimaryActions: true
-			}
-		};
+			telemetrySource: options.chatWidgetViewOptions?.menus?.telemetrySource,
+			actionViewItemProvider: action => action instanceof MenuItemAction ? this._instantiationService.createInstance(TextOnlyMenuEntryActionViewItem, action, { conversational: true }) : undefined,
+			toolbarOptions: { primaryGroup: '0_main' },
+			menuOptions: { renderShortTitle: true },
+			label: true,
+			icon: false
+		});
+		this._store.add(statusToolbarMenu.onDidChangeMenuItems(() => this._onDidChangeHeight.fire()));
+		this._store.add(statusToolbarMenu);
+
+		// BUTTON bar
+		const statusMenuOptions = options.statusMenuId instanceof MenuId ? undefined : options.statusMenuId.options;
+		const statusButtonBar = scopedInstaService.createInstance(MenuWorkbenchButtonBar, this._elements.toolbar2, statusMenuId, {
+			toolbarOptions: { primaryGroup: '0_main' },
+			telemetrySource: options.chatWidgetViewOptions?.menus?.telemetrySource,
+			menuOptions: { renderShortTitle: true },
+			...statusMenuOptions,
+		});
+		this._store.add(statusButtonBar.onDidChange(() => this._onDidChangeHeight.fire()));
+		this._store.add(statusButtonBar);
+
+		const toggleToolbar = () => this._elements.status.classList.toggle('text', this._configurationService.getValue(InlineChatConfigKeys.ExpTextButtons));
+		this._store.add(this._configurationService.onDidChangeConfiguration(e => e.affectsConfiguration(InlineChatConfigKeys.ExpTextButtons) && toggleToolbar()));
+		toggleToolbar();
 
-		if (options.feedbackMenuId) {
-			const feedbackToolbar = this._instantiationService.createInstance(MenuWorkbenchToolBar, this._elements.feedbackToolbar, options.feedbackMenuId, { ...workbenchToolbarOptions, hiddenItemStrategy: HiddenItemStrategy.Ignore });
-			this._store.add(feedbackToolbar.onDidChangeMenuItems(() => this._onDidChangeHeight.fire()));
-			this._store.add(feedbackToolbar);
-		}
 
 		this._store.add(this._configurationService.onDidChangeConfiguration(e => {
 			if (e.affectsConfiguration(AccessibilityVerbositySettingId.InlineChat)) {
@@ -402,8 +385,8 @@ export class InlineChatWidget {
 
 	updateToolbar(show: boolean) {
 		this._elements.root.classList.toggle('toolbar', show);
-		this._elements.statusToolbar.classList.toggle('hidden', !show);
-		this._elements.feedbackToolbar.classList.toggle('hidden', !show);
+		this._elements.toolbar1.classList.toggle('hidden', !show);
+		this._elements.toolbar2.classList.toggle('hidden', !show);
 		this._elements.status.classList.toggle('actions', show);
 		this._elements.infoLabel.classList.toggle('hidden', show);
 		this._onDidChangeHeight.fire();
@@ -533,8 +516,8 @@ export class InlineChatWidget {
 
 		reset(this._elements.statusLabel);
 		this._elements.statusLabel.classList.toggle('hidden', true);
-		this._elements.statusToolbar.classList.add('hidden');
-		this._elements.feedbackToolbar.classList.add('hidden');
+		this._elements.toolbar1.classList.add('hidden');
+		this._elements.toolbar2.classList.add('hidden');
 		this.updateInfo('');
 
 		this.chatWidget.setModel(this._defaultChatModel, {});

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

@@ -58,6 +58,7 @@
 }
 
 .monaco-workbench .inline-chat .chat-widget .interactive-session .interactive-list .interactive-item-container.minimal > .header {
+	top: 5px;
 	right: 10px;
 }
 
@@ -89,7 +90,8 @@
 	overflow: hidden;
 	color: var(--vscode-descriptionForeground);
 	font-size: 11px;
-	display: inline-flex;
+	display: flex;
+	white-space: nowrap;
 }
 
 .monaco-workbench .inline-chat .status .label.info {
@@ -114,7 +116,7 @@
 }
 
 .monaco-workbench .inline-chat .status .label > .codicon {
-	padding: 0 5px;
+	padding: 0 3px;
 	font-size: 12px;
 	line-height: 18px;
 }
@@ -185,6 +187,24 @@
 	}
 }
 
+.monaco-workbench .inline-chat .status {
+	.actions.text-style {
+		display: none;
+	}
+	.actions.button-style {
+		display: inherit;
+	}
+}
+
+.monaco-workbench .inline-chat .status.text {
+	.actions.text-style {
+		display: inherit;
+	}
+	.actions.button-style {
+		display: none;
+	}
+}
+
 .monaco-workbench .inline-chat .status .actions > .monaco-button,
 .monaco-workbench .inline-chat .status .actions > .monaco-button-dropdown {
 	margin-right: 4px;

src/vs/workbench/contrib/inlineChat/common/inlineChat.ts

@@ -67,7 +67,7 @@ Registry.as<IConfigurationRegistry>(Extensions.Configuration).registerConfigurat
 			],
 		},
 		[InlineChatConfigKeys.ExpTextButtons]: {
-			description: localize('txtButtons', "Whether to use textual buttons (Requires restart)."),
+			description: localize('txtButtons', "Whether to use textual buttons."),
 			default: false,
 			type: 'boolean',
 			tags: ['experimental']