Vue项目使用Coze的聊天窗（一）
背景：
vue项目中，调用扣子的agent发起聊天
实现：
快速实现：
- 在vue项目的
index.html文件中引入扣子Chat SDK
<!doctype html>
<html lang="en"><head><meta charset="UTF-8" /><link rel="icon" type="image/svg+xml" href="/favicon.ico" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>使用coze chat</title><script src="https://lf-cdn.coze.cn/obj/unpkg/flow-platform/chat-app-sdk/1.2.0-beta.17/libs/cn/index.js"></script></head><body><div id="app"></div><script type="module" src="/src/main.ts"></script><script>new CozeWebSDK.WebChatClient({/*** Agent or app settings* for agent* @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.isIframe - Whether to use the iframe method to open the chat box* @param config.appInfo.appId - AI app ID.* @param config.appInfo.workflowId - Workflow or chatflow ID.*/config: {type: 'bot',bot_id: '你的agent id',isIframe: false,},/*** 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: '你的token',onRefreshToken: async () => 'token'},/*** 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/eden-cn/lm-lgvj/ljhwZthlaukjlkulzlp/coze/coze-logo.png',nickname: 'User',},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/eden-cn/lm-lgvj/ljhwZthlaukjlkulzlp/coze/chatsdk-logo.png',layout: 'pc',lang: 'zh-CN',zIndex: 1000},/*** Controls whether to display the top title bar and the close button* @param header.isShow - Whether to display the top title bar.* @param header.isNeedClose - Whether to display the close button.*/header: {isShow: true,isNeedClose: true,},conversations: {isNeed: true},/*** 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: 'Powered by ...',},/*** 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: 'Coze Bot',uploadable: true,width: 390,},},});</script></body>
</html>将聊天窗作为一个vue组件
- 在vue项目的
index.html文件中引入扣子Chat SDK
<script src="https://lf-cdn.coze.cn/obj/unpkg/flow-platform/chat-app-sdk/1.2.0-beta.17/libs/cn/index.js"></script>
- 新建一个文件将聊天窗作为一个组件，
CozeChat.vue
<template><div ref="chatContainer" class="coze-chat" style="width: 800px; height: 600px"></div>
</template><script setup>
import "@coze/chat-sdk/webCss";
import { onMounted, ref } from "vue";const chatContainer = ref<HTMLDivElement | null>(null);chatContainer.value = new CozeWebSDK.WebChatClient({/*** Agent or app settings* for agent* @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.isIframe - Whether to use the iframe method to open the chat box* @param config.appInfo.appId - AI app ID.* @param config.appInfo.workflowId - Workflow or chatflow ID.*/config: {type: 'bot',bot_id: '你的agent id',isIframe: false,},/*** 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: '你的token',onRefreshToken: async () => 'token',},/*** 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/eden-cn/lm-lgvj/ljhwZthlaukjlkulzlp/coze/coze-logo.png',nickname: 'User',},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/eden-cn/lm-lgvj/ljhwZthlaukjlkulzlp/coze/chatsdk-logo.png',layout: 'pc',lang: 'zh-CN',zIndex: 1000,},/*** Controls whether to display the top title bar and the close button* @param header.isShow - Whether to display the top title bar.* @param header.isNeedClose - Whether to display the close button.*/header: {isShow: true,isNeedClose: true,},conversations: {isNeed: true,},/*** 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: 'Powered by ...',},/*** 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: 'Coze Bot',uploadable: true,width: 390,},},
})
</script><style scoped>
/* 可以根据需要自定义样式 */
</style>- 使用组件，实现聊天窗的唤起，App.vue
<!--扣子聊天窗 --><div style="height:100vh;"><CozeChat /></div>
效果展示：
