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

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

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

@@ -2,18 +2,15 @@
   <div class="agent-card">
     <div class="header-section">
       <div class="image-container">
-        <img :src="cozeInfo.icon_url"  alt="" />
+        <img :src="cozeInfo.icon_url" alt="" />
       </div>
     </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
-              class="status-icon"
-              :src="workflow"
-            />
+            <img 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) => {
-  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(() => {
-});
+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 {