Merge branch 'main' of github.com:maxkb-dev/maxkb

ui/package.json

@@ -26,6 +26,8 @@
     "markdown-it-sup": "^1.0.0",
     "markdown-it-task-lists": "^2.1.1",
     "markdown-it-toc-done-right": "^4.2.0",
+    "md-editor-v3": "^4.9.0",
+    "medium-zoom": "^1.1.0",
     "mitt": "^3.0.0",
     "npm": "^10.2.4",
     "nprogress": "^0.2.0",

ui/src/components/ai-chat/index.vue

@@ -61,11 +61,9 @@
                   回答中 <span class="dotting"></span>
                 </el-card>
               </div>
+
               <el-card v-else shadow="always" class="dialog-card">
-                <MarkdownRenderer
-                  :source="item.answer_text"
-                  :inner_suffix="false"
-                ></MarkdownRenderer>
+                <MdPreview ref="editorRef" editorId="preview-only" :modelValue="item.answer_text" />
               </el-card>
               <div class="flex-between mt-8" v-if="log">
                 <LogOperationButton :data="item" :applicationId="appId" />
@@ -137,6 +135,8 @@ import applicationApi from '@/api/application'
 import { ChatManagement, type chatType } from '@/api/type/application'
 import { randomId } from '@/utils/utils'
 import useStore from '@/stores'
+import { MdPreview } from 'md-editor-v3'
+
 defineOptions({ name: 'AiChat' })
 const route = useRoute()
 const {

ui/src/styles/index.scss

@@ -4,3 +4,5 @@
 @import './element-plus.scss';
 @import 'nprogress/nprogress.css';
 @import 'highlight.js/styles/default.css';
+@import 'md-editor-v3/lib/preview.css';
+@import './md-editor.scss';

ui/src/styles/md-editor.scss

@@ -0,0 +1,19 @@
+.md-editor-preview {
+  padding: 0;
+  margin: 0;
+  font-size: inherit;
+  p {
+    padding: 0 !important;
+  }
+  .md-editor-admonition {
+    margin: 0;
+    padding: 0;
+  }
+  img {
+    border: 0 !important;
+  }
+}
+
+.md-editor-preview-wrapper {
+  padding: 0;
+}

ui/src/views/log/component/ChatRecordDrawer.vue

@@ -1,11 +1,5 @@
 <template>
-  <el-drawer
-    v-model="visible"
-    size="50%"
-    append-to-body
-    @close="closeHandel"
-    class="chat-record-drawer"
-  >
+  <el-drawer v-model="visible" size="50%" @close="closeHandel" class="chat-record-drawer">
     <template #header>
       <h4>{{ application?.name }}</h4>
     </template>
@@ -49,7 +43,7 @@ const props = withDefaults(
     /**
      * 对话 记录id
      */
-    chartId?: string
+    chartId: string
     /**
      * 下一条
      */
@@ -66,7 +60,7 @@ const props = withDefaults(
   {}
 )
 
-defineEmits(['update:chartId'])
+const emit = defineEmits(['update:chartId'])
 
 const route = useRoute()
 const {
@@ -107,6 +101,12 @@ watch(
   }
 )
 
+watch(visible, (bool) => {
+  if (!bool) {
+    emit('update:chartId', '')
+  }
+})
+
 const open = () => {
   getChatRecord()
   visible.value = true