Make QuickChat styles closer to QuickPick (#190101)

* Make QuickChat styles closer to QuickPick

This does two main things:
* introduces a "compact" chat style that generally reduces padding and other small things like makes avatars smaller
* Misc other styles to make quick chat more quick pick-y like using the same border radius and whatnot.

For now, it still has the titlebar, but I'll remove that once I have a better spot for the buttons.

* Rob feedback

Author: TylerLeonhardt

src/vs/workbench/contrib/chat/browser/actions/chatQuickInputActions.ts

@@ -214,7 +214,7 @@ class QuickChat extends Disposable {
 		this.widget = this._register(
 			scopedInstantiationService.createInstance(
 				ChatWidget,
-				{ resource: true, renderInputOnTop: true },
+				{ resource: true, renderInputOnTop: true, renderStyle: 'compact' },
 				{
 					listForeground: editorForeground,
 					listBackground: editorBackground,

src/vs/workbench/contrib/chat/browser/chat.ts

@@ -47,7 +47,20 @@ export interface IChatCodeBlockInfo {
 
 export type ChatTreeItem = IChatRequestViewModel | IChatResponseViewModel | IChatWelcomeMessageViewModel;
 
-export type IChatWidgetViewContext = { viewId: string; renderInputOnTop?: false } | { resource: boolean; renderInputOnTop?: boolean };
+export interface IBaseChatWidgetViewContext {
+	renderInputOnTop?: boolean;
+	renderStyle?: 'default' | 'compact';
+}
+
+export interface IChatViewViewContext extends IBaseChatWidgetViewContext {
+	viewId: string;
+}
+
+export interface IChatResourceViewContext extends IBaseChatWidgetViewContext {
+	resource: boolean;
+}
+
+export type IChatWidgetViewContext = IChatViewViewContext | IChatResourceViewContext;
 
 export interface IChatWidget {
 	readonly onDidChangeViewModel: Event<void>;

src/vs/workbench/contrib/chat/browser/chatInputPart.ts

@@ -78,7 +78,7 @@ export class ChatInputPart extends Disposable implements IHistoryNavigationWidge
 
 	constructor(
 		// private readonly editorOptions: ChatEditorOptions, // TODO this should be used
-		private readonly options: { renderFollowups: boolean },
+		private readonly options: { renderFollowups: boolean; renderStyle?: 'default' | 'compact' },
 		@IChatWidgetHistoryService private readonly historyService: IChatWidgetHistoryService,
 		@IModelService private readonly modelService: IModelService,
 		@IInstantiationService private readonly instantiationService: IInstantiationService,
@@ -198,7 +198,7 @@ export class ChatInputPart extends Disposable implements IHistoryNavigationWidge
 		options.fontFamily = DEFAULT_FONT_FAMILY;
 		options.fontSize = 13;
 		options.lineHeight = 20;
-		options.padding = { top: 8, bottom: 8 };
+		options.padding = this.options.renderStyle === 'compact' ? { top: 2, bottom: 2 } : { top: 8, bottom: 8 };
 		options.cursorWidth = 1;
 		options.wrappingStrategy = 'advanced';
 		options.bracketPairColorization = { enabled: false };

src/vs/workbench/contrib/chat/browser/chatListRenderer.ts

@@ -98,6 +98,10 @@ export interface IChatRendererDelegate {
 	getSlashCommands(): ISlashCommand[];
 }
 
+export interface IChatListItemRendererOptions {
+	readonly renderStyle?: 'default' | 'compact';
+}
+
 export class ChatListItemRenderer extends Disposable implements ITreeRenderer<ChatTreeItem, FuzzyScore, IChatListItemTemplate> {
 	static readonly cursorCharacter = '\u258c';
 	static readonly ID = 'item';
@@ -122,6 +126,7 @@ export class ChatListItemRenderer extends Disposable implements ITreeRenderer<Ch
 
 	constructor(
 		private readonly editorOptions: ChatEditorOptions,
+		private readonly rendererOptions: IChatListItemRendererOptions,
 		private readonly delegate: IChatRendererDelegate,
 		@IInstantiationService private readonly instantiationService: IInstantiationService,
 		@IConfigurationService private readonly configService: IConfigurationService,
@@ -198,6 +203,9 @@ export class ChatListItemRenderer extends Disposable implements ITreeRenderer<Ch
 	renderTemplate(container: HTMLElement): IChatListItemTemplate {
 		const templateDisposables = new DisposableStore();
 		const rowContainer = dom.append(container, $('.interactive-item-container'));
+		if (this.rendererOptions.renderStyle === 'compact') {
+			rowContainer.classList.add('interactive-item-compact');
+		}
 		const header = dom.append(rowContainer, $('.header'));
 		const user = dom.append(header, $('.user'));
 		const avatar = dom.append(user, $('.avatar'));

src/vs/workbench/contrib/chat/browser/chatWidget.ts

@@ -22,7 +22,7 @@ import { WorkbenchObjectTree } from 'vs/platform/list/browser/listService';
 import { IViewsService } from 'vs/workbench/common/views';
 import { ChatTreeItem, IChatAccessibilityService, IChatCodeBlockInfo, IChatWidget, IChatWidgetService, IChatWidgetViewContext } from 'vs/workbench/contrib/chat/browser/chat';
 import { ChatInputPart } from 'vs/workbench/contrib/chat/browser/chatInputPart';
-import { ChatAccessibilityProvider, ChatListDelegate, ChatListItemRenderer, IChatRendererDelegate } from 'vs/workbench/contrib/chat/browser/chatListRenderer';
+import { ChatAccessibilityProvider, ChatListDelegate, ChatListItemRenderer, IChatListItemRendererOptions, IChatRendererDelegate } from 'vs/workbench/contrib/chat/browser/chatListRenderer';
 import { ChatEditorOptions } from 'vs/workbench/contrib/chat/browser/chatOptions';
 import { ChatViewPane } from 'vs/workbench/contrib/chat/browser/chatViewPane';
 import { CONTEXT_CHAT_REQUEST_IN_PROGRESS, CONTEXT_IN_CHAT_SESSION } from 'vs/workbench/contrib/chat/common/chatContextKeys';
@@ -147,17 +147,18 @@ export class ChatWidget extends Disposable implements IChatWidget {
 		const viewId = 'viewId' in this.viewContext ? this.viewContext.viewId : undefined;
 		this.editorOptions = this._register(this.instantiationService.createInstance(ChatEditorOptions, viewId, this.styles.listForeground, this.styles.inputEditorBackground, this.styles.resultEditorBackground));
 		const renderInputOnTop = this.viewContext.renderInputOnTop ?? false;
+		const renderStyle = this.viewContext.renderStyle;
 
 		this.container = dom.append(parent, $('.interactive-session'));
 		if (renderInputOnTop) {
-			this.createInput(this.container, { renderFollowups: false });
+			this.createInput(this.container, { renderFollowups: false, renderStyle });
 			this.listContainer = dom.append(this.container, $(`.interactive-list`));
 		} else {
 			this.listContainer = dom.append(this.container, $(`.interactive-list`));
 			this.createInput(this.container);
 		}
 
-		this.createList(this.listContainer);
+		this.createList(this.listContainer, { renderStyle });
 
 		this._register(this.editorOptions.onDidChange(() => this.onDidStyleChange()));
 		this.onDidStyleChange();
@@ -270,14 +271,19 @@ export class ChatWidget extends Disposable implements IChatWidget {
 		return this.slashCommandsPromise;
 	}
 
-	private createList(listContainer: HTMLElement): void {
+	private createList(listContainer: HTMLElement, options: IChatListItemRendererOptions): void {
 		const scopedInstantiationService = this.instantiationService.createChild(new ServiceCollection([IContextKeyService, this.contextKeyService]));
 		const delegate = scopedInstantiationService.createInstance(ChatListDelegate);
 		const rendererDelegate: IChatRendererDelegate = {
 			getListLength: () => this.tree.getNode(null).visibleChildrenCount,
 			getSlashCommands: () => this.lastSlashCommands ?? [],
 		};
-		this.renderer = this._register(scopedInstantiationService.createInstance(ChatListItemRenderer, this.editorOptions, rendererDelegate));
+		this.renderer = this._register(scopedInstantiationService.createInstance(
+			ChatListItemRenderer,
+			this.editorOptions,
+			options,
+			rendererDelegate
+		));
 		this._register(this.renderer.onDidClickFollowup(item => {
 			this.acceptInput(item);
 		}));
@@ -354,8 +360,11 @@ export class ChatWidget extends Disposable implements IChatWidget {
 		this.previousTreeScrollHeight = this.tree.scrollHeight;
 	}
 
-	private createInput(container: HTMLElement, options?: { renderFollowups: boolean }): void {
-		this.inputPart = this._register(this.instantiationService.createInstance(ChatInputPart, { renderFollowups: options?.renderFollowups ?? true }));
+	private createInput(container: HTMLElement, options?: { renderFollowups: boolean; renderStyle?: 'default' | 'compact' }): void {
+		this.inputPart = this._register(this.instantiationService.createInstance(ChatInputPart, {
+			renderFollowups: options?.renderFollowups ?? true,
+			renderStyle: options?.renderStyle,
+		}));
 		this.inputPart.render(container, '', this);
 
 		this._register(this.inputPart.onDidFocus(() => this._onDidFocus.fire()));
@@ -510,8 +519,8 @@ export class ChatWidget extends Disposable implements IChatWidget {
 
 		this.layout(
 			Math.min(
-				// we add an additional 25px in order to show that there is scrollable content
-				inputHeight + listHeight + (totalMessages.length > 2 ? 25 : 0),
+				// we add an additional 18px in order to show that there is scrollable content
+				inputHeight + listHeight + (totalMessages.length > 2 ? 18 : 0),
 				this._dynamicMessageLayoutData!.maxHeight
 			),
 			this.container.offsetWidth

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

@@ -178,6 +178,49 @@
 	color: var(--vscode-textPreformat-foreground);
 }
 
+.interactive-item-container.interactive-item-compact {
+	padding: 8px 20px 0 20px;
+}
+
+.interactive-item-container.interactive-item-compact .header {
+	height: 16px;
+}
+
+.interactive-item-container.interactive-item-compact .header .avatar {
+	width: 16px;
+	height: 16px;
+}
+
+.interactive-item-container.interactive-item-compact .header .avatar .icon {
+	width: 16px;
+	height: 16px;
+}
+
+.interactive-item-container.interactive-item-compact .value {
+	min-height: 0;
+}
+
+.interactive-item-container.interactive-item-compact .value p {
+	margin: 0 0 8px 0;
+}
+
+.interactive-item-container.interactive-item-compact .value h1 {
+	margin: 8px 0;
+
+}
+
+.interactive-item-container.interactive-item-compact .value h2 {
+	margin: 8px 0;
+}
+
+.interactive-item-container.interactive-item-compact .value h3 {
+	margin: 8px 0;
+}
+
+.interactive-item-container.interactive-item-compact .value p {
+	margin: 0 0 8px 0;
+}
+
 .interactive-session .interactive-input-and-toolbar {
 	display: flex;
 	box-sizing: border-box;
@@ -269,6 +312,10 @@
 	border-radius: 4px;
 }
 
+.interactive-item-container.interactive-item-compact .interactive-result-editor-wrapper {
+	margin: 0 0 8px 0;
+}
+
 .interactive-response .interactive-response-error-details {
 	display: flex;
 	align-items: start;
@@ -359,3 +406,25 @@
 	-webkit-mask-image: linear-gradient(rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.05));
 	mask-image: linear-gradient(rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.05));
 }
+
+/* #region Quick Chat */
+
+.quick-input-widget .interactive-session .interactive-input-part {
+	padding: 8px 6px 6px 6px;
+	border-top: 0;
+}
+
+.quick-input-widget .interactive-session .interactive-input-part .interactive-execute-toolbar {
+	bottom: 1px;
+}
+
+.quick-input-widget .interactive-session .interactive-input-and-toolbar {
+	margin: 0;
+	border-radius: 2px;
+}
+
+.quick-input-widget .interactive-session .interactive-input-and-toolbar .chat-slash-command-content-widget {
+	top: 2px !important;
+}
+
+/* #endregion */