add 'type' field for ChatModel, support Chat and Image model

web/src/components/ChatReply.vue

@@ -6,23 +6,14 @@
       </div>
 
       <div class="chat-item">
-        <div
-          class="content"
-          v-html="md.render(processContent(data.content))"
-        ></div>
+        <div class="content" v-html="md.render(processContent(data.content))"></div>
         <div class="bar" v-if="data.created_at">
           <span class="bar-item"
-            ><el-icon><Clock /></el-icon>
-            {{ dateFormat(data.created_at) }}</span
+            ><el-icon><Clock /></el-icon> {{ dateFormat(data.created_at) }}</span
           >
           <span class="bar-item">tokens: {{ data.tokens }}</span>
           <span class="bar-item">
-            <el-tooltip
-              class="box-item"
-              effect="dark"
-              content="复制回答"
-              placement="bottom"
-            >
+            <el-tooltip class="box-item" effect="dark" content="复制回答" placement="bottom">
               <el-icon class="copy-reply" :data-clipboard-text="data.content">
                 <DocumentCopy />
               </el-icon>
@@ -30,23 +21,13 @@
           </span>
           <span v-if="!readOnly">
             <span class="bar-item" @click="reGenerate(data.prompt)">
-              <el-tooltip
-                class="box-item"
-                effect="dark"
-                content="重新生成"
-                placement="bottom"
-              >
+              <el-tooltip class="box-item" effect="dark" content="重新生成" placement="bottom">
                 <el-icon><Refresh /></el-icon>
               </el-tooltip>
             </span>
 
             <span class="bar-item" @click="synthesis(data.content)">
-              <el-tooltip
-                class="box-item"
-                effect="dark"
-                content="生成语音朗读"
-                placement="bottom"
-              >
+              <el-tooltip class="box-item" effect="dark" content="生成语音朗读" placement="bottom">
                 <i class="iconfont icon-speaker"></i>
               </el-tooltip>
             </span>
@@ -75,24 +56,15 @@
       </div>
       <div class="chat-item">
         <div class="content-wrapper">
-          <div
-            class="content"
-            v-html="md.render(processContent(data.content))"
-          ></div>
+          <div class="content" v-html="md.render(processContent(data.content))"></div>
         </div>
         <div class="bar" v-if="data.created_at">
           <span class="bar-item"
-            ><el-icon><Clock /></el-icon>
-            {{ dateFormat(data.created_at) }}</span
+            ><el-icon><Clock /></el-icon> {{ dateFormat(data.created_at) }}</span
           >
           <!--          <span class="bar-item">tokens: {{ data.tokens }}</span>-->
           <span class="bar-item bg">
-            <el-tooltip
-              class="box-item"
-              effect="dark"
-              content="复制回答"
-              placement="bottom"
-            >
+            <el-tooltip class="box-item" effect="dark" content="复制回答" placement="bottom">
               <el-icon class="copy-reply" :data-clipboard-text="data.content">
                 <DocumentCopy />
               </el-icon>
@@ -100,23 +72,13 @@
           </span>
           <span v-if="!readOnly">
             <span class="bar-item bg" @click="reGenerate(data.prompt)">
-              <el-tooltip
-                class="box-item"
-                effect="dark"
-                content="重新生成"
-                placement="bottom"
-              >
+              <el-tooltip class="box-item" effect="dark" content="重新生成" placement="bottom">
                 <el-icon><Refresh /></el-icon>
               </el-tooltip>
             </span>
 
             <span class="bar-item bg" @click="synthesis(data.content)">
-              <el-tooltip
-                class="box-item"
-                effect="dark"
-                content="生成语音朗读"
-                placement="bottom"
-              >
+              <el-tooltip class="box-item" effect="dark" content="生成语音朗读" placement="bottom">
                 <i class="iconfont icon-speaker"></i>
               </el-tooltip>
             </span>
@@ -132,6 +94,10 @@ import { Clock, DocumentCopy, Refresh } from "@element-plus/icons-vue";
 import { ElMessage } from "element-plus";
 import { dateFormat, processContent } from "@/utils/libs";
 import hl from "highlight.js";
