消息使用特定組件解析

gerson

2024-06-30 839461b04197f781ff8627d75824dacbbb76230f

 src/components/chat/Chat.vue

@@ -10,17 +10,18 @@
               <img class="rounded-full size-12 mr-4" :src="roleImageMap[item.role]" alt="" srcset="" />

               <div class="flex">
                  <div class="relative" v-if="item.content">
                  <div class="relative" v-if="item.content?.values">
                     <div
                        :class="{ 'bg-[#d8d8ff]': item.role === RoleEnum.assistant, 'bg-white': item.role === RoleEnum.user }"
                        class="prose text-sm rounded-[6px] p-4 leading-relaxed max-w-[100ch]"
                        v-html="md.render(item.content)"
                     ></div>
                     <div v-if="item.role === RoleEnum.assistant" class="absolute flex items-center right-0 space-x-2 mr-2 mt-2">
                        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> -->
                  </div>

                  <Loding v-else />
@@ -30,172 +31,124 @@
      </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 { ElMessage } from 'element-plus';
import { nextTick, onMounted, ref, watch } from 'vue';
import useClipboard from 'vue-clipboard3';
import Loding from './components/Loding.vue';
import { md } from './libs/markdown';
import { RoleEnum, roleImageMap, type ChatMessage } from './types';
import { RecordSet } from './model/Record';
import type { ChatContent } from './model/types';
import { AnswerType, RoleEnum, answerTypeMapCom, roleImageMap, type ChatMessage } from './model/types';
import { QuestionAi } from '/@/api/ai/chat';
import PlayBar from '/@/components/chat/components/playBar/PlayBar.vue';
import { activeChatRoom } from '/@/stores/chatRoom';
import router from '/@/router';
import { activeChatRoom } from '/@/stores/chatRoom';
import { ElMessage } from 'element-plus';

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: `你好`,
   //    },
]);
const messageList = ref<ChatMessage[]>([]);

onMounted(() => {
   if (getAPIKey()) {
      switchConfigStatus();
   }
   if (!activeChatRoom.value) {
      router.replace({
         name: 'Home',
      });
      return;
   }
   messageContent.value = activeChatRoom.value.title;
   sendOrSave();
   messageContent.value = {
      type: AnswerType.Text,
      values: activeChatRoom.value.title,
   };
   sendChatMessage();
});

const sendChatMessage = async (content: string = messageContent.value) => {
const questionAi = async (text) => {
   // const res = await QuestionAi({
   //    question: text,
   // });
   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)的最大压力值',
      },
   };
   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,
         };
         break;
      default:
         break;
   }
   return content;
};

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 === 0) {
      //    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('你好，我是AI语言模型 ');
         }, 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);
         return;
      }

      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);
      }
   }
const appendLastMessageContent = (content: ChatContent) => {
   messageList.value.at(-1).content = content;
};

const appendLastMessageContent = (content: string) => (messageList.value[messageList.value.length - 1].content += 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();
      }
      clearMessageContent();
   } else {
      sendChatMessage();
   }
};

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 clearMessageContent = () =>
   (messageContent.value = {
      type: AnswerType.Text,
      values: '',
   });

const scrollToBottom = () => {
   if (!chatListDom.value) return;