Enhance agent feedback system with reply functionality for threaded comments (#318324)

Author: benibenj

src/vs/platform/agentHost/common/agentFeedbackAttachments.ts

@@ -19,6 +19,7 @@ export interface IAgentFeedbackAttachmentItemMetadata {
 	readonly text: string;
 	readonly resourceUri: string;
 	readonly range: TextRange;
+	readonly replies?: readonly string[];
 }
 
 export function isAgentFeedbackAttachment(attachment: MessageAttachment): attachment is SimpleMessageAttachment {
@@ -56,14 +57,24 @@ function parseAgentFeedbackAttachmentItem(item: unknown): IAgentFeedbackAttachme
 	if (!range) {
 		return undefined;
 	}
+	const replies = parseReplies(item.replies);
 	return {
 		id: item.id,
 		text: item.text,
 		resourceUri: item.resourceUri,
 		range,
+		replies,
 	};
 }
 
+function parseReplies(value: unknown): readonly string[] | undefined {
+	if (!Array.isArray(value)) {
+		return undefined;
+	}
+	const replies = value.filter(isString);
+	return replies.length > 0 ? replies : undefined;
+}
+
 function parseTextRange(range: unknown): TextRange | undefined {
 	if (!isRecord(range) || !isRecord(range.start) || !isRecord(range.end)) {
 		return undefined;

src/vs/sessions/contrib/agentFeedback/browser/agentFeedbackAttachment.ts

@@ -70,6 +70,7 @@ export class AgentFeedbackAttachmentContribution extends Disposable {
 				codeSelection: f.codeSelection,
 				diffHunks: f.diffHunks,
 				sourcePRReviewCommentId: f.sourcePRReviewCommentId,
+				replies: f.replies,
 			})),
 			value,
 		};
@@ -102,6 +103,11 @@ export class AgentFeedbackAttachmentContribution extends Disposable {
 				part += `\nDiff Hunks:\n\`\`\`diff\n${item.diffHunks}\n\`\`\``;
 			}
 			part += `\nComment: ${item.text}`;
+			if (item.replies?.length) {
+				for (const reply of item.replies) {
+					part += `\nReply: ${reply}`;
+				}
+			}
 			parts.push(part);
 		}
 

src/vs/sessions/contrib/agentFeedback/browser/agentFeedbackEditorWidgetContribution.ts

