fix: optimize chat UI performance and message handling (#869)

Author: mini2s

src/api/providers/zgsm.ts

@@ -378,7 +378,7 @@ export class ZgsmAiHandler extends BaseProvider implements SingleCompletionHandl
 			convertedMessages = convertToR1Format([{ role: "user", content: systemPrompt }, ...messages])
 		} else if (isArk || isLegacyFormat) {
 			convertedMessages = [{ role: "system", content: systemPrompt }, ...convertToSimpleMessages(messages)]
-		} else if (_mid?.includes("glm-4.7")) {
+		} else if (_mid?.includes("glm") || isMiniMax || _mid?.includes("claude")) {
 			convertedMessages = [
 				{ role: "system", content: systemPrompt },
 				...convertToZAiFormat(messages, { mergeToolResultText: true }),

webview-ui/src/components/chat/ChatRow.tsx

@@ -1501,7 +1501,7 @@ export const ChatRowContent = ({
 				case "api_req_finished":
 					return null // we should never see this message type
 				case "text":
-					return (
+					return !message?.text?.trim() ? null : (
 						<div>
 							<div style={headerStyle}>
 								<MessageCircle className="w-4 shrink-0" aria-label="Speech bubble icon" />

webview-ui/src/components/chat/ChatView.tsx

@@ -1227,23 +1227,28 @@ const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewPro
 		[handleSetExpandedRow],
 	)
 
-	const handleRowHeightChange = useCallback(
-		(isTaller: boolean) => {
-			// Don't auto-scroll if the user is actively expanding/collapsing content
-			// This prevents scroll conflicts when user manually expands the last message
-			// or expands Markdown content
-			if (userExpandingRef.current || markdownExpandingRef.current) {
-				return
-			}
+	const handleRowHeightChange = useMemo(
+		() =>
+			debounce(
+				(isTaller: boolean) => {
+					// Don't auto-scroll if the user is actively expanding/collapsing content
+					// This prevents scroll conflicts when user manually expands the last message
+					// or expands Markdown content
+					if (userExpandingRef.current || markdownExpandingRef.current) {
+						return
+					}
 
-			if (isAtBottom) {
-				if (isTaller) {
-					scrollToBottomSmooth()
-				} else {
-					setTimeout(() => scrollToBottomAuto(), 0)
-				}
-			}
-		},
+					if (isAtBottom) {
+						if (isTaller) {
+							scrollToBottomSmooth()
+						} else {
+							setTimeout(() => scrollToBottomAuto(), 0)
+						}
+					}
+				},
+				100, // 50ms debounce to batch rapid height changes
+				{ immediate: false },
+			),
 		[scrollToBottomSmooth, scrollToBottomAuto, isAtBottom],
 	)
 

webview-ui/src/components/chat/ReasoningBlock.tsx

@@ -57,12 +57,7 @@ export const ReasoningBlock = ({ content, isStreaming, isLast }: ReasoningBlockP
 					)}
 				</div>
 				<div className="flex items-center gap-2">
-					<ChevronUp
-						className={cn(
-							"w-4 transition-all opacity-0 group-hover:opacity-100",
-							isCollapsed && "-rotate-180",
-						)}
-					/>
+					<ChevronUp className={cn("w-4 transition-all", isCollapsed && "-rotate-180")} />
 				</div>
 			</div>
 			{(content?.trim()?.length ?? 0) > 0 && !isCollapsed && (

webview-ui/src/components/common/CodeBlock.tsx

@@ -1,6 +1,7 @@
 import { memo, useEffect, useRef, useCallback, useState } from "react"
 import styled from "styled-components"
 import { useCopyToClipboard } from "@src/utils/clipboard"
+import { useDebounceEffect } from "@src/utils/useDebounceEffect"
 import { getHighlighter, isLanguageLoaded, normalizeLanguage } from "@src/utils/highlighter"
 import type { ShikiTransformer } from "shiki"
 import { toJsxRuntime } from "hast-util-to-jsx-runtime"
@@ -290,14 +291,19 @@ const CodeBlock = memo(
 		}, [source, currentLanguage, collapsedHeight])
 
 		// Check if content height exceeds collapsed height whenever content changes
-		useEffect(() => {
-			const codeBlock = codeBlockRef.current
+		// Debounced to avoid excessive DOM measurements during rapid scrolling
+		useDebounceEffect(
+			() => {
+				const codeBlock = codeBlockRef.current
 
-			if (codeBlock) {
-				const actualHeight = codeBlock.scrollHeight
-				setShowCollapseButton(actualHeight >= WINDOW_SHADE_SETTINGS.collapsedHeight)
-			}
-		}, [highlightedCode])
+				if (codeBlock) {
+					const actualHeight = codeBlock.scrollHeight
+					setShowCollapseButton(actualHeight >= WINDOW_SHADE_SETTINGS.collapsedHeight)
+				}
+			},
+			100, // 100ms debounce delay
+			[highlightedCode],
+		)
 
 		// Ref to track if user was scrolled up *before* the source update
 		// potentially changes scrollHeight
@@ -658,29 +664,18 @@ const CodeBlock = memo(
 								side="top">
 								<CodeBlockButton
 									onClick={() => {
-										// Get the current code block element
-										const codeBlock = codeBlockRef.current // Capture ref early
 										// Toggle window shade state
 										setWindowShade(!windowShade)
 
 										// Clear any previous timeouts
 										if (collapseTimeout1Ref.current) clearTimeout(collapseTimeout1Ref.current)
 										if (collapseTimeout2Ref.current) clearTimeout(collapseTimeout2Ref.current)
 
-										// After UI updates, ensure code block is visible and update button position
+										// After UI transition completes, update button position
+										// Let ChatView/Virtuoso handle scrolling to avoid conflicts
 										collapseTimeout1Ref.current = setTimeout(
 											() => {
-												if (codeBlock) {
-													// Check if codeBlock element still exists
-													codeBlock.scrollIntoView({ behavior: "smooth", block: "nearest" })
-
-													// Wait for scroll to complete before updating button position
-													collapseTimeout2Ref.current = setTimeout(() => {
-														// updateCodeBlockButtonPosition itself should also check for refs if needed
-														updateCodeBlockButtonPosition()
-														collapseTimeout2Ref.current = null
-													}, 50)
-												}
+												updateCodeBlockButtonPosition()
 												collapseTimeout1Ref.current = null
 											},
 											WINDOW_SHADE_SETTINGS.transitionDelayS * 1000 + 50,