# 会话与输入 (/docs/components/conversation)

会话与输入是 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 |

## 消息气泡 [#消息气泡]

用户消息用气泡，助手回复不加底色，直接铺在画布上。

<D.Bubbles />

## 思考折叠面板 [#思考折叠面板]

模型思考时显示计时和三点波浪，结束后折叠，可以点开看全文。

<D.Thinking />

## 输入框 [#输入框]

输入框是界面里圆角最大的元素，2.0 从 20px 收到 14px。

<D.Composer />

## 指令与引用输入 [#指令与引用输入]

输入 / 唤出指令，输入 @ 引用文件；中文输入法选词时按 Enter 不会误发送。

<D.RichComposer />

## 模型切换与 Token 仪表盘 [#模型切换与-token-仪表盘]

模型下拉旁边有一个环形仪表盘，按上下文用量显示进度，并区分缓存读取和写入。

<D.ModelGauge />

## MCP 工具决策卡片 [#mcp-工具决策卡片]

代理通过 MCP 调用工具前会弹出授权卡片，状态从等待批准走到运行中，再到成功、拒绝或失败。

<D.McpCard />

## 怎么在项目里使用？ [#怎么在项目里使用]

复制 [code-examples/](https://github.com/Caho1/open-claude-ui/blob/main/code-examples) 里对应的文件，并引入 `cds-theme.css`。例如：

```tsx
import { ChatComposer } from './ChatComposer';

<ChatComposer onSendMessage={(text) => console.log(text)} />
```

## 相关页面 [#相关页面]

- [基础原子组件](/docs/components/atoms)
- [动效与光影](/docs/components/motion)
- [v1 第三篇](/docs/v1/03)
- [全部 Open Claude UI 组件演示](/docs/components)