对话输入框
胶囊输入：型号单选 + 努力滑条，状态栏挂在输入框下方。models / 状态文案均可配置。
胶囊输入：通过 models、defaultModelId、placeholder、branch / project / agentMode / contextPct 配置型号菜单与状态栏。预览是同一 Composer 的不同 props，不是写死控件。
主要项目海
智能体57%
安装
npx @joyui/cli add composer --yes或通过 JoyUI MCP / CLI 安装。
应用场景
AI 聊天页底部输入条：把 models 换成你们的网关型号列表，状态栏绑定当前 git 分支与项目名。
<Composer
models={[
{ id: "gpt-5.6-sol", name: "GPT-5.6 Sol" },
{ id: "fable-5", name: "Fable 5" },
]}
defaultModelId="fable-5"
branch="主要"
project="项目海"
contextPct={57}
/>API
Composer
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| models | 型号列表。 | ComposerModel[] | — | 内置 |
| defaultModelId | 默认型号。 | string | — | fable-5 |
| placeholder | 占位。 | string | — | 有什么问题就问我 |
| branch | 分支名。 | string | — | 主要 |
| project | 项目名。 | string | — | 项目海 |
| contextPct | 上下文占比。 | number | 0–100 | 57 |
| className | 合并到根节点的额外类名。 | string | — | — |
ComposerModel
| 字段 | 说明 | 类型 | 必填 | 示例 |
|---|---|---|---|---|
| id | 型号 id。 | string | 是 | "fable-5" |
| name | 展示名。 | string | 是 | "Fable 5" |