| | |
| | | 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 { GetHistoryAnswer, QueryHistoryDetail } from '/@/api/ai/chat'; |
| | | 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'; |
| | | type UseScrollLoadOption = { |
| | | container: ShallowRef<HTMLDivElement>; |
| | | historyGroupId: string | Ref<string>; |
| | |
| | | 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月DD日 HH:mm:ss'); |
| | | } else { |
| | | return date.format('YYYY年MM月DD日 HH:mm:ss'); |
| | | } |
| | | }; |
| | | /** |
| | | * 滚动加载数据 |
| | |
| | | const moreIsLoading = ref(false); |
| | | |
| | | /** @description 下次需要加载的用户结束索引(倒着数) */ |
| | | const nextUserMsgEndIndex = ref(0); |
| | | let nextUserMsgEndIndex = 0; |
| | | |
| | | // 是否没有更多数据了 |
| | | let isNoMore = false; |
| | |
| | | history_id: historyId, |
| | | }); |
| | | }; |
| | | const formatShowTimeYear = computed(() => { |
| | | return (str) => { |
| | | return moment(str).format('MM月DD日 HH:mm:ss'); |
| | | }; |
| | | }); |
| | | |
| | | |
| | | |
| | | /** |
| | | * 更新加载索引 |
| | | */ |
| | | const updateLoadIndex = () => { |
| | | nextUserMsgEndIndex++; |
| | | }; |
| | | /** |
| | | * 获取用户回复数据,并插入到对话当中去 |
| | | */ |
| | |
| | | type: AnswerType.Text, |
| | | values: item.question, |
| | | }, |
| | | isChecked:false, |
| | | isChecked: false, |
| | | } as ChatMessage; |
| | | }); |
| | | const resList = await Promise.all( |
| | |
| | | const insertIndex = index + 1 + i; |
| | | const currentUserMsg = tmpMessageList[insertIndex - 1]; |
| | | currentUserMsg.content.values = item?.answer?.question ?? currentUserMsg.content.values; |
| | | |
| | | |
| | | 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, |
| | |
| | | : { |
| | | 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, |
| | | conclusion:item?.answer?.conclusion ??[], |
| | | isChecked:false, |
| | | isStopMsg: false, |
| | | stepGroup: (item?.answer?.reports ?? []).map((item) => ({ |
| | | value: convertProcessToStep(item?.exec_process), |
| | | isShow: false, |
| | | })), |
| | | |
| | | conclusion: item?.answer?.conclusion ?? [], |
| | | isChecked: false, |
| | | } |
| | | ); |
| | | i++; |
| | |
| | | messageList.value.unshift(...tmpMessageList); |
| | | }; |
| | | |
| | | |
| | | |
| | | /** |
| | | * 加载滚动范围数据 |
| | | */ |
| | | const loadRangeData = async (lastEnd = nextUserMsgEndIndex.value) => { |
| | | const loadRangeData = async (lastEnd = nextUserMsgEndIndex) => { |
| | | |
| | | const res = await QueryHistoryDetail({ |
| | | history_group_id: unref(historyGroupId), |
| | | last_end: lastEnd, |
| | |
| | | }); |
| | | const result: ChatMessage[] = res.details ?? []; |
| | | if (result.length) { |
| | | nextUserMsgEndIndex.value += result.length; |
| | | nextUserMsgEndIndex += result.length; |
| | | await loadReplyData(res.details); |
| | | } else { |
| | | isNoMore = true; |
| | |
| | | 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; |
| | | }); |
| | | //更新后,等待页面渲染完毕再去拿scrollHeight,否则拿到的是之前的 |
| | | nextTick(() => { |
| | | nextTick(() => { |
| | | nextTick(() => { |
| | | let h2 = container.value.scrollHeight; |
| | | const h2 = container.value.scrollHeight; |
| | | container.value.scrollTo({ |
| | | //顶部在原先基础上往下滚动50px,露出新加载数据的一点 |
| | | // top: h2 - h1 - 50, |
| | |
| | | }); |
| | | |
| | | return { |
| | | nextUserMsgEndIndex, |
| | | loadRangeData, |
| | | onChatListScroll, |
| | | moreIsLoading, |
| | | updateLoadIndex, |
| | | }; |
| | | }; |