From 8e6b518811a52e8c2d783ff6bb7d263783954eac Mon Sep 17 00:00:00 2001
From: wujingjing <gersonwu@qq.com>
Date: 星期二, 31 十二月 2024 12:58:41 +0800
Subject: [PATCH] 拆分 messageList 组件
---
src/components/chat/hooks/useScrollLoad.ts | 128 +++++++++++++++++++++---------------------
1 files changed, 65 insertions(+), 63 deletions(-)
diff --git a/src/components/chat/hooks/useScrollLoad.ts b/src/components/chat/hooks/useScrollLoad.ts
index 4a8b0ec..4d63095 100644
--- a/src/components/chat/hooks/useScrollLoad.ts
+++ b/src/components/chat/hooks/useScrollLoad.ts
@@ -1,7 +1,9 @@
import moment from 'moment';
-import { Ref, ShallowRef, computed, nextTick, onBeforeUnmount, ref, unref } from 'vue';
+import type { Ref, ShallowRef } from 'vue';
+import { computed, nextTick, onBeforeUnmount, ref, unref } from 'vue';
import { LOAD_CHAT_LIMIT } from '../constants';
-import { AnswerType, ChatContent, ChatMessage, RoleEnum, StepEnum, StepItem } from '../model/types';
+import type { ChatContent, ChatMessage, StepItem } from '../model/types';
+import { AnswerType, MultiChatType, RoleEnum, StepEnum } from '../model/types';
import { GetHistoryAnswer, QueryHistoryDetail, getShareChatJsonByPost } from '/@/api/ai/chat';
import router from '/@/router';
import { isSharePage } from '/@/stores/chatRoom';
@@ -22,13 +24,46 @@
return {
status: StepEnum.Success,
title: processItem.value,
- };
+ } as StepItem;
};
export const convertProcessToStep = (process: any[]) => {
- const stepList = (process ?? []).map<StepItem>((item) => {
- return convertProcessItem(item);
- });
+ const stepList = (process ?? []).reduce((preVal, curVal) => {
+ if (curVal.mode === 'question') {
+ const last = preVal.at(-1);
+ if (!last.subStep) {
+ last.subStep = [];
+ }
+ const sub = {
+ data: curVal.value,
+ type: MultiChatType.Select,
+ };
+ last.subStep.push(sub);
+ } else {
+ const cur = convertProcessItem(curVal);
+ preVal.push(cur);
+ }
+ return preVal;
+ }, []);
return stepList;
+};
+export const formatShowTimeYear = (str: string) => {
+ const date = moment(str);
+ const now = moment();
+ const diffDays = now.diff(date, 'days');
+
+ if (diffDays === 0) {
+ return `浠婂ぉ ${date.format('HH:mm:ss')}`;
+ } else if (diffDays === 1) {
+ return `鏄ㄥぉ ${date.format('HH:mm:ss')}`;
+ } else if (diffDays === 2) {
+ return `鍓嶅ぉ ${date.format('HH:mm:ss')}`;
+ }
+
+ if (date.year() === now.year()) {
+ return date.format('MM鏈圖D鏃� HH:mm:ss');
+ } else {
+ return date.format('YYYY骞碝M鏈圖D鏃� HH:mm:ss');
+ }
};
/**
* 婊氬姩鍔犺浇鏁版嵁
@@ -39,7 +74,7 @@
const moreIsLoading = ref(false);
/** @description 涓嬫闇�瑕佸姞杞界殑鐢ㄦ埛缁撴潫绱㈠紩锛堝�掔潃鏁帮級 */
- const nextUserMsgEndIndex = ref(0);
+ let nextUserMsgEndIndex = 0;
// 鏄惁娌℃湁鏇村鏁版嵁浜�
let isNoMore = false;
@@ -48,11 +83,15 @@
history_id: historyId,
});
};
- const formatShowTimeYear = computed(() => {
- return (str) => {
- return moment(str).format('MM鏈圖D鏃� HH:mm:ss');
- };
- });
+
+
+
+ /**
+ * 鏇存柊鍔犺浇绱㈠紩
+ */
+ const updateLoadIndex = () => {
+ nextUserMsgEndIndex++;
+ };
/**
* 鑾峰彇鐢ㄦ埛鍥炲鏁版嵁锛屽苟鎻掑叆鍒板璇濆綋涓幓
*/
@@ -84,7 +123,7 @@
const mapUser = userItemIdMap.get(item.answer?.history_id);
- const answerTime = formatShowTimeYear.value(mapUser?.create_time);
+ const answerTime = formatShowTimeYear(mapUser?.create_time);
tmpMessageList.splice(
insertIndex,
0,
@@ -93,13 +132,14 @@
: {
historyId: item.answer?.history_id,
role: RoleEnum.assistant,
- content: parseAnswerContent(item.answer),
+ content: parseAnswerContent(item?.answer),
state: item.answer_state,
- sectionAId: mapUser?.section_a_id,
createTime: answerTime,
- stepList: convertProcessToStep(item?.answer?.exec_process),
- stepIsShow: false,
isStopMsg: false,
+ stepGroup: (item?.answer?.reports ?? []).map((item) => ({
+ value: convertProcessToStep(item?.exec_process),
+ isShow: false,
+ })),
conclusion: item?.answer?.conclusion ?? [],
isChecked: false,
@@ -111,51 +151,13 @@
messageList.value.unshift(...tmpMessageList);
};
- /**
- * 鍔犺浇鍒嗕韩鏁版嵁
- */
- const loadShareData = async () => {
- const res = await getShareChatJsonByPost({
- share_id: router.currentRoute.value.query.id as string,
- });
-
- const msgValue = res?.values;
- if (!msgValue) {
- messageList.value = [];
- return;
- }
- const userMsg: ChatMessage = {
- historyId: msgValue.history_id,
- role: RoleEnum.user,
- content: {
- type: AnswerType.Text,
- values: msgValue.question,
- },
- isChecked: false,
- };
-
- const assistantMsg: ChatMessage = {
- historyId: msgValue.history_id,
- role: RoleEnum.assistant,
- content: parseAnswerContent(msgValue),
- stepList: convertProcessToStep(msgValue.exec_process),
- stepIsShow: false,
- isStopMsg: false,
-
- conclusion: msgValue.conclusion ?? [],
- isChecked: false,
- };
- messageList.value = [userMsg, assistantMsg];
- };
+
/**
* 鍔犺浇婊氬姩鑼冨洿鏁版嵁
*/
- const loadRangeData = async (lastEnd = nextUserMsgEndIndex.value) => {
- if (isSharePage.value) {
- await loadShareData();
- return;
- }
+ const loadRangeData = async (lastEnd = nextUserMsgEndIndex) => {
+
const res = await QueryHistoryDetail({
history_group_id: unref(historyGroupId),
last_end: lastEnd,
@@ -163,7 +165,7 @@
});
const result: ChatMessage[] = res.details ?? [];
if (result.length) {
- nextUserMsgEndIndex.value += result.length;
+ nextUserMsgEndIndex += result.length;
await loadReplyData(res.details);
} else {
isNoMore = true;
@@ -184,16 +186,16 @@
return;
}
- let h1 = container.value.scrollHeight;
+ const h1 = container.value.scrollHeight;
moreIsLoading.value = true;
- await loadRangeData(nextUserMsgEndIndex.value).finally(() => {
+ await loadRangeData(nextUserMsgEndIndex).finally(() => {
moreIsLoading.value = false;
});
//鏇存柊鍚庯紝绛夊緟椤甸潰娓叉煋瀹屾瘯鍐嶅幓鎷縮crollHeight,鍚﹀垯鎷垮埌鐨勬槸涔嬪墠鐨�
nextTick(() => {
nextTick(() => {
nextTick(() => {
- let h2 = container.value.scrollHeight;
+ const h2 = container.value.scrollHeight;
container.value.scrollTo({
//椤堕儴鍦ㄥ師鍏堝熀纭�涓婂線涓嬫粴鍔�50px锛岄湶鍑烘柊鍔犺浇鏁版嵁鐨勪竴鐐�
// top: h2 - h1 - 50,
@@ -211,9 +213,9 @@
});
return {
- nextUserMsgEndIndex,
loadRangeData,
onChatListScroll,
moreIsLoading,
+ updateLoadIndex,
};
};
--
Gitblit v1.9.3