From 1ecce3bc84becd1f720e3faae06b3ad4273f1037 Mon Sep 17 00:00:00 2001
From: shaohuzhang1 <shaohu.zhang@fit2cloud.com>
Date: Tue, 26 Dec 2023 12:04:24 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AF=B9=E8=AF=9D,=E5=9B=BE=E7=89=8740?=
 =?UTF-8?q?4=20=E9=97=AA=E5=B1=8F=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/components/ai-chat/index.vue           |  4 +-
 .../markdown-renderer/MdRenderer.vue          | 38 +++++++++++++++++++
 2 files changed, 40 insertions(+), 2 deletions(-)
 create mode 100644 ui/src/components/markdown-renderer/MdRenderer.vue

diff --git a/ui/src/components/ai-chat/index.vue b/ui/src/components/ai-chat/index.vue
index 7eeaca059..71d76fa1c 100644
--- a/ui/src/components/ai-chat/index.vue
+++ b/ui/src/components/ai-chat/index.vue
@@ -63,7 +63,7 @@
               </div>
 
               <el-card v-else shadow="always" class="dialog-card">
-                <MdPreview ref="editorRef" editorId="preview-only" :modelValue="item.answer_text" />
+                <MdRenderer :source="item.answer_text"></MdRenderer>
               </el-card>
               <div class="flex-between mt-8" v-if="log">
                 <LogOperationButton :data="item" :applicationId="appId" />
@@ -136,7 +136,7 @@ import { ChatManagement, type chatType } from '@/api/type/application'
 import { randomId } from '@/utils/utils'
 import useStore from '@/stores'
 import { MdPreview } from 'md-editor-v3'
-
+import MdRenderer from '@/components/markdown-renderer/MdRenderer.vue'
 defineOptions({ name: 'AiChat' })
 const route = useRoute()
 const {
diff --git a/ui/src/components/markdown-renderer/MdRenderer.vue b/ui/src/components/markdown-renderer/MdRenderer.vue
new file mode 100644
index 000000000..bc15c6da4
--- /dev/null
+++ b/ui/src/components/markdown-renderer/MdRenderer.vue
@@ -0,0 +1,38 @@
+<template>
+  <MdPreview
+    ref="editorRef"
+    editorId="preview-only"
+    :modelValue="item"
+    v-for="item in md_view_list"
+  />
+</template>
+<script setup lang="ts">
+import { computed } from 'vue'
+import { MdPreview } from 'md-editor-v3'
+
+const props = withDefaults(defineProps<{ source?: string; inner_suffix?: boolean }>(), {
+  source: ''
+})
+
+const md_view_list = computed(() => {
+  const temp_source = props.source
+  const temp_md_img_list = temp_source.match(/(!\[.*?\]\(img\/.*?\){.*?})|(!\[.*?\]\(img\/.*?\))/g)
+  const md_img_list = temp_md_img_list ? temp_md_img_list.filter((i) => i) : []
+  const split_img_value = temp_source
+    .split(/(!\[.*?\]\(img\/.*?\){.*?})|(!\[.*?\]\(img\/.*?\))/g)
+    .filter((item) => item !== undefined)
+    .filter((item) => !md_img_list?.includes(item))
+  const result = Array.from(
+    { length: md_img_list.length + split_img_value.length },
+    (v, i) => i
+  ).map((index) => {
+    if (index % 2 == 0) {
+      return split_img_value[Math.floor(index / 2)]
+    } else {
+      return md_img_list[Math.floor(index / 2)]
+    }
+  })
+  return result
+})
+</script>
+<style lang="scss" scoped></style>