virtualize chat history (#2272)

* virtualize chat history

* rm space

* refactor

---------

Co-authored-by: reynardoew <[email protected]>

Author: mintdart

src/containers/LlamaAI/components/ChatHistorySidebar.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useMemo, useRef } from 'react'
+import { useVirtualizer } from '@tanstack/react-virtual'
 import { Icon } from '~/components/Icon'
 import { LoadingSpinner } from '~/components/Loaders'
 import { Tooltip } from '~/components/Tooltip'
@@ -26,6 +27,10 @@ function getGroupName(lastActivity: string) {
 					: 'Older'
 }
 
+type VirtualItem =
+	| { type: 'header'; groupName: string; isFirst: boolean }
+	| { type: 'session'; session: ChatSession; groupName: string }
+
 export function ChatHistorySidebar({
 	handleSidebarToggle,
 	currentSessionId,
@@ -36,6 +41,7 @@ export function ChatHistorySidebar({
 	const { user } = useAuthContext()
 	const { sessions, isLoading } = useChatHistory()
 	const sidebarRef = useRef<HTMLDivElement>(null)
+	const scrollContainerRef = useRef<HTMLDivElement>(null)
 
 	const groupedSessions = useMemo(() => {
 		return Object.entries(
@@ -49,6 +55,30 @@ export function ChatHistorySidebar({
 		>
 	}, [sessions])
 
+	const virtualItems = useMemo(() => {
+		const items: VirtualItem[] = []
+		groupedSessions.forEach(([groupName, groupSessions], groupIndex) => {
+			items.push({ type: 'header', groupName, isFirst: groupIndex === 0 })
+			groupSessions.forEach((session) => {
+				items.push({ type: 'session', session, groupName })
+			})
+		})
+		return items
+	}, [groupedSessions])
+
+	const virtualizer = useVirtualizer({
+		count: virtualItems.length,
+		getScrollElement: () => scrollContainerRef.current,
+		estimateSize: (index) => {
+			const item = virtualItems[index]
+			if (item.type === 'header') {
+				return item.isFirst ? 20 : 32 // First header has less padding
+			}
+			return 32 // Session item height
+		},
+		overscan: 5
+	})
+
 	useEffect(() => {
 		const handleClickOutside = (event: MouseEvent) => {
 			// Check if event.target is a Node and if click is outside the sidebar
@@ -91,32 +121,56 @@ export function ChatHistorySidebar({
 				</button>
 			</div>
 
-			<div className="thin-scrollbar flex-1 overflow-auto p-4 pt-0">
+			<div ref={scrollContainerRef} className="thin-scrollbar flex-1 overflow-auto p-4 pt-0">
 				{isLoading ? (
 					<div className="flex items-center justify-center rounded-sm border border-dashed border-[#666]/50 p-4 text-center text-xs text-[#666] dark:border-[#919296]/50 dark:text-[#919296]">
 						<LoadingSpinner size={12} />
 					</div>
 				) : sessions.length === 0 ? (
 					<p className="rounded-sm border border-dashed border-[#666]/50 p-4 text-center text-xs text-[#666] dark:border-[#919296]/50 dark:text-[#919296]">
-						You don’t have any chats yet
+						You don't have any chats yet
 					</p>
 				) : (
-					<>
-						{groupedSessions.map(([groupName, sessions]) => (
-							<div key={groupName} className="group/parent flex flex-col gap-0.5">
-								<h2 className="pt-2.5 text-xs text-[#666] group-first/parent:pt-0 dark:text-[#919296]">{groupName}</h2>
-								{sessions.map((session) => (
-									<SessionItem
-										key={`${session.sessionId}-${session.isPublic}-${session.lastActivity}`}
-										session={session}
-										isActive={session.sessionId === currentSessionId}
-										onSessionSelect={onSessionSelect}
-										handleSidebarToggle={handleSidebarToggle}
-									/>
-								))}
-							</div>
-						))}
-					</>
+					<div
+						style={{
+							height: `${virtualizer.getTotalSize()}px`,
+							width: '100%',
+							position: 'relative'
+						}}
+					>
+						{virtualizer.getVirtualItems().map((virtualItem) => {
+							const item = virtualItems[virtualItem.index]
+							const style = {
+								position: 'absolute' as const,
+								top: 0,
+								left: 0,
+								width: '100%',
+								height: `${virtualItem.size}px`,
+								transform: `translateY(${virtualItem.start}px)`
+							}
+
+							if (item.type === 'header') {
+								return (
+									<div key={`header-${item.groupName}`} style={style}>
+										<h2 className={`text-xs text-[#666] dark:text-[#919296] ${item.isFirst ? 'pt-0' : 'pt-2.5'}`}>
+											{item.groupName}
+										</h2>
+									</div>
+								)
+							}
+
+							return (
+								<SessionItem
+									key={`session-${item.session.sessionId}-${item.session.isPublic}-${item.session.lastActivity}`}
+									session={item.session}
+									isActive={item.session.sessionId === currentSessionId}
+									onSessionSelect={onSessionSelect}
+									handleSidebarToggle={handleSidebarToggle}
+									style={style}
+								/>
+							)
+						})}
+					</div>
 				)}
 			</div>
 		</div>

src/containers/LlamaAI/components/SessionItem.tsx

@@ -15,9 +15,10 @@ interface SessionItemProps {
 	isActive: boolean
 	onSessionSelect: (sessionId: string, data: { conversationHistory: any[]; pagination?: any }) => void
 	handleSidebarToggle: () => void
+	style: React.CSSProperties
 }
 
-export function SessionItem({ session, isActive, onSessionSelect, handleSidebarToggle }: SessionItemProps) {
+export function SessionItem({ session, isActive, onSessionSelect, handleSidebarToggle, style }: SessionItemProps) {
 	const router = useRouter()
 	const { authorizedFetch } = useAuthContext()
 	const { deleteSession, updateSessionTitle, isRestoringSession, isDeletingSession, isUpdatingTitle } = useChatHistory()
@@ -95,6 +96,7 @@ export function SessionItem({ session, isActive, onSessionSelect, handleSidebarT
 				ref={formRef}
 				onSubmit={handleSave}
 				className="group relative -mx-1.5 flex items-center gap-0.5 rounded-sm text-xs hover:bg-[#f7f7f7] data-[active=true]:bg-(--old-blue) data-[active=true]:text-white dark:hover:bg-[#222324]"
+				style={style}
 			>
 				<input
 					type="text"
@@ -135,6 +137,7 @@ export function SessionItem({ session, isActive, onSessionSelect, handleSidebarT
 		<div
 			data-active={isActive}
 			className="group relative -mx-1.5 flex items-center rounded-sm text-xs focus-within:bg-[#f7f7f7] hover:bg-[#f7f7f7] data-[active=true]:bg-(--old-blue) data-[active=true]:text-white dark:focus-within:bg-[#222324] dark:hover:bg-[#222324]"
+			style={style}
 		>
 			<a
 				href={`/ai/${session.sessionId}`}

src/containers/LlamaAI/index.tsx

@@ -1075,7 +1075,7 @@ export function LlamaAI({ initialSessionId, sharedSession, readOnly = false, sho
 							<div className="mx-auto flex h-full w-full max-w-3xl flex-col gap-2.5">
 								<div className="mt-[100px] flex shrink-0 flex-col items-center justify-center gap-2.5 max-lg:mt-[50px]">
 									<img src="/icons/llama-ai.svg" alt="LlamaAI" className="object-contain" width={64} height={77} />
-									<h1 className="text-center text-2xl font-semibold">What can I help you with ?</h1>
+									<h1 className="text-center text-2xl font-semibold">What can I help you with?</h1>
 								</div>
 								{!readOnly && (
 									<>
@@ -1242,7 +1242,7 @@ export function LlamaAI({ initialSessionId, sharedSession, readOnly = false, sho
 									) : (
 										<div className="mt-[100px] flex flex-col items-center justify-center gap-2.5">
 											<img src="/icons/llama-ai.svg" alt="LlamaAI" className="object-contain" width={64} height={77} />
-											<h1 className="text-center text-2xl font-semibold">What can I help you with ?</h1>
+											<h1 className="text-center text-2xl font-semibold">What can I help you with?</h1>
 										</div>
 									)}
 								</div>