refactor: remove DOMPurify dependency and replace MessageBlockThink v-html with vue-markdown-renderer
#931
Conversation
…v-html` with vue-markdown-renderer
WalkthroughUpdates build config to bundle dompurify in the main process, adjusts devDependencies (remove dompurify; bump vue-renderer-markdown and vue-use-monaco), replaces markdown rendering in MessageBlockThink.vue with NodeRenderer, and cleans up commented DOMPurify code in HTMLArtifact.vue. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor U as User
participant MBT as MessageBlockThink.vue
participant NR as NodeRenderer (vue-renderer-markdown)
participant DOM as DOM
U->>MBT: View message (think block)
MBT->>NR: Pass content, renderCodeBlocksAsPre=true
NR-->>MBT: Rendered VNodes
MBT->>DOM: Mount rendered nodes
note over NR,DOM: New flow replaces prior HTML string via v-html with component-driven render
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Possibly related PRs
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
src/renderer/src/components/message/MessageBlockThink.vue (1)
43-47: Lazy‑load NodeRenderer to reduce initial renderer bundle sizeNodeRenderer can be sizable; load it on demand to improve first‑paint. Apply:
-import { computed, onMounted, ref, watch } from 'vue' +import { computed, onMounted, ref, watch, defineAsyncComponent } from 'vue' @@ -import NodeRenderer from 'vue-renderer-markdown' +const NodeRenderer = defineAsyncComponent( + () => import('vue-renderer-markdown').then(m => m.default) +)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
electron.vite.config.ts(1 hunks)package.json(1 hunks)src/renderer/src/components/artifacts/HTMLArtifact.vue(0 hunks)src/renderer/src/components/message/MessageBlockThink.vue(2 hunks)
💤 Files with no reviewable changes (1)
- src/renderer/src/components/artifacts/HTMLArtifact.vue
🧰 Additional context used
📓 Path-based instructions (17)
**/*.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/development-setup.mdc)
**/*.{js,jsx,ts,tsx}: 使用 OxLint 进行代码检查
Log和注释使用英文书写
**/*.{js,jsx,ts,tsx}: Use OxLint for JS/TS code; pre-commit hooks run lint-staged and typecheck
Use camelCase for variables and functions
Use PascalCase for types and classes
Use SCREAMING_SNAKE_CASE for constants
Files:
electron.vite.config.ts
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/error-logging.mdc)
**/*.{ts,tsx}: 始终使用 try-catch 处理可能的错误
提供有意义的错误信息
记录详细的错误日志
优雅降级处理
日志应包含时间戳、日志级别、错误代码、错误描述、堆栈跟踪（如适用）、相关上下文信息
日志级别应包括 ERROR、WARN、INFO、DEBUG
不要吞掉错误
提供用户友好的错误信息
实现错误重试机制
避免记录敏感信息
使用结构化日志
设置适当的日志级别
Files:
electron.vite.config.ts
**/*.{ts,tsx,js,vue}
📄 CodeRabbit inference engine (CLAUDE.md)
Use English for all logs and comments
Files:
electron.vite.config.tssrc/renderer/src/components/message/MessageBlockThink.vue
**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (CLAUDE.md)
Enable and adhere to strict TypeScript typing (avoid implicit any, prefer precise types)
Files:
electron.vite.config.tssrc/renderer/src/components/message/MessageBlockThink.vue
**/*.{js,jsx,ts,tsx,vue}
📄 CodeRabbit inference engine (AGENTS.md)
Apply Prettier formatting: single quotes, no semicolons, max width 100
Files:
electron.vite.config.tssrc/renderer/src/components/message/MessageBlockThink.vue
src/renderer/src/**/*
📄 CodeRabbit inference engine (.cursor/rules/i18n.mdc)
src/renderer/src/**/*: All user-facing strings must use i18n keys (avoid hardcoded user-visible text in code)
Use the 'vue-i18n' framework for all internationalization in the renderer
Ensure all user-visible text in the renderer uses the translation system
Files:
src/renderer/src/components/message/MessageBlockThink.vue
src/renderer/**/*.{vue,ts,js,tsx,jsx}
📄 CodeRabbit inference engine (.cursor/rules/project-structure.mdc)
渲染进程代码放在
src/renderer
Files:
src/renderer/src/components/message/MessageBlockThink.vue
src/renderer/src/**/*.{vue,ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.cursor/rules/vue-best-practices.mdc)
src/renderer/src/**/*.{vue,ts,tsx,js,jsx}: Use the Composition API for better code organization and reusability
Implement proper state management with Pinia
Utilize Vue Router for navigation and route management
Leverage Vue's built-in reactivity system for efficient data handling
Files:
src/renderer/src/components/message/MessageBlockThink.vue
src/renderer/src/**/*.vue
📄 CodeRabbit inference engine (.cursor/rules/vue-best-practices.mdc)
Use scoped styles to prevent CSS conflicts between components
Files:
src/renderer/src/components/message/MessageBlockThink.vue
src/renderer/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (.cursor/rules/vue-shadcn.mdc)
src/renderer/**/*.{ts,tsx,vue}: Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError).
Use TypeScript for all code; prefer types over interfaces.
Avoid enums; use const objects instead.
Use arrow functions for methods and computed properties.
Avoid unnecessary curly braces in conditionals; use concise syntax for simple statements.
Files:
src/renderer/src/components/message/MessageBlockThink.vue
src/renderer/**/*.{vue,ts}
📄 CodeRabbit inference engine (.cursor/rules/vue-shadcn.mdc)
Implement lazy loading for routes and components.
Files:
src/renderer/src/components/message/MessageBlockThink.vue
src/renderer/**/*.{ts,vue}
📄 CodeRabbit inference engine (.cursor/rules/vue-shadcn.mdc)
src/renderer/**/*.{ts,vue}: Use useFetch and useAsyncData for data fetching.
Implement SEO best practices using Nuxt's useHead and useSeoMeta.Use Pinia for frontend state management (do not introduce alternative state libraries)
Files:
src/renderer/src/components/message/MessageBlockThink.vue
src/renderer/{src,shell,floating}/**/*.vue
📄 CodeRabbit inference engine (CLAUDE.md)
src/renderer/{src,shell,floating}/**/*.vue: Use Vue 3 Composition API for all components
All user-facing strings must use i18n keys via vue-i18n (no hard-coded UI strings)
Use Tailwind CSS utilities and ensure styles are scoped in Vue components
Files:
src/renderer/src/components/message/MessageBlockThink.vue
src/renderer/src/components/**/*
📄 CodeRabbit inference engine (CLAUDE.md)
Organize UI components by feature within src/renderer/src/
Files:
src/renderer/src/components/message/MessageBlockThink.vue
src/renderer/src/**
📄 CodeRabbit inference engine (AGENTS.md)
Put application code for the Vue app under src/renderer/src (components, stores, views, i18n, lib)
Files:
src/renderer/src/components/message/MessageBlockThink.vue
src/renderer/src/**/*.{vue,ts}
📄 CodeRabbit inference engine (AGENTS.md)
All user-facing strings in the renderer must use vue-i18n keys defined in src/renderer/src/i18n
Files:
src/renderer/src/components/message/MessageBlockThink.vue
src/renderer/**/*.vue
📄 CodeRabbit inference engine (AGENTS.md)
Name Vue components in PascalCase (e.g., ChatInput.vue)
Files:
src/renderer/src/components/message/MessageBlockThink.vue
🧠 Learnings (10)
📚 Learning: 2025-07-23T00:45:57.322Z
Learnt from: CR
PR: ThinkInAIXYZ/deepchat#0
File: .cursor/rules/vue-shadcn.mdc:0-0
Timestamp: 2025-07-23T00:45:57.322Z
Learning: Applies to src/renderer/**/*.{vue} : Use Shadcn Vue, Radix Vue, and Tailwind for components and styling.
Applied to files:
package.json
📚 Learning: 2025-09-16T07:06:30.939Z
Learnt from: CR
PR: ThinkInAIXYZ/deepchat#0
File: AGENTS.md:0-0
Timestamp: 2025-09-16T07:06:30.939Z
Learning: Applies to test/{main,renderer}/**/*.{test,spec}.ts : Write tests with Vitest (jsdom) and Vue Test Utils
Applied to files:
package.json
📚 Learning: 2025-07-21T01:46:30.354Z
Learnt from: CR
PR: ThinkInAIXYZ/deepchat#0
File: .cursor/rules/i18n.mdc:0-0
Timestamp: 2025-07-21T01:46:30.354Z
Learning: Applies to src/renderer/src/**/* : Use the 'vue-i18n' framework for all internationalization in the renderer
Applied to files:
package.json
📚 Learning: 2025-07-23T00:45:57.322Z
Learnt from: CR
PR: ThinkInAIXYZ/deepchat#0
File: .cursor/rules/vue-shadcn.mdc:0-0
Timestamp: 2025-07-23T00:45:57.322Z
Learning: Applies to src/renderer/{composables,utils}/**/*.ts : Use VueUse for common composables and utility functions.
Applied to files:
package.json
📚 Learning: 2025-07-23T00:45:57.322Z
Learnt from: CR
PR: ThinkInAIXYZ/deepchat#0
File: .cursor/rules/vue-shadcn.mdc:0-0
Timestamp: 2025-07-23T00:45:57.322Z
Learning: Applies to src/renderer/**/*.{vue} : Use Vue 3 with TypeScript, leveraging defineComponent and PropType.
Applied to files:
package.json
📚 Learning: 2025-07-23T00:45:57.322Z
Learnt from: CR
PR: ThinkInAIXYZ/deepchat#0
File: .cursor/rules/vue-shadcn.mdc:0-0
Timestamp: 2025-07-23T00:45:57.322Z
Learning: Applies to src/renderer/**/*.{vue} : Use template syntax for declarative rendering.
Applied to files:
src/renderer/src/components/message/MessageBlockThink.vue
📚 Learning: 2025-08-28T08:07:05.182Z
Learnt from: neoragex2002
PR: ThinkInAIXYZ/deepchat#807
File: src/renderer/src/components/markdown/MarkdownRenderer.vue:58-58
Timestamp: 2025-08-28T08:07:05.182Z
Learning: In src/renderer/src/components/markdown/MarkdownRenderer.vue, the unscoped <style> tag is intentionally used for global prose styles and the anchor .markdown-renderer fix, as confirmed by user neoragex2002.
Applied to files:
src/renderer/src/components/message/MessageBlockThink.vue
📚 Learning: 2025-07-23T00:45:57.322Z
Learnt from: CR
PR: ThinkInAIXYZ/deepchat#0
File: .cursor/rules/vue-shadcn.mdc:0-0
Timestamp: 2025-07-23T00:45:57.322Z
Learning: Applies to src/renderer/**/*.{vue} : Use Iconify/Vue for icon implementation.
Applied to files:
src/renderer/src/components/message/MessageBlockThink.vue
📚 Learning: 2025-07-23T00:45:57.322Z
Learnt from: CR
PR: ThinkInAIXYZ/deepchat#0
File: .cursor/rules/vue-shadcn.mdc:0-0
Timestamp: 2025-07-23T00:45:57.322Z
Learning: Applies to src/renderer/**/*.{vue} : Import Icon component from Iconify/Vue.
Applied to files:
src/renderer/src/components/message/MessageBlockThink.vue
📚 Learning: 2025-07-23T00:45:57.322Z
Learnt from: CR
PR: ThinkInAIXYZ/deepchat#0
File: .cursor/rules/vue-shadcn.mdc:0-0
Timestamp: 2025-07-23T00:45:57.322Z
Learning: Applies to src/renderer/**/*.{vue} : Use the Icon component with lucide icons.
Applied to files:
src/renderer/src/components/message/MessageBlockThink.vue
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: build-check (x64)
🔇 Additional comments (2)
electron.vite.config.ts (1)
15-16: Removing 'dompurify' from exclude looks correct—ensure no imports remainGiven DOMPurify removal, dropping it from the exclude list is consistent. Please sanity‑check there are no remaining imports to avoid build errors.
You can reuse the verification script in the package.json comment; it searches for any lingering DOMPurify references.
src/renderer/src/components/message/MessageBlockThink.vue (1)
21-29: Great move: replaced v-html with NodeRenderer; confirm XSS/HTML sanitization defaultsThis removes direct HTML injection. Please verify NodeRenderer either sanitizes or disables raw HTML. If the lib offers a flag to disallow/escape raw HTML, enable it. Also, you can drop the now‑stale eslint disable for vue/no-v-html (Line 1).
| "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", |
There was a problem hiding this comment.
🧩 Analysis chain
Bumped renderer markdown + monaco deps: verify compatibility and residual DOMPurify usage
The version bump aligns with the switch to NodeRenderer. Please confirm the new version exposes a default export compatible with your import pattern and that no residual DOMPurify/v-html usage remains.
Run this script to verify:
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "Check for lingering DOMPurify usage:"
rg -n -C2 -P "(?i)dompurify|sanitizeHtml" -g '!**/dist/**'
echo
echo "Check for lingering v-html in renderer:"
rg -n -C1 -g 'src/renderer/**' -P '\bv-html\b' --type-add 'vue:*.vue'
echo
echo "Check for legacy helpers now replaced by NodeRenderer:"
rg -n -C2 -P '\b(renderMarkdown|getCommonMarkdown)\b'
echo
echo "Confirm NodeRenderer import/usage:"
rg -n -C2 -P "from 'vue-renderer-markdown'|import\\(['\"]vue-renderer-markdown['\"]\\)"Length of output: 185
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "Repo root listing (top-level):"
ls -la || true
echo
echo "Show package.json (first 300 lines) to confirm dependency lines:"
sed -n '1,300p' package.json || true
echo
echo "Search for DOMPurify or sanitizeHtml (case-insensitive). Include hidden/ignored files, but exclude node_modules/dist/build:"
rg -n -C2 -P "(?i)dompurify|sanitizeHtml" -uu --hidden -g '!**/node_modules/**' -g '!**/dist/**' -g '!**/build/**' || true
echo
echo "Search for v-html across the repo (include hidden/ignored files):"
rg -n -C1 '\bv-html\b' -uu --hidden -g '!**/node_modules/**' -g '!**/dist/**' -g '!**/build/**' || true
echo
echo "Search for legacy helpers now replaced by NodeRenderer (renderMarkdown|getCommonMarkdown):"
rg -n -C2 -P '\b(renderMarkdown|getCommonMarkdown)\b' -uu --hidden -g '!**/node_modules/**' -g '!**/dist/**' -g '!**/build/**' || true
echo
echo "Search for imports/usage of vue-renderer-markdown and vue-use-monaco:"
rg -n -C2 -P "vue-renderer-markdown|vue-use-monaco" -uu --hidden -g '!**/node_modules/**' -g '!**/dist/**' -g '!**/build/**' || trueLength of output: 12353
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "rg version and cwd:"
rg --version || true
pwd
echo
echo "Show package.json lines for related deps:"
rg -n --line-number '"vue-renderer-markdown"|"vue-use-monaco"' package.json || true
sed -n '1,320p' package.json | sed -n '1,220p' || true
echo
echo "Search (rg) for DOMPurify / sanitizeHtml (explicit positive glob + exclude common build dirs):"
rg -n -C2 -P "(?i)dompurify|sanitizeHtml" -uu -g '**/*' -g '!.git/**' -g '!node_modules/**' -g '!dist/**' -g '!build/**' || true
echo
echo "Search (rg) for v-html usage under src (explicit positive glob):"
rg -n -C1 '\bv-html\b' -uu -g 'src/**' -g '!.git/**' -g '!node_modules/**' -g '!dist/**' -g '!build/**' || true
echo
echo "Search (rg) for legacy helpers renderMarkdown|getCommonMarkdown:"
rg -n -C2 -P '\b(renderMarkdown|getCommonMarkdown)\b' -uu -g '**/*' -g '!.git/**' -g '!node_modules/**' -g '!dist/**' -g '!build/**' || true
echo
echo "Search (rg) for imports/usages of vue-renderer-markdown / NodeRenderer / vue-use-monaco:"
rg -n -C2 -P "vue-renderer-markdown|NodeRenderer|vue-use-monaco" -uu -g '**/*' -g '!.git/**' -g '!node_modules/**' -g '!dist/**' -g '!build/**' || true
echo
echo "Fallback: grep (case-insensitive) if rg returned nothing (exclude node_modules/dist/build):"
grep -RIn --binary-files=without-match --exclude-dir=node_modules --exclude-dir=dist --exclude-dir=build -e "dompurify" -e "sanitizeHtml" -e "v-html" -e "renderMarkdown" -e "getCommonMarkdown" -e "vue-renderer-markdown" -e "vue-use-monaco" -e "NodeRenderer" . || trueLength of output: 21792
Bumped renderer markdown + monaco deps: confirm NodeRenderer default export & remove legacy helpers/v-html
Found mixed usage: NodeRenderer default imports exist, but legacy helpers and several v-html usages remain; no DOMPurify/sanitizeHtml references found.
- Confirm NodeRenderer default export is compatible with imports in: src/renderer/src/components/markdown/MarkdownRenderer.vue, src/renderer/src/components/message/MessageBlockThink.vue
- Replace/remove legacy helpers (renderMarkdown, getCommonMarkdown) used in: src/renderer/src/components/ui/UpdateDialog.vue, src/renderer/src/components/settings/AboutUsSettings.vue
- Audit and sanitize/remove v-html usages in: src/renderer/src/components/settings/AboutUsSettings.vue (disclaimerContent), src/renderer/src/components/ui/UpdateDialog.vue (releaseNotes), src/renderer/src/components/artifacts/SvgArtifact.vue (sanitizedContent), src/renderer/src/components/MessageNavigationSidebar.vue (highlightSearchQuery)
* fix: katex style (#926) * refactor: reorganize artifact processing logic and improve attribute parsing (#927) * fix(thinkingBlock): pre style (#930) * refactor: remove DOMPurify dependency and replace MessageBlockThink `v-html` with vue-markdown-renderer (#931) * refactor: remove DOMPurify dependency and replace MessageBlockThink `v-html` with vue-markdown-renderer * chore: update * feat: add Qwen3-VL and Qwen3-Max 0924 (#932) * refactor: update vue-renderer-markdown to 0.0.54-beta.6 and remove Re… (#934) * refactor: update vue-renderer-markdown to 0.0.54-beta.6 and remove ReferenceNode component * chore: format * chore: version 0.3.7 --------- Co-authored-by: Simon He <57086651+Simon-He95@users.noreply.github.com> Co-authored-by: yyhhyyyyyy <yyhhyyyyyy8@gmail.com>
Pull Request Description
Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is.
*For example: I'm always frustrated when [...] *
Describe the solution you'd like
A clear and concise description of what you want to happen.
UI/UX changes for Desktop Application
If this PR introduces UI/UX changes, please describe them in detail.
Platform Compatibility Notes
If this PR has specific platform compatibility considerations (Windows, macOS, Linux), please describe them here.
Additional context
Add any other context about the pull request here.
Pull Request Description (中文)
你的功能请求是否与某个问题有关？请描述一下。
请对问题进行清晰扼要的描述。
*例如：我增加了 [...] 的功能 *
请描述你希望的解决方案
请对你希望实现的效果进行清晰扼要的描述。
桌面应用程序的 UI/UX 更改
如果此 PR 引入了 UI/UX 更改，请详细描述它们。
平台兼容性注意事项
如果此 PR 具有特定的平台兼容性考虑因素（Windows、macOS、Linux），请在此处描述。
附加背景
在此处添加关于此 Pull Request 的任何其他背景信息。
Summary by CodeRabbit