Selector de modelo.

<div class="ui-sample ui-ai" data-model-selector="true"><label for="model-0">Modelo</label><select class="input" id="model-0"><option>Rápido · consultas breves</option><option selected="">Analítico · evidencia y archivos</option><option>Local · datos reservados</option></select><p>Cita la fuente de cada cifra y usa hasta 32.000 tokens por consulta.</p></div>

<div class="ui-sample ui-ai border border-slate-300 bg-white p-4 text-slate-950" data-model-selector="true"><label for="model-0">Modelo</label><select class="input border border-slate-400 bg-white px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2" id="model-0"><option>Rápido · consultas breves</option><option selected="">Analítico · evidencia y archivos</option><option>Local · datos reservados</option></select><p>Cita la fuente de cada cifra y usa hasta 32.000 tokens por consulta.</p></div>

import type { ChangeEventHandler } from "react";

export interface ModelSelectorOption {
  /** Nombre del modelo («Analítico»). */
  label: string;
  /** Para qué sirve, tras el nombre y un punto medio («evidencia y archivos»). */
  description?: string;
  /** Valor enviado; si falta, se envía el texto visible de la opción. */
  value?: string;
  disabled?: boolean;
}

export interface ModelSelectorProps {
  /** Etiqueta visible del selector. */
  label?: string;
  /** Id del selector. Usa uno distinto por selector en la página. */
  id?: string;
  /** Nombre del parámetro enviado con el modelo; sin él, el formulario nativo no envía este campo. */
  name?: string;
  /** Modelos disponibles, en el orden en que se muestran; sin opciones no se renderiza nada. */
  options?: ModelSelectorOption[];
  /** Modelo inicial de un selector no controlado: el `value` de la opción o su texto visible completo. */
  defaultValue?: string;
  /** Modelo de un selector controlado, con el mismo formato que `defaultValue`; va junto con `onChange`. */
  value?: string;
  onChange?: ChangeEventHandler<HTMLSelectElement>;
  disabled?: boolean;
  /** Datos que usa, costo o límite del modelo elegido, bajo el selector; vacío lo oculta. */
  description?: string;
  className?: string;
}

const MODEL_SELECTOR_OPTIONS: ModelSelectorOption[] = [
  { label: "Rápido", description: "consultas breves" },
  { label: "Analítico", description: "evidencia y archivos" },
  { label: "Local", description: "datos reservados" },
];

/**
 * Selector del modelo de IA que ejecutará una consulta, con el uso de cada opción y una nota sobre datos, costo o límites; se usa junto al campo de la instrucción, antes de enviarla.
 *
 * Usa `<select>` nativo: funciona sin JavaScript. El selector es controlado sólo si llegan `value` y `onChange`.
 *
 * @example <ModelSelector id="modelo" name="modelo" options={[{ label: "Rápido", description: "consultas breves", value: "rapido" }, { label: "Analítico", description: "evidencia y archivos", value: "analitico" }]} defaultValue="analitico" />
 * @example <ModelSelector id="modelo" value={modelo} onChange={elegirModelo} description="Usará hasta 32.000 tokens." />
 */
export function ModelSelector({
  label = "Modelo",
  id = "model-0",
  name,
  options = MODEL_SELECTOR_OPTIONS,
  defaultValue = "Analítico · evidencia y archivos",
  value,
  onChange,
  disabled,
  description = "Cita la fuente de cada cifra y usa hasta 32.000 tokens por consulta.",
  className,
}: ModelSelectorProps) {
  if (!options.length) return null;
  const controlado = value !== undefined && onChange !== undefined;
  return (
    <div className={["ui-ai", className].filter(Boolean).join(" ")} data-model-selector>
      <label htmlFor={id}>{label}</label>
      <select className="input" id={id} name={name} disabled={disabled} {...(controlado ? { value, onChange } : { defaultValue: value ?? defaultValue })}>
        {options.map((opcion, i) => (
          <option key={opcion.value ?? `${i}-${opcion.label}`} value={opcion.value} disabled={opcion.disabled}>
            {opcion.description ? `${opcion.label} · ${opcion.description}` : opcion.label}
          </option>
        ))}
      </select>
      {description ? <p>{description}</p> : null}
    </div>
  );
}