From 1fd6199f2a2317ec2f19bd61bbe42b7ecc15e9c5 Mon Sep 17 00:00:00 2001 From: Bruno Bergher Date: Tue, 26 Aug 2025 21:31:55 +0100 Subject: [PATCH] Visual tweaks --- .../src/components/chat/AutoApproveMenu.tsx | 99 +++++------------ .../chat/AutoApproveToggleDropdown.tsx | 18 +-- .../src/components/chat/ChatTextArea.tsx | 103 ++++++++++-------- webview-ui/src/components/chat/ChatView.tsx | 6 - webview-ui/src/i18n/locales/en/chat.json | 5 +- 5 files changed, 95 insertions(+), 136 deletions(-) diff --git a/webview-ui/src/components/chat/AutoApproveMenu.tsx b/webview-ui/src/components/chat/AutoApproveMenu.tsx index b76601ea9e..dcdeca032e 100644 --- a/webview-ui/src/components/chat/AutoApproveMenu.tsx +++ b/webview-ui/src/components/chat/AutoApproveMenu.tsx @@ -1,6 +1,6 @@ import { memo, useCallback, useMemo, useState } from "react" import { Trans } from "react-i18next" -import { VSCodeCheckbox, VSCodeLink } from "@vscode/webview-ui-toolkit/react" +import { VSCodeLink } from "@vscode/webview-ui-toolkit/react" import { Stamp, ListChecks, LayoutList } from "lucide-react" import { vscode } from "@src/utils/vscode" @@ -23,8 +23,6 @@ const AutoApproveMenu = ({ style }: AutoApproveMenuProps) => { const portalContainer = useRooPortal("roo-portal") const { - autoApprovalEnabled, - setAutoApprovalEnabled, alwaysApproveResubmit, setAlwaysAllowReadOnly, setAlwaysAllowWrite, @@ -51,7 +49,7 @@ const AutoApproveMenu = ({ style }: AutoApproveMenuProps) => { [baseToggles, alwaysApproveResubmit], ) - const { hasEnabledOptions, effectiveAutoApprovalEnabled } = useAutoApprovalState(toggles, autoApprovalEnabled) + const { hasEnabledOptions, effectiveAutoApprovalEnabled } = useAutoApprovalState(toggles, true) const onAutoApproveToggle = useCallback( (key: AutoApproveSetting, value: boolean) => { @@ -90,30 +88,9 @@ const AutoApproveMenu = ({ style }: AutoApproveMenuProps) => { setAlwaysAllowUpdateTodoList(value) break } - - // Check if we need to update the master auto-approval state - // Create a new toggles state with the updated value - const updatedToggles = { - ...toggles, - [key]: value, - } - - const willHaveEnabledOptions = Object.values(updatedToggles).some((v) => !!v) - - // If enabling the first option, enable master auto-approval - if (value && !hasEnabledOptions && willHaveEnabledOptions) { - setAutoApprovalEnabled(true) - vscode.postMessage({ type: "autoApprovalEnabled", bool: true }) - } - // If disabling the last option, disable master auto-approval - else if (!value && hasEnabledOptions && !willHaveEnabledOptions) { - setAutoApprovalEnabled(false) - vscode.postMessage({ type: "autoApprovalEnabled", bool: false }) - } }, [ toggles, - hasEnabledOptions, setAlwaysAllowReadOnly, setAlwaysAllowWrite, setAlwaysAllowExecute, @@ -124,7 +101,6 @@ const AutoApproveMenu = ({ style }: AutoApproveMenuProps) => { setAlwaysApproveResubmit, setAlwaysAllowFollowupQuestions, setAlwaysAllowUpdateTodoList, - setAutoApprovalEnabled, ], ) @@ -170,14 +146,14 @@ const AutoApproveMenu = ({ style }: AutoApproveMenuProps) => { const trigger = ( - {t("chat:autoApprove.title")} + {t("chat:autoApprove.dropdownTitle")} {displayText} ) @@ -192,50 +168,11 @@ const AutoApproveMenu = ({ style }: AutoApproveMenuProps) => { container={portalContainer} className="p-0 overflow-hidden min-w-[400px] max-w-[500px]">
- {/* Header with master toggle */} -
-
- - { - if (hasEnabledOptions) { - const newValue = !(autoApprovalEnabled ?? false) - setAutoApprovalEnabled(newValue) - vscode.postMessage({ type: "autoApprovalEnabled", bool: newValue }) - } - }} - /> - -

{t("chat:autoApprove.title")}

-
-
- - - - - - -
-
- - {/* Description */} -
+ {/* Header */} +
+

+ {t("chat:autoApprove.title")} +

{
+ + {/* Footer with buttons on left and title on right */} +
+
+ + +
+
diff --git a/webview-ui/src/components/chat/AutoApproveToggleDropdown.tsx b/webview-ui/src/components/chat/AutoApproveToggleDropdown.tsx index 21a041f6ec..cb0909ac70 100644 --- a/webview-ui/src/components/chat/AutoApproveToggleDropdown.tsx +++ b/webview-ui/src/components/chat/AutoApproveToggleDropdown.tsx @@ -56,20 +56,22 @@ export const AutoApproveToggleDropdown = ({ onToggle, ...props }: AutoApproveTog data-testid={testId} className={cn( "w-full flex items-center gap-2 px-2 py-1.5 rounded text-xs text-left", - "transition-colors hover:bg-vscode-list-hoverBackground", + "transition-colors hover:bg-vscode-list-hoverBackground cursor-pointer", props[key] ? "bg-vscode-list-activeSelectionBackground text-vscode-list-activeSelectionForeground" : "opacity-70", )}> {t(labelKey)} - - {props[key] ? "✓" : ""} - + {DEFAULT_KEYBOARD_CONFIG.enabled && ( + + {shortcutDisplay.replace("Alt+", "⌥").replace("Ctrl+Shift+", "⌃⇧")} + + )} ) diff --git a/webview-ui/src/components/chat/ChatTextArea.tsx b/webview-ui/src/components/chat/ChatTextArea.tsx index 5135eca2f2..17f4cfa178 100644 --- a/webview-ui/src/components/chat/ChatTextArea.tsx +++ b/webview-ui/src/components/chat/ChatTextArea.tsx @@ -32,6 +32,7 @@ import { SlashCommandsPopover } from "./SlashCommandsPopover" import { cn } from "@/lib/utils" import { usePromptHistory } from "./hooks/usePromptHistory" import { EditModeControls } from "./EditModeControls" +import AutoApproveMenu from "./AutoApproveMenu" interface ChatTextAreaProps { inputValue: string @@ -917,31 +918,58 @@ const ChatTextArea = forwardRef( // Helper function to render non-edit mode controls const renderNonEditModeControls = () => ( -
-
-
{renderModeSelector()}
+
+
+
+
{renderModeSelector()}
-
- +
+ +
+ +
+ +
-
-
- {isTtsPlaying && ( - +
+ {isTtsPlaying && ( + + + + )} + + + - )} - - - - - +
) diff --git a/webview-ui/src/components/chat/ChatView.tsx b/webview-ui/src/components/chat/ChatView.tsx index 53eb79bcd7..46aada42b4 100644 --- a/webview-ui/src/components/chat/ChatView.tsx +++ b/webview-ui/src/components/chat/ChatView.tsx @@ -50,7 +50,6 @@ import BrowserSessionRow from "./BrowserSessionRow" import ChatRow from "./ChatRow" import ChatTextArea from "./ChatTextArea" import TaskHeader from "./TaskHeader" -import AutoApproveMenu from "./AutoApproveMenu" import { AutoApproveKeyboardShortcuts } from "./AutoApproveKeyboardShortcuts" import SystemPromptWarning from "./SystemPromptWarning" import ProfileViolationWarning from "./ProfileViolationWarning" @@ -2019,11 +2018,6 @@ const ChatViewComponent: React.ForwardRefRenderFunction - {/* Auto-Approve Menu positioned below text area */} -
- -
- {isProfileDisabled && (
diff --git a/webview-ui/src/i18n/locales/en/chat.json b/webview-ui/src/i18n/locales/en/chat.json index ff93fa6e08..0a364001e3 100644 --- a/webview-ui/src/i18n/locales/en/chat.json +++ b/webview-ui/src/i18n/locales/en/chat.json @@ -265,9 +265,10 @@ "issues": "It seems like you're having Windows PowerShell issues, please see this" }, "autoApprove": { - "title": "Auto-approve:", + "title": "Auto-Approve", + "dropdownTitle": "Auto:", "none": "None", - "description": "Auto-approve allows Roo Code to perform actions without asking for permission. Only enable for actions you fully trust. More detailed configuration available in Settings.", + "description": "Run these actions without asking for permission.Only enable for actions you fully trust. More in Settings.", "selectOptionsFirst": "Select at least one option below to enable auto-approval", "toggleAriaLabel": "Toggle auto-approval", "disabledAriaLabel": "Auto-approval disabled - select options first"