From ec939b38e899676e4dc117b1d4f3468da2607777 Mon Sep 17 00:00:00 2001
From: wujingjing <gersonwu@qq.com>
Date: 星期四, 25 七月 2024 18:09:40 +0800
Subject: [PATCH] 对接similar 和 曲线查询接口
---
src/components/chat/Chat.vue | 240 +++++++++++++++++++++---------------------------------------
1 files changed, 84 insertions(+), 156 deletions(-)
diff --git a/src/components/chat/Chat.vue b/src/components/chat/Chat.vue
index 9f3968b..ff508e8 100644
--- a/src/components/chat/Chat.vue
+++ b/src/components/chat/Chat.vue
@@ -23,7 +23,26 @@
class="text-sm rounded-[6px] p-4 leading-relaxed"
:style="{ backgroundColor: item.role === RoleEnum.user ? 'rgb(197 224 255)' : 'white' }"
>
- <div v-if="item.content.errCode === ErrorCode.Message" class="text-red-500 w-full">{{ item.content.msg }}</div>
+ <div v-if="item.content.errCode === ErrorCode.Message" class="flex-column w-full">
+ <p class="text-red-500">
+ {{ item.content.errMsg }}
+ </p>
+ <div class="mt-5 flex items-center" v-if="showFixQuestion(item)">
+ <div class="text-gray-600 flex-0">
+ {{ item.content.origin.err_json.fix_question.title + '锛�' }}
+ </div>
+ <div class="ml-1 space-x-2 inline-flex flex-wrap">
+ <div
+ v-for="fixItem in item.content.origin.err_json.fix_question?.values"
+ :key="fixItem"
+ class="bg-gray-200 p-3 hover:bg-[#c5e0ff] hover:text-[#1c86ff] cursor-pointer rounded-lg"
+ @click="fixQuestionClick(fixItem, item.content.origin)"
+ >
+ {{ fixItem.title }}
+ </div>
+ </div>
+ </div>
+ </div>
<component v-else :is="answerTypeMapCom[item.content.type]" :data="item.content.values" :originData="item" />
</div>
@@ -102,9 +121,11 @@
<div class="sticky bottom-0 w-full p-6 pb-8 bg-[rgb(247,248,250)] flex justify-center">
<PlayBar
+ v-model:voicePageIsShow="voicePageIsShow"
:isTalking="isTalking"
+ :isHome="false"
v-model="messageContent.values"
- @sendClick="sendChatMessage"
+ @sendClick="sendClick"
:style="{ width: chatWidth }"
></PlayBar>
</div>
@@ -116,24 +137,25 @@
<script setup lang="ts">
import { ElMessage } from 'element-plus';
-import { computed, nextTick, onActivated, onMounted, ref, watch } from 'vue';
-import useClipboard from 'vue-clipboard3';
-import Loding from './components/Loding.vue';
-import type { ChatContent } from './model/types';
-import { AnswerType, RoleEnum, answerTypeMapCom, roleImageMap, type ChatMessage, AnswerState } from './model/types';
-import { GetHistoryAnswer, QueryHistoryDetail, QuestionAi, SetHistoryAnswerState, getQuestionProcess } from '/@/api/ai/chat';
-import PlayBar from '/@/components/chat/components/playBar/PlayBar.vue';
-import router from '/@/router';
-import { activeChatRoom, activeLLMId, activeRoomId, activeSampleId, activeSectionAId, roomConfig } from '/@/stores/chatRoom';
-import { v4 as uuidv4 } from 'uuid';
import _ from 'lodash';
-import { ErrorCode } from '/@/utils/request';
+import { v4 as uuidv4 } from 'uuid';
+import { computed, onMounted, ref } from 'vue';
import FeedbackPanel from './components/FeedbackPanel.vue';
-import { useClickOther } from '/@/hooks/useClickOther';
+import Loding from './components/Loding.vue';
+import { useAssistantContentOpt } from './hooks/useAssistantContentOpt';
+import { useQueryProcess } from './hooks/useQueryProcess';
+import { useScrollToBottom } from './hooks/useScrollToBottom';
+import type { ChatContent } from './model/types';
+import { AnswerState, AnswerType, RoleEnum, answerTypeMapCom, roleImageMap, type ChatMessage } from './model/types';
+import { GetHistoryAnswer, QueryHistoryDetail, QuestionAi } from '/@/api/ai/chat';
+import PlayBar from '/@/components/chat/components/playBar/PlayBar.vue';
import CustomDrawer from '/@/components/drawer/CustomDrawer.vue';
+import router from '/@/router';
+import { activeChatRoom, activeLLMId, activeSampleId, activeSectionAId, getRoomConfig, roomConfig } from '/@/stores/chatRoom';
+import { ErrorCode } from '/@/utils/request';
const chatWidth = '75%';
-
+const voicePageIsShow = ref(false);
let isTalking = ref(false);
let messageContent = ref<ChatContent>({
type: AnswerType.Text,
@@ -144,14 +166,7 @@
const chatListDom = ref<HTMLDivElement>();
const messageList = ref<ChatMessage[]>([]);
const computedMessageList = computed(() => {
- return messageList.value.filter((v) => v && v.role !== RoleEnum.system);
-});
-
-const showAskMore = computed(() => {
- if (!computedMessageList.value || computedMessageList.value.length === 0) return false;
- const last = computedMessageList.value.at(-1);
- const isShow = last?.role === RoleEnum.assistant && last?.content?.values && last.content?.askMoreList?.length > 0;
- return isShow;
+ return messageList.value.filter((v) => !!v);
});
const parseContent = (res) => {
@@ -209,56 +224,32 @@
}
content.askMoreList = _.orderBy(res.context_history, [(item) => Number(item.radio)], ['desc']);
content.errCode = res?.err_code;
- content.msg = res?.json_msg;
+ content.errMsg = res?.json_msg;
content.origin = res;
return content;
};
-//#region ====================== 鏌ヨ杩涘害 ======================
-let processId = '';
-const QUERY_PROCESS_INTERVAL = 1000;
-const process = ref('');
-let processTimer = null;
-let finishProcess = true;
-const queryProcessApi = async () => {
- const res = await getQuestionProcess({
- process_id: processId,
- }).catch((err) => {
- process.value = err;
- });
-
- process.value = res.process;
- finishProcess = true;
-};
-
-const queryProcess = () => {
- processTimer = setInterval(() => {
- if (!finishProcess) return;
- finishProcess = false;
- queryProcessApi();
- }, QUERY_PROCESS_INTERVAL);
-};
-
-const clearQueryProcess = () => {
- process.value = '';
- clearInterval(processTimer);
-};
-
-//#endregion
+const { clearQueryProcess, process, processId, queryProcess } = useQueryProcess();
let questionRes = null;
const questionAi = async (text) => {
if (!currentSectionId) {
ElMessage.warning('鍙戦�佸け璐ワ紝鏈‘瀹氬簲鐢ㄥ満鏅紒');
}
- processId = uuidv4();
+ processId.value = uuidv4();
+ const judgeParams = !preQuestion.value
+ ? {}
+ : {
+ prev_question: preQuestion.value,
+ };
const params = {
- process_id: processId,
+ process_id: processId.value,
question: text,
// FIXME: 鏆傛椂杩欐牱
section_a_id: currentSectionId,
history_group_id: currentRouteId,
raw_mode: roomConfig.value?.[currentRouteId]?.isAnswerByLLM ?? false,
+ ...judgeParams,
} as any;
if (currentSampleId) {
@@ -284,10 +275,6 @@
values: '',
});
-const scrollToBottom = () => {
- if (!chatListDom.value) return;
- chatListDom.value.lastElementChild?.scrollIntoView();
-};
let currentSectionId = null;
let currentSampleId = null;
@@ -299,9 +286,10 @@
});
};
-const sendChatMessage = async (content: ChatContent = messageContent.value) => {
+const sendChatMessage = async (content: ChatContent = messageContent.value, cb?: any) => {
if (!content?.values) return;
- if (messageList.value.length === 0) {
+ const isNewChat = messageList.value.length === 0;
+ if (isNewChat) {
if (activeSampleId.value) {
currentSampleId = activeSampleId.value;
}
@@ -314,6 +302,7 @@
currentSectionId = activeSectionAId.value;
}
}
+ let resMsgContent: ChatContent = null;
try {
isTalking.value = true;
@@ -327,8 +316,13 @@
// 鍑虹幇鍥炲锛岀疆绌哄嚭鐜扮瓑寰呭姩鐢�
messageList.value.push(assistantItem);
- let resMsgContent: ChatContent = null;
resMsgContent = await questionAi(content.values);
+ if (isNewChat) {
+ const firstResCb = getRoomConfig(currentRouteId, 'firstResCb');
+ firstResCb?.(resMsgContent);
+ } else {
+ cb?.(resMsgContent);
+ }
userItem.historyId = questionRes.history_id;
assistantItem.historyId = questionRes.history_id;
appendLastMessageContent(resMsgContent);
@@ -341,15 +335,14 @@
isTalking.value = false;
}
};
+
+const sendClick = (cb) => {
+ sendChatMessage(messageContent.value, cb);
+};
const appendLastMessageContent = (content: ChatContent) => {
if (messageList.value.at(-1)) {
messageList.value.at(-1).content = content;
}
-};
-
-const askMoreClick = (item) => {
- if (!item.question) return;
- sendChatMessage({ type: AnswerType.Text, values: item.question });
};
onMounted(async () => {
@@ -398,97 +391,32 @@
sendChatMessage();
}
});
-let forbidScroll = false;
-watch(
- messageList,
- () => {
- if (forbidScroll) return;
- nextTick(() => scrollToBottom());
- },
- {
- deep: true,
- }
-);
-onActivated(() => {
- if (forbidScroll) return;
- nextTick(() => scrollToBottom());
+const { forbidScroll } = useScrollToBottom({
+ chatListDom: chatListDom,
+ displayMessageList: computedMessageList,
});
-//#region ====================== 鑱婂ぉ鍐呭鎿嶄綔 ======================
-
-const { toClipboard } = useClipboard();
-
-const copyClick = (item) => {
- const type = item.content.type;
- let text = '';
- if (type === AnswerType.Knowledge) {
- text = item.content.values?.map((item) => item.answer).join('\n\n') ?? '';
- } else {
- text = item.content.values;
- }
- ElMessage.success('澶嶅埗鎴愬姛');
- toClipboard(text);
-};
-
-const likeClick = async (item) => {
- const toSetState = item.state === AnswerState.Like ? AnswerState.Null : AnswerState.Like;
- const res = await SetHistoryAnswerState({
- history_id: item.historyId,
- answer_state: toSetState,
- });
- item.state = toSetState;
- forbidScroll = true;
- nextTick(() => {
- forbidScroll = false;
- });
-};
-
-const unLikeClick = async (item) => {
- const toSetState = item.state === AnswerState.Unlike ? AnswerState.Null : AnswerState.Unlike;
- const res = await SetHistoryAnswerState({
- history_id: item.historyId,
- answer_state: toSetState,
- });
- item.state = toSetState;
-
- forbidScroll = true;
- nextTick(() => {
- forbidScroll = false;
- });
-};
-const feedbackPosition = ref({
- x: 0,
- y: 0,
-});
-
-const feedbackIsShow = ref(false);
-const feedbackContent = ref('');
-const feedbackPanelRef = ref<HTMLDivElement>(null);
-const currentFeedbackMapItem = ref(null);
-const curFeedbackIndex = ref(0);
-const feedbackClick = async (e, item, index) => {
- currentFeedbackMapItem.value = item;
- curFeedbackIndex.value = index;
- const offsetX = -4;
- const offsetY = -8;
- feedbackIsShow.value = true;
- nextTick(() => {
- feedbackPosition.value = {
- x: -feedbackPanelRef.value[index].$el.clientWidth + offsetX,
- y: -feedbackPanelRef.value[index].$el.clientHeight + offsetY,
- };
- });
-};
-useClickOther(
- computed(() => feedbackPanelRef.value[curFeedbackIndex.value]),
+const {
+ copyClick,
+ likeClick,
+ unLikeClick,
+ feedbackPosition,
feedbackIsShow,
- () => {
- feedbackIsShow.value = false;
- feedbackContent.value = '';
- }
-);
-//#endregion
+ feedbackContent,
+ feedbackPanelRef,
+ currentFeedbackMapItem,
+ feedbackClick,
+ askMoreClick,
+ fixQuestionClick,
+ preQuestion,
+ showFixQuestion,
+ showAskMore,
+} = useAssistantContentOpt({
+ forbidScroll,
+ sendChatMessage,
+ displayMessageList: computedMessageList,
+});
//#region ====================== 渚ц竟鏍廳rawer ======================
const drawerIsShow = ref(false);
--
Gitblit v1.9.3