feat(llm): expand LLM provider options and improve model selection UI

- Added new LLM providers including Google, Azure OpenAI, Bedrock, and others to the backend.
- Updated the model selection UI to dynamically display available models based on the selected provider.
- Enhanced the provider change handling to reset the model selection when the provider is changed.
- Improved the overall user experience by providing contextual information for model selection.

surfsense_web/components/onboard/add-provider-step.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { AlertCircle, Bot, Plus, Trash2 } from "lucide-react";
+import { AlertCircle, Bot, Check, ChevronsUpDown, Plus, Trash2 } from "lucide-react";
 import { motion } from "motion/react";
 import { useTranslations } from "next-intl";
 import { useState } from "react";
@@ -9,8 +9,17 @@ import { Alert, AlertDescription } from "@/components/ui/alert";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+	Command,
+	CommandEmpty,
+	CommandGroup,
+	CommandInput,
+	CommandItem,
+	CommandList,
+} from "@/components/ui/command";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import {
 	Select,
 	SelectContent,
@@ -19,8 +28,10 @@ import {
 	SelectValue,
 } from "@/components/ui/select";
 import { LANGUAGES } from "@/contracts/enums/languages";
+import { getModelsByProvider, LLM_MODELS } from "@/contracts/enums/llm-models";
 import { LLM_PROVIDERS } from "@/contracts/enums/llm-providers";
 import { type CreateLLMConfig, useLLMConfigs } from "@/hooks/use-llm-configs";
+import { cn } from "@/lib/utils";
 
 import InferenceParamsEditor from "../inference-params-editor";
 
@@ -50,6 +61,7 @@ export function AddProviderStep({
 		search_space_id: searchSpaceId,
 	});
 	const [isSubmitting, setIsSubmitting] = useState(false);
+	const [modelComboboxOpen, setModelComboboxOpen] = useState(false);
 
 	const handleInputChange = (field: keyof CreateLLMConfig, value: string) => {
 		setFormData((prev) => ({ ...prev, [field]: value }));
@@ -85,11 +97,18 @@ export function AddProviderStep({
 	};
 
 	const selectedProvider = LLM_PROVIDERS.find((p) => p.value === formData.provider);
+	const availableModels = formData.provider ? getModelsByProvider(formData.provider) : [];
 
 	const handleParamsChange = (newParams: Record<string, number | string>) => {
 		setFormData((prev) => ({ ...prev, litellm_params: newParams }));
 	};
 
+	// Reset model when provider changes
+	const handleProviderChange = (value: string) => {
+		handleInputChange("provider", value);
+		setFormData((prev) => ({ ...prev, model_name: "" }));
+	};
+
 	return (
 		<div className="space-y-6">
 			{/* Info Alert */}
@@ -182,14 +201,11 @@ export function AddProviderStep({
 
 								<div className="space-y-2">
 									<Label htmlFor="provider">{t("provider_required")}</Label>
-									<Select
-										value={formData.provider}
-										onValueChange={(value) => handleInputChange("provider", value)}
-									>
+									<Select value={formData.provider} onValueChange={handleProviderChange}>
 										<SelectTrigger>
 											<SelectValue placeholder={t("provider_placeholder")} />
 										</SelectTrigger>
-										<SelectContent>
+										<SelectContent className="max-h-[300px]">
 											{LLM_PROVIDERS.map((provider) => (
 												<SelectItem key={provider.value} value={provider.value}>
 													{provider.label}
@@ -235,18 +251,95 @@ export function AddProviderStep({
 
 							<div className="space-y-2">
 								<Label htmlFor="model_name">{t("model_name_required")}</Label>
-								<Input
-									id="model_name"
-									placeholder={selectedProvider?.example || t("model_name_placeholder")}
-									value={formData.model_name}
-									onChange={(e) => handleInputChange("model_name", e.target.value)}
-									required
-								/>
-								{selectedProvider && (
-									<p className="text-xs text-muted-foreground">
-										{t("examples")}: {selectedProvider.example}
-									</p>
-								)}
+								<Popover open={modelComboboxOpen} onOpenChange={setModelComboboxOpen}>
+									<PopoverTrigger asChild>
+										<Button
+											variant="outline"
+											role="combobox"
+											aria-expanded={modelComboboxOpen}
+											className="w-full justify-between font-normal"
+										>
+											<span className={cn(!formData.model_name && "text-muted-foreground")}>
+												{formData.model_name || t("model_name_placeholder")}
+											</span>
+											<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+										</Button>
+									</PopoverTrigger>
+									<PopoverContent className="w-full p-0" align="start" side="bottom">
+										<Command shouldFilter={false}>
+											<CommandInput
+												placeholder={
+													selectedProvider?.example ||
+													t("model_name_placeholder") ||
+													"Type model name..."
+												}
+												value={formData.model_name}
+												onValueChange={(value) => handleInputChange("model_name", value)}
+											/>
+											<CommandList>
+												<CommandEmpty>
+													<div className="py-2 text-center text-sm text-muted-foreground">
+														{formData.model_name
+															? `Using custom model: "${formData.model_name}"`
+															: "Type your model name above"}
+													</div>
+												</CommandEmpty>
+												{availableModels.length > 0 && (
+													<CommandGroup heading="Suggested Models">
+														{availableModels
+															.filter(
+																(model) =>
+																	!formData.model_name ||
+																	model.value
+																		.toLowerCase()
+																		.includes(formData.model_name.toLowerCase()) ||
+																	model.label
+																		.toLowerCase()
+																		.includes(formData.model_name.toLowerCase())
+															)
+															.map((model) => (
+																<CommandItem
+																	key={model.value}
+																	value={model.value}
+																	onSelect={(currentValue) => {
+																		handleInputChange("model_name", currentValue);
+																		setModelComboboxOpen(false);
+																	}}
+																	className="flex flex-col items-start py-3"
+																>
+																	<div className="flex w-full items-center">
+																		<Check
+																			className={cn(
+																				"mr-2 h-4 w-4 shrink-0",
+																				formData.model_name === model.value
+																					? "opacity-100"
+																					: "opacity-0"
+																			)}
+																		/>
+																		<div className="flex-1">
+																			<div className="font-medium">{model.label}</div>
+																			{model.contextWindow && (
+																				<div className="text-xs text-muted-foreground">
+																					Context: {model.contextWindow}
+																				</div>
+																			)}
+																		</div>
+																	</div>
+																</CommandItem>
+															))}
+													</CommandGroup>
+												)}
+											</CommandList>
+										</Command>
+									</PopoverContent>
+								</Popover>
+								<p className="text-xs text-muted-foreground">
+									{availableModels.length > 0
+										? `Type freely or select from ${availableModels.length} model suggestions`
+										: selectedProvider?.example
+											? `${t("examples")}: ${selectedProvider.example}`
+											: "Type your model name freely"}
+								</p>
 							</div>
 
 							<div className="space-y-2">

surfsense_web/components/settings/model-config-manager.tsx

@@ -38,6 +38,7 @@ import {
 	SelectValue,
 } from "@/components/ui/select";
 import { LANGUAGES } from "@/contracts/enums/languages";
+import { getModelsByProvider } from "@/contracts/enums/llm-models";
 import { LLM_PROVIDERS } from "@/contracts/enums/llm-providers";
 import { type CreateLLMConfig, type LLMConfig, useLLMConfigs } from "@/hooks/use-llm-configs";
 import InferenceParamsEditor from "../inference-params-editor";
@@ -93,12 +94,13 @@ export function ModelConfigManager({ searchSpaceId }: ModelConfigManagerProps) {
 		setFormData((prev) => ({ ...prev, [field]: value }));
 	};
 
-	// Handle provider change with auto-fill API Base URL / 处理 Provider 变更并自动填充 API Base URL
+	// Handle provider change with auto-fill API Base URL and reset model / 处理 Provider 变更并自动填充 API Base URL 并重置模型
 	const handleProviderChange = (providerValue: string) => {
 		const provider = LLM_PROVIDERS.find((p) => p.value === providerValue);
 		setFormData((prev) => ({
 			...prev,
 			provider: providerValue,
+			model_name: "", // Reset model when provider changes
 			// Auto-fill API Base URL if provider has a default / 如果提供商有默认值则自动填充
 			api_base: provider?.apiBase || prev.api_base,
 		}));
@@ -157,6 +159,7 @@ export function ModelConfigManager({ searchSpaceId }: ModelConfigManagerProps) {
 	};
 
 	const selectedProvider = LLM_PROVIDERS.find((p) => p.value === formData.provider);
+	const availableModels = formData.provider ? getModelsByProvider(formData.provider) : [];
 
 	const getProviderInfo = (providerValue: string) => {
 		return LLM_PROVIDERS.find((p) => p.value === providerValue);
@@ -530,17 +533,50 @@ export function ModelConfigManager({ searchSpaceId }: ModelConfigManagerProps) {
 
 						<div className="space-y-2">
 							<Label htmlFor="model_name">Model Name *</Label>
-							<Input
-								id="model_name"
-								placeholder={selectedProvider?.example || "e.g., gpt-4"}
-								value={formData.model_name}
-								onChange={(e) => handleInputChange("model_name", e.target.value)}
-								required
-							/>
-							{selectedProvider && (
-								<p className="text-xs text-muted-foreground">
-									Examples: {selectedProvider.example}
-								</p>
+							{availableModels.length > 0 ? (
+								<>
+									<Select
+										value={formData.model_name}
+										onValueChange={(value) => handleInputChange("model_name", value)}
+									>
+										<SelectTrigger>
+											<SelectValue placeholder="Select a model" />
+										</SelectTrigger>
+										<SelectContent className="max-h-[400px]">
+											{availableModels.map((model) => (
+												<SelectItem key={model.value} value={model.value}>
+													<div className="flex flex-col py-1">
+														<span className="font-medium">{model.label}</span>
+														{model.contextWindow && (
+															<span className="text-xs text-muted-foreground">
+																Context: {model.contextWindow}
+															</span>
+														)}
+													</div>
+												</SelectItem>
+											))}
+										</SelectContent>
+									</Select>
+									<p className="text-xs text-muted-foreground">
+										{availableModels.length} model{availableModels.length !== 1 ? "s" : ""}{" "}
+										available
+									</p>
+								</>
+							) : (
+								<>
+									<Input
+										id="model_name"
+										placeholder={selectedProvider?.example || "e.g., gpt-4"}
+										value={formData.model_name}
+										onChange={(e) => handleInputChange("model_name", e.target.value)}
+										required
+									/>
+									{selectedProvider && (
+										<p className="text-xs text-muted-foreground">
+											Examples: {selectedProvider.example}
+										</p>
+									)}
+								</>
 							)}
 						</div>
 

surfsense_web/components/ui/command.tsx

@@ -0,0 +1,160 @@
+"use client";
+
+import { Command as CommandPrimitive } from "cmdk";
+import { SearchIcon } from "lucide-react";
+import type * as React from "react";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogHeader,
+	DialogTitle,
+} from "@/components/ui/dialog";
+import { cn } from "@/lib/utils";
+
+function Command({ className, ...props }: React.ComponentProps<typeof CommandPrimitive>) {
+	return (
+		<CommandPrimitive
+			data-slot="command"
+			className={cn(
+				"bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
+				className
+			)}
+			{...props}
+		/>
+	);
+}
+
+function CommandDialog({
+	title = "Command Palette",
+	description = "Search for a command to run...",
+	children,
+	className,
+	showCloseButton = true,
+	...props
+}: React.ComponentProps<typeof Dialog> & {
+	title?: string;
+	description?: string;
+	className?: string;
+	showCloseButton?: boolean;
+}) {
+	return (
+		<Dialog {...props}>
+			<DialogHeader className="sr-only">
+				<DialogTitle>{title}</DialogTitle>
+				<DialogDescription>{description}</DialogDescription>
+			</DialogHeader>
+			<DialogContent
+				className={cn("overflow-hidden p-0", className)}
+				showCloseButton={showCloseButton}
+			>
+				<Command className="[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+					{children}
+				</Command>
+			</DialogContent>
+		</Dialog>
+	);
+}
+
+function CommandInput({
+	className,
+	...props
+}: React.ComponentProps<typeof CommandPrimitive.Input>) {
+	return (
+		<div data-slot="command-input-wrapper" className="flex h-9 items-center gap-2 border-b px-3">
+			<SearchIcon className="size-4 shrink-0 opacity-50" />
+			<CommandPrimitive.Input
+				data-slot="command-input"
+				className={cn(
+					"placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
+					className
+				)}
+				{...props}
+			/>
+		</div>
+	);
+}
+
+function CommandList({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.List>) {
+	return (
+		<CommandPrimitive.List
+			data-slot="command-list"
+			className={cn("max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto", className)}
+			{...props}
+		/>
+	);
+}
+
+function CommandEmpty({ ...props }: React.ComponentProps<typeof CommandPrimitive.Empty>) {
+	return (
+		<CommandPrimitive.Empty
+			data-slot="command-empty"
+			className="py-6 text-center text-sm"
+			{...props}
+		/>
+	);
+}
+
+function CommandGroup({
+	className,
+	...props
+}: React.ComponentProps<typeof CommandPrimitive.Group>) {
+	return (
+		<CommandPrimitive.Group
+			data-slot="command-group"
+			className={cn(
+				"text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
+				className
+			)}
+			{...props}
+		/>
+	);
+}
+
+function CommandSeparator({
+	className,
+	...props
+}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
+	return (
+		<CommandPrimitive.Separator
+			data-slot="command-separator"
+			className={cn("bg-border -mx-1 h-px", className)}
+			{...props}
+		/>
+	);
+}
+
+function CommandItem({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Item>) {
+	return (
+		<CommandPrimitive.Item
+			data-slot="command-item"
+			className={cn(
+				"data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+				className
+			)}
+			{...props}
+		/>
+	);
+}
+
+function CommandShortcut({ className, ...props }: React.ComponentProps<"span">) {
+	return (
+		<span
+			data-slot="command-shortcut"
+			className={cn("text-muted-foreground ml-auto text-xs tracking-widest", className)}
+			{...props}
+		/>
+	);
+}
+
+export {
+	Command,
+	CommandDialog,
+	CommandInput,
+	CommandList,
+	CommandEmpty,
+	CommandGroup,
+	CommandItem,
+	CommandShortcut,
+	CommandSeparator,
+};