Try a dynamic height rendering approach (microsoft#188126)

* Try a dynamic height rendering approach

* Working implementation

Summary:

1. dispose the view model & ChatInputPart when we dispose the ChatWidget
2. handle async/next tick code better using disposables
3. layout onDidChangeItems & when a ChatItem height changes for better accuracy
4. use new useDynamicMessageLayout for inputOnTop

Author: TylerLeonhardt

src/vs/workbench/contrib/chat/browser/actions/quickQuestionActions/multipleByScrollQuickQuestionAction.ts

@@ -22,13 +22,18 @@ import { ChatWidget } from 'vs/workbench/contrib/chat/browser/chatWidget';
 import { ChatModel } from 'vs/workbench/contrib/chat/common/chatModel';
 import { IChatService } from 'vs/workbench/contrib/chat/common/chatService';
 
+interface IChatQuickQuestionModeOptions {
+	renderInputOnTop: boolean;
+	useDynamicMessageLayout: boolean;
+}
+
 class BaseChatQuickQuestionMode implements IQuickQuestionMode {
 	private _currentTimer: any | undefined;
 	private _input: IQuickPick<IQuickPickItem> | undefined;
 	private _currentChat: QuickChat | undefined;
 
 	constructor(
-		private readonly renderInputOnTop: boolean
+		private readonly _options: IChatQuickQuestionModeOptions
 	) { }
 
 	run(accessor: ServicesAccessor, query: string): void {
@@ -62,12 +67,17 @@ class BaseChatQuickQuestionMode implements IQuickQuestionMode {
 		this._input.hideInput = true;
 
 
-		const containerList = dom.$('.interactive-list');
-		const containerSession = dom.$('.interactive-session', undefined, containerList);
-		containerSession.style.height = '500px';
-		containerList.style.position = 'relative';
+		const containerSession = dom.$('.interactive-session');
 		this._input.widget = containerSession;
 
+		this._currentChat ??= instantiationService.createInstance(QuickChat, {
+			providerId: providerInfo.id,
+			...this._options
+		});
+		// show needs to come before the current chat rendering
+		this._input.show();
+		this._currentChat.render(containerSession);
+
 		const clearButton = {
 			iconClass: ThemeIcon.asClassName(Codicon.clearAll),
 			tooltip: localize('clear', "Clear"),
@@ -92,12 +102,6 @@ class BaseChatQuickQuestionMode implements IQuickQuestionMode {
 
 		//#endregion
 
-		this._currentChat ??= instantiationService.createInstance(QuickChat, {
-			providerId: providerInfo.id,
-			renderInputOnTop: this.renderInputOnTop,
-		});
-		this._currentChat.render(containerSession);
-
 		disposableStore.add(this._input.onDidAccept(() => {
 			this._currentChat?.acceptInput();
 		}));
@@ -110,7 +114,6 @@ class BaseChatQuickQuestionMode implements IQuickQuestionMode {
 			}
 		}));
 
-		this._input.show();
 		this._currentChat.layout();
 		this._currentChat.focus();
 
@@ -134,7 +137,7 @@ class QuickChat extends Disposable {
 	private _currentParentElement?: HTMLElement;
 
 	constructor(
-		private readonly chatViewOptions: IChatViewOptions & { renderInputOnTop: boolean },
+		private readonly _options: IChatViewOptions & IChatQuickQuestionModeOptions,
 		@IInstantiationService private readonly instantiationService: IInstantiationService,
 		@IContextKeyService private readonly contextKeyService: IContextKeyService,
 		@IChatService private readonly chatService: IChatService,
@@ -157,14 +160,15 @@ class QuickChat extends Disposable {
 	}
 
 	render(parent: HTMLElement): void {
-		this.widget?.dispose();
 		this._currentParentElement = parent;
+		this._scopedContextKeyService?.dispose();
 		this._scopedContextKeyService = this._register(this.contextKeyService.createScoped(parent));
 		const scopedInstantiationService = this.instantiationService.createChild(new ServiceCollection([IContextKeyService, this.scopedContextKeyService]));
+		this.widget?.dispose();
 		this.widget = this._register(
 			scopedInstantiationService.createInstance(
 				ChatWidget,
-				{ resource: true, renderInputOnTop: this.chatViewOptions.renderInputOnTop },
+				{ resource: true, renderInputOnTop: this._options.renderInputOnTop },
 				{
 					listForeground: editorForeground,
 					listBackground: editorBackground,
@@ -173,6 +177,9 @@ class QuickChat extends Disposable {
 				}));
 		this.widget.render(parent);
 		this.widget.setVisible(true);
+		if (this._options.useDynamicMessageLayout) {
+			this.widget.setDynamicChatTreeItemLayout(2, 600);
+		}
 		this.updateModel();
 		if (this._currentQuery) {
 			this.widget.inputEditor.setSelection({
@@ -203,7 +210,7 @@ class QuickChat extends Disposable {
 	}
 
 	async openChatView(): Promise<void> {
-		const widget = await this._chatWidgetService.revealViewForProvider(this.chatViewOptions.providerId);
+		const widget = await this._chatWidgetService.revealViewForProvider(this._options.providerId);
 		if (!widget?.viewModel || !this.model) {
 			return;
 		}
@@ -233,13 +240,13 @@ class QuickChat extends Disposable {
 	}
 
 	layout(): void {
-		if (this._currentParentElement) {
+		if (!this._options.useDynamicMessageLayout && this._currentParentElement) {
 			this.widget.layout(500, this._currentParentElement.offsetWidth);
 		}
 	}
 
 	private updateModel(): void {
-		this.model ??= this.chatService.startSession(this.chatViewOptions.providerId, CancellationToken.None);
+		this.model ??= this.chatService.startSession(this._options.providerId, CancellationToken.None);
 		if (!this.model) {
 			throw new Error('Could not start chat session');
 		}
@@ -252,7 +259,10 @@ AskQuickQuestionAction.registerMode(
 	QuickQuestionMode.InputOnTopChat,
 	class InputOnTopChatQuickQuestionMode extends BaseChatQuickQuestionMode {
 		constructor() {
-			super(true);
+			super({
+				renderInputOnTop: true,
+				useDynamicMessageLayout: true
+			});
 		}
 	}
 );
@@ -261,7 +271,10 @@ AskQuickQuestionAction.registerMode(
 	QuickQuestionMode.InputOnBottomChat,
 	class InputOnBottomChatQuickQuestionMode extends BaseChatQuickQuestionMode {
 		constructor() {
-			super(false);
+			super({
+				renderInputOnTop: false,
+				useDynamicMessageLayout: false
+			});
 		}
 	}
 );

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

@@ -305,6 +305,8 @@ export class ChatListItemRenderer extends Disposable implements ITreeRenderer<Ch
 					return this.commandService.executeCommand(followup.commandId, ...(followup.args ?? []));
 				}));
 		}
+
+		element.currentRenderedHeight = templateData.rowContainer.offsetHeight;
 	}
 
 	private renderWelcomeMessage(element: IChatWelcomeMessageViewModel, templateData: IChatListItemTemplate) {
@@ -329,6 +331,8 @@ export class ChatListItemRenderer extends Disposable implements ITreeRenderer<Ch
 				templateData.elementDisposables.add(result);
 			}
 		}
+
+		element.currentRenderedHeight = templateData.rowContainer.offsetHeight;
 	}
 
 	/**

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

@@ -5,6 +5,7 @@
 
 import * as dom from 'vs/base/browser/dom';
 import { ITreeContextMenuEvent, ITreeElement } from 'vs/base/browser/ui/tree/tree';
+import { disposableTimeout } from 'vs/base/common/async';
 import { CancellationToken } from 'vs/base/common/cancellation';
 import { Emitter } from 'vs/base/common/event';
 import { Disposable, DisposableStore, IDisposable, combinedDisposable, toDisposable } from 'vs/base/common/lifecycle';
@@ -76,7 +77,7 @@ export class ChatWidget extends Disposable implements IChatWidget {
 
 	private previousTreeScrollHeight: number = 0;
 
-	private viewModelDisposables = new DisposableStore();
+	private viewModelDisposables = this._register(new DisposableStore());
 	private _viewModel: ChatViewModel | undefined;
 	private set viewModel(viewModel: ChatViewModel | undefined) {
 		if (this._viewModel === viewModel) {
@@ -92,8 +93,11 @@ export class ChatWidget extends Disposable implements IChatWidget {
 
 		this.slashCommandsPromise = undefined;
 		this.lastSlashCommands = undefined;
+
 		this.getSlashCommands().then(() => {
-			this.onDidChangeItems();
+			if (!this._isDisposed) {
+				this.onDidChangeItems();
+			}
 		});
 
 		this._onDidChangeViewModel.fire();
@@ -135,6 +139,12 @@ export class ChatWidget extends Disposable implements IChatWidget {
 		return this.inputPart.inputUri;
 	}
 
+	private _isDisposed: boolean = false;
+	public override dispose(): void {
+		this._isDisposed = true;
+		super.dispose();
+	}
+
 	render(parent: HTMLElement): void {
 		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));
@@ -193,6 +203,10 @@ export class ChatWidget extends Disposable implements IChatWidget {
 				}
 			});
 
+			if (this._dynamicMessageLayoutData) {
+				this.layoutDynamicChatTreeItemMode();
+			}
+
 			const lastItem = treeItems[treeItems.length - 1]?.element;
 			if (lastItem && isResponseVM(lastItem) && lastItem.isComplete) {
 				this.renderFollowups(lastItem.replyFollowups);
@@ -216,13 +230,13 @@ export class ChatWidget extends Disposable implements IChatWidget {
 		this.renderer.setVisible(visible);
 
 		if (visible) {
-			setTimeout(() => {
+			this._register(disposableTimeout(() => {
 				// Progressive rendering paused while hidden, so start it up again.
 				// Do it after a timeout because the container is not visible yet (it should be but offsetHeight returns 0 here)
 				if (this.visible) {
 					this.onDidChangeItems();
 				}
-			}, 0);
+			}, 0));
 		}
 	}
 
@@ -336,7 +350,7 @@ export class ChatWidget extends Disposable implements IChatWidget {
 	}
 
 	private createInput(container: HTMLElement, options?: { renderFollowups: boolean }): void {
-		this.inputPart = this.instantiationService.createInstance(ChatInputPart, { renderFollowups: options?.renderFollowups ?? true });
+		this.inputPart = this._register(this.instantiationService.createInstance(ChatInputPart, { renderFollowups: options?.renderFollowups ?? true }));
 		this.inputPart.render(container, '', this);
 
 		this._register(this.inputPart.onDidFocus(() => this._onDidFocus.fire()));
@@ -471,6 +485,47 @@ export class ChatWidget extends Disposable implements IChatWidget {
 		this.listContainer.style.height = `${height - inputPartHeight}px`;
 	}
 
+	private _dynamicMessageLayoutData?: { numOfMessages: number; maxHeight: number };
+
+	// An alternative to layout, this allows you to specify the number of ChatTreeItems
+	// you want to show, and the max height of the container. It will then layout the
+	// tree to show that many items.
+	setDynamicChatTreeItemLayout(numOfChatTreeItems: number, maxHeight: number) {
+		this._dynamicMessageLayoutData = { numOfMessages: numOfChatTreeItems, maxHeight };
+		this._register(this.renderer.onDidChangeItemHeight(() => this.layoutDynamicChatTreeItemMode()));
+	}
+
+	layoutDynamicChatTreeItemMode(allowRecurse = true): void {
+		if (!this.viewModel) {
+			return;
+		}
+		const inputHeight = this.inputPart.layout(this._dynamicMessageLayoutData!.maxHeight, this.container.offsetWidth);
+
+		const totalMessages = this.viewModel.getItems();
+		// grab the last N messages
+		const messages = totalMessages.slice(-this._dynamicMessageLayoutData!.numOfMessages);
+
+		const needsRerender = messages.some(m => m.currentRenderedHeight === undefined);
+		const listHeight = needsRerender
+			? this._dynamicMessageLayoutData!.maxHeight
+			: messages.reduce((acc, message) => acc + message.currentRenderedHeight!, 0);
+
+		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),
+				this._dynamicMessageLayoutData!.maxHeight
+			),
+			this.container.offsetWidth
+		);
+
+		if (needsRerender && allowRecurse) {
+			// TODO: figure out a better place to reveal the last element
+			revealLastElement(this.tree);
+			this.layoutDynamicChatTreeItemMode(false);
+		}
+	}
+
 	saveState(): void {
 		this.inputPart.saveState();
 	}

src/vs/workbench/contrib/chat/common/chatViewModel.ts

@@ -368,4 +368,5 @@ export interface IChatWelcomeMessageViewModel {
 	readonly username: string;
 	readonly avatarIconUri?: URI;
 	readonly content: IChatWelcomeMessageContent[];
+	currentRenderedHeight?: number;
 }