Model Selector

import { Canvas, Controls, Meta, Title } from '@storybook/addon-docs/blocks';

import * as ModelSelectorStories from './ModelSelector.stories';

<Meta of={ModelSelectorStories} name='Usage' />

<Title />

## Purpose

Lets the user pick which model or agent answers.

## Usage

Use it in the toolbar of a chat input, next to the voice and Send buttons.

- The trigger shows the selected model's name and has no fill in any state. Hover, press and open show in the text color, not a background.
- The selected model has a check in the menu.
- Keep names short; use `description` only when the choice needs explaining. Option icons use the PDS icon set (`sparklesSolid` from the Icon proposal isn't in the menu item type yet).
- Each option's `description` shows under its name in the menu.
- It is controlled: pass `value` and update it in `onValueChange`.
- Disable an option with `disabled` rather than removing it, so the list stays predictable.

## Implementation

See the table below for the available props. The other stories show the sizes and options with icons and descriptions.

<hr />

<Canvas of={ModelSelectorStories.Default} />
<Controls of={ModelSelectorStories.Default} />