Skip to content

feat: update dependencies and improve content rendering in MessageBlockThink and ThinkContent components #957

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
zerob13 merged 1 commit into from
Oct 4, 2025
Merged

feat: update dependencies and improve content rendering in MessageBlockThink and ThinkContent components #957

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 6 additions & 7 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,6 +108,7 @@
"@radix-icons/vue": "^1.0.0",
"@tailwindcss/typography": "^0.5.19",
"@tailwindcss/vite": "^4.1.13",
"@tanstack/vue-table": "^8.21.3",
"@tiptap/core": "^2.11.7",
"@tiptap/extension-code-block": "^2.11.9",
"@tiptap/extension-document": "^2.11.7",
Expand All @@ -124,6 +125,7 @@
"@types/mime-types": "^3.0.1",
"@types/node": "^22.14.1",
"@types/xlsx": "^0.0.35",
"@vee-validate/zod": "^4.15.1",
"@vitejs/plugin-vue": "^6.0.1",
"@vitest/ui": "^3.2.4",
"@vue/test-utils": "^2.4.6",
Expand All @@ -134,8 +136,8 @@
"electron": "^37.6.0",
"electron-builder": "26.0.12",
"electron-vite": "^4.0.0",
"embla-carousel-vue": "^8.6.0",
"jsdom": "^26.1.0",
"katex": "^0.16.22",
"lint-staged": "^16.1.6",
"lucide-vue-next": "^0.544.0",
"mermaid": "^11.10.1",
Expand All @@ -154,26 +156,23 @@
"tippy.js": "^6.3.7",
"tw-animate-css": "^1.4.0",
"typescript": "^5.8.3",
"vaul-vue": "^0.4.1",
"vee-validate": "^4.15.1",
"vite": "7.1.5",
"vite-plugin-monaco-editor-esm": "^2.0.2",
"vite-plugin-vue-devtools": "^8.0.1",
"vite-svg-loader": "^5.1.0",
"vitest": "^3.2.4",
"vue": "^3.5.21",
"vue-i18n": "^11.1.11",
"vue-renderer-markdown": "0.0.54-beta.8",
"vue-renderer-markdown": "0.0.55-beta.2",
"vue-router": "4",
"vue-sonner": "^2.0.8",
"vue-tsc": "^2.2.12",
"vue-use-monaco": "^0.0.33",
"vue-virtual-scroller": "^2.0.0-beta.8",
"vuedraggable": "^4.1.0",
"yaml": "^2.8.1",
"@tanstack/vue-table": "^8.21.3",
"@vee-validate/zod": "^4.15.1",
"embla-carousel-vue": "^8.6.0",
"vaul-vue": "^0.4.1",
"vee-validate": "^4.15.1",
"zod-to-json-schema": "^3.24.6"
},
"simple-git-hooks": {
Expand Down
8 changes: 1 addition & 7 deletions src/renderer/src/components/message/MessageBlockThink.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
:label="headerText"
:expanded="!collapse"
:thinking="block.status === 'loading'"
:content-html="renderedContent"
:content="block.content"
@toggle="collapse = !collapse"
/>
</template>
Expand All @@ -13,7 +13,6 @@ import { useI18n } from 'vue-i18n'
import { ThinkContent } from '@/components/think-content'
import { computed, onMounted, ref, watch } from 'vue'
import { usePresenter } from '@/composables/usePresenter'
import { renderMarkdown, getCommonMarkdown } from 'vue-renderer-markdown'
import { AssistantMessageBlock } from '@shared/chat'
const props = defineProps<{
block: AssistantMessageBlock
Expand All @@ -40,11 +39,6 @@ const reasoningDuration = computed(() => {
return parseFloat(duration.toFixed(2))
})

const md = getCommonMarkdown()
const renderedContent = computed(() => {
return renderMarkdown(md, props.block.content || '')
})

const headerText = computed(() => {
// Format: "Thought for 20s" (localized)
const seconds = Math.max(0, Math.floor(reasoningDuration.value))
Expand Down
35 changes: 33 additions & 2 deletions src/renderer/src/components/think-content/ThinkContent.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,12 @@
</div>

<div v-show="expanded" class="w-full relative">
<div class="think-prose w-full max-w-full mt-[6px]" v-html="contentHtml"></div>
<NodeRenderer
v-if="content"
class="think-prose w-full max-w-full mt-[6px]"
:content="content"
:customId="customId"
/>
</div>

<Icon
Expand All @@ -39,17 +44,43 @@

<script setup lang="ts">
import { Icon } from '@iconify/vue'
import { h } from 'vue'
import NodeRenderer, {
setCustomComponents,
CodeBlockNode,
PreCodeNode
} from 'vue-renderer-markdown'

defineProps<{
label: string
expanded: boolean
thinking: boolean
contentHtml?: string
content?: string
}>()

defineEmits<{
(e: 'toggle'): void
}>()
const customId = 'thinking-content'
setCustomComponents(customId, {
code_block: (_props) =>
h(
CodeBlockNode,
{
..._props,
isShowPreview: false,
showCopyButton: false,
showExpandButton: false,
showPreviewButton: false,
showFontSizeButtons: false
},
undefined
),
Comment on lines +66 to +78
Copy link
Contributor

@coderabbitai coderabbitai bot Oct 3, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

🧩 Analysis chain

Verify custom component props match CodeBlockNode signature.

The custom code_block component passes several boolean props to hide UI controls:

  • isShowPreview: false
  • showCopyButton: false
  • showExpandButton: false
  • showPreviewButton: false
  • showFontSizeButtons: 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.

mermaid: (_props) =>
h(PreCodeNode.vue, {
..._props
})
})
</script>

<style scoped>
Expand Down
1 change: 0 additions & 1 deletion src/renderer/src/main.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ import router from './router'
import { createI18n } from 'vue-i18n'
import locales from './i18n'
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
import 'katex/dist/katex.min.css'

const i18n = createI18n({
locale: 'zh-CN',
Expand Down