refactor(agent): 重构智能体模块

- 优化了路由配置，调整了菜单项的层级结构
- 重构了聊天页面的逻辑，简化了配置项
- 优化了历史聊天组件的使用方式
- 调整了智能体列表的展示样式

src/api/all/agent.ts

@@ -1,6 +1,7 @@
 import Http from '@/api';
 // 获取聊天智能体
 export const getChatAgent = (id: number) => {
+  console.log('param.id',id);
   return Http.get(`/v1/agent/getChatAgent/${id}`);
 };
 

src/router/routes/modules/agent.ts

@@ -7,24 +7,24 @@ const COMPONENTS: AppRouteRecordRaw[] = [
   {
     path: '/agent',
     name: 'Agent',
-    redirect: 'agent/listData',
+    redirect: 'agent/index',
     meta: {
       locale: '扣子智能体',
       icon: IconRepository,
       requiresAuth: true,
       requireLogin: true,
       roles: ['*'],
-      id: MENU_GROUP_IDS.AGENT,
+      id: MENU_GROUP_IDS.PROPERTY_ID,
     },
     children: [
       {
         path: 'index',
-        name: 'AgentListData',
+        name: 'AgentIndex',
         component: () => import('@/views/agent/index'),
         meta: {
-          locale: '智能体列表',
           requiresAuth: false,
           requireLogin: true,
+          id: MENU_GROUP_IDS.WORK_BENCH_ID,
         },
       },
       {
@@ -35,16 +35,7 @@ const COMPONENTS: AppRouteRecordRaw[] = [
           hideSidebar: true,
           requiresAuth: false,
           requireLogin: true,
-        },
-      },
-      {
-        path: 'workFlow',
-        name: 'AgentWorkFlow',
-        component: () => import('@/views/agent/work-flow'),
-        meta: {
-          hideSidebar: true,
-          requiresAuth: false,
-          requireLogin: true,
+          id: MENU_GROUP_IDS.WORK_BENCH_ID,
         },
       },
     ],

src/views/Agent/Chat/index.vue

@@ -4,11 +4,7 @@
     <div class="chat-contain">
       <a-layout>
         <a-layout-sider width="15%" style="background: #fff">
-          <HistoryChat
-            v-if="cozeWebSDKConfig?.config?.bot_id"
-            :cozeInfo="cozeInfo"
-            :botId="cozeWebSDKConfig?.config?.bot_id"
-          />
+          <HistoryChat v-if="cozeInfo?.bot_id" :cozeInfo="cozeInfo" />
         </a-layout-sider>
         <a-layout>
           <a-layout-content style="padding: 24px; background: #fff; min-height: 280px">
@@ -23,7 +19,7 @@
 </template>
 
 <script setup>
-import { ref, onMounted, onUnmounted } from 'vue';
+import { ref, onMounted } from 'vue';
 import { getChatAgent } from '@/api/all/agent';
 import HistoryChat from './components/HistoryChat.vue';
 import { useRouter } from 'vue-router';
@@ -70,90 +66,47 @@ const query = reactive({
   id: id,
 });
 
-const cozeWebSDKConfig = reactive({
-  config: {},
-  auth: {},
-  userInfo: {},
-  ui: {},
-});
-
 const cozeInfo = reactive({
   title: '',
   description: '',
   icon_url: '',
+  bot_id: '',
+  auth: {},
 });
 
-const cozeWebSDK = null;
+let cozeWebSDK = null;
 const initChat = async () => {
-  console.log(2323);
   const { code, data } = await getChatAgent(query.id);
   if (code != 200) {
     return false;
   }
-  Object.assign(cozeWebSDKConfig, data.cozeConfig);
+
   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 = await getChatAgent(data.info.bot_id, data.info.title);
-  config.ui = editUi(data);
-  config.auth.onRefreshToken = function () {
-    return 'pat_tuIM7jubM1hLXaIWzbWg1U15lBe66AlYwu9BkXMQXInh8VdPszRFTwlTPmdziHwg';
-  };
-  cozeWebSDK = new CozeWebSDK.WebChatClient(config);
+  let cozeConfig = await cozeWebSdkConfig(data.info.bot_id, data.info.name, data.info.auth);
+  cozeWebSDK = cozeWebSDK = new CozeWebSDK.WebChatClient(cozeConfig);
   showChatPage();
 };
 
-//扣子配置
-const cozeWebSdkConfig = (botId, title) => {
+const cozeWebSdkConfig = (botId, name, auth) => {
+  console.log(name, 'title');
+  auth.onRefreshToken = function () {
+    return 'pat_tuIM7jubM1hLXaIWzbWg1U15lBe66AlYwu9BkXMQXInh8VdPszRFTwlTPmdziHwg';
+  };
   let config = {
     config: {
-      bot_id: botId,
+      botId: botId,
     },
     ui: {
       chatBot: {
         el: document.getElementById('coze-chat-container'),
-        width: '70%',
+        width: '80%',
         height: '100%',
-        title: title,
+        title: name,
         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: {
-      el: document.getElementById('coze-chat-container'),
-      width: '70%',
-      height: '100%',
-      title: config?.info?.title,
-      isNeedFunctionCallMessage: true,
     },
+    auth: auth,
     base: {
       icon: '',
       zIndex: 1000,
@@ -163,7 +116,7 @@ const editUi = (config) => {
       isNeedClose: false,
     },
   };
-  return uiConfig;
+  return config;
 };
 
 const showChatPage = () => {
@@ -173,7 +126,6 @@ const showChatPage = () => {
 onMounted(() => {
   initChat();
 });
-//销毁组件
 onUnmounted(() => {
   cozeWebSDK.destroy();
 });

src/views/Agent/Index/index.vue

@@ -25,15 +25,8 @@
               <div class="card-description">{{ product?.description }}</div>
             </div>
             <div class="card-footer">
-              <div
-                :class="['tag', { red: product?.type === 1, blue: product?.type === 2 }]"
-              >
-                <div
-                  :class="[
-                    'tag-text',
-                    { red: product?.type === 1, blue: product?.type === 2 },
-                  ]"
-                >
+              <div :class="['tag', { red: product?.type === 1, blue: product?.type === 2 }]">
+                <div :class="['tag-text', { red: product?.type === 1, blue: product?.type === 2 }]">
                   {{ product?.type == 1 ? '对话式' : '工作流' }}
                 </div>
               </div>
@@ -67,7 +60,6 @@ const query = reactive({
   title: '',
 });
 const goDetail = (type: number, id: number) => {
-
   if (type === 1) {
     router.push({
       path: '/agent/chat',