Update edits agent mode welcome view message

Add "agent mode" subtitle
microsoft · Jan 29, 2025 · 6c09b22 · 6c09b22
1 parent 2c56755
commit 6c09b22
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 9 deletions.
diff --git a/src/vs/workbench/contrib/chat/browser/media/chatViewWelcome.css b/src/vs/workbench/contrib/chat/browser/media/chatViewWelcome.css
@@ -50,13 +50,18 @@ div.chat-welcome-view {
 		text-align: center;
 	}
 
-	& > .chat-welcome-view-indicator {
-		color: var(--vscode-badge-foreground);
-		background: var(--vscode-badge-background);
-		padding: 1px 8px;
-		border-radius: 14px;
+	& > .chat-welcome-view-indicator-container {
+		display: flex;
 		margin-top: 10px;
-		font-size: 11px;
+		gap: 9px;
+
+		& > .chat-welcome-view-indicator {
+			font-size: 11px;
+			color: var(--vscode-badge-foreground);
+			background: var(--vscode-badge-background);
+			padding: 1px 8px;
+			border-radius: 14px;
+		}
 	}
 
 	& > .chat-welcome-view-message {

diff --git a/src/vs/workbench/contrib/chat/browser/viewsWelcome/chatViewWelcomeController.ts b/src/vs/workbench/contrib/chat/browser/viewsWelcome/chatViewWelcomeController.ts
@@ -148,9 +148,11 @@ export class ChatViewWelcomePart extends Disposable {
 			// Preview indicator
 			if (options?.location === ChatAgentLocation.EditingSession && typeof content.message !== 'function' && chatAgentService.toolsAgentModeEnabled) {
 				// Override welcome message for the agent. Sort of a hack, should it come from the participant? This case is different because the welcome content typically doesn't change per ChatWidget
-				content.message = new MarkdownString('Ask Copilot to edit your files in agent mode. Copilot will automatically use multiple requests to pick files to edit, run terminal commands, and iterate on errors.\n\nCopilot is powered by AI, so mistakes are possible. Review output carefully before use.');
-				const featureIndicator = dom.append(this.element, $('.chat-welcome-view-indicator'));
-				featureIndicator.textContent = localize('experimental', "EXPERIMENTAL");
+				const agentMessage = localize({ key: 'agentMessage', comment: ['{Locked="["}', '{Locked="]({0})"}'] }, "Ask Copilot to edit your files in [agent mode]({0}). Copilot will automatically use multiple requests to pick files to edit, run terminal commands, and iterate on errors.\n\nCopilot is powered by AI, so mistakes are possible. Review output carefully before use.", 'https://aka.ms/vscode-copilot-agent');
+				content.message = new MarkdownString(agentMessage);
+				const container = dom.append(this.element, $('.chat-welcome-view-indicator-container'));
+				dom.append(container, $('.chat-welcome-view-subtitle', undefined, localize('agentModeSubtitle', "Agent Mode")));
+				dom.append(container, $('.chat-welcome-view-indicator', undefined, localize('experimental', "EXPERIMENTAL")));
 			}
 
 			// Message