Merge pull request microsoft#271187 from microsoft/brchen/prompt-desc

feat: display description of prompt as placeholder text when user types `/{prompt}` in chat input

Author: bryanchen-d

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

@@ -22,6 +22,7 @@ import { IChatAgentCommand, IChatAgentData, IChatAgentService } from '../../comm
 import { chatSlashCommandBackground, chatSlashCommandForeground } from '../../common/chatColors.js';
 import { ChatRequestAgentPart, ChatRequestAgentSubcommandPart, ChatRequestDynamicVariablePart, ChatRequestSlashCommandPart, ChatRequestSlashPromptPart, ChatRequestTextPart, ChatRequestToolPart, ChatRequestToolSetPart, IParsedChatRequestPart, chatAgentLeader, chatSubcommandLeader } from '../../common/chatParserTypes.js';
 import { ChatRequestParser } from '../../common/chatRequestParser.js';
+import { IPromptsService } from '../../common/promptSyntax/service/promptsService.js';
 import { IChatWidget } from '../chat.js';
 import { ChatWidget } from '../chatWidget.js';
 import { dynamicVariableDecorationType } from './chatDynamicVariables.js';
@@ -35,6 +36,10 @@ function agentAndCommandToKey(agent: IChatAgentData, subcommand: string | undefi
 	return subcommand ? `${agent.id}__${subcommand}` : agent.id;
 }
 
+function isWhitespaceOrPromptPart(p: IParsedChatRequestPart): boolean {
+	return (p instanceof ChatRequestTextPart && !p.text.trim().length) || (p instanceof ChatRequestSlashPromptPart);
+}
+
 class InputEditorDecorations extends Disposable {
 
 	public readonly id = 'inputEditorDecorations';
@@ -50,6 +55,7 @@ class InputEditorDecorations extends Disposable {
 		@IChatAgentService private readonly chatAgentService: IChatAgentService,
 		@IConfigurationService private readonly configurationService: IConfigurationService,
 		@ILabelService private readonly labelService: ILabelService,
+		@IPromptsService private readonly promptsService: IPromptsService,
 	) {
 		super();
 
@@ -69,6 +75,7 @@ class InputEditorDecorations extends Disposable {
 			this.previouslyUsedAgents.add(agentAndCommandToKey(e.agent, e.slashCommand?.name));
 		}));
 		this._register(this.chatAgentService.onDidChangeAgents(() => this.updateInputEditorDecorations()));
