Skip to content

Commit 719dd5a

Browse files
gene9831gene9831
committed
docs(bubble): update Bubble component documentation with custom renderer usage and clarify fallback renderer configuration
1 parent 16bba0d commit 719dd5a

File tree

2 files changed

+20
-16
lines changed

2 files changed

+20
-16
lines changed

‎docs/src/components/bubble.md‎

Lines changed: 18 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,8 @@ Bubble 气泡组件用于展示消息气泡，支持流式文本、头像、位
6161

6262
Bubble 组件提供了 `markdown` 渲染器，可以渲染 markdown 内容。需要安装 `markdown-it` 和 `dompurify` 依赖
6363

64+
> BubbleList 使用自定义渲染器，需要使用 BubbleProvider 包裹，BubbleProvider 的详细 Props 信息请参考 [Props](#props)。
65+
6466
```bash
6567
# npm
6668
npm install markdown-it dompurify
@@ -188,8 +190,8 @@ Bubble 组件采用渲染器架构，支持灵活的内容渲染和自定义扩
188190

189191
渲染器配置支持三个层级，优先级从高到低：
190192

191-
1. **Prop 级别**：通过 `Bubble`、`BubbleList` 的 `fallback-box-renderer` 和 `fallback-content-renderer` 属性配置，只对当前组件生效
192-
2. **Provider 级别**：通过 `BubbleProvider` 的 `box-renderer-matches`、`content-renderer-matches` 和 fallback 属性配置，在整个组件树中生效
193+
1. **Prop 级别**：通过 `Bubble` 的 `fallback-box-renderer` 和 `fallback-content-renderer` 属性配置，只对当前组件生效
194+
2. **Provider 级别**：通过 `BubbleProvider` 的 `box-renderer-matches`、`content-renderer-matches`、 `fallback-box-renderer` 和 `fallback-content-renderer` 属性配置，在整个组件树中生效
193195
3. **Default 级别**：内置的默认渲染器和匹配规则
194196

195197
**设置 Fallback 渲染器**
@@ -376,16 +378,16 @@ Bubble 组件支持通过 `state` 属性存储 UI 相关的数据，并通过 `s
376378

377379
**BubbleListProps** - 气泡列表组件的属性配置
378380

379-
| 属性 | 类型 | 默认值 | 说明 |
380-
| ------------------- | ------------------------------------------------------------- | ------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
381-
| `messages` | `BubbleMessage[]` | - | **必填**，消息数组 |
381+
| 属性 | 类型 | 默认值 | 说明 |
382+
| ------------------- | ------------------------------------------------------------- | ------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
383+
| `messages` | `BubbleMessage[]` | - | **必填**，消息数组 |
382384
| `groupStrategy` | `'consecutive' \| 'divider' \| BubbleGroupFunction` | `'divider'` | 分组策略：<br/>- `'consecutive'`: 连续相同角色的消息合并为一组<br/>- `'divider'`: 按分割角色分组（每条分割角色消息单独成组，其他消息在两个分割角色之间合并为一组）<br/>- 自定义函数: `(messages, dividerRole?) => BubbleMessageGroup[]` |
383-
| `dividerRole` | `string` | `'user'` | `'divider'` 策略的分割角色，具有此角色的消息将作为分割线 |
384-
| `fallbackRole` | `string` | `'assistant'` | 当消息没有角色或角色为空时，使用此角色 |
385-
| `roleConfigs` | `Record<string, BubbleRoleConfig>` | - | 每个角色的默认配置项（头像、位置、形状等） |
386-
| `contentRenderMode` | `'single' \| 'split'` | - | 内容渲染模式 |
387-
| `contentResolver` | `(message: BubbleMessage) => ChatMessageContent \| undefined` | `(message) => message.content` | 内容解析函数，用于解析消息内容 |
388-
| `autoScroll` | `boolean` | `false` | 是否自动滚动到底部。需要满足以下条件：<br/>- BubbleList 是可滚动容器（需要 scrollHeight > clientHeight）<br/>- 滚动容器接近底部 |
385+
| `dividerRole` | `string` | `'user'` | `'divider'` 策略的分割角色，具有此角色的消息将作为分割线 |
386+
| `fallbackRole` | `string` | `'assistant'` | 当消息没有角色或角色为空时，使用此角色 |
387+
| `roleConfigs` | `Record<string, BubbleRoleConfig>` | - | 每个角色的默认配置项（头像、位置、形状等） |
388+
| `contentRenderMode` | `'single' \| 'split'` | - | 内容渲染模式 |
389+
| `contentResolver` | `(message: BubbleMessage) => ChatMessageContent \| undefined` | `(message) => message.content` | 内容解析函数，用于解析消息内容 |
390+
| `autoScroll` | `boolean` | `false` | 是否自动滚动到底部。需要满足以下条件：<br/>- BubbleList 是可滚动容器（需要 scrollHeight > clientHeight）<br/>- 滚动容器接近底部 |
389391

390392
**BubbleList Expose**
391393

@@ -630,11 +632,11 @@ type BubbleMessageGroup = {
630632
631633
**reasoning 推理**
632634
633-
| 变量名 | 说明 |
634-
| ------------------------------------------- | -------------------------------------------------- |
635-
| `--tr-bubble-reasoning-max-height` | 推理内容最大高度（默认 300px） |
636-
| `--tr-bubble-reasoning-side-border-width` | 推理内容左侧边线宽度（默认 1.5px） |
637-
| `--tr-bubble-reasoning-side-border-color` | 推理内容左侧边线颜色（默认使用 `--tr-border-color-disabled`） |
635+
| 变量名 | 说明 |
636+
| ----------------------------------------- | ------------------------------------------------------------- |
637+
| `--tr-bubble-reasoning-max-height` | 推理内容最大高度（默认 300px） |
638+
| `--tr-bubble-reasoning-side-border-width` | 推理内容左侧边线宽度（默认 1.5px） |
639+
| `--tr-bubble-reasoning-side-border-color` | 推理内容左侧边线颜色（默认使用 `--tr-border-color-disabled`） |
638640
639641
**BubbleList 容器变量**
640642

‎docs/src/tools/message.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -337,6 +337,8 @@ useMessage({
337337
pnpm add @modelcontextprotocol/sdk
338338
```
339339

340+
> 示例使用的 `SSEClientTransport` sse 协议，如果要使用 streamable 协议，直接替换成 `StreamableHTTPClientTransport` 即可。
341+
340342
```typescript
341343
// mcp-amap.ts
342344
import { Client } from '@modelcontextprotocol/sdk/client/index.js'

0 commit comments

Comments
 (0)