feat: enhance ModeSelector with custom mode prompts and add tests

Author: daniel-lxs

webview-ui/src/components/chat/ChatTextArea.tsx

@@ -75,6 +75,7 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 			currentApiConfigName,
 			listApiConfigMeta,
 			customModes,
+			customModePrompts,
 			cwd,
 			pinnedApiConfigs,
 			togglePinnedApiConfig,
@@ -194,6 +195,8 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 			}
 		}, [inputValue, sendingDisabled, setInputValue, t])
 
+		const allModes = useMemo(() => getAllModes(customModes), [customModes])
+
 		const queryItems = useMemo(() => {
 			return [
 				{ type: ContextMenuOptionType.Problems, value: "problems" },
@@ -323,7 +326,7 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 								selectedType,
 								queryItems,
 								fileSearchResults,
-								getAllModes(customModes),
+								allModes,
 							)
 							const optionsLength = options.length
 
@@ -360,7 +363,7 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 							selectedType,
 							queryItems,
 							fileSearchResults,
-							getAllModes(customModes),
+							allModes,
 						)[selectedMenuIndex]
 						if (
 							selectedOption &&
@@ -447,7 +450,7 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 				setInputValue,
 				justDeletedSpaceAfterMention,
 				queryItems,
-				customModes,
+				allModes,
 				fileSearchResults,
 				handleHistoryNavigation,
 				resetHistoryNavigation,
@@ -846,7 +849,7 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 									setSelectedIndex={setSelectedMenuIndex}
 									selectedType={selectedType}
 									queryItems={queryItems}
-									modes={getAllModes(customModes)}
+									modes={allModes}
 									loading={searchLoading}
 									dynamicSearchResults={fileSearchResults}
 								/>
@@ -1008,6 +1011,7 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 								triggerClassName="w-full"
 								modeShortcutText={modeShortcutText}
 								customModes={customModes}
+								customModePrompts={customModePrompts}
 							/>
 						</div>
 

webview-ui/src/components/chat/ModeSelector.tsx

@@ -1,14 +1,14 @@
 import React from "react"
 import { ChevronUp, Check } from "lucide-react"
-import { Mode, getAllModes } from "@roo/modes"
 import { cn } from "@/lib/utils"
 import { useRooPortal } from "@/components/ui/hooks/useRooPortal"
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui"
 import { IconButton } from "./IconButton"
 import { vscode } from "@/utils/vscode"
 import { useExtensionState } from "@/context/ExtensionStateContext"
 import { useAppTranslation } from "@/i18n/TranslationContext"
-import { ModeConfig } from "@roo-code/types"
+import { Mode, getAllModes } from "@roo/modes"
+import { ModeConfig, CustomModePrompts } from "@roo-code/types"
 
 interface ModeSelectorProps {
 	value: Mode
@@ -18,17 +18,19 @@ interface ModeSelectorProps {
 	triggerClassName?: string
 	modeShortcutText: string
 	customModes?: ModeConfig[]
+	customModePrompts?: CustomModePrompts
 }
 
-export const ModeSelector: React.FC<ModeSelectorProps> = ({
+export const ModeSelector = ({
 	value,
 	onChange,
 	disabled = false,
 	title = "",
 	triggerClassName = "",
 	modeShortcutText,
 	customModes,
-}) => {
+	customModePrompts,
+}: ModeSelectorProps) => {
 	const [open, setOpen] = React.useState(false)
 	const portalContainer = useRooPortal("roo-portal")
 	const { hasOpenedModeSelector, setHasOpenedModeSelector } = useExtensionState()
@@ -41,8 +43,14 @@ export const ModeSelector: React.FC<ModeSelectorProps> = ({
 		}
 	}
 
-	// Get all available modes
-	const modes = React.useMemo(() => getAllModes(customModes), [customModes])
+	// Get all modes including custom modes and merge custom prompt descriptions
+	const modes = React.useMemo(() => {
+		const allModes = getAllModes(customModes)
+		return allModes.map((mode) => ({
+			...mode,
+			description: customModePrompts?.[mode.slug]?.description ?? mode.description,
+		}))
+	}, [customModes, customModePrompts])
 
 	// Find the selected mode
 	const selectedMode = React.useMemo(() => modes.find((mode) => mode.slug === value), [modes, value])

webview-ui/src/components/chat/__tests__/ModeSelector.spec.tsx

@@ -0,0 +1,58 @@
+import React from "react"
+import { render, screen } from "@testing-library/react"
+import { describe, test, expect, vi } from "vitest"
+import ModeSelector from "../ModeSelector"
+import { Mode } from "@roo/modes"
+
+// Mock the dependencies
+vi.mock("@/utils/vscode", () => ({
+	vscode: {
+		postMessage: vi.fn(),
+	},
+}))
+
+vi.mock("@/context/ExtensionStateContext", () => ({
+	useExtensionState: () => ({
+		hasOpenedModeSelector: false,
+		setHasOpenedModeSelector: vi.fn(),
+	}),
+}))
+
+vi.mock("@/i18n/TranslationContext", () => ({
+	useAppTranslation: () => ({
+		t: (key: string) => key,
+	}),
+}))
+
+vi.mock("@/components/ui/hooks/useRooPortal", () => ({
+	useRooPortal: () => document.body,
+}))
+
+describe("ModeSelector", () => {
+	test("shows custom description from customModePrompts", () => {
+		const customModePrompts = {
+			code: {
+				description: "Custom code mode description",
+			},
+		}
+
+		render(
+			<ModeSelector
+				value={"code" as Mode}
+				onChange={vi.fn()}
+				modeShortcutText="Ctrl+M"
+				customModePrompts={customModePrompts}
+			/>,
+		)
+
+		// The component should be rendered
+		expect(screen.getByTestId("mode-selector-trigger")).toBeInTheDocument()
+	})
+
+	test("falls back to default description when no custom prompt", () => {
+		render(<ModeSelector value={"code" as Mode} onChange={vi.fn()} modeShortcutText="Ctrl+M" />)
+
+		// The component should be rendered
+		expect(screen.getByTestId("mode-selector-trigger")).toBeInTheDocument()
+	})
+})