Spaces:
No application file
No application file
File size: 2,622 Bytes
0cd248c | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 | "use client"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Badge } from "@/components/ui/badge"
import type { AIProvider } from "@/types/chat"
interface ProviderSelectorProps {
selected: AIProvider
onSelect: (provider: AIProvider) => void
selectedModel?: string
onModelSelect?: (model: string) => void
}
const providers = [
{
id: "openai" as AIProvider,
name: "OpenAI",
badge: "GPT-4",
models: ["gpt-4o", "gpt-4o-mini", "gpt-4-turbo", "gpt-3.5-turbo"],
},
{
id: "openrouter" as AIProvider,
name: "OpenRouter",
badge: "Multi-Model",
models: ["openai/gpt-4o", "anthropic/claude-3.5-sonnet", "meta-llama/llama-3.1-405b", "google/gemini-pro-1.5"],
},
{
id: "groq" as AIProvider,
name: "Groq",
badge: "Fast",
models: ["llama-3.1-70b-versatile", "llama-3.1-8b-instant", "mixtral-8x7b-32768"],
},
{
id: "grok" as AIProvider,
name: "Grok",
badge: "xAI",
models: ["grok-beta", "grok-vision-beta"],
},
]
export function ProviderSelector({ selected, onSelect, selectedModel, onModelSelect }: ProviderSelectorProps) {
const currentProvider = providers.find((p) => p.id === selected)
return (
<div className="flex items-center gap-3">
<span className="text-sm font-medium">AI Provider:</span>
<Select value={selected} onValueChange={onSelect}>
<SelectTrigger className="w-48">
<SelectValue />
</SelectTrigger>
<SelectContent>
{providers.map((provider) => (
<SelectItem key={provider.id} value={provider.id}>
<div className="flex items-center gap-2">
<span>{provider.name}</span>
<Badge variant="secondary" className="text-xs">
{provider.badge}
</Badge>
</div>
</SelectItem>
))}
</SelectContent>
</Select>
{onModelSelect && currentProvider && (
<>
<span className="text-sm font-medium">Model:</span>
<Select value={selectedModel || currentProvider.models[0]} onValueChange={onModelSelect}>
<SelectTrigger className="w-64">
<SelectValue />
</SelectTrigger>
<SelectContent>
{currentProvider.models.map((model) => (
<SelectItem key={model} value={model}>
<span className="font-mono text-sm">{model}</span>
</SelectItem>
))}
</SelectContent>
</Select>
</>
)}
</div>
)
}
|