@kernelift/ai-chat 3.0.5 → 3.0.7

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.
Files changed (5) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/README.md +328 -41
  3. package/dist/ai-chat.css +1 -1
  4. package/dist/index.js +2073 -2017
  5. package/package.json +2 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @kernelift/ai-chat
2
2
 
3
+ ## 3.0.7
4
+
5
+ ### Patch Changes
6
+
7
+ - fix some observer bugs.
8
+
9
+ ## 3.0.6
10
+
11
+ ### Patch Changes
12
+
13
+ - 切换readme
14
+
3
15
  ## 3.0.5
4
16
 
5
17
  ### Patch Changes
package/README.md CHANGED
@@ -1,10 +1,10 @@
1
- # @gci/ai-chat
1
+ # @kernelift/ai-chat
2
2
 
3
- [![npm version](https://badge.fury.io/js/%40gci%2Fai-chat.svg)](https://badge.fury.io/js/%40gci%2Fai-chat)
3
+ [![npm version](https://badge.fury.io/js/%40kernelift%2Fai-chat.svg)](https://badge.fury.io/js/%40kernelift%2Fai-chat)
4
4
  [![License: GPL-3.0](https://img.shields.io/badge/License-GPL--3.0-blue.svg)](https://opensource.org/licenses/GPL-3.0)
5
5
 
6
- - 在线预览地址： https://gci-labs.github.io/playground/#/ai-chat
7
- - demo工程： https://github.com/gci-labs/playground
6
+ - 在线预览地址： https://kernelift-labs.github.io/playground/#/ai-chat
7
+ - demo工程： https://github.com/kernelift-labs/playground
8
8
 
9
9
  基于 Vue 3 + TypeScript 的现代化 AI 聊天框组件，提供企业级的对话界面解决方案。无UI库绑定。
10
10
 
@@ -28,20 +28,20 @@
28
28
 
29
29
  ```bash
30
30
  # 使用 pnpm
31
- pnpm add @gci/ai-chat
31
+ pnpm add @kernelift/ai-chat
32
32
 
33
33
  # 使用 npm
34
- npm install @gci/ai-chat
34
+ npm install @kernelift/ai-chat
35
35
 
36
36
  # 使用 yarn
37
- yarn add @gci/ai-chat
37
+ yarn add @kernelift/ai-chat
38
38
  ```
39
39
 
40
40
  ### 依赖要求
41
41
 
42
42
  - Vue 3.3+
43
43
  - TypeScript 5.0+
44
- - @gci/markdown (workspace:\*)
44
+ - @kernelift/markdown (workspace:\*)
45
45
 
46
46
  ## 🚀 快速开始
47
47
 
@@ -61,9 +61,9 @@ yarn add @gci/ai-chat
61
61
 
62
62
  <script setup>
63
63
  import { ref } from 'vue'
64
- import { AiChat } from '@gci/ai-chat'
65
- import '@gci/ai-chat/style.css'
66
- import type { ChatMessage, ChatRecord, BubbleEvent } from '@gci/ai-chat'
64
+ import { AiChat } from '@kernelift/ai-chat'
65
+ import '@kernelift/ai-chat/style.css'
66
+ import type { ChatMessage, ChatRecord, BubbleEvent } from '@kernelift/ai-chat'
67
67
 
68
68
  const messages = ref<ChatMessage[]>([])
69
69
  const inputText = ref('')
@@ -168,6 +168,14 @@ AiChat (主容器)
168
168
  v-model="message"
169
169
  :is-last="isLastMessage"
170
170
  :markdown-class="customMarkdownClass"
171
+ :disabled-markdown-incremental="false"
172
+ :incremental="message.loading"
173
+ :on-copy="onCopy"
174
+ :plugins="markdownPlugins"
175
+ :options="markdownOptions"
176
+ :after-render="onMarkdownAfterRender"
177
+ :markdown-render="CustomMarkdownRender"
178
+ :ext-events="customActions"
171
179
  @bubble-event="handleBubbleEvent"
172
180
  >
173
181
  <!-- 自定义消息头部 -->
@@ -190,6 +198,23 @@ AiChat (主容器)
190
198
  </template>
191
199
  ```
192
200
 
201
+ #### Props 属性
202
+
203
+ | 属性名 | 类型 | 默认值 | 说明 |
204
+ | ----------------------------- | ------------------------ | ----------- | -------------------- |
205
+ | `isLast` | `boolean` | - | 是否为最后一条消息 |
206
+ | `markdownClass` | `string` | - | Markdown 样式类名 |
207
+ | `onCopy` | `(code: string) => void` | `undefined` | 复制代码回调 |
208
+ | `plugins` | `any[]` | `[]` | Markdown 插件列表 |
209
+ | `options` | `any` | `{}` | Markdown 配置选项 |
210
+ | `afterRender` | `(md: any) => void` | `undefined` | Markdown 渲染后回调 |
211
+ | `markdownRender` | `Component` | `MdRender` | 自定义渲染组件 |
212
+ | `disabledMarkdownIncremental` | `boolean` | `false` | 是否禁用增量渲染 |
213
+ | `incremental` | `boolean` | - | 是否使用增量渲染模式 |
214
+ | `extEvents` | `BubbleEventAction[]` | `[]` | 扩展事件配置 |
215
+ | `i18n` | `Record<string, any>` | `zhCN` | 国际化配置 |
216
+ | `isMobile` | `boolean` | `false` | 是否为移动端模式 |
217
+
193
218
  #### 自定义操作按钮（数据驱动）
194
219
 
195
220
  操作按钮（复制/重新生成/点赞/点踩）已数据驱动，并可通过 `ext-events` 追加自定义事件，事件名称会在 `bubble-event` 中透出：
@@ -234,6 +259,36 @@ AiChat (主容器)
234
259
  - `isError` - 错误状态，显示错误信息
235
260
  - `isTerminated` - 已终止生成
236
261
 
262
+ ### Markdown 增量渲染控制
263
+
264
+ 组件支持 Markdown 内容的增量渲染，在流式生成 AI 回复时实时更新显示。`disabledMarkdownIncremental` 属性用于控制是否禁用此功能。
265
+
266
+ #### 使用场景
267
+
268
+ ```vue
269
+ <ChatBubble
270
+ v-model="message"
271
+ :disabled-markdown-incremental="false"
272
+ :incremental="message.loading"
273
+ :markdown-class="markdownClass"
274
+ />
275
+ ```
276
+
277
+ #### 属性说明
278
+
279
+ - `disabledMarkdownIncremental` - 是否禁用增量渲染（默认为 false）
280
+ - `true` - 完整渲染每次更新的内容（适合静态内容）
281
+ - `false` - 使用增量渲染（适合流式生成）
282
+
283
+ - `incremental` - 当前是否应该使用增量渲染模式
284
+ - 通常设置为 `message.loading`，在流式生成时启用增量渲染
285
+
286
+ #### 性能优化建议
287
+
288
+ - 对于长文本流式生成，建议启用增量渲染（默认行为）
289
+ - 对于静态或短文本，可以禁用增量渲染以提升性能
290
+ - 增量渲染会自动在每次内容更新时重新计算 DOM 差异
291
+
237
292
  ### ChatSender - 消息发送器
238
293
 
239
294
  提供消息输入、工具按钮和发送功能。
@@ -284,13 +339,21 @@ AiChat (主容器)
284
339
  <template>
285
340
  <ChatSidebar
286
341
  v-model="activeRecord"
342
+ v-model:chat-settings="chatSettings"
287
343
  :data="records"
288
344
  :collapse="isCollapsed"
289
345
  :theme-mode="theme"
346
+ :actions="recordActions"
347
+ :i18n="i18n"
348
+ :has-theme-mode="hasThemeMode"
349
+ :disabled-create-record="disabledCreateRecord"
350
+ :is-mobile="isMobile"
290
351
  @change="handleRecordChange"
352
+ @clear="handleCreateRecord"
291
353
  @change-collapse="handleCollapse"
292
354
  @change-theme="handleThemeChange"
293
355
  @click-logo="handleLogoClick"
356
+ @scroll-bottom="handleScrollBottom"
294
357
  >
295
358
  <!-- 自定义 Logo -->
296
359
  <template #logo>
@@ -300,20 +363,151 @@ AiChat (主容器)
300
363
  </div>
301
364
  </template>
302
365
 
366
+ <!-- 记录底部区域 -->
367
+ <template #footer>
368
+ <div class="sidebar-footer">自定义底部内容</div>
369
+ </template>
370
+
303
371
  <!-- 自定义新建按钮 -->
304
- <template #new-chat-button>
305
- <button class="new-chat-btn">+ 新建对话</button>
372
+ <template #new-chat-button="{ execute, disabled }">
373
+ <button class="new-chat-btn" @click="execute" :disabled="disabled">+ 新建对话</button>
374
+ </template>
375
+
376
+ <!-- 自定义记录下拉菜单 -->
377
+ <template #record-dropdown>
378
+ <div class="custom-dropdown">自定义下拉菜单</div>
306
379
  </template>
307
380
  </ChatSidebar>
308
381
  </template>
309
382
  ```
310
383
 
384
+ #### Props 属性
385
+
386
+ | 属性名 | 类型 | 默认值 | 说明 |
387
+ | ---------------------- | --------------------- | ------------ | -------------------- |
388
+ | `data` | `ChatRecord[]` | `[]` | 聊天记录列表 |
389
+ | `actions` | `ChatRecordAction[]` | `[]` | 记录操作按钮配置 |
390
+ | `collapse` | `boolean` | `false` | 是否折叠 |
391
+ | `themeMode` | `'light' \| 'dark'` | `'light'` | 主题模式 |
392
+ | `hasThemeMode` | `boolean` | `false` | 是否支持主题切换 |
393
+ | `disabledCreateRecord` | `boolean` | `false` | 是否禁用新建聊天记录 |
394
+ | `i18n` | `Record<string, any>` | `zhCN` | 国际化配置 |
395
+ | `isMobile` | `boolean` | `false` | 是否为移动端模式 |
396
+ | `chatSettings` | `ChatSettings` | `{}` | 聊天设置状态对象 |
397
+ | `actionHeight` | `string` | `'2.375rem'` | 操作区域高度 |
398
+
399
+ #### v-model 双向绑定
400
+
401
+ | 属性名 | 类型 | 说明 |
402
+ | ---------------------- | -------------------- | -------------- |
403
+ | `v-model` | `ChatRecord \| null` | 当前激活的记录 |
404
+ | `v-model:chatSettings` | `ChatSettings` | 聊天设置状态 |
405
+
406
+ #### Events 事件
407
+
408
+ | 事件名 | 参数 | 说明 |
409
+ | --------------------- | ---------------------------- | ------------ |
410
+ | `change` | `(record?: ChatRecord)` | 切换记录 |
411
+ | `clear` | - | 清空聊天 |
412
+ | `change-collapse` | `(collapse: boolean)` | 折叠状态改变 |
413
+ | `change-theme` | `(theme: 'light' \| 'dark')` | 主题切换 |
414
+ | `click-logo` | - | 点击Logo |
415
+ | `scroll-bottom` | - | 滚动到底部 |
416
+ | `update:chatSettings` | `(value: ChatSettings)` | 设置更新 |
417
+
418
+ #### Slots 插槽
419
+
420
+ | 插槽名 | 参数 | 说明 |
421
+ | ----------------- | ----------------------------------------------------------- | ------------ |
422
+ | `logo` | `{ mobile: boolean }` | Logo 区域 |
423
+ | `footer` | `{ record: ChatRecord \| undefined, mobile: boolean }` | 记录底部区域 |
424
+ | `new-chat-button` | `{ mobile: boolean, execute: Function, disabled: boolean }` | 新建聊天按钮 |
425
+ | `record-dropdown` | `{ mobile: boolean }` | 记录下拉菜单 |
426
+
311
427
  #### 功能特性
312
428
 
313
429
  - **历史记录管理** - 创建、切换、删除对话记录
314
- - **搜索功能** - 快速搜索历史对话
430
+ - **记录分类** - 按日期自动分类：今天、昨天、最近 7 天、最近 30 天、更早
431
+ - **分类折叠** - 支持折叠/展开记录分类
432
+ - **右键菜单** - 桌面端右键显示操作菜单
433
+ - **长按菜单** - 移动端长按记录显示操作菜单
434
+ - **无限滚动** - 滚动到底部触发 `scroll-bottom` 事件
315
435
  - **折叠展开** - 支持侧边栏折叠以节省空间
316
- - **拖拽调整** - 可拖拽调整侧边栏宽度
436
+ - **拖拽调整** - 可拖拽调整侧边栏宽度（桌面端）
437
+
438
+ #### ChatSettings 状态对象
439
+
440
+ ```typescript
441
+ interface ChatSettings {
442
+ enableNet: boolean; // 联网搜索启用状态
443
+ enableThink: boolean; // 深度思考启用状态
444
+ asideWidth: number; // 侧边栏宽度
445
+ workspaceWidth: number; // 工作区宽度占比 (20-100)
446
+ collapse: boolean; // 侧边栏折叠状态
447
+ showAside: boolean; // 是否显示侧边栏
448
+ senderVisible: boolean; // 发送框可见性
449
+ categoryCollapseState: Record<string, boolean>; // 分类折叠状态
450
+ }
451
+ ```
452
+
453
+ #### 记录操作配置示例
454
+
455
+ ```typescript
456
+ const chatRecordActions: ChatRecordAction[] = [
457
+ {
458
+ key: 'prompt',
459
+ label: '提示词',
460
+ icon: 'pi pi-book text-sm',
461
+ handler: (record: ChatRecord) => {
462
+ console.log('设置提示词', record);
463
+ }
464
+ },
465
+ {
466
+ key: 'edit',
467
+ label: '编辑名称',
468
+ icon: 'pi pi-pencil text-sm',
469
+ handler: (record: ChatRecord) => {
470
+ console.log('编辑名称', record);
471
+ }
472
+ },
473
+ {
474
+ key: 'delete',
475
+ label: '删除',
476
+ icon: 'pi pi-trash text-sm',
477
+ handler: (record: ChatRecord) => {
478
+ console.log('删除记录', record);
479
+ }
480
+ }
481
+ ];
482
+ ```
483
+
484
+ ### 状态持久化
485
+
486
+ 组件使用 `useStorage` 自动保存聊天设置到 localStorage，所有设置在页面刷新后自动恢复。
487
+
488
+ ```typescript
489
+ // ChatSettings 状态结构
490
+ interface ChatSettings {
491
+ enableNet: boolean; // 联网搜索启用状态
492
+ enableThink: boolean; // 深度思考启用状态
493
+ asideWidth: number; // 侧边栏宽度 (桌面端)
494
+ workspaceWidth: number; // 工作区宽度占比 (20-100, 桌面端)
495
+ collapse: boolean; // 侧边栏折叠状态
496
+ showAside: boolean; // 是否显示侧边栏 (移动端)
497
+ senderVisible: boolean; // 发送框可见性
498
+ categoryCollapseState: Record<string, boolean>; // 分类折叠状态
499
+ }
500
+
501
+ // 自动保存的设置包括：
502
+ // - enableNet: 是否启用联网搜索
503
+ // - enableThink: 是否启用深度思考
504
+ // - asideWidth: 侧边栏宽度
505
+ // - workspaceWidth: 工作区宽度百分比
506
+ // - collapse: 侧边栏是否折叠
507
+ // - showAside: 是否显示侧边栏
508
+ // - senderVisible: 发送框是否显示
509
+ // - categoryCollapseState: 各个记录分类的折叠状态
510
+ ```
317
511
 
318
512
  ## 🎯 高级功能
319
513
 
@@ -565,7 +759,7 @@ const handleDeleteRecord = (record: ChatRecord) => {
565
759
  ### 流式消息处理
566
760
 
567
761
  ```typescript
568
- import { SSEClient } from '@gci/ai-chat';
762
+ import { SSEClient } from '@kernelift/ai-chat';
569
763
 
570
764
  const handleStreamResponse = async (question: string, enableThink?: boolean) => {
571
765
  const client = new SSEClient('your-token', 'https://api.example.com');
@@ -676,7 +870,7 @@ const handleStreamResponse = async (question: string, enableThink?: boolean) =>
676
870
 
677
871
  ```scss
678
872
  // 自定义主题
679
- .gci-chat-container {
873
+ .kernelift-chat-container {
680
874
  // 主容器样式
681
875
  border-radius: 16px;
682
876
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
@@ -702,7 +896,7 @@ const handleStreamResponse = async (question: string, enableThink?: boolean) =>
702
896
 
703
897
  // 自定义消息气泡
704
898
  .custom-chat-bubble {
705
- .gci-chat-bubble__assistant {
899
+ .kernelift-chat-bubble__assistant {
706
900
  background: linear-gradient(135deg, #ffffff 0%, #f0f4ff 100%);
707
901
  border: 1px solid #e1e8ff;
708
902
  border-radius: 12px;
@@ -712,7 +906,7 @@ const handleStreamResponse = async (question: string, enableThink?: boolean) =>
712
906
  }
713
907
  }
714
908
 
715
- .gci-chat-bubble__user {
909
+ .kernelift-chat-bubble__user {
716
910
  &-content {
717
911
  background: linear-gradient(135deg, var(--kl-chat-primary-color) 0%, #8a86f1 100%);
718
912
  color: white;
@@ -727,7 +921,7 @@ const handleStreamResponse = async (question: string, enableThink?: boolean) =>
727
921
 
728
922
  // 自定义发送器
729
923
  .custom-chat-sender {
730
- .gci-chat-sender__textarea {
924
+ .kernelift-chat-sender__textarea {
731
925
  border-radius: 8px;
732
926
  border: 2px solid var(--kl-border-color);
733
927
 
@@ -737,7 +931,7 @@ const handleStreamResponse = async (question: string, enableThink?: boolean) =>
737
931
  }
738
932
  }
739
933
 
740
- .gci-chat-sender__send-button {
934
+ .kernelift-chat-sender__send-button {
741
935
  background: linear-gradient(135deg, var(--kl-chat-primary-color) 0%, #8a86f1 100%);
742
936
  border-radius: 8px;
743
937
 
@@ -781,7 +975,7 @@ const handleStreamResponse = async (question: string, enableThink?: boolean) =>
781
975
  animation: slideInFromRight 0.3s cubic-bezier(0.4, 0, 0.2, 1);
782
976
  }
783
977
 
784
- .gci-chat-bubble {
978
+ .kernelift-chat-bubble {
785
979
  margin: 8px 12px;
786
980
 
787
981
  &__actions {
@@ -801,9 +995,9 @@ const handleStreamResponse = async (question: string, enableThink?: boolean) =>
801
995
  <!-- eslint-disable @typescript-eslint/no-explicit-any -->
802
996
  <script setup lang="ts">
803
997
  import { ref, watch, onMounted, nextTick } from 'vue';
804
- import { AiChat } from '@gci/ai-chat';
998
+ import { AiChat } from '@kernelift/ai-chat';
805
999
  import { useChat } from './use-chat';
806
- import '@gci/ai-chat/style.css';
1000
+ import '@kernelift/ai-chat/style.css';
807
1001
  import { CHAT_BASE_URL, CHAT_DEFAULT_MODEL } from './constants';
808
1002
  import Button from 'primevue/button';
809
1003
  import Textarea from 'primevue/textarea';
@@ -1455,7 +1649,12 @@ onMounted(() => {
1455
1649
 
1456
1650
  ```ts
1457
1651
  /* eslint-disable @typescript-eslint/no-explicit-any */
1458
- import type { BubbleEventAction, ChatMessage, ChatRecord, ChatRecordAction } from '@gci/ai-chat';
1652
+ import type {
1653
+ BubbleEventAction,
1654
+ ChatMessage,
1655
+ ChatRecord,
1656
+ ChatRecordAction
1657
+ } from '@kernelift/ai-chat';
1459
1658
  import { formatDate, useAsyncState, useStorage } from '@vueuse/core';
1460
1659
  import { useConfirm } from 'primevue/useconfirm';
1461
1660
  import { useToast } from 'primevue/usetoast';
@@ -2152,7 +2351,7 @@ export const useChat = (options: {
2152
2351
 
2153
2352
  ```scss
2154
2353
  // 自定义主题
2155
- .gci-chat-container {
2354
+ .kernelift-chat-container {
2156
2355
  // 修改主容器样式
2157
2356
  border-radius: 16px;
2158
2357
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
@@ -2170,12 +2369,12 @@ export const useChat = (options: {
2170
2369
 
2171
2370
  // 自定义消息气泡
2172
2371
  .custom-chat-bubble {
2173
- .gci-chat-bubble__assistant {
2372
+ .kernelift-chat-bubble__assistant {
2174
2373
  background: linear-gradient(135deg, #ffffff 0%, #f0f4ff 100%);
2175
2374
  border: 1px solid #e1e8ff;
2176
2375
  }
2177
2376
 
2178
- .gci-chat-bubble__user {
2377
+ .kernelift-chat-bubble__user {
2179
2378
  &-content {
2180
2379
  background: linear-gradient(135deg, var(--kl-chat-primary-color) 0%, #8a86f1 100%);
2181
2380
  color: white;
@@ -2188,12 +2387,15 @@ export const useChat = (options: {
2188
2387
 
2189
2388
  | 属性名 | 类型 | 默认值 | 说明 |
2190
2389
  | ----------------------------- | ------------------------ | ----------- | -------------------------------------------------- |
2390
+ | `uuid` | `string` | `'default'` | 实例唯一标识，用于存储状态 |
2191
2391
  | `records` | `ChatRecord[]` | `[]` | 聊天记录列表 |
2192
2392
  | `recordActions` | `ChatRecordAction[]` | `[]` | 记录操作按钮配置 |
2193
2393
  | `bubbleExtEvents` | `BubbleEventAction[]` | `[]` | 气泡扩展事件配置 |
2194
2394
  | `hasHeader` | `boolean` | `true` | 是否显示头部 |
2195
- | `headerHeight` | `number` | `38` | 头部高度 (px) |
2395
+ | `headerHeight` | `number` | `32` | 头部高度 (px) |
2196
2396
  | `hasThemeMode` | `boolean` | `false` | 是否支持主题切换 |
2397
+ | `inputHeight` | `number` | `140` | 输入框最大高度 (px) |
2398
+ | `defaultInputHeight` | `number` | `62` | 输入框初始默认高度 (px) |
2197
2399
  | `hasThinking` | `boolean` | `true` | 是否支持深度思考 |
2198
2400
  | `hasNetSearch` | `boolean` | `false` | 是否支持联网搜索 |
2199
2401
  | `hasSenderTools` | `boolean` | `false` | 是否显示发送工具区 |
@@ -2210,18 +2412,15 @@ export const useChat = (options: {
2210
2412
  | `enableNet` | `boolean` | `undefined` | 联网搜索启用状态 |
2211
2413
  | `enableThink` | `boolean` | `undefined` | 深度思考启用状态 |
2212
2414
  | `disabledCreateRecord` | `boolean` | `false` | 是否禁用新建聊天记录 |
2213
- | `inputHeight` | `number` | `140` | 输入框最大高度 (px) |
2214
- | `defaultInputHeight` | `number` | `62` | 输入框初始默认高度 (px) |
2215
2415
  | `onCopy` | `(code: string) => void` | `undefined` | 复制代码回调 |
2216
2416
  | `i18n` | `Record<string, any>` | `zhCN` | 国际化配置 |
2217
2417
  | `autoScroll` | `boolean` | `true` | 是否自动滚动到底部 |
2218
2418
  | `autoScrollPauseTime` | `number` | `3000` | 用户滚动时自动滚动暂停时间 (ms) |
2219
- | `uuid` | `string` | `'default'` | 实例唯一标识，用于存储状态 |
2220
2419
  | `markdownPlugins` | `any[]` | `[]` | Markdown 插件列表 |
2221
2420
  | `markdownOptions` | `any` | `{}` | Markdown 配置选项 |
2222
2421
  | `markdownRender` | `Component` | `MdRender` | 自定义 markdown 渲染组件 |
2223
2422
  | `onMarkdownAfterRender` | `(md: any) => void` | `undefined` | Markdown 渲染后回调 |
2224
- | `disabledMarkdownIncremental` | `boolean` | `false` | 是否禁用Markdown增量渲染功能，默认开启 |
2423
+ | `disabledMarkdownIncremental` | `boolean` | `false` | 是否禁用 Markdown 增量渲染功能，默认开启 |
2225
2424
 
2226
2425
  ### v-model 双向绑定
2227
2426
 
@@ -2287,32 +2486,119 @@ export const useChat = (options: {
2287
2486
  | `isMobile` | `Ref<boolean>` | 是否为移动端模式 |
2288
2487
  | `collapse` | `Ref<boolean>` | 侧边栏折叠状态 |
2289
2488
  | `asideWidth` | `Ref<number>` | 侧边栏宽度 |
2489
+ | `workspaceWidth` | `Ref<number>` | 工作区宽度占比 |
2290
2490
  | `scrollToBottom` | `(smooth: boolean) => void` | 滚动到底部 |
2291
2491
 
2492
+ ### 组件导出
2493
+
2494
+ ```typescript
2495
+ // 导入所有组件
2496
+ import {
2497
+ AiChat, // 主容器组件
2498
+ ChatBubble, // 消息气泡组件
2499
+ ChatHeader, // 头部组件
2500
+ ChatSidebar, // 侧边栏组件
2501
+ ChatSender, // 发送器组件
2502
+ ThinkingProcess // 思考过程组件
2503
+ } from '@kernelift/ai-chat';
2504
+
2505
+ // SSE 客户端
2506
+ import { SSEClient } from '@kernelift/ai-chat';
2507
+
2508
+ // 类型导出
2509
+ import type {
2510
+ ChatMessage, // 聊天消息类型
2511
+ ChatRecord, // 聊天记录类型
2512
+ BubbleEvent, // 气泡事件类型
2513
+ BubbleEventAction, // 气泡操作类型
2514
+ ChatRecordAction, // 记录操作类型
2515
+ ChatProps, // 聊天组件属性
2516
+ ChatEvents, // 聊天事件类型
2517
+ ChatSlots // 聊天插槽类型
2518
+ } from '@kernelift/ai-chat';
2519
+
2520
+ // 国际化消息
2521
+ import { i18nMessages } from '@kernelift/ai-chat';
2522
+ ```
2523
+
2292
2524
  ### 类型定义
2293
2525
 
2294
2526
  #### ChatMessage
2295
2527
 
2296
2528
  ```typescript
2297
2529
  interface ChatMessage {
2530
+ /**
2531
+ * 消息id
2532
+ */
2298
2533
  id: string;
2534
+ /**
2535
+ * 角色
2536
+ */
2299
2537
  role: 'user' | 'assistant' | 'system';
2538
+ /**
2539
+ * 内容
2540
+ */
2300
2541
  content: string;
2542
+ /**
2543
+ * 是否正在加载
2544
+ */
2301
2545
  loading?: boolean;
2546
+ /**
2547
+ * 是否正在思考
2548
+ */
2302
2549
  isThinking?: boolean;
2550
+ /**
2551
+ * 思考是否折叠
2552
+ */
2303
2553
  thoughtCollapse?: boolean;
2554
+ /**
2555
+ * 思考过程
2556
+ */
2304
2557
  thoughtProcess?: string;
2558
+ /**
2559
+ * 创建时间
2560
+ */
2305
2561
  timestamp: number;
2562
+ /**
2563
+ * 是否终止
2564
+ */
2306
2565
  isTerminated?: boolean;
2566
+ /**
2567
+ * 是否点赞
2568
+ */
2307
2569
  isLiked?: boolean;
2570
+ /**
2571
+ * 是否踩
2572
+ */
2308
2573
  isDisliked?: boolean;
2574
+ /**
2575
+ * 是否错误
2576
+ */
2309
2577
  isError?: boolean;
2578
+ /**
2579
+ * 错误信息
2580
+ */
2310
2581
  error?: string;
2582
+ /**
2583
+ * 是否收藏
2584
+ */
2311
2585
  isBookmarked?: boolean;
2586
+ /**
2587
+ * 下一步提示
2588
+ */
2312
2589
  nextTips?: string[];
2590
+ /**
2591
+ * 工具调用
2592
+ */
2313
2593
  toolCalls?: any[];
2594
+ /**
2595
+ * 是否隐藏底部工具
2596
+ */
2314
2597
  hideFooterTools?: boolean;
2315
- extraData?: Record<string, any>;
2598
+ /**
2599
+ * 额外的数据
2600
+ */
2601
+ extraData?: { [key: string]: any };
2316
2602
  }
2317
2603
  ```
2318
2604
 
@@ -2342,12 +2628,13 @@ type BubbleEvent = 'like' | 'dislike' | 'bookmark' | 'terminate' | 'reload' | 'c
2342
2628
 
2343
2629
  ```typescript
2344
2630
  interface ChatRecordAction {
2345
- id: string;
2346
- name: string;
2347
- icon?: string | Component;
2348
- divided?: boolean;
2349
- disabled?: boolean;
2350
- action: (record: ChatRecord) => void;
2631
+ key: string; // 操作唯一标识
2632
+ label: string; // 操作标签文本
2633
+ icon?: string | Component; // 操作图标
2634
+ divided?: boolean; // 是否显示分隔线
2635
+ disabled?: boolean | ((record: ChatRecord) => boolean); // 是否禁用（可以是布尔值或函数）
2636
+ show?: boolean | ((record: ChatRecord) => boolean); // 是否显示（可以是布尔值或函数）
2637
+ handler: (record: ChatRecord) => void; // 操作处理函数
2351
2638
  }
2352
2639
  ```
2353
2640
 
@@ -2403,7 +2690,7 @@ const handleSend = async (text: string) => {
2403
2690
  A: 使用内置的 SSEClient 或其他流式处理方案：
2404
2691
 
2405
2692
  ```typescript
2406
- import { SSEClient } from '@gci/ai-chat';
2693
+ import { SSEClient } from '@kernelift/ai-chat';
2407
2694
 
2408
2695
  const handleStreamResponse = async (question: string) => {
2409
2696
  const client = new SSEClient('token', 'https://api.example.com');