Procházet zdrojové kódy

feat: 优化对话界面以及历史记录界面

zhupei@smartai.com před 1 rokem
rodič
revize
2809d45d54

+ 16 - 49
src/views/conversation/ConversationChatContainer.vue

@@ -12,7 +12,16 @@
       />
 
       <div class="conversation-chat-content">
-        <DialogWelcome v-if="show_welcome" class="conversation-chat-area" :agent_info="CHAT_AGENT_INFOMATION" />
+        <template v-if="show_welcome">
+          <!-- 有会话ID 获取历史记录,显示加载中状态 -->
+          <div v-if="session_id" class="conversation-chat-area history-list-loading">
+            <a-spin />
+          </div>
+
+          <!-- 无会话ID,直接对话,此时可现实欢迎消息:欢迎使用报表合并、欢迎使用文档智能、欢迎使用小数绘图 -->
+          <DialogWelcome v-if="!session_id" class="conversation-chat-area" :agent_info="CHAT_AGENT_INFOMATION" />
+        </template>
+
         <DialogList
           v-if="!show_welcome"
           ref="list_scroller"
@@ -66,9 +75,6 @@ import DialogInputTop from '../../modules/conversation-chat/DialogInputTop.vue';
 import DialogFooter from '../../modules/conversation-chat/DialogFooter.vue';
 import DialogAsideRight from '../../modules/conversation-chat/DialogAsideRight.vue';
 
-// import { useAllAgentStore } from '../../base/store/use-all-agents';
-// import getChatAgentInfomation from '../../modules/conversation-board/get-chat-agent-infomation';
-
 import useWebSocketChat from '../../modules/conversation-dialog/use-websocket-chat';
 import {
   getHistoryLogs,
@@ -94,11 +100,6 @@ import useInputClear from './use-input-clear';
 import useInputGetOptions from './use-input-get-options';
 import useScroll2Bottom from './use-scroll-bottom';
 
-/**
- * 1. 历史会话进入此页面,展示历史会话内容
- * 2. 点击智能体,新建会话
- */
-
 const props = defineProps({
   /**
    * 智能体的ID
@@ -115,23 +116,8 @@ const props = defineProps({
    * 如果有此参数,则意味着获取该对话的记录内容
    */
   session_id: String
-
-  // chat_type: String
 });
 
-// const allAgents = useAllAgentStore();
-
-// /**
-//  * 对话使用到的agent信息
-//  * agent属性是由接口返回的数据
-//  * config属性是客户端自定义的数据,针对特定的agent的一些个性化配置,可由此进行配置
-//  * 二者结合,形成对话组件所需要的一些参数
-//  */
-// const CHAT_AGENT_INFOMATION = ref({
-//   agent: {},
-//   config: {}
-// });
-
 /**
  * input的一些操作方法
  */
@@ -233,17 +219,6 @@ const current_menu_id = computed(() => {
   const menu_id = agent.menuId / 1;
   return menu_id;
 });
-// /**
-//  * 当前对话的类型
-//  * 目前已知类型有量类: excel 和 其他类
-//  * 当类别为excel时,文件上传接口和对话websocket链接都不一样
-//  */
-// const current_chat_type = computed(() => {
-//   const menu_id = current_menu_id.value;
-//   const chat_type = menu_id === 1 ? 'excel' : '';
-
-//   return chat_type;
-// });
 
 /**
  * 是否显示欢迎页
@@ -702,20 +677,6 @@ onMounted(() => {
   const agent_id = props.agent_id;
   const session_id = props.session_id;
 
-  // /**
-  //  * 根据agent_id 查询到agent的基本信息
-  //  * 从而确定agent的相关功能支持,例如:是否需要上传文件,支持上传什么类型的文件、支持上传多少个文件?
-  //  * 例如:主题、背景、等等
-  //  */
-  // CHAT_AGENT_INFOMATION.value = getChatAgentInfomation(agent_id);
-
-  // /**
-  //  * 设置页面标题
-  //  */
-  // const agent = CHAT_AGENT_INFOMATION.value.agent;
-  // const agent_name = agent.name;
-  // document.title = document.title + '-' + agent_name;
-
   // 组件挂载
   if (session_id) {
     // 有历史记录:获取历史记录内容进行展示
@@ -815,6 +776,12 @@ onUnmounted(() => {
   flex-grow: 1;
   overflow: auto;
 }
+
+.history-list-loading {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
 .conversation-chat-input {
   /* height: 100px; */
   /* background-color: #a67777; */

+ 29 - 4
src/views/conversation/ConversationHistoryContainer.vue

@@ -95,10 +95,35 @@ function dropListByType(res_list) {
     const content_item = item; // 数据项目
 
     // const create_time = content_item.updated_time; // 会话创建时间
-    const create_time_str = content_item.create_date; // "2024-12-18 11:45:23"
-    const create_time = new Date(create_time_str);
+    // const create_time_str = content_item.create_date; // "2024-12-18 11:45:23"
+
+    /**
+     * 在后端返回的数据中
+     * 有些情况下,存在 create_date 字段
+     * 另外一些情况下,存在 updated_time字段
+     */
+    const createTime = new Date(content_item.create_date);
+    const createStamp = createTime.getTime();
+
+    let create_stamp = null;
+    if (isNaN(createStamp)) {
+      // 非法的
+
+      // 使用updated_time
+      const updateTime = new Date(content_item.updated_time);
+      const updateStamp = updateTime.getTime();
+
+      if (isNaN(updateStamp)) {
+        // 非法的: 使用此刻的数据,意味着所有的数据都是今天的
+        create_stamp = Date.now();
+      } else {
+        create_stamp = updateStamp;
+      }
+    } else {
+      create_stamp = createStamp;
+    }
 
-    if (create_time >= today_zero) {
+    if (create_stamp >= today_zero) {
       // 今天的数据
       if (count_today.value === 0) {
         label_item = {
@@ -113,7 +138,7 @@ function dropListByType(res_list) {
       content_item.client_field_content_type = 'content'; // 内容类别
 
       count_today.value = count_today.value + 1;
-    } else if (create_time < today_zero && create_time > last_month_zero) {
+    } else if (create_stamp < today_zero && create_stamp > last_month_zero) {
       // 本月的数据
       if (count_month.value === 0) {
         label_item = {