|
|
@@ -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();
|
|
|
}
|
|
|
|
|
|
/**
|