"use client"; import * as React from "react"; import { Popover as PopoverPrimitive } from "radix-ui"; import { cn, useControllableState } from "@kineticui/core"; import { CheckIcon, ChevronDownIcon } from "@kineticui/icons"; export type ModelOption = { id: string; name: string; description?: string; /** e.g. "New", "Pro". */ badge?: string; /** 1–5 meters. */ speed?: number; intelligence?: number; icon?: React.ReactNode; disabled?: boolean; }; export type ModelSelectorProps = { models: ModelOption[]; value?: string; defaultValue?: string; onValueChange?: (id: string) => void; className?: string; }; function Meter({ label, value }: { label: string; value: number }) { return ( {label} {Array.from({ length: 5 }, (_, i) => ( ))} ); } /** Compact model picker for chat toolbars, with speed/intelligence meters. */ export function ModelSelector({ models, value, defaultValue, onValueChange, className }: ModelSelectorProps) { const [open, setOpen] = React.useState(false); const [current, setCurrent] = useControllableState({ value, defaultValue: defaultValue ?? models[0]?.id ?? "", onChange: onValueChange }); const sel = models.find((m) => m.id === current); return ( {sel?.icon} {sel?.name ?? "Model"} ); }

Model Selector

Installation

Exports