我正在尝试通过以下方式在 Web 端集成 Chat SDK：

```

```

但遇到的问题是，聊天窗口（Chatbox）始终显示为空白。由于一些历史项目无法使用 npm install @coze/chat-sdk 进行安装和集成，希望可以提供 Chat SDK 的开源版本对应的 CDN 文件，以便直接在浏览器中使用。

下面是我的完整代码
```

/* 自定义悬浮入口的位置 */
#position_demo {
position: absolute;
right: 10px;
bottom: 20px;
}

Hello World

new CozeWebSDK.WebChatClient({
/**
* Agent or app settings
* for agenta c
* @param config.bot_id - Agent ID.
* for app
* @param config.type - To integrate a Coze app, you must set the value to app.
* @param config.appInfo.appId - AI app ID.
* @param config.appInfo.workflowId - Workflow or chatflow ID.
*/
config: {
isIframe: true,
appInfo:{
appId: 'xxx',
},
},

setting:{
apiBaseUrl: "xxxxxx", // coze studio openapi url
requestHeader: {},
logLevel: "debug",
},
/**
* The auth property is used to configure the authentication method.
* @param type - Authentication method, default type is 'unauth', which means no authentication is required; it is recommended to set it to 'token', which means authentication is done through PAT (Personal Access Token) or OAuth.
* @param token - When the type is set to 'token', you need to configure the PAT (Personal Access Token) or OAuth access key.
* @param onRefreshToken - When the access key expires, a new key can be set as needed.
*/
auth: {
type: 'token',
token: 'pat_2ac0171df7325766a76c68e88e370a2f90cc2cb4ae375d2885d36c156aed5385',
onRefreshToken: async () => '',
},
/**
* The userInfo parameter is used to set the display of agent user information in the chat box.
* @param userInfo.id - ID of the agent user.
* @param userInfo.url - URL address of the user's avatar.
* @param userInfo.nickname - Nickname of the agent user.
*/
userInfo: {
id: 'user',
url: 'https://lf-coze-web-cdn.coze.cn/obj/coze-web-cn/obric/coze/favicon.1970.png',
nickname: 'UserA',
},
ui: {
/**
* The ui.base parameter is used to add the overall UI effect of the chat window.
* @param base.icon - Application icon URL.
* @param base.layout - Layout style of the agent chat box window, which can be set as 'pc' or'mobile'.
* @param base.lang - System language of the agent, which can be set as 'en' or 'zh-CN'.
* @param base.zIndex - The z-index of the chat box.
*/
base: {
icon: 'https://lf-coze-web-cdn.coze.cn/obj/coze-web-cn/obric/coze/favicon.1970.png',
layout: 'pc',
lang: 'en',
zIndex: 1000,
},
/**
* Control the UI and basic capabilities of the chat box.
* @param chatBot.title - The title of the chatbox
* @param chatBot.uploadable - Whether file uploading is supported.
* @param chatBot.width - The width of the agent window on PC is measured in px, default is 460.
* @param chatBot.el - Container for setting the placement of the chat box (Element).
*/
chatBot: {
title: '扣子小助手',
uploadable: true,
width: 390
},
/**
* Controls whether to display the floating ball at the bottom right corner of the page.
*/
asstBtn: {
isNeed: true,
},
/**
* The ui.footer parameter is used to add the footer of the chat window.
* @param footer.isShow - Whether to display the bottom copy module.
* @param footer.expressionText - The text information displayed at the bottom.
* @param footer.linkvars - The link copy and link address in the footer.
*/
footer: {
isShow: true,
expressionText: '由{{name}}提供。内容均由 AI 生成，仅供参考',
linkvars: {
name: {
text: '扣子',
link: 'https://www.coze.cn/'
}
}
}
},
});

```