From 175e346f3fb99de026ba7f9bb6542669ec309f76 Mon Sep 17 00:00:00 2001
From: Connor Peet <copeet@microsoft.com>
Date: Fri, 6 Mar 2026 15:38:18 -0800
Subject: [PATCH] fix: remove chat-pending-dragging class on re-render to fix
 opacity issue (#299886)

* fix: remove chat-pending-dragging class on re-render to fix opacity issue

Fixes #297473

The 'chat-pending-dragging' class (which sets opacity: 0.4) was not being
removed when elements were re-rendered. This caused messages to randomly
appear with lower opacity if they had been dragged before the list was
updated.

The fix adds 'chat-pending-dragging' to the classList.remove() call that
clears pending-related classes during re-render.

* fix: move class cleanup before pending divider rendering

Addresses review feedback: the chat-pending-dragging class was only
being removed on the normal render path. If a recycled template was
rendered as a pending divider, it would return early before the cleanup
code ran, leaving the class and opacity stuck at 0.4.

This moves the class cleanup to run before the isPendingDividerVM check,
ensuring it's always applied regardless of element type.
---
 .../chat/browser/widget/chatListRenderer.ts        | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/vs/workbench/contrib/chat/browser/widget/chatListRenderer.ts b/src/vs/workbench/contrib/chat/browser/widget/chatListRenderer.ts
index 9e51d5a6f5c..727179577cf 100644
--- a/src/vs/workbench/contrib/chat/browser/widget/chatListRenderer.ts
+++ b/src/vs/workbench/contrib/chat/browser/widget/chatListRenderer.ts
@@ -685,6 +685,14 @@ export class ChatListItemRenderer extends Disposable implements ITreeRenderer<Ch
 		templateData.currentElement = element;
 		this.templateDataByRequestId.set(element.id, templateData);
 
+		// Clear pending-related classes and drag handle from previous renders
+		// Do this before element-type checks to ensure dividers also get cleaned up
+		templateData.rowContainer.classList.remove('pending-item', 'pending-divider', 'pending-request', 'chat-pending-dragging');
+		templateData.dragHandle?.remove();
+		templateData.dragHandle = undefined;
+		delete templateData.rowContainer.dataset.pendingRequestId;
+		delete templateData.rowContainer.dataset.pendingKind;
+
 		// Handle pending divider with simplified rendering
 		if (isPendingDividerVM(element)) {
 			this.renderPendingDivider(element, templateData);
@@ -730,12 +738,6 @@ export class ChatListItemRenderer extends Disposable implements ITreeRenderer<Ch
 		templateData.rowContainer.classList.toggle('editing-session', location === ChatAgentLocation.Chat);
 		templateData.rowContainer.classList.toggle('interactive-request', isRequestVM(element));
 		templateData.rowContainer.classList.toggle('interactive-response', isResponseVM(element));
-		// Clear pending-related classes and drag handle from previous renders
-		templateData.rowContainer.classList.remove('pending-item', 'pending-divider', 'pending-request');
-		templateData.dragHandle?.remove();
-		templateData.dragHandle = undefined;
-		delete templateData.rowContainer.dataset.pendingRequestId;
-		delete templateData.rowContainer.dataset.pendingKind;
 		const progressMessageAtBottomOfResponse = checkModeOption(this.delegate.currentChatMode(), this.rendererOptions.progressMessageAtBottomOfResponse);
 		templateData.rowContainer.classList.toggle('show-detail-progress', isResponseVM(element) && !element.isComplete && !element.progressMessages.length && !progressMessageAtBottomOfResponse);
 		if (!this.rendererOptions.noHeader) {