disable continue button until user installs the extensions (microsoft#250124)

Author: sandy081

src/vs/base/browser/ui/button/button.ts

@@ -36,6 +36,7 @@ export interface IButtonOptions extends Partial<IButtonStyles> {
 	readonly supportShortLabel?: boolean;
 	readonly secondary?: boolean;
 	readonly hoverDelegate?: IHoverDelegate;
+	readonly disabled?: boolean;
 }
 
 export interface IButtonStyles {
@@ -131,6 +132,7 @@ export class Button extends Disposable implements IButton {
 			this._element.setAttribute('aria-label', options.ariaLabel);
 		}
 		container.appendChild(this._element);
+		this.enabled = !options.disabled;
 
 		this._register(Gesture.addTarget(this._element));
 

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

@@ -24,6 +24,8 @@ export interface IChatConfirmationButton {
 	isSecondary?: boolean;
 	tooltip?: string;
 	data: any;
+	disabled?: boolean;
+	onDidChangeDisablement?: Event<boolean>;
 	moreActions?: IChatConfirmationButton[];
 }
 
@@ -139,7 +141,7 @@ abstract class BaseChatConfirmationWidget extends Disposable {
 
 		this.messageElement = elements.message;
 		buttons.forEach(buttonData => {
-			const buttonOptions: IButtonOptions = { ...defaultButtonStyles, secondary: buttonData.isSecondary, title: buttonData.tooltip };
+			const buttonOptions: IButtonOptions = { ...defaultButtonStyles, secondary: buttonData.isSecondary, title: buttonData.tooltip, disabled: buttonData.disabled };
 
 			let button: IButton;
 			if (buttonData.moreActions) {
@@ -151,7 +153,7 @@ abstract class BaseChatConfirmationWidget extends Disposable {
 						action.label,
 						action.label,
 						undefined,
-						true,
+						!action.disabled,
 						() => {
 							this._onDidClick.fire(action);
 							return Promise.resolve();
@@ -165,6 +167,9 @@ abstract class BaseChatConfirmationWidget extends Disposable {
 			this._register(button);
 			button.label = buttonData.label;
 			this._register(button.onDidClick(() => this._onDidClick.fire(buttonData)));
+			if (buttonData.onDidChangeDisablement) {
+				this._register(buttonData.onDidChangeDisablement(disabled => button.enabled = !disabled));
+			}
 		});
 	}
 

src/vs/workbench/contrib/chat/browser/chatContentParts/toolInvocationParts/chatExtensionsInstallToolSubPart.ts

@@ -4,8 +4,11 @@
  *--------------------------------------------------------------------------------------------*/
 
 import * as dom from '../../../../../../base/browser/dom.js';
+import { Emitter } from '../../../../../../base/common/event.js';
 import { localize } from '../../../../../../nls.js';
 import { IContextKeyService } from '../../../../../../platform/contextkey/common/contextkey.js';
+import { IExtensionManagementService } from '../../../../../../platform/extensionManagement/common/extensionManagement.js';
+import { areSameExtensions } from '../../../../../../platform/extensionManagement/common/extensionManagementUtil.js';
 import { IInstantiationService } from '../../../../../../platform/instantiation/common/instantiation.js';
 import { IKeybindingService } from '../../../../../../platform/keybinding/common/keybinding.js';
 import { ChatContextKeys } from '../../../common/chatContextKeys.js';
@@ -28,6 +31,7 @@ export class ExtensionsInstallConfirmationWidgetSubPart extends BaseChatToolInvo
 		@IKeybindingService keybindingService: IKeybindingService,
 		@IContextKeyService contextKeyService: IContextKeyService,
 		@IChatWidgetService chatWidgetService: IChatWidgetService,
+		@IExtensionManagementService extensionManagementService: IExtensionManagementService,
 		@IInstantiationService instantiationService: IInstantiationService,
 	) {
 		super(toolInvocation);
@@ -36,8 +40,9 @@ export class ExtensionsInstallConfirmationWidgetSubPart extends BaseChatToolInvo
 			throw new Error('Tool specific data is missing or not of kind extensions');
 		}
 
+		const extensionsContent = toolInvocation.toolSpecificData;
 		this.domNode = dom.$('');
-		const chatExtensionsContentPart = this._register(instantiationService.createInstance(ChatExtensionsContentPart, toolInvocation.toolSpecificData));
+		const chatExtensionsContentPart = this._register(instantiationService.createInstance(ChatExtensionsContentPart, extensionsContent));
 		this._register(chatExtensionsContentPart.onDidChangeHeight(() => this._onDidChangeHeight.fire()));
 		dom.append(this.domNode, chatExtensionsContentPart.domNode);
 
@@ -49,12 +54,15 @@ export class ExtensionsInstallConfirmationWidgetSubPart extends BaseChatToolInvo
 			const cancelLabel = localize('cancel', "Cancel");
 			const cancelKeybinding = keybindingService.lookupKeybinding(CancelChatActionId)?.getLabel();
 			const cancelTooltip = cancelKeybinding ? `${cancelLabel} (${cancelKeybinding})` : cancelLabel;
+			const enableContinueButtonEvent = this._register(new Emitter<boolean>());
 
 			const buttons: IChatConfirmationButton[] = [
 				{
 					label: continueLabel,
 					data: true,
-					tooltip: continueTooltip
+					tooltip: continueTooltip,
+					disabled: true,
+					onDidChangeDisablement: enableContinueButtonEvent.event
 				},
 				{
 					label: cancelLabel,
@@ -82,6 +90,12 @@ export class ExtensionsInstallConfirmationWidgetSubPart extends BaseChatToolInvo
 				ChatContextKeys.Editing.hasToolConfirmation.bindTo(contextKeyService).set(false);
 				this._onNeedsRerender.fire();
 			});
+			const disposable = this._register(extensionManagementService.onInstallExtension(e => {
+				if (extensionsContent.extensions.some(id => areSameExtensions({ id }, e.identifier))) {
+					disposable.dispose();
+					enableContinueButtonEvent.fire(false);
+				}
+			}));
 		}
 
 	}

src/vs/workbench/contrib/extensions/common/installExtensionsTool.ts

@@ -4,6 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 
 import { CancellationToken } from '../../../../base/common/cancellation.js';
+import { MarkdownString } from '../../../../base/common/htmlContent.js';
 import { localize } from '../../../../nls.js';
 import { areSameExtensions } from '../../../../platform/extensionManagement/common/extensionManagementUtil.js';
 import { CountTokensCallback, IPreparedToolInvocation, IToolData, IToolImpl, IToolInvocation, IToolResult, ToolDataSource, ToolProgress } from '../../chat/common/languageModelToolsService.js';
@@ -16,7 +17,7 @@ export const InstallExtensionsToolData: IToolData = {
 	toolReferenceName: 'installExtensions',
 	canBeReferencedInPrompt: true,
 	displayName: localize('installExtensionsTool.displayName', 'Install Extensions'),
-	modelDescription: localize('installExtensionsTool.modelDescription', "This is a tool for installing extensions in Visual Studio Code. You should provide the list of extension ids to install, and the confirmation message that is shown to the user. The identifier of an extension is '\${ publisher }.\${ name }' for example: 'vscode.csharp'."),
+	modelDescription: localize('installExtensionsTool.modelDescription', "This is a tool for installing extensions in Visual Studio Code. You should provide the list of extension ids to install. The identifier of an extension is '\${ publisher }.\${ name }' for example: 'vscode.csharp'."),
 	userDescription: localize('installExtensionsTool.userDescription', 'Tool for installing extensions'),
 	source: ToolDataSource.Internal,
 	inputSchema: {
@@ -29,30 +30,12 @@ export const InstallExtensionsToolData: IToolData = {
 				},
 				description: 'The ids of the extensions to search for. The identifier of an extension is \'\${ publisher }.\${ name }\' for example: \'vscode.csharp\'.',
 			},
-			confirmation: {
-				type: 'object',
-				description: 'Defines the confirmation dialog shown to the user. This appears after displaying the list of extensions with their install buttons. The title and message should explain the purpose of the suggested extensions and guide the user to press the Install button on each extension they wish to install. The message should clearly instruct the user to click the Continue button after they have finished installing their chosen extensions to proceed. Extensions are not installed automatically - the user must explicitly install them.',
-				properties: {
-					title: {
-						type: 'string',
-						description: 'The title to display to the user.',
-					},
-					message: {
-						type: 'string',
-						description: 'The message to display to the user.',
-					}
-				}
-			}
-		},
+		}
 	}
 };
 
 type InputParams = {
 	ids: string[];
-	confirmation: {
-		title: string;
-		message: string;
-	};
 };
 
 export class InstallExtensionsTool implements IToolImpl {
@@ -64,8 +47,8 @@ export class InstallExtensionsTool implements IToolImpl {
 	async prepareToolInvocation(parameters: InputParams, token: CancellationToken): Promise<IPreparedToolInvocation | undefined> {
 		return {
 			confirmationMessages: {
-				title: parameters.confirmation?.title ?? localize('installExtensionsTool.confirmationTitle', 'Install Extensions'),
-				message: parameters.confirmation?.message ?? localize('installExtensionsTool.confirmationMessage', 'These extensions are recommeded for you by Copilot.'),
+				title: localize('installExtensionsTool.confirmationTitle', 'Install Extensions'),
+				message: new MarkdownString(localize('installExtensionsTool.confirmationMessage', "Review the suggested extensions and click the **Install** button for each extension you wish to add. Once you have finished installing the selected extensions, click **Continue** to proceed.")),
 			},
 			toolSpecificData: {
 				kind: 'extensions',
@@ -80,7 +63,7 @@ export class InstallExtensionsTool implements IToolImpl {
 		return {
 			content: [{
 				kind: 'text',
-				value: localize('installExtensionsTool.resultMessage', 'Following extensions are installed: {0}', installed.map(e => e.identifier.id).join(', ')),
+				value: installed.length ? localize('installExtensionsTool.resultMessage', 'Following extensions are installed: {0}', installed.map(e => e.identifier.id).join(', ')) : localize('installExtensionsTool.noResultMessage', 'No extensions were installed.'),
 			}]
 		};
 	}