+import emoji from "markdown-it-emoji";
+import mathjaxPlugin from "markdown-it-mathjax3";
+import MarkdownIt from "markdown-it";
+
 // eslint-disable-next-line no-undef,no-unused-vars
 const props = defineProps({
   data: {
@@ -140,28 +106,26 @@ const props = defineProps({
       icon: "",
       content: "",
       created_at: "",
-      tokens: 0
-    }
+      tokens: 0,
+    },
   },
   readOnly: {
     type: Boolean,
-    default: false
+    default: false,
   },
   listStyle: {
     type: String,
-    default: "list"
-  }
+    default: "list",
+  },
 });
 
-const mathjaxPlugin = require("markdown-it-mathjax3");
-const md = require("markdown-it")({
+const md = new MarkdownIt({
   breaks: true,
   html: true,
   linkify: true,
   typographer: true,
   highlight: function (str, lang) {
-    const codeIndex =
-      parseInt(Date.now()) + Math.floor(Math.random() * 10000000);
+    const codeIndex = parseInt(Date.now()) + Math.floor(Math.random() * 10000000);
     // 显示复制代码按钮
     const copyBtn = `<span class="copy-code-btn" data-clipboard-action="copy" data-clipboard-target="#copy-target-${codeIndex}">复制</span>
 <textarea style="position: absolute;top: -9999px;left: -9999px;z-index: -9999;" id="copy-target-${codeIndex}">${str.replace(
@@ -171,7 +135,7 @@ const md = require("markdown-it")({
     if (lang && hl.getLanguage(lang)) {
       const langHtml = `<span class="lang-name">${lang}</span>`;
       // 处理代码高亮
-      const preCode = hl.highlight(lang, str, true).value;
+      const preCode = hl.highlight(str, { language: lang }).value;
       // 将代码包裹在 pre 中
       return `<pre class="code-container"><code class="language-${lang} hljs">${preCode}</code>${copyBtn} ${langHtml}</pre>`;
     }
@@ -180,10 +144,10 @@ const md = require("markdown-it")({
     const preCode = md.utils.escapeHtml(str);
     // 将代码包裹在 pre 中
     return `<pre class="code-container"><code class="language-${lang} hljs">${preCode}</code>${copyBtn}</pre>`;
-  }
+  },
 });
 md.use(mathjaxPlugin);
-
+md.use(emoji);
 const emits = defineEmits(["regen"]);
 
 if (!props.data.icon) {
@@ -205,6 +169,9 @@ const reGenerate = (prompt) => {
 <style lang="stylus">
 @import '@/assets/css/markdown/vue.css';
 .chat-page,.chat-export {
+  --font-family: Menlo,"微软雅黑","Roboto Mono","Courier New",Courier,monospace,"Inter",sans-serif;
+  font-family: var(--font-family);
+
   .chat-line-reply-list {
     justify-content: center;
     background-color: var(--chat-list-bg);
@@ -255,12 +222,13 @@ const reGenerate = (prompt) => {
             line-height 1.5
 
             code {
-              // color:var(--theme-text-color-primary);
-              color:#fff
+              color:var(--theme-text-color-primary);
+              font-weight 600
+              // color:#fff
               // background-color var(--el-color-primary-light-3)
-              background-color: var(--el-color-primary);
-              padding 3px 5px;
-              border-radius 5px;
+              // background-color: var(--el-color-primary);
+              // padding 3px 5px;
+              // border-radius 5px;
             }
           }
 
@@ -432,12 +400,12 @@ const reGenerate = (prompt) => {
               line-height 1.5
 
               code {
-                color:#fff;
-                background-color var( --el-color-primary)
-                padding 0 3px;
-                border-radius 5px;
-                font-size: 16px;
-                padding: 5px 7px;
+                color:var(--code-text-color);
+                font-weight bold
+                font-family: var(--font-family);
+                background-color: var(--code-bg-color);
+                border-radius: 4px;
+                padding: .2rem .4rem;
               }
             }