From 68cfdc985e87bf55d1f3f04aee39469108fb76f1 Mon Sep 17 00:00:00 2001
From: Matt Rubens <mrubens@users.noreply.github.com>
Date: Sun, 9 Mar 2025 09:11:55 -0400
Subject: [PATCH] Fix the VSCode LM model picker

---
 .changeset/eleven-birds-doubt.md              |  5 +++
 .../src/components/settings/ApiOptions.tsx    | 32 +++++++++++--------
 2 files changed, 23 insertions(+), 14 deletions(-)
 create mode 100644 .changeset/eleven-birds-doubt.md

diff --git a/.changeset/eleven-birds-doubt.md b/.changeset/eleven-birds-doubt.md
new file mode 100644
index 0000000000..977228c808
--- /dev/null
+++ b/.changeset/eleven-birds-doubt.md
@@ -0,0 +1,5 @@
+---
+"roo-cline": patch
+---
+
+Fix VS Code LM API model picker
diff --git a/webview-ui/src/components/settings/ApiOptions.tsx b/webview-ui/src/components/settings/ApiOptions.tsx
index c5a02dc117..f7982080c8 100644
--- a/webview-ui/src/components/settings/ApiOptions.tsx
+++ b/webview-ui/src/components/settings/ApiOptions.tsx
@@ -1076,27 +1076,31 @@ const ApiOptions = ({
 							Language Model
 						</label>
 						{vsCodeLmModels.length > 0 ? (
-							<Dropdown
-								id="vscode-lm-model"
+							<Select
 								value={
 									apiConfiguration?.vsCodeLmModelSelector
 										? `${apiConfiguration.vsCodeLmModelSelector.vendor ?? ""}/${apiConfiguration.vsCodeLmModelSelector.family ?? ""}`
 										: ""
 								}
-								onChange={handleInputChange("vsCodeLmModelSelector", (e) => {
-									const valueStr = (e as DropdownOption)?.value
+								onValueChange={handleInputChange("vsCodeLmModelSelector", (valueStr) => {
 									const [vendor, family] = valueStr.split("/")
 									return { vendor, family }
-								})}
-								options={[
-									{ value: "", label: "Select a model..." },
-									...vsCodeLmModels.map((model) => ({
-										value: `${model.vendor}/${model.family}`,
-										label: `${model.vendor} - ${model.family}`,
-									})),
-								]}
-								className="w-full"
-							/>
+								})}>
+								<SelectTrigger className="w-full">
+									<SelectValue placeholder="Select a model..." />
+								</SelectTrigger>
+								<SelectContent>
+									<SelectGroup>
+										{vsCodeLmModels.map((model) => (
+											<SelectItem
+												key={`${model.vendor}/${model.family}`}
+												value={`${model.vendor}/${model.family}`}>
+												{`${model.vendor} - ${model.family}`}
+											</SelectItem>
+										))}
+									</SelectGroup>
+								</SelectContent>
+							</Select>
 						) : (
 							<div className="text-sm text-vscode-descriptionForeground">
 								The VS Code Language Model API allows you to run models provided by other VS Code