From ca177cce723c79998147f9a217f7a6fcc6d95544 Mon Sep 17 00:00:00 2001
From: Roo Code <roomote@roocode.com>
Date: Tue, 11 Nov 2025 16:22:50 +0000
Subject: [PATCH] fix: remove duplicate controls when editing messages

- Hide ModeSelector, ApiConfigSelector, and AutoApproveDropdown when isEditMode is true
- Prevents redundant UI elements from appearing below the message editing area
- Keeps main controls at the bottom of the chat UI for overall control

Fixes #9163
---
 .../src/components/chat/ChatTextArea.tsx      | 102 +++++++++---------
 1 file changed, 50 insertions(+), 52 deletions(-)

diff --git a/webview-ui/src/components/chat/ChatTextArea.tsx b/webview-ui/src/components/chat/ChatTextArea.tsx
index 0b8c89388c..9344e1f5d1 100644
--- a/webview-ui/src/components/chat/ChatTextArea.tsx
+++ b/webview-ui/src/components/chat/ChatTextArea.tsx
@@ -1210,59 +1210,57 @@ export const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 					/>
 				)}
 
-				<div className="flex items-center gap-2">
-					<div className="flex items-center gap-2 min-w-0 overflow-clip flex-1">
-						<ModeSelector
-							value={mode}
-							title={t("chat:selectMode")}
-							onChange={handleModeChange}
-							triggerClassName="text-ellipsis overflow-hidden flex-shrink-0"
-							modeShortcutText={modeShortcutText}
-							customModes={customModes}
-							customModePrompts={customModePrompts}
-						/>
-						<ApiConfigSelector
-							value={currentConfigId}
-							displayName={displayName}
-							disabled={selectApiConfigDisabled}
-							title={t("chat:selectApiConfig")}
-							onChange={handleApiConfigChange}
-							triggerClassName="min-w-[28px] text-ellipsis overflow-hidden flex-shrink"
-							listApiConfigMeta={listApiConfigMeta || []}
-							pinnedApiConfigs={pinnedApiConfigs}
-							togglePinnedApiConfig={togglePinnedApiConfig}
-						/>
-						<AutoApproveDropdown triggerClassName="min-w-[28px] text-ellipsis overflow-hidden flex-shrink" />
+				{!isEditMode && (
+					<div className="flex items-center gap-2">
+						<div className="flex items-center gap-2 min-w-0 overflow-clip flex-1">
+							<ModeSelector
+								value={mode}
+								title={t("chat:selectMode")}
+								onChange={handleModeChange}
+								triggerClassName="text-ellipsis overflow-hidden flex-shrink-0"
+								modeShortcutText={modeShortcutText}
+								customModes={customModes}
+								customModePrompts={customModePrompts}
+							/>
+							<ApiConfigSelector
+								value={currentConfigId}
+								displayName={displayName}
+								disabled={selectApiConfigDisabled}
+								title={t("chat:selectApiConfig")}
+								onChange={handleApiConfigChange}
+								triggerClassName="min-w-[28px] text-ellipsis overflow-hidden flex-shrink"
+								listApiConfigMeta={listApiConfigMeta || []}
+								pinnedApiConfigs={pinnedApiConfigs}
+								togglePinnedApiConfig={togglePinnedApiConfig}
+							/>
+							<AutoApproveDropdown triggerClassName="min-w-[28px] text-ellipsis overflow-hidden flex-shrink" />
+						</div>
+						<div className={cn("flex flex-shrink-0 items-center gap-0.5", cloudUserInfo ? "" : "pr-2")}>
+							{isTtsPlaying && (
+								<StandardTooltip content={t("chat:stopTts")}>
+									<button
+										aria-label={t("chat:stopTts")}
+										onClick={() => vscode.postMessage({ type: "stopTts" })}
+										className={cn(
+											"relative inline-flex items-center justify-center",
+											"bg-transparent border-none p-1.5",
+											"rounded-md min-w-[28px] min-h-[28px]",
+											"text-vscode-foreground opacity-85",
+											"transition-all duration-150",
+											"hover:opacity-100 hover:bg-[rgba(255,255,255,0.03)] hover:border-[rgba(255,255,255,0.15)]",
+											"focus:outline-none focus-visible:ring-1 focus-visible:ring-vscode-focusBorder",
+											"active:bg-[rgba(255,255,255,0.1)]",
+											"cursor-pointer",
+										)}>
+										<VolumeX className="w-4 h-4" />
+									</button>
+								</StandardTooltip>
+							)}
+							<IndexingStatusBadge />
+							{cloudUserInfo && <CloudAccountSwitcher />}
+						</div>
 					</div>
-					<div
-						className={cn(
-							"flex flex-shrink-0 items-center gap-0.5",
-							!isEditMode && cloudUserInfo ? "" : "pr-2",
-						)}>
-						{isTtsPlaying && (
-							<StandardTooltip content={t("chat:stopTts")}>
-								<button
-									aria-label={t("chat:stopTts")}
-									onClick={() => vscode.postMessage({ type: "stopTts" })}
-									className={cn(
-										"relative inline-flex items-center justify-center",
-										"bg-transparent border-none p-1.5",
-										"rounded-md min-w-[28px] min-h-[28px]",
-										"text-vscode-foreground opacity-85",
-										"transition-all duration-150",
-										"hover:opacity-100 hover:bg-[rgba(255,255,255,0.03)] hover:border-[rgba(255,255,255,0.15)]",
-										"focus:outline-none focus-visible:ring-1 focus-visible:ring-vscode-focusBorder",
-										"active:bg-[rgba(255,255,255,0.1)]",
-										"cursor-pointer",
-									)}>
-									<VolumeX className="w-4 h-4" />
-								</button>
-							</StandardTooltip>
-						)}
-						{!isEditMode ? <IndexingStatusBadge /> : null}
-						{!isEditMode && cloudUserInfo && <CloudAccountSwitcher />}
-					</div>
-				</div>
+				)}
 			</div>
 		)
 	},