Todos los componentes (204)

Selector de motor

IA · ModelSelector · .amset-modelpicker

Qué es y cuándo usarlo

Con qué se atiende lo siguiente: el motor y, dentro de él, el modelo. Un botón con la elección actual («Auto», «Claude», «Claude · Opus 5») que abre un panel con dos filas de opciones.

Cuándo usarlo

Junto a la caja de un chat con un asistente que puede atender con varios motores o modelos.
Cuando qué motores están encendidos cambia a cada rato (una máquina se apaga, falta una clave) y hay que enseñarlo.

Cuándo no

Para elegir un valor cualquiera de una lista: es un Select.
Para un ajuste que se fija una vez en preferencias y no se toca más.

Teclado: el botón abre el panel con Intro o Espacio y Escape lo cierra devolviendo el foco. Cada fila es un grupo de radio de verdad: las flechas cambian la opción y Tab pasa del motor al modelo. Elegir no cierra el panel, porque se suele tocar los dos.

Accesibilidad: un motor apagado se ve apagado y dice su motivo con texto («No disponible: Falta tu clave»), no solo con el color. Si lo que está elegido es un motor que se ha apagado, el botón se marca y el panel lo avisa como alerta. Mientras se pide el catálogo (loading) el panel va ocupado y lo dice. Un motor o modelo que ya no está en el catálogo sigue apareciendo con su clave en el botón, no desaparece en silencio.

Aspecto fino: variable CSS --amset-modelpicker-max-models (alto máximo de la fila de modelos antes de desplazarse). Es de presentación pura: el catálogo y la elección los pone quien lo usa.

Cómo se ve

Responderá: Claude · Opus 5

<ModelSelector
  providers={[
    { key: "claude", label: "Claude", models: [{ key: "opus", label: "Opus 5" }, { key: "sonnet", label: "Sonnet 5" }] },
    { key: "chatgpt", label: "ChatGPT", available: false, unavailableReason: "Falta entrar en tu cuenta", models: [] },
  ]}
  value={eleccion}
  onChange={setEleccion}
  placement="bottom-start"
/>

Props

Se importa con import { ModelSelector } from '@amset/ui'. Las obligatorias van marcadas.

Prop	Tipo	Para qué sirve
`onChange`obligatoria	`(value: ModelSelection) => void`	—
`providers`obligatoria	`readonly ModelProvider[]`	—
`value`obligatoria	`ModelSelection`	—
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`disabled`	`boolean`	—
`icon`	`ReactNode`	Lo que va a la izquierda del texto del botón. Por defecto, el icono del cerebro.
`loading`	`boolean`	Se está pidiendo el catálogo: un anillo junto al título y el panel ocupado.
`maxFixes`	`number`	Cuantos enlaces de arreglo se ensenan como mucho («Poner la clave de...»). Por defecto, todos los que haya.
`onFix`	`(provider: string) => void`	Se llama al pulsar el enlace de arreglo de un motor apagado, y el panel se cierra.
`onOpenChange`	`(open: boolean) => void`	—
`open`	`boolean`	—
`placement`	`Placement`	—
`width`	`string`	Ancho del panel. Por defecto 21 rem, y nunca más que la pantalla.

Acepta además los atributos del elemento que pinta: className, style, data-*, aria-* y sus eventos.

Mandos

Estas variables CSS son la forma de adaptarlo. Se declaran sobre el selector del componente, no en :root: la hoja las redeclara en la propia regla y una declaración en el mismo elemento gana siempre.

Variable	Por defecto
`--amset-modelpicker-max-models`	`11rem`

Cómo se cambia

.amset-modelpicker {
  --amset-modelpicker-max-models: ...;
}

En el banco de pruebas

Cada estado y cada variante, para tocarlos de uno en uno, en su ficha de ui.amset.tech: