feat: optimize code blocker

Author: zhangmo8

src/renderer/src/components/message/MessageList.vue

@@ -4,7 +4,7 @@
       ref="dynamicScrollerRef"
       class="message-list-container relative flex-1 scrollbar-hide overflow-y-auto w-full h-full pr-12 lg:pr-12 transition-opacity duration-300"
       :class="{ 'opacity-0': !visible }"
-      :items="items"
+      :items="virtualItems"
       list-class="w-full pt-4"
       :min-item-size="48"
       :buffer="200"
@@ -44,6 +44,21 @@
         </DynamicScrollerItem>
       </template>
       <template #after>
+        <template :active="false" v-for="streamItem in streamingTailItems" :key="streamItem.id">
+          <div
+            v-if="streamItem.message?.role === 'assistant'"
+            @mouseenter="minimap.handleHover(streamItem.id)"
+            @mouseleave="minimap.handleHover(null)"
+          >
+            <MessageItemAssistant
+              :message="streamItem.message as AssistantMessage"
+              :is-capturing-image="capture.isCapturing.value"
+              @copy-image="handleCopyImage"
+              @variant-changed="wrapScrollToMessage"
+              @trace="handleTrace"
+            />
+          </div>
+        </template>
         <div ref="scrollAnchor" class="h-8" />
       </template>
     </DynamicScroller>
@@ -175,6 +190,36 @@ const minimapMessages = computed(() => {
   return chatStore.variantAwareMessages
 })
 
+const isStreamingMessage = (message: Message) => {
+  if (message.role !== 'assistant') return false
+  if (message.status === 'pending') return true
+
+  const blocks = (message as AssistantMessage).content
+  if (!Array.isArray(blocks)) return false
+  return blocks.some((block) =>
+    ['loading', 'reading', 'optimizing', 'pending'].includes(block.status)
+  )
+}
+
+const streamingTailItems = computed(() => {
+  const tail: MessageListItem[] = []
+  for (let index = props.items.length - 1; index >= 0; index--) {
+    const item = props.items[index]
+    const message = item.message
+    if (!message || !isStreamingMessage(message)) break
+    tail.unshift(item)
+  }
+  return tail
+})
+
+const streamingTailIds = computed(() => new Set(streamingTailItems.value.map((item) => item.id)))
+
+const virtualItems = computed(() => {
+  const streamingIds = streamingTailIds.value
+  if (!streamingIds.size) return props.items
+  return props.items.filter((item) => !streamingIds.has(item.id))
+})
+
 // === Constants ===
 const HIGHLIGHT_CLASS = 'selection-highlight'
 const HIGHLIGHT_ACTIVE_CLASS = 'selection-highlight-active'
@@ -554,7 +599,7 @@ const refreshVirtualScroller = async (messageId?: string) => {
   await new Promise((resolve) => requestAnimationFrame(resolve))
 
   const scroller = dynamicScrollerRef.value
-  if (messageId && scroller?.scrollToItem) {
+  if (messageId && !streamingTailIds.value.has(messageId) && scroller?.scrollToItem) {
     const index = props.items.findIndex((item) => item.id === messageId)
     if (index !== -1) {
       scroller.scrollToItem(index)
@@ -566,6 +611,10 @@ const refreshVirtualScroller = async (messageId?: string) => {
 
 const wrapScrollToMessage = async (messageId: string) => {
   void chatStore.ensureMessagesLoadedByIds([messageId])
+  if (streamingTailIds.value.has(messageId)) {
+    scrollToBottom(true)
+    return
+  }
   scrollToMessage(messageId, () => props.items)
   await refreshVirtualScroller(messageId)
 }