Model Selector

1import type { SelectProps } from "@radix-ui/react-select";
2import type { ElementType, SVGProps } from "react";
3import {
4	Select,
5	SelectContent,
6	SelectItem,
7	SelectTrigger,
8	SelectValue,
9} from "@/components/ui/select";
10 
11export const MODELS = [
12	"deepseek-chat",
13	"deepseek-r1-distill-llama-70b",
14	"llama-3.3-70b-versatile",
15	"llama-3.1-8b-instant",
16	"gpt-4o",
17	"gpt-4o-mini",
18] as const;
19 
20export type Model = (typeof MODELS)[number];
21 
22interface ModelSelectorProps extends SelectProps {
23	value: string;
24	onChange: (value: Model) => void;
25	disabledModels?: Model[];
26}
27 
28export function ModelSelector({
29	value,
30	onChange,
31	disabledModels,
32	...props
33}: ModelSelectorProps) {
34	return (
35		<Select value={value} onValueChange={onChange} {...props}>
36			<SelectTrigger className="w-full nodrag">
37				<SelectValue placeholder="Select model" />
38			</SelectTrigger>
39			<SelectContent>
40				{MODELS.map((model) => {
41					const Icon = ModelIcons[model];
42					return (
43						<SelectItem
44							key={model}
45							value={model}
46							disabled={disabledModels?.includes(model)}
47						>
48							<div className="flex items-center gap-2">
49								<Icon className="h-4 w-4" />
50								<span>{model}</span>
51							</div>
52						</SelectItem>
53					);
54				})}
55			</SelectContent>
56		</Select>
57	);
58}
59 
60// Icons obtained from https://svgl.app/
61 
62const Groq = (props: SVGProps<SVGSVGElement>) => (
63	<svg
64		xmlns="http://www.w3.org/2000/svg"
65		viewBox="0 0 201 201"
66		width="1em"
67		height="1em"
68		{...props}
69	>
70		<title>Groq</title>
71		<path fill="#F54F35" d="M0 0h201v201H0V0Z" />
72		<path
73			fill="#FEFBFB"
74// … truncated