refactor(agent): 重构智能体页面布局和样式

-调整了智能体卡片的布局结构，优化了标题和描述的显示方式
- 改进了历史对话的展示样式，增加了滚动指示器
- 统一了标签和图标的样式，提升了视觉一致性
- 优化了搜索框和卡片列表的样式，提高了用户体验

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

@@ -1,34 +1,51 @@
 <template>
-  <div class="container">
-    <div class="header-image-container">
-      <div class="header-image">
-        <img :src="cozeInfo?.icon_url" alt="Header Image" />
+  <div class="agent-card">
+    <div class="header-section">
+      <div class="image-container">
+        <img :src="cozeInfo.icon_url" alt="" />
       </div>
     </div>
-    <div class="title-container">
-      <div class="title">{{cozeInfo?.name}}</div>
-      <div class="tag">
-        <div class="">
-          <img
-            class="status-icon"
-            :src="workflow"
-          />
+    <div class="info-section">
+      <div class="title-group">
+        <div class="title">{{cozeInfo.name}}</div>
+        <div class="tag">
+          <div class="">
+            <img
+              class="status-icon"
+              :src="workflow"
+            />
+          </div>
+          <div class="text">工作流</div>
         </div>
-        <div class="tag-text">工作流</div>
       </div>
-      <div class="usage-stats">
-        <div class="usage-count">{{cozeInfo?.views}}</div>
-        <div class="usage-label">次使用</div>
+      <div class="usage-info">
+        <div class="count">{{cozeInfo.views}}</div>
+        <div class="label">次使用</div>
       </div>
     </div>
-    <div class="description">
-      {{cozeInfo?.description}}
+    <div class="description-section">
+      <div class="description">
+        {{cozeInfo.description}}
+      </div>
     </div>
+    <div class="divider"></div>
+    <!--    <div class="history-section">-->
+    <!--      <div class="history-title">-->
+    <!--        <div class="text">历史对话</div>-->
+    <!--      </div>-->
+    <!--      <div class="history-list">-->
+    <!--        <div class="history-item">-->
+    <!--          <div class="item-text">梳理这次舆情的时间线和关键节点</div>-->
+    <!--        </div>-->
 
+    <!--      </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({
@@ -36,16 +53,32 @@ const props = defineProps({
     type: Object as () => any,
     default: () => ({}),
   },
-  botId: {
-    type: String,
-    default: '',
-  },
 });
 
+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>
 
 <style scoped>
-@import "./history.scss";
+@import './history.scss';
 </style>