refactor(agent): 优化客服和工作流界面布局和样式

- 调整了客服和工作流界面的栅格布局，优化了不同屏幕大小下的显示效果- 改进了历史聊天记录的展示方式，增加了 tooltip 和自适应布局
- 统一了聊天窗口的样式，增加了反馈功能- 优化了工作流内容区域的样式，使其更加适应长内容展示

src/views/agent/chat/components/HistoryChat.vue

@@ -7,7 +7,9 @@
     </div>
     <div class="info-section">
       <div class="title-group">
+        <a-tooltip :content="cozeInfo.name">
           <div class="title">{{ cozeInfo.name }}</div>
+        </a-tooltip>
         <div class="tag">
           <div>
             <img class="status-icon" :src="chatbotIcon" />
@@ -34,7 +36,6 @@
 
 <script lang="ts" setup>
 import { defineProps } from 'vue';
-import { delAgentMessage, getHistoryChat } from '@/api/all/agent';
 import chatbotIcon from '@/assets/svg/chatbot.svg';
 
 const props = defineProps({
@@ -44,26 +45,6 @@ const props = defineProps({
   },
 });
 
-const delMessage = async (chatId, conversationId) => {
-  const { code, data } = await delAgentMessage({ chat_id: chatId, conversation_id: conversationId });
-  if (code === 200) {
-    console.log(data, 'data');
-  }
-};
-
-const conversations = ref([]);
-
-const getHistoryChatData = async (botId) => {
-  const { code, data } = await getHistoryChat({ bot_id: botId });
-  if (code === 200) {
-    conversations.value = data.list;
-  }
-};
-const truncateText = (text: string, maxLength = 30) => {
-  if (text.length <= maxLength) return text;
-  return text.slice(0, maxLength) + '...';
-};
-
 onMounted(() => {});
 </script>
 

src/views/agent/chat/components/history.scss

@@ -37,7 +37,7 @@
 
   .info-section {
     align-self: stretch;
-    padding: 10px 0 0 10px;
+    padding: 10px 10px 0 12px;
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
@@ -55,6 +55,19 @@
         font-weight: 400;
         line-height: 26px;
         padding: 10px;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        max-width: 150px;
+        flex-shrink: 0;
+      }
+
+      @media (max-width: 768px) {
+        .title {
+          font-size: 16px;
+          padding: 8px;
+          max-width: 100px;
+        }
       }
 
       .tag {
@@ -92,16 +105,19 @@
         }
       }
     }
-
     .usage-info {
       padding: 12px;
-      margin-right: 12px;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+
       .count {
         color: var(--Text-2, #3C4043);
         font-size: 16px;
         font-family: 'Alibaba PuHuiTi', sans-serif;
         font-weight: 400;
         line-height: 24px;
+        white-space: nowrap;
       }
 
       .label {
@@ -110,10 +126,23 @@
         font-family: 'Alibaba PuHuiTi', sans-serif;
         font-weight: 400;
         line-height: 20px;
+        white-space: nowrap;
+      }
+      @media (max-width: 768px) {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 4px;
+        .count {
+          font-size: 14px;
+        }
+        .label {
+          font-size: 10px;
         }
       }
     }
 
+  }
+
   .description-section {
     align-self: stretch;
     overflow: hidden;
@@ -135,7 +164,6 @@
   }
 
 
