From c8635a1bdb87f6cc2a0f55295d481c71edb12a62 Mon Sep 17 00:00:00 2001
From: Andrew Pareles <andrewpareles@gmail.com>
Date: Wed, 22 Jan 2025 16:02:34 -0800
Subject: [PATCH] memo previous chat messages as we stream (important)

---
 .../browser/react/src/sidebar-tsx/SidebarChat.tsx   | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/SidebarChat.tsx b/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/SidebarChat.tsx
index 00092d47..357d911c 100644
--- a/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/SidebarChat.tsx
+++ b/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/SidebarChat.tsx
@@ -3,7 +3,7 @@
  *  Licensed under the Apache License, Version 2.0. See LICENSE.txt for more information.
  *--------------------------------------------------------------------------------------*/
 
-import React, { ButtonHTMLAttributes, FormEvent, FormHTMLAttributes, Fragment, useCallback, useEffect, useRef, useState } from 'react';
+import React, { ButtonHTMLAttributes, FormEvent, FormHTMLAttributes, Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 
 import { useAccessor, useSidebarState, useChatThreadsState, useChatThreadsStreamState, useUriState } from '../util/services.js';
@@ -605,6 +605,13 @@ export const SidebarChat = () => {
 			scrollContainerRef.current?.scrollTo({ top: 0, left: 0 })
 	}, [isHistoryOpen, currentThread.id])
 
+
+	const prevMessagesHTML = useMemo(() => {
+		return previousMessages.map((message, i) =>
+			<ChatBubble key={i} chatMessage={message} />
+		)
+	}, [previousMessages])
+
 	return <div
 		ref={sidebarRef}
 		className={`w-full h-full`}
@@ -628,9 +635,7 @@ export const SidebarChat = () => {
 			style={{ maxHeight: sidebarDimensions.height - historyDimensions.height - formDimensions.height - 36 }} // the height of the previousMessages is determined by all other heights
 		>
 			{/* previous messages */}
-			{previousMessages.map((message, i) =>
-				<ChatBubble key={i} chatMessage={message} />
-			)}
+			{prevMessagesHTML}
 
 			{/* message stream */}
 			<ChatBubble chatMessage={{ role: 'assistant', content: messageSoFar ?? '', displayContent: messageSoFar || null }} isLoading={isStreaming} />