feat: upgrade vue-renderer-markdown support code_block collpase and mermaid progressive render #903
Conversation
…ermaid progressive render
WalkthroughPins and bumps devDependencies in package.json, swaps Tailwind CSS import for the library’s plain CSS in src/renderer/src/main.ts, and adds small CSS rules to remove margins on mermaid header images and to adjust code-block (pre) styling in two Vue components. Changes
Sequence Diagram(s)Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches🧪 Generate unit tests
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
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: 0
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
src/renderer/src/components/artifacts/MermaidArtifact.vue (2)
49-62: Stop using innerHTML with untrusted content (XSS risk)props.block.content and error messages are injected via innerHTML. This is exploitable. Use textContent/replaceChildren.
Apply:
- mermaidRef.value.innerHTML = props.block.content + mermaidRef.value.textContent = props.block.content @@ - } catch (error) { + } catch (error) { console.error('Failed to render mermaid diagram:', error) - if (mermaidRef.value) { - mermaidRef.value.innerHTML = `<div class="text-destructive p-4">渲染失败: ${error instanceof Error ? error.message : '未知错误'}</div>` - } + if (mermaidRef.value) { + const msg = error instanceof Error ? error.message : 'Unknown error' + const el = document.createElement('div') + el.className = 'text-destructive p-4' + el.textContent = `Render failed: ${msg}` + mermaidRef.value.replaceChildren(el) + }
58-61: Use i18n for the error message (no hardcoded Chinese), avoid leaking raw error textSwitch to vue-i18n and interpolate a sanitized message. I can draft the keys if needed.
Example (outside the diff above):
import { useI18n } from 'vue-i18n' const { t } = useI18n() // ... el.textContent = t('mermaid.renderFailed', { error: msg })
🧹 Nitpick comments (4)
src/renderer/src/components/artifacts/MermaidArtifact.vue (3)
33-38: Optional: disable startOnLoad to avoid double renderYou already call mermaid.run; startOnLoad isn’t needed and can cause redundant work.
- startOnLoad: true, + startOnLoad: false,
31-44: Comments should be in EnglishPlease translate the Chinese comments to English to match repo guidelines.
Also applies to: 65-74
95-97: Duplicate CSS — define this rule once.mermaid-block-header img margin rule is also added in MarkdownRenderer.vue. Keep it in one place (prefer the global prose block there) to avoid drift.
-.mermaid-block-header img{ - margin: 0 !important; -}src/renderer/src/components/markdown/MarkdownRenderer.vue (1)
60-67: Prose code-block and mermaid header tweaks LGTMThe transparent pre and header image margin reset look good and align with prose styling. Since the same header rule exists in MermaidArtifact.vue, keep it here (global) and remove the duplicate there.
Please eyeball light/dark code blocks to ensure theme contrast remains adequate after removing pre background.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
package.json(1 hunks)src/renderer/src/components/artifacts/MermaidArtifact.vue(1 hunks)src/renderer/src/components/markdown/MarkdownRenderer.vue(1 hunks)src/renderer/src/main.ts(1 hunks)
🧰 Additional context used
📓 Path-based instructions (18)
**/*.{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:
src/renderer/src/main.ts
src/{main,renderer}/**/*.ts
📄 CodeRabbit inference engine (.cursor/rules/electron-best-practices.mdc)
src/{main,renderer}/**/*.ts: Use context isolation for improved security
Implement proper inter-process communication (IPC) patterns
Optimize application startup time with lazy loading
Implement proper error handling and logging for debugging
Files:
src/renderer/src/main.ts
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/error-logging.mdc)
**/*.{ts,tsx}: 始终使用 try-catch 处理可能的错误
提供有意义的错误信息
记录详细的错误日志
优雅降级处理
日志应包含时间戳、日志级别、错误代码、错误描述、堆栈跟踪（如适用）、相关上下文信息
日志级别应包括 ERROR、WARN、INFO、DEBUG
不要吞掉错误
提供用户友好的错误信息
实现错误重试机制
避免记录敏感信息
使用结构化日志
设置适当的日志级别
Files:
src/renderer/src/main.ts
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/main.tssrc/renderer/src/components/artifacts/MermaidArtifact.vuesrc/renderer/src/components/markdown/MarkdownRenderer.vue
src/renderer/**/*.{vue,ts,js,tsx,jsx}
📄 CodeRabbit inference engine (.cursor/rules/project-structure.mdc)
渲染进程代码放在
src/renderer
Files:
src/renderer/src/main.tssrc/renderer/src/components/artifacts/MermaidArtifact.vuesrc/renderer/src/components/markdown/MarkdownRenderer.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/main.tssrc/renderer/src/components/artifacts/MermaidArtifact.vuesrc/renderer/src/components/markdown/MarkdownRenderer.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/main.tssrc/renderer/src/components/artifacts/MermaidArtifact.vuesrc/renderer/src/components/markdown/MarkdownRenderer.vue
src/renderer/**/*.{vue,ts}
📄 CodeRabbit inference engine (.cursor/rules/vue-shadcn.mdc)
Implement lazy loading for routes and components.
Files:
src/renderer/src/main.tssrc/renderer/src/components/artifacts/MermaidArtifact.vuesrc/renderer/src/components/markdown/MarkdownRenderer.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/main.tssrc/renderer/src/components/artifacts/MermaidArtifact.vuesrc/renderer/src/components/markdown/MarkdownRenderer.vue
**/*.{ts,tsx,js,vue}
📄 CodeRabbit inference engine (CLAUDE.md)
Use English for all logs and comments
Files:
src/renderer/src/main.tssrc/renderer/src/components/artifacts/MermaidArtifact.vuesrc/renderer/src/components/markdown/MarkdownRenderer.vue
**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (CLAUDE.md)
Enable and adhere to strict TypeScript typing (avoid implicit any, prefer precise types)
Files:
src/renderer/src/main.tssrc/renderer/src/components/artifacts/MermaidArtifact.vuesrc/renderer/src/components/markdown/MarkdownRenderer.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/main.tssrc/renderer/src/components/artifacts/MermaidArtifact.vuesrc/renderer/src/components/markdown/MarkdownRenderer.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/main.tssrc/renderer/src/components/artifacts/MermaidArtifact.vuesrc/renderer/src/components/markdown/MarkdownRenderer.vue
**/*.{js,jsx,ts,tsx,vue}
📄 CodeRabbit inference engine (AGENTS.md)
Apply Prettier formatting: single quotes, no semicolons, max width 100
Files:
src/renderer/src/main.tssrc/renderer/src/components/artifacts/MermaidArtifact.vuesrc/renderer/src/components/markdown/MarkdownRenderer.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/artifacts/MermaidArtifact.vuesrc/renderer/src/components/markdown/MarkdownRenderer.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/artifacts/MermaidArtifact.vuesrc/renderer/src/components/markdown/MarkdownRenderer.vue
src/renderer/src/components/**/*
📄 CodeRabbit inference engine (CLAUDE.md)
Organize UI components by feature within src/renderer/src/
Files:
src/renderer/src/components/artifacts/MermaidArtifact.vuesrc/renderer/src/components/markdown/MarkdownRenderer.vue
src/renderer/**/*.vue
📄 CodeRabbit inference engine (AGENTS.md)
Name Vue components in PascalCase (e.g., ChatInput.vue)
Files:
src/renderer/src/components/artifacts/MermaidArtifact.vuesrc/renderer/src/components/markdown/MarkdownRenderer.vue
🧠 Learnings (19)
📚 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:
src/renderer/src/main.tspackage.json
📚 Learning: 2025-07-21T01:47:11.608Z
Learnt from: CR
PR: ThinkInAIXYZ/deepchat#0
File: .cursor/rules/project-structure.mdc:0-0
Timestamp: 2025-07-21T01:47:11.608Z
Learning: Applies to src/renderer/**/*.{vue,ts,js,tsx,jsx} : 渲染进程代码放在 `src/renderer`
Applied to files:
src/renderer/src/main.ts
📚 Learning: 2025-09-06T03:07:23.817Z
Learnt from: CR
PR: ThinkInAIXYZ/deepchat#0
File: CLAUDE.md:0-0
Timestamp: 2025-09-06T03:07:23.817Z
Learning: Applies to src/renderer/{src,shell,floating}/**/*.vue : Use Tailwind CSS utilities and ensure styles are scoped in Vue components
Applied to files:
src/renderer/src/main.ts
📚 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/main.tssrc/renderer/src/components/markdown/MarkdownRenderer.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 Vue 3 with TypeScript, leveraging defineComponent and PropType.
Applied to files:
src/renderer/src/main.tspackage.json
📚 Learning: 2025-07-21T01:47:28.817Z
Learnt from: CR
PR: ThinkInAIXYZ/deepchat#0
File: .cursor/rules/vue-best-practices.mdc:0-0
Timestamp: 2025-07-21T01:47:28.817Z
Learning: Applies to src/renderer/src/**/*.{vue,ts,tsx,js,jsx} : Use the Composition API for better code organization and reusability
Applied to files:
src/renderer/src/main.ts
📚 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:
src/renderer/src/main.tspackage.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/main.ts
📚 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} : Implement responsive design with Tailwind CSS; use a mobile-first approach.
Applied to files:
src/renderer/src/main.ts
📚 Learning: 2025-09-16T07:06:30.926Z
Learnt from: CR
PR: ThinkInAIXYZ/deepchat#0
File: AGENTS.md:0-0
Timestamp: 2025-09-16T07:06:30.926Z
Learning: Applies to src/renderer/src/**/*.{vue,ts} : All user-facing strings in the renderer must use vue-i18n keys defined in src/renderer/src/i18n
Applied to files:
src/renderer/src/main.ts
📚 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} : For cases where lucide icons don't meet requirements, use other Iconify collections as fallback.
Applied to files:
src/renderer/src/main.ts
📚 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/main.ts
📚 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/main.ts
📚 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} : Prefer "lucide:" icon family as the primary choice.
Applied to files:
src/renderer/src/main.ts
📚 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/main.ts
📚 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} : Follow naming pattern: {collection}:{icon-name} for icons.
Applied to files:
src/renderer/src/main.ts
📚 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:
src/renderer/src/main.tspackage.json
📚 Learning: 2025-09-06T03:07:23.817Z
Learnt from: CR
PR: ThinkInAIXYZ/deepchat#0
File: CLAUDE.md:0-0
Timestamp: 2025-09-06T03:07:23.817Z
Learning: Applies to src/renderer/{src,shell,floating}/**/*.vue : All user-facing strings must use i18n keys via vue-i18n (no hard-coded UI strings)
Applied to files:
src/renderer/src/main.ts
📚 Learning: 2025-09-16T07:06:30.926Z
Learnt from: CR
PR: ThinkInAIXYZ/deepchat#0
File: AGENTS.md:0-0
Timestamp: 2025-09-16T07:06:30.926Z
Learning: Applies to test/{main,renderer}/**/*.{test,spec}.ts : Write tests with Vitest (jsdom) and Vue Test Utils
Applied to files:
package.json
🔇 Additional comments (3)
package.json (2)
163-163: vue-use-monaco bump — compatibility checkBump to ^0.0.20 seems fine; please verify compatibility with monaco-editor ^0.52.x and vite-plugin-monaco-editor-esm ^2.x in your dev workflow.
160-160: CSS import updated — verify peer depssrc/renderer/src/main.ts:1 imports 'vue-renderer-markdown/index.css'; no matches for 'vue-renderer-markdown/index.tailwind.css'; package.json pins "vue-renderer-markdown" to "0.0.51".
Confirm the CSS switch is intentional and verify whether v0.0.51 introduces peerDependency changes (inspect the package's peerDependencies, your lockfile, or the upstream changelog).
src/renderer/src/main.ts (1)
1-1: CSS import switch LGTM; confirm cascade orderImporting vue-renderer-markdown/index.css is correct for the upgrade. Ensure the old index.tailwind.css import was removed and verify no unintended overrides with ./assets/main.css (Tailwind) in light/dark modes.
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
Style
Chores