75 lines
2.2 KiB
TypeScript
75 lines
2.2 KiB
TypeScript
'use client';
|
|
|
|
import { Check, ChevronDown } from 'lucide-react';
|
|
import { startTransition, useMemo, useOptimistic, useState } from 'react';
|
|
|
|
import { models } from '@/ai/models';
|
|
import { saveModelId } from '@/app/(chat)/actions';
|
|
import { Button } from '@/components/ui/button';
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuTrigger,
|
|
} from '@/components/ui/dropdown-menu';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
export function ModelSelector({
|
|
selectedModelId,
|
|
className,
|
|
}: {
|
|
selectedModelId: string;
|
|
} & React.ComponentProps<typeof Button>) {
|
|
const [open, setOpen] = useState(false);
|
|
const [optimisticModelId, setOptimisticModelId] =
|
|
useOptimistic(selectedModelId);
|
|
|
|
const selectModel = useMemo(
|
|
() => models.find((model) => model.id === optimisticModelId),
|
|
[optimisticModelId]
|
|
);
|
|
|
|
return (
|
|
<DropdownMenu open={open} onOpenChange={setOpen}>
|
|
<DropdownMenuTrigger
|
|
asChild
|
|
className={cn(
|
|
'w-fit data-[state=open]:bg-accent data-[state=open]:text-accent-foreground md:h-8 [&>svg]:!size-5 md:[&>svg]:!size-4',
|
|
className
|
|
)}
|
|
>
|
|
<Button variant="ghost">
|
|
{selectModel?.label}
|
|
<ChevronDown className="text-muted-foreground" />
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="start" className="min-w-[300px]">
|
|
{models.map((model) => (
|
|
<DropdownMenuItem
|
|
key={model.id}
|
|
onSelect={() => {
|
|
setOpen(false);
|
|
|
|
startTransition(() => {
|
|
setOptimisticModelId(model.id);
|
|
saveModelId(model.id);
|
|
});
|
|
}}
|
|
className="gap-4 group/item"
|
|
data-active={model.id === optimisticModelId}
|
|
>
|
|
<div className="flex flex-col gap-1 items-start">
|
|
{model.label}
|
|
{model.description && (
|
|
<div className="text-xs text-muted-foreground">
|
|
{model.description}
|
|
</div>
|
|
)}
|
|
</div>
|
|
<Check className="size-4 ml-auto opacity-0 group-data-[active=true]/item:opacity-100" />
|
|
</DropdownMenuItem>
|
|
))}
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
);
|
|
}
|