Model Selector

1'use client';
2 
3import { useState } from 'react';
4import { cn } from '@/lib/utils';
5import type { ModelOption } from './types';
6 
7export type ModelSelectorVariant = 'List' | 'Segmented';
8 
9export interface ModelSelectorProps {
10  models: ModelOption[];
11  value?: string;
12  onChange?: (id: string) => void;
13  variant?: ModelSelectorVariant;
14  className?: string;
15}
16 
17export function ModelSelector({
18  models,
19  value: valueProp,
20  onChange,
21  variant = 'List',
22  className,
23}: ModelSelectorProps) {
24  const [valueState, setValueState] = useState(models.find((m) => !m.disabled)?.id);
25  const value = valueProp !== undefined ? valueProp : valueState;
26 
27  function select(id: string) {
28    setValueState(id);
29    onChange?.(id);
30  }
31 
32  if (variant === 'Segmented') {
33    const enabled = models.filter((model) => !model.disabled);
34    const activeIndex = Math.max(0, enabled.findIndex((model) => model.id === value));
35    return (
36      <div
37        role="radiogroup"
38        aria-label="Model"
39        className={cn(
40          'relative isolate grid w-fit grid-flow-col auto-cols-fr rounded-lg bg-black/[0.04] p-0.5 dark:bg-white/[0.05]',
41          className,
42        )}
43      >
44        <span
45          aria-hidden
46          className="absolute inset-y-0.5 left-0.5 -z-10 rounded-[7px] bg-white shadow-xs transition-transform duration-200 ease-[cubic-bezier(0.23,1,0.32,1)] dark:bg-neutral-800"
47          style={{
48            width: `calc((100% - 4px) / ${enabled.length})`,
49            transform: `translateX(${activeIndex * 100}%)`,
50          }}
51        />
52        {enabled.map((model) => {
53          const active = model.id === value;
54          return (
55            <button
56              key={model.id}
57              type="button"
58              role="radio"
59              aria-checked={active}
60              onClick={() => select(model.id)}
61              className={cn(
62                'whitespace-nowrap rounded-[7px] px-3 py-1.5 font-mono text-[11.5px] transition-[color,transform] duration-150 active:scale-[0.96]',
63                'focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-neutral-400',
64                active
65                  ? 'font-medium text-neutral-900 dark:text-neutral-50'
66                  : 'text-neutral-500 hover:text-neutral-800 dark:text-neutral-400 dark:hover:text-neutral-200',
67              )}
68            >
69              {model.name}
70            </button>
71          );
72        })}
73      </div>
74    );
75  }
76 
77  return (
78// … truncated