{t("settings:providers.apiKeyStorageNotice")}
@@ -1458,7 +1466,7 @@ const ApiOptions = ({
}}
placeholder="Enter ARN (e.g. arn:aws:bedrock:us-east-1:123456789012:foundation-model/my-model)"
className="w-full">
-
{t("settings:providers.awsCustomArnUse")}
diff --git a/webview-ui/src/components/settings/ModelPicker.tsx b/webview-ui/src/components/settings/ModelPicker.tsx
index 2da4a94cad..3cafb8f024 100644
--- a/webview-ui/src/components/settings/ModelPicker.tsx
+++ b/webview-ui/src/components/settings/ModelPicker.tsx
@@ -1,8 +1,21 @@
import { useMemo, useState, useCallback, useEffect, useRef } from "react"
import { VSCodeLink } from "@vscode/webview-ui-toolkit/react"
import { Trans } from "react-i18next"
+import { ChevronsUpDown, Check, X } from "lucide-react"
-import { Combobox, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem } from "@/components/ui/combobox"
+import { cn } from "@/lib/utils"
+import {
+ Command,
+ CommandEmpty,
+ CommandGroup,
+ CommandInput,
+ CommandItem,
+ CommandList,
+ Popover,
+ PopoverContent,
+ PopoverTrigger,
+ Button,
+} from "@/components/ui"
import { ApiConfiguration, ModelInfo } from "../../../../src/shared/api"
@@ -41,9 +54,10 @@ export const ModelPicker = ({
setApiConfigurationField,
defaultModelInfo,
}: ModelPickerProps) => {
+ const [open, setOpen] = useState(false)
const [isDescriptionExpanded, setIsDescriptionExpanded] = useState(false)
const isInitialized = useRef(false)
-
+ const searchInputRef = useRef
(null)
const modelIds = useMemo(() => Object.keys(models ?? {}).sort((a, b) => a.localeCompare(b)), [models])
const { selectedModelId, selectedModelInfo } = useMemo(
@@ -51,43 +65,103 @@ export const ModelPicker = ({
[apiConfiguration],
)
+ const [searchValue, setSearchValue] = useState(selectedModelId)
+
const onSelect = useCallback(
(modelId: string) => {
+ setOpen(false)
const modelInfo = models?.[modelId]
setApiConfigurationField(modelIdKey, modelId)
setApiConfigurationField(modelInfoKey, modelInfo ?? defaultModelInfo)
+ // Delay to ensure the popover is closed before setting the search value.
+ setTimeout(() => setSearchValue(modelId), 100)
},
[modelIdKey, modelInfoKey, models, setApiConfigurationField, defaultModelInfo],
)
- const inputValue = apiConfiguration[modelIdKey]
+ const onOpenChange = useCallback(
+ (open: boolean) => {
+ setOpen(open)
+
+ // Abandon the current search if the popover is closed.
+ if (!open) {
+ // Delay to ensure the popover is closed before setting the search value.
+ setTimeout(() => setSearchValue(selectedModelId), 100)
+ }
+ },
+ [selectedModelId],
+ )
+
+ const onClearSearch = useCallback(() => {
+ setSearchValue("")
+ searchInputRef.current?.focus()
+ }, [])
useEffect(() => {
- if (!inputValue && !isInitialized.current) {
+ if (!selectedModelId && !isInitialized.current) {
const initialValue = modelIds.includes(selectedModelId) ? selectedModelId : defaultModelId
setApiConfigurationField(modelIdKey, initialValue)
}
isInitialized.current = true
- }, [inputValue, modelIds, setApiConfigurationField, modelIdKey, selectedModelId, defaultModelId])
+ }, [modelIds, setApiConfigurationField, modelIdKey, selectedModelId, defaultModelId])
return (
<>
-
Model
-
-
-
- No model found.
- {modelIds.map((model) => (
-
- {model}
-
- ))}
-
-
+
+
+
+
+
+
+
+
+
+ {searchValue.length > 0 && (
+
+
+
+ )}
+