+		this._register(this.promptsService.onDidChangeParsedPromptFilesCache(() => this.updateInputEditorDecorations()));
 		this._register(autorun(reader => {
 			// Watch for changes to the current mode and its properties
 			const currentMode = this.widget.input.currentModeObs.read(reader);
@@ -123,6 +130,8 @@ class InputEditorDecorations extends Disposable {
 		return transparentForeground?.toString();
 	}
 
+
+
 	private async updateInputEditorDecorations() {
 		const inputValue = this.widget.inputEditor.getValue();
 
@@ -235,6 +244,26 @@ class InputEditorDecorations extends Disposable {
 			}
 		}
 
+		const onlyPromptCommandAndWhitespace = slashPromptPart && parsedRequest.every(isWhitespaceOrPromptPart);
+		if (onlyPromptCommandAndWhitespace && exactlyOneSpaceAfterPart(slashPromptPart)) {
+			// Prompt slash command with no other text - show the placeholder
+			// Resolve the prompt file (this will use cache if available)
+			const promptFile = this.promptsService.resolvePromptSlashCommandFromCache(slashPromptPart.slashPromptCommand.command);
+
+			const description = promptFile?.header?.description;
+			if (description) {
+				placeholderDecoration = [{
+					range: getRangeForPlaceholder(slashPromptPart),
+					renderOptions: {
+						after: {
+							contentText: description,
+							color: this.getPlaceholderColor(),
+						}
+					}
+				}];
+			}
+		}
+
 		this.widget.inputEditor.setDecorationsByType(decorationDescription, placeholderDecorationType, placeholderDecoration ?? []);
 
 		const textDecorations: IDecorationOptions[] | undefined = [];

src/vs/workbench/contrib/chat/common/promptSyntax/service/promptsService.ts

@@ -167,6 +167,18 @@ export interface IPromptsService extends IDisposable {
 	 */
 	resolvePromptSlashCommand(data: IChatPromptSlashCommand, _token: CancellationToken): Promise<ParsedPromptFile | undefined>;
 
+	/**
+	 * Gets the prompt file for a slash command from cache if available.
+	 * @param command - name of the prompt command without slash
+	 */
+	resolvePromptSlashCommandFromCache(command: string): ParsedPromptFile | undefined;
+
+	/**
+	 * Event that is triggered when slash command -> ParsedPromptFile cache is updated.
+	 * Event handler can call resolvePromptSlashCommandFromCache in case there is new value populated.
+	 */
+	readonly onDidChangeParsedPromptFilesCache: Event<void>;
+
 	/**
 	 * Returns a prompt command if the command name is valid.
 	 */

src/vs/workbench/contrib/chat/common/promptSyntax/service/promptsServiceImpl.ts

@@ -52,6 +52,13 @@ export class PromptsService extends Disposable implements IPromptsService {
 
 	private parsedPromptFileCache = new ResourceMap<[number, ParsedPromptFile]>();
 
+	/**
+	 * Cache for parsed prompt files keyed by command name.
+	 */
+	private promptFileByCommandCache = new Map<string, { value: ParsedPromptFile | undefined; pendingPromise: Promise<ParsedPromptFile | undefined> | undefined }>();
+
+	private onDidChangeParsedPromptFilesCacheEmitter = new Emitter<void>();
+
 	/**
 	 * Contributed files from extensions keyed by prompt type then name.
 	 */
@@ -79,8 +86,32 @@ export class PromptsService extends Disposable implements IPromptsService {
 	) {
 		super();
 
+		this.onDidChangeParsedPromptFilesCacheEmitter = this._register(new Emitter<void>());
+
 		this.fileLocator = this._register(this.instantiationService.createInstance(PromptFilesLocator));
 
+		const promptUpdateTracker = this._register(new PromptUpdateTracker(this.fileLocator, this.modelService));
+		this._register(promptUpdateTracker.onDiDPromptChange((event) => {
+			if (event.kind === 'fileSystem') {
+				this.promptFileByCommandCache.clear();
+			}
+			else {
+				// Clear cache for prompt files that match the changed URI\
+				const pendingDeletes: string[] = [];
+				for (const [key, value] of this.promptFileByCommandCache) {
+					if (isEqual(value.value?.uri, event.uri)) {
+						pendingDeletes.push(key);
+					}
+				}
+
+				for (const key of pendingDeletes) {
+					this.promptFileByCommandCache.delete(key);
+				}
+			}
+
+			this.onDidChangeParsedPromptFilesCacheEmitter.fire();
+		}));
+
 		this._register(this.modelService.onModelRemoved((model) => {
 			this.parsedPromptFileCache.delete(model.uri);
 		}));
@@ -101,13 +132,16 @@ export class PromptsService extends Disposable implements IPromptsService {
 		return this.onDidChangeCustomAgentsEmitter.event;
 	}
 
+	public get onDidChangeParsedPromptFilesCache(): Event<void> {
+		return this.onDidChangeParsedPromptFilesCacheEmitter.event;
+	}
+
 	public getPromptFileType(uri: URI): PromptsType | undefined {
 		const model = this.modelService.getModel(uri);
 		const languageId = model ? model.getLanguageId() : this.languageService.guessLanguageIdByFilepathOrFirstLine(uri);
 		return languageId ? getPromptsTypeForLanguageId(languageId) : undefined;
 	}
 
-
 	public getParsedPromptFile(textModel: ITextModel): ParsedPromptFile {
 		const cached = this.parsedPromptFileCache.get(textModel.uri);
 		if (cached && cached[0] === textModel.getVersionId()) {
@@ -187,26 +221,56 @@ export class PromptsService extends Disposable implements IPromptsService {
 	}
 
 	public async resolvePromptSlashCommand(data: IChatPromptSlashCommand, token: CancellationToken): Promise<ParsedPromptFile | undefined> {
-		const promptUri = await this.getPromptPath(data);
+		const promptUri = data.promptPath?.uri ?? await this.getPromptPath(data.command);
 		if (!promptUri) {
 			return undefined;
 		}
+
 		try {
 			return await this.parseNew(promptUri, token);
 		} catch (error) {
 			this.logger.error(`[resolvePromptSlashCommand] Failed to parse prompt file: ${promptUri}`, error);
 			return undefined;
 		}
+	}
+
+	private async populatePromptCommandCache(command: string): Promise<ParsedPromptFile | undefined> {
+		let cache = this.promptFileByCommandCache.get(command);
+		if (cache && cache.pendingPromise) {
+			return cache.pendingPromise;
+		}
+
+		const newPromise = this.resolvePromptSlashCommand({ command, detail: '' }, CancellationToken.None);
+		if (cache) {
+			cache.pendingPromise = newPromise;
+		}
+		else {
+			cache = { value: undefined, pendingPromise: newPromise };
+			this.promptFileByCommandCache.set(command, cache);
+		}
+
+		const newValue = await newPromise.finally(() => cache.pendingPromise = undefined);
 
+		// TODO: consider comparing the newValue and the old and only emit change event when there are value changes
+		cache.value = newValue;
+		this.onDidChangeParsedPromptFilesCacheEmitter.fire();
+
+		return newValue;
 	}
 
-	private async getPromptPath(data: IChatPromptSlashCommand): Promise<URI | undefined> {
-		if (data.promptPath) {
-			return data.promptPath.uri;
+	public resolvePromptSlashCommandFromCache(command: string): ParsedPromptFile | undefined {
+		const cache = this.promptFileByCommandCache.get(command);
+		const value = cache?.value;
+		if (value === undefined) {
+			// kick off a async process to refresh the cache while we returns the current cached value
+			void this.populatePromptCommandCache(command).catch((error) => { });
 		}
 
+		return value;
+	}
+
+	private async getPromptPath(command: string): Promise<URI | undefined> {
 		const promptPaths = await this.listPromptFiles(PromptsType.prompt, CancellationToken.None);
-		const command = data.command;
 		const result = promptPaths.find(promptPath => getCommandNameFromPromptPath(promptPath) === command);
 		if (result) {
 			return result.uri;
@@ -443,7 +507,63 @@ export class UpdateTracker extends Disposable {
 		this.listeners.forEach(listener => listener.dispose());
 		this.listeners.clear();
 	}
+}
+
+export type PromptUpdateKind = 'fileSystem' | 'textModel';
+
+export interface IPromptUpdateEvent {
+	kind: PromptUpdateKind;
+	uri?: URI;
+}
+
+export class PromptUpdateTracker extends Disposable {
+
+	private static readonly PROMPT_UPDATE_DELAY_MS = 200;
+
+	private readonly listeners = new ResourceMap<IDisposable>();
+	private readonly onDidPromptModelChange: Emitter<IPromptUpdateEvent>;
+
+	public get onDiDPromptChange(): Event<IPromptUpdateEvent> {
+		return this.onDidPromptModelChange.event;
+	}
 
+	constructor(
+		fileLocator: PromptFilesLocator,
+		@IModelService modelService: IModelService,
+	) {
+		super();
+		this.onDidPromptModelChange = this._register(new Emitter<IPromptUpdateEvent>());
+		const delayer = this._register(new Delayer<void>(PromptUpdateTracker.PROMPT_UPDATE_DELAY_MS));
+		const trigger = (event: IPromptUpdateEvent) => delayer.trigger(() => this.onDidPromptModelChange.fire(event));
+
+		const filesUpdatedEventRegistration = this._register(fileLocator.createFilesUpdatedEvent(PromptsType.prompt));
+		this._register(filesUpdatedEventRegistration.event(() => trigger({ kind: 'fileSystem' })));
+
+		const onAdd = (model: ITextModel) => {
+			if (model.getLanguageId() === PROMPT_LANGUAGE_ID) {
+				this.listeners.set(model.uri, model.onDidChangeContent(() => trigger({ kind: 'textModel', uri: model.uri })));
+			}
+		};
+		const onRemove = (languageId: string, uri: URI) => {
+			if (languageId === PROMPT_LANGUAGE_ID) {
+				this.listeners.get(uri)?.dispose();
+				this.listeners.delete(uri);
+				trigger({ kind: 'textModel', uri });
+			}
+		};
+		this._register(modelService.onModelAdded(model => onAdd(model)));
+		this._register(modelService.onModelLanguageChanged(e => {
+			onRemove(e.oldLanguageId, e.model.uri);
+			onAdd(e.model);
+		}));
+		this._register(modelService.onModelRemoved(model => onRemove(model.getLanguageId(), model.uri)));
+	}
+
+	public override dispose(): void {
+		super.dispose();
+		this.listeners.forEach(listener => listener.dispose());
+		this.listeners.clear();
+	}
 }
 
 namespace IAgentSource {

src/vs/workbench/contrib/chat/test/common/mockPromptsService.ts

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 
 import { CancellationToken } from '../../../../../base/common/cancellation.js';
-import { Emitter } from '../../../../../base/common/event.js';
+import { Emitter, Event } from '../../../../../base/common/event.js';
 import { IDisposable } from '../../../../../base/common/lifecycle.js';
 import { URI } from '../../../../../base/common/uri.js';
 import { ITextModel } from '../../../../../editor/common/model.js';
@@ -37,6 +37,8 @@ export class MockPromptsService implements IPromptsService {
 	getSourceFolders(_type: any): readonly any[] { throw new Error('Not implemented'); }
 	asPromptSlashCommand(_command: string): any { return undefined; }
 	resolvePromptSlashCommand(_data: any, _token: CancellationToken): Promise<any> { throw new Error('Not implemented'); }
+	resolvePromptSlashCommandFromCache(command: string): ParsedPromptFile | undefined { throw new Error('Not implemented'); }
+	get onDidChangeParsedPromptFilesCache(): Event<void> { throw new Error('Not implemented'); }
 	findPromptSlashCommands(): Promise<any[]> { throw new Error('Not implemented'); }
 	getPromptCommandName(uri: URI): Promise<string> { throw new Error('Not implemented'); }
 	parse(_uri: URI, _type: any, _token: CancellationToken): Promise<any> { throw new Error('Not implemented'); }

src/vs/workbench/contrib/chat/test/common/promptSyntax/service/promptsService.test.ts

@@ -6,14 +6,14 @@
 import assert from 'assert';
 import * as sinon from 'sinon';
 import { CancellationToken } from '../../../../../../../base/common/cancellation.js';
-import { Event } from '../../../../../../../base/common/event.js';
 import { ResourceSet } from '../../../../../../../base/common/map.js';
 import { Schemas } from '../../../../../../../base/common/network.js';
 import { URI } from '../../../../../../../base/common/uri.js';
 import { ensureNoDisposablesAreLeakedInTestSuite } from '../../../../../../../base/test/common/utils.js';
 import { Range } from '../../../../../../../editor/common/core/range.js';
 import { ILanguageService } from '../../../../../../../editor/common/languages/language.js';
 import { IModelService } from '../../../../../../../editor/common/services/model.js';
+import { ModelService } from '../../../../../../../editor/common/services/modelService.js';
 import { IConfigurationService } from '../../../../../../../platform/configuration/common/configuration.js';
 import { TestConfigurationService } from '../../../../../../../platform/configuration/test/common/testConfigurationService.js';
 import { IExtensionDescription } from '../../../../../../../platform/extensions/common/extensions.js';
@@ -70,7 +70,9 @@ suite('PromptsService', () => {
 
 		const fileService = disposables.add(instaService.createInstance(FileService));
 		instaService.stub(IFileService, fileService);
-		instaService.stub(IModelService, { getModel() { return null; }, onModelRemoved: Event.None });
+
+		const modelService = disposables.add(instaService.createInstance(ModelService));
+		instaService.stub(IModelService, modelService);
 		instaService.stub(ILanguageService, {
 			guessLanguageIdByFilepathOrFirstLine(uri: URI) {
 				if (uri.path.endsWith(PROMPT_FILE_EXTENSION)) {