Function VirtualMessageList

src/components/VirtualMessageList.tsx:271–499

({
  messages,
  scrollRef,
  columns,
  itemKey,
  renderItem,
  onItemClick,
  isItemClickable,
  isItemExpanded,
  extractSearchText = defaultExtractSearchText,
  trackStickyPrompt,
  selectedIndex,
  cursorNavRef,
  setCursor,
  jumpRef,
  onSearchMatchesChange,
  scanElement,
  setPositions
}: Props)

  return t10;
}
export function VirtualMessageList({
  messages,
  scrollRef,
  columns,
  itemKey,
  renderItem,
  onItemClick,
  isItemClickable,
  isItemExpanded,
  extractSearchText = defaultExtractSearchText,
  trackStickyPrompt,
  selectedIndex,
  cursorNavRef,
  setCursor,
  jumpRef,
  onSearchMatchesChange,
  scanElement,
  setPositions
}: Props): React.ReactNode {
  recordRenderTrace('VirtualMessageList');
  const stickyPromptPredecessorRef = useRef<StickyPromptPredecessorState>();
  // Incremental key array. Streaming appends one message at a time; rebuilding
  // the full string array on every commit allocates O(n) per message (~1MB
  // churn at 27k messages). Append-only delta push when the prefix matches;
  // fall back to full rebuild on compaction, /clear, or itemKey change.
  const keysRef = useRef<string[]>([]);
  const prevMessagesRef = useRef<typeof messages>(messages);
  const prevItemKeyRef = useRef(itemKey);
  if (prevItemKeyRef.current !== itemKey || messages.length < keysRef.current.length || messages[0] !== prevMessagesRef.current[0]) {
    keysRef.current = messages.map(m => itemKey(m));
  } else {
    for (let i = keysRef.current.length; i < messages.length; i++) {
      keysRef.current.push(itemKey(messages[i]!));
    }
  }
  prevMessagesRef.current = messages;
  prevItemKeyRef.current = itemKey;
  const keys = keysRef.current;
  const stickyPromptPredecessors = useMemo(() => {
    const next = computeStickyPromptPredecessors(messages, stickyPromptPredecessorRef.current);
    stickyPromptPredecessorRef.current = next;
    return next.previousStickyPromptIndex;
  }, [messages]);
  const estimatedHeightCacheRef = useRef(new Map<number, WeakMap<RenderableMessage, number>>());
  const estimateItemHeight = useCallback((index: number) => {
    const msg = messages[index];
    if (!msg) return undefined;
    let cacheByColumns = estimatedHeightCacheRef.current.get(columns);
    if (!cacheByColumns) {
      cacheByColumns = new WeakMap<RenderableMessage, number>();
      estimatedHeightCacheRef.current.set(columns, cacheByColumns);
    }
    const cached = cacheByColumns.get(msg);
    if (cached !== undefined) return cached;

    // Transcript entry is the long-history hotspot. A cheap per-message row
    // estimate is enough to avoid mounting a fixed 24-30 giant code-fence
    // messages before Yoga has measured the tail.