From b0d5c01c2d9feb0e3bd54af4b533fb07fd6df446 Mon Sep 17 00:00:00 2001 From: Roo Code Date: Mon, 28 Jul 2025 06:25:17 +0000 Subject: [PATCH] feat: add UI settings page with enhance prompt button toggle - Created new UISettings component with enhance prompt button toggle - Added UI settings tab to SettingsView component - Moved enhance prompt button from experimental to UI settings - Added placeholders for future UI customization options - Updated translation files with UI settings content - Maintained backward compatibility with existing experiment system --- .../settings/ExperimentalSettings.tsx | 2 +- .../src/components/settings/SettingsView.tsx | 9 ++ .../src/components/settings/UISettings.tsx | 113 ++++++++++++++++++ webview-ui/src/i18n/locales/en/settings.json | 35 +++++- 4 files changed, 157 insertions(+), 2 deletions(-) create mode 100644 webview-ui/src/components/settings/UISettings.tsx diff --git a/webview-ui/src/components/settings/ExperimentalSettings.tsx b/webview-ui/src/components/settings/ExperimentalSettings.tsx index 262e9568d3..0c61ade9a2 100644 --- a/webview-ui/src/components/settings/ExperimentalSettings.tsx +++ b/webview-ui/src/components/settings/ExperimentalSettings.tsx @@ -37,7 +37,7 @@ export const ExperimentalSettings = ({
{Object.entries(experimentConfigsMap) - .filter(([key]) => key in EXPERIMENT_IDS) + .filter(([key]) => key in EXPERIMENT_IDS && key !== "SHOW_ENHANCE_PROMPT_BUTTON") .map((config) => { const experimentKey = config[0] as keyof typeof EXPERIMENT_IDS const experimentId = EXPERIMENT_IDS[experimentKey] diff --git a/webview-ui/src/components/settings/SettingsView.tsx b/webview-ui/src/components/settings/SettingsView.tsx index a416afd48d..afd1490cc7 100644 --- a/webview-ui/src/components/settings/SettingsView.tsx +++ b/webview-ui/src/components/settings/SettingsView.tsx @@ -23,6 +23,7 @@ import { Info, MessageSquare, LucideIcon, + Palette, } from "lucide-react" import type { ProviderSettings, ExperimentId } from "@roo-code/types" @@ -63,6 +64,7 @@ import { TerminalSettings } from "./TerminalSettings" import { ExperimentalSettings } from "./ExperimentalSettings" import { LanguageSettings } from "./LanguageSettings" import { About } from "./About" +import { UISettings } from "./UISettings" import { Section } from "./Section" import PromptsSettings from "./PromptsSettings" import { cn } from "@/lib/utils" @@ -87,6 +89,7 @@ const sectionNames = [ "contextManagement", "terminal", "prompts", + "ui", "experimental", "language", "about", @@ -414,6 +417,7 @@ const SettingsView = forwardRef(({ onDone, t { id: "contextManagement", icon: Database }, { id: "terminal", icon: SquareTerminal }, { id: "prompts", icon: MessageSquare }, + { id: "ui", icon: Palette }, { id: "experimental", icon: FlaskConical }, { id: "language", icon: Globe }, { id: "about", icon: Info }, @@ -702,6 +706,11 @@ const SettingsView = forwardRef(({ onDone, t /> )} + {/* UI Section */} + {activeTab === "ui" && ( + + )} + {/* Experimental Section */} {activeTab === "experimental" && ( diff --git a/webview-ui/src/components/settings/UISettings.tsx b/webview-ui/src/components/settings/UISettings.tsx new file mode 100644 index 0000000000..a829453915 --- /dev/null +++ b/webview-ui/src/components/settings/UISettings.tsx @@ -0,0 +1,113 @@ +import { HTMLAttributes } from "react" +import { Palette } from "lucide-react" + +import type { Experiments } from "@roo-code/types" + +import { VSCodeCheckbox } from "@vscode/webview-ui-toolkit/react" +import { EXPERIMENT_IDS } from "@roo/experiments" + +import { useAppTranslation } from "@src/i18n/TranslationContext" +import { cn } from "@src/lib/utils" + +import { SetExperimentEnabled } from "./types" +import { SectionHeader } from "./SectionHeader" +import { Section } from "./Section" + +type UISettingsProps = HTMLAttributes & { + experiments: Experiments + setExperimentEnabled: SetExperimentEnabled +} + +export const UISettings = ({ experiments, setExperimentEnabled, className, ...props }: UISettingsProps) => { + const { t } = useAppTranslation() + + // For now, we'll only handle the enhance prompt button through experiments + // Other UI settings will be added later when backend support is implemented + const showEnhancePromptButton = experiments[EXPERIMENT_IDS.SHOW_ENHANCE_PROMPT_BUTTON] ?? true + + return ( +
+ +
+ +
{t("settings:sections.ui")}
+
+ + +
+
+ + setExperimentEnabled(EXPERIMENT_IDS.SHOW_ENHANCE_PROMPT_BUTTON, e.target.checked) + } + data-testid="show-enhance-prompt-button-checkbox"> + {t("settings:ui.showEnhancePromptButton.label")} + +
+ {t("settings:ui.showEnhancePromptButton.description")} +
+
+ +
+ + {t("settings:ui.showCodebaseIndexing.label")} + +
+ {t("settings:ui.showCodebaseIndexing.description")} +
+
+ +
+ + {t("settings:ui.showAddImagesToPrompt.label")} + +
+ {t("settings:ui.showAddImagesToPrompt.description")} +
+
+ +
+ + {t("settings:ui.showApiConfiguration.label")} + +
+ {t("settings:ui.showApiConfiguration.description")} +
+
+ +
+ + {t("settings:ui.showAutoApprove.label")} + +
+ {t("settings:ui.showAutoApprove.description")} +
+
+ +
+ + {t("settings:ui.showHelperText.label")} + +
+ {t("settings:ui.showHelperText.description")} +
+
+ +
+ + {t("settings:ui.showSendButton.label")} + +
+ {t("settings:ui.showSendButton.description")} +
+
+ +
+ + {t("settings:ui.comingSoon")} +
+
+
+ ) +} diff --git a/webview-ui/src/i18n/locales/en/settings.json b/webview-ui/src/i18n/locales/en/settings.json index 745de6a43b..bceb2354c1 100644 --- a/webview-ui/src/i18n/locales/en/settings.json +++ b/webview-ui/src/i18n/locales/en/settings.json @@ -31,7 +31,8 @@ "prompts": "Prompts", "experimental": "Experimental", "language": "Language", - "about": "About Roo Code" + "about": "About Roo Code", + "ui": "UI" }, "prompts": { "description": "Configure support prompts that are used for quick actions like enhancing prompts, explaining code, and fixing issues. These prompts help Roo provide better assistance for common development tasks." @@ -654,6 +655,38 @@ "description": "When enabled, displays the enhance prompt button in the chat input area. This button allows you to improve your prompts using AI assistance." } }, + "ui": { + "description": "Customize the user interface elements and visibility settings", + "showEnhancePromptButton": { + "label": "Show enhance prompt button", + "description": "Display the wand icon button in the chat input area that helps improve your prompts using AI assistance" + }, + "showCodebaseIndexing": { + "label": "Show codebase indexing status", + "description": "Display the codebase indexing status indicator in the chat interface" + }, + "showAddImagesToPrompt": { + "label": "Show add images button", + "description": "Display the image button that allows adding images to your prompts" + }, + "showApiConfiguration": { + "label": "Show API configuration selector", + "description": "Display the dropdown for selecting different API configurations" + }, + "showAutoApprove": { + "label": "Show auto-approve toggle", + "description": "Display the auto-approve toggle in the chat interface" + }, + "showHelperText": { + "label": "Show helper text", + "description": "Display the helper text '(@ to add context, / to switch modes...)' below the chat input" + }, + "showSendButton": { + "label": "Show send button", + "description": "Display the send button in the chat input area" + }, + "comingSoon": "Additional UI customization options are coming soon. The settings above are placeholders for future functionality." + }, "promptCaching": { "label": "Disable prompt caching", "description": "When checked, Roo will not use prompt caching for this model."