@@ -43,6 +43,7 @@ interface ICommentItemActions {
 	editAction: Action;
 	convertAction: Action | undefined;
 	removeAction: Action;
+	addReplyAction: Action;
 }
 
 /**
@@ -60,6 +61,7 @@ export class AgentFeedbackEditorWidget extends Disposable implements IOverlayWid
 	private readonly _toggleButton: HTMLElement;
 	private readonly _bodyNode: HTMLElement;
 	private readonly _itemElements = new Map<string, HTMLElement>();
+	private readonly _activeReplyInputs = new Map<string, { container: HTMLElement; textarea: HTMLTextAreaElement }>();
 
 	private _position: IOverlayWidgetPosition | null = null;
 	private _isExpanded: boolean = false;
@@ -181,6 +183,7 @@ export class AgentFeedbackEditorWidget extends Disposable implements IOverlayWid
 	private _buildFeedbackItems(): void {
 		clearNode(this._bodyNode);
 		this._itemElements.clear();
+		this._activeReplyInputs.clear();
 
 		for (const comment of this._commentItems) {
 			const item = $('div.agent-feedback-widget-item');
@@ -212,7 +215,7 @@ export class AgentFeedbackEditorWidget extends Disposable implements IOverlayWid
 			const actionBarContainer = $('div.agent-feedback-widget-item-actions');
 			const actionBar = this._eventStore.add(new ActionBar(actionBarContainer));
 
-			const itemActions: ICommentItemActions = { editAction: undefined!, convertAction: undefined, removeAction: undefined! };
+			const itemActions: ICommentItemActions = { editAction: undefined!, convertAction: undefined, removeAction: undefined!, addReplyAction: undefined! };
 
 			itemActions.editAction = this._eventStore.add(new Action(
 				'agentFeedback.widget.edit',
@@ -223,6 +226,15 @@ export class AgentFeedbackEditorWidget extends Disposable implements IOverlayWid
 			));
 			actionBar.push(itemActions.editAction, { icon: true, label: false });
 
+			itemActions.addReplyAction = this._eventStore.add(new Action(
+				'agentFeedback.widget.addReply',
+				nls.localize('addToComment', "Add to Comment"),
+				ThemeIcon.asClassName(Codicon.commentDiscussion),
+				true,
+				(): void => { this._startAddingReply(comment, item, itemActions); },
+			));
+			actionBar.push(itemActions.addReplyAction, { icon: true, label: false });
+
 			if (comment.canConvertToAgentFeedback) {
 				itemActions.convertAction = this._eventStore.add(new Action(
 					'agentFeedback.widget.convert',
@@ -255,6 +267,10 @@ export class AgentFeedbackEditorWidget extends Disposable implements IOverlayWid
 				item.appendChild(this._renderSuggestion(comment));
 			}
 
+			if (comment.replies?.length) {
+				item.appendChild(this._renderReplies(comment.replies));
+			}
+
 			this._eventStore.add(addDisposableListener(item, 'mouseenter', () => {
 				this._highlightRange(comment);
 			}));
@@ -268,8 +284,12 @@ export class AgentFeedbackEditorWidget extends Disposable implements IOverlayWid
 				if (target?.closest('.action-bar')) {
 					return;
 				}
+				// Don't trigger navigation when interacting with the reply input.
+				if (target?.closest('.agent-feedback-widget-add-reply')) {
+					return;
+				}
 				// Don't navigate if the user just selected text inside the comment.
-				if (target?.closest('.agent-feedback-widget-text, .agent-feedback-widget-suggestion-text')) {
+				if (target?.closest('.agent-feedback-widget-text, .agent-feedback-widget-suggestion-text, .agent-feedback-widget-reply-text')) {
 					const selection = this._domNode.ownerDocument.defaultView?.getSelection();
 					if (selection && !selection.isCollapsed && this._domNode.contains(selection.anchorNode)) {
 						return;
@@ -285,7 +305,7 @@ export class AgentFeedbackEditorWidget extends Disposable implements IOverlayWid
 			// triggering the editor's copy action.
 			const onSelectableMousedown = (e: MouseEvent) => {
 				const target = e.target as HTMLElement | null;
-				if (target?.closest('.agent-feedback-widget-text, .agent-feedback-widget-suggestion-text')) {
+				if (target?.closest('.agent-feedback-widget-text, .agent-feedback-widget-suggestion-text, .agent-feedback-widget-reply-text')) {
 					this._domNode.focus({ preventScroll: true });
 				}
 			};
@@ -334,6 +354,22 @@ export class AgentFeedbackEditorWidget extends Disposable implements IOverlayWid
 		return suggestionNode;
 	}
 
+	private _renderReplies(replies: readonly string[]): HTMLElement {
+		const repliesNode = $('div.agent-feedback-widget-replies');
+
+		for (const reply of replies) {
+			const replyNode = $('div.agent-feedback-widget-reply');
+			const replyText = $('div.agent-feedback-widget-reply-text');
+			const rendered = this._markdownRendererService.render(new MarkdownString(reply));
+			this._eventStore.add(rendered);
+			replyText.appendChild(rendered.element);
+			replyNode.appendChild(replyText);
+			repliesNode.appendChild(replyNode);
+		}
+
+		return repliesNode;
+	}
+
 	private _removeComment(comment: ISessionEditorComment): void {
 		if (comment.source === SessionEditorCommentSource.PRReview) {
 			this._codeReviewService.resolvePRReviewThread(this._sessionResource!, comment.sourceId);
@@ -354,6 +390,7 @@ export class AgentFeedbackEditorWidget extends Disposable implements IOverlayWid
 			actions.convertAction.enabled = false;
 		}
 		actions.removeAction.enabled = false;
+		actions.addReplyAction.enabled = false;
 
 		const editStore = new DisposableStore();
 		this._eventStore.add(editStore);
@@ -400,6 +437,118 @@ export class AgentFeedbackEditorWidget extends Disposable implements IOverlayWid
 		textarea.focus();
 	}
 
+	private _startAddingReply(comment: ISessionEditorComment, itemNode: HTMLElement, actions: ICommentItemActions): void {
+		// If a reply input is already open for this item, just focus it.
+		const existing = this._activeReplyInputs.get(comment.id);
+		if (existing) {
+			existing.textarea.focus();
+			return;
+		}
+
+		// Disable item actions while replying so the action bar doesn't conflict.
+		actions.editAction.enabled = false;
+		if (actions.convertAction) {
+			actions.convertAction.enabled = false;
+		}
+		actions.removeAction.enabled = false;
+		actions.addReplyAction.enabled = false;
+
+		const replyStore = new DisposableStore();
+		this._eventStore.add(replyStore);
+
+		const replyContainer = $('div.agent-feedback-widget-add-reply');
+		const textarea = $('textarea.agent-feedback-widget-edit-textarea') as HTMLTextAreaElement;
+		textarea.placeholder = nls.localize('addReplyPlaceholder', "Add a comment\u2026");
+		textarea.rows = 1;
+		replyContainer.appendChild(textarea);
+		itemNode.appendChild(replyContainer);
+		this._activeReplyInputs.set(comment.id, { container: replyContainer, textarea });
+
+		const autoSize = () => {
+			textarea.style.height = 'auto';
+			textarea.style.height = `${textarea.scrollHeight}px`;
+			this._editor.layoutOverlayWidget(this);
+		};
+		autoSize();
+
+		replyStore.add(addDisposableListener(textarea, 'input', autoSize));
+
+		const cleanup = () => {
+			replyStore.dispose();
+			actions.editAction.enabled = true;
+			if (actions.convertAction) {
+				actions.convertAction.enabled = true;
+			}
+			actions.removeAction.enabled = true;
+			actions.addReplyAction.enabled = true;
+			this._activeReplyInputs.delete(comment.id);
+			replyContainer.remove();
+			this._editor.layoutOverlayWidget(this);
+		};
+
+		replyStore.add(addStandardDisposableListener(textarea, 'keydown', (e) => {
+			if (e.keyCode === KeyCode.Enter && !e.shiftKey) {
+				e.preventDefault();
+				e.stopPropagation();
+				const newReply = textarea.value.trim();
+				if (newReply) {
+					this._saveReply(comment, newReply);
+					// Widget will be rebuilt by the change event.
+				} else {
+					cleanup();
+				}
+			} else if (e.keyCode === KeyCode.Escape) {
+				e.preventDefault();
+				e.stopPropagation();
+				cleanup();
+			}
+		}));
+
+		// Cancel the reply when focus leaves and the textarea is empty.
+		replyStore.add(addDisposableListener(textarea, 'blur', () => {
+			if (textarea.value.trim() === '') {
+				cleanup();
+			}
+		}));
+
+		textarea.focus();
+	}
+
+	private _saveReply(comment: ISessionEditorComment, replyText: string): void {
+		if (comment.source === SessionEditorCommentSource.AgentFeedback) {
+			this._agentFeedbackService.addReply(this._sessionResource, comment.sourceId, replyText);
+			return;
+		}
+
+		// For external comments (code review, PR review), convert to agent
+		// feedback first preserving the original text, then add the reply so
+		// that the original comment and the reply live in the same thread.
+		if (!comment.canConvertToAgentFeedback) {
+			return;
+		}
+
+		const sourcePRReviewCommentId = comment.source === SessionEditorCommentSource.PRReview
+			? comment.sourceId
+			: undefined;
+
+		const feedback = this._agentFeedbackService.addFeedback(
+			this._sessionResource,
+			comment.resourceUri,
+			comment.range,
+			comment.text,
+			comment.suggestion,
+			createAgentFeedbackContext(this._editor, this._codeEditorService, comment.resourceUri, comment.range),
+			sourcePRReviewCommentId,
+		);
+		this._agentFeedbackService.addReply(this._sessionResource, feedback.id, replyText);
+		this._agentFeedbackService.setNavigationAnchor(this._sessionResource, toSessionEditorCommentId(SessionEditorCommentSource.AgentFeedback, feedback.id));
+		if (comment.source === SessionEditorCommentSource.CodeReview) {
+			this._codeReviewService.removeComment(this._sessionResource, comment.sourceId);
+		} else if (comment.source === SessionEditorCommentSource.PRReview) {
+			this._codeReviewService.markPRReviewCommentConverted(this._sessionResource, comment.sourceId);
+		}
+	}
+
 	private _saveEdit(comment: ISessionEditorComment, newText: string): void {
 		if (comment.source === SessionEditorCommentSource.AgentFeedback) {
 			this._agentFeedbackService.updateFeedback(this._sessionResource, comment.sourceId, newText);
@@ -418,6 +567,7 @@ export class AgentFeedbackEditorWidget extends Disposable implements IOverlayWid
 			actions.convertAction.enabled = true;
 		}
 		actions.removeAction.enabled = true;
+		actions.addReplyAction.enabled = true;
 
 		textContainer.classList.remove('editing');
 		clearNode(textContainer);

src/vs/sessions/contrib/agentFeedback/browser/agentFeedbackService.ts

@@ -37,6 +37,12 @@ export interface IAgentFeedback {
 	readonly diffHunks?: string;
 	/** When this feedback was converted from a PR review comment, the original thread ID. */
 	readonly sourcePRReviewCommentId?: string;
