refactor: improve Agent Settings popup UI components#12901
Merged
kangfenmao merged 14 commits intomainfrom Feb 14, 2026
Merged
Conversation
…ion files ### What this commit does - Introduces new localization entries for "Permission Mode" and "Tools & MCP" in English, Chinese (Simplified and Traditional), German, Greek, Spanish, French, Japanese, Portuguese, Romanian, and Russian. - Updates the UI components to reflect these changes, including the addition of `PermissionModeSettings` and `ToolsAndMCPSettings` components. ### Why this change is necessary This enhancement improves the user experience by providing localized support for new settings related to permission management and tool configurations, ensuring that users can navigate and utilize these features in their preferred language. ### Checklist - [x] Localization files updated - [x] New settings components implemented - [x] UI updated to incorporate new settings ### Release note ```release-note Add localization support for new permission mode and tools & MCP settings across multiple languages. ```
### What this commit does - Modifies the layout of the `PromptSettings` component to use a flexbox structure, enhancing its responsiveness and ensuring proper overflow handling. - Adjusts the `TextAreaContainer` to include `min-height: 0` and `overflow: hidden` for better layout management. ### Why this change is necessary These changes improve the user interface by ensuring that the settings panel adapts more effectively to varying screen sizes and content, preventing overflow issues. ### Checklist - [x] Layout updated for better responsiveness - [x] Overflow handling improved ### Release note ```release-note Refactor PromptSettings layout for enhanced responsiveness and overflow management. ```
…gs description display ### What this commit does - Refactors the `NameSetting` component to improve the layout by wrapping the avatar and name input in separate `SettingsItem` components, enhancing visual clarity. - Updates the `PermissionModeSettings` component to include the behavior description in the display, ensuring users have complete context for each permission mode. ### Why this change is necessary These changes improve the user interface by providing a clearer structure in the settings panel and ensuring that all relevant information is presented to the user. ### Checklist - [x] Layout of NameSetting improved for better organization - [x] PermissionModeSettings updated to display behavior descriptions ### Release note ```release-note Refactor NameSetting layout for clarity and enhance PermissionModeSettings to include behavior descriptions. ```
…UI elements ### What this commit does - Removes the use of the `Modal` component from Ant Design in favor of a direct call to `window.modal.confirm`. - Introduces a new `CheckCircle` icon to indicate selected permission modes, enhancing visual feedback. - Adjusts layout and styling for better spacing and organization within the `PermissionModeSettings` component. ### Why this change is necessary These changes streamline the modal confirmation process and improve the user interface by providing clearer visual cues for selected modes, contributing to a more intuitive user experience. ### Release note ```release-note Refactor PermissionModeSettings to simplify modal handling and enhance UI with new icons and improved layout. ```
…rity - Removes unnecessary behavior descriptions from the `PermissionModeSettings` and `PermissionModeDisplay` components to streamline the user interface. - Updates the fallback titles and descriptions for various permission modes in the localization files to enhance clarity and user understanding. - Adjusts layout and styling in the `PermissionModeSettings` component for improved visual organization. These changes improve the user experience by simplifying the information presented in the settings, ensuring that users can easily understand the functionality of each permission mode without overwhelming details. ```release-note Refactor permission mode descriptions and UI elements for enhanced clarity and user experience. ```
kangfenmao
requested review from
DeJeune,
EurFelux,
Pleasurecruise and
defi-failure
- Move duplicated `computeModeDefaults` function to shared.tsx - Replace custom `unique` function with lodash `uniq` for consistency - Both PermissionModeSettings and ToolsAndMCPSettings now import from shared
The tooltip now displays which permission mode is auto-approving the tool, making it clearer why the switch is disabled.
The tooltip for auto-approved tools has been modified across multiple languages to include the current permission mode, enhancing user understanding of why the tool cannot be disabled.
- Move AgentConfigurationState type and defaultConfiguration to shared.tsx - Extract cardStyles constant to reduce duplication in ToolsAndMCPSettings - Remove redundant Card body description (tooltip already shows mode info)
- Change "Tools & MCP" tab to "Tools" - Change "Pre-approved Tools" title to "Tools"
kangfenmao
force-pushed
the
refactor/agent-settings-popup
branch
from
cf1e1cb to
31879a9
Compare
- Add i18n entries for all 13 builtin tools (Bash, Edit, Glob, etc.) - Translate tool names and descriptions in zh-cn and zh-tw - Update ToolsAndMCPSettings to use translated names/descriptions for builtin tools
- Added and updated translations for builtin tools (Bash, Edit, Glob, etc.) in German, Greek, Spanish, French, Japanese, Portuguese, Romanian, and Russian. - Ensured tool names and descriptions are accurately translated to enhance user experience across different languages.
…rences - Renamed the ToolsAndMCPSettings component to ToolsSettings for clarity. - Updated all references in AgentSettingsPopup and SessionSettingsPopup to use the new ToolsSettings component. - This change improves code readability and consistency in the settings management.
… improved modularity - Refactored AgentSettingsPopup and SessionSettingsPopup to utilize a new BaseSettingsPopup component, enhancing code reusability and maintainability. - Removed the AvatarSetting component as it was deemed unnecessary. - Introduced several new components (e.g., AdvancedSettings, EssentialSettings, PermissionModeSettings) to better organize settings management. - Updated the handling of menu items and tab content rendering to streamline the user interface and improve user experience. - Enhanced type definitions for better clarity and consistency across settings components.
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
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.
What this PR does
Before this PR:
ToolingSettingscomponent (574 lines) that handled both permission modes and MCP tools in a single monolithic componentAfter this PR:
ToolingSettingsinto two focused components:PermissionModeSettingsandToolsAndMCPSettingsfor better separation of concernsNameSettingandPromptSettingscomponentswindow.modal.confirmWhy we need it and why it was done in this way
The following tradeoffs were made:
The following alternatives were considered:
Breaking changes
None. This is a pure refactor with UI improvements and i18n additions.
Special notes for your reviewer
Checklist
Release note