VS Code插件新增 Mermaid 图表渲染支持#21
Open
huangdengdui wants to merge 1 commit intoOrionStarAI:opensourcefrom
Open
Conversation
- 新增 MermaidBlock 组件，支持流式感知的异步渲染 - 流式阶段防抖 300ms，代码块闭合后立即渲染 - 渲染失败时回退到上次成功的 SVG，避免图表消失 - 通过 MutationObserver 监听 VSCode 主题切换并重新渲染 - 将 markdownComponents 重构为 MarkdownRenderer（React.memo + useMemo） 稳定流式输出期间的组件引用，避免每次 token 更新导致 MermaidBlock 卸载重建和 SVG 闪烁 - 修复自动滚动逻辑，通过 ResizeObserver 捕获异步内容高度变化， 并用 scrollHeight 守卫排除内容缩小导致的误判 - webview 新增 mermaid@11.13.0 依赖 - 新增 .mermaid-block 和 .mermaid-error-badge 样式 Signed-off-by: huangdengdui <huangdengdui@cmcm.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary / 摘要
Add Mermaid diagram rendering with streaming-aware async rendering.
Refactor markdownComponents into MarkdownRenderer to prevent SVG flickering during streaming.
Fix auto-scroll to handle async content height changes and content-shrink false positives.
Changes / 变更说明
packages/vscode-ui-plugin/webview/src/components/MessageBubble.tsxpackages/vscode-ui-plugin/webview/src/components/ChatInterface.tsxpackages/vscode-ui-plugin/webview/src/components/MessageMarkdown.csspackages/vscode-ui-plugin/webview/package.json、packages/vscode-ui-plugin/webview/package-lock.jsonTesting / 测试
已完成人工测试，包括流式输出渲染、语法错误展示、主题切换重渲染、自动滚动场景。