改进聊天

2024-09-12 15:03:24 +08:00 · 2024-09-12 15:03:24 +08:00 · 48196a4942
commit 48196a4942
parent 20574c967e
3 changed files with 110 additions and 40 deletions
--- a/package.json
+++ b/package.json
@ -11,11 +11,15 @@
    "gen": "openapi-generator-cli generate -i ./api/swagger.yaml -g typescript-axios -o ./src/api"
  },
  "dependencies": {
+    "@f3ve/vue-markdown-it": "^0.2.2",
    "@kangc/v-md-editor": "^2.3.18",
+    "@traptitech/markdown-it-katex": "^3.6.0",
    "axios": "^1.7.7",
    "highlight.js": "^11.10.0",
    "js-base64": "^3.7.7",
+    "katex": "^0.16.11",
    "lottie-web": "^5.12.2",
+    "markdown-it-latex2img": "^0.0.6",
    "pinia": "^2.2.2",
    "pinia-plugin-persistedstate": "^4.0.0",
    "vooks": "^0.2.12",
@ -24,6 +28,7 @@
  },
  "devDependencies": {
    "@babel/types": "^7.18.10",
+    "@types/markdown-it": "^14.1.2",
    "@types/node": "^22.5.4",
    "@vicons/ionicons5": "^0.12.0",
    "@vicons/material": "^0.12.0",
--- a/src/components/chat/MessageList.vue
+++ b/src/components/chat/MessageList.vue
@ -1,52 +1,87 @@
 <template>
-  <!-- flex 布局 -->
-  <n-flex> </n-flex>
+  <div class="text-base">
+    <n-divider> <small>这是聊天的开头</small> </n-divider>

-  <n-divider> <small>这是聊天的开头</small> </n-divider>
+    <div v-for="(message, index) in chat_messages" :key="index">
+      <div v-if="message.role === 'user' && message.content">
+        <!-- 用户消息 -->
+        <n-flex justify="end">
+          <div class="flex items-center">
+            <!-- <vue-markdown-it
+            :source="message.content"
+            :options="markdownOptions"
+            :plugins="markdownPlugins"
+          /> -->
+            <!-- <v-md-preview :text="message.content" height="500px"></v-md-preview> -->
+            <div v-html="mdIt.render(message.content)"></div>
+          </div>
+          <n-avatar round size="large" :src="userStore.user.avatar" />
+        </n-flex>
+      </div>
+      <div v-else-if="message.role === 'assistant' && message.content" class="mt-3">
+        <!-- 助理消息 -->
+        <n-flex justify="start">
+          <n-avatar round size="large" :src="leaflowPng" />

-  <div v-for="(message, index) in chat_messages" :key="index">
-    <div v-if="message.role === 'user'">
-      <!-- 用户消息 -->
-      <n-flex justify="end">
-        <div class="align-middle">
-          <v-md-preview :text="message.content" height="500px"></v-md-preview>
-        </div>
-        <n-avatar round size="large" :src="userStore.user.avatar" />
-      </n-flex>
-    </div>
-    <div v-else-if="message.role === 'assistant'">
-      <!-- 助理消息 -->
-      <n-flex justify="start">
-        <n-avatar round size="large" :src="leaflowPng" />
+          <div class="align-middle">
+            <!-- <vue-markdown-it
+            :source="message.content"
+            :options="markdownOptions"
+            :plugins="[markdownPlugins]"
+          /> -->

-        <div class="align-middle">
-          <v-md-preview :text="message.content" height="500px"></v-md-preview>
-        </div>
-      </n-flex>
+            <!-- <div v-html="mdIt.render('# Math Rulez! \n  $\\sqrt{3x-1}+(1+x)^2$')"></div> -->
+
+            <div v-html="mdIt.render(message.content)"></div>
+
+            <!-- <v-md-preview :text="message.content" height="500px"></v-md-preview> -->
+          </div>
+        </n-flex>
+      </div>
    </div>
  </div>
-
  <!-- 这里要加上输入框占的部分，但是那个占了很多，所以设置大一点 -->
-  <div style="margin-bottom: 10rem;"></div>
+  <div style="margin-bottom: 10rem"></div>
 </template>

 <script lang="ts" setup>
 import { Ref } from "vue";
 import { EntityChatMessage } from "@/api";
 import { useUserStore } from "@/stores/user";
-import VMdPreview from "@kangc/v-md-editor/lib/preview";
-import "@kangc/v-md-editor/lib/style/preview.css";
-import githubTheme from "@kangc/v-md-editor/lib/theme/github.js";
-import "@kangc/v-md-editor/lib/theme/style/github.css";
 import leaflowPng from "@/assets/images/leaflow.png";
-
+import markdownKatex from "@traptitech/markdown-it-katex";
+import markdownIt from "markdown-it";
+import markdownLatex from "markdown-it-latex2img";
 // highlightjs
 import hljs from "highlight.js";

-VMdPreview.use(githubTheme, {
-  Hljs: hljs,
+import { VueMarkdownIt } from "@f3ve/vue-markdown-it";
+
+const mdIt = markdownIt();
+
+// set options
+mdIt.options.highlight = function (str: string, lang: string) {
+  if (!lang) {
+    return "";
+  }
+  return hljs.highlight(str, { language: lang }).value;
+};
+
+mdIt.use(markdownKatex, {
+  throwOnError: false,
+  errorColor: "#cc0000",
+  output: "html",
 });

+mdIt.use(markdownKatex)
+mdIt.use(markdownLatex);
+
+const markdownOptions = {
+  html: true,
+  linkify: true,
+};
+const markdownPlugins = [markdownKatex];
+
 const userStore = useUserStore();

 const props = defineProps({
--- a/src/components/chat/chat.vue
+++ b/src/components/chat/chat.vue
@ -15,7 +15,7 @@
        </div>

        <div v-else>
-            <MessageList :chat_messages="chatMessages" />
+          <MessageList :chat_messages="chatMessages" />
        </div>
      </div>

@ -23,7 +23,6 @@
        <div
          ref="inputContainer"
          class="mx-auto w-2xl max-w-2xl outline-none input-color input-bg rounded-full flex pl-5 pr-5 bg-white shadow-lg items-center p-4 pb-4 transition-all"
-          @keyup.enter="sendText"
        >
          <div class="overflow-x-hidden h-full w-full flex items-center">
            <n-scrollbar class="max-h-96">
@ -33,7 +32,10 @@
                contenteditable="true"
                placeholder="请输入文本..."
                class="input-text max-w-full outline-none text-lg text-pretty pl-2 min-h-6"
+                @keydown="onKeydown"
                @input="updateInputHeight"
+                @compositionstart="handleCompositionStart"
+                @compositionend="handleCompositionEnd"
              ></div>
            </n-scrollbar>
          </div>
@ -73,6 +75,7 @@ import {
 } from "@vicons/ionicons5";
 import { EntityChatMessage } from "@/api";
 import getApi from "@/plugins/api";
+import MessageList from "./MessageList.vue";

 // 获取组件传入的 chatId
 const chatId: Ref<string | number | undefined | null> = ref(null);
@ -103,8 +106,28 @@ const isPlaceholderVisible = ref(true);
 const triggerTimes = ref(0);
 const showSendBtn = ref(false);
 const content = ref("");
+const inputExpanded = ref(false);
 const chatMessages: Ref<EntityChatMessage[] | undefined> = ref([]);

+function onKeydown(e: KeyboardEvent) {
+  // 带 shift 不触发
+  if (e.shiftKey || inputExpanded.value) {
+    return;
+  }
+
+  // 如果 content.value 是空的，但是同时按了 Shift 和 Enter，则阻止
+  if (content.value.trim() === "" && e.code === "Enter") {
+    e.preventDefault();
+    return;
+  }
+
+  // 禁止换行起手
+  if (!compositionStart.value && e.code === "Enter") {
+    e.preventDefault();
+    sendText();
+  }
+}
+
 function updateInputHeight() {
  if (!inputText?.value || !inputContainer.value || !actionContainer.value) {
    return;
@ -132,7 +155,10 @@ function updateInputHeight() {

  const lines = input.innerText.split("\n").length;

-  if (lines > 3 || height > 50) {
+  if (lines > 1) {
+    triggerTimes.value += 8;
+  }
+  if (height > 50) {
    triggerTimes.value += 1;
  } else {
    triggerTimes.value -= 1;
@ -141,28 +167,30 @@ function updateInputHeight() {
  if (triggerTimes.value > 8) {
    container.classList.add("rounded-lg");
    container.classList.remove("rounded-full");
-    container.classList.remove("max-w-2xl");
-    container.classList.remove("w-2xl");
+    // container.classList.remove("max-w-2xl");
+    // container.classList.remove("w-2xl");
    container.classList.add("flex-col");
-    action.classList.add("w-full");
+    // action.classList.add("w-full");
    action.classList.add("text-right");
    action.classList.add("pt-4");
    action.classList.add("pb-0");
    action.classList.add("mt-2");
    showSendBtn.value = true;
+    inputExpanded.value = true;
  } else {
    container.classList.remove("rounded-lg");
    container.classList.add("rounded-full");
    container.classList.remove("flex-col");
-    container.classList.add("w-2xl");
-    container.classList.add("max-w-2xl");
+    // container.classList.add("w-2xl");
+    // container.classList.add("max-w-2xl");

-    action.classList.remove("w-full");
+    // action.classList.remove("w-full");
    action.classList.remove("text-right");
    action.classList.remove("pt-4");
    action.classList.remove("pt-0");
    action.classList.remove("mt-2");
    showSendBtn.value = false;
+    inputExpanded.value = false;
  }
 }

@ -193,7 +221,7 @@ function sendText() {
  input.innerText = "";

  updateInputHeight();
-  
+
  chatMessages.value?.push({
    content: textContent,
    role: "user",
@ -202,6 +230,8 @@ function sendText() {

 function sendMessage(text: string) {
  console.log("发送文本:", text);
+
+  chatMessages.value?.push({ content: text, role: "user" });
  // 实际发送文本到服务器的逻辑
 }