-
   .history-section {
     align-self: stretch;
     flex: 1 1 0;

src/views/agent/chat/index.vue

@@ -2,36 +2,38 @@
   <div class="chat-wrap">
     <span @click="goChatIndex"> <icon-left /> 返回空间 </span>
     <div class="chat-contain">
-      <!-- 使用 arco-design 栅格布局 -->
       <a-row :gutter="24" class="chat-grid">
         <!-- 左侧 HistoryChat -->
-        <a-col     :xs="isCollapsed ? 0 : 24"
+        <a-col
-                   :sm="isCollapsed ? 0 : 12"
+          :xs="isCollapsed ? 0 : 3"
-                   :md="isCollapsed ? 0 : 8"
+          :sm="isCollapsed ? 0 : 4"
+          :md="isCollapsed ? 0 : 5"
           :lg="isCollapsed ? 0 : 6"
           :xl="isCollapsed ? 0 : 7"
-                   :xxl="isCollapsed ? 0 : 4"
+          :xxl="isCollapsed ? 0 : 7"
-                   class="history-chat-col">
+          class="history-chat-col"
+        >
           <HistoryChat v-if="cozeInfo?.bot_id && !isCollapsed" :cozeInfo="cozeInfo" />
         </a-col>
 
         <!-- 右侧聊天内容 -->
-        <a-col    :xs="24"
+        <a-col
-                  :sm="isCollapsed ? 24 : 12"
+          :xs="24"
-                  :md="isCollapsed ? 24 : 16"
+          :sm="isCollapsed ? 24 : 13"
-                  :lg="isCollapsed ? 24 : 18"
+          :md="isCollapsed ? 24 : 14"
+          :lg="isCollapsed ? 24 : 15"
           :xl="isCollapsed ? 24 : 16"
           :xxl="isCollapsed ? 24 : 16"
-                  class="chat-content-col">
+          class="chat-content-col"
-
+        >
           <a-card :bordered="false">
-            <div class="chat-content-col" style="min-height: fit-content;">
+            <div class="chat-content-col" style="min-height: fit-content">
               <div class="toggle-btn" @click="toggleCollapse">
                 <a-tooltip :content="isCollapsed ? '展开' : '折叠'">
                   <img class="status-icon" :src="isCollapsed ? menuUnfold : menuFold" />
                 </a-tooltip>
               </div>
-              <div id="coze-chat-container" ></div>
+              <div id="coze-chat-container"></div>
             </div>
           </a-card>
         </a-col>
@@ -107,7 +109,7 @@ const cozeInfo = reactive({
 let cozeWebSDK = null;
 const initChat = async () => {
   const { code, data } = await getChatAgent(query.id);
-  if (code != 200) {
+  if (code !== 200) {
     return false;
   }
 
@@ -129,15 +131,31 @@ const cozeWebSdkConfig = (botId, name, auth, userInfo) => {
     ui: {
       chatBot: {
         el: document.getElementById('coze-chat-container'),
-        width: '95%',
+        width: '100%',
         height: '100%',
         title: name,
         isNeedFunctionCallMessage: true,
+        feedback: {
+          isNeedFeedback: true,
+          feedbackPanel: {
+            title: '您对这个回答有什么看法？请告诉我们',
+            placeholder: '请详细描述您的问题...',
+            tags: [
+              {
+                label: '信息不正确',
+              },
+              {
+                label: '涉及敏感信息',
+                isNeedDetail: true,
+              },
+            ],
+          },
+        },
       },
       base: {
         icon: '',
         zIndex: 1000,
-        lang:'zh-CN'
+        lang: 'zh-CN',
       },
       footer: {
         expressionText: '内容由AI生成，无法确保真实准确，仅供参考。',
@@ -147,9 +165,9 @@ const cozeWebSdkConfig = (botId, name, auth, userInfo) => {
       },
       conversations: {
         isNeed: true,
-        isNeedAddNewConversationBoolean: true,
+        isNeedAddNewConversation: true,
-        isNeedQuoteBoolean: true,
+        isNeedQuote: true,
-      }
+      },
     },
     auth: auth,
     userInfo: userInfo,

src/views/agent/chat/style.scss

@@ -40,5 +40,9 @@
     }
   }
 
+  .toggle-btn{
+    margin-top: 10px;
+    margin-bottom: 10px;
+  }
 
 }

src/views/agent/index/style.scss

@@ -124,7 +124,6 @@
       gap: 4px;
 
       .status-icon {
-        width: 12px;
         height: 12px;
       }
 

src/views/agent/work-flow/components/DynamicForm.vue

@@ -79,7 +79,7 @@ const handleSubmit = async () => {
   padding: 24px;
   border: 1px solid #d7d7d9; /* 添加灰色边框 */
   background: var(--BG-White, white);
-  height: 70vh;
+  min-height: 70vh;
 
   :deep(.arco-input-wrapper),
   :deep(.arco-textarea-wrapper) {

src/views/agent/work-flow/components/HistoryChat.vue

@@ -7,13 +7,10 @@
     </div>
     <div class="info-section">
       <div class="title-group">
-        <div class="title">{{cozeInfo.name}}</div>
+        <div class="title">{{ cozeInfo.name }}</div>
         <div class="tag">
           <div class="">
-            <img
+            <img class="status-icon" :src="workflow" />
-              class="status-icon"
-              :src="workflow"
-            />
           </div>
           <div class="text">工作流</div>
         </div>
@@ -30,16 +27,14 @@
 
     <div class="description-section">
       <div class="description">
-        {{cozeInfo.description}}
+        {{ cozeInfo.description }}
       </div>
     </div>
-
   </div>
 </template>
 
 <script lang="ts" setup>
 import { defineProps } from 'vue';
-import { delAgentMessage, getHistoryChat } from '@/api/all/agent';
 import workflow from '@/assets/svg/workflow.svg';
 
 const props = defineProps({
@@ -49,28 +44,7 @@ const props = defineProps({
   },
 });
 
-const delMessage = async (chatId, conversationId) => {
+onMounted(() => {});
-  const { code, data } = await delAgentMessage({ chat_id: chatId, conversation_id: conversationId });
-  if (code === 200) {
-    console.log(data, 'data');
-  }
-};
-
-const conversations = ref([]);
-
-const getHistoryChatData = async (botId) => {
-  const { code, data } = await getHistoryChat({ bot_id: botId });
-  if (code === 200) {
-    conversations.value = data.list;
-  }
-};
-const truncateText = (text: string, maxLength = 30) => {
-  if (text.length <= maxLength) return text;
-  return text.slice(0, maxLength) + '...';
-};
-
-onMounted(() => {
-});
 </script>
 
 <style scoped>

src/views/agent/work-flow/components/history.scss

@@ -93,6 +93,7 @@
     .usage-info {
       padding: 12px;
       margin-right: 12px;
+      margin-top: 10px;
       .count {
         color: var(--Text-2, #3C4043);
         font-size: 16px;

src/views/agent/work-flow/index.vue

@@ -10,7 +10,7 @@
           :sm="isCollapsed ? 0 : 3"
           :md="isCollapsed ? 0 : 4"
           :lg="isCollapsed ? 0 : 6"
-          :xl="isCollapsed ? 0 : 7"
+          :xl="isCollapsed ? 0 : 8"
           :xxl="isCollapsed ? 0 : 5"
         >
           <HistoryChat v-if="!isCollapsed" :cozeInfo="cozeInfo" />
@@ -36,12 +36,11 @@
         <!-- 主内容区域 -->
         <a-col
           class="right-box content-container"
-          style="height: 70vh"
           :xs="isCollapsed ? 4 : 2"
           :sm="isCollapsed ? 4 : 4"
           :md="isCollapsed ? 6 : 6"
           :lg="isCollapsed ? 8 : 8"
-          :xl="isCollapsed ? 10 : 10"
+          :xl="isCollapsed ? 10 : 9"
           :xxl="isCollapsed ? 12 : 12"
         >
           <a-spin v-if="loading" class="spin-center" tip="生成中。。。" />

src/views/agent/work-flow/style.scss

@@ -27,6 +27,10 @@
   .content-container {
     width: 40%;
     background-color: #fff;
+    min-height: 70vh; // 初始高度
+    overflow: auto;    // 允许滚动
+    word-wrap: break-word;
+    white-space: pre-wrap;
   }
 
   .work-res-span {