> {
const resp = await openApi.get('/oauth2/jsapi_ticket', {
headers: {
Authorization: `bearer ${access_token}`,
},
});
return {
code: 0,
data: {
...(resp || {}),
},
};
}
```
## 事件监听
### 支持的事件类型
| 事件名称 | 说明 | 事件数据 | 回调参数 |
| :--------------- | :--------------------------------- | :---------------------- | :----------------------------------------------------------- |
| Updated | 组件配置更新时触发 | { info: string } | info: 更新信息描述，如 "数字员工组件刷新完成" |
| OnChatStart | 对话开始时触发 | { message: Message } | message: 用户发送的消息对象（包含 id、text、sender、timestamp 等字段） |
| OnChatEnd | 对话结束时触发 | {} | 无参数（空对象） |
| OnError | 发生错误时触发 | { error: Error | any } | error: 错误对象或错误信息 |
| OnMessageSend | 用户发送消息时触发 | { message: Message } | message: 发送的消息对象（包含消息内容、发送者等信息） |
| OnMessageReceive | 接收到 AI 回复时触发 | { message: Message } | message: 接收的消息对象（可能包含 content_blocks、wps_tools 等富内容） |
| OnSelected | 用户进行选择操作时触发 | any | 选择的内容（根据具体场景而定） |
| OnAuthRequest | 需要额外权限时触发（用于二次授权） | AuthRequestEvent | detailScopeUser: 所有必需权限数组 |
### 事件监听示例
```javascript
// 1. Updated 事件
agentspaceChat.addEventListener(agentspaceChat.Events.Updated, (e) => {
console.log('[Updated]', e.info); // "数字员工组件刷新完成"
});
// 2. OnChatStart 事件
agentspaceChat.addEventListener(agentspaceChat.Events.OnChatStart, (e) => {
console.log('[OnChatStart]', e.message.text);
});
// 3. OnChatEnd 事件
agentspaceChat.addEventListener(agentspaceChat.Events.OnChatEnd, (e) => {
console.log('[OnChatEnd] 对话结束');
});
// 4. OnError 事件
agentspaceChat.addEventListener(agentspaceChat.Events.OnError, (e) => {
console.error('[OnError]', e.error);
});
// 5. OnMessageSend 事件
agentspaceChat.addEventListener(agentspaceChat.Events.OnMessageSend, (e) => {
console.log('[OnMessageSend]', e.message.text, e.message.sender);
});
// 6. OnMessageReceive 事件
agentspaceChat.addEventListener(agentspaceChat.Events.OnMessageReceive, (e) => {
console.log('[OnMessageReceive]', e.message.text);
// 处理富内容
if (e.message.content_blocks) {
e.message.content_blocks.forEach(block => {
console.log('内容块:', block.title);
});
}
});
// 7. OnSelected 事件
agentspaceChat.addEventListener(agentspaceChat.Events.OnSelected, (e) => {
console.log('[OnSelected]', e);
});
// 8. OnAuthRequest 事件（重要）
agentspaceChat.addEventListener(agentspaceChat.Events.OnAuthRequest, (e) => {
console.log('[业务方 addEventListener] detailScopeUser:',e.detailScopeUser );
});
```
### 移除事件监听
```javascript
// 定义事件处理函数
const handleChatStart = (event) => {
console.log('对话开始:', event);
};
// 添加监听
agentspaceChat.addEventListener(agentspaceChat.Events.OnChatStart, handleChatStart);
// 移除监听
agentspaceChat.removeEventListener(agentspaceChat.Events.OnChatStart, handleChatStart);
```
## 完整使用示例
> 您需要在config.js中进行配置，然后使用这个示例（React项目），依赖挂载可以参考[React项目导入](#react项目导入)
### index.html
```html
AgentSpace Chat SDK Demo
```
### config.js
```js
/**
* 配置文件
*/
// biz-server 第三方服务地址，您需要替换为您的服务地址
const host = 'http://127.0.0.1:3000';
// 默认权限范围，配置您需要的权限
const defaultScopes = [
'kso.component.agentspace_chat',
'kso.wiki.readwrite'
];
// Agent 配置，您需要配置您的数字员工的agentid
const agentConfig = {
agentId: '*********',
};
// OAuth2 配置,您需要配置您的state
const oauthConfig = {
appId: agentConfig.agentId,
redirect_uri: 'https://agentspace.wps.cn/sdk-callback',
state: 'agent-space-chat',
};
```
### auth.js
```js
/**
* 授权相关函数
*/
// 发起授权
async function authorize(scopes) {
// 用户授权演示
// 以下信息，建议从业务服务端返回给前端
OpenSDK.OAuth2.authorize({
appId: oauthConfig.appId,
redirect_uri: oauthConfig.redirect_uri,
scope: scopes.join(','),
mode: OpenSDK.OAuth2.Mode.POPUP,
state: oauthConfig.state,
});
}
// 暴露给全局
window.authorize = authorize;
```
### app.js
```js
/**
* 主应用逻辑
*/
let agentspaceChatUmdLoadPromise = null;
// 加载第三方依赖
function loadScript(src) {
return new Promise((resolve, reject) => {
// 已存在则复用
const existing = document.querySelector(`script[src="${src}"]`);
if (existing) {
if (existing.dataset.loaded === "1") return resolve();
existing.addEventListener("load", resolve, { once: true });
existing.addEventListener("error", reject, { once: true });
return;
}
const s = document.createElement("script");
s.src = src;
s.async = true;
s.addEventListener("load", () => {
s.dataset.loaded = "1";
resolve();
});
s.addEventListener("error", reject);
document.head.appendChild(s);
});
}
/**
* - 加载 agentspace_chat UMD
*/
function loadAgentspaceChatUmd() {
if (agentspaceChatUmdLoadPromise) return agentspaceChatUmdLoadPromise;
agentspaceChatUmdLoadPromise = (async () => {
// UMD 包在浏览器环境下会从window读取这三个依赖，需要在script加载前挂载
(window as any).AgentSpaceWebSDKDeps = {
React:React, // React依赖
ReactDOM: {
...ReactDOM,
createRoot:ReactDOMClient.createRoot, // React18的createRoot在react-dom/client上
}, // ReactDOM依赖
ReactJSXRuntime:ReactJSXRuntime, // ReactJSXRuntime
};
await loadScript(
"https://qn.cache.wpscdn.cn/open_static/libs/widgets/agentspace_chat/1.0.8/kso.component.agentspace_chat.1.0.8.umd.js"
);
})();
return agentspaceChatUmdLoadPromise;
}
let hasRender = false;
// localStorage.scopes || 使用默认值
const savedScopes = localStorage.getItem('merged_scopes');
let scopes = savedScopes ? JSON.parse(savedScopes) : defaultScopes;
async function startApp() {
if (hasRender) return;
OpenSDK.setDebug(true);
// 检查app_config是否过期
const app_config = localStorage.getItem('app_config');
if (app_config) {
const {
app_id,
signature,
noncestr,
timestamp,
tag,
url,
app_config_timestamp,
} = JSON.parse(app_config);
console.log('app_config_timestamp', Date.now() - app_config_timestamp);
if (Date.now() - app_config_timestamp < 7200000) {
await OpenSDK.config({
scopes,
signature, // 签名
appId: app_id, // 应用 appId
timestamp, // 时间戳（毫秒）
nonceStr: noncestr, // 随机字符串
tag,
url,
});
// 创建组件
renderWidget();
return;
} else {
localStorage.removeItem('app_config');
// 缓存过期，重新开始授权流程
// console.log('[授权流程] app_config 缓存已过期，重新授权')
window.location.reload();
}
}
// 无缓存或缓存过期，开始授权
console.log('[授权流程] 开始授权');
authorize(scopes);
OpenSDK.addEventListener(OpenSDK.Events.OAuth2Message, async (event) => {
// 安全起见，判断来源
if (event.origin !== 'https://agentspace.wps.cn') return;
const code = event.data.code;
console.log('OAuth2Message code', code);
// 步骤一：拿到临时授权码code，提交给服务端申请access_token
// 应用授权，无需走OAuth授权流程，直接申请access_token
// 用户授权，走OAuth授权流程，获取auth_code，然后申请access_token
if (!code) {
authorize(scopes);
return;
}
// 步骤二：获取biz-server 申请的js_ticket相关签名信息
const { app_id, signature, noncestr, timestamp, tag, url } = await fetch(
`${host}/api/get_app_config?code=${code}`
).then(async (res) => {
const resp = await res.json();
if (resp?.code === 0) {
return resp.data || {};
} else {
throw new Error('获取signature失败');
}
});
// 先删除缓存的 app_config
localStorage.removeItem('app_config');
// 将获取的信息缓存存储，两个小时后过期
localStorage.setItem(
'app_config',
JSON.stringify({
app_id,
signature,
noncestr,
timestamp,
tag,
url,
app_config_timestamp: Date.now(),
})
);
// 步骤三：OpenSDK设置签名信息
await OpenSDK.config({
scopes,
signature, // 签名
appId: app_id, // 应用 appId
timestamp, // 时间戳（毫秒）
nonceStr: noncestr, // 随机字符串
tag,
url,
});
// 步骤四：渲染组件
renderWidget();
});
}
async function renderWidget() {
// 加载 agentspace_chat UMD
await loadAgentspaceChatUmd();
if (OpenSDK.components.size === 0) return;
const agentspaceChat = OpenSDK.create('kso-agentspace-chat', {
agentId: agentConfig.agentId,
initialExpanded: false,
});
agentspaceChat.mount(document.getElementById('agentspace-container'));
hasRender = true;
// 第三方开发者监听事件
agentspaceChat.addEventListener(agentspaceChat.Events.Updated, (e) => {
console.log('[3rd] Updated:', e);
});
agentspaceChat.addEventListener(agentspaceChat.Events.OnSelected, (e) => {
console.log('[3rd] OnSelected:', e);
});
// 监听scopes范围不够，二次授权
agentspaceChat.addEventListener(
agentspaceChat.Events.OnAuthRequest,
async (e) => {
const detailScopeUser = e.detailScopeUser || []; // detail接口返回的所有required scopes
console.log(
'[业务方 addEventListener] detailScopeUser:',
detailScopeUser
);
// 使用本地配置的scopes进行对比，判断缺失的scopes
const missingScopes = detailScopeUser.filter(
(scope) => !scopes.includes(scope)
);
// 如果没有缺失的权限，无需重新授权
if (missingScopes.length === 0) {
console.log('[业务方 addEventListener] 权限验证通过，无需重新授权');
return;
}
// 合并 scopes
const mergedScopes = [...new Set([...scopes, ...missingScopes])];
scopes = mergedScopes;
// 保存合并后的scopes
localStorage.setItem('merged_scopes', JSON.stringify(mergedScopes));
// 清除缓存的 app_config，强制重新获取新的授权信息
localStorage.removeItem('app_config');
console.log('[业务方 addEventListener] 合并后的scopes:', mergedScopes);
// 显示自定义授权提示 UI（不使用 window.confirm）
showAuthPrompt(
missingScopes,
mergedScopes,
// 确认授权回调
(mergedScopes) => authorize(mergedScopes),
// 取消授权回调
() => {
console.log('[业务方 addEventListener] 用户取消授权');
}
);
}
);
}
```
### auth-popup-helpers.js
```js
/**
* 授权弹框辅助函数 【此处模拟业务方的实现】
* 包含：弹窗被阻止检测、授权提示UI等
*/
// 显示弹窗被阻止的提示
function showPopupBlockedWarning() {
// 移除可能存在的旧提示
const existingWarning = document.getElementById('popup-blocked-warning');
if (existingWarning) {
existingWarning.remove();
}
const warningBox = document.createElement('div');
warningBox.id = 'popup-blocked-warning';
warningBox.style.cssText = `
position: fixed;
top: 20px;
left: 50%;
transform: translateX(-50%);
background: #fff3cd;
border: 1px solid #ffc107;
color: #856404;
padding: 15px 20px;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
z-index: 999999;
max-width: 500px;
font-size: 14px;
animation: slideDown 0.3s ease-out;
`;
warningBox.innerHTML = `
⚠️
浏览器已阻止弹窗
授权窗口被浏览器拦截，请按以下步骤操作：
- 点击地址栏右侧的 弹窗被阻止 图标
- 选择 始终允许来自此网站的弹窗
- 刷新页面重新授权
`;
document.body.appendChild(warningBox);
// 关闭按钮
document.getElementById('close-popup-warning').onclick = () => {
warningBox.style.animation = 'slideDown 0.3s ease-out reverse';
setTimeout(() => warningBox.remove(), 300);
};
// 10秒后自动关闭
setTimeout(() => {
if (document.getElementById('popup-blocked-warning')) {
warningBox.style.animation = 'slideDown 0.3s ease-out reverse';
setTimeout(() => warningBox.remove(), 300);
}
}, 10000);
}
// 显示授权提示 UI（不使用 window.confirm，浏览器会拦截，需要第三方实现一个弹框）
function showAuthPrompt(missingScopes, mergedScopes, onConfirm, onCancel) {
// 移除可能存在的旧提示
const existingPrompt = document.getElementById('auth-prompt-box');
if (existingPrompt) {
existingPrompt.remove();
}
// 提示框
const promptBox = document.createElement('div');
promptBox.id = 'auth-prompt-box';
promptBox.style.cssText = `
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: white;
padding: 20px;
border-radius: 4px;
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
z-index: 99999;
min-width: 300px;
`;
// 内容
promptBox.innerHTML = `
需要新增权限
缺失权限：${missingScopes.join(', ')}
`;
document.body.appendChild(promptBox);
// 按钮事件
document.getElementById('auth-confirm-btn').onclick = () => {
console.log('[授权提示] 用户点击授权');
document.body.removeChild(promptBox);
if (typeof onConfirm === 'function') {
onConfirm(mergedScopes);
}
};
document.getElementById('auth-cancel-btn').onclick = () => {
console.log('[授权提示] 用户取消');
document.body.removeChild(promptBox);
if (typeof onCancel === 'function') {
onCancel();
}
};
}
// 初始化弹窗检测器（拦截 window.open）
function initPopupBlockDetector() {
const originalWindowOpen = window.open;
window.open = function (...args) {
const popup = originalWindowOpen.apply(this, args);
// 检测弹窗是否被阻止
if (!popup || popup.closed || typeof popup.closed === 'undefined') {
console.error('[弹窗检测] 浏览器阻止了弹窗');
showPopupBlockedWarning();
return null;
}
return popup;
};
}
// 导出到全局
window.showPopupBlockedWarning = showPopupBlockedWarning;
window.showAuthPrompt = showAuthPrompt;
window.initPopupBlockDetector = initPopupBlockDetector;
```
### 后端接口
见 [后端接口实现](#后端api接口示例)
## 使用指南
### 传参说明
```typescript
{
agentId:string; // 组件使用的智能体ID---必选参数
welcomeMessage:string; // 组件欢迎页显示文案
className:string; // 组件最外层自定义样式
agentChatClassName:IAgentChatClassNameType; // 组件定制区域自定义样式
initialExpanded:boolean; // 是否初始化展开组件，默认为false
floatingButtonTips:string; // 最小化状态下的tooltip文案
locale:ILocaleType; // 组件语言配置
presetQuestions:string[]; // 欢迎页默认问题配置
agentExtraButtons:IExtraButton[]; // AI消息自定义按钮配置
userExtraButtons:IExtraButton[]; // 用户消息自定义按钮配置
onChatMessageChannel:string; // 对话消息监听的唯一频道号
customAiMessageComponenent:ReactNode; // 自定义AI消息组件
onAgentChatClose:function(); // 组件关闭事件回调
hideTitleActions:boolean; // 是否隐藏标题栏右侧操作按钮，默认为false
hideMinimizeTooltip:boolean; // 是否隐藏最小化状态下的tooltip显示，默认为false
shouldShowUploadButton:boolean; // 是否显示知识库上传按钮，默认为true
}
```
```typescript
interface IAgentChatClassNameType {
chatTitle?:string; // 自定义头部样式，选填
chatWelcome?:string; // 自定义欢迎页样式，选填
chatQuestion?:string; // 自定义默认问题样式，选填
chatAction?:string; // 自定义快捷指令样式，选填
chatActionMore?:string; // 自定义快捷指令“更多”，单个按钮样式，选填
chatInput?:string; // 自定义输入框样式，选填
}
enum ILocaleType {
// 中文简体变体
zh: 'zh',
'zh-cn': 'zh',
zh_cn: 'zh',
chinese: 'zh',
chs: 'zh',
'zh-hans': 'zh',
// 中文繁体变体
tw: 'tw',
'zh-tw': 'tw',
zh_tw: 'tw',
'zh-hk': 'tw',
'zh-mo': 'tw',
'zh-hant': 'tw',
taiwanese: 'tw',
cht: 'tw',
// 英文变体
en: 'en',
'en-us': 'en',
en_us: 'en',
'en-gb': 'en',
'en-au': 'en',
'en-ca': 'en',
english: 'en',
eng: 'en',
}
interface IExtraButton {
element:ReactNode; // 自定义按钮组件，必填参数
className?:string; // 自定义按钮包裹层自定义样式，选填
title?:string; // 自定义按钮标题，选填
text?:string; // 自定义按钮文本，选填
action?: (data: ImessageData) => void; // 自定义按钮回调事件，选填
}
interface ImessageData {
message_id:string; // 消息唯一ID
}
```
### 代码示例
#### 修改欢迎页配置
```javascript
const AgentChat = OpenSDK.create('kso-agentspace-chat', {
agentId: "×××××××××", // 填入需要使用的智能体ID
welcomeMessage:"欢迎来到对话页欢迎页界面，请开始你的操作." // 修改欢迎页文案
presetQuestions:["默认问题1","自定义问题2","test3"] // 修改欢迎页默认问题
});
AgentChat.mount(document.getElementById('agentspace-container')); // 组件渲染
```
#### 修改组件语言配置
```javascript
const AgentChat = OpenSDK.create('kso-agentspace-chat', {
agentId: "×××××××××", // 填入需要使用的智能体ID
locale:"zh-tw" // 切换为中文繁体
});
AgentChat.mount(document.getElementById('agentspace-container')); // 组件渲染
```
#### 隐藏顶部操作按钮、最小化tooltip
```javascript
const AgentChat = OpenSDK.create('kso-agentspace-chat', {
agentId: "×××××××××", // 填入需要使用的智能体ID
hideTitleActions:true, // 隐藏顶部操作按钮
hideMinimizeTooltip:true, // 隐藏最小化tooltip显示
});
AgentChat.mount(document.getElementById('agentspace-container')); // 组件渲染
```
#### 添加关闭回调事件
```javascript
const AgentChat = OpenSDK.create('kso-agentspace-chat', {
agentId: "×××××××××", // 填入需要使用的智能体ID
onAgentChatClose:() => {
// 自定义关闭事件
console.log("agentspace-chat关闭!");
}
});
AgentChat.mount(document.getElementById('agentspace-container')); // 组件渲染
```
#### 自定义组件样式
```javascript
const AgentChat = OpenSDK.create('kso-agentspace-chat', {
agentId: "×××××××××", // 填入需要使用的智能体ID
className:"p-4 m-4", // 组件整体自定义样式
agentChatClassName:{
chatTitle:'bg-white',
chatWelcome:'mt-4',
chatQuestion:'border rounded-md p-2 bg-[#f5f5f5] border-green-200',
chatAction:'bg-whitet border rounded-md p-2 border-red-200 hover:bg-gray-200',
chatActionMore:'border rounded-md p-2 border-red-500',
chatInput:'text-red-500'
}, // 组件区域自定义样式
});
AgentChat.mount(document.getElementById('agentspace-container')); // 组件渲染
```
#### 添加自定义按钮及回调事件
```javascript
const AgentChat = OpenSDK.create('kso-agentspace-chat', {
agentId: "×××××××××", // 填入需要使用的智能体ID
agentExtraButtons: [
{
element: , // 自定义AI消息按钮组件
className:'flex gap-[6px] rounded-md border-none px-1 py-1 text-xs font-normal text-[#000] hover:bg-[#f4f4f5]',
action:(data: { message_id: string }) => {
console.log('智能体测试按钮被点击', data);
},
},
], // 添加AI消息自定义按钮及回调事件
userExtraButtons: [
{
element: , // 自定义用户消息按钮组件
className:'flex gap-[6px] rounded-md border-none px-1 py-1 text-xs font-normal text-[#000] hover:bg-[#f4f4f5]',
action:(data: { message_id: string }) => {
console.log('用户测试按钮被点击', data);
},
},
],
});
AgentChat.mount(document.getElementById('agentspace-container')); // 组件渲染
```
#### 自定义AI消息组件渲染及对话数据获取
传入的自定义AI消息组件必须包含可接收message和onChatMessage的props，用于消息数据的获取和对话流式数据的监听
```typescript
/**
* 自定义 AI 消息组件 props定义
*/
interface ICustomAiMessageProps {
message?: IMessage; // 会话消息数据
onChatMessage?: (callback: (data: IChatMessage) => void) => () => void; // 对话数据监听
// 其他props
......
}
/**
* 自定义 AI 消息组件示例
*/
import { useState, useEffect } from 'react';
import type { IMessage, IChatMessage } from '@/types';
const TestCustomAiMessageComponent: React.FC = ({
message,
onChatMessage,
}) => {
const [streamContent, setStreamContent] = useState('');
// 监听流式消息
useEffect(() => {
if (!onChatMessage || message?.category === 'message') return;
const unsubscribe = onChatMessage((data: IChatMessage) => {
if (data.type === 'answer') {
// 完整消息
setStreamContent(data.content || '');
} else if (data.type === 'answer_chunk') {
// 流式片段
setStreamContent((prev) => prev + (data.content_chunk || ''));
}
});
return unsubscribe;
}, [onChatMessage, message?.category]);
// 决定显示内容
const displayText = message?.category === 'message'
? message?.text || ''
: streamContent || message?.text || '';
return (
{displayText}
);
};
export default TestCustomAiMessageComponent;
```
关键类型定义
```typescript
// 事件数据类型定义
interface EventMessage {
type: string;
content: string;
content_type: string;
seq_id: number;
step: number;
parent_step: number;
timestamp: string;
run_id: string;
extra_info?: Record;
};
// 工具类型定义
interface Tools {
id: string;
name: string;
version: string;
display_name: string;
}
// 消息数据类型定义
interface IMessage {
chat_id?: string; // 聊天会话ID
flow_id: string;
text: string; // 消息文本内容
sender: string;
sender_name: string;
session_id: string; // 会话ID
timestamp: string;
files: Array;
id: string;
frontend_id: string;
edit: boolean;
background_color: string;
text_color: string;
category?: string;
properties?: any;
content_blocks?: ContentBlock[]; // 内容块列表（结构化内容展示）
event_messages?: EventMessage[]; // 消息相关事件列表
wps_tools: Tools[]; // WPS 工具调用列表
role?: string;
knowledges?: string;
isError?: boolean;
};
// 对话数据类型定义
interface IChatMessage {
role: 'user' | 'assistant'; // 对话ID
type: string;
run_id: string;
content: string;
content_chunk: string;
content_type: string;
seq_id: number;
step: number;
parent_step: number;
chat_id: string;
session_id: string;
timestamp: string;
extra_info: Record;
message_id: string;
}
```
自定义AI消息组件消息数据获取和渲染说明
```typescript
const TestCustomAiMessageComponent: React.FC = ({
message,
onChatMessage,
}) => {
// 其他状态处理和函数
// 监听流式消息
useEffect(() => {
const unsubscribe = onChatMessage((data: IChatMessage) => {
// 处理流式数据，固定判断为 message?.category ==='message'，表达式为false时该组件在对话中
if(message?.category ==='message') return;
if (data.type === 'answer') {
// 完整消息
setStreamContent(data.content || '');
} else if (data.type === 'answer_chunk') {
// 流式片段
setStreamContent((prev) => prev + (data.content_chunk || ''));
}
});
return unsubscribe;
}, [onChatMessage, message?.category]);
// 根据固定判断 message?.category === 'message'和自定义状态进行选择，可以选择渲染消息历史数据，或者使用自定义数据进行渲染
// 示例：处于对话状态中时渲染自定义状态的数据，否则渲染历史消息数据
const displayText = message?.category === 'message'
? message?.text || ''
: streamContent || message?.text || '';
return (
{displayText}
);
};
```
初始化定义及组件渲染
```javascript
const AgentChat = OpenSDK.create('kso-agentspace-chat', {
agentId: "×××××××××", // 填入需要使用的智能体ID
onChatMessageChannel: 'test-chat-message-channel', // 设置监听频道号，唯一字符串即可
customAiMessageComponent: , // 传入自定义的AI消息组件
});
AgentChat.mount(document.getElementById('agentspace-container')); // 组件渲染
```
