fix(webview): resolve memory leak in ChatView by stabilizing callback props

- Stabilize handleSendMessage using clineAskRef to prevent frequent re-creation
- Stabilize toggleRowExpansion by extracting handleSetExpandedRow and managing dependencies
- Re-integrate scrolling logic into useEffect hook to avoid destabilizing callbacks
- Add everVisibleMessagesTsRef to reduce unnecessary ChatRow remounts by Virtuoso
- Update onToggleExpand signature to accept timestamp parameter for better stability
- Remove diagnostic console.log statements used for debugging callback changes

These changes address detached DOM elements memory leak caused by frequent
callback re-creation triggering unnecessary component re-renders and preventing
proper garbage collection of chat message DOM nodes.

Author: samhvw8

pnpm-lock.yaml

@@ -44,6 +44,7 @@
 		"i18next": "^24.2.2",
 		"i18next-http-backend": "^3.0.2",
 		"knuth-shuffle-seeded": "^1.0.6",
+		"lru-cache": "^11.1.0",
 		"lucide-react": "^0.510.0",
 		"mermaid": "^11.4.1",
 		"posthog-js": "^1.227.2",
@@ -67,8 +68,8 @@
 		"tailwindcss": "^4.0.0",
 		"tailwindcss-animate": "^1.0.7",
 		"unist-util-visit": "^5.0.0",
-		"vscode-material-icons": "^0.1.1",
 		"use-sound": "^5.0.0",
+		"vscode-material-icons": "^0.1.1",
 		"vscrui": "^0.2.2",
 		"zod": "^3.24.2"
 	},

webview-ui/package.json

@@ -42,7 +42,7 @@ interface ChatRowProps {
 	isExpanded: boolean
 	isLast: boolean
 	isStreaming: boolean
-	onToggleExpand: () => void
+	onToggleExpand: (ts: number) => void // Modified to accept timestamp
 	onHeightChange: (isTaller: boolean) => void
 	onSuggestionClick?: (answer: string, event?: React.MouseEvent) => void
 }
@@ -300,7 +300,7 @@ export const ChatRowContent = ({
 							progressStatus={message.progressStatus}
 							isLoading={message.partial}
 							isExpanded={isExpanded}
-							onToggleExpand={onToggleExpand}
+							onToggleExpand={() => onToggleExpand(message.ts)}
 						/>
 					</>
 				)
@@ -326,7 +326,7 @@ export const ChatRowContent = ({
 							progressStatus={message.progressStatus}
 							isLoading={message.partial}
 							isExpanded={isExpanded}
-							onToggleExpand={onToggleExpand}
+							onToggleExpand={() => onToggleExpand(message.ts)}
 						/>
 					</>
 				)
@@ -348,7 +348,7 @@ export const ChatRowContent = ({
 							progressStatus={message.progressStatus}
 							isLoading={message.partial}
 							isExpanded={isExpanded}
-							onToggleExpand={onToggleExpand}
+							onToggleExpand={() => onToggleExpand(message.ts)}
 						/>
 					</>
 				)
@@ -387,7 +387,7 @@ export const ChatRowContent = ({
 							language={getLanguageFromPath(tool.path || "") || "log"}
 							isLoading={message.partial}
 							isExpanded={isExpanded}
-							onToggleExpand={onToggleExpand}
+							onToggleExpand={() => onToggleExpand(message.ts)}
 						/>
 					</>
 				)
@@ -433,7 +433,7 @@ export const ChatRowContent = ({
 							language="markdown"
 							isLoading={message.partial}
 							isExpanded={isExpanded}
-							onToggleExpand={onToggleExpand}
+							onToggleExpand={() => onToggleExpand(message.ts)}
 						/>
 					</>
 				)
@@ -453,7 +453,7 @@ export const ChatRowContent = ({
 							code={tool.content}
 							language="shell-session"
 							isExpanded={isExpanded}
-							onToggleExpand={onToggleExpand}
+							onToggleExpand={() => onToggleExpand(message.ts)}
 						/>
 					</>
 				)
@@ -473,7 +473,7 @@ export const ChatRowContent = ({
 							code={tool.content}
 							language="shellsession"
 							isExpanded={isExpanded}
-							onToggleExpand={onToggleExpand}
+							onToggleExpand={() => onToggleExpand(message.ts)}
 						/>
 					</>
 				)
@@ -493,7 +493,7 @@ export const ChatRowContent = ({
 							code={tool.content}
 							language="markdown"
 							isExpanded={isExpanded}
-							onToggleExpand={onToggleExpand}
+							onToggleExpand={() => onToggleExpand(message.ts)}
 						/>
 					</>
 				)
@@ -523,7 +523,7 @@ export const ChatRowContent = ({
 							code={tool.content}
 							language="shellsession"
 							isExpanded={isExpanded}
-							onToggleExpand={onToggleExpand}
+							onToggleExpand={() => onToggleExpand(message.ts)}
 						/>
 					</>
 				)
@@ -811,7 +811,7 @@ export const ChatRowContent = ({
 									MozUserSelect: "none",
 									msUserSelect: "none",
 								}}
-								onClick={onToggleExpand}>
+								onClick={() => onToggleExpand(message.ts)}>
 								<div style={{ display: "flex", alignItems: "center", gap: "10px", flexGrow: 1 }}>
 									{icon}
 									{title}
@@ -850,7 +850,7 @@ export const ChatRowContent = ({
 										code={safeJsonParse<any>(message.text)?.request}
 										language="markdown"
 										isExpanded={true}
-										onToggleExpand={onToggleExpand}
+										onToggleExpand={() => onToggleExpand(message.ts)}
 									/>
 								</div>
 							)}
@@ -896,7 +896,7 @@ export const ChatRowContent = ({
 								language="diff"
 								isFeedback={true}
 								isExpanded={isExpanded}
-								onToggleExpand={onToggleExpand}
+								onToggleExpand={() => onToggleExpand(message.ts)}
 							/>
 						</div>
 					)
@@ -943,7 +943,7 @@ export const ChatRowContent = ({
 									code={message.text}
 									language="json"
 									isExpanded={true}
-									onToggleExpand={onToggleExpand}
+									onToggleExpand={() => onToggleExpand(message.ts)}
 								/>
 							</div>
 						</>
@@ -1103,7 +1103,7 @@ export const ChatRowContent = ({
 													code={useMcpServer.arguments}
 													language="json"
 													isExpanded={true}
-													onToggleExpand={onToggleExpand}
+													onToggleExpand={() => onToggleExpand(message.ts)}
 												/>
 											</div>
 										)}