feat: update dependencies and improve content rendering in MessageBlockThink and ThinkContent components#957
Conversation
…ckThink and ThinkContent components
WalkthroughReplaces HTML-based think content rendering with vue-renderer-markdown’s NodeRenderer and custom components, updates prop wiring from contentHtml to content, removes KaTeX CSS import, and adjusts dependencies (move UI libs to devDependencies; bump vue-renderer-markdown). Changes
Sequence Diagram(s)sequenceDiagram
autonumber
participant User
participant MessageBlockThink
participant ThinkContent
participant NodeRenderer
participant CustomComponents
participant CodeBlock
participant Mermaid
User->>MessageBlockThink: View think message
MessageBlockThink->>ThinkContent: props { content: block.content }
ThinkContent->>NodeRenderer: render(content, customId)
NodeRenderer->>CustomComponents: resolve node types
alt code_block
CustomComponents->>CodeBlock: render with hidden controls
else mermaid
CustomComponents->>Mermaid: render via PreCodeNode
else other nodes
CustomComponents-->>NodeRenderer: default rendering
end
NodeRenderer-->>ThinkContent: VNodes
ThinkContent-->>User: Rendered think content
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
package.json(4 hunks)src/renderer/src/components/message/MessageBlockThink.vue(1 hunks)src/renderer/src/components/think-content/ThinkContent.vue(2 hunks)src/renderer/src/main.ts(0 hunks)
💤 Files with no reviewable changes (1)
- src/renderer/src/main.ts
🧰 Additional context used
📓 Path-based instructions (15)
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/think-content/ThinkContent.vuesrc/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/think-content/ThinkContent.vuesrc/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/think-content/ThinkContent.vuesrc/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/think-content/ThinkContent.vuesrc/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/think-content/ThinkContent.vuesrc/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/think-content/ThinkContent.vuesrc/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/think-content/ThinkContent.vuesrc/renderer/src/components/message/MessageBlockThink.vue
**/*.{ts,tsx,js,vue}
📄 CodeRabbit inference engine (CLAUDE.md)
Use English for all logs and comments
Files:
src/renderer/src/components/think-content/ThinkContent.vuesrc/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:
src/renderer/src/components/think-content/ThinkContent.vuesrc/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/think-content/ThinkContent.vuesrc/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/think-content/ThinkContent.vuesrc/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/think-content/ThinkContent.vuesrc/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/think-content/ThinkContent.vuesrc/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:
src/renderer/src/components/think-content/ThinkContent.vuesrc/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/think-content/ThinkContent.vuesrc/renderer/src/components/message/MessageBlockThink.vue
🧠 Learnings (1)
📓 Common learnings
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.
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.
⏰ 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 (5)
src/renderer/src/components/think-content/ThinkContent.vue (2)
29-34: LGTM! NodeRenderer integration looks correct.The switch from plain HTML rendering to
NodeRendererwith a scopedcustomIdaligns with the architecture shift away from pre-rendered HTML. The binding of:contentand:customIdis appropriate for the new rendering approach.
64-83: Verify and correct PreCodeNode usage
Theh()call referencesPreCodeNode.vue, but the imported symbol is likelyPreCodeNode. Remove the.vuesuffix in theh()invocation and confirm you’ve importedPreCodeNodefrom the correct file or package (e.g.import PreCodeNode from './PreCodeNode.vue').src/renderer/src/components/message/MessageBlockThink.vue (1)
6-6: Verify markdown input
Ensureblock.contentpassed toThinkContent.vueis raw markdown (not pre-rendered HTML), asNodeRendererexpects markdown. Confirm at the source ofAssistantMessageBlock.content.package.json (2)
111-111: Verify devDependencies move
I attempted to search non-renderer code for imports of @tanstack/vue-table, @vee-validate/zod, embla-carousel-vue, vaul-vue, and vee-validate but no files were checked; please manually confirm these packages are only required at build time in the renderer to avoid runtime errors in production.
168-168: Verify breaking changes in vue-renderer-markdown 0.0.55-beta.2
Consult the official changelog or release notes (GitHub repository or npm) for the jump from 0.0.54-beta.8 → 0.0.55-beta.2 and confirm there are no breaking changes to:
- NodeRenderer component API
- setCustomComponents function signature
- CodeBlockNode/PreCodeNode props
| code_block: (_props) => | ||
| h( | ||
| CodeBlockNode, | ||
| { | ||
| ..._props, | ||
| isShowPreview: false, | ||
| showCopyButton: false, | ||
| showExpandButton: false, | ||
| showPreviewButton: false, | ||
| showFontSizeButtons: false | ||
| }, | ||
| undefined | ||
| ), |
There was a problem hiding this comment.
🧩 Analysis chain
Verify custom component props match CodeBlockNode signature.
The custom code_block component passes several boolean props to hide UI controls:
isShowPreview: falseshowCopyButton: falseshowExpandButton: falseshowPreviewButton: falseshowFontSizeButtons: false
Ensure these props are supported by the CodeBlockNode component in the current version of vue-renderer-markdown (0.0.55-beta.2). API changes could cause silent failures or TypeScript errors.
🌐 Web query:
What are the supported props for CodeBlockNode in vue-renderer-markdown version 0.0.55-beta.2?
💡 Result:
I couldn't find release notes for 0.0.55-beta.2, but the package README/docs for the 0.0.5x beta series documents the CodeBlockNode props. The supported CodeBlockNode props shown in the docs include:
- showHeader (boolean)
- showCopyButton (boolean)
- showFontSizeButtons (boolean)
- enableFontSizeControl (boolean)
- codeBlockDarkTheme (string) / themes (theme-related props)
- codeBlockMonacoOptions (object)
- minWidth (number/string)
- maxWidth (number/string)
- header slots / ability to replace left/right header content (named slots)
- ability to toggle header on/off and show/hide built-in toolbar buttons (copy, expand, preview, font-size controls)
- codeBlockRenderer / custom code-block renderer support (receives highlight vnode + language)
These items and the header/toolbar customization API are described in the library documentation. See the docs for details and exact prop names/types. [1]
Sources
[1] vue-renderer-markdown / Code block and CodeBlockNode docs (library README/docs). (github.com)
Citations:
Remove unsupported isShowPreview prop
CodeBlockNode v0.0.55-beta.2 supports showCopyButton, showExpandButton, showPreviewButton, showFontSizeButtons (and related header/theme props) but does not define isShowPreview. Drop isShowPreview: false and rely on showPreviewButton: false to hide previews.
🤖 Prompt for AI Agents
In src/renderer/src/components/think-content/ThinkContent.vue around lines 66 to
78, the CodeBlockNode props include an unsupported isShowPreview prop which the
component does not define; remove the isShowPreview: false entry and rely on the
existing showPreviewButton: false (and other supported props) to control preview
behavior so the prop list only contains supported keys.
2 participants
Summary by CodeRabbit