model-picker

1"use client";
2 
3import { memo, useCallback, useState } from "react";
4import { IconCheck, IconChevronDown } from "@tabler/icons-react";
5import type { ModelOption } from "../types";
6import { cn } from "../utils/cn";
7import { Popover } from "./popover";
8 
9export type ModelPickerProps = {
10  models: ModelOption[];
11  value?: string;
12  defaultValue?: string;
13  onChange?: (modelId: string) => void;
14  placeholder?: string;
15  className?: string;
16};
17 
18export const ModelPicker = memo(function ModelPicker({
19  models,
20  value,
21  defaultValue,
22  onChange,
23  placeholder = "Auto",
24  className,
25}: ModelPickerProps) {
26  const isControlled = value !== undefined;
27  const [internalValue, setInternalValue] = useState(defaultValue);
28  const activeId = isControlled ? value : internalValue;
29  const activeModel = models.find((m) => m.id === activeId) ?? models[0];
30  const [open, setOpen] = useState(false);
31 
32  const handleSelect = useCallback(
33    (id: string) => {
34      if (!isControlled) setInternalValue(id);
35      onChange?.(id);
36      setOpen(false);
37    },
38    [isControlled, onChange],
39  );
40 
41  return (
42    <Popover
43      open={open}
44      onOpenChange={setOpen}
45      side="top"
46      align="start"
47      trigger={
48        <button
49          type="button"
50          className={cn(
51            "inline-flex h-7 items-center gap-1 rounded-[6px] px-2 text-[12px] leading-4 text-foreground/40 transition-colors hover:bg-foreground/6 cursor-pointer",
52            className,
53          )}
54          aria-label="Select model"
55        >
56          <span className="font-medium">
57            {activeModel?.name ?? placeholder}
58          </span>
59          {activeModel?.version && (
60            <span className="font-normal text-foreground/25">
61              {activeModel.version}
62            </span>
63          )}
64          <IconChevronDown className="size-3 text-foreground/40" />
65        </button>
66      }
67    >
68      {models.map((model) => {
69        const isActive = model.id === activeModel?.id;
70        return (
71          <button
72            key={model.id}
73            type="button"
74            onClick={() => handleSelect(model.id)}
75            className={cn(
76              "flex w-full items-center gap-2 rounded-[6px] px-2 py-1.5 text-left text-[12px] leading-4 text-an-foreground transition-colors hover:bg-foreground/6 cursor-pointer",
77              isActive && "bg-foreground/6",
78            )}
79          >
80            <span className="flex-1 truncate">
81              {model.name}
82// … truncated