From f8f75869e2e07bae65922214097f29bbbe7f3d3a Mon Sep 17 00:00:00 2001
From: Simon He <674949287@qq.com>
Date: Wed, 24 Sep 2025 15:09:02 +0800
Subject: [PATCH 1/2] refactor: remove DOMPurify dependency and replace
 MessageBlockThink `v-html` with vue-markdown-renderer

---
 electron.vite.config.ts                       |  2 +-
 package.json                                  |  5 ++---
 .../src/components/artifacts/HTMLArtifact.vue | 12 -----------
 .../components/message/MessageBlockThink.vue  | 20 +++++++++++++------
 4 files changed, 17 insertions(+), 22 deletions(-)

diff --git a/electron.vite.config.ts b/electron.vite.config.ts
index 054170654..b22e7267e 100644
--- a/electron.vite.config.ts
+++ b/electron.vite.config.ts
@@ -12,7 +12,7 @@ export default defineConfig({
   main: {
     plugins: [
       externalizeDepsPlugin({
-        exclude: ['mermaid', 'dompurify']
+        exclude: ['mermaid']
       }),
     ],
     resolve: {
diff --git a/package.json b/package.json
index 508c3d3ae..1d5640ab3 100644
--- a/package.json
+++ b/package.json
@@ -129,7 +129,6 @@
     "autoprefixer": "^10.4.21",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "dompurify": "^3.2.6",
     "electron": "^37.3.0",
     "electron-builder": "26.0.12",
     "electron-vite": "^4.0.0",
@@ -158,10 +157,10 @@
     "vitest": "^3.2.4",
     "vue": "^3.5.21",
     "vue-i18n": "^11.1.11",
-    "vue-renderer-markdown": "0.0.54-beta.3",
+    "vue-renderer-markdown": "0.0.54-beta.4",
     "vue-router": "4",
     "vue-tsc": "^2.2.12",
-    "vue-use-monaco": "^0.0.29",
+    "vue-use-monaco": "^0.0.31",
     "vue-virtual-scroller": "^2.0.0-beta.8",
     "vuedraggable": "^4.1.0",
     "yaml": "^2.8.1",
diff --git a/src/renderer/src/components/artifacts/HTMLArtifact.vue b/src/renderer/src/components/artifacts/HTMLArtifact.vue
index 6e9185867..ec26081db 100644
--- a/src/renderer/src/components/artifacts/HTMLArtifact.vue
+++ b/src/renderer/src/components/artifacts/HTMLArtifact.vue
@@ -186,7 +186,6 @@
 
 <script setup lang="ts">
 import { ref, onMounted, computed, watch, onUnmounted } from 'vue'
-// import DOMPurify from 'dompurify'
 
 const props = defineProps<{
   block: {
@@ -527,17 +526,6 @@ const handleCornerDragMove = (e: MouseEvent) => {
   })
 }
 
-// const sanitizedContent = computed(() => {
-//   if (!props.block.content) return ''
-//   return DOMPurify.sanitize(props.block.content, {
-//     WHOLE_DOCUMENT: true,
-//     ADD_TAGS: ['script', 'style'],
-//     ADD_ATTR: ['src', 'style', 'onclick'],
-//     ALLOWED_URI_REGEXP:
-//       /^(?:(?:(?:f|ht)tps?|mailto|tel|callto|cid|xmpp|xxx):|[^a-z]|[a-z+.]+(?:[^a-z+.:]|$))/i
-//   })
-// })
-
 const setupIframe = () => {
   if (props.isPreview && iframeRef.value) {
     const iframe = iframeRef.value
diff --git a/src/renderer/src/components/message/MessageBlockThink.vue b/src/renderer/src/components/message/MessageBlockThink.vue
index f7b5030f2..023a04ee3 100644
--- a/src/renderer/src/components/message/MessageBlockThink.vue
+++ b/src/renderer/src/components/message/MessageBlockThink.vue
@@ -18,11 +18,15 @@
         }}</span>
       </span>
     </div>
-    <div v-show="!collapse" ref="messageBlock" class="w-full relative">
-      <div
-        class="prose prose-sm dark:prose-invert w-full max-w-full leading-7 break-all"
-        v-html="renderedContent"
-      ></div>
+    <div
+      v-show="!collapse"
+      ref="messageBlock"
+      class="w-full relative prose prose-sm dark:prose-invert max-w-full leading-7 break-all"
+    >
+      <NodeRenderer
+        :renderCodeBlocksAsPre="true"
+        :content="props.block.content || ''"
+      ></NodeRenderer>
     </div>
 
     <Icon
@@ -39,7 +43,7 @@ import { Icon } from '@iconify/vue'
 import { Button } from '@/components/ui/button'
 import { computed, onMounted, ref, watch } from 'vue'
 import { usePresenter } from '@/composables/usePresenter'
-import { renderMarkdown, getCommonMarkdown } from 'vue-renderer-markdown'
+import NodeRenderer, { renderMarkdown, getCommonMarkdown } from 'vue-renderer-markdown'
 import { AssistantMessageBlock } from '@shared/chat'
 const props = defineProps<{
   block: AssistantMessageBlock
@@ -70,6 +74,10 @@ const md = getCommonMarkdown()
 const renderedContent = computed(() => {
   return renderMarkdown(md, props.block.content || '')
 })
+console.log('renderedContent', renderedContent.value)
+console.log({
+  content: props.block.content
+})
 
 watch(
   () => collapse.value,

From 491217256f18fd63e8fc5090535b7c11f8e9e8ee Mon Sep 17 00:00:00 2001
From: Simon He <674949287@qq.com>
Date: Wed, 24 Sep 2025 15:10:14 +0800
Subject: [PATCH 2/2] chore: update

---
 .../components/message/MessageBlockThink.vue    | 17 ++++-------------
 1 file changed, 4 insertions(+), 13 deletions(-)

diff --git a/src/renderer/src/components/message/MessageBlockThink.vue b/src/renderer/src/components/message/MessageBlockThink.vue
index 023a04ee3..78e9e7830 100644
--- a/src/renderer/src/components/message/MessageBlockThink.vue
+++ b/src/renderer/src/components/message/MessageBlockThink.vue
@@ -38,13 +38,13 @@
 </template>
 
 <script setup lang="ts">
-import { useI18n } from 'vue-i18n'
-import { Icon } from '@iconify/vue'
 import { Button } from '@/components/ui/button'
-import { computed, onMounted, ref, watch } from 'vue'
 import { usePresenter } from '@/composables/usePresenter'
-import NodeRenderer, { renderMarkdown, getCommonMarkdown } from 'vue-renderer-markdown'
+import { Icon } from '@iconify/vue'
 import { AssistantMessageBlock } from '@shared/chat'
+import { computed, onMounted, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import NodeRenderer from 'vue-renderer-markdown'
 const props = defineProps<{
   block: AssistantMessageBlock
   usage: {
@@ -70,15 +70,6 @@ const reasoningDuration = computed(() => {
   return parseFloat(duration.toFixed(2))
 })
 
-const md = getCommonMarkdown()
-const renderedContent = computed(() => {
-  return renderMarkdown(md, props.block.content || '')
-})
-console.log('renderedContent', renderedContent.value)
-console.log({
-  content: props.block.content
-})
-
 watch(
   () => collapse.value,
   () => {