refactor(agent): 重构智能体聊天页面

- 修改 HistoryChat组件中显示智能体名称而非标题
- 优化 Chat 页面初始化逻辑，添加组件卸载时的销毁操作
- 更新 Index 页面中智能体产品的展示方式

src/views/Agent/Chat/components/HistoryChat.vue

@@ -6,7 +6,7 @@
 
     <a-menu mode="inline" theme="light">
       <a-menu-item key="1">
-        <span class="menu-title">{{ cozeInfo.title }}</span>
+        <span class="menu-title">{{ cozeInfo.name }}</span>
         <span style="color: #8492ff; font-size: 12px">{{ cozeInfo.type == 1 ? '智能体' : '对话式' }}</span>
         <span style="float: right">{{ cozeInfo.views }}次使用</span>
         <p>{{ cozeInfo.description }}</p>

src/views/Agent/Chat/index.vue

@@ -23,10 +23,11 @@
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, onUnmounted } from 'vue';
 import { getChatAgent } from '@/api/all/agent';
 import HistoryChat from './components/HistoryChat.vue';
 import { useRouter } from 'vue-router';
+
 const router = useRouter();
 
 // 存储认证令牌
@@ -82,7 +83,7 @@ const cozeInfo = reactive({
   icon_url: '',
 });
 
-let cozeWebSDK = null;
+const cozeWebSDK = null;
 const initChat = async () => {
   console.log(2323);
   const { code, data } = await getChatAgent(query.id);
@@ -93,15 +94,57 @@ const initChat = async () => {
   Object.assign(cozeInfo, data.info);
   console.log(cozeWebSDKConfig?.config?.bot_id, 'cozeWebSDKConfig?.config?.bot_id');
   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.cozeConfig;
+  let config = await getChatAgent(data.info.bot_id, data.info.title);
   config.ui = editUi(data);
   config.auth.onRefreshToken = function () {
     return 'pat_tuIM7jubM1hLXaIWzbWg1U15lBe66AlYwu9BkXMQXInh8VdPszRFTwlTPmdziHwg';
   };
-  cozeWebSDK = cozeWebSDK = new CozeWebSDK.WebChatClient(config);
+  cozeWebSDK = new CozeWebSDK.WebChatClient(config);
   showChatPage();
 };
 
+//扣子配置
+const cozeWebSdkConfig = (botId, title) => {
+  let config = {
+    config: {
+      bot_id: botId,
+    },
+    ui: {
+      chatBot: {
+        el: document.getElementById('coze-chat-container'),
+        width: '70%',
+        height: '100%',
+        title: title,
+        isNeedFunctionCallMessage: true,
+      },
+      base: {
+        icon: '',
+        zIndex: 1000,
+      },
+      header: {
+        isShow: true,
+        isNeedClose: false,
+      },
+      feedback: {
+        isNeedFeedback: true,
+        feedbackPanel: {
+          title: '您对这个回答有什么看法？请告诉我们',
+          placeholder: '请详细描述您的问题...',
+          tags: [
+            {
+              label: '信息不正确',
+            },
+            {
+              label: '敏感涉及 信息',
+            },
+          ],
+        },
+      },
+    },
+  };
+  return config;
+};
+
 const editUi = (config) => {
   let uiConfig = {
     chatBot: {
@@ -130,6 +173,10 @@ const showChatPage = () => {
 onMounted(() => {
   initChat();
 });
+//销毁组件
+onUnmounted(() => {
+  cozeWebSDK.destroy();
+});
 </script>
 
 <style scoped lang="scss">

src/views/Agent/Index/index.vue

@@ -16,26 +16,25 @@
       <span class="span-title">{{ item.name }}</span>
       <a-row class="grid-demo" :gutter="24" v-if="item.agent_products.length > 0">
         <a-col :span="3" v-for="(product, k) in item.agent_products">
-
+          <div class="card-container" @click="goDetail(product?.type, product?.id)">
-          <div class="card-container" @click="goDetail(product?.agent_system?.type, product?.id)">
             <div class="card-image-container">
-              <img class="card-image" :src="product?.agent_system?.icon_url" />
+              <img class="card-image" :src="product?.icon_url" />
             </div>
             <div class="card-content">
-              <div class="card-title">{{ product?.title }}</div>
+              <div class="card-title">{{ product?.name }}</div>
-              <div class="card-description">{{ product?.agent_system?.description }}</div>
+              <div class="card-description">{{ product?.description }}</div>
             </div>
             <div class="card-footer">
               <div
-                :class="['tag', { red: product?.agent_system?.type === 1, blue: product?.agent_system?.type === 2 }]"
+                :class="['tag', { red: product?.type === 1, blue: product?.type === 2 }]"
               >
                 <div
                   :class="[
                     'tag-text',
-                    { red: product?.agent_system?.type === 1, blue: product?.agent_system?.type === 2 },
+                    { red: product?.type === 1, blue: product?.type === 2 },
                   ]"
                 >
-                  {{ product?.agent_system?.type == 1 ? '对话式' : '工作流' }}
+                  {{ product?.type == 1 ? '对话式' : '工作流' }}
                 </div>
               </div>
               <div class="usage-info">
@@ -68,6 +67,7 @@ const query = reactive({
   title: '',
 });
 const goDetail = (type: number, id: number) => {
+
   if (type === 1) {
     router.push({
       path: '/agent/chat',