fix: remove redundant UI controls when editing messages

- Hide ModeSelector, ApiConfigSelector, and AutoApproveDropdown when isEditMode is true
- Keeps the editing interface clean and prevents duplicate controls
- Fixes #9163
This commit is contained in:
Roo Code 2025-11-11 05:38:16 +00:00
parent 6e6341346e
commit 91f4898751

View file

@ -1210,59 +1210,61 @@ 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",
!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
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>
)
},