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

- 重新设计了页面布局，分为左、右两个主要区域
- 左侧区域增加了聊天机器人信息展示，包括头像、名称、描述等
- 右侧区域保留聊天窗口，并增加了顶部栏
-优化了响应式布局，使页面在不同屏幕尺寸下都能良好显示
- 调整了颜色、字体等样式，提升了页面视觉效果

src/api/all/agent.ts

@@ -40,3 +40,15 @@ export const delWorkflowHistoryApi = (id:number) => {
 export const getSyncWorkflowTaskApi = (params: any) => {
   return Http.get(`/v1/agent/getSyncWorkflowTask`, params);
 };
+//置顶
+export const topWorkflowHistoryApi = (id: number) => {
+  return Http.post(`/v1/agent/topWorkflowHistory/${id}`);
+};
+//取消指定
+export const cancelTopWorkflowHistoryApi = (id: number) => {
+  return Http.post(`/v1/agent/cancelTopWorkflowHistory/${id}`);
+};
+
+export const getWorkflowHistoryListApi = (param: any) => {
+  return Http.get(`/v1/agent/getWorkflowHistoryList`, param);
+};

src/views/agent/index/index.vue

@@ -2,14 +2,14 @@
   <div class="agent-wrap relative h-full">
     <a-input
       v-model="query.name"
-      @blur="getData()"
+      @press-enter="getData()"
       placeholder="搜索智能体"
       size="large"
       allow-clear
       class="absolute right-0 top-0 !w-400px"
     >
       <template #prefix>
-        <icon-search />
+        <icon-search @click="getData()" />
       </template>
     </a-input>
     <div  v-for="(item, index) in list" :key="index">

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

@@ -40,29 +40,35 @@
             <div class="item-body">
               <div class="text" @click="getHistoryInfo(item)">
                 {{ item.title }}
-                <!--                <a-trigger position="top" auto-fit-position :unmount-on-close="false">-->
-                <!--                  <SvgIcon size="12" name="svg-more" class="color-#6D4CFE" style="float: right" />-->
-                <!--                  <template #content>-->
-                <!--                    <div class="">-->
-                <!--                      <div class="history-item-dropdown">-->
-                <!--                        <div class="dropdown-item header-item">-->
-                <!--                          <SvgIcon size="12" name="svg-pin" class="icon color-#6D4CFE" />-->
-                <!--                          <div class="text">置顶</div>-->
-                <!--                        </div>-->
+                <a-trigger position="bottom" :auto-fit-position="false" :unmount-on-close="true">
+                  <SvgIcon size="12" name="svg-more" class="color-#6D4CFE" style="float: right" />
+                  <template #content>
+                    <div class="">
+                      <div class="history-item-dropdown">
+                        <div class="dropdown-item header-item">
+                          <SvgIcon size="12" name="svg-pin" class="icon color-#6D4CFE" />
+                          <div @click="(event) => handleTop(item.id, item.sort, event)" class="text">
+                            {{ item.sort > 1 ? '取消置顶' : '置顶' }}
+                          </div>
+                        </div>
                         <!--                        <div class="dropdown-item">-->
                         <!--                          <SvgIcon size="12" name="svg-edit" class="icon color-#6D4CFE" />-->
-                <!--                          <div class="text">重命名</div>-->
+                        <!--                          <div @click="editTitle(item)" class="text">重命名</div>-->
                         <!--                        </div>-->
-                <!--                        <div class="dropdown-item">-->
-                <!--                          <SvgIcon size="12" name="svg-delete" class="icon color-#6D4CFE" />-->
-                <!--                          <a-popconfirm content="你确认删除该历史对话吗" @ok="deleteHistory(item.id,index)" type="error">-->
-                <!--                            <div class="text delete">删除</div>-->
-                <!--                          </a-popconfirm>-->
-                <!--                        </div>-->
-                <!--                      </div>-->
-                <!--                    </div>-->
-                <!--                  </template>-->
-                <!--                </a-trigger>-->
+                        <div class="dropdown-item">
+                          <SvgIcon size="12" name="svg-delete" class="icon color-#6D4CFE" />
+                          <a-popconfirm
+                            content="你确认删除该历史对话吗"
+                            @ok="deleteHistory(item.id, index)"
+                            type="error"
+                          >
+                            <div class="text delete">删除</div>
+                          </a-popconfirm>
+                        </div>
+                      </div>
+                    </div>
+                  </template>
+                </a-trigger>
               </div>
             </div>
           </div>
@@ -92,13 +98,26 @@
         </div>
       </div>
     </div>
+
+    <a-modal style="width: 500px" v-model:visible="editHistoryVisible">
+      <template #title> Title</template>
+      <div></div>
+    </a-modal>
   </div>
 </template>
 
 <script setup>
 import { ref, reactive } from 'vue';
 import DynamicForm from './components/DynamicForm.vue';
-import { executeWorkFlow, getWorkFlowInfo, delWorkflowHistoryApi, getSyncWorkflowTaskApi } from '@/api/all/agent';
+import {
+  executeWorkFlow,
+  getWorkFlowInfo,
+  delWorkflowHistoryApi,
+  getSyncWorkflowTaskApi,
+  topWorkflowHistoryApi,
+  getWorkflowHistoryListApi,
+  cancelTopWorkflowHistoryApi,
+} from '@/api/all/agent';
 import { useRoute, useRouter } from 'vue-router';
 import { marked } from 'marked';
 import DOMPurify from 'dompurify';
@@ -107,6 +126,8 @@ import menuUnfold from '@/assets/svg/menu-unfold.svg';
 import { formatNumberShow } from '@/utils/tools';
 // import { WORKEXECUTE_STATUS } from '../AgentConstants.ts';
 
+const editHistoryVisible = ref(false);
+
 const formFields = ref({});
 const history = ref([]);
 // 是否折叠状态
@@ -161,11 +182,56 @@ const renderedMarkdown = computed(() => {
 const deleteHistory = async (id, index) => {
   const { code } = await delWorkflowHistoryApi(id);
   if (code === 200) {
-    //
     history.value.splice(index, 1);
   }
 };
 
+const historyForm = reactive({
+  id: 0,
+  title: '',
+});
+
+const editTitle = async (item) => {
+  historyForm.id = item.id;
+  historyForm.title = item.title;
+  editHistoryVisible.value = true;
+};
+
+const handleTop = async (id, sort, event) => {
+  if (sort > 0) {
+    canceltopHistory(id);
+  } else {
+    topHistory(id);
+  }
+  event.stopPropagation();
+};
+
+//置顶
+const topHistory = async (id, sort) => {
+  const { code, message } = await topWorkflowHistoryApi(id);
+  if (code === 200) {
+    AMessage.success(message);
+    getWorkflowHistoryList();
+  }
+};
+//取消置顶
+const canceltopHistory = async (id, sort) => {
+  const { code, message } = await cancelTopWorkflowHistoryApi(id);
+  if (code === 200) {
+    AMessage.success(message);
+    getWorkflowHistoryList();
+  }
+};
+
+const getWorkflowHistoryList = async () => {
+  const { code, data } = await getWorkflowHistoryListApi({
+    workflow_id: cozeInfo.workflow_id,
+  });
+  if (code === 200) {
+    history.value = data.list;
+  }
+};
+
 // 提交表单
 const handleSubmit = async (formData) => {
   try {
@@ -200,6 +266,9 @@ const getSyncWorkflowTask = async () => {
       if (data.execute_status === 'Success' || data.execute_status === 'Fail') {
         workFlowRes.output = data.output;
         clearTimeout();
+        if (!isEmpty(data.history)) {
+          addHistoryItem(data.history);
+        }
       }
     }
   } catch (error) {