@blueking/ai-ui-sdk 0.0.6 → 0.0.7-beta.10

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 (8) hide show
  1. package/dist/common/util.d.ts +0 -7
  2. package/dist/hooks/use-chat.d.ts +2 -14
  3. package/dist/hooks/use-style.d.ts +2 -0
  4. package/dist/main.js +1648 -20
  5. package/dist/types/type.d.ts +0 -26
  6. package/package.json +1 -1
  7. package/README.md +0 -261
  8. package/dist/svg/iconcool.99d41d1a.svg +0 -53
package/dist/types/type.d.ts CHANGED
@@ -34,8 +34,6 @@ export interface ISessionContent {
34
34
  rate?: number;
35
35
  status?: SessionContentStatus;
36
36
  sessionCode: string;
37
- cite?: string;
38
- time?: string;
39
37
  }
40
38
  export interface ISessionPrompt {
41
39
  content: string;
@@ -48,33 +46,9 @@ export interface ChatCallbacks {
48
46
  handleThink?: (sessionCode: string, sessionContent: ISessionContent) => void;
49
47
  handleEnd?: (sessionCode: string, sessionContent: ISessionContent) => void;
50
48
  handleError?: (sessionCode: string, sessionContent: ISessionContent, code: string | undefined) => void;
51
- requestOptions?: {
52
- url: string;
53
- headers?: Record<string, string>;
54
- };
55
49
  }
56
50
  export interface SummaryCallbacks {
57
51
  handleStart?: () => void;
58
52
  handleEnd?: (text: string) => void;
59
53
  handleError?: (message: string, code?: string) => void;
60
54
  }
61
- export type BasicChatContent = {
62
- message: string;
63
- cite?: string;
64
- shortcut?: never;
65
- };
66
- export type ShortcutChatContent = {
67
- message: string;
68
- cite: string;
69
- shortcut: ShortCut;
70
- };
71
- export interface ShortCut {
72
- label: string;
73
- key: string;
74
- prompt: string;
75
- icon?: string;
76
- }
77
- export type ISendChat = {
78
- content: BasicChatContent | ShortcutChatContent;
79
- callback?: () => void;
80
- };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@blueking/ai-ui-sdk",
3
- "version": "0.0.6",
3
+ "version": "0.0.7-beta.10",
4
4
  "description": "蓝鲸AI UI SDK",
5
5
  "main": "dist/main.js",
6
6
  "types": "dist/main.d.ts",
package/README.md DELETED
@@ -1,261 +0,0 @@
1
- # 蓝鲸 AI UI SDK
2
-
3
- ## 介绍
4
-
5
- 蓝鲸 AI UI SDK (@blueking/ai-ui-sdk) 是一个用于快速构建 AI 应用前端界面的工具包。它提供了一系列组件和 hooks，帮助开发者简化 AI 聊天界面的开发过程，包括聊天功能、引用资料展示、AI 思考过程可视化等功能。
6
-
7
- ## 安装
8
-
9
- ```bash
10
- npm install @blueking/ai-ui-sdk
11
- ```
12
-
13
- ## 主要功能
14
-
15
- - **聊天功能**：管理 AI 对话的完整生命周期
16
- - **引用资料展示**：显示 AI 在回答中引用的文档资料
17
- - **思考过程可视化**：展示 AI 的思考过程和推理步骤
18
- - **内容总结**：快速对对话内容进行摘要总结
19
- - **统一样式**：提供一致的 UI 样式和图标
20
- - **可拖拽和缩放的聊天窗口**：支持自定义位置和大小的聊天界面
21
- - **快捷指令功能**：支持预设的快捷操作和自定义指令
22
- - **多语言支持**：内置国际化支持
23
-
24
- ## 使用指南
25
-
26
- ### 基本设置
27
-
28
- ```typescript
29
- import { useStyle, useChat, useClickProxy } from '@blueking/ai-ui-sdk';
30
-
31
- // 引入样式和图标
32
- useStyle();
33
-
34
- // 设置全局点击代理事件
35
- useClickProxy();
36
-
37
- // 初始化聊天
38
- const {
39
- currentSession,
40
- sessionContents,
41
- sendChat,
42
- stopChat,
43
- setCurrentSession,
44
- currentSessionLoading,
45
- reGenerateChat,
46
- reSendChat,
47
- deleteChat,
48
- } = useChat({
49
- handleStart: () => {
50
- console.log('聊天开始');
51
- },
52
- handleText: () => {
53
- console.log('收到文本消息');
54
- },
55
- handleEnd: () => {
56
- console.log('聊天结束');
57
- },
58
- requestOptions: {
59
- url: 'your-api-endpoint',
60
- },
61
- });
62
- ```
63
-
64
- ### 创建聊天会话
65
-
66
- ```typescript
67
- // 设置当前会话
68
- const session: ISession = {
69
- sessionCode: '1',
70
- sessionName: 'test',
71
- model: '',
72
- };
73
- setCurrentSession(session);
74
-
75
- // 发送聊天消息
76
- sendChat({
77
- message: '你的问题',
78
- cite: '选中的文本', // 可选，引用的文本内容
79
- });
80
-
81
- // 使用快捷指令发送消息
82
- sendChat({
83
- message: '快捷指令标签',
84
- cite: '选中的文本',
85
- shortcut: {
86
- label: '快捷指令名称',
87
- key: 'shortcut-key',
88
- prompt: '预设的提示模板',
89
- icon: '图标', // 可选
90
- },
91
- });
92
-
93
- // 停止正在进行的聊天
94
- stopChat(session.sessionCode);
95
- ```
96
-
97
- ### 完整的聊天界面示例
98
-
99
- ```vue
100
- <template>
101
- <div class="ai-blueking-wrapper">
102
- <vue-draggable-resizable
103
- v-if="isShow"
104
- :active="isShow"
105
- :draggable="true"
106
- :h="height"
107
- :min-height="minHeight"
108
- :min-width="minWidth"
109
- :parent="true"
110
- :prevent-deactivation="true"
111
- :resizable="true"
112
- :w="width"
113
- :x="left"
114
- :y="top"
115
- class-name="ai-blueking-container-wrapper"
116
- drag-handle=".drag-handle"
117
- @dragging="handleDragging"
118
- @resizing="handleResizing"
119
- >
120
- <div class="ai-blueking-container">
121
- <!-- 聊天界面内容 -->
122
- <div class="content-wrapper">
123
- <div class="message-wrapper">
124
- <render-message
125
- v-for="(message, index) in sessionContents"
126
- :key="message.id"
127
- :message="message"
128
- :index="index"
129
- @delete="handleDelete"
130
- @regenerate="handleRegenerate"
131
- @resend="handleResend"
132
- />
133
- </div>
134
-
135
- <div class="chat-input-container">
136
- <ChatInputBox
137
- v-model="inputMessage"
138
- :loading="currentSessionLoading"
139
- :shortcuts="shortcuts"
140
- @send="handleSendMessage"
141
- @shortcut-click="handleShortcutClick"
142
- @stop="handleStop"
143
- />
144
- </div>
145
- </div>
146
- </div>
147
- </vue-draggable-resizable>
148
- </div>
149
- </template>
150
- ```
151
-
152
- ### 快捷指令配置
153
-
154
- ```typescript
155
- // 默认快捷指令示例
156
- const DEFAULT_SHORTCUTS: ShortCut[] = [
157
- {
158
- label: '解释代码',
159
- key: 'explain-code',
160
- prompt: '请解释以下代码的功能：{ SELECTED_TEXT }',
161
- icon: 'code-icon',
162
- },
163
- // 更多快捷指令...
164
- ];
165
-
166
- // 在组件中使用
167
- const props = defineProps<{
168
- shortcuts?: ShortCut[];
169
- }>();
170
- ```
171
-
172
- ## 类型定义
173
-
174
- ### 会话类型
175
-
176
- ```typescript
177
- interface ISession {
178
- sessionCode: string;
179
- sessionName: string;
180
- model: string;
181
- roleInfo?: {
182
- collectionId: number;
183
- collectionName: string;
184
- content: ISessionPrompt[];
185
- variables: any[];
186
- };
187
- }
188
- ```
189
-
190
- ### 聊天内容类型
191
-
192
- ```typescript
193
- interface ISessionContent {
194
- id?: number;
195
- role: SessionContentRole;
196
- content: string;
197
- status?: SessionContentStatus;
198
- sessionCode: string;
199
- cite?: string;
200
- time?: string;
201
- }
202
- ```
203
-
204
- ### 快捷指令类型
205
-
206
- ```typescript
207
- interface ShortCut {
208
- label: string;
209
- key: string;
210
- prompt: string;
211
- icon?: string;
212
- }
213
- ```
214
-
215
- ## 高级功能
216
-
217
- ### 消息重发和重新生成
218
-
219
- ```typescript
220
- // 重新生成 AI 回复
221
- const handleRegenerate = (index: number) => {
222
- reGenerateChat(index);
223
- };
224
-
225
- // 重新发送用户消息
226
- const handleResend = (index: number, value: { message: string; cite: string }) => {
227
- reSendChat(index, value);
228
- };
229
- ```
230
-
231
- ### 消息删除
232
-
233
- ```typescript
234
- const handleDelete = (index: number) => {
235
- deleteChat(index);
236
- };
237
- ```
238
-
239
- ## 样式定制
240
-
241
- SDK 提供了基础的样式和主题支持，你可以通过覆盖 CSS 变量来自定义界面外观：
242
-
243
- ```scss
244
- .ai-blueking-container {
245
- // 自定义样式
246
- }
247
-
248
- .message-wrapper {
249
- // 消息列表样式
250
- }
251
-
252
- .chat-input-container {
253
- // 输入框样式
254
- }
255
- ```
256
-
257
- ## 注意事项
258
-
259
- - SDK 依赖 Vue 3，请确保项目中已安装
260
- - 建议使用 TypeScript 以获得更好的类型提示
261
-
package/dist/svg/iconcool.99d41d1a.svg DELETED
@@ -1,53 +0,0 @@
1
- <?xml version="1.0" standalone="no"?>
2
- <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
3
- <svg>
4
- <metadata>
5
- Created by font-carrier
6
- </metadata>
7
- <defs>
8
- <font id="iconfont" horiz-adv-x="1024" vert-adv-y="1024" >
9
- <font-face
10
-
11
- font-family="iconfont"
12
-
13
- font-weight="400"
14
-
15
- font-stretch="normal"
16
-
17
- units-per-em="1024"
18
-
19
- ascent="812"
20
-
21
- descent="-212"
22
-
23
- />
24
- <missing-glyph />
25
-
26
-
27
- <glyph glyph-name="x" unicode="&#x78;" horiz-adv-x="100"
28
- d="M20 20 L50 20 L50 -20 Z" />
29
-
30
-
31
-
32
- <glyph glyph-name="uniE103" unicode="&#xE103;" d="M512 444L736 220 688 172 512 348 336 172 288 220 512 444Z" horiz-adv-x="1024" vert-adv-y="1024" />
33
-
34
-
35
- <glyph glyph-name="uniE105" unicode="&#xE105;" d="M263.04 51.04A148.48 148.48 0 0 0 261.12 275.04L353.6 367.52 308.48 413.28 216 320.8A212.8 212.8 0 0 1 217.92 5.92 212.8 212.8 0 0 1 532.8 4L625.28 96.48 579.84 140 487.36 47.52A148.48 148.48 0 0 0 263.04 51.04ZM491.2 596L398.72 503.52 444.16 458.4 536.64 550.88A148.48 148.48 0 0 0 760.64 548.96 148.48 148.48 0 0 0 762.56 324.96L672 232.16 717.12 186.72 809.6 279.2A212.8 212.8 0 0 1 807.68 594.08 212.8 212.8 0 0 1 491.2 596ZM398.7857 232.1123L579.805 413.1316 625.0598 367.8768 444.0405 186.8574 398.7857 232.1123Z" horiz-adv-x="1024" vert-adv-y="1024" />
36
-
37
-
38
- <glyph glyph-name="uniE104" unicode="&#xE104;" d="M320.9863 608.6846L191.6223 608.6846C174.3738 608.6846 160 594.1825 160 576.78L160-62.7621C160-80.1646 174.3738-94.6667 191.6223-94.6667L320.9863-94.6667C338.2348-94.6667 352.6086-80.1646 352.6086-62.7621L352.6086 576.78C352.6086 594.1825 338.2348 608.6846 320.9863 608.6846ZM285.0519 478.1658L227.5568 478.1658C211.7456 478.1658 198.8092 491.2176 198.8092 507.1699 198.8092 523.1222 211.7456 536.1741 227.5568 536.1741L285.0519 536.1741C300.863 536.1741 313.7994 523.1222 313.7994 507.1699 313.7994 491.2177 300.863 478.1658 285.0519 478.1658ZM578.2769 716L448.9129 716C431.6644 716 417.2906 701.4979 417.2906 684.0954L417.2906-62.7621C417.2906-80.1646 431.6644-94.6667 448.9129-94.6667L578.2769-94.6667C595.5255-94.6667 609.8993-80.1646 609.8993-62.7621L609.8993 684.0954C611.3366 701.4979 596.9629 716 578.2769 716ZM543.7799 584.031L486.2848 584.031C470.4736 584.031 457.5372 597.0829 457.5372 613.0352 457.5372 628.9875 470.4736 642.0394 486.2848 642.0394L543.7799 642.0394C559.591 642.0394 572.5274 628.9875 572.5274 613.0352 572.5274 597.0829 559.591 584.031 543.7799 584.031ZM927.5598-29.4073L806.82 598.5331C802.5079 614.4854 789.5715 624.6369 773.7603 624.6369L768.0108 624.6369 641.5216 599.9833C624.273 597.0829 612.774 579.6804 615.6488 562.2779L737.8259-67.1127C740.7006-83.065 753.637-93.2165 769.4482-93.2165L775.1977-93.2165 901.6869-68.5629C918.9355-64.2123 930.4345-46.8098 927.5598-29.4073L927.5598-29.4073ZM762.2613 499.9189L704.7662 488.3172 699.0167 488.3172C686.0803 488.3172 673.1439 498.4687 670.2691 511.5206 667.3944 527.4729 677.456 543.4252 693.2672 546.3256L750.7623 557.9273C766.5734 560.8277 782.3846 550.6762 785.2593 534.7239 788.1341 518.7716 778.0725 502.8193 762.2613 499.9189L762.2613 499.9189Z" horiz-adv-x="1024" vert-adv-y="1024" />
39
-
40
-
41
- <glyph glyph-name="uniE102" unicode="&#xE102;" d="M528 716C589.8559 716 640 665.8559 640 604 640 603.6241 639.9981 603.2487 639.9945 602.8737 774.7291 551.3341 870.4 420.8396 870.4 268 870.4 245.4507 868.3176 223.3878 864.3345 201.9931 883.9388 181.8561 896 154.3366 896 124 896 62.1441 845.8559 12 784 12 777.3525 12 770.8402 12.5791 764.5109 13.6897 699.7526-50.6495 610.5184-90.4 512-90.4 413.4816-90.4 324.2474-50.6495 259.4612 13.6877 253.1598 12.5791 246.6475 12 240 12 178.1441 12 128 62.1441 128 124 128 154.3366 140.0612 181.8561 159.6499 202.0249 155.6824 223.3878 153.6 245.4507 153.6 268 153.6 432.8448 264.8905 571.6963 416.4355 613.5184 421.2316 670.9212 469.3514 716 528 716ZM436.5201 539.3665L432.0511 538.0893C315.4696 503.6336 230.4 395.7514 230.4 268 230.4 257.0771 231.0219 246.2994 232.2322 235.7004L233.8549 235.8343 240 236C301.8559 236 352 185.8559 352 124 352 97.8684 343.0507 73.8271 328.0498 54.7737 377.3611 12.1827 441.6696-13.6 512-13.6 582.3304-13.6 646.6389 12.1827 695.9893 54.812 680.9493 73.8271 672 97.8684 672 124 672 185.8559 722.1441 236 784 236 786.6073 236 789.1938 235.9109 791.7567 235.7356 792.9781 246.2994 793.6 257.0771 793.6 268 793.6 387.9728 718.5746 490.4224 612.8817 530.9909 592.3503 507.0949 561.938 492 528 492 490.2178 492 456.8051 510.7083 436.5201 539.3665Z" horiz-adv-x="1024" vert-adv-y="1024" />
42
-
43
-
44
- <glyph glyph-name="uniE101" unicode="&#xE101;" d="M708.9231 654.4615L984.6154 654.4615C1006.3669 654.4615 1024 636.8284 1024 615.0769L1024-133.2308C1024-176.7338 988.7338-212 945.2308-212L708.9231-212 708.9231 654.4615 708.9231 654.4615ZM0-172.6154C0-183.0608 4.1494-193.0785 11.5355-200.4645 18.9215-207.8506 28.9392-212 39.3846-212L945.2308-212C901.7277-212 866.4615-176.7338 866.4615-133.2308L866.4615 772.6154C866.4615 794.3669 848.8284 812 827.0769 812L39.3846 812C17.6331 812 0 794.3669 0 772.6154L0-172.6154ZM196.9231 523.1795C175.1716 523.1795 157.5385 505.5464 157.5385 483.7949 157.5385 462.0433 175.1716 444.4103 196.9231 444.4103L354.4615 444.4103C376.2131 444.4103 393.8462 462.0433 393.8462 483.7949 393.8462 505.5464 376.2131 523.1795 354.4615 523.1795L196.9231 523.1795ZM196.9231 286.8718C175.1716 286.8718 157.5385 269.2387 157.5385 247.4872 157.5385 225.7357 175.1716 208.1026 196.9231 208.1026L669.5385 208.1026C691.29 208.1026 708.9231 225.7357 708.9231 247.4872 708.9231 269.2387 691.29 286.8718 669.5385 286.8718L196.9231 286.8718ZM196.9231 50.5641C175.1716 50.5641 157.5385 32.931 157.5385 11.1795 157.5385-10.572 175.1716-28.2051 196.9231-28.2051L433.2308-28.2051C454.9823-28.2051 472.6154-10.572 472.6154 11.1795 472.6154 32.931 454.9823 50.5641 433.2308 50.5641L196.9231 50.5641 196.9231 50.5641Z" horiz-adv-x="1024" vert-adv-y="1024" />
45
-
46
-
47
- <glyph glyph-name="uniE106" unicode="&#xE106;" d="M512 620C759.4 620 960 476.7 960 300 960 123.3 759.4-20 512-20 264.6-20 64 123.3 64 300 64 476.7 264.6 620 512 620ZM512 556C457.8 556 405.4 548.5 356.1 533.6 309.5 519.5 267.8 499.5 232.4 474.2 165.1 426.1 128 364.2 128 300 128 235.8 165.1 173.9 232.4 125.8 267.8 100.5 309.5 80.5 356.1 66.4 405.4 51.5 457.8 44 512 44 566.2 44 618.6 51.5 667.9 66.4 714.5 80.5 756.2 100.5 791.6 125.8 858.9 173.9 896 235.8 896 300 896 364.2 858.9 426.1 791.6 474.2 756.2 499.5 714.5 519.5 667.9 533.6 618.6 548.5 566.2 556 512 556ZM512 460C600.4 460 672 388.4 672 300 672 211.6 600.4 140 512 140 423.6 140 352 211.6 352 300 352 388.4 423.6 460 512 460ZM512 396C459.1 396 416 352.9 416 300 416 247.1 459.1 204 512 204 564.9 204 608 247.1 608 300 608 352.9 564.9 396 512 396Z" horiz-adv-x="1024" vert-adv-y="1024" />
48
-
49
-
50
-
51
- </font>
52
- </defs>
53
- </svg>