fix: remove duplicate controls when editing messages #9171
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- 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
dosubot
bot
added
size:L
Contributor
Author
Review completed. Found 1 issue that needs attention:
Mention @roomote in a comment to request specific changes to this pull request or fix all unresolved issues. |
2 tasks
![roomote[bot]](https://avatars.githubusercontent.com/in/1546624?s=60&v=4){kind=small}
Comment on lines
+1213
to
+1263
| {!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> | ||
| )} |
Contributor
Author
There was a problem hiding this comment.
Hiding all bottom controls in edit mode removes access to the TTS stop button when isTtsPlaying is true. If a user is editing a message while TTS is playing, they won't be able to stop the audio playback. Consider moving the TTS stop button, IndexingStatusBadge, and CloudAccountSwitcher outside the !isEditMode conditional, or create a separate conditional that keeps these utility controls visible during edit mode.
Fix it with Roo Code or mention @roomote and request a fix.
hannesrudolph
added
the
Issue/PR - Triage
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR attempts to address Issue #9163 by removing the redundant UI controls that appear when editing messages.
Problem
When editing a message, duplicate controls (ModeSelector, ApiConfigSelector, AutoApproveDropdown) appeared directly below the editing area, while the same controls already exist at the bottom of the chat UI.
Solution
ChatTextArea.tsxwith a conditional check{!isEditMode && (...)}Changes
webview-ui/src/components/chat/ChatTextArea.tsxto conditionally render bottom controls based onisEditModepropTesting
Fixes #9163
Feedback and guidance are welcome!
Important
Fixes duplicate controls in
ChatTextArea.tsxduring message editing by conditionally rendering based onisEditMode.ChatTextArea.tsx.isEditModeprop.This description was created by
for ca177cc. You can customize this summary. It will automatically update as commits are pushed.