revert: restore original SelectDropdown for API config selector

- Remove custom ApiConfigSelector component
- Restore original SelectDropdown with built-in search functionality
- Add back getApiConfigOptions and renderApiConfigItem functions
- Maintain all original search behavior from SelectDropdown component

Author: hannesrudolph

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

@@ -19,14 +19,13 @@ import {
 	SearchResult,
 } from "@src/utils/context-mentions"
 import { convertToMentionPath } from "@/utils/path-mentions"
-import { StandardTooltip } from "@/components/ui"
+import { SelectDropdown, DropdownOptionType, Button, StandardTooltip } from "@/components/ui"
 
 import Thumbnails from "../common/Thumbnails"
 import ModeSelector from "./ModeSelector"
-import { ApiConfigSelector } from "./ApiConfigSelector"
 import { MAX_IMAGES_PER_MESSAGE } from "./ChatView"
 import ContextMenu from "./ContextMenu"
-import { VolumeX, Image, WandSparkles, SendHorizontal } from "lucide-react"
+import { VolumeX, Image, WandSparkles, SendHorizontal, Check, Pin } from "lucide-react"
 import { IndexingStatusBadge } from "./IndexingStatusBadge"
 import { cn } from "@/lib/utils"
 import { usePromptHistory } from "./hooks/usePromptHistory"
@@ -827,26 +826,136 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 
 		// Helper function to handle API config change
 		const handleApiConfigChange = useCallback((value: string) => {
-			vscode.postMessage({ type: "loadApiConfigurationById", text: value })
+			if (value === "settingsButtonClicked") {
+				vscode.postMessage({
+					type: "loadApiConfiguration",
+					text: value,
+					values: { section: "providers" },
+				})
+			} else {
+				vscode.postMessage({ type: "loadApiConfigurationById", text: value })
+			}
 		}, [])
 
+		// Helper function to get API config options
+		const getApiConfigOptions = useMemo(() => {
+			const pinnedConfigs = (listApiConfigMeta || [])
+				.filter((config) => pinnedApiConfigs && pinnedApiConfigs[config.id])
+				.map((config) => ({
+					value: config.id,
+					label: config.name,
+					name: config.name,
+					type: DropdownOptionType.ITEM,
+					pinned: true,
+				}))
+				.sort((a, b) => a.label.localeCompare(b.label))
+
+			const unpinnedConfigs = (listApiConfigMeta || [])
+				.filter((config) => !pinnedApiConfigs || !pinnedApiConfigs[config.id])
+				.map((config) => ({
+					value: config.id,
+					label: config.name,
+					name: config.name,
+					type: DropdownOptionType.ITEM,
+					pinned: false,
+				}))
+				.sort((a, b) => a.label.localeCompare(b.label))
+
+			return [
+				...pinnedConfigs,
+				...(pinnedConfigs.length > 0 && unpinnedConfigs.length > 0
+					? [
+							{
+								value: "sep-1",
+								label: t("chat:separator"),
+								type: DropdownOptionType.SEPARATOR,
+							},
+						]
+					: []),
+				...unpinnedConfigs,
+				{
+					value: "sep-2",
+					label: t("chat:separator"),
+					type: DropdownOptionType.SEPARATOR,
+				},
+				{
+					value: "settingsButtonClicked",
+					label: t("chat:edit"),
+					type: DropdownOptionType.ACTION,
+				},
+			]
+		}, [listApiConfigMeta, pinnedApiConfigs, t])
+
+		// Helper function to render API config item
+		const renderApiConfigItem = useCallback(
+			({ type, value, label, pinned }: any) => {
+				if (type !== DropdownOptionType.ITEM) {
+					return label
+				}
+
+				const config = listApiConfigMeta?.find((c) => c.id === value)
+				const isCurrentConfig = config?.name === currentApiConfigName
+
+				return (
+					<div className="flex justify-between gap-2 w-full h-5">
+						<div
+							className={cn("truncate min-w-0 overflow-hidden", {
+								"font-medium": isCurrentConfig,
+							})}>
+							{label}
+						</div>
+						<div className="flex justify-end w-10 flex-shrink-0">
+							<div
+								className={cn("size-5 p-1", {
+									"block group-hover:hidden": !pinned,
+									hidden: !isCurrentConfig,
+								})}>
+								<Check className="size-3" />
+							</div>
+							<StandardTooltip content={pinned ? t("chat:unpin") : t("chat:pin")}>
+								<Button
+									variant="ghost"
+									size="icon"
+									onClick={(e) => {
+										e.stopPropagation()
+										togglePinnedApiConfig(value)
+										vscode.postMessage({
+											type: "toggleApiConfigPin",
+											text: value,
+										})
+									}}
+									className={cn("size-5", {
+										"hidden group-hover:flex": !pinned,
+										"bg-accent": pinned,
+									})}>
+									<Pin className="size-3 p-0.5 opacity-50" />
+								</Button>
+							</StandardTooltip>
+						</div>
+					</div>
+				)
+			},
+			[listApiConfigMeta, currentApiConfigName, t, togglePinnedApiConfig],
+		)
+
 		// Helper function to render non-edit mode controls
 		const renderNonEditModeControls = () => (
 			<div className={cn("flex", "justify-between", "items-center", "mt-auto")}>
 				<div className={cn("flex", "items-center", "gap-1", "min-w-0")}>
 					<div className="shrink-0">{renderModeSelector()}</div>
 
 					<div className={cn("flex-1", "min-w-0", "overflow-hidden")}>
-						<ApiConfigSelector
+						<SelectDropdown
 							value={currentConfigId}
-							displayName={displayName}
 							disabled={selectApiConfigDisabled}
 							title={t("chat:selectApiConfig")}
+							disableSearch={false}
+							placeholder={displayName}
+							options={getApiConfigOptions}
 							onChange={handleApiConfigChange}
 							triggerClassName="w-full text-ellipsis overflow-hidden"
-							listApiConfigMeta={listApiConfigMeta || []}
-							pinnedApiConfigs={pinnedApiConfigs}
-							togglePinnedApiConfig={togglePinnedApiConfig}
+							itemClassName="group"
+							renderItem={renderApiConfigItem}
 						/>
 					</div>
 				</div>