wujingjing
2024-09-12 495d1510f9a9ebf1f488569f6ca24a6be56bc9f3
src/components/chat/Chat.vue
@@ -1,7 +1,7 @@
<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')"
@@ -19,7 +19,7 @@
                     <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>
@@ -44,6 +44,8 @@
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);
@@ -53,38 +55,40 @@
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: '' });
@@ -147,6 +151,10 @@
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();