Kaynağa Gözat

feat: 完善对话板块,优化错误提示内容

zhupei@smartai.com 1 yıl önce
ebeveyn
işleme
dd0ca14c29

+ 0 - 1
src/base/store/use-all-agents.js

@@ -59,7 +59,6 @@ export const useAllAgentStore = defineStore('all_agents', {
       }
 
       const list = this.getList();
-      console.log(list, '所有的agent');
 
       const total = list.length;
       for (let i = 0; i < total; i++) {

+ 36 - 0
src/modules/conversation-dialog/format-dialog-answer-for-exception.js

@@ -0,0 +1,36 @@
+import { getIcon4Answer } from './get-icon-4-dialog';
+
+/**
+ * 此方法返回一个answer,仅用于对话流程出现异常
+ */
+export default function formatDialogAnswerForException(agentInfo, exceptionInfo) {
+  const icon_src = getIcon4Answer(agentInfo);
+
+  const currentMsg = {
+    /**
+     * 对话消息类别
+     * 0 历史消息
+     * 1 新消息(本次进入页面新建的消息,但是已经结束轮次)
+     * 2 当前的消息(此刻正在进行中的消息)
+     */
+    client_custom_chat_type: 1,
+    client_custom_item_type: 'a', // 答案
+    /**
+     * 会话展示时,可以通过此值,判断该如何进行内容显示
+     * 当值为0时,可能显示加载中动画
+     * 当值为1时,展示消息内容,展示 停止生成按钮
+     * 当值为2时,可能展示反馈操作按钮
+     */
+    client_custom_chat_status: 2, // 此轮会话的状态值 0 加载中 1 进行中 2 已结束
+
+    // 图标
+    client_custom_icon: icon_src,
+
+    client_custom_unique_id: 'exception_' + Date.now(),
+
+    question: '',
+    answer: exceptionInfo.message // 消息正文,markdown格式,需要进行解析
+  };
+
+  return currentMsg;
+}

+ 3 - 0
src/modules/conversation-dialog/format-dialog-answer-for-loading.js

@@ -16,6 +16,7 @@ export default function formatDialogAnswerForLoading(agentInfo) {
      * 2 当前的消息(此刻正在进行中的消息)
      */
     client_custom_chat_type: 2,
+    client_custom_item_type: 'a', // 答案
     /**
      * 会话展示时,可以通过此值,判断该如何进行内容显示
      * 当值为0时,可能显示加载中动画
@@ -27,6 +28,8 @@ export default function formatDialogAnswerForLoading(agentInfo) {
     // 图标
     client_custom_icon: icon_src,
 
+    client_custom_unique_id: 'loading_' + Date.now(),
+
     question: '',
     answer: '' // 消息正文,markdown格式,需要进行解析
   };

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

@@ -47,6 +47,7 @@
 
 <script setup>
 import { ref, getCurrentInstance, onMounted, onUnmounted, computed, nextTick } from 'vue';
+import { Message } from '@arco-design/web-vue';
 
 import DialogAsideLeft from '../../modules/conversation-chat/DialogAsideLeft.vue';
 import DialogHeader from '../../modules/conversation-chat/DialogHeader.vue';
@@ -69,6 +70,7 @@ import formatDialogHistory from '../../modules/conversation-dialog/format-dialog
 
 import formatDialogQuestionByClient from '../../modules/conversation-dialog/format-dialog-question-by-client';
 import formatDialogAnswerForLoading from '../../modules/conversation-dialog/format-dialog-answer-for-loading';
+import formatDialogAnswerForException from '../../modules/conversation-dialog/format-dialog-answer-for-exception';
 import formatDialogAnswerFromWebsocketReceiveMessage from '../../modules/conversation-dialog/format-dialog-answer-from-websocket_receive_message';
 
 import useEleSize from '../../utils/use-ele-size';
@@ -187,6 +189,13 @@ const handleChatShare = (chat_id) => {};
  */
 const handleSuggestSubmit = (suggest) => {};
 
+/**
+ * 处理页面中的错误消息
+ * @param msg
+ */
+const handleErrorMessage = (msg) => {
+  Message.error({ content: msg, position: 'top' });
+};
 // ---------------------------------------------
 
 /**
@@ -194,6 +203,29 @@ const handleSuggestSubmit = (suggest) => {};
  */
 const input_disabled = ref(false);
 
+/**
+ * 异常处理
+ * 异常处理过程是一个会话模拟的过程
+ * 先在界面上显示加载动画,然后紧接着显示错误提示
+ * 让用户感知到智能体有处理数据的过程
+ * 所以在异常处理阶段,有一些需要处理的关键点,比如欢迎界面的显示
+ * @param exceptionInfo
+ */
+const handleChatRequestionException = (exceptionInfo) => {
+  // 已结束
+  const answerData = formatDialogAnswerForException(CHAT_AGENT_INFOMATION.value, exceptionInfo);
+
+  // 原来的最后一项弹出
+  chat_new_list.value.pop();
+  // 添加新的最后一项
+  chat_new_list.value.push(answerData);
+
+  // 对话已结束:文件上传、文本输入区域放开使用
+  input_disabled.value = false;
+  // 对话区域滚动到底部
+  scroll2ListBottom();
+};
+
 /**
  * 输入已经确认要提交了
  *
@@ -206,8 +238,64 @@ const handleInputSubmit = async (options) => {
   const ask_text = options.text; // 文本
   const ask_files = options.files; // 文件列表
 
+  // TODO: 内容检查,如果文本内容不合法,则不允许发送
+  if (!ask_text) {
+    handleErrorMessage('请输入文字');
+    return;
+  }
+
+  // --------------------------------------------
+  // --------------------------------------------
+  // --------------------------------------------
+  // --------------------------------------------
+  // --------------------------------------------消息发送前的准备工作
+
+  /**
+   * 当新消息发送时
+   * 意味着新一轮对话的开始
+   * 此时应该将之前一轮对话的信息进行清空
+   *
+   * 整理客户端提问的数据
+   * 组装Question数据
+   */
+  const client_question = formatDialogQuestionByClient(ask_text, ask_files, CHAT_AGENT_INFOMATION.value);
+  // 保存用户的提问信息
+  // 当消息正式发出后,将提问数据放入列表中
+  chat_new_question.value = client_question;
+  // 消息即将发送,记录用户的提问数据
+  chat_new_list.value.push(chat_new_question.value);
+  // 客户端依据此数据展示加载中的动画
+  const loadingMsg = formatDialogAnswerForLoading(CHAT_AGENT_INFOMATION.value);
+  chat_new_list.value.push(loadingMsg);
+  /**
+   * 会话已确认发送
+   * 隐藏欢迎内容,显示对话内容
+   */
+  show_welcome.value = false;
+  // 清空文本数据和文件数据,避免下一次会话冲突
+  // 清空表单里的数据
+  inputClear();
+  // 清空可能存在的推荐项目
+  chat_suggestion.value = [];
+  // 清空已保存的提问数据(提问数据已经推入数组,此处无需继续保存)
+  chat_new_question.value = null;
+  // 文件上传、文本输入区域禁用
+  input_disabled.value = true;
+  // 对话区域滚动到底部
+  scroll2ListBottom();
+  // --------------------------------------------
+  // --------------------------------------------
+  // --------------------------------------------
+  // --------------------------------------------
+  // --------------------------------------------
+
   const agent_id = props.agent_id;
 
+  // 对话分为三个步骤
+  // 1. 创建会话,如果已经创建,则不需要再次创建
+  // 2. 上传文件,如果不存在文件,则无需文件上传
+  // 3. 连接websocket
+
   /**
    * 创建会话 get chat id
    * 判断对话是否已经创建
@@ -226,18 +314,26 @@ const handleInputSubmit = async (options) => {
         chat_new_id.value = res_data.chat_id;
       } else {
         // 失败
-        // TODO: 处理错误
+        // 处理异常:直接在界面上显示
+        handleChatRequestionException({
+          message: `code: ${chatResult.code} message: ${chatResult.msg}`
+        });
 
         return;
       }
     } catch (err) {
-      console.log(err);
-      // TODO: 处理错误
+      console.log('err-nfsdnakiuwirea7', err);
+
+      // 处理错误
+      handleChatRequestionException({
+        message: err.message
+      });
+
       return;
     }
   } else {
     // 已创建chat
-    console.log(chat_new_id.value, '已创建');
+    // console.log(chat_new_id.value, '已创建');
   }
 
   // 文件上传后的信息
@@ -264,13 +360,19 @@ const handleInputSubmit = async (options) => {
         }
       } else {
         // 文件上传异常
-        // TODO: 处理错误
+        handleChatRequestionException({
+          message: `code: ${uploadResult.code} \n\n message: ${uploadResult.msg}`
+        });
+
         return;
       }
     } catch (err) {
-      console.log(err);
-      // 文件上传失败
-      // TODO: 处理错误
+      console.log('err-fhskafhakfjslkfjl', err);
+
+      handleChatRequestionException({
+        message: err.message
+      });
+
       return;
     }
   }
@@ -281,15 +383,6 @@ const handleInputSubmit = async (options) => {
    */
   const msg = formatDialogSendOptions(ask_text, files_response);
 
-  /**
-   * 整理客户端提问的数据
-   * 组装Question数据
-   */
-  const client_question = formatDialogQuestionByClient(ask_text, ask_files, CHAT_AGENT_INFOMATION.value);
-  // 保存用户的提问信息
-  // 当消息正式发出后,将提问数据放入列表中
-  chat_new_question.value = client_question;
-
   // 发送websocket消息
   handleWSSend(chat_new_id.value, msg);
 };
@@ -327,15 +420,6 @@ const { initWSConnection, sendWSMessage, getWSInstance, closeWSConnect } = useWe
  * @param value
  */
 function handleWSSend(chat_id, value) {
-  // 已发送,但是未响应,表示已经存在了新对话
-  // 只是新对话还未返回响应内容
-
-  // 消息即将发送,记录用户的提问数据
-  chat_new_list.value.push(chat_new_question.value);
-  // 客户端依据此数据展示加载中的动画
-  const loadingMsg = formatDialogAnswerForLoading(CHAT_AGENT_INFOMATION.value);
-  chat_new_list.value.push(loadingMsg);
-
   /**
    * -----------------------------------------------------------
    * -----------------------------------------------------------
@@ -354,29 +438,6 @@ function handleWSSend(chat_id, value) {
    * ------------------------------------------------------------
    * ------------------------------------------------------------
    */
-
-  /**
-   * 当新消息发送时
-   * 意味着新一轮对话的开始
-   * 此时应该将之前一轮对话的信息进行清空
-   */
-
-  /**
-   * 会话已确认发送
-   * 隐藏欢迎内容,显示对话内容
-   */
-  show_welcome.value = false;
-  // 清空文本数据和文件数据,避免下一次会话冲突
-  // 清空表单里的数据
-  inputClear();
-  // 清空可能存在的推荐项目
-  chat_suggestion.value = [];
-  // 清空已保存的提问数据(提问数据已经推入数组,此处无需继续保存)
-  chat_new_question.value = null;
-  // 文件上传、文本输入区域禁用
-  input_disabled.value = true;
-  // 对话区域滚动到底部
-  scroll2ListBottom();
 }
 
 /**