ModelPicker

Agent chat · src/components/ModelPicker/ModelPicker.tsx

Chooses which model answers, by asking what the person does and what they want.

Profession and task first, models second. A flat list of model names asks somebody to already know which is good at what, which is the knowledge they came here without.

Redrob Auto is a real option rather than a hidden default, and it says what it will do: read each message after Send, pick the highest-ranked model that runs here, and name the one that answered. A router nobody can see is a router nobody can check.

Picks that run in another product are shown greyed rather than hidden, with the reason. Hiding them would make the ranking look shorter than it is; showing them selectable would offer something that cannot work here.

Prices are converted into the reader's likely currency and rounded to that currency's step, because ₩13,247 claims a precision the exchange rate does not have.

Import

import { ModelPicker } from '@redrob-labs/ui';

Rendered

The design system's own preview case, run against this package's build. The parity gate compares this rendering to the reference bundle's.

Props

Prop	Type	Notes
`professions`	`ModelProfession[]`
`limit`	`number`	How many ranked picks to show. Five by default.
`locale`	`string`
`currency`	`string`	Currency the prices are given in.
`rates`	`Record<string, number>`	Conversion rates from the base currency.
`currencyByLang`	`Record<string, string>`
`auto`	`boolean`	Offer Redrob Auto.
`here`	`string`	The product this picker sits in. Picks from elsewhere are shown but not selectable.
`value`	`string \| null`
`defaultValue`	`string \| null`
`defaultOpen`	`boolean`
`defaultProfession`	`string`
`defaultTask`	`string`
`task`	`string`
`matchedTask`	`string`	Which task Auto matched the last message to.
`source`	`{ name?: string; edition?: string; note?: string }`	Where the ranking came from.
`basis`	`React.ReactNode`	How the ranking and pricing work. Rendered in a details block.
`label`	`string`
`professionLabel`	`string`
`taskLabel`	`string`
`autoTaskLabel`	`string`
`autoLabel`	`string`
`autoText`	`string`
`autoTaskText`	`string`
`autoPickLabel`	`string`
`matchedLabel`	`string`
`awayLabel`	`string`
`awayNote`	`string`
`backLabel`	`React.ReactNode`
`guideLabel`	`React.ReactNode`
`guideHref`	`string`
`basisLabel`	`React.ReactNode`
`perLabel`	`React.ReactNode`
`placement`	`string`
`align`	`string`
`className`	`string`
`onChange`	`( pick: ModelPick \| null, context: { profession: ModelProfession; task: ModelTask; taskMode?: string }, ) => void`
`onTaskChange`	`(id: string, profession: ModelProfession) => void`
`onOpenGuide`	`(task: ModelTask, profession: ModelProfession) => void`

Exported types

ModelPick, ModelTask, ModelProfession