fix: artifacts code not streaming #732
Conversation
WalkthroughDependency bumped for vue-use-monaco; Electron deepcdn handler now discovers CDN base by testing multiple candidate directories; renderer refactors Monaco syncing with deep/immediate watchers and throttled language detection; MessageBlockContent centralizes artifact updates; store adds updateArtifactContent to trigger immutable/reactive updates. Changes
Sequence Diagram(s)sequenceDiagram
participant App as Electron App
participant Prot as Protocol Handler (deepcdn)
participant FS as File System
App->>Prot: deepcdn://cdn/<filePath>
Prot->>Prot: Build candidate base dirs (dev/prod)
Prot->>FS: Check candidate contains "cdn"
FS-->>Prot: Exists?/Not exists
Prot->>Prot: Select first matching or fallback
Prot->>FS: Read <base>/cdn/<filePath>
FS-->>Prot: Stream/404/Error
Prot-->>App: Response (data|404|500)
sequenceDiagram
participant Msg as MessageBlockContent
participant Store as artifactStore
participant Art as ArtifactDialog
participant Monaco as Monaco Editor
Msg->>Store: updateArtifactContent({content,title,type,status})
Note right of Store: Immutably merge into currentArtifact
Store-->>Art: currentArtifact change (deep)
Art->>Art: Derive language / detect if needed
Art->>Monaco: updateCode(content, language)
Art-->>Store: (optional) language detection updates
Estimated code review effort🎯 4 (Complex) | ⏱️ ~35 minutes Poem
✨ 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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
CodeRabbit Configuration File (
|
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (3)
src/renderer/src/components/message/MessageBlockContent.vue (2)
74-81: Good move: centralized reactive updates via store action.Replacing in-place mutations with updateArtifactContent is the right fix for streaming reactivity.
Consider including language if available from part.artifact to keep the store in sync:
artifactStore.updateArtifactContent({ content: part.content, title: part.artifact.title, type: part.artifact.type, + language: part.artifact.language, status: part.loading ? 'loading' : 'loaded' })
97-104: Consistent batching when loaded.Same suggestion here: include language for completeness if provided.
artifactStore.updateArtifactContent({ content: part.content, title: part.artifact.title, type: part.artifact.type, + language: part.artifact.language, status: 'loaded' })src/renderer/src/components/artifacts/ArtifactDialog.vue (1)
219-230: Redundant watchers triggering duplicate editor updates.You now have:
- deep watcher on currentArtifact (immediate: true) calling updateCode
- a dedicated watcher on content also calling updateCode (immediate: true)
This can double-fire on the same change. Consider consolidating to one watcher to avoid unnecessary churn.
-// Add a specific watcher for content changes to ensure real-time updates -watch( - () => artifactStore.currentArtifact?.content, - (newContent) => { - if (newContent !== undefined) { - updateCode(newContent, codeLanguage.value) - } - }, - { - immediate: true - } -) +// The deep watcher on currentArtifact already updates code; a separate content watcher is unnecessary.Also, per guidelines, ensure all logs/comments are in English (e.g., any remaining Chinese console messages elsewhere in this component).
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
package.json(1 hunks)src/main/index.ts(1 hunks)src/renderer/src/components/artifacts/ArtifactDialog.vue(3 hunks)src/renderer/src/components/message/MessageBlockContent.vue(2 hunks)src/renderer/src/stores/artifact.ts(1 hunks)
🧰 Additional context used
📓 Path-based instructions (15)
**/*.{ts,tsx,js,jsx,vue}
📄 CodeRabbit Inference Engine (CLAUDE.md)
Use English for logs and comments
Files:
src/renderer/src/stores/artifact.tssrc/main/index.tssrc/renderer/src/components/message/MessageBlockContent.vuesrc/renderer/src/components/artifacts/ArtifactDialog.vue
**/*.{ts,tsx}
📄 CodeRabbit Inference Engine (CLAUDE.md)
Strict type checking enabled for TypeScript
**/*.{ts,tsx}: 始终使用 try-catch 处理可能的错误
提供有意义的错误信息
记录详细的错误日志
优雅降级处理
日志应包含时间戳、日志级别、错误代码、错误描述、堆栈跟踪（如适用）、相关上下文信息
日志级别应包括 ERROR、WARN、INFO、DEBUG
不要吞掉错误
提供用户友好的错误信息
实现错误重试机制
避免记录敏感信息
使用结构化日志
设置适当的日志级别
Files:
src/renderer/src/stores/artifact.tssrc/main/index.ts
src/renderer/src/**/*.{ts,tsx,vue}
📄 CodeRabbit Inference Engine (CLAUDE.md)
src/renderer/src/**/*.{ts,tsx,vue}: Use Pinia for frontend state management
Renderer to Main: Use usePresenter.ts composable for direct presenter method calls
Files:
src/renderer/src/stores/artifact.tssrc/renderer/src/components/message/MessageBlockContent.vuesrc/renderer/src/components/artifacts/ArtifactDialog.vue
**/*.{js,jsx,ts,tsx}
📄 CodeRabbit Inference Engine (.cursor/rules/development-setup.mdc)
**/*.{js,jsx,ts,tsx}: 使用 OxLint 进行代码检查
Log和注释使用英文书写
Files:
src/renderer/src/stores/artifact.tssrc/main/index.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/stores/artifact.tssrc/main/index.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/stores/artifact.tssrc/renderer/src/components/message/MessageBlockContent.vuesrc/renderer/src/components/artifacts/ArtifactDialog.vue
src/renderer/src/stores/**/*.{vue,ts,tsx,js,jsx}
📄 CodeRabbit Inference Engine (.cursor/rules/pinia-best-practices.mdc)
src/renderer/src/stores/**/*.{vue,ts,tsx,js,jsx}: Use modules to organize related state and actions
Implement proper state persistence for maintaining data across sessions
Use getters for computed state properties
Utilize actions for side effects and asynchronous operations
Keep the store focused on global state, not component-specific data
Files:
src/renderer/src/stores/artifact.ts
src/renderer/**/*.{vue,ts,js,tsx,jsx}
📄 CodeRabbit Inference Engine (.cursor/rules/project-structure.mdc)
渲染进程代码放在
src/renderer
Files:
src/renderer/src/stores/artifact.tssrc/renderer/src/components/message/MessageBlockContent.vuesrc/renderer/src/components/artifacts/ArtifactDialog.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/stores/artifact.tssrc/renderer/src/components/message/MessageBlockContent.vuesrc/renderer/src/components/artifacts/ArtifactDialog.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/stores/artifact.tssrc/renderer/src/components/message/MessageBlockContent.vuesrc/renderer/src/components/artifacts/ArtifactDialog.vue
src/renderer/**/*.{vue,ts}
📄 CodeRabbit Inference Engine (.cursor/rules/vue-shadcn.mdc)
Implement lazy loading for routes and components.
Files:
src/renderer/src/stores/artifact.tssrc/renderer/src/components/message/MessageBlockContent.vuesrc/renderer/src/components/artifacts/ArtifactDialog.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.
Files:
src/renderer/src/stores/artifact.tssrc/renderer/src/components/message/MessageBlockContent.vuesrc/renderer/src/components/artifacts/ArtifactDialog.vue
src/main/**/*.ts
📄 CodeRabbit Inference Engine (CLAUDE.md)
Main to Renderer: Use EventBus to broadcast events via mainWindow.webContents.send()
Use Electron's built-in APIs for file system and native dialogs
Files:
src/main/index.ts
src/main/**/*.{ts,js,tsx,jsx}
📄 CodeRabbit Inference Engine (.cursor/rules/project-structure.mdc)
主进程代码放在
src/main
Files:
src/main/index.ts
src/renderer/src/**/*.vue
📄 CodeRabbit Inference Engine (CLAUDE.md)
src/renderer/src/**/*.vue: Use Composition API for all Vue 3 components
Use Tailwind CSS with scoped styles for styling
Organize components by feature in src/renderer/src/
Follow existing component patterns in src/renderer/src/ when creating new UI components
Use Composition API with proper TypeScript typing for new UI components
Implement responsive design with Tailwind CSS for new UI components
Add proper error handling and loading states for new UI componentsUse scoped styles to prevent CSS conflicts between components
Files:
src/renderer/src/components/message/MessageBlockContent.vuesrc/renderer/src/components/artifacts/ArtifactDialog.vue
🧠 Learnings (2)
📚 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/**/*.{vue} : Use Shadcn Vue, Radix Vue, and Tailwind for components and styling.
Applied to files:
package.json
🔇 Additional comments (2)
src/renderer/src/stores/artifact.ts (1)
54-56: Store API surface looks good.Exposing validateContext and updateArtifactContent from the store aligns with the new usage in components.
src/renderer/src/components/artifacts/ArtifactDialog.vue (1)
165-165: Confirmed:MAX_HEIGHTis supported in vue-use-monaco v0.0.8
The official API lists aMAX_HEIGHToption (type: number in pixels; default 500) to cap the editor’s height. No further changes are needed.
| (newArtifact) => { | ||
| if (!newArtifact) return | ||
| // Update language detection | ||
| codeLanguage.value = | ||
| artifactStore.currentArtifact?.language || | ||
| getFileExtension(artifactStore.currentArtifact?.type || '') | ||
| newArtifact.language || | ||
| getFileExtension(newArtifact.type || '') | ||
| if (codeLanguage.value === 'mermaid') { | ||
| return | ||
| } | ||
| const newCode = artifactStore.currentArtifact?.content || '' | ||
| const newCode = newArtifact.content || '' | ||
| // Check if we need to detect language | ||
| if (!codeLanguage.value || codeLanguage.value === '') { | ||
| throttledDetectLanguage(newCode) | ||
| } | ||
| updateCode(artifactStore.currentArtifact?.content || '', codeLanguage.value) | ||
| // Always update Monaco editor content | ||
| updateCode(newCode, codeLanguage.value) | ||
| }, | ||
| { | ||
| immediate: true | ||
| immediate: true, | ||
| deep: true // Add deep watching to catch property changes | ||
| } | ||
| ) |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Language mapping bug for Mermaid (and plain text).
The early return relies on codeLanguage === 'mermaid', but getFileExtension returns 'mdm' for Mermaid artifacts, so this never triggers. Monaco also expects 'mermaid' (if registered) or a supported tokenization; 'mdm' is not a known language. Plain text should typically be 'plaintext', not 'txt'.
Keep this watcher and fix the mapping in getFileExtension; suggested update outside this hunk:
// Replace getFileExtension mapping to align with Monaco languages
function getFileExtension(type: string) {
switch (type) {
case 'application/vnd.ant.code':
return 'plaintext' // monaco uses 'plaintext'
case 'text/markdown':
return 'markdown'
case 'text/html':
return 'html'
case 'image/svg+xml':
return 'svg' // acceptable if you want syntax highlight for XML/SVG
case 'application/vnd.ant.mermaid':
return 'mermaid' // ensure watcher’s mermaid short-circuit works
case 'application/vnd.ant.react':
return 'jsx'
default:
return 'plaintext'
}
}Optionally, if Mermaid is never supposed to drive Monaco updates, you can additionally guard here:
if (codeLanguage.value === 'mermaid') return🤖 Prompt for AI Agents
In src/renderer/src/components/artifacts/ArtifactDialog.vue around lines 179 to
205, the watcher’s early return for Mermaid never triggers because
getFileExtension currently returns values like "mdm" or "txt" that don’t match
Monaco’s expected language ids; update getFileExtension mapping so MIME/types
map to Monaco-recognized languages (e.g., map Mermaid MIME to "mermaid", plain
text to "plaintext", markdown to "markdown", html to "html", svg to "svg", react
to "jsx", default to "plaintext"), then keep the existing watcher’s mermaid
early-return (codeLanguage === 'mermaid') intact so Monaco updates are skipped
for mermaid artifacts.
| const updateArtifactContent = (updates: Partial<ArtifactState>) => { | ||
| if (currentArtifact.value) { | ||
| // Create a new object to trigger reactivity | ||
| currentArtifact.value = { | ||
| ...currentArtifact.value, | ||
| ...updates | ||
| } | ||
| } | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Prevent accidental primary key mutation: don’t allow updating id via updateArtifactContent.
Accepting Partial allows callers to change id inadvertently. Narrow the type to exclude id.
Apply this diff:
- const updateArtifactContent = (updates: Partial<ArtifactState>) => {
+ const updateArtifactContent = (updates: Partial<Omit<ArtifactState, 'id'>>) => {
if (currentArtifact.value) {
// Create a new object to trigger reactivity
currentArtifact.value = {
...currentArtifact.value,
...updates
}
}
}Optionally, add a runtime guard to ignore id if passed from untyped callers.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const updateArtifactContent = (updates: Partial<ArtifactState>) => { | |
| if (currentArtifact.value) { | |
| // Create a new object to trigger reactivity | |
| currentArtifact.value = { | |
| ...currentArtifact.value, | |
| ...updates | |
| } | |
| } | |
| } | |
| const updateArtifactContent = (updates: Partial<Omit<ArtifactState, 'id'>>) => { | |
| if (currentArtifact.value) { | |
| // Create a new object to trigger reactivity | |
| currentArtifact.value = { | |
| ...currentArtifact.value, | |
| ...updates | |
| } | |
| } | |
| } |
🤖 Prompt for AI Agents
In src/renderer/src/stores/artifact.ts around lines 37 to 45,
updateArtifactContent currently accepts Partial<ArtifactState> which allows
callers to accidentally change the primary key id; change the parameter type to
Partial<Omit<ArtifactState, "id">> (or Omit<Partial<ArtifactState>, "id">) so id
cannot be passed at compile time, and add a simple runtime guard that
strips/ignores an id field from the updates object (e.g., create a shallow copy
and delete updates.id) before merging to protect against untyped callers.
There was a problem hiding this comment.
Actionable comments posted: 2
🔭 Outside diff range comments (1)
src/renderer/src/components/artifacts/ArtifactDialog.vue (1)
210-215: Guard Monaco updates on language changes for mermaid and editor readinessOn language change, this always pushes to Monaco. If the detected/mapped language is
mermaidor the editor isn’t mounted yet, skip.Apply:
watch( () => codeLanguage.value, () => { - updateCode(artifactStore.currentArtifact?.content || '', codeLanguage.value) + if (codeLanguage.value === 'mermaid' || !codeEditor.value) return + updateCode(artifactStore.currentArtifact?.content || '', codeLanguage.value) } )
♻️ Duplicate comments (1)
src/renderer/src/components/artifacts/ArtifactDialog.vue (1)
182-186: Mermaid guard won’t trigger due to language mapping; aligngetFileExtensionto Monaco languagesThe early return checks
codeLanguage === 'mermaid', butgetFileExtensionreturns'mdm'for mermaid and'txt'for plaintext. This prevents the guard from triggering and may pass unknown language IDs to Monaco.Update the mapping to Monaco language IDs and keep the mermaid short-circuit. Suggested replacement (outside this hunk):
function getFileExtension(type: string) { switch (type) { case 'application/vnd.ant.code': return 'plaintext' case 'text/markdown': return 'markdown' case 'text/html': return 'html' case 'image/svg+xml': return 'svg' // or 'xml' if you prefer built-in XML highlighting case 'application/vnd.ant.mermaid': return 'mermaid' case 'application/vnd.ant.react': return 'jsx' default: return 'plaintext' } }Also add the same mermaid guard in the other update paths (see separate comments) to fully decouple Monaco from mermaid artifacts.
🧹 Nitpick comments (2)
src/renderer/src/components/artifacts/ArtifactDialog.vue (2)
346-347: Use i18n for default download filenameUser-visible default filename should use i18n per renderer guidelines.
Apply:
-link.download = `${artifactStore.currentArtifact.title || 'artifact'}.svg` +link.download = `${artifactStore.currentArtifact.title || t('artifacts.defaultFilename')}.svg`Make sure to add the
artifacts.defaultFilenamekey.
378-381: Use English for logs per codebase guidelineConsole log is Chinese; renderer guidelines require English for logs and comments.
Apply:
- console.error('复制失败', e) + console.error('Copy failed', e)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/renderer/src/components/artifacts/ArtifactDialog.vue(3 hunks)
🧰 Additional context used
📓 Path-based instructions (9)
**/*.{ts,tsx,js,jsx,vue}
📄 CodeRabbit Inference Engine (CLAUDE.md)
Use English for logs and comments
Files:
src/renderer/src/components/artifacts/ArtifactDialog.vue
src/renderer/src/**/*.vue
📄 CodeRabbit Inference Engine (CLAUDE.md)
src/renderer/src/**/*.vue: Use Composition API for all Vue 3 components
Use Tailwind CSS with scoped styles for styling
Organize components by feature in src/renderer/src/
Follow existing component patterns in src/renderer/src/ when creating new UI components
Use Composition API with proper TypeScript typing for new UI components
Implement responsive design with Tailwind CSS for new UI components
Add proper error handling and loading states for new UI componentsUse scoped styles to prevent CSS conflicts between components
Files:
src/renderer/src/components/artifacts/ArtifactDialog.vue
src/renderer/src/**/*.{ts,tsx,vue}
📄 CodeRabbit Inference Engine (CLAUDE.md)
src/renderer/src/**/*.{ts,tsx,vue}: Use Pinia for frontend state management
Renderer to Main: Use usePresenter.ts composable for direct presenter method calls
Files:
src/renderer/src/components/artifacts/ArtifactDialog.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/artifacts/ArtifactDialog.vue
src/renderer/**/*.{vue,ts,js,tsx,jsx}
📄 CodeRabbit Inference Engine (.cursor/rules/project-structure.mdc)
渲染进程代码放在
src/renderer
Files:
src/renderer/src/components/artifacts/ArtifactDialog.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/artifacts/ArtifactDialog.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/artifacts/ArtifactDialog.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/artifacts/ArtifactDialog.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.
Files:
src/renderer/src/components/artifacts/ArtifactDialog.vue
🔇 Additional comments (1)
src/renderer/src/components/artifacts/ArtifactDialog.vue (1)
165-165: RetainMAX_HEIGHTOptionConfirmed via the
MonacoOptionstype definitions thatuseMonacoin vue-use-monaco does support aMAX_HEIGHTconfiguration. You can safely keep this prop to explicitly control the editor’s max height—your Tailwindmax-h-[500px]wrapper remains optional but harmless.
| (newArtifact) => { | ||
| if (!newArtifact) return | ||
| // Update language detection | ||
| codeLanguage.value = newArtifact.language || getFileExtension(newArtifact.type || '') | ||
| if (codeLanguage.value === 'mermaid') { | ||
| return | ||
| } | ||
| const newCode = artifactStore.currentArtifact?.content || '' | ||
| const newCode = newArtifact.content || '' | ||
| // Check if we need to detect language | ||
| if (!codeLanguage.value || codeLanguage.value === '') { | ||
| throttledDetectLanguage(newCode) | ||
| } | ||
| updateCode(artifactStore.currentArtifact?.content || '', codeLanguage.value) | ||
| // Always update Monaco editor content | ||
| updateCode(newCode, codeLanguage.value) | ||
| }, | ||
| { | ||
| immediate: true | ||
| immediate: true, | ||
| deep: true // Add deep watching to catch property changes |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Avoid duplicate Monaco updates and remove unnecessary deep watch
This watcher sets language and also pushes content to Monaco; combined with the dedicated content watcher and the language watcher, this causes double/triple updateCode calls per change. Also, deep: true is unnecessary now that content has its own watcher and the store updates immutably.
Apply:
- // Always update Monaco editor content
- updateCode(newCode, codeLanguage.value)
+ // Defer editor updates to dedicated content/language watchers to avoid duplicate updates
},
{
- immediate: true,
- deep: true // Add deep watching to catch property changes
+ immediate: true
}Additionally, consider only updating the ref when the computed language actually changes:
const nextLang = newArtifact.language || getFileExtension(newArtifact.type || '')
if (nextLang !== codeLanguage.value) codeLanguage.value = nextLang🤖 Prompt for AI Agents
In src/renderer/src/components/artifacts/ArtifactDialog.vue around lines 179 to
201, the artifact watcher currently performs language detection and also always
calls updateCode and uses deep: true, causing duplicate Monaco updates and
unnecessary deep watching; change it to only compute the next language, assign
it to codeLanguage.value only when it actually differs (use nextLang =
newArtifact.language || getFileExtension(newArtifact.type || '') and compare
before assigning), keep the mermaid early return, keep the
throttledDetectLanguage call when language is empty, remove the unconditional
updateCode call from this watcher (let the dedicated content watcher update
Monaco), and remove the deep: true option from the watcher configuration.
| // Add a specific watcher for content changes to ensure real-time updates | ||
| watch( | ||
| () => artifactStore.currentArtifact?.content, | ||
| (newContent) => { | ||
| if (newContent !== undefined) { | ||
| updateCode(newContent, codeLanguage.value) | ||
| } | ||
| }, | ||
| { | ||
| immediate: true | ||
| } | ||
| ) |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Content watcher updates Monaco for mermaid and before editor init; add guards and skip no-op updates
Currently this watcher will:
- Push mermaid content to Monaco (defeats the earlier mermaid short-circuit).
- Call
updateCodebefore the editor is created when the editor is hidden (Preview mode). - Re-apply identical content repeatedly.
Apply:
-watch(
- () => artifactStore.currentArtifact?.content,
- (newContent) => {
- if (newContent !== undefined) {
- updateCode(newContent, codeLanguage.value)
- }
- },
- {
- immediate: true
- }
-)
+watch(
+ () => artifactStore.currentArtifact?.content,
+ (newContent, oldContent) => {
+ if (newContent === undefined || newContent === oldContent) return
+ if (codeLanguage.value === 'mermaid') return
+ if (!codeEditor.value) return
+ updateCode(newContent, codeLanguage.value)
+ }
+)This keeps streaming updates responsive while preventing invalid mermaid pushes and pre-init updates.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| // Add a specific watcher for content changes to ensure real-time updates | |
| watch( | |
| () => artifactStore.currentArtifact?.content, | |
| (newContent) => { | |
| if (newContent !== undefined) { | |
| updateCode(newContent, codeLanguage.value) | |
| } | |
| }, | |
| { | |
| immediate: true | |
| } | |
| ) | |
| // Add a specific watcher for content changes to ensure real-time updates | |
| watch( | |
| () => artifactStore.currentArtifact?.content, | |
| (newContent, oldContent) => { | |
| // Skip undefined or unchanged content | |
| if (newContent === undefined || newContent === oldContent) return | |
| // Don’t push mermaid to Monaco (handled elsewhere) | |
| if (codeLanguage.value === 'mermaid') return | |
| // Wait until the editor is initialized | |
| if (!codeEditor.value) return | |
| updateCode(newContent, codeLanguage.value) | |
| } | |
| ) |
🤖 Prompt for AI Agents
In src/renderer/src/components/artifacts/ArtifactDialog.vue around lines
217-228, the new watcher currently pushes mermaid content into Monaco, runs
before the editor exists (Preview mode), and re-applies identical content;
update the watcher to short-circuit early: 1) if artifact type/language
indicates mermaid (or other non-editor format) skip calling updateCode, 2) if
the editor instance is not initialized or the editor is hidden in Preview mode
skip calling updateCode, and 3) if newContent exactly equals the current editor
model value (no-op) skip calling updateCode; keep the watcher immediate but rely
on these guards so streaming updates stay responsive while avoiding invalid or
redundant editor updates.
* fix: add AlertDialogDescription to resolve accessibility warning (#706) * fix: resolve focus flicker when creating new windows with Ctrl+Shift+N (#707) * feat: enhance window management by implementing main window ID handling (#709) * docs: update zhipu developer doc website link (#715) Co-authored-by: gongchao <chao.gong@aminer.cn> * refactor: better translate (#716) * chore: en-us i18n * chore(i18n): polish ja-JP translations across UI; keep chat.input.placeholder unchanged * chore(i18n): polish fr-FR translations; keep chat.input.placeholder unchanged * chore(i18n): refine fr-FR MCP & Settings copy; idiomatic, concise, brand-consistent * chore(i18n): polish ru-RU translations across UI; keep chat.input.placeholder unchanged * chore(i18n): polish fa-IR translations across UI; keep chat.input.placeholder unchanged * chore: fix format * chore: fix i18n * chore: lock rolldown-vite version * feat: add GPT-5 series model support (#717) * ci(vite): Bundle the main file into a single file to speed up loading. (#718) * fix(math): parser by upgrade vue-renderer-markdown (#722) * chore: bump deps (#721) * chore: bump deps * fix: rolldown-vite 7.1.0 and duckdb bundle issue * chore: back to vite * chore: update electron * chore: update versions * fix(math): parser by upgrade vue-renderer-markdown (#722) * chore: bump deps --------- Co-authored-by: Simon He <57086651+Simon-He95@users.noreply.github.com> * fix: add scrollable support to PopoverContent to prevent overflow (#720) * feat: implement floating chat window system with performance optimization (#724) * feat: add mcp sync and modelscope provider #615 (#723) * wip: add modelscope provider * feat: add mcp sync to modelscope * fix: add scrollable support to PopoverContent to prevent overflow (#720) * feat: implement floating chat window system with performance optimization (#724) * chore: i18n and format * feat: better style * fix: mcp tool display --------- Co-authored-by: yyhhyyyyyy <yyhhyyyyyy8@gmail.com> * fix: move_files newPath parse issue (#725) * fix: move_files newPath 参数计算规则 * fix: move_files 移动前需要判断dest是目录还是文件 * feat: add Claude Opus 4.1 to anthropic default model list (#726) * feat: Add mcprouter's MCP marketplace api support (#727) * wip: add mcp market * feat: mcp market install * wip: mcp install status sync * feat: mcp server config mask * chore: remove working doc * chore: add translate * feat: add ESC key to close floating chat window (#728) * feat: add floating button position persistence with boundary validation (#729) * feat: add floating button position persistence with boundary validation * feat: refactor floating button to use electron-window-state * chore: bump to 0.3.0 * feat: add reasoning_effort parameter support for gpt-oss models (#731) * feat: add reasoning_effort parameter support for gpt-oss models - add reasoning effort UI support across all components * fix: preserve user reasoning effort settings and improve display logic * fix: artifacts code not streaming (#732) * fix: artifact react load failed * chore: remove log * fix: artifacts code not stream * fix: format --------- Co-authored-by: yyhhyyyyyy <yyhhyyyyyy8@gmail.com> Co-authored-by: hllshiro <40970081+hllshiro@users.noreply.github.com> Co-authored-by: tomsun28 <tomsun28@outlook.com> Co-authored-by: gongchao <chao.gong@aminer.cn> Co-authored-by: Simon He <57086651+Simon-He95@users.noreply.github.com> Co-authored-by: wanna <wanna.w@binarywalk.com>
* fix: add AlertDialogDescription to resolve accessibility warning (#706) * fix: resolve focus flicker when creating new windows with Ctrl+Shift+N (#707) * feat: enhance window management by implementing main window ID handling (#709) * docs: update zhipu developer doc website link (#715) Co-authored-by: gongchao <chao.gong@aminer.cn> * refactor: better translate (#716) * chore: en-us i18n * chore(i18n): polish ja-JP translations across UI; keep chat.input.placeholder unchanged * chore(i18n): polish fr-FR translations; keep chat.input.placeholder unchanged * chore(i18n): refine fr-FR MCP & Settings copy; idiomatic, concise, brand-consistent * chore(i18n): polish ru-RU translations across UI; keep chat.input.placeholder unchanged * chore(i18n): polish fa-IR translations across UI; keep chat.input.placeholder unchanged * chore: fix format * chore: fix i18n * chore: lock rolldown-vite version * feat: add GPT-5 series model support (#717) * ci(vite): Bundle the main file into a single file to speed up loading. (#718) * fix(math): parser by upgrade vue-renderer-markdown (#722) * chore: bump deps (#721) * chore: bump deps * fix: rolldown-vite 7.1.0 and duckdb bundle issue * chore: back to vite * chore: update electron * chore: update versions * fix(math): parser by upgrade vue-renderer-markdown (#722) * chore: bump deps --------- Co-authored-by: Simon He <57086651+Simon-He95@users.noreply.github.com> * fix: add scrollable support to PopoverContent to prevent overflow (#720) * feat: implement floating chat window system with performance optimization (#724) * feat: add mcp sync and modelscope provider #615 (#723) * wip: add modelscope provider * feat: add mcp sync to modelscope * fix: add scrollable support to PopoverContent to prevent overflow (#720) * feat: implement floating chat window system with performance optimization (#724) * chore: i18n and format * feat: better style * fix: mcp tool display --------- Co-authored-by: yyhhyyyyyy <yyhhyyyyyy8@gmail.com> * fix: move_files newPath parse issue (#725) * fix: move_files newPath 参数计算规则 * fix: move_files 移动前需要判断dest是目录还是文件 * feat: add Claude Opus 4.1 to anthropic default model list (#726) * feat: Add mcprouter's MCP marketplace api support (#727) * wip: add mcp market * feat: mcp market install * wip: mcp install status sync * feat: mcp server config mask * chore: remove working doc * chore: add translate * feat: add ESC key to close floating chat window (#728) * feat: add floating button position persistence with boundary validation (#729) * feat: add floating button position persistence with boundary validation * feat: refactor floating button to use electron-window-state * chore: bump to 0.3.0 * feat: add reasoning_effort parameter support for gpt-oss models (#731) * feat: add reasoning_effort parameter support for gpt-oss models - add reasoning effort UI support across all components * fix: preserve user reasoning effort settings and improve display logic * fix: artifacts code not streaming (#732) * fix: artifact react load failed * chore: remove log * fix: artifacts code not stream * fix: format * feat: disable automatic model enabling for better UX (#734) * feat: sync provider sorting from settings to model selection (#736) * feat: sync provider sorting from settings to model selection * feat: refactor ModelSelect to use computed providers for better reactivity --------- Co-authored-by: yyhhyyyyyy <yyhhyyyyyy8@gmail.com> Co-authored-by: hllshiro <40970081+hllshiro@users.noreply.github.com> Co-authored-by: tomsun28 <tomsun28@outlook.com> Co-authored-by: gongchao <chao.gong@aminer.cn> Co-authored-by: Simon He <57086651+Simon-He95@users.noreply.github.com> Co-authored-by: wanna <wanna.w@binarywalk.com>
Summary by CodeRabbit