@glodon-aiot/bot-client-ui 3.3.1 → 3.3.2-beta.0

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 (2) hide show
  1. package/README.md +293 -153
  2. package/package.json +2 -2
package/README.md CHANGED
@@ -1,151 +1,102 @@
1
1
  # 安装依赖
2
- ## 安装依赖
3
- ### npm
2
+
3
+ ## npm
4
+
4
5
  `npm install @glodon-aiot/bot-client-ui`
5
6
 
6
- ### yarn
7
+ ## yarn
8
+
7
9
  `yarn add @glodon-aiot/bot-client-ui`
8
10
 
9
- # 配置
10
- ## 初始化
11
- ```javascript
12
- import BotClientUI from '@glodon-aiot/bot-client-ui';
11
+ ## 从cdn引入cjs文件
12
+ 一些项目无法处理esm，请使用以下方式引入依赖。BotClientUI将被注册在window对象上。
13
+ `<script src="https://cv-cdn.obs.cn-north-4.myhuaweicloud.com/glodon/libs/bot-client-ui/3.3.0/bot-client-ui.umd.cjs"></script>`
13
14
 
15
+ # 快速开始
14
16
 
15
- new BotClientUI({
16
- token: 'aiot_resource_token_goes_here',
17
- getContainer: () => document.getElementById('client-ui'),
18
- mode: 'inlay',
19
- errorHandlers: {
20
- token: (error) => {
21
- console.error(error);
22
- },
23
- },
24
- })
25
- // 弃用之前的create方式
26
- // // dialog - 对话型应用 | agent - Agent应用
27
- // // 根据平台上应用的类型来创建对应类型的BotClient
28
- // const BotClient = botClientUI.create("agent"); // 接受 agent 或者 dialog
29
-
30
- // new BotClient({
31
- // token: 'aiot_resource_token_goes_here',
32
- // getContainer: () => document.getElementById('agent-ui'),
33
- // mode: 'inlay',
34
- // errorHandlers: {
35
- // token: (error) => {
36
- // console.error(error);
37
- // },
38
- // },
39
- // })
40
- ```
17
+ ## 初始化
41
18
 
42
- ## 创建一个客户端程序的助手
43
19
  ```javascript
44
20
  import BotClientUI from '@glodon-aiot/bot-client-ui';
45
21
 
46
22
  new BotClientUI({
47
23
  token: 'aiot_resource_token_goes_here',
48
- getContainer: () => document.getElementById('agent-ui'),
49
- mode: 'inlay',
50
- plugins: {
51
- pluginACode: window.pluginACode
52
- },
24
+ getContainer: () => document.getElementById('client-ui'),
53
25
  errorHandlers: {
54
26
  token: (error) => {
55
27
  console.error(error);
56
28
  },
57
29
  },
58
- })
59
-
60
- // 弃用之前的create方式
61
- // dialog - 对话型应用 | agent - Agent应用
62
- // 根据平台上应用的类型来创建对应类型的BotClient
63
- // const BotClient = botClientUI.create("agent"); // 接受 agent | dialog
64
-
65
- // new BotClient({
66
- // token: 'aiot_resource_token_goes_here',
67
- // getContainer: () => document.getElementById('agent-ui'),
68
- // mode: 'inlay',
69
- // plugins: {
70
- // pluginACode: window.pluginACode
71
- // },
72
- // errorHandlers: {
73
- // token: (error) => {
74
- // console.error(error);
75
- // },
76
- // },
77
- // })
30
+ });
78
31
  ```
79
32
 
33
+ ## 在线预览：
80
34
 
