Chat welcome experiment: Add suggested prompts and input centering (microsoft#252891)

Update chat widget welcome view with suggested prompts for startup experiments

Author: bhavyaus

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

@@ -40,7 +40,7 @@ import { buttonSecondaryBackground, buttonSecondaryForeground, buttonSecondaryHo
 import { asCssVariable } from '../../../../platform/theme/common/colorUtils.js';
 import { IThemeService } from '../../../../platform/theme/common/themeService.js';
 import { checkModeOption } from '../common/chat.js';
-import { IChatAgentCommand, IChatAgentData, IChatAgentService, IChatWelcomeMessageContent } from '../common/chatAgents.js';
+import { IChatAgentCommand, IChatAgentData, IChatAgentService } from '../common/chatAgents.js';
 import { ChatContextKeys } from '../common/chatContextKeys.js';
 import { applyingChatEditsFailedContextKey, decidedChatEditingResourceContextKey, hasAppliedChatEditsContextKey, hasUndecidedChatEditingResourceContextKey, IChatEditingService, IChatEditingSession, inChatEditingSessionContextKey, ModifiedFileEntryState } from '../common/chatEditingService.js';
 import { ChatPauseState, IChatModel, IChatResponseModel } from '../common/chatModel.js';
@@ -65,12 +65,13 @@ import { ChatEditorOptions } from './chatOptions.js';
 import './media/chat.css';
 import './media/chatAgentHover.css';
 import './media/chatViewWelcome.css';
-import { ChatViewWelcomePart } from './viewsWelcome/chatViewWelcomeController.js';
+import { ChatViewWelcomePart, IChatSuggestedPrompts, IChatViewWelcomeContent } from './viewsWelcome/chatViewWelcomeController.js';
 import { MicrotaskDelay } from '../../../../base/common/symbols.js';
 import { IChatRequestVariableEntry, ChatRequestVariableSet as ChatRequestVariableSet, isPromptFileVariableEntry, toPromptFileVariableEntry, PromptFileVariableKind } from '../common/chatVariableEntries.js';
 import { PromptsConfig } from '../common/promptSyntax/config/config.js';
 import { CancellationToken } from '../../../../base/common/cancellation.js';
 import { ComputeAutomaticInstructions } from '../common/promptSyntax/computeAutomaticInstructions.js';
+import { startupExpContext, StartupExperimentGroup } from '../../../services/coreExperimentation/common/coreExperimentationService.js';
 
 const $ = dom.$;
 
@@ -711,22 +712,43 @@ export class ChatWidget extends Disposable implements IChatWidget {
 	}
 
 	private renderWelcomeViewContentIfNeeded() {
+
+		// reset the input in welcome view if it was rendered in experimental mode
+		if (this.container.classList.contains('experimental-welcome-view')) {
+			this.container.classList.remove('experimental-welcome-view');
+			const renderFollowups = this.viewOptions.renderFollowups ?? false;
+			const renderStyle = this.viewOptions.renderStyle;
+			this.createInput(this.container, { renderFollowups, renderStyle });
+		}
+
 		if (this.viewOptions.renderStyle === 'compact' || this.viewOptions.renderStyle === 'minimal') {
 			return;
 		}
 
 		const numItems = this.viewModel?.getItems().length ?? 0;
 		if (!numItems) {
-			const welcomeContent = this.getWelcomeViewContent();
 			dom.clearNode(this.welcomeMessageContainer);
-			const tips = this.input.currentModeKind === ChatModeKind.Ask
-				? new MarkdownString(localize('chatWidget.tips', "{0} or type {1} to attach context\n\n{2} to chat with extensions\n\nType {3} to use commands", '$(attach)', '#', '$(mention)', '/'), { supportThemeIcons: true })
-				: new MarkdownString(localize('chatWidget.tips.withoutParticipants', "{0} or type {1} to attach context", '$(attach)', '#'), { supportThemeIcons: true });
 			const defaultAgent = this.chatAgentService.getDefaultAgent(this.location, this.input.currentModeKind);
 			const additionalMessage = defaultAgent?.metadata.additionalWelcomeMessage;
+
+			const startupExpValue = startupExpContext.getValue(this.contextKeyService);
+			let welcomeContent: IChatViewWelcomeContent;
+			if (startupExpValue === StartupExperimentGroup.MaximizedChat
+				|| startupExpValue === StartupExperimentGroup.SplitEmptyEditorChat
+				|| startupExpValue === StartupExperimentGroup.SplitWelcomeChat) {
+				welcomeContent = this.getExpWelcomeViewContent();
+				this.container.classList.add('experimental-welcome-view');
+			}
+			else {
+				const tips = this.input.currentModeKind === ChatModeKind.Ask
+					? new MarkdownString(localize('chatWidget.tips', "{0} or type {1} to attach context\n\n{2} to chat with extensions\n\nType {3} to use commands", '$(attach)', '#', '$(mention)', '/'), { supportThemeIcons: true })
+					: new MarkdownString(localize('chatWidget.tips.withoutParticipants', "{0} or type {1} to attach context", '$(attach)', '#'), { supportThemeIcons: true });
+				welcomeContent = this.getWelcomeViewContent();
+				welcomeContent.tips = tips;
+			}
 			this.welcomePart.value = this.instantiationService.createInstance(
 				ChatViewWelcomePart,
-				{ ...welcomeContent, tips, additionalMessage },
+				{ ...welcomeContent, additionalMessage },
 				{
 					location: this.location,
 					isWidgetAgentWelcomeViewContent: this.input?.currentModeKind === ChatModeKind.Agent
@@ -741,7 +763,7 @@ export class ChatWidget extends Disposable implements IChatWidget {
 		}
 	}
 
-	private getWelcomeViewContent(): IChatWelcomeMessageContent {
+	private getWelcomeViewContent(): IChatViewWelcomeContent {
 		const baseMessage = localize('chatMessage', "Copilot is powered by AI, so mistakes are possible. Review output carefully before use.");
 		if (this.input.currentModeKind === ChatModeKind.Ask) {
 			return {
@@ -764,6 +786,35 @@ export class ChatWidget extends Disposable implements IChatWidget {
 		}
 	}
 
+	private getExpWelcomeViewContent(): IChatViewWelcomeContent {
+		const baseMessage = localize('chatMessage', "Copilot is powered by AI, so mistakes are possible. Review output carefully before use.");
+		const welcomeContent = {
+			title: 'Get Started with VS Code',
+			message: new MarkdownString(baseMessage),
+			icon: Codicon.copilotLarge,
+			suggestedPrompts: this.getExpSuggestedPrompts(),
+			inputPart: this.inputPart.element,
+		};
+		return welcomeContent;
+	}
+
+	private getExpSuggestedPrompts(): IChatSuggestedPrompts[] {
+
+		return [
+			{
+				icon: Codicon.vscode,
+				label: localize('chatWidget.suggestedPrompts.gettingStarted', "Ask @vscode"),
+				prompt: '@vscode Help me get started with VS Code?',
+			},
+			{
+				icon: Codicon.newFolder,
+				label: localize('chatWidget.suggestedPrompts.newProject', "Create a #new Project"),
+				prompt: '#new Create a new project for me',
+			}
+		];
+	}
+
+
 	private async renderChatEditingSessionState() {
 		if (!this.input) {
 			return;

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

@@ -97,4 +97,45 @@ div.chat-welcome-view {
 			}
 		}
 	}
+
+	& > .chat-welcome-view-suggested-prompts {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 10px;
+		justify-content: center;
+		margin-top: 15px;
+
+		> .chat-welcome-view-suggested-prompt {
+			display: flex;
+			align-items: center;
+			padding: 0 4px;
+			border-radius: 8px;
+			background-color: var(--vscode-editorWidget-background);
+			cursor: pointer;
+			border: 1px solid var(--vscode-chat-requestBorder, var(--vscode-input-background, transparent));
+			border-radius: 4px;
+			gap: 2px;
+			max-width: 100%;
+			width: fit-content;
+
+			> .chat-welcome-view-suggested-prompt-icon {
+				display: flex;
+				align-items: center;
+				margin-right: 8px;
+				font-size: 4px;
+				color: var(--vscode-icon-foreground) !important;
+				align-items: center;
+			}
+
+			> .chat-welcome-view-suggested-prompt-label {
+				font-size: 14px;
+				color: var(--vscode-editorWidget-foreground);
+			}
+		}
+
+		> .chat-welcome-view-suggested-prompt:hover {
+			background-color: var(--vscode-list-hoverBackground);
+			border-color: var(--vscode-focusBorder);
+		}
+	}
 }

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

@@ -17,9 +17,9 @@ import { IInstantiationService } from '../../../../../platform/instantiation/com
 import { ILogService } from '../../../../../platform/log/common/log.js';
 import { IOpenerService } from '../../../../../platform/opener/common/opener.js';
 import { defaultButtonStyles } from '../../../../../platform/theme/browser/defaultStyles.js';
-import { IChatAgentService } from '../../common/chatAgents.js';
 import { ChatAgentLocation } from '../../common/constants.js';
 import { chatViewsWelcomeRegistry, IChatViewsWelcomeDescriptor } from './chatViewsWelcome.js';
+import { IChatWidgetService } from '../chat.js';
 
 const $ = dom.$;
 
@@ -113,6 +113,14 @@ export interface IChatViewWelcomeContent {
 	message: IMarkdownString | ((disposables: DisposableStore) => HTMLElement);
 	additionalMessage?: string | IMarkdownString;
 	tips?: IMarkdownString;
+	inputPart?: HTMLElement;
+	suggestedPrompts?: IChatSuggestedPrompts[];
+}
+
+export interface IChatSuggestedPrompts {
+	icon?: ThemeIcon;
+	label: string;
+	prompt: string;
 }
 
 export interface IChatViewWelcomeRenderOptions {
@@ -130,7 +138,7 @@ export class ChatViewWelcomePart extends Disposable {
 		@IOpenerService private openerService: IOpenerService,
 		@IInstantiationService private instantiationService: IInstantiationService,
 		@ILogService private logService: ILogService,
-		@IChatAgentService chatAgentService: IChatAgentService,
+		@IChatWidgetService private chatWidgetService: IChatWidgetService,
 	) {
 		super();
 		this.element = dom.$('.chat-welcome-view');
@@ -174,6 +182,28 @@ export class ChatViewWelcomePart extends Disposable {
 				dom.append(message, additionalMessageResult.element);
 			}
 
+			if (content.inputPart) {
+				dom.append(this.element, content.inputPart);
+			}
+
+			if (content.suggestedPrompts && content.suggestedPrompts.length) {
+
+				// create a tile with icon and label for each suggested promot
+				const suggestedPromptsContainer = dom.append(this.element, $('.chat-welcome-view-suggested-prompts'));
+				for (const prompt of content.suggestedPrompts) {
+					const promptElement = dom.append(suggestedPromptsContainer, $('.chat-welcome-view-suggested-prompt'));
+					if (prompt.icon) {
+						const iconElement = dom.append(promptElement, $('.chat-welcome-view-suggested-prompt-icon'));
+						iconElement.appendChild(renderIcon(prompt.icon));
+					}
+					const labelElement = dom.append(promptElement, $('.chat-welcome-view-suggested-prompt-label'));
+					labelElement.textContent = prompt.label;
+					this._register(dom.addDisposableListener(promptElement, dom.EventType.CLICK, () => {
+						this.chatWidgetService.lastFocusedWidget?.setInput(prompt.prompt);
+					}));
+				}
+			}
+
 			// Tips
 			if (content.tips) {
 				const tips = dom.append(this.element, $('.chat-welcome-view-tips'));