| | |
| | | </div> |
| | | </div> |
| | | |
| | | <div class="sticky bottom-0 w-full p-6 pb-8 bg-gray-100 flex justify-center"> |
| | | <div class="sticky bottom-0 w-full p-6 pb-8 bg-[rgb(247,248,250)] flex justify-center"> |
| | | <PlayBar :isTalking="isTalking" v-model="messageContent.values" @sendClick="sendChatMessage" /> |
| | | </div> |
| | | </div> |
| | |
| | | |
| | | <script setup lang="ts"> |
| | | import { ElMessage } from 'element-plus'; |
| | | import { computed, nextTick, ref, watch } from 'vue'; |
| | | 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 { 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 } from '/@/stores/chatRoom'; |
| | | import { activeChatRoom, activeLLMId, activeRoomId, activeSampleId, activeSectionAId, roomConfig } from '/@/stores/chatRoom'; |
| | | import { v4 as uuidv4 } from 'uuid'; |
| | | |
| | | let isTalking = ref(false); |
| | |
| | | type: AnswerType.Text, |
| | | values: '', |
| | | }); |
| | | const currentRoute = router.currentRoute; |
| | | const currentRouteId = currentRoute.value.query.id as string; |
| | | const chatListDom = ref<HTMLDivElement>(); |
| | | const messageList = ref<ChatMessage[]>([]); |
| | | const computedMessageList = computed(() => { |
| | |
| | | }; |
| | | //#region ====================== 查询进度 ====================== |
| | | let processId = ''; |
| | | const QUERY_PROCESS_INTERVAL = 300; |
| | | const QUERY_PROCESS_INTERVAL = 1000; |
| | | const process = ref(''); |
| | | let processTimer = null; |
| | | let finishProcess = true; |
| | |
| | | question: text, |
| | | // FIXME: 暂时这样 |
| | | section_a_id: currentSectionId, |
| | | history_group_id: activeRoomId.value, |
| | | history_group_id: currentRouteId, |
| | | raw_mode: roomConfig.value?.[currentRouteId]?.isAnswerByLLM ?? false, |
| | | } as any; |
| | | |
| | | if (currentSampleId) { |
| | |
| | | const res = await QuestionAi(params); |
| | | clearQueryProcess(); |
| | | questionRes = res; |
| | | // const res = { |
| | | // json_ok: true, |
| | | // question: '昨日五一广场压力', |
| | | // answer_type: 'recordset', |
| | | // values: { |
| | | // names: ['yesterday', 'max_pressure'], |
| | | // values: [ |
| | | // ['2024-06-28 00:00:00', 24.378], |
| | | // ['2024-06-29 00:00:00', 24.276], |
| | | // ], |
| | | // type: 'records', |
| | | // title: '昨日五一广场(D_GW_04)的最大压力值', |
| | | // }, |
| | | // }; |
| | | |
| | | const content = parseContent(res); |
| | | return content; |
| | | }; |
| | |
| | | let currentSampleId = null; |
| | | |
| | | let currentLLMId = null; |
| | | |
| | | const getAnswerById = async (historyId: string) => { |
| | | return await GetHistoryAnswer({ |
| | | history_id: historyId, |
| | | }); |
| | | }; |
| | | |
| | | const sendChatMessage = async (content: ChatContent = messageContent.value) => { |
| | | if (!messageContent.value?.values) return; |
| | | if (activeChatRoom.value.isInitial) { |
| | | activeChatRoom.value.title = messageContent.value.values; |
| | | activeChatRoom.value.isInitial = false; |
| | | if (messageList.value.length === 0) { |
| | | if (activeSampleId.value) { |
| | | currentSampleId = activeSampleId.value; |
| | | } |
| | |
| | | currentSectionId = activeSectionAId.value; |
| | | } |
| | | } |
| | | |
| | | try { |
| | | isTalking.value = true; |
| | | const userItem: ChatMessage = { role: RoleEnum.user, content } as any; |
| | |
| | | } |
| | | }; |
| | | |
| | | watch( |
| | | () => activeRoomId.value, |
| | | async (val) => { |
| | | if (!val) { |
| | | router.replace({ |
| | | name: 'Home', |
| | | }); |
| | | return; |
| | | } |
| | | if (activeChatRoom.value.isInitial) { |
| | | messageContent.value = { |
| | | onMounted(async () => { |
| | | const res = await QueryHistoryDetail({ |
| | | history_group_id: currentRouteId, |
| | | }); |
| | | |
| | | messageList.value = (res.details ?? []).map((item) => { |
| | | return { |
| | | historyId: item.history_id, |
| | | role: RoleEnum.user, |
| | | content: { |
| | | type: AnswerType.Text, |
| | | values: activeChatRoom.value.title, |
| | | }; |
| | | sendChatMessage(); |
| | | } else { |
| | | const res = await QueryHistoryDetail({ |
| | | history_group_id: activeRoomId.value, |
| | | }); |
| | | messageList.value = (res.details ?? []).map((item) => { |
| | | return { |
| | | historyId: item.history_id, |
| | | role: RoleEnum.user, |
| | | content: { |
| | | type: AnswerType.Text, |
| | | values: item.question, |
| | | }, |
| | | } as ChatMessage; |
| | | }); |
| | | currentSectionId = res?.details?.[0]?.section_a_id; |
| | | currentSampleId = res?.details?.[0]?.sample_id; |
| | | const resList = await Promise.all((res.details ?? []).map((item) => getAnswerById(item.history_id))); |
| | | let i = 0; |
| | | values: item.question, |
| | | }, |
| | | } as ChatMessage; |
| | | }); |
| | | currentSectionId = res?.details?.[0]?.section_a_id; |
| | | currentSampleId = res?.details?.[0]?.sample_id; |
| | | const resList = await Promise.all((res.details ?? []).map((item) => getAnswerById(item.history_id))); |
| | | let i = 0; |
| | | |
| | | resList.map((item, index) => { |
| | | const insertIndex = index + 1 + i; |
| | | messageList.value.splice(insertIndex, 0, { |
| | | historyId: item.answer.history_id, |
| | | role: RoleEnum.assistant, |
| | | content: parseContent(item.answer), |
| | | state: item.answer_state, |
| | | }); |
| | | i++; |
| | | }); |
| | | } |
| | | }, |
| | | { |
| | | immediate: true, |
| | | resList.map((item, index) => { |
| | | const insertIndex = index + 1 + i; |
| | | messageList.value.splice(insertIndex, 0, { |
| | | historyId: item.answer.history_id, |
| | | role: RoleEnum.assistant, |
| | | content: parseContent(item.answer), |
| | | state: item.answer_state, |
| | | }); |
| | | i++; |
| | | }); |
| | | |
| | | if (messageList.value.length === 0) { |
| | | messageContent.value = { |
| | | type: AnswerType.Text, |
| | | values: activeChatRoom.value.title, |
| | | }; |
| | | |
| | | sendChatMessage(); |
| | | } |
| | | ); |
| | | |
| | | }); |
| | | let forbidScroll = false; |
| | | watch( |
| | | messageList, |
| | |
| | | } |
| | | ); |
| | | |
| | | onActivated(() => { |
| | | if (forbidScroll) return; |
| | | nextTick(() => scrollToBottom()); |
| | | }); |
| | | |
| | | //#region ====================== 聊天内容操作 ====================== |
| | | |
| | | const { toClipboard } = useClipboard(); |