35
+ - 对话型应用 Demo [https://code.juejin.cn/pen/7494170871938940966](https://code.juejin.cn/pen/7494170871938940966)
36
+ - Agent Demo [https://code.juejin.cn/pen/7372449505322467363](https://code.juejin.cn/pen/7372449505322467363)
81
37
 
82
- ## Demo工程
83
- 1. 完整的demo代码：<font style="color:#1DC0C9;">（待完善） </font>
84
-
85
- 2. 在线预览：
86
- 1. 对话型应用Demo [https://code.juejin.cn/pen/7436299391344607286](https://code.juejin.cn/pen/7436299391344607286)
87
- 2. Agent Demo [https://code.juejin.cn/pen/7372449505322467363](https://code.juejin.cn/pen/7372449505322467363)
38
+ # BotClientUI 构造配置
88
39
 
89
- # 配置
90
40
  ## 通用配置
91
- | 名称 | 类型 | 必填 | 默认值 | 说明 |
92
- | --- | --- | --- | --- | --- |
93
- | token | string | 是 | - | aiot 行业AI平台的AI应用的resource token。详情查看[链接](https://www.reapi.com/gallery/xAkNoUQjAREnxtgJ/cwyipHfE1wRR7nhN#post-v1-resourceToken) |
94
- | getContainer | () => Element | 否 | document.body | |
95
- | mode | 'float' | 'inlay' | 否 | 'float' | 悬浮按钮模式，或者嵌入模式 |
96
- | header | Element｜string | boolean | 否 | 应用名称 | 应用名称 |
97
- | footer | Element｜string | boolean | 否 | | |
98
- | size | {<br/> width?: number | string;<br/> height?: number | string;<br/> maxWidth?: number | string;<br/> maxHeight?: number | string;<br/> minWidth?: number | string;<br/> minHeight?: number | string;<br/>} | 否 | {width: 450} | float模式下：窗体大小 |
99
- | open | boolean | 否 | false | float模式下：默认打开状态 |
100
- | triggerButton | ```typescript { style: string; visible: boolean; } ``` | 否 | {visible: true} | triggerButton设置 |
101
- | history（<font style="color:#DF2A3F;">即将弃用</font>） | boolean | 否 | true | 是否展示session列表, features.sessionList代替 |
102
- | features <font style="color:#1DC0C9;">（待完成）</font> | ```typescript interface Feature { greeting?: boolean; sessionList?: boolean; newSession?: boolean;// dialog only fileUpload?: boolean;// dialog only imageUpload?: boolean;//agent only userMessageBox?: {// dialog only copy?: boolean; editAgain?: boolean; }; botMessageBox?: {// dialog only referenceFirst?: boolean; reference?: { file?: boolean; itemExpanded?: boolean; }; relatedQuesions: boolean; footer: { items: { componentName: 'AnswerAgain' | 'Copy' | 'Comments'; position: 'left' | 'right' }[]; }; }; prompts?: boolean; knowledges?: boolean | {visible: boolean, default: Knowledge[]}; promptVariables?: boolean | {visible: boolean, default: SessionPrompt[]}; footer?: HTMLDivElement | string | boolean; } ``` | 否 | ```javascript const FEATURE_DEFAULT = { greeting: true, sessionList: true, newSession: true, fileUpload: true,//dialog only imageUpload: true,//agent only userMessageBox: { copy: true, editAgain: true }, botMessageBox: { referenceFirst: false,//dialog only reference: { file: true, itemExpanded: false }, relatedQuesions: true,// dialog only footer: { items: [{ componentName: 'AnswerAgain', position: 'left', iconOnly: true, visible: true }, { componentName: 'Copy', position: 'right' iconOnly: true, visible: true }, { componentName: 'Comments', position: 'right' iconOnly: true, visible: true }] } }, prompts: true, knowledges: true, promptVariables: true } ``` | 功能配置 |
103
- | debug | boolean | 否 | false | 1. 控制log输出。<br/>2. promptValues变为非必填项；<br/>3. Agent类型应用下，控制是否开启，debug模式，由于收到权限限制，可能会配置失败。 |
104
- | eventListeners<font style="color:#1DC0C9;">（待完成）</font> | ```typescript { comment: (payload: { applicationId: string, sessionId: string, comment: Comment }) => void; sessionload: (payload: { applicationId: string, sessionId: string, session: SessionInfo,sessionInstance: Session }) => void; message: (payload: { applicationId: string, sessionId: string, message: Message }) => void; } ``` | | | comment， 用户提交评论<br/>sessionload，加载会话, sessionInstance，请参考`[Session](https://glodon-cv-help.yuque.com/lzh2bp/vit0x5/mgtsbugixgqppqa7#p2B8C)`API。<br/>message，对话内容<br/> |
105
- | errorHandlers | { <br/>token: (error) => void， promptValues：(error, {key:string,value: string}[]) => void<br/>} | 否 | - | errorHandlers.token 是token验证失败后的处理器;<br/>errorHandlers.promptValues 非debug模式下，检测空值 |
106
-
107
-
108
-
109
-
110
- ## 只适用于对话应用的配置（<font style="color:#DF2A3F;">即将弃用</font>）
111
- | 名称 | 类型 | 必填 | 默认值 | 说明 |
112
- | --- | --- | --- | --- | --- |
113
- | transform（<font style="color:#DF2A3F;">即将弃用， features代替</font>） | ```typescript { greating?: boolean; sessionList?: boolean; sessionOpen?: boolean; fileUpload?: boolean; connectNetwork?: boolean; userCopy?: boolean; userEdit?: boolean; userPrompt?: booleam prompt?: boolean; relate?: boolean; again?: boolean; metadata?: boolen; reference?: { iconVisible?: boolean, referenceFirst?: boolean, isExpand?: boolean, }, }, } ``` | 否 | ```plain { greating: true, // 问候语 sessionList: true, // 会话历史记录 sessionOpen: true, // 打开新会话 fileUpload: true, // 文件上传 connectNetwork: true, // 联网回答 userCopy: true, // 复制 userEdit: true, // 编辑 userPrompt: true, // 添加到prompt prompt: true, // 常用prompt relate: true, // 相关问题 again: true, // 再次回答 metadata: true, // 參考名称来源 reference: { iconVisible: true, // 参考来源icon referenceFirst: false, // 配置参考来源无联网模式下引用顺序 isExpand: false, // 配置参考来源在物联网模式下展开 }, }, } ``` | 对话应用适用，是否支持去除功能 <font style="color:#DF2A3F;">(connectNetwork /metadata 待确认?)</font> |
114
-
115
-
116
-
117
-
118
- ## 只适用于Agent应用的配置
119
- | 名称 | 类型 | 必填 | 默认值 | 说明 |
120
- | --- | --- | --- | --- | --- |
121
- | plugins | {[pluginCode:string]:{ [function Code:string]: Function }} | 否 | - | Agent应用适用。<br/>插件列表，`pluginCode`与`functionCode`要与平台中注册的插件标识和API名称保持一致 |
122
-
123
-
124
- # API
125
- | 名称 | 类型 | 说明 |
126
- | --- | --- | --- |
127
- | create | (appType: "agent" | "dialog") => `AgentClientUI` | `DialogClientUI` | 创建指定类型的应用UI，配置说明参考[本文第2部分](#qIfRd) |
128
- | reload | `() => void` | |
129
- | activeSession | `Session` | 当前活跃的会话信息 |
130
- | input | `(message:string) => void` | 填充输入框内容 |
131
- | getMessageList | `(sessionId?: string) => Promise<Message[]>` | 获取历史对话列表 |
132
- | on<font style="color:#1DC0C9;">（待完成）</font> | | |
133
- | off<font style="color:#1DC0C9;">（待完成）</font> | | |
134
41
 
42
+ | 名称 | 类型 | 必填 | 默认值 | 说明 | 支持版本 |
43
+ | -------------------------------------------------- | ---------------------------- | ---- | ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------- |
44
+ | token | string | 是 | - | aiot 行业 AI 平台的 AI 应用的 resource token。详情查看[认证说明](https://glodon-cv-help.yuque.com/lzh2bp/eszzb5/evk1gvh3pqaexe74?singleDoc# 《认证说明》/cwyipHfE1wRR7nhN#post-v1-resourceToken) | |
45
+ | apiUrl | string | 否 | `https://copilot.glodon.com/api/cvforce` | 拼接规则：`${origin}/api/cvforce`，其中`origin`是部署服务的源地址。 | 3.0.8 |
46
+ | getContainer | () => Element | 否 | () => document.body | 容器元素获取方法，默认在 document.body 中渲染 | |
47
+ | mode | 'float' \| 'inlay' | 否 | 'float' | 悬浮按钮模式，或者嵌入模式 | |
48
+ | header | Element \| string \| boolean | 否 | 应用名称 | 应用名称 | |
49
+ | footer | Element \| string \| boolean | 否 | | | |
50
+ | sider | boolean | 否 | | inlay 模式可用。<br/>是否展示左侧会话列表 | |
51
+ | icon | string | 否 | | 影响greeting和triggerButton的icon | |
52
+ | size | SizeConfig | 否 | {width: 450} | float 模式下：窗体大小 | |
53
+ | open | boolean | 否 | false | float 模式下：默认打开状态 | |
54
+ | triggerButton | TriggerButtonConfig | 否 | {visible: true} | triggerButton 设置 | |
55
+ | features | Feature | 否 | FEATURE_DEFAULT | 功能配置 | |
56
+ | debug | boolean | 否 | false | 1. 控制 log 输出。<br/>2. promptValues 变为非必填项；<br/>3. Agent 类型应用下，控制是否开启，debug 模式，由于收到权限限制，可能会配置失败。 | |
57
+ | eventListeners<font style="color:#1DC0C9;"></font> | EventListeners | | | 事件监听器配置 | |
58
+ | errorHandlers | ErrorHandlers | 否 | - | errorHandlers.token 是 token 验证失败后的处理器;<br/>errorHandlers.promptValues 非 debug 模式下，检测空值 | |
59
+
60
+ ## 只适用于 Agent 应用的配置
61
+
62
+ | 名称 | 类型 | 必填 | 默认值 | 说明 |
63
+ | ------- | ------------- | ---- | ------ | ----------------------------------------------------------------------------------------------------------------- |
64
+ | plugins | PluginsConfig | 否 | - | Agent 应用适用。<br/>插件列表，`pluginCode`与`functionCode`要与平台中注册的插件标识和 API 名称保持一致 |
65
+ | mcp | McpConfig | 否 | - | Agent 应用适用。<br/>这里注册的 MCP 作用到每个会话中。<br/>如果希望特定会话才可注册 MCP，则在会话加载后动态注册。 |
66
+
67
+ # BotClientUI 实例 API
68
+
69
+ | 名称 | 类型 | 说明 |
70
+ | -------------- | -------------------------------------------- | ------------------ |
71
+ | reload | `() => void` | |
72
+ | activeSession | `Session` | 当前活跃的会话信息 |
73
+ | input | `(message:string) => void` | 填充输入框内容 |
74
+ | getMessageList | `(sessionId?: string) => Promise<Message[]>` | 获取历史对话列表 |
75
+
76
+ # 类型定义
77
+
78
+ ## 基础类型
135
79
 
80
+ ```typescript
81
+ interface SizeConfig {
82
+ width?: number | string;
83
+ height?: number | string;
84
+ maxWidth?: number | string;
85
+ maxHeight?: number | string;
86
+ minWidth?: number | string;
87
+ minHeight?: number | string;
88
+ }
136
89
 
90
+ interface TriggerButtonConfig {
91
+ style: string;
92
+ visible: boolean;
93
+ }
137
94
 
138
- ## 数据结构
139
- ```typescript
140
95
  interface SessionInfo {
141
96
  id: string;
142
97
  name: string;
143
98
  }
144
- ```
145
-
146
99
 
147
-
148
- ```typescript
149
100
  interface Message {
150
101
  messageId: string;
151
102
  content: string;
@@ -157,61 +108,176 @@ interface Message {
157
108
  }
158
109
 
159
110
  enum ChatMessageRole {
160
- Robot = 1,
161
- User = 2,
162
- System = 3
111
+ Robot = 1,
112
+ User = 2,
113
+ System = 3,
163
114
  }
164
115
 
165
116
  interface IReference {
166
- text: string;
167
- docId: string;
168
- fileId: string;
169
- fileName: string;
170
- knowledgeId: string;
171
- knowledgeName: string;
172
- score: number;
173
- nickname: string;
174
- knowledgeSourceName: string;
117
+ text: string;
118
+ docId: string;
119
+ fileId: string;
120
+ fileName: string;
121
+ knowledgeId: string;
122
+ knowledgeName: string;
123
+ score: number;
124
+ nickname: string;
125
+ knowledgeSourceName: string;
175
126
  }
176
127
 
177
128
  interface ISearchRefernce {
178
- link: string;
179
- title: string;
180
- snippet: string;
129
+ link: string;
130
+ title: string;
131
+ snippet: string;
181
132
  }
182
133
 
183
134
  interface SessionPrompt {
184
- id?: string;
185
- key: string;
186
- name?: string;
187
- value: string;
188
- status?: PromptStatus;
135
+ id?: string;
136
+ key: string;
137
+ name?: string;
138
+ value: string;
139
+ status?: PromptStatus;
189
140
  }
190
141
 
191
142
  interface Knowledge {
192
- id: string;
143
+ id: string;
193
144
  }
194
145
  ```
195
146
 
196
- # Features
197
- 功能与配置关系如下图所示。
147
+ ## 功能配置
198
148
 
199
- ![](https://cdn.nlark.com/yuque/0/2024/png/26473759/1732689801977-011ae10c-622c-4732-9a96-b22cdf9741ab.png)当前支持的配置项；
149
+ ```typescript
150
+ interface Feature {
151
+ // 问候
152
+ greeting?: boolean | {
153
+ icon?: string;
154
+ text?: string; // 问候语
155
+ questions?: boolean; // 推荐问题
156
+ };
157
+ // toolbar中的"会话历史记录"
158
+ sessionList?: boolean;
159
+ // toolbar中的"新会话"
160
+ newSession?: boolean; // dialog only
161
+ // toolbar中的"上传文件"
162
+ fileUpload?: boolean; // dialog only
163
+ // toolbar中的"上传图片"
164
+ imageUpload?: boolean; // agent only
165
+ // 问题气泡
166
+ userMessageBox?: {
167
+ // dialog only
168
+ copy?: boolean;
169
+ editAgain?: boolean;
170
+ };
171
+ // 回答气泡
172
+ botMessageBox?: {
173
+ // dialog only
174
+ // 参考列表前置
175
+ referenceFirst?: boolean;
176
+ // 参考列表元素设置
177
+ reference?: {
178
+ // 是否可查看参考源文件
179
+ file?: boolean;
180
+ // 是否展开参考内容
181
+ itemExpanded?: boolean;
182
+ };
183
+ // 是否展示相关问题
184
+ relatedQuesions: boolean;
185
+ // 回答气泡底部设置
186
+ footer: {
187
+ items: {
188
+ componentName: 'AnswerAgain' | 'Copy' | 'Comments';
189
+ position: 'left' | 'right';
190
+ }[];
191
+ };
192
+ };
193
+ prompts?: boolean;
194
+ // toolbar中的网络访问
195
+ connectNetwork?: boolean | { visible: boolean; default?: boolean; disabled?: boolean };
196
+ // 参考知识库设置
197
+ knowledges?: boolean | { visible: boolean; default: Knowledge[]; disabled?: boolean };
198
+ // 用户指令变量设置
199
+ promptVariables?: boolean | { visible: boolean; default: SessionPrompt[] };
200
+ }
201
+ ```
200
202
 
201
- ![](https://cdn.nlark.com/yuque/0/2024/png/26473759/1732689748811-03035f5b-71fe-4377-a807-78e426c925a1.png)有这个标识的配置项是还在计划中。
203
+ ## 事件与错误处理
202
204
 
203
- ![画板](https://cdn.nlark.com/yuque/0/2025/jpeg/26473759/1741166250312-4da6b06f-87a8-4f5b-9096-8ab133307b47.jpeg)
205
+ ```typescript
206
+ interface EventListeners {
207
+ comment: (payload: { applicationId: string; sessionId: string; comment: Comment }) => void;
208
+ sessionload: (payload: {
209
+ applicationId: string;
210
+ sessionId: string;
211
+ session: SessionInfo;
212
+ sessionInstance: Session;
213
+ }) => void;
214
+ message: (payload: { applicationId: string; sessionId: string; message: Message }) => void;
215
+ beforemessagesend: (payload: {
216
+ applicationId: string;
217
+ sessionId: string;
218
+ message: Message;
219
+ }) => boolean | Partil<Message> | Promise<boolean | Partil<Message>>;
220
+ }
221
+
222
+ interface ErrorHandlers {
223
+ token: (error: any) => void;
224
+ promptValues?: (error: any, values: { key: string; value: string }[]) => void;
225
+ }
226
+ ```
227
+
228
+ ## Agent 应用配置
229
+
230
+ ### 插件配置
231
+
232
+ ```typescript
233
+ interface PluginsConfig {
234
+ [pluginCode: string]: {
235
+ [functionCode: string]: Function;
236
+ };
237
+ }
238
+
239
+ interface McpServer {
240
+ type: 'sse';
241
+ url: string;
242
+ headers?: Record<string, string>;
243
+ }
244
+
245
+ interface McpConfig {
246
+ mcpServers: {
247
+ [key: string]: McpServer;
248
+ };
249
+ }
250
+ ```
251
+
252
+ ### MCP 配置
253
+
254
+ ```typescript
255
+ interface McpServer {
256
+ type: 'sse';
257
+ url: string;
258
+ headers?: Record<string, string>;
259
+ }
260
+
261
+ interface McpConfig {
262
+ mcpServers: {
263
+ [key: string]: McpServer;
264
+ };
265
+ }
266
+ ```
267
+
268
+ # Agent 类型应用的特别说明
269
+
270
+ ## 客户端插件使用
204
271
 
205
- # 客户端Agent类型应用的特别说明
206
272
  由于该类型应用一般被当作某个软件的助手使用，需要主体软件在浏览器上注册一些方法，作为与浏览器交互的桥梁。
207
273
 
208
274
  例如，有客户端`Plugin A`，注册插件如下代码。
209
275
 
210
- 其中，`pluginACode`是`<font style="color:rgba(0, 0, 0, 0.85);">插件标识</font>`，可以在[行业AI平台](https://copilot.glodon.com/)的【插件管理 - 插件详情】中获得，不支持自定义。`functionCode`对应的是`API名称`，可自定义。
276
+ 其中，`pluginACode`是插件标识，可以在[行业 AI 平台](https://copilot.glodon.com/)的【插件管理 - 插件详情】中获得，不支持自定义。`functionCode`对应的是`API名称`，可自定义。
211
277
 
212
278
  ```javascript
213
279
  window.pluginACode = {
214
- functionCode1: (params,cb) => {
280
+ functionCode1: (params, cb) => {
215
281
  console.log(`模拟pluginA function1 执行\n执行入参\n${JSON.stringify(arguments)}`);
216
282
  setTimeout(() => {
217
283
  console.log(`模拟pluginA function1 执行完成`);
@@ -223,9 +289,9 @@ window.pluginACode = {
223
289
  b: 2,
224
290
  },
225
291
  });
226
- }, 5000)
292
+ }, 5000);
227
293
  },
228
- functionCode2: (params,cb) => {
294
+ functionCode2: (params, cb) => {
229
295
  console.log(`模拟pluginA function2 执行\n执行入参\n${JSON.stringify(arguments)}`);
230
296
  setTimeout(() => {
231
297
  console.log(`模拟pluginA function2 执行完成`);
@@ -237,12 +303,12 @@ window.pluginACode = {
237
303
  b: 2,
238
304
  },
239
305
  });
240
- }, 10000)
241
- }
242
- }
306
+ }, 10000);
307
+ },
308
+ };
243
309
  ```
244
310
 
245
- 创建Agent应用UI的时候，配置`plugins`属性。完整代码如下：
311
+ 创建 Agent 应用 UI 的时候，配置`plugins`属性。完整代码如下：
246
312
 
247
313
  ```javascript
248
314
  import BotClientUI from '@glodon-aiot/bot-client-ui';
@@ -252,12 +318,86 @@ new BotClientUI({
252
318
  getContainer: () => document.getElementById('agent-ui'),
253
319
  mode: 'inlay',
254
320
  plugins: {
255
- pluginACode: window.pluginACode
321
+ pluginACode: window.pluginACode,
322
+ },
323
+ errorHandlers: {
324
+ token: (error) => {
325
+ console.error(error);
326
+ },
327
+ },
328
+ });
329
+ ```
330
+
331
+ ## MCP 注册
332
+
333
+ MCP Server 信息可以在[行业 AI 平台](https://copilot.glodon.com/)的【MCP 管理 - MCP 详情】中获得。
334
+
335
+ ### 全局作用的 MCP 注册
336
+
337
+ 全局作用的 MCP 注册的完整代码如下：
338
+
339
+ ```javascript
340
+ import BotClientUI from '@glodon-aiot/bot-client-ui';
341
+
342
+ new BotClientUI({
343
+ token: 'aiot_resource_token_goes_here',
344
+ getContainer: () => document.getElementById('agent-ui'),
345
+ mode: 'inlay',
346
+ mcp: {
347
+ mcpServers: {
348
+ mcpServer_ID: {
349
+ type: 'sse',
350
+ url: 'https://copilot.glodon.com/proxy/XXXX/mcp/XXXX/mcp-mcpServer_ID/XXXX/sse',
351
+ },
352
+ },
256
353
  },
257
354
  errorHandlers: {
258
355
  token: (error) => {
259
356
  console.error(error);
260
357
  },
261
358
  },
262
- })
263
- ```
359
+ });
360
+ ```
361
+
362
+ ### 为当前会话注册 MCP
363
+
364
+ 为当前会话注册 MCP 的完整代码如下：
365
+
366
+ ```javascript
367
+ import BotClientUI from '@glodon-aiot/bot-client-ui';
368
+
369
+ const botClientUI = new BotClientUI({
370
+ token: 'aiot_resource_token_goes_here',
371
+ getContainer: () => document.getElementById('agent-ui'),
372
+ mode: 'inlay',
373
+ errorHandlers: {
374
+ token: (error) => {
375
+ console.error(error);
376
+ },
377
+ },
378
+ eventListeners: {
379
+ sessionload: ({ sessionInstance }) => {
380
+ if (sessionInstance) {
381
+ // MCP注册方法
382
+ const addMCP = () => {
383
+ sessionInstance.addMcpServer({
384
+ mcpServers: {
385
+ mcpServer_ID: {
386
+ type: 'sse',
387
+ url: 'https://copilot.glodon.com/proxy/XXXX/mcp/XXXX/mcp-mcpServer_ID/XXXX/sse',
388
+ },
389
+ },
390
+ });
391
+ };
392
+
393
+ // 只能在ready事件发生后才可以注册MCP
394
+ sessionInstance.addEventListener('ready', addMCP);
395
+ // session不活跃之后移除事件监听
396
+ sessionInstance.addEventListener('inactivated', () =>
397
+ sessionInstance.removeEventListener('ready', addMCP)
398
+ );
399
+ }
400
+ },
401
+ },
402
+ });
403
+ ```
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@glodon-aiot/bot-client-ui",
3
- "version": "3.3.1",
3
+ "version": "3.3.2-beta.0",
4
4
  "author": "glodoncv",
5
5
  "description": "aiot libembeds",
6
6
  "keywords": [
@@ -36,7 +36,7 @@
36
36
  "cy-open": "yarn run cypress open"
37
37
  },
38
38
  "dependencies": {
39
- "@glodon-aiot/agent-cli-ui": "^3.3.1"
39
+ "@glodon-aiot/agent-cli-ui": "^3.3.2-beta.0"
40
40
  },
41
41
  "devDependencies": {
42
42
  "@babel/core": "^7.20.12",