Open Claude UI 组件演示
会话与输入
Open Claude UI 组件演示：消息气泡、思考折叠、输入框、模型切换、MCP 工具卡片（手册 v1 第三篇）。每个演示附规格和源码出处。
View as Markdown最后更新：
会话与输入是 Claude 对话界面的核心：消息气泡、思考过程折叠、输入框、斜杠指令与 @ 引用、模型切换，以及 MCP 工具调用的授权卡片。本页 6 个演示对应手册 v1 第三篇，输入框圆角按 2.0 的 14px 取值。
关键数值
| 项目 | 数值 | 出处 |
|---|---|---|
| 输入框圆角 | 2.0 舒适 14px · 紧凑 12px（1.x 为 20px） | v2/03 §3.3 |
| 思考展开方式 | CSS Grid 0fr → 1fr | v1/03 §3.2 |
| 输入法合成守卫 | compositionend 后 500ms 内忽略 Enter | v1/03 §3.3.2 |
| MCP 授权按钮 | 允许一次 / 始终允许 / 拒绝 | v1/03 §3.5 |
消息气泡
用户消息用气泡，助手回复不加底色，直接铺在画布上。
js
config.js
2 KB
帮我把这段配置改成 TypeScript，并解释一下每个字段。
10:24
Claudemodel-name•10:24
> 读取 config.js
> 推断字段类型
> 生成 TS 版本
下面是改好的版本。每个字段都加了类型，可选字段用了 `?`。
ts
export interface Config {
port: number;
host?: string;
}</>
config.ts
v1 • TypeScript 配置
思考折叠面板
模型思考时显示计时和三点波浪，结束后折叠，可以点开看全文。
Thinking…
先看清需求：要一个文档官网。
确认仓库组件的写法，再决定直接引入还是移植 CSS。
组件是 React + Tailwind，可以直接引入。
输入框
输入框是界面里圆角最大的元素，2.0 从 20px 收到 14px。
指令与引用输入
输入 / 唤出指令，输入 @ 引用文件；中文输入法选词时按 Enter 不会误发送。
模型切换与 Token 仪表盘
模型下拉旁边有一个环形仪表盘，按上下文用量显示进度，并区分缓存读取和写入。
MCP 工具决策卡片
代理通过 MCP 调用工具前会弹出授权卡片，状态从等待批准走到运行中，再到成功、拒绝或失败。
read_filemcp://filesystem
等待授权 (Pending)
2 fields
{
"path": "~/projects/app/README.md",
"encoding": "utf-8"
}怎么在项目里使用？
复制 code-examples/ 里对应的文件，并引入 cds-theme.css。例如：
import { ChatComposer } from './ChatComposer';
<ChatComposer onSendMessage={(text) => console.log(text)} />