+	/**
+	 * Additional comment messages that belong to the same thread as this feedback,
+	 * talking about the same code region. The first {@link text} is the initial
+	 * comment; replies are subsequent messages added to it.
+	 */
+	readonly replies?: readonly string[];
 }
 
 export interface INavigableSessionComment {
@@ -78,6 +84,12 @@ export interface IAgentFeedbackService {
 	 */
 	updateFeedback(sessionResource: URI, feedbackId: string, newText: string): void;
 
+	/**
+	 * Append a reply to an existing feedback item, making it part of the same
+	 * comment thread.
+	 */
+	addReply(sessionResource: URI, feedbackId: string, replyText: string): void;
+
 	/**
 	 * Get all feedback items for a session.
 	 */
@@ -257,6 +269,28 @@ export class AgentFeedbackService extends Disposable implements IAgentFeedbackSe
 		}
 	}
 
+	addReply(sessionResource: URI, feedbackId: string, replyText: string): void {
+		const key = sessionResource.toString();
+		const feedbackItems = this._feedbackBySession.get(key);
+		if (!feedbackItems) {
+			return;
+		}
+
+		const idx = feedbackItems.findIndex(f => f.id === feedbackId);
+		if (idx < 0) {
+			return;
+		}
+
+		const existing = feedbackItems[idx];
+		const existingReplies = existing.replies ?? [];
+		feedbackItems[idx] = {
+			...existing,
+			replies: [...existingReplies, replyText],
+		};
+		this._sessionUpdatedOrder.set(key, ++this._sessionUpdatedSequence);
+		this._onDidChangeFeedback.fire({ sessionResource, feedbackItems });
+	}
+
 	getFeedback(sessionResource: URI): readonly IAgentFeedback[] {
 		return this._feedbackBySession.get(sessionResource.toString()) ?? [];
 	}

src/vs/sessions/contrib/agentFeedback/browser/media/agentFeedbackEditorWidget.css

@@ -318,3 +318,46 @@
 	outline: none;
 	border-color: var(--vscode-focusBorder);
 }
+
+/* Replies — visually grouped with the parent comment but with subtle separation */
+.agent-feedback-widget-replies {
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+}
+
+.agent-feedback-widget-reply {
+	padding-top: 4px;
+	border-top: 1px dashed color-mix(in srgb, var(--vscode-editorWidget-border, var(--vscode-widget-border)) 60%, transparent);
+}
+
+.agent-feedback-widget-reply-text {
+	color: var(--vscode-foreground);
+	word-wrap: break-word;
+	user-select: text;
+	-webkit-user-select: text;
+	cursor: text;
+}
+
+.agent-feedback-widget-reply-text .rendered-markdown p {
+	margin: 0;
+}
+
+.agent-feedback-widget-reply-text .rendered-markdown code {
+	font-family: var(--monaco-monospace-font);
+	font-size: 11px;
+	padding: 1px 4px;
+	border-radius: 3px;
+	background: color-mix(in srgb, var(--vscode-editorWidget-border, var(--vscode-widget-border)) 25%, transparent);
+}
+
+/* Reply composer shown when adding to a comment */
+.agent-feedback-widget-add-reply {
+	padding-top: 4px;
+	border-top: 1px dashed color-mix(in srgb, var(--vscode-editorWidget-border, var(--vscode-widget-border)) 60%, transparent);
+}
+
+.agent-feedback-widget-add-reply .agent-feedback-widget-edit-textarea::placeholder {
+	color: var(--vscode-input-placeholderForeground);
+	opacity: 1;
+}