6a43cfad75
-调整了智能体卡片的布局结构，优化了标题和描述的显示方式 - 改进了历史对话的展示样式，增加了滚动指示器 - 统一了标签和图标的样式，提升了视觉一致性 - 优化了搜索框和卡片列表的样式，提高了用户体验
141 lines
3.2 KiB
Vue
141 lines
3.2 KiB
Vue
<template>
|
||
<div class="chat-wrap">
|
||
<span class="" @click="goChatIndex"> <icon-left /> 返回空间 </span>
|
||
<div class="chat-contain">
|
||
<a-layout>
|
||
<a-layout-sider class="custom-sider" >
|
||
<HistoryChat v-if="cozeInfo?.bot_id" :cozeInfo="cozeInfo" />
|
||
</a-layout-sider>
|
||
<a-layout>
|
||
<a-layout-content style="padding: 24px; background: #fff; min-height: 280px">
|
||
<a-card :bordered="false">
|
||
<div id="coze-chat-container" style="width: 100%; margin-left: 100px"></div>
|
||
</a-card>
|
||
</a-layout-content>
|
||
</a-layout>
|
||
</a-layout>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, onMounted } from 'vue';
|
||
import { getChatAgent } from '@/api/all/agent';
|
||
import HistoryChat from './components/HistoryChat.vue';
|
||
import { useRouter } from 'vue-router';
|
||
|
||
const router = useRouter();
|
||
|
||
// 存储认证令牌
|
||
const authToken = ref('');
|
||
|
||
// 模拟从API获取token
|
||
const fetchToken = async () => {
|
||
// 实际开发中应替换为真实的 API 请求
|
||
return new Promise((resolve) => {
|
||
setTimeout(() => {
|
||
resolve('pat_' + Math.random().toString(36).substring(2, 15));
|
||
}, 500);
|
||
});
|
||
};
|
||
|
||
// 刷新token
|
||
const refreshToken = async () => {
|
||
authToken.value = await fetchToken();
|
||
};
|
||
|
||
const goChatIndex = async () => {
|
||
router.push({
|
||
path: '/agent/index',
|
||
});
|
||
};
|
||
|
||
// 动态加载脚本函数
|
||
const loadScript = (src) =>
|
||
new Promise((resolve, reject) => {
|
||
const script = document.createElement('script');
|
||
script.src = src;
|
||
script.onload = resolve;
|
||
script.onerror = reject;
|
||
document.head.appendChild(script);
|
||
});
|
||
|
||
const route = useRoute();
|
||
const id = route.query.id;
|
||
const query = reactive({
|
||
id: id,
|
||
});
|
||
|
||
const cozeInfo = reactive({
|
||
title: '',
|
||
description: '',
|
||
icon_url: '',
|
||
bot_id: '',
|
||
auth: {},
|
||
});
|
||
|
||
let cozeWebSDK = null;
|
||
const initChat = async () => {
|
||
const { code, data } = await getChatAgent(query.id);
|
||
if (code != 200) {
|
||
return false;
|
||
}
|
||
|
||
Object.assign(cozeInfo, data.info);
|
||
await loadScript('https://lf-cdn.coze.cn/obj/unpkg/flow-platform/chat-app-sdk/1.2.0-beta.10/libs/cn/index.js');
|
||
let cozeConfig = await cozeWebSdkConfig(data.info.bot_id, data.info.name, data.info.auth, data.info.user_info);
|
||
cozeWebSDK = cozeWebSDK = new CozeWebSDK.WebChatClient(cozeConfig);
|
||
showChatPage();
|
||
};
|
||
|
||
const cozeWebSdkConfig = (botId, name, auth, userInfo) => {
|
||
auth.onRefreshToken = function () {
|
||
return '';
|
||
};
|
||
let config = {
|
||
config: {
|
||
botId: botId,
|
||
},
|
||
ui: {
|
||
chatBot: {
|
||
el: document.getElementById('coze-chat-container'),
|
||
width: '80%',
|
||
height: '100%',
|
||
title: name,
|
||
isNeedFunctionCallMessage: true,
|
||
},
|
||
base: {
|
||
icon: '',
|
||
zIndex: 1000,
|
||
},
|
||
footer: {
|
||
expressionText: '内容由AI生成，无法确保真实准确，仅供参考。',
|
||
},
|
||
},
|
||
auth: auth,
|
||
userInfo: userInfo,
|
||
header: {
|
||
isShow: true,
|
||
isNeedClose: false,
|
||
},
|
||
};
|
||
return config;
|
||
};
|
||
|
||
const showChatPage = () => {
|
||
cozeWebSDK.showChatBot();
|
||
};
|
||
|
||
onMounted(() => {
|
||
initChat();
|
||
});
|
||
onUnmounted(() => {
|
||
cozeWebSDK.destroy();
|
||
});
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
@import './style.scss';
|
||
|
||
</style>
|