| | |
|---|
| | | <template> |
|---|
| | | <div class="flex flex-col h-full"> |
|---|
| | | <div class="h-full flex flex-col items-center overflow-y-auto"> |
|---|
| | | <div ref="chatListDom" class="h-full"> |
|---|
| | | <div |
|---|
| | | class="group flex px-4 py-3 hover:bg-slate-100 rounded-lg" |
|---|
| | | v-for="(item, index) of messageList.filter((v) => v.role !== 'system')" |
|---|
| | | :key="index" |
|---|
| | | > |
|---|
| | | <img class="rounded-full size-10 mr-4" :src="roleImageMap[item.role]" alt="" srcset="" /> |
|---|
| | | <div ref="chatListDom" class="h-full w-[100ch]"> |
|---|
| | | <div class="group flex px-4 py-4 hover:bg-slate-100 rounded-lg" v-for="(item, index) of computedMessageList" :key="index"> |
|---|
| | | <img class="rounded-full size-12 mr-4" :src="roleImageMap[item.role]" alt="" srcset="" /> |
|---|
| | | |
|---|
| | | <div class="flex"> |
|---|
| | | <div |
|---|
| | | :class="{ 'bg-[#d8d8ff]': item.role !== RoleEnum.user }" |
|---|
| | | class="prose text-sm rounded-[6px] p-4 leading-relaxed max-w-[100ch]" |
|---|
| | | v-if="item.content" |
|---|
| | | v-html="md.render(item.content)" |
|---|
| | | ></div> |
|---|
| | | <div class="relative" v-if="item.content?.values"> |
|---|
| | | <div class="text-sm rounded-[6px] p-4 leading-relaxed max-w-[100ch] bg-white"> |
|---|
| | | <component class="max-w-[100ch]" :is="answerTypeMapCom[item.content.type]" :data="item.content.values" /> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <!-- <div v-if="item.role === RoleEnum.assistant" class="absolute flex items-center right-0 space-x-2 mr-2 mt-2"> |
|---|
| | | <SvgIcon class="cursor-pointer" name="ele-CopyDocument" @click="copyClick(item.content)" /> |
|---|
| | | <SvgIcon class="cursor-pointer" name="ywicon icon-dianzan" /> |
|---|
| | | <SvgIcon class="cursor-pointer" :size="12" name="ywicon icon-buzan" /> |
|---|
| | | </div> --> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <Loding v-else /> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <div class="sticky bottom-0 w-full p-6 pb-8 bg-gray-100 flex justify-center"> |
|---|
| | | <PlayBar :isTalking="isTalking" v-model="messageContent" @sendClick="sendOrSave" /> |
|---|
| | | <PlayBar :isTalking="isTalking" v-model="messageContent.values" @sendClick="sendChatMessage" /> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script setup lang="ts"> |
|---|
| | | import cryptoJS from 'crypto-js'; |
|---|
| | | import { nextTick, onMounted, ref, watch } from 'vue'; |
|---|
| | | import { ElMessage } from 'element-plus'; |
|---|
| | | import { computed, nextTick, ref, watch } from 'vue'; |
|---|
| | | import useClipboard from 'vue-clipboard3'; |
|---|
| | | import Loding from './components/Loding.vue'; |
|---|
| | | import { md } from './libs/markdown'; |
|---|
| | | import { RoleEnum, type ChatMessage, roleImageMap } from './types'; |
|---|
| | | import type { ChatContent } from './model/types'; |
|---|
| | | import { 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 router from '/@/router'; |
|---|
| | | import { activeChatRoom, activeRoomId } from '/@/stores/chatRoom'; |
|---|
| | | |
|---|
| | | let apiKey = ''; |
|---|
| | | let isConfig = ref(false); |
|---|
| | | let isTalking = ref(false); |
|---|
| | | let messageContent = ref(''); |
|---|
| | | let messageContent = ref<ChatContent>({ |
|---|
| | | type: AnswerType.Text, |
|---|
| | | values: '', |
|---|
| | | }); |
|---|
| | | const chatListDom = ref<HTMLDivElement>(); |
|---|
| | | const decoder = new TextDecoder('utf-8'); |
|---|
| | | const roleAlias = { user: 'ME', assistant: 'ChatGPT', system: 'System' }; |
|---|
| | | const messageList = ref<ChatMessage[]>([ |
|---|
| | | { |
|---|
| | | role: RoleEnum.assistant, |
|---|
| | | content: `你好，我是AI语言模型，我可以提供一些常用服务和信息，例如： |
|---|
| | | |
|---|
| | | 1. 翻译：我可以把中文翻译成英文，英文翻译成中文，还有其他一些语言翻译，比如法语、日语、西班牙语等。 |
|---|
| | | |
|---|
| | | 2. 咨询服务：如果你有任何问题需要咨询，例如健康、法律、投资等方面，我可以尽可能为你提供帮助。 |
|---|
| | | |
|---|
| | | 3. 闲聊：如果你感到寂寞或无聊，我们可以聊一些有趣的话题，以减轻你的压力。 |
|---|
| | | |
|---|
| | | 请告诉我你需要哪方面的帮助，我会根据你的需求给你提供相应的信息和建议。`, |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | role: RoleEnum.user, |
|---|
| | | content: `你好`, |
|---|
| | | }, |
|---|
| | | ]); |
|---|
| | | |
|---|
| | | onMounted(() => { |
|---|
| | | if (getAPIKey()) { |
|---|
| | | switchConfigStatus(); |
|---|
| | | } |
|---|
| | | const messageList = ref<ChatMessage[]>([]); |
|---|
| | | const computedMessageList = computed(() => { |
|---|
| | | return messageList.value.filter((v) => v.role !== RoleEnum.system); |
|---|
| | | }); |
|---|
| | | |
|---|
| | | const sendChatMessage = async (content: string = messageContent.value) => { |
|---|
| | | const parseContent = (res) => { |
|---|
| | | let content: ChatContent = { |
|---|
| | | type: AnswerType.Text, |
|---|
| | | values: '发生错误！', |
|---|
| | | }; |
|---|
| | | switch (res.answer_type) { |
|---|
| | | case AnswerType.RecordSet: |
|---|
| | | content = { |
|---|
| | | type: AnswerType.RecordSet, |
|---|
| | | values: res.values, |
|---|
| | | }; |
|---|
| | | break; |
|---|
| | | case AnswerType.Text: |
|---|
| | | content = { |
|---|
| | | type: AnswerType.Text, |
|---|
| | | values: res.values ?? res.answer, |
|---|
| | | }; |
|---|
| | | break; |
|---|
| | | |
|---|
| | | case AnswerType.Knowledge: |
|---|
| | | content = { |
|---|
| | | type: AnswerType.Knowledge, |
|---|
| | | values: res.knowledge, |
|---|
| | | }; |
|---|
| | | |
|---|
| | | break; |
|---|
| | | case AnswerType.Summary: |
|---|
| | | content = { |
|---|
| | | type: AnswerType.Summary, |
|---|
| | | values: res.summary, |
|---|
| | | }; |
|---|
| | | break; |
|---|
| | | default: |
|---|
| | | content = { |
|---|
| | | type: AnswerType.Text, |
|---|
| | | values: '发生错误！', |
|---|
| | | }; |
|---|
| | | break; |
|---|
| | | } |
|---|
| | | return content; |
|---|
| | | }; |
|---|
| | | |
|---|
| | | const questionAi = async (text) => { |
|---|
| | | const res = await QuestionAi({ |
|---|
| | | question: text, |
|---|
| | | // FIXME: 暂时这样 |
|---|
| | | section_a_id: 'undefined', |
|---|
| | | history_group_id: activeRoomId.value, |
|---|
| | | }); |
|---|
| | | // 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; |
|---|
| | | }; |
|---|
| | | |
|---|
| | | const clearMessageContent = () => |
|---|
| | | (messageContent.value = { |
|---|
| | | type: AnswerType.Text, |
|---|
| | | values: '', |
|---|
| | | }); |
|---|
| | | |
|---|
| | | const scrollToBottom = () => { |
|---|
| | | if (!chatListDom.value) return; |
|---|
| | | chatListDom.value.lastElementChild?.scrollIntoView(); |
|---|
| | | }; |
|---|
| | | |
|---|
| | | 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; |
|---|
| | | } |
|---|
| | | try { |
|---|
| | | isTalking.value = true; |
|---|
| | | if (messageList.value.length === 2) { |
|---|
| | | messageList.value.pop(); |
|---|
| | | } |
|---|
| | | // 发送当前 |
|---|
| | | messageList.value.push({ role: RoleEnum.user, content }); |
|---|
| | | // 清空输入框 |
|---|
| | | clearMessageContent(); |
|---|
| | | messageList.value.push({ role: RoleEnum.assistant, content: '' }); |
|---|
| | | // 出现回复，置空出现等待动画 |
|---|
| | | messageList.value.push({ role: RoleEnum.assistant, content: null }); |
|---|
| | | |
|---|
| | | // const { body, status } = await chat(messageList.value, getAPIKey()); |
|---|
| | | // if (body) { |
|---|
| | | // const reader = body.getReader(); |
|---|
| | | // await readStream(reader, status); |
|---|
| | | // } |
|---|
| | | const a = new Promise<string>((resolve) => { |
|---|
| | | setTimeout(() => { |
|---|
| | | resolve('你好 '); |
|---|
| | | }, 500); |
|---|
| | | }); |
|---|
| | | |
|---|
| | | const msg = await a; |
|---|
| | | appendLastMessageContent(msg); |
|---|
| | | let resMsgContent: ChatContent = null; |
|---|
| | | resMsgContent = await questionAi(content.values); |
|---|
| | | appendLastMessageContent(resMsgContent); |
|---|
| | | } catch (error: any) { |
|---|
| | | appendLastMessageContent(error); |
|---|
| | | appendLastMessageContent({ |
|---|
| | | type: AnswerType.Text, |
|---|
| | | values: '发生错误！', |
|---|
| | | }); |
|---|
| | | } finally { |
|---|
| | | isTalking.value = false; |
|---|
| | | } |
|---|
| | | }; |
|---|
| | | |
|---|
| | | const readStream = async (reader: ReadableStreamDefaultReader<Uint8Array>, status: number) => { |
|---|
| | | let partialLine = ''; |
|---|
| | | |
|---|
| | | while (true) { |
|---|
| | | // eslint-disable-next-line no-await-in-loop |
|---|
| | | const { value, done } = await reader.read(); |
|---|
| | | if (done) break; |
|---|
| | | |
|---|
| | | const decodedText = decoder.decode(value, { stream: true }); |
|---|
| | | |
|---|
| | | if (status !== 200) { |
|---|
| | | const json = JSON.parse(decodedText); // start with "data: " |
|---|
| | | const content = json.error.message ?? decodedText; |
|---|
| | | appendLastMessageContent(content); |
|---|
| | | const appendLastMessageContent = (content: ChatContent) => { |
|---|
| | | if (messageList.value.at(-1)) { |
|---|
| | | messageList.value.at(-1).content = content; |
|---|
| | | } |
|---|
| | | }; |
|---|
| | | let currentSectionId = ''; |
|---|
| | | watch( |
|---|
| | | () => activeRoomId.value, |
|---|
| | | async (val) => { |
|---|
| | | if (!val) { |
|---|
| | | router.replace({ |
|---|
| | | name: 'Home', |
|---|
| | | }); |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | if (activeChatRoom.value.isInitial) { |
|---|
| | | messageContent.value = { |
|---|
| | | 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 { |
|---|
| | | role: RoleEnum.user, |
|---|
| | | content: { |
|---|
| | | type: AnswerType.Text, |
|---|
| | | values: item.question, |
|---|
| | | }, |
|---|
| | | } as ChatMessage; |
|---|
| | | }); |
|---|
| | | currentSectionId = res?.details?.[0]?.section_a_id; |
|---|
| | | const resList = await Promise.all((res.details ?? []).map((item) => getAnswerById(item.history_id))); |
|---|
| | | let i = 0; |
|---|
| | | |
|---|
| | | const chunk = partialLine + decodedText; |
|---|
| | | const newLines = chunk.split(/\r?\n/); |
|---|
| | | |
|---|
| | | partialLine = newLines.pop() ?? ''; |
|---|
| | | |
|---|
| | | for (const line of newLines) { |
|---|
| | | if (line.length === 0) continue; // ignore empty message |
|---|
| | | if (line.startsWith(':')) continue; // ignore sse comment message |
|---|
| | | if (line === 'data: [DONE]') return; // |
|---|
| | | |
|---|
| | | const json = JSON.parse(line.substring(6)); // start with "data: " |
|---|
| | | const content = status === 200 ? json.choices[0].delta.content ?? '' : json.error.message; |
|---|
| | | appendLastMessageContent(content); |
|---|
| | | resList.map((item, index) => { |
|---|
| | | const insertIndex = index + 1 + i; |
|---|
| | | messageList.value.splice(insertIndex, 0, { |
|---|
| | | role: RoleEnum.assistant, |
|---|
| | | content: parseContent(item.answer), |
|---|
| | | }); |
|---|
| | | i++; |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | immediate: true, |
|---|
| | | } |
|---|
| | | }; |
|---|
| | | ); |
|---|
| | | |
|---|
| | | const appendLastMessageContent = (content: string) => (messageList.value[messageList.value.length - 1].content += content); |
|---|
| | | |
|---|
| | | const sendOrSave = () => { |
|---|
| | | if (!messageContent.value.length) return; |
|---|
| | | if (isConfig.value) { |
|---|
| | | if (saveAPIKey(messageContent.value.trim())) { |
|---|
| | | switchConfigStatus(); |
|---|
| | | } |
|---|
| | | clearMessageContent(); |
|---|
| | | } else { |
|---|
| | | sendChatMessage(); |
|---|
| | | watch( |
|---|
| | | messageList, |
|---|
| | | () => { |
|---|
| | | nextTick(() => scrollToBottom()); |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | deep: true, |
|---|
| | | } |
|---|
| | | ); |
|---|
| | | |
|---|
| | | //#region ====================== 聊天内容操作 ====================== |
|---|
| | | |
|---|
| | | const { toClipboard } = useClipboard(); |
|---|
| | | |
|---|
| | | const copyClick = (content) => { |
|---|
| | | ElMessage.success('复制成功'); |
|---|
| | | toClipboard(content); |
|---|
| | | }; |
|---|
| | | |
|---|
| | | const clickConfig = () => { |
|---|
| | | if (!isConfig.value) { |
|---|
| | | messageContent.value = getAPIKey(); |
|---|
| | | } else { |
|---|
| | | clearMessageContent(); |
|---|
| | | } |
|---|
| | | switchConfigStatus(); |
|---|
| | | }; |
|---|
| | | |
|---|
| | | const getSecretKey = () => 'lianginx'; |
|---|
| | | |
|---|
| | | const saveAPIKey = (apiKey: string) => { |
|---|
| | | if (apiKey.slice(0, 3) !== 'sk-' || apiKey.length !== 51) { |
|---|
| | | alert('API Key 错误，请检查后重新输入！'); |
|---|
| | | return false; |
|---|
| | | } |
|---|
| | | const aesAPIKey = cryptoJS.AES.encrypt(apiKey, getSecretKey()).toString(); |
|---|
| | | localStorage.setItem('apiKey', aesAPIKey); |
|---|
| | | return true; |
|---|
| | | }; |
|---|
| | | |
|---|
| | | const getAPIKey = () => { |
|---|
| | | if (apiKey) return apiKey; |
|---|
| | | const aesAPIKey = localStorage.getItem('apiKey') ?? ''; |
|---|
| | | apiKey = cryptoJS.AES.decrypt(aesAPIKey, getSecretKey()).toString(cryptoJS.enc.Utf8); |
|---|
| | | return apiKey; |
|---|
| | | }; |
|---|
| | | |
|---|
| | | const switchConfigStatus = () => (isConfig.value = !isConfig.value); |
|---|
| | | |
|---|
| | | const clearMessageContent = () => (messageContent.value = ''); |
|---|
| | | |
|---|
| | | const scrollToBottom = () => { |
|---|
| | | if (!chatListDom.value) return; |
|---|
| | | chatListDom.value.lastElementChild.scrollIntoView(); |
|---|
| | | // scrollTo(0, chatListDom.value.scrollHeight); |
|---|
| | | }; |
|---|
| | | |
|---|
| | | watch(messageList.value, () => nextTick(() => scrollToBottom())); |
|---|
| | | //#endregion |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style scoped> |
|---|
