get rid of virtualization (#263)

Author: jonathanlab

apps/array/src/renderer/features/sessions/components/ConversationView.tsx

@@ -11,7 +11,7 @@ import {
   isJsonRpcRequest,
   isJsonRpcResponse,
 } from "@shared/types/session-events";
-import { memo, useMemo } from "react";
+import { memo, useEffect, useMemo, useRef } from "react";
 import { GitActionMessage, parseGitActionMessage } from "./GitActionMessage";
 import { GitActionResult } from "./GitActionResult";
 import { SessionFooter } from "./SessionFooter";
@@ -20,7 +20,6 @@ import {
   SessionUpdateView,
 } from "./session-update/SessionUpdateView";
 import { UserMessage } from "./session-update/UserMessage";
-import { VirtualizedList } from "./VirtualizedList";
 
 interface Turn {
   id: string;
@@ -46,32 +45,41 @@ export function ConversationView({
   repoPath,
   isCloud = false,
 }: ConversationViewProps) {
+  const scrollRef = useRef<HTMLDivElement>(null);
   const turns = useMemo(() => buildTurns(events), [events]);
   const lastTurn = turns[turns.length - 1];
   const lastTurnComplete = lastTurn?.isComplete ?? true;
 
+  useEffect(() => {
+    const el = scrollRef.current;
+    if (el) {
+      el.scrollTop = el.scrollHeight;
+    }
+  }, []);
+
   return (
-    <VirtualizedList
-      items={turns}
-      estimateSize={200}
-      overscan={3}
-      getItemKey={(turn) => turn.id}
-      renderItem={(turn) => (
-        <TurnView turn={turn} repoPath={repoPath} isCloud={isCloud} />
-      )}
-      autoScrollToBottom
-      className="flex-1 bg-blackA-5 p-2 pb-16"
-      gap={12}
-      footer={
-        <SessionFooter
-          isPromptPending={isPromptPending || !lastTurnComplete}
-          lastGenerationDuration={
-            lastTurn?.isComplete ? lastTurn.durationMs : null
-          }
-          lastStopReason={lastTurn?.stopReason}
-        />
-      }
-    />
+    <div
+      ref={scrollRef}
+      className="scrollbar-hide flex-1 overflow-auto bg-blackA-5 p-2 pb-16"
+    >
+      <div className="flex flex-col gap-3">
+        {turns.map((turn) => (
+          <TurnView
+            key={turn.id}
+            turn={turn}
+            repoPath={repoPath}
+            isCloud={isCloud}
+          />
+        ))}
+      </div>
+      <SessionFooter
+        isPromptPending={isPromptPending || !lastTurnComplete}
+        lastGenerationDuration={
+          lastTurn?.isComplete ? lastTurn.durationMs : null
+        }
+        lastStopReason={lastTurn?.stopReason}
+      />
+    </div>
   );
 }
 

apps/array/src/renderer/features/sessions/components/VirtualizedList.tsx

@@ -1,5 +1,5 @@
 import { useVirtualizer } from "@tanstack/react-virtual";
-import { type ReactNode, useEffect, useLayoutEffect, useRef } from "react";
+import { type ReactNode, useEffect, useRef } from "react";
 
 interface VirtualizedListProps<T> {
   items: T[];
@@ -25,8 +25,6 @@ export function VirtualizedList<T>({
   footer,
 }: VirtualizedListProps<T>) {
   const scrollRef = useRef<HTMLDivElement>(null);
-  const isAtBottomRef = useRef(true);
-  const isInitialMountRef = useRef(true);
 
   const virtualizer = useVirtualizer({
     count: items.length,
@@ -40,91 +38,43 @@ export function VirtualizedList<T>({
   });
 
   useEffect(() => {
-    const el = scrollRef.current;
-    if (!el) return;
-
-    let ticking = false;
-    const handleScroll = () => {
-      if (ticking) return;
-      ticking = true;
-      requestAnimationFrame(() => {
-        const threshold = 50;
-        isAtBottomRef.current =
-          el.scrollHeight - el.scrollTop - el.clientHeight < threshold;
-        ticking = false;
-      });
-    };
-
-    el.addEventListener("scroll", handleScroll, { passive: true });
-    return () => el.removeEventListener("scroll", handleScroll);
-  }, []);
-
-  useLayoutEffect(() => {
-    const el = scrollRef.current;
-    if (!el || !autoScrollToBottom || items.length === 0) {
-      return;
-    }
-
-    if (isInitialMountRef.current) {
-      isInitialMountRef.current = false;
-      el.scrollTop = el.scrollHeight;
-      return;
-    }
-  }, [autoScrollToBottom, items.length]);
-
-  useLayoutEffect(() => {
-    const el = scrollRef.current;
-    if (
-      !el ||
-      !autoScrollToBottom ||
-      items.length === 0 ||
-      isInitialMountRef.current ||
-      !isAtBottomRef.current
-    ) {
-      return;
+    if (autoScrollToBottom && items.length > 0) {
+      virtualizer.scrollToIndex(items.length - 1, { align: "end" });
     }
-
-    el.scrollTop = el.scrollHeight;
-  }, [autoScrollToBottom, items]);
+  }, [autoScrollToBottom, items.length, virtualizer]);
 
   const virtualItems = virtualizer.getVirtualItems();
 
   return (
     <div
       ref={scrollRef}
       className={`${className} scrollbar-hide`}
-      style={{
-        height: "100%",
-        overflow: "auto",
-        scrollBehavior: "auto",
-      }}
+      style={{ height: "100%", overflow: "auto" }}
     >
-      {items.length > 0 && (
-        <div
-          style={{
-            height: virtualizer.getTotalSize(),
-            width: "100%",
-            position: "relative",
-          }}
-        >
-          {virtualItems.map((virtualRow) => (
-            <div
-              key={virtualRow.key}
-              ref={virtualizer.measureElement}
-              data-index={virtualRow.index}
-              style={{
-                position: "absolute",
-                top: 0,
-                left: 0,
-                width: "100%",
-                transform: `translateY(${virtualRow.start}px)`,
-              }}
-            >
-              {renderItem(items[virtualRow.index], virtualRow.index)}
-            </div>
-          ))}
-        </div>
-      )}
+      <div
+        style={{
+          height: virtualizer.getTotalSize(),
+          width: "100%",
+          position: "relative",
+        }}
+      >
+        {virtualItems.map((virtualRow) => (
+          <div
+            key={virtualRow.key}
+            ref={virtualizer.measureElement}
+            data-index={virtualRow.index}
+            style={{
+              position: "absolute",
+              top: 0,
+              left: 0,
+              width: "100%",
+              transform: `translateY(${virtualRow.start}px)`,
+            }}
+          >
+            {renderItem(items[virtualRow.index], virtualRow.index)}
+          </div>
+        ))}
+      </div>
       {footer}
     </div>
   );