feat(chat): add chat model selector in input bar

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

@@ -0,0 +1,103 @@
+import { useCallback, useMemo } from "react"
+
+import { cn } from "@/lib/utils"
+import { useRooPortal } from "@/components/ui/hooks/useRooPortal"
+import { vscode } from "@/utils/vscode"
+import { useExtensionState } from "@/context/ExtensionStateContext"
+import { ModelSelect } from "@/components/ui/model-select/ModelSelect"
+
+import { useChatModelSelector } from "./hooks/useChatModelSelector"
+
+interface ChatModelSelectorProps {
+	disabled?: boolean
+	title: string
+	triggerClassName?: string
+}
+
+/**
+ * Compact model picker for the chat input bar.
+ *
+ * Wraps the shared {@link ModelSelect} with a chat-specific trigger and a
+ * persistence adapter: selections are written to the active API configuration
+ * profile via `upsertApiConfiguration` rather than the settings buffer.
+ */
+export const ChatModelSelector = ({ disabled = false, title, triggerClassName = "" }: ChatModelSelectorProps) => {
+	const { apiConfiguration, organizationAllowList, currentApiConfigName } = useExtensionState()
+	const { provider, models, modelIdKey, defaultModelId, isLoading, valueTransform, displayTransform } =
+		useChatModelSelector()
+
+	const portalContainer = useRooPortal("roo-portal")
+
+	// Compute the display string for the currently stored selection.
+	const displayValue = useMemo(() => {
+		if (!modelIdKey) return ""
+		const stored = apiConfiguration?.[modelIdKey]
+		if (!stored) return ""
+		return displayTransform ? displayTransform(stored) : String(stored)
+	}, [apiConfiguration, modelIdKey, displayTransform])
+
+	// Persist the selection to the active profile. ModelSelect delivers the
+	// raw model id, so apply valueTransform before writing.
+	const persistSelection = useCallback(
+		(modelId: string) => {
+			// Refuse to write until the user has actually picked a provider —
+			// the profile schema strips provider-specific fields from
+			// provider-less profiles, so the selection would be dropped on reload.
+			if (!modelIdKey || !apiConfiguration || !currentApiConfigName || !apiConfiguration.apiProvider) {
+				return
+			}
+
+			const value = valueTransform ? valueTransform(modelId) : modelId
+			vscode.postMessage({
+				type: "upsertApiConfiguration",
+				text: currentApiConfigName,
+				apiConfiguration: { ...apiConfiguration, [modelIdKey]: value },
+			})
+		},
+		[modelIdKey, apiConfiguration, currentApiConfigName, valueTransform],
+	)
+
+	// Free-form model ids are only offered when the provider is unrestricted.
+	const hideCustomModel = useMemo(() => {
+		if (!organizationAllowList || organizationAllowList.allowAll) return false
+		const providerConfig = provider ? organizationAllowList.providers?.[provider] : undefined
+		return !providerConfig?.allowAll
+	}, [organizationAllowList, provider])
+
+	const isDisabled = disabled || !modelIdKey || !currentApiConfigName || !apiConfiguration?.apiProvider
+
+	return (
+		<ModelSelect
+			models={models}
+			value={displayValue}
+			onChange={persistSelection}
+			disabled={isDisabled}
+			isLoading={isLoading}
+			hideCustomModel={hideCustomModel}
+			activeProvider={provider}
+			organizationAllowList={organizationAllowList}
+			contentClassName="overflow-hidden"
+			portalContainer={portalContainer}
+			tooltip={title}
+			renderTrigger={({ displayValue: value, isLoading: loading, placeholder }) => (
+				<button
+					type="button"
+					disabled={isDisabled}
+					data-testid="chat-model-selector-trigger"
+					className={cn(
+						"min-w-0 inline-flex items-center relative whitespace-nowrap px-1.5 py-1 text-xs",
+						"bg-transparent border border-[rgba(255,255,255,0.08)] rounded-md text-vscode-foreground",
+						"transition-all duration-150 focus:outline-none focus-visible:ring-1 focus-visible:ring-vscode-focusBorder focus-visible:ring-inset",
+						isDisabled
+							? "opacity-50 cursor-not-allowed"
+							: "opacity-90 hover:opacity-100 hover:bg-[rgba(255,255,255,0.03)] hover:border-[rgba(255,255,255,0.15)] cursor-pointer",
+						triggerClassName,
+					)}>
+					<span className="truncate max-w-[20ch]">
+						{loading ? "…" : value || defaultModelId || placeholder}
+					</span>
+				</button>
+			)}
+		/>
+	)
+}

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

@@ -27,6 +27,7 @@ import { StandardTooltip } from "@src/components/ui"
 import Thumbnails from "../common/Thumbnails"
 import { ModeSelector } from "./ModeSelector"
 import { ApiConfigSelector } from "./ApiConfigSelector"
+import { ChatModelSelector } from "./ChatModelSelector"
 import { AutoApproveDropdown } from "./AutoApproveDropdown"
 import { MAX_IMAGES_PER_MESSAGE } from "./constants"
 import ContextMenu from "./ContextMenu"
@@ -1319,6 +1320,11 @@ export const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 							lockApiConfigAcrossModes={!!lockApiConfigAcrossModes}
 							onToggleLockApiConfig={handleToggleLockApiConfig}
 						/>
+						<ChatModelSelector
+							title={t("settings:modelPicker.label")}
+							disabled={selectApiConfigDisabled}
+							triggerClassName="min-w-[28px] text-ellipsis overflow-hidden flex-shrink min-[310px]:overflow-visible min-[310px]:flex-shrink-0"
+						/>
 						<AutoApproveDropdown triggerClassName="min-w-[28px] text-ellipsis overflow-hidden flex-shrink min-[310px]:overflow-visible min-[310px]:flex-shrink-0" />
 					</div>
 					<div className={cn("flex flex-shrink-0 items-center gap-0.5 h-5 leading-none pr-2")}>

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

@@ -0,0 +1,236 @@
+// npx vitest src/components/chat/__tests__/ChatModelSelector.spec.tsx
+
+import { screen, fireEvent, renderWithExtensionState } from "@/utils/test-utils"
+import { act, type ReactNode } from "react"
+import { QueryClient } from "@tanstack/react-query"
+import { type Mock } from "vitest"
+
+import { type ModelInfo, type ProviderSettings, getProviderDefaultModelId, providerIdentifiers } from "@roo-code/types"
+
+import { useRouterModels } from "@/components/ui/hooks/useRouterModels"
+import { useOllamaModels } from "@/components/ui/hooks/useOllamaModels"
+import { useLmStudioModels } from "@/components/ui/hooks/useLmStudioModels"
+import { useVsCodeLmModels } from "@/components/ui/hooks/useVsCodeLmModels"
+import { useExtensionState } from "@src/context/ExtensionStateContext"
+import { vscode } from "@/utils/vscode"
+
+import { ChatModelSelector } from "../ChatModelSelector"
+
+vi.mock("@/utils/vscode", () => ({
+	vscode: {
+		postMessage: vi.fn(),
+	},
+}))
+
+vi.mock("@src/context/ExtensionStateContext", () => ({
+	ExtensionStateContextProvider: ({ children }: { children: ReactNode }) => children,
+	useExtensionState: vi.fn(),
+}))
+
+vi.mock("@/components/ui/hooks/useRouterModels")
+vi.mock("@/components/ui/hooks/useOllamaModels")
+vi.mock("@/components/ui/hooks/useLmStudioModels")
+vi.mock("@/components/ui/hooks/useVsCodeLmModels")
+vi.mock("@/components/ui/hooks/useRooPortal", () => ({ useRooPortal: () => document.body }))
+
+const mockUseRouterModels = useRouterModels as Mock<typeof useRouterModels>
+const mockUseOllamaModels = useOllamaModels as Mock<typeof useOllamaModels>
+const mockUseLmStudioModels = useLmStudioModels as Mock<typeof useLmStudioModels>
+const mockUseVsCodeLmModels = useVsCodeLmModels as Mock<typeof useVsCodeLmModels>
+const mockUseExtensionState = useExtensionState as Mock<typeof useExtensionState>
+const mockPostMessage = vscode.postMessage as Mock
+
+Element.prototype.scrollIntoView = vi.fn()
+
+type Story = Pick<
+	ReturnType<typeof useExtensionState>,
+	"apiConfiguration" | "organizationAllowList" | "currentApiConfigName" | "routerModels"
+>
+
+describe("ChatModelSelector", () => {
+	const modelInfo: ModelInfo = {
+		maxTokens: 8192,
+		contextWindow: 200_000,
+		supportsImages: true,
+		supportsPromptCache: true,
+	}
+
+	const routerModels = {
+		openrouter: {
+			"model-a": { name: "Model A", ...modelInfo },
+			"model-b": { name: "Model B", ...modelInfo },
+		},
+	}
+
+	const queryClient = new QueryClient()
+
+	const setState = (story: Partial<Story>) => {
+		mockUseExtensionState.mockReturnValue({
+			apiConfiguration: { apiProvider: providerIdentifiers.openrouter } as ProviderSettings,
+			organizationAllowList: { allowAll: true, providers: {} },
+			currentApiConfigName: "Default",
+			...story,
+		} as unknown as ReturnType<typeof useExtensionState>)
+	}
+
+	const renderSelector = () => renderWithExtensionState(<ChatModelSelector title="Select model" />, { queryClient })
+
+	beforeEach(() => {
+		vi.clearAllMocks()
+		mockUseRouterModels.mockReturnValue({
+			data: routerModels,
+			isLoading: false,
+			isError: false,
+		} as unknown as ReturnType<typeof useRouterModels>)
+		mockUseOllamaModels.mockReturnValue({
+			data: undefined,
+			isLoading: false,
+		} as unknown as ReturnType<typeof useOllamaModels>)
+		mockUseLmStudioModels.mockReturnValue({
+			data: undefined,
+			isLoading: false,
+		} as unknown as ReturnType<typeof useLmStudioModels>)
+		mockUseVsCodeLmModels.mockReturnValue({
+			data: [],
+			isLoading: false,
+		} as unknown as ReturnType<typeof useVsCodeLmModels>)
+		setState({})
+	})
+
+	it("renders the default model id when no model is selected", () => {
+		renderSelector()
+
+		const trigger = screen.getByTestId("chat-model-selector-trigger")
+		expect(trigger).toBeInTheDocument()
+		expect(trigger).toHaveTextContent(getProviderDefaultModelId(providerIdentifiers.openrouter))
+	})
+
+	it("renders the selected model id from the active configuration", () => {
+		setState({
+			apiConfiguration: { apiProvider: providerIdentifiers.anthropic, apiModelId: "claude-3-opus-20240229" },
+		})
+
+		renderSelector()
+
+		expect(screen.getByTestId("chat-model-selector-trigger")).toHaveTextContent("claude-3-opus-20240229")
+	})
+
+	it("persists the selection to the active profile via upsertApiConfiguration", async () => {
+		renderSelector()
+
+		await act(async () => {
+			fireEvent.click(screen.getByTestId("chat-model-selector-trigger"))
+		})
+
+		await act(async () => {
+			fireEvent.click(screen.getByTestId("model-option-model-a"))
+		})
+
+		expect(mockPostMessage).toHaveBeenCalledWith({
+			type: "upsertApiConfiguration",
+			text: "Default",
+			apiConfiguration: expect.objectContaining({
+				apiProvider: providerIdentifiers.openrouter,
+				openRouterModelId: "model-a",
+			}),
+		})
+	})
+
+	it("disables the trigger when no apiProvider is stored on the active profile", async () => {
+		// Profiles without apiProvider get their provider-specific fields stripped
+		// by the schema validator, so the adapter must disable the trigger rather
+		// than let the user pick a model that would be silently dropped on reload.
+		setState({ apiConfiguration: {} })
+
+		renderSelector()
+
+		const trigger = screen.getByTestId("chat-model-selector-trigger")
+		expect(trigger).toBeDisabled()
+
+		// Clicking a disabled trigger must not open the popover, so no model
+		// option should be reachable.
+		await act(async () => {
+			fireEvent.click(trigger)
+		})
+
+		expect(screen.queryByTestId("model-option-model-a")).not.toBeInTheDocument()
+		expect(mockPostMessage).not.toHaveBeenCalledWith(expect.objectContaining({ type: "upsertApiConfiguration" }))
+	})
+
+	it("preserves the stored provider without injecting a provider override", async () => {
+		setState({
+			apiConfiguration: {
+				apiProvider: providerIdentifiers.openrouter,
+				openRouterModelId: "model-a",
+			},
+		})
+
+		renderSelector()
+
+		await act(async () => {
+			fireEvent.click(screen.getByTestId("chat-model-selector-trigger"))
+		})
+
+		await act(async () => {
+			fireEvent.click(screen.getByTestId("model-option-model-b"))
+		})
+
+		const payload = mockPostMessage.mock.calls.find(([msg]) => msg.type === "upsertApiConfiguration")?.[0]
+		expect(payload?.apiConfiguration).toBeDefined()
+		// The adapter must not rewrite apiProvider even though the hook defaults
+		// to OpenRouter when no provider is set.
+		expect(payload?.apiConfiguration).toHaveProperty("apiProvider", providerIdentifiers.openrouter)
+	})
+
+	it("lists VS Code LM models keyed as vendor/family even when custom models are restricted", async () => {
+		setState({
+			apiConfiguration: { apiProvider: providerIdentifiers.vscodeLm },
+			organizationAllowList: {
+				allowAll: false,
+				providers: { [providerIdentifiers.vscodeLm]: { allowAll: false, models: ["copilot/gpt-4o"] } },
+			},
+		})
+		mockUseVsCodeLmModels.mockReturnValue({
+			data: [{ vendor: "copilot", family: "gpt-4o" }],
+			isLoading: false,
+		} as unknown as ReturnType<typeof useVsCodeLmModels>)
+
+		renderSelector()
+
+		await act(async () => {
+			fireEvent.click(screen.getByTestId("chat-model-selector-trigger"))
+		})
+
+		expect(screen.getByTestId("model-option-copilot/gpt-4o")).toBeInTheDocument()
+	})
+
+	it("is disabled and does not persist when there is no active profile", async () => {
+		setState({ currentApiConfigName: undefined })
+
+		renderSelector()
+
+		expect(screen.getByTestId("chat-model-selector-trigger")).toBeDisabled()
+		expect(mockPostMessage).not.toHaveBeenCalled()
+	})
+
+	it("hides the custom-model escape hatch for a restricted provider", async () => {
+		setState({
+			organizationAllowList: {
+				allowAll: false,
+				providers: { [providerIdentifiers.openrouter]: { allowAll: false } },
+			},
+		})
+
+		renderSelector()
+
+		await act(async () => {
+			fireEvent.click(screen.getByTestId("chat-model-selector-trigger"))
+		})
+
+		await act(async () => {
+			fireEvent.change(screen.getByTestId("model-input"), { target: { value: "my-custom-model" } })
+		})
+
+		expect(screen.queryByTestId("use-custom-model")).not.toBeInTheDocument()
+	})
+})

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

@@ -17,7 +17,7 @@ for (const theme of visualThemes) {
 		await page.evaluate(() => (document.activeElement as HTMLElement | null)?.blur())
 		for (
 			let index = 0;
-			index < 10 && !(await editor.evaluate((element) => element === document.activeElement));
+			index < 15 && !(await editor.evaluate((element) => element === document.activeElement));
 			index++
 		) {
 			await page.keyboard.press("Tab")