@blueking/chat-x 0.0.49-beta.2 → 0.0.49-beta.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/composables/use-container-scroll.d.ts +9 -2
- package/dist/index.js +1917 -1898
- package/dist/index.js.map +1 -1
- package/dist/mcp/generated/docs/message-container.md +3 -2
- package/dist/mcp/generated/docs/use-container-scroll.md +6 -2
- package/dist/mcp/generated/index.json +2 -2
- package/package.json +2 -2
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
- **消息分组**:将连续的非用户消息合并为一组,每组共享一个工具栏
|
|
27
27
|
- **Tool 消息关联**:自动将 `role: 'tool'` 消息注入到对应 Assistant 消息的 toolCall 中
|
|
28
28
|
- **Loading 自动注入**:末尾为用户消息时,自动追加 Loading 动画组
|
|
29
|
-
- **滚动管理**:`messageStatus` 为流式、等待响应或请求中(`streaming` / `pending` / `fetching`)时显示「停止生成」,离开底部时显示「返回底部」;`renderMode` 为 `Share`
|
|
29
|
+
- **滚动管理**:`messageStatus` 为流式、等待响应或请求中(`streaming` / `pending` / `fetching`)时显示「停止生成」,离开底部时显示「返回底部」;`renderMode` 为 `Share` 时不显示「停止生成」。挂载时通过 `jumpToBottom()` 瞬时贴底,避免切换会话时从顶部平滑滚到底部的动画
|
|
30
30
|
- **多选模式**:支持按消息组勾选,用户消息与 AI 回复联动选中
|
|
31
31
|
|
|
32
32
|
## 基础用法
|
|
@@ -533,10 +533,11 @@ AI 回复状态为 `error` 时,消息以错误样式展示:
|
|
|
533
533
|
| 按钮 | 显示条件 | 点击行为 |
|
|
534
534
|
| ------------ | ---------------------------------------------------------------------------------------------- | ---------------------- |
|
|
535
535
|
| 「停止生成」 | `messageStatus` 为 `streaming`、`pending`、`fetching` 或 `stop-loading`(停止中 loading 态),且 `renderMode` 不为 `Share` | 触发 `@stop-streaming` |
|
|
536
|
-
| 「返回底部」 | `debouncedShowScrollBottomBtn`(距底部 > 100px,且防抖 300ms 后才显示/隐藏) |
|
|
536
|
+
| 「返回底部」 | `debouncedShowScrollBottomBtn`(距底部 > 100px,且防抖 300ms 后才显示/隐藏) | 平滑滚动到消息列表底部(显式 `toScrollBottom('smooth')`) |
|
|
537
537
|
|
|
538
538
|
> **防抖说明**:「返回底部」按钮的显隐使用 300ms 防抖,避免快速滚动时按钮频繁闪烁。隐藏时立即生效(无防抖),显示时延迟 300ms。
|
|
539
539
|
|
|
540
|
+
> **首屏 / 切换会话贴底**:`MessageContainer` 挂载时若已有消息组,会立即调用 `jumpToBottom()`,并在下一帧再补一次,避免历史消息渲染过程中出现「从顶部滚到底部」的动画。流式输出场景下的小幅跟随仍由 markdown 挂载触发的 `toScrollBottom()`(距底较近时走 smooth)完成。
|
|
540
541
|
## API
|
|
541
542
|
|
|
542
543
|
### Props
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<!-- AI SUMMARY -->
|
|
2
2
|
## 快速了解
|
|
3
3
|
|
|
4
|
-
useContainerScrollProvider 在滚动容器与底部锚点上绑定 IntersectionObserver、scroll、wheel,提供 isScrollBottom、scrollBottomHeight、autoScrollEnabled、toScrollBottom/toScrollTop 及防抖「返回底部」按钮状态。 useContainerScrollConsumer 通过 inject 在子组件中获取同一套控制,无需 props 透传。 典型用于流式输出时仅在用户位于底部时自动滚底。MessageContainer 与 ScrollBtn 配合使用。
|
|
4
|
+
useContainerScrollProvider 在滚动容器与底部锚点上绑定 IntersectionObserver、scroll、wheel,提供 isScrollBottom、scrollBottomHeight、autoScrollEnabled、jumpToBottom、toScrollBottom/toScrollTop 及防抖「返回底部」按钮状态。 toScrollBottom 缺省按距底部距离自动选择行为:超过 INSTANT_SCROLL_DISTANCE(600px)时瞬时贴底,否则平滑滚动,避免切换会话时出现长距离平滑滚动动画。 useContainerScrollConsumer 通过 inject 在子组件中获取同一套控制,无需 props 透传。 典型用于流式输出时仅在用户位于底部时自动滚底。MessageContainer 与 ScrollBtn 配合使用。
|
|
5
5
|
|
|
6
6
|
### 关联组件
|
|
7
7
|
- **message-container** — Provider 挂载于消息列表滚动区域
|
|
@@ -35,7 +35,10 @@ useContainerScrollProvider(containerRef, bottomRef)
|
|
|
35
35
|
├── wheel 事件(passive)→ deltaY < 0 时 autoScrollEnabled=false
|
|
36
36
|
│ (用户向上滚动时暂停自动滚动)
|
|
37
37
|
│
|
|
38
|
-
├──
|
|
38
|
+
├── jumpToBottom() → autoScrollEnabled=true + container.scrollTop = scrollHeight(瞬时)
|
|
39
|
+
├── toScrollBottom(behavior?) → autoScrollEnabled=true;
|
|
40
|
+
│ behavior 缺省时:距底部 > INSTANT_SCROLL_DISTANCE(600) → jumpToBottom()
|
|
41
|
+
│ 否则 / 显式 'smooth' → bottomRef.scrollIntoView({ behavior:'smooth', block:'end' })
|
|
39
42
|
├── toScrollTop() → containerRef.scrollTo({ top:0, behavior:'smooth' })
|
|
40
43
|
│
|
|
41
44
|
└── provide(CONTAINER_SCROLL_TOKEN, computed(() => ({
|
|
@@ -43,6 +46,7 @@ useContainerScrollProvider(containerRef, bottomRef)
|
|
|
43
46
|
isScrollBottom, // ShallowRef<boolean>(保持响应式)
|
|
44
47
|
scrollBottomHeight, // ShallowRef<number>(保持响应式)
|
|
45
48
|
debouncedShowScrollBottomBtn, // customRef,防抖显示返回底部按钮
|
|
49
|
+
jumpToBottom,
|
|
46
50
|
toScrollBottom,
|
|
47
51
|
toScrollTop,
|
|
48
52
|
})))
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": "2.0.0",
|
|
3
|
-
"generatedAt": "2026-08-
|
|
3
|
+
"generatedAt": "2026-08-06T08:17:12.337Z",
|
|
4
4
|
"domains": {
|
|
5
5
|
"setup": {
|
|
6
6
|
"label": "对话搭建",
|
|
@@ -1644,7 +1644,7 @@
|
|
|
1644
1644
|
"slug": "use-container-scroll",
|
|
1645
1645
|
"kind": "composable",
|
|
1646
1646
|
"description": "为消息容器提供滚动控制的组合式函数对,通过 **Provider/Consumer** 模式在父子组件间共享滚动状态。",
|
|
1647
|
-
"aiSummary": "useContainerScrollProvider 在滚动容器与底部锚点上绑定 IntersectionObserver、scroll、wheel,提供 isScrollBottom、scrollBottomHeight、autoScrollEnabled、toScrollBottom/toScrollTop 及防抖「返回底部」按钮状态。 useContainerScrollConsumer 通过 inject 在子组件中获取同一套控制,无需 props 透传。 典型用于流式输出时仅在用户位于底部时自动滚底。MessageContainer 与 ScrollBtn 配合使用。",
|
|
1647
|
+
"aiSummary": "useContainerScrollProvider 在滚动容器与底部锚点上绑定 IntersectionObserver、scroll、wheel,提供 isScrollBottom、scrollBottomHeight、autoScrollEnabled、jumpToBottom、toScrollBottom/toScrollTop 及防抖「返回底部」按钮状态。 toScrollBottom 缺省按距底部距离自动选择行为:超过 INSTANT_SCROLL_DISTANCE(600px)时瞬时贴底,否则平滑滚动,避免切换会话时出现长距离平滑滚动动画。 useContainerScrollConsumer 通过 inject 在子组件中获取同一套控制,无需 props 透传。 典型用于流式输出时仅在用户位于底部时自动滚底。MessageContainer 与 ScrollBtn 配合使用。",
|
|
1648
1648
|
"relatedComponents": [
|
|
1649
1649
|
{
|
|
1650
1650
|
"slug": "message-container",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@blueking/chat-x",
|
|
3
|
-
"version": "0.0.49-beta.
|
|
3
|
+
"version": "0.0.49-beta.3",
|
|
4
4
|
"description": "蓝鲸智云 AI Chat 组件库 —— 遵循 AG-UI,为 AI Agent 和人类开发者共同设计的对话 UI 组件库。",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"bin": {
|
|
@@ -79,7 +79,7 @@
|
|
|
79
79
|
"vitepress": "2.0.0-alpha.16",
|
|
80
80
|
"vitest": "^4.0.18",
|
|
81
81
|
"vue-tsc": "^3.1.4",
|
|
82
|
-
"@blueking/chat-helper": "0.0.12-beta.
|
|
82
|
+
"@blueking/chat-helper": "0.0.12-beta.15"
|
|
83
83
|
},
|
|
84
84
|
"scripts": {
|
|
85
85
|
"dev": "vite --config vite.config.ts",
|