| | |
| | | <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 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 messageList.filter((v) => v.role !== 'system')" |
| | |
| | | <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" /> |
| | | <SvgIcon class="cursor-pointer" :size="12" name="ywicon icon-buzan" /> |
| | | </div> |
| | | </div> |
| | | |
| | |
| | | import { md } from './libs/markdown'; |
| | | import { RoleEnum, roleImageMap, type ChatMessage } from './types'; |
| | | import PlayBar from '/@/components/chat/components/playBar/PlayBar.vue'; |
| | | import { activeChatRoom } from '/@/stores/chatRoom'; |
| | | import router from '/@/router'; |
| | | |
| | | let apiKey = ''; |
| | | let isConfig = ref(false); |
| | |
| | | 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: `你好`, |
| | | }, |
| | | // { |
| | | // role: RoleEnum.assistant, |
| | | // content: `你好,我是AI语言模型,我可以提供一些常用服务和信息,例如: |
| | | // 1. 翻译:我可以把中文翻译成英文,英文翻译成中文,还有其他一些语言翻译,比如法语、日语、西班牙语等。 |
| | | // 2. 咨询服务:如果你有任何问题需要咨询,例如健康、法律、投资等方面,我可以尽可能为你提供帮助。 |
| | | // 3. 闲聊:如果你感到寂寞或无聊,我们可以聊一些有趣的话题,以减轻你的压力。 |
| | | // 请告诉我你需要哪方面的帮助,我会根据你的需求给你提供相应的信息和建议。`, |
| | | // }, |
| | | // { |
| | | // role: RoleEnum.user, |
| | | // content: `你好`, |
| | | // }, |
| | | ]); |
| | | |
| | | onMounted(() => { |
| | | if (getAPIKey()) { |
| | | switchConfigStatus(); |
| | | } |
| | | |
| | | const inputValue = history.state.inputValue; |
| | | if (!activeChatRoom.value) { |
| | | router.replace({ |
| | | name: 'Home', |
| | | }); |
| | | return; |
| | | } |
| | | messageContent.value = activeChatRoom.value.title; |
| | | sendOrSave(); |
| | | }); |
| | | |
| | | const sendChatMessage = async (content: string = messageContent.value) => { |
| | | try { |
| | | isTalking.value = true; |
| | | if (messageList.value.length === 2) { |
| | | messageList.value.pop(); |
| | | } |
| | | // if (messageList.value.length === 0) { |
| | | // messageList.value.pop(); |
| | | // } |
| | | messageList.value.push({ role: RoleEnum.user, content }); |
| | | clearMessageContent(); |
| | | messageList.value.push({ role: RoleEnum.assistant, content: '' }); |
| | |
| | | |
| | | const sendOrSave = () => { |
| | | if (!messageContent.value.length) return; |
| | | if (activeChatRoom.value.isInitial) { |
| | | activeChatRoom.value.title = messageContent.value; |
| | | activeChatRoom.value.isInitial = false; |
| | | } |
| | | if (isConfig.value) { |
| | | if (saveAPIKey(messageContent.value.trim())) { |
| | | switchConfigStatus(); |