feat(agent): 重构聊天页面布局,调整路由配置,优化Coze SDK集成逻辑
This commit is contained in:
@ -35,6 +35,17 @@ export const router = createRouter({
|
||||
id: MENU_GROUP_IDS.WORK_BENCH_ID,
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/agent/chat',
|
||||
name: 'Chat',
|
||||
component: () => import('@/views/Agent/chat'),
|
||||
meta: {
|
||||
hideSidebar: true,
|
||||
requiresAuth: false,
|
||||
requireLogin: true,
|
||||
id: MENU_GROUP_IDS.WORK_BENCH_ID,
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/permission',
|
||||
name: 'permission',
|
||||
|
||||
@ -13,7 +13,7 @@ const COMPONENTS: AppRouteRecordRaw[] = [
|
||||
name: 'Agent',
|
||||
redirect: 'agent/listData',
|
||||
meta: {
|
||||
locale: '品牌资产管理',
|
||||
locale: '扣子智能体',
|
||||
icon: IconRepository,
|
||||
requiresAuth: true,
|
||||
requireLogin: true,
|
||||
@ -21,14 +21,7 @@ const COMPONENTS: AppRouteRecordRaw[] = [
|
||||
id: MENU_GROUP_IDS.PROPERTY_ID,
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: 'chat',
|
||||
name: 'Chat',
|
||||
meta: {
|
||||
hideInMenu: true,
|
||||
},
|
||||
component: () => import('@/views/Agent/Chat'),
|
||||
},
|
||||
|
||||
],
|
||||
}
|
||||
];
|
||||
|
||||
@ -1,19 +1,33 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<!-- 聊天组件 -->
|
||||
<!-- -->
|
||||
<div>
|
||||
<a-row class="grid-demo">
|
||||
<a-col :span="24">
|
||||
<div>24 - 100%</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-row class="grid-demo">
|
||||
<a-col :span="4">
|
||||
<a-space direction="vertical">
|
||||
<a-space class="w-240px">1</a-space>
|
||||
<a-space>2</a-space>
|
||||
|
||||
</a-space>
|
||||
</a-col>
|
||||
<a-col :span="20">
|
||||
<div>
|
||||
<div id="coze-chat-container"></div>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { getChatAgent } from '@/api/all/agent';
|
||||
|
||||
const cozeConfig = ref({
|
||||
botId: '7522056630889381923',
|
||||
title: 'AI客服',
|
||||
});
|
||||
|
||||
// 存储认证令牌
|
||||
const authToken = ref('pat_tuIM7jubM1hLXaIWzbWg1U15lBe66AlYwu9BkXMQXInh8VdPszRFTwlTPmdziHwg');
|
||||
|
||||
@ -43,7 +57,7 @@ const loadScript = (src) =>
|
||||
});
|
||||
|
||||
const query = reactive({
|
||||
id: 0,
|
||||
id: 1,
|
||||
});
|
||||
|
||||
let cozeWebSDKConfig = reactive({
|
||||
@ -52,101 +66,21 @@ let cozeWebSDKConfig = reactive({
|
||||
userInfo: {},
|
||||
ui: {},
|
||||
});
|
||||
|
||||
let cozeWebSDK = null;
|
||||
const initChat = async () => {
|
||||
try {
|
||||
await getChat();
|
||||
await loadScript('https://lf-cdn.coze.cn/obj/unpkg/flow-platform/chat-app-sdk/1.2.0-beta.10/libs/cn/index.js');
|
||||
const cozeWebSDK = new CozeWebSDK.WebChatClient({
|
||||
config: {
|
||||
bot_id: cozeConfig.value.botId,
|
||||
},
|
||||
componentProps: {
|
||||
container: document.getElementById('coze-chat-container'),
|
||||
},
|
||||
auth: {
|
||||
type: 'token',
|
||||
token: authToken.value,
|
||||
onRefreshToken: async () => {
|
||||
const newToken = await fetchToken();
|
||||
authToken.value = newToken;
|
||||
return newToken;
|
||||
},
|
||||
},
|
||||
ui: {
|
||||
base: {
|
||||
icon: 'https://lf-coze-web-cdn.coze.cn/obj/coze-web-cn/obric/coze/favicon.1970.png',
|
||||
layout: 'pc',
|
||||
zIndex: 1000,
|
||||
},
|
||||
asstBtn: {
|
||||
isNeed: false,
|
||||
},
|
||||
footer: {
|
||||
isShow: true,
|
||||
expressionText: '内容由AI生成,无法确保真实准确,仅供参考。',
|
||||
},
|
||||
chatBot: {
|
||||
title: '智能体聊天室',
|
||||
uploadable: true,
|
||||
width: 800,
|
||||
el: document.getElementById('coze-chat-container'),
|
||||
onHide: () => {
|
||||
// todo...
|
||||
},
|
||||
onShow: () => {
|
||||
// todo...
|
||||
},
|
||||
},
|
||||
feedback: {
|
||||
isNeedFeedback: true,
|
||||
feedbackPanel: {
|
||||
title: '您对这个回答有什么看法?请告诉我们',
|
||||
placeholder: '请详细描述您的问题...',
|
||||
tags: [
|
||||
{
|
||||
label: '信息不正确',
|
||||
},
|
||||
{
|
||||
label: '涉及敏感信息',
|
||||
isNeedDetail: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
feedback: {
|
||||
isNeedFeedback: true,
|
||||
feedbackPanel: {
|
||||
title: '您对这个回答有什么看法?请告诉我们',
|
||||
placeholder: '请详细描述您的问题...',
|
||||
tags: [
|
||||
{
|
||||
label: '信息不正确',
|
||||
},
|
||||
{
|
||||
label: '涉及敏感信息',
|
||||
isNeedDetail: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('加载 Coze SDK 失败:', error);
|
||||
}
|
||||
showChatPage();
|
||||
};
|
||||
|
||||
const getChat = async () => {
|
||||
const { code, data } = await getChatAgent(query.id);
|
||||
if (code == 200) {
|
||||
console.log(data, 'data');
|
||||
Object.assign(cozeWebSDKConfig, data);
|
||||
console.log(data, 'data');
|
||||
} else {
|
||||
console.log('获取机器人配置失败');
|
||||
if (code != 200) {
|
||||
return false;
|
||||
}
|
||||
await loadScript('https://lf-cdn.coze.cn/obj/unpkg/flow-platform/chat-app-sdk/1.2.0-beta.10/libs/cn/index.js');
|
||||
let config = data;
|
||||
config.ui.chatBot.el = document.getElementById('coze-chat-container');
|
||||
config.ui.width = '900px';
|
||||
config.auth.onRefreshToken = function () {
|
||||
return 'pat_tuIM7jubM1hLXaIWzbWg1U15lBe66AlYwu9BkXMQXInh8VdPszRFTwlTPmdziHwg';
|
||||
};
|
||||
cozeWebSDK = cozeWebSDK = new CozeWebSDK.WebChatClient(config);
|
||||
showChatPage();
|
||||
};
|
||||
|
||||
const showChatPage = () => {
|
||||
|
||||
Reference in New Issue
Block a user