Update chat widget welcome view and telemetry logging (microsoft#253121)

* Update chat widget welcome view and telemetry logging

- Localize the welcome title in the chat widget.
- Update max width for chat inputs
- Integrate telemetry logging for suggested prompt clicks in the chat view welcome part.

* Rename telemetry event for suggested prompt clicks to improve clarity

Author: bhavyaus

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

@@ -788,7 +788,7 @@ 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',
+			title: localize('expChatTitle', 'Get Started with VS Code'),
 			message: new MarkdownString(baseMessage),
 			icon: Codicon.copilotLarge,
 			suggestedPrompts: this.getExpSuggestedPrompts(),
@@ -1725,7 +1725,14 @@ export class ChatWidget extends Disposable implements IChatWidget {
 		if (this.viewModel?.editing) {
 			this.inlineInputPart?.layout(layoutHeight, width);
 		}
-		this.inputPart.layout(layoutHeight, width);
+
+		if (this.container.classList.contains('experimental-welcome-view')) {
+			this.inputPart.layout(layoutHeight, Math.min(width, 700));
+		}
+		else {
+			this.inputPart.layout(layoutHeight, width);
+		}
+
 		const inputHeight = this.inputPart.inputPartHeight;
 		const lastElementVisible = this.tree.scrollTop + this.tree.renderHeight >= this.tree.scrollHeight - 2;
 

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

@@ -21,6 +21,10 @@
 	overflow: hidden;
 }
 
+.interactive-session .experimental-welcome-view & > .chat-welcome-view-input-part {
+	max-width: 700px;
+}
+
 /* Container for ChatViewPane welcome view */
 .pane-body > .chat-view-welcome {
 	flex-direction: column;

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

@@ -20,6 +20,7 @@ import { defaultButtonStyles } from '../../../../../platform/theme/browser/defau
 import { ChatAgentLocation } from '../../common/constants.js';
 import { chatViewsWelcomeRegistry, IChatViewsWelcomeDescriptor } from './chatViewsWelcome.js';
 import { IChatWidgetService } from '../chat.js';
+import { ITelemetryService } from '../../../../../platform/telemetry/common/telemetry.js';
 
 const $ = dom.$;
 
@@ -139,6 +140,7 @@ export class ChatViewWelcomePart extends Disposable {
 		@IInstantiationService private instantiationService: IInstantiationService,
 		@ILogService private logService: ILogService,
 		@IChatWidgetService private chatWidgetService: IChatWidgetService,
+		@ITelemetryService private telemetryService: ITelemetryService,
 	) {
 		super();
 		this.element = dom.$('.chat-welcome-view');
@@ -199,6 +201,19 @@ export class ChatViewWelcomePart extends Disposable {
 					const labelElement = dom.append(promptElement, $('.chat-welcome-view-suggested-prompt-label'));
 					labelElement.textContent = prompt.label;
 					this._register(dom.addDisposableListener(promptElement, dom.EventType.CLICK, () => {
+
+						type SuggestedPromptClickEvent = { suggestedPrompt: string };
+
+						type SuggestedPromptClickData = {
+							owner: 'bhavyaus';
+							comment: 'Event used to gain insights into when suggested prompts are clicked.';
+							suggestedPrompt: { classification: 'SystemMetaData'; purpose: 'FeatureInsight'; comment: 'The suggested prompt clicked.' };
+						};
+
+						this.telemetryService.publicLog2<SuggestedPromptClickEvent, SuggestedPromptClickData>('chat.clickedSuggestedPrompt', {
+							suggestedPrompt: prompt.prompt,
+						});
+
 						this.chatWidgetService.lastFocusedWidget?.setInput(prompt.prompt);
 					}));
 				}