fix: reduce chat transcript pre-rendering

Author: taltas

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

@@ -56,6 +56,11 @@ export interface ChatViewRef {
 }
 
 export const MAX_IMAGES_PER_MESSAGE = 20 // This is the Anthropic limit.
+const CHAT_DEFAULT_ITEM_HEIGHT = 180
+const CHAT_VIEWPORT_BUFFER = {
+	top: 600,
+	bottom: 800,
+} as const
 
 const isMac = navigator.platform.toUpperCase().indexOf("MAC") >= 0
 
@@ -1476,6 +1481,8 @@ const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewPro
 		],
 	)
 
+	const computeMessageKey = useCallback((_index: number, messageOrGroup: ClineMessage) => messageOrGroup.ts, [])
+
 	// Function to handle mode switching
 	const switchToNextMode = useCallback(() => {
 		const allModes = getAllModes(customModes)
@@ -1635,7 +1642,9 @@ const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewPro
 							ref={virtuosoRef}
 							key={task.ts}
 							className="scrollable grow overflow-y-scroll mb-1"
-							increaseViewportBy={{ top: 3_000, bottom: 1000 }}
+							computeItemKey={computeMessageKey}
+							defaultItemHeight={CHAT_DEFAULT_ITEM_HEIGHT}
+							increaseViewportBy={CHAT_VIEWPORT_BUFFER}
 							data={groupedMessages}
 							itemContent={itemContent}
 							followOutput={followOutputCallback}

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

@@ -9,6 +9,14 @@ import { vscode } from "@src/utils/vscode"
 
 import ChatView, { ChatViewProps } from "../ChatView"
 
+const mockVirtuosoState = vi.hoisted(() => ({
+	lastConfig: null as {
+		computeItemKey?: (index: number, item: ClineMessage) => React.Key
+		defaultItemHeight?: number
+		increaseViewportBy?: number | { top?: number; bottom?: number }
+	} | null,
+}))
+
 // Define minimal types needed for testing
 interface ClineMessage {
 	type: "say" | "ask"
@@ -61,14 +69,26 @@ vi.mock("react-virtuoso", () => ({
 	Virtuoso: function MockVirtuoso({
 		data,
 		itemContent,
+		computeItemKey,
+		defaultItemHeight,
+		increaseViewportBy,
 	}: {
 		data: ClineMessage[]
 		itemContent: (index: number, item: ClineMessage) => React.ReactNode
+		computeItemKey?: (index: number, item: ClineMessage) => React.Key
+		defaultItemHeight?: number
+		increaseViewportBy?: number | { top?: number; bottom?: number }
 	}) {
+		mockVirtuosoState.lastConfig = {
+			computeItemKey,
+			defaultItemHeight,
+			increaseViewportBy,
+		}
+
 		return (
 			<div data-testid="virtuoso-item-list">
 				{data.map((item, index) => (
-					<div key={item.ts} data-testid={`virtuoso-item-${index}`}>
+					<div key={computeItemKey?.(index, item) ?? item.ts} data-testid={`virtuoso-item-${index}`}>
 						{itemContent(index, item)}
 					</div>
 				))}
@@ -454,6 +474,45 @@ describe("ChatView - Sound Playing Tests", () => {
 	})
 })
 
+describe("ChatView - Virtualization Configuration", () => {
+	beforeEach(() => {
+		vi.clearAllMocks()
+		mockVirtuosoState.lastConfig = null
+	})
+
+	it("keeps the off-screen render buffer tight for chat rows", async () => {
+		renderChatView()
+
+		const taskTs = Date.now() - 100
+		const rowTs = Date.now()
+
+		mockPostMessage({
+			clineMessages: [
+				{
+					type: "say",
+					say: "task",
+					ts: taskTs,
+					text: "Initial task",
+				},
+				{
+					type: "say",
+					say: "text",
+					ts: rowTs,
+					text: "Visible row",
+				},
+			],
+		})
+
+		await waitFor(() => {
+			expect(mockVirtuosoState.lastConfig).not.toBeNull()
+		})
+
+		expect(mockVirtuosoState.lastConfig?.defaultItemHeight).toBe(180)
+		expect(mockVirtuosoState.lastConfig?.increaseViewportBy).toEqual({ top: 600, bottom: 800 })
+		expect(mockVirtuosoState.lastConfig?.computeItemKey?.(1, { type: "say", ts: rowTs })).toBe(rowTs)
+	})
+})
+
 describe("ChatView - Focus Grabbing Tests", () => {
 	beforeEach(() => vi.clearAllMocks())