| | |
|---|
| | | <template> |
|---|
| | | <div class="flex flex-col h-screen"> |
|---|
| | | <div class="flex flex-nowrap fixed w-full items-baseline top-0 px-6 py-4 bg-gray-100"> |
|---|
| | | <div class="text-2xl font-bold">ChatGPT</div> |
|---|
| | | <div class="ml-4 text-sm text-gray-500">基于 OpenAI 的 ChatGPT 自然语言模型人工智能对话</div> |
|---|
| | | <div class="ml-auto px-3 py-2 text-sm cursor-pointer hover:bg-white rounded-md" @click="clickConfig()">设置</div> |
|---|
| | | </div> |
|---|
| | | <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 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-1 mx-2 mt-20 mb-2" ref="chatListDom"> |
|---|
| | | <div |
|---|
| | | class="group flex flex-col px-4 py-3 hover:bg-slate-100 rounded-lg" |
|---|
| | | v-for="(item, index) of messageList.filter((v) => v.role !== 'system')" |
|---|
| | | :key="index" |
|---|
| | | > |
|---|
| | | <div class="flex justify-between items-center mb-2"> |
|---|
| | | <div class="font-bold">{{ roleAlias[item.role] }}：</div> |
|---|
| | | <Copy class="invisible group-hover:visible" :content="item.content" /> |
|---|
| | | </div> |
|---|
| | | <div> |
|---|
| | | <div class="prose text-sm text-slate-600 leading-relaxed" v-if="item.content" v-html="md.render(item.content)"></div> |
|---|
| | | <Loding v-else /> |
|---|
| | | <div class="flex"> |
|---|
| | | <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 mr-2 mt-2 space-x-2"> |
|---|
| | | <div class="flex items-center justify-center size-[15px]" v-if="item.content?.type === AnswerType.Text"> |
|---|
| | | <i |
|---|
| | | class="p-2 ywicon icon-copy cursor-pointer hover:text-[#0284ff] hover:!text-[18px]" |
|---|
| | | @click="copyClick(item.content.values)" |
|---|
| | | /> |
|---|
| | | </div> |
|---|
| | | <div class="flex items-center justify-center size-[15px]"> |
|---|
| | | <i |
|---|
| | | :class="{ 'text-[#0284ff]': item.state === AnswerState.Like }" |
|---|
| | | class="p-2 ywicon icon-dianzan cursor-pointer hover:text-[#0284ff] font-medium hover:!text-[18px]" |
|---|
| | | @click="likeClick(item)" |
|---|
| | | /> |
|---|
| | | </div> |
|---|
| | | <div class="flex items-center justify-center size-[15px]"> |
|---|
| | | <i |
|---|
| | | :class="{ 'text-[#0284ff]': item.state === AnswerState.Unlike }" |
|---|
| | | class="p-2 ywicon icon-buzan cursor-pointer hover:text-[#0284ff] !text-[13px] hover:!text-[15px]" |
|---|
| | | @click="unLikeClick(item)" |
|---|
| | | /> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <Loding v-else /> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <div class="sticky bottom-0 w-full p-6 pb-8 bg-gray-100"> |
|---|
| | | <div class="-mt-2 mb-2 text-sm text-gray-500" v-if="isConfig">请输入 API Key：</div> |
|---|
| | | <div class="flex"> |
|---|
| | | <input |
|---|
| | | class="input" |
|---|
| | | :type="isConfig ? 'password' : 'text'" |
|---|
| | | :placeholder="isConfig ? 'sk-xxxxxxxxxx' : '请输入'" |
|---|
| | | v-model="messageContent" |
|---|
| | | @keydown.enter="isTalking || sendOrSave()" |
|---|
| | | /> |
|---|
| | | <button class="btn" :disabled="isTalking" @click="sendOrSave()"> |
|---|
| | | {{ isConfig ? '保存' : '发送' }} |
|---|
| | | </button> |
|---|
| | | </div> |
|---|
| | | <div class="sticky bottom-0 w-full p-6 pb-8 bg-gray-100 flex justify-center"> |
|---|
| | | <PlayBar :isTalking="isTalking" v-model="messageContent.values" @sendClick="sendChatMessage" /> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script setup lang="ts"> |
|---|
| | | import type { ChatMessage } from './types'; |
|---|
| | | import { ref, watch, nextTick, onMounted } from 'vue'; |
|---|
| | | import cryptoJS from 'crypto-js'; |
|---|
| | | import { ElMessage } from 'element-plus'; |
|---|
| | | import { computed, nextTick, ref, watch } from 'vue'; |
|---|
| | | import useClipboard from 'vue-clipboard3'; |
|---|
| | | import Loding from './components/Loding.vue'; |
|---|
| | | import Copy from './components/Copy.vue'; |
|---|
| | | import { md } from './libs/markdown'; |
|---|
| | | let apiKey = ''; |
|---|
| | | let isConfig = ref(false); |
|---|
| | | let isTalking = ref(false); |
|---|
| | | let messageContent = ref(''); |
|---|
| | | const chatListDom = ref<HTMLDivElement>(); |
|---|
| | | const decoder = new TextDecoder('utf-8'); |
|---|
| | | const roleAlias = { user: 'ME', assistant: 'ChatGPT', system: 'System' }; |
|---|
| | | const messageList = ref<ChatMessage[]>([ |
|---|
| | | { |
|---|
| | | role: 'system', |
|---|
| | | content: '你是 ChatGPT，OpenAI 训练的大型语言模型，尽可能简洁地回答。', |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | role: 'assistant', |
|---|
| | | content: `你好，我是AI语言模型，我可以提供一些常用服务和信息，例如： |
|---|
| | | |
|---|
| | | 1. 翻译：我可以把中文翻译成英文，英文翻译成中文，还有其他一些语言翻译，比如法语、日语、西班牙语等。 |
|---|
| | | |
|---|
| | | 2. 咨询服务：如果你有任何问题需要咨询，例如健康、法律、投资等方面，我可以尽可能为你提供帮助。 |
|---|
| | | |
|---|
| | | 3. 闲聊：如果你感到寂寞或无聊，我们可以聊一些有趣的话题，以减轻你的压力。 |
|---|
| | | |
|---|
| | | 请告诉我你需要哪方面的帮助，我会根据你的需求给你提供相应的信息和建议。`, |
|---|
| | | }, |
|---|
| | | ]); |
|---|
| | | import type { ChatContent } from './model/types'; |
|---|
| | | import { AnswerType, RoleEnum, answerTypeMapCom, roleImageMap, type ChatMessage, AnswerState } from './model/types'; |
|---|
| | | import { GetHistoryAnswer, QueryHistoryDetail, QuestionAi, SetHistoryAnswerState } 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'; |
|---|
| | | |
|---|
| | | onMounted(() => { |
|---|
| | | if (getAPIKey()) { |
|---|
| | | switchConfigStatus(); |
|---|
| | | } |
|---|
| | | let isTalking = ref(false); |
|---|
| | | let messageContent = ref<ChatContent>({ |
|---|
| | | type: AnswerType.Text, |
|---|
| | | values: '', |
|---|
| | | }); |
|---|
| | | const chatListDom = ref<HTMLDivElement>(); |
|---|
| | | 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; |
|---|
| | | }; |
|---|
| | | |
|---|
| | | let questionRes = null; |
|---|
| | | const questionAi = async (text) => { |
|---|
| | | if (!currentSectionId) { |
|---|
| | | ElMessage.warning('发送失败，未确定应用场景！'); |
|---|
| | | } |
|---|
| | | |
|---|
| | | const params = { |
|---|
| | | question: text, |
|---|
| | | // FIXME: 暂时这样 |
|---|
| | | section_a_id: currentSectionId, |
|---|
| | | history_group_id: activeRoomId.value, |
|---|
| | | } as any; |
|---|
| | | |
|---|
| | | if (currentSampleId) { |
|---|
| | | params.sample_id = currentSampleId; |
|---|
| | | } |
|---|
| | | |
|---|
| | | if (currentLLMId) { |
|---|
| | | params.llm_id = currentLLMId; |
|---|
| | | } |
|---|
| | | |
|---|
| | | const res = await QuestionAi(params); |
|---|
| | | 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; |
|---|
| | | }; |
|---|
| | | |
|---|
| | | const clearMessageContent = () => |
|---|
| | | (messageContent.value = { |
|---|
| | | type: AnswerType.Text, |
|---|
| | | values: '', |
|---|
| | | }); |
|---|
| | | |
|---|
| | | const scrollToBottom = () => { |
|---|
| | | if (!chatListDom.value) return; |
|---|
| | | chatListDom.value.lastElementChild?.scrollIntoView(); |
|---|
| | | }; |
|---|
| | | let currentSectionId = null; |
|---|
| | | 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 (activeSampleId.value) { |
|---|
| | | currentSampleId = activeSampleId.value; |
|---|
| | | } |
|---|
| | | |
|---|
| | | if (activeLLMId.value) { |
|---|
| | | currentLLMId = activeLLMId.value; |
|---|
| | | } |
|---|
| | | |
|---|
| | | if (activeSectionAId.value) { |
|---|
| | | currentSectionId = activeSectionAId.value; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | try { |
|---|
| | | isTalking.value = true; |
|---|
| | | if (messageList.value.length === 2) { |
|---|
| | | messageList.value.pop(); |
|---|
| | | } |
|---|
| | | messageList.value.push({ role: 'user', content }); |
|---|
| | | const userItem: ChatMessage = { role: RoleEnum.user, content } as any; |
|---|
| | | const assistantItem: ChatMessage = { role: RoleEnum.assistant, content: null, state: AnswerState.Null } as any; |
|---|
| | | // 发送当前 |
|---|
| | | messageList.value.push(userItem); |
|---|
| | | // 清空输入框 |
|---|
| | | clearMessageContent(); |
|---|
| | | messageList.value.push({ role: 'assistant', content: '' }); |
|---|
| | | |
|---|
| | | // 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('nihao '); |
|---|
| | | }, 500); |
|---|
| | | }); |
|---|
| | | // 出现回复，置空出现等待动画 |
|---|
| | | messageList.value.push(assistantItem); |
|---|
| | | |
|---|
| | | const msg = await a; |
|---|
| | | appendLastMessageContent(msg); |
|---|
| | | let resMsgContent: ChatContent = null; |
|---|
| | | resMsgContent = await questionAi(content.values); |
|---|
| | | userItem.historyId = questionRes.history_id; |
|---|
| | | assistantItem.historyId = questionRes.history_id; |
|---|
| | | appendLastMessageContent(resMsgContent); |
|---|
| | | } catch (error: any) { |
|---|
| | | appendLastMessageContent(error); |
|---|
| | | appendLastMessageContent({ |
|---|
| | | type: AnswerType.Text, |
|---|
| | | values: '发生错误！', |
|---|
| | | }); |
|---|
| | | } finally { |
|---|
| | | isTalking.value = false; |
|---|
| | | } |
|---|
| | | }; |
|---|
| | | const appendLastMessageContent = (content: ChatContent) => { |
|---|
| | | if (messageList.value.at(-1)) { |
|---|
| | | messageList.value.at(-1).content = content; |
|---|
| | | } |
|---|
| | | }; |
|---|
| | | |
|---|
| | | 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); |
|---|
| | | 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 { |
|---|
| | | 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; |
|---|
| | | |
|---|
| | | 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, { |
|---|
| | | historyId: item.answer.history_id, |
|---|
| | | role: RoleEnum.assistant, |
|---|
| | | content: parseContent(item.answer), |
|---|
| | | state: item.answer_state, |
|---|
| | | }); |
|---|
| | | 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(); |
|---|
| | | let forbidScroll = false; |
|---|
| | | watch( |
|---|
| | | messageList, |
|---|
| | | () => { |
|---|
| | | if (forbidScroll) return; |
|---|
| | | 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 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 getSecretKey = () => 'lianginx'; |
|---|
| | | 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; |
|---|
| | | |
|---|
| | | 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; |
|---|
| | | forbidScroll = true; |
|---|
| | | nextTick(() => { |
|---|
| | | forbidScroll = false; |
|---|
| | | }); |
|---|
| | | }; |
|---|
| | | |
|---|
| | | 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; |
|---|
| | | scrollTo(0, chatListDom.value.scrollHeight); |
|---|
| | | }; |
|---|
| | | |
|---|
| | | watch(messageList.value, () => nextTick(() => scrollToBottom())); |
|---|
| | | //#endregion |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style scoped> |
|---|
