{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "elements-model-picker",
  "type": "registry:component",
  "title": "Model picker",
  "description": "The full list rather than the rail: grouped by family, priced, with what each one can do.",
  "registryDependencies": [
    "https://r.assistant-ui.com/elements-surfaces.json"
  ],
  "dependencies": [
    "lucide-react"
  ],
  "files": [
    {
      "type": "registry:component",
      "path": "components/assistant-ui/elements/model-picker.tsx",
      "sourcePath": "packages/ui/src/components/react/assistant-ui/elements/model-picker.tsx",
      "content": "\"use client\";\n\nimport type { ComponentProps } from \"react\";\nimport { CheckIcon } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\nimport { field, mono, paper } from \"./surfaces\";\n\nexport interface PickableModel {\n  id: string;\n  name: string;\n  family: string;\n  context: string;\n  price: string;\n  capabilities: readonly string[];\n}\n\nexport function ModelPicker({\n  models,\n  selectedId,\n  onSelect,\n  className,\n  ...props\n}: Omit<\n  ComponentProps<\"div\">,\n  \"children\" | \"models\" | \"selectedId\" | \"onSelect\"\n> & {\n  models: readonly PickableModel[];\n  selectedId: string;\n  onSelect?: (id: string) => void;\n}) {\n  const families = [...new Set(models.map((model) => model.family))];\n\n  return (\n    <div\n      data-slot=\"model-picker\"\n      className={cn(\n        paper,\n        \"flex w-full max-w-sm flex-col gap-1 rounded-2xl p-2\",\n        className,\n      )}\n\n      {...props}\n    >\n      {families.map((family) => (\n        <div key={family} className=\"flex flex-col\">\n          <span className={cn(mono, \"text-foreground/30 px-2 pt-2 pb-1\")}>\n            {family}\n          </span>\n          {models\n            .filter((model) => model.family === family)\n            .map((model) => {\n              const selected = model.id === selectedId;\n              return (\n                <button\n                  key={model.id}\n                  type=\"button\"\n                  aria-pressed={selected}\n                  onClick={() => onSelect?.(model.id)}\n                  className={cn(\n                    \"flex items-center gap-2.5 rounded-xl px-2 py-2 text-start transition-colors\",\n                    selected\n                      ? \"bg-foreground/[0.06]\"\n                      : \"hover:bg-foreground/[0.035]\",\n                  )}\n                >\n                  <span className=\"flex size-3.5 shrink-0 items-center justify-center\">\n                    {selected && (\n                      <CheckIcon className=\"fade-in zoom-in-90 animate-in text-foreground/70 size-3.5 duration-200\" />\n                    )}\n                  </span>\n\n                  <span className=\"flex min-w-0 flex-1 flex-col gap-1\">\n                    <span className=\"truncate text-[13.5px]\">{model.name}</span>\n                    <span className=\"flex flex-wrap gap-1\">\n                      {model.capabilities.map((capability) => (\n                        <span\n                          key={capability}\n                          className={cn(\n                            field,\n                            mono,\n                            \"text-foreground/45 rounded px-1 py-px\",\n                          )}\n                        >\n                          {capability}\n                        </span>\n                      ))}\n                    </span>\n                  </span>\n\n                  <span className=\"flex shrink-0 flex-col items-end gap-1\">\n                    <span\n                      className={cn(mono, \"text-foreground/35 tabular-nums\")}\n                    >\n                      {model.context}\n                    </span>\n                    <span\n                      className={cn(mono, \"text-foreground/25 tabular-nums\")}\n                    >\n                      {model.price}\n                    </span>\n                  </span>\n                </button>\n              );\n            })}\n        </div>\n      ))}\n    </div>\n  );\n}\n"
    }
  ]
}