AI 模型選擇器
模型下拉選擇器：能力星級、速度/成本徽章與推薦籤。
AI 應用的模型切換下拉選單：每個選項列出提供者色塊、智力星級、速度閃電與成本 $ 徽章，可標示「推薦」籤，選中項打勾、面板以 spring 開合，並支援完整鍵盤操作。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
280
<AiModelPicker />
安裝
npx shadcn@latest add https://webberui.com/r/ai-model-picker.json或在 components.json 設定 registries 後，改用 @webberui/ai-model-picker 安裝。
安裝依賴後，從 registry JSON（/r/ai-model-picker.json 的 files[0].content）複製 ai-model-picker.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion lucide-react clsx tailwind-merge使用
import { AiModelPicker, type AiModel } from "@/components/ui/ai-model-picker";
const models: AiModel[] = [
{
id: "aurora-pro",
name: "Aurora Pro",
provider: "Auralab",
intelligence: 4,
speed: 2,
cost: 2,
recommended: true,
description: "智力與速度的最佳平衡",
},
{
id: "swift-mini",
name: "Swift Mini",
provider: "Swiftware",
intelligence: 3,
speed: 3,
cost: 1,
},
];
<AiModelPicker
models={models}
defaultValue="aurora-pro"
onChange={(model) => console.log(model.id)}
/>Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
models | AiModel[] | — | 可選擇的模型清單 |
value | string | — | 受控模式：目前選中的模型 id |
defaultValue | string | — | 非受控模式：預設選中的模型 id |
onChange | (model: AiModel) => void | — | 選擇變更時回呼，帶入完整模型物件 |
placeholder | string | "選擇模型" | 尚未選擇任何模型時，觸發鈕顯示的文字 |
maxHeight | number | 280 | 下拉面板的最大高度（px），超出時面板內部捲動 |
className | string | — | 透傳到最外層容器，經 cn() 合併 |
AiModel
| 欄位 | 型別 | 預設值 | 說明 |
|---|---|---|---|
id | string | — | 唯一識別碼，作為選擇值使用 |
name | string | — | 模型顯示名稱 |
provider | string | — | 提供者名稱，顯示於名稱下方並用於色塊配色 |
hue | number | 依 provider 推導 | 提供者色塊的色相（0–360） |
intelligence | number | — | 智力星級（1–5，以星星呈現） |
speed | number | — | 速度等級（1–3，以閃電呈現） |
cost | number | — | 成本等級（1–3，以 $ 呈現） |
description | string | — | 一行簡短描述，顯示於選項列 |
recommended | boolean | false | 是否顯示「推薦」籤 |
可及性
- 觸發鈕標記
aria-haspopup="listbox"與aria-expanded，面板為role="listbox"；開啟後焦點移入面板，關閉時焦點回到觸發鈕 - 完整鍵盤支援：↑/↓ 開啟並移動反白、Home/End 跳至首尾、Enter/Space 選取、Esc 關閉、Tab 收合離開
aria-activedescendant指向目前反白選項，選中項標記aria-selected，輔助科技可正確朗讀- 星級與徽章以
role="img"搭配「智力 4/5」等文字標籤朗讀，個別圖示對輔助科技隱藏（aria-hidden） - 使用者系統開啟「減少動態效果」時，面板退化為單純淡入淡出，箭頭與打勾不做彈跳動畫