feat: optimize code blocker #1270
Conversation
📝 WalkthroughWalkthroughIntegrated streaming-state-aware logic into MessageList.vue to track streaming status, adjust which messages are rendered, avoid minimap and DOM work while streaming, and change size-keying to prevent layout churn for pending streaming messages. No public API signatures were changed. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. 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
🤖 Fix all issues with AI agents
In @src/renderer/src/components/message/MessageList.vue:
- Line 47: Remove the invalid :active="false" binding from the <template> used
for v-for over streamingTailItems in MessageList.vue; <template> cannot accept
props—delete the :active attribute and, if the active state was meant for a
DynamicScrollerItem or a child component (e.g., DynamicScrollerItem,
MessageItem), move or apply the binding there instead (apply :active to the
actual component element inside the template or compute the prop in its parent
render logic).
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/renderer/src/components/message/MessageList.vue
🧰 Additional context used
📓 Path-based instructions (9)
src/renderer/**/*.vue
📄 CodeRabbit inference engine (CLAUDE.md)
src/renderer/**/*.vue: Use Vue 3 Composition API for all components
Use Tailwind CSS for styling with scoped styles
All user-facing strings must use i18n keys via vue-i18n
Files:
src/renderer/src/components/message/MessageList.vue
src/renderer/src/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (CLAUDE.md)
Use
usePresenter.tscomposable for renderer-to-main IPC communication via direct presenter method callsEnsure all code comments are in English and all log messages are in English, with no non-English text in code comments or console statements
Use VueUse composables for common utilities like
useLocalStorage,useClipboard,useDebounceFnVue 3 renderer app code should be organized in
src/renderer/srcwith subdirectories forcomponents/,stores/,views/,i18n/, andlib/
Files:
src/renderer/src/components/message/MessageList.vue
**/*.{js,ts,tsx,jsx,vue,mjs,cjs}
📄 CodeRabbit inference engine (.cursor/rules/development-setup.mdc)
All logs and comments must be in English
Files:
src/renderer/src/components/message/MessageList.vue
**/*.{js,ts,tsx,jsx,vue,json,mjs,cjs}
📄 CodeRabbit inference engine (.cursor/rules/development-setup.mdc)
Use Prettier as the code formatter
Files:
src/renderer/src/components/message/MessageList.vue
src/renderer/src/**/*.{vue,ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/i18n.mdc)
src/renderer/src/**/*.{vue,ts,tsx}: Use vue-i18n framework for internationalization located at src/renderer/src/i18n/
All user-facing strings must use i18n keys, not hardcoded text
src/renderer/src/**/*.{vue,ts,tsx}: Usereffor primitives and references,reactivefor objects in Vue 3 Composition API
Prefercomputedproperties over methods for derived state in Vue components
Import Shadcn Vue components from@/shadcn/components/ui/path alias
Use thecn()utility function combining clsx and tailwind-merge for dynamic Tailwind classes
UsedefineAsyncComponent()for lazy loading heavy Vue components
Use TypeScript for all Vue components and composables with explicit type annotations
Define TypeScript interfaces for Vue component props and data structures
UseusePresentercomposable for main process communication instead of direct IPC calls
Files:
src/renderer/src/components/message/MessageList.vue
src/renderer/src/**/*.vue
📄 CodeRabbit inference engine (.cursor/rules/i18n.mdc)
Import useI18n from vue-i18n in Vue components to access translation functions t and locale
src/renderer/src/**/*.vue: Use<script setup>syntax for concise Vue 3 component definitions with Composition API
Define props and emits explicitly in Vue components usingdefinePropsanddefineEmitswith TypeScript interfaces
Useprovide/injectfor dependency injection in Vue components instead of prop drilling
Use Tailwind CSS for all styling instead of writing scoped CSS files
Use mobile-first responsive design approach with Tailwind breakpoints
Use Iconify Vue with lucide icons as primary choice, following patternlucide:{icon-name}
Usev-memodirective for memoizing expensive computations in templates
Usev-oncedirective for rendering static content without reactivity updates
Use virtual scrolling withRecycleScrollercomponent for rendering long lists
Subscribe to events usingrendererEvents.on()and unsubscribe inonUnmountedlifecycle hook
Files:
src/renderer/src/components/message/MessageList.vue
src/renderer/src/components/**/*.vue
📄 CodeRabbit inference engine (.cursor/rules/vue-stack-guide.mdc)
Name Vue components using PascalCase (e.g.,
ChatInput.vue,MessageItemUser.vue)
Files:
src/renderer/src/components/message/MessageList.vue
**/*.vue
📄 CodeRabbit inference engine (AGENTS.md)
Vue components must be named in PascalCase (e.g.,
ChatInput.vue) and use Vue 3 Composition API with Pinia for state management and Tailwind for styling
Files:
src/renderer/src/components/message/MessageList.vue
**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{ts,tsx,vue}: Use camelCase for variable and function names; use PascalCase for types and classes; use SCREAMING_SNAKE_CASE for constants
Configure Prettier with single quotes, no semicolons, and line width of 100 characters. Runpnpm run formatafter completing features
Files:
src/renderer/src/components/message/MessageList.vue
🧠 Learnings (2)
📓 Common learnings
Learnt from: CR
Repo: ThinkInAIXYZ/deepchat PR: 0
File: .cursor/rules/vue-stack-guide.mdc:0-0
Timestamp: 2026-01-05T02:41:31.661Z
Learning: Applies to src/renderer/src/**/*.vue : Use virtual scrolling with `RecycleScroller` component for rendering long lists
📚 Learning: 2026-01-05T02:41:31.661Z
Learnt from: CR
Repo: ThinkInAIXYZ/deepchat PR: 0
File: .cursor/rules/vue-stack-guide.mdc:0-0
Timestamp: 2026-01-05T02:41:31.661Z
Learning: Applies to src/renderer/src/**/*.vue : Use virtual scrolling with `RecycleScroller` component for rendering long lists
Applied to files:
src/renderer/src/components/message/MessageList.vue
⏰ 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 (3)
src/renderer/src/components/message/MessageList.vue (3)
193-221: LGTM!The streaming detection logic is well-structured:
isStreamingMessagecorrectly short-circuits for non-assistant messagesstreamingTailItemsefficiently collects contiguous streaming messages from the tail- Using a
SetforstreamingTailIdsprovides O(1) lookupsvirtualItemsshort-circuits when there are no streaming items
48-60: Streaming tail rendering looks correct.The assistant message rendering in the after slot mirrors the main scroller's implementation with proper event handlers and minimap integration. The
v-ifguard aligns withisStreamingMessagewhich only returns true for assistant messages.
612-620: Good handling of scroll behavior for streaming messages.The logic correctly handles the case where a target message is in the streaming tail by scrolling to bottom instead of attempting to locate it in the virtual scroller (where it doesn't exist).
zhangmo8
force-pushed
the
fix-code-block
branch
from
1ed9235 to
a7c6bdd
Compare
There was a problem hiding this comment.
Actionable comments posted: 4
🤖 Fix all issues with AI agents
In @src/renderer/src/components/message/MessageList.vue:
- Around line 244-245: Translate the Chinese comment above the early-return in
MessageList.vue to English; replace "如果正在 streaming，不参与 variant 计算" with an
English comment that clearly conveys the same meaning (e.g., "If currently
streaming, exclude from variant calculation") and keep it adjacent to the if
(isStreaming.value && message.status === 'pending') return '' line so it still
documents that pending streaming messages are not considered in variant
computation.
- Around line 173-178: Translate the Chinese comment above the mapped
computation into English; replace "如果正在 streaming，排除 pending 状态的消息，避免 minimap
频繁重新计算" with an English comment such as "If streaming, exclude messages with
pending status to avoid frequent minimap recalculations" and keep surrounding
code and symbols (mapped, props.items, isStreaming, item.message.status ===
'pending') unchanged.
- Around line 211-214: The inline Chinese comment above the streaming check in
MessageList.vue should be translated to English: replace "如果正在
streaming，返回固定值，避免频繁重新计算高度" with a concise English comment such as "If currently
streaming, return a fixed value to avoid recalculating height frequently"
immediately above the if block that checks isStreaming.value and message.status
=== 'pending' (the block that returns `streaming:${message.id}`) so the intent
is clear to all readers.
- Around line 550-551: Translate the Chinese inline comment above the
isStreaming check into English while preserving its meaning; replace "// 如果正在
streaming，跳过 dom info 记录，避免频繁计算" with an English comment such as "// If
currently streaming, skip DOM info logging to avoid expensive/redundant
calculations" immediately before the if (isStreaming.value) return line in the
MessageList component.
🧹 Nitpick comments (2)
src/renderer/src/components/message/MessageList.vue (2)
125-125: Consider translating existing Chinese comment to English.This pre-existing comment should also be in English per coding guidelines.
Suggested fix
-// === Local State (需要先声明,因为 useMessageScroll 需要引用) === +// === Local State (must be declared first as useMessageScroll references these) ===
133-141: Unused refs satisfy the composable interface but could be simplified.
inputTextandcurrentContextLengthare initialized as static dummy refs ('' and 0) and never updated in this component. WhileuseSendButtonStateinternally uses these parameters for itsdisabledSendcomputed, MessageList.vue only destructuresisStreaming, which is derived solely from the chat store'sgeneratingThreadIds. These refs could be removed if a simpler composable interface were created for streaming-state-only use cases, though keeping them is acceptable for interface consistency.
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/renderer/src/components/message/MessageList.vue
🧰 Additional context used
📓 Path-based instructions (9)
src/renderer/**/*.vue
📄 CodeRabbit inference engine (CLAUDE.md)
src/renderer/**/*.vue: Use Vue 3 Composition API for all components
Use Tailwind CSS for styling with scoped styles
All user-facing strings must use i18n keys via vue-i18n
Files:
src/renderer/src/components/message/MessageList.vue
src/renderer/src/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (CLAUDE.md)
Use
usePresenter.tscomposable for renderer-to-main IPC communication via direct presenter method callsEnsure all code comments are in English and all log messages are in English, with no non-English text in code comments or console statements
Use VueUse composables for common utilities like
useLocalStorage,useClipboard,useDebounceFnVue 3 renderer app code should be organized in
src/renderer/srcwith subdirectories forcomponents/,stores/,views/,i18n/, andlib/
Files:
src/renderer/src/components/message/MessageList.vue
**/*.{js,ts,tsx,jsx,vue,mjs,cjs}
📄 CodeRabbit inference engine (.cursor/rules/development-setup.mdc)
All logs and comments must be in English
Files:
src/renderer/src/components/message/MessageList.vue
**/*.{js,ts,tsx,jsx,vue,json,mjs,cjs}
📄 CodeRabbit inference engine (.cursor/rules/development-setup.mdc)
Use Prettier as the code formatter
Files:
src/renderer/src/components/message/MessageList.vue
src/renderer/src/**/*.{vue,ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/i18n.mdc)
src/renderer/src/**/*.{vue,ts,tsx}: Use vue-i18n framework for internationalization located at src/renderer/src/i18n/
All user-facing strings must use i18n keys, not hardcoded text
src/renderer/src/**/*.{vue,ts,tsx}: Usereffor primitives and references,reactivefor objects in Vue 3 Composition API
Prefercomputedproperties over methods for derived state in Vue components
Import Shadcn Vue components from@/shadcn/components/ui/path alias
Use thecn()utility function combining clsx and tailwind-merge for dynamic Tailwind classes
UsedefineAsyncComponent()for lazy loading heavy Vue components
Use TypeScript for all Vue components and composables with explicit type annotations
Define TypeScript interfaces for Vue component props and data structures
UseusePresentercomposable for main process communication instead of direct IPC calls
Files:
src/renderer/src/components/message/MessageList.vue
src/renderer/src/**/*.vue
📄 CodeRabbit inference engine (.cursor/rules/i18n.mdc)
Import useI18n from vue-i18n in Vue components to access translation functions t and locale
src/renderer/src/**/*.vue: Use<script setup>syntax for concise Vue 3 component definitions with Composition API
Define props and emits explicitly in Vue components usingdefinePropsanddefineEmitswith TypeScript interfaces
Useprovide/injectfor dependency injection in Vue components instead of prop drilling
Use Tailwind CSS for all styling instead of writing scoped CSS files
Use mobile-first responsive design approach with Tailwind breakpoints
Use Iconify Vue with lucide icons as primary choice, following patternlucide:{icon-name}
Usev-memodirective for memoizing expensive computations in templates
Usev-oncedirective for rendering static content without reactivity updates
Use virtual scrolling withRecycleScrollercomponent for rendering long lists
Subscribe to events usingrendererEvents.on()and unsubscribe inonUnmountedlifecycle hook
Files:
src/renderer/src/components/message/MessageList.vue
src/renderer/src/components/**/*.vue
📄 CodeRabbit inference engine (.cursor/rules/vue-stack-guide.mdc)
Name Vue components using PascalCase (e.g.,
ChatInput.vue,MessageItemUser.vue)
Files:
src/renderer/src/components/message/MessageList.vue
**/*.vue
📄 CodeRabbit inference engine (AGENTS.md)
Vue components must be named in PascalCase (e.g.,
ChatInput.vue) and use Vue 3 Composition API with Pinia for state management and Tailwind for styling
Files:
src/renderer/src/components/message/MessageList.vue
**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{ts,tsx,vue}: Use camelCase for variable and function names; use PascalCase for types and classes; use SCREAMING_SNAKE_CASE for constants
Configure Prettier with single quotes, no semicolons, and line width of 100 characters. Runpnpm run formatafter completing features
Files:
src/renderer/src/components/message/MessageList.vue
🧠 Learnings (7)
📚 Learning: 2026-01-05T02:41:31.661Z
Learnt from: CR
Repo: ThinkInAIXYZ/deepchat PR: 0
File: .cursor/rules/vue-stack-guide.mdc:0-0
Timestamp: 2026-01-05T02:41:31.661Z
Learning: Applies to src/renderer/src/components/**/*.vue : Name Vue components using PascalCase (e.g., `ChatInput.vue`, `MessageItemUser.vue`)
Applied to files:
src/renderer/src/components/message/MessageList.vue
📚 Learning: 2026-01-05T02:41:31.661Z
Learnt from: CR
Repo: ThinkInAIXYZ/deepchat PR: 0
File: .cursor/rules/vue-stack-guide.mdc:0-0
Timestamp: 2026-01-05T02:41:31.661Z
Learning: Applies to src/renderer/src/**/*.vue : Use `v-once` directive for rendering static content without reactivity updates
Applied to files:
src/renderer/src/components/message/MessageList.vue
📚 Learning: 2026-01-05T02:41:31.661Z
Learnt from: CR
Repo: ThinkInAIXYZ/deepchat PR: 0
File: .cursor/rules/vue-stack-guide.mdc:0-0
Timestamp: 2026-01-05T02:41:31.661Z
Learning: Applies to src/renderer/src/**/*.{ts,tsx,vue} : Use VueUse composables for common utilities like `useLocalStorage`, `useClipboard`, `useDebounceFn`
Applied to files:
src/renderer/src/components/message/MessageList.vue
📚 Learning: 2026-01-05T02:41:31.661Z
Learnt from: CR
Repo: ThinkInAIXYZ/deepchat PR: 0
File: .cursor/rules/vue-stack-guide.mdc:0-0
Timestamp: 2026-01-05T02:41:31.661Z
Learning: Applies to src/renderer/src/composables/**/*.ts : Name composables using camelCase with `use` prefix (e.g., `useChatState.ts`, `useMessageList.ts`)
Applied to files:
src/renderer/src/components/message/MessageList.vue
📚 Learning: 2026-01-05T02:41:31.661Z
Learnt from: CR
Repo: ThinkInAIXYZ/deepchat PR: 0
File: .cursor/rules/vue-stack-guide.mdc:0-0
Timestamp: 2026-01-05T02:41:31.661Z
Learning: Applies to src/renderer/src/components/ : Organize Vue component directories using lowercase with dashes (e.g., `chat-input/`, `message/`)
Applied to files:
src/renderer/src/components/message/MessageList.vue
📚 Learning: 2026-01-05T02:41:31.661Z
Learnt from: CR
Repo: ThinkInAIXYZ/deepchat PR: 0
File: .cursor/rules/vue-stack-guide.mdc:0-0
Timestamp: 2026-01-05T02:41:31.661Z
Learning: Applies to src/renderer/src/**/*.{vue,ts,tsx} : Use `usePresenter` composable for main process communication instead of direct IPC calls
Applied to files:
src/renderer/src/components/message/MessageList.vue
📚 Learning: 2026-01-05T02:41:31.661Z
Learnt from: CR
Repo: ThinkInAIXYZ/deepchat PR: 0
File: .cursor/rules/vue-stack-guide.mdc:0-0
Timestamp: 2026-01-05T02:41:31.661Z
Learning: Applies to src/renderer/src/**/*.{vue,ts,tsx} : Import Shadcn Vue components from `@/shadcn/components/ui/` path alias
Applied to files:
src/renderer/src/components/message/MessageList.vue
| // 如果正在 streaming，排除 pending 状态的消息，避免 minimap 频繁重新计算 | ||
| const mapped = props.items | ||
| .filter((item) => { | ||
| if (!isStreaming.value) return true | ||
| return !item.message || item.message.status !== 'pending' | ||
| }) |
There was a problem hiding this comment.
Chinese comment should be translated to English.
Per coding guidelines, all comments must be in English.
Suggested fix
- // 如果正在 streaming，排除 pending 状态的消息，避免 minimap 频繁重新计算
+ // During streaming, exclude pending messages to prevent frequent minimap recalculations📝 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.
| // 如果正在 streaming，排除 pending 状态的消息，避免 minimap 频繁重新计算 | |
| const mapped = props.items | |
| .filter((item) => { | |
| if (!isStreaming.value) return true | |
| return !item.message || item.message.status !== 'pending' | |
| }) | |
| // During streaming, exclude pending messages to prevent frequent minimap recalculations | |
| const mapped = props.items | |
| .filter((item) => { | |
| if (!isStreaming.value) return true | |
| return !item.message || item.message.status !== 'pending' | |
| }) |
🤖 Prompt for AI Agents
In @src/renderer/src/components/message/MessageList.vue around lines 173 - 178,
Translate the Chinese comment above the mapped computation into English; replace
"如果正在 streaming，排除 pending 状态的消息，避免 minimap 频繁重新计算" with an English comment such
as "If streaming, exclude messages with pending status to avoid frequent minimap
recalculations" and keep surrounding code and symbols (mapped, props.items,
isStreaming, item.message.status === 'pending') unchanged.
| // 如果正在 streaming，返回固定值，避免频繁重新计算高度 | ||
| if (isStreaming.value && message.status === 'pending') { | ||
| return `streaming:${message.id}` | ||
| } |
There was a problem hiding this comment.
Chinese comment should be translated to English.
Per coding guidelines, all comments must be in English.
Suggested fix
- // 如果正在 streaming，返回固定值，避免频繁重新计算高度
+ // During streaming, return a stable key to avoid frequent height recalculations📝 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.
| // 如果正在 streaming，返回固定值，避免频繁重新计算高度 | |
| if (isStreaming.value && message.status === 'pending') { | |
| return `streaming:${message.id}` | |
| } | |
| // During streaming, return a stable key to avoid frequent height recalculations | |
| if (isStreaming.value && message.status === 'pending') { | |
| return `streaming:${message.id}` | |
| } |
🤖 Prompt for AI Agents
In @src/renderer/src/components/message/MessageList.vue around lines 211 - 214,
The inline Chinese comment above the streaming check in MessageList.vue should
be translated to English: replace "如果正在 streaming，返回固定值，避免频繁重新计算高度" with a
concise English comment such as "If currently streaming, return a fixed value to
avoid recalculating height frequently" immediately above the if block that
checks isStreaming.value and message.status === 'pending' (the block that
returns `streaming:${message.id}`) so the intent is clear to all readers.
| // 如果正在 streaming，不参与 variant 计算 | ||
| if (isStreaming.value && message.status === 'pending') return '' |
There was a problem hiding this comment.
Chinese comment should be translated to English.
Per coding guidelines, all comments must be in English.
Suggested fix
- // 如果正在 streaming，不参与 variant 计算
+ // During streaming, skip variant calculation for pending messages📝 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.
| // 如果正在 streaming，不参与 variant 计算 | |
| if (isStreaming.value && message.status === 'pending') return '' | |
| // During streaming, skip variant calculation for pending messages | |
| if (isStreaming.value && message.status === 'pending') return '' |
🤖 Prompt for AI Agents
In @src/renderer/src/components/message/MessageList.vue around lines 244 - 245,
Translate the Chinese comment above the early-return in MessageList.vue to
English; replace "如果正在 streaming，不参与 variant 计算" with an English comment that
clearly conveys the same meaning (e.g., "If currently streaming, exclude from
variant calculation") and keep it adjacent to the if (isStreaming.value &&
message.status === 'pending') return '' line so it still documents that pending
streaming messages are not considered in variant computation.
| // 如果正在 streaming，跳过 dom info 记录，避免频繁计算 | ||
| if (isStreaming.value) return |
There was a problem hiding this comment.
Chinese comment should be translated to English.
Per coding guidelines, all comments must be in English.
Suggested fix
- // 如果正在 streaming，跳过 dom info 记录，避免频繁计算
+ // During streaming, skip DOM info recording to reduce computation📝 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.
| // 如果正在 streaming，跳过 dom info 记录，避免频繁计算 | |
| if (isStreaming.value) return | |
| // During streaming, skip DOM info recording to reduce computation | |
| if (isStreaming.value) return |
🤖 Prompt for AI Agents
In @src/renderer/src/components/message/MessageList.vue around lines 550 - 551,
Translate the Chinese inline comment above the isStreaming check into English
while preserving its meaning; replace "// 如果正在 streaming，跳过 dom info 记录，避免频繁计算"
with an English comment such as "// If currently streaming, skip DOM info
logging to avoid expensive/redundant calculations" immediately before the if
(isStreaming.value) return line in the MessageList component.
zerob13
merged commit 0c6cc3b
into
ThinkInAIXYZ:zhangmo8/fix-code-block
2 participants
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.