/** * @license * Copyright 2025 Google LLC * SPDX-License-Identifier: Apache-2.0 */ import { Box, Static } from 'ink'; import { HistoryItemDisplay } from './HistoryItemDisplay.js'; import { useUIState } from '../contexts/UIStateContext.js'; import { useAppContext } from '../contexts/AppContext.js'; import { AppHeader } from './AppHeader.js'; import { useAlternateBuffer } from '../hooks/useAlternateBuffer.js'; import { SCROLL_TO_ITEM_END, type VirtualizedListRef, } from './shared/VirtualizedList.js'; import { ScrollableList } from './shared/ScrollableList.js'; import { useMemo, memo, useCallback, useEffect, useRef } from 'react'; import { MAX_GEMINI_MESSAGE_LINES } from '../constants.js'; import { useConfirmingTool } from '../hooks/useConfirmingTool.js'; import { ToolConfirmationQueue } from './ToolConfirmationQueue.js'; const MemoizedHistoryItemDisplay = memo(HistoryItemDisplay); const MemoizedAppHeader = memo(AppHeader); // Limit Gemini messages to a very high number of lines to mitigate performance // issues in the worst case if we somehow get an enormous response from Gemini. // This threshold is arbitrary but should be high enough to never impact normal // usage. export const MainContent = () => { const { version } = useAppContext(); const uiState = useUIState(); const isAlternateBuffer = useAlternateBuffer(); const confirmingTool = useConfirmingTool(); const showConfirmationQueue = confirmingTool !== null; const confirmingToolCallId = confirmingTool?.tool.callId; const scrollableListRef = useRef>(null); useEffect(() => { if (showConfirmationQueue) { scrollableListRef.current?.scrollToEnd(); } }, [showConfirmationQueue, confirmingToolCallId]); const { pendingHistoryItems, mainAreaWidth, staticAreaMaxItemHeight, cleanUiDetailsVisible, } = uiState; const showHeaderDetails = cleanUiDetailsVisible; const lastUserPromptIndex = useMemo(() => { for (let i = uiState.history.length - 1; i >= 0; i--) { const type = uiState.history[i].type; if (type === 'user' || type === 'user_shell') { return i; } } return -1; }, [uiState.history]); const augmentedHistory = useMemo( () => uiState.history.map((item, index) => { const isExpandable = index > lastUserPromptIndex; const prevType = index > 0 ? uiState.history[index - 1]?.type : undefined; const isFirstThinking = item.type === 'thinking' && prevType !== 'thinking'; const isFirstAfterThinking = item.type !== 'thinking' && prevType === 'thinking'; return { item, isExpandable, isFirstThinking, isFirstAfterThinking, }; }), [uiState.history, lastUserPromptIndex], ); const historyItems = useMemo( () => augmentedHistory.map( ({ item, isExpandable, isFirstThinking, isFirstAfterThinking }) => ( ), ), [ augmentedHistory, mainAreaWidth, staticAreaMaxItemHeight, uiState.slashCommands, uiState.constrainHeight, ], ); const staticHistoryItems = useMemo( () => historyItems.slice(0, lastUserPromptIndex + 1), [historyItems, lastUserPromptIndex], ); const lastResponseHistoryItems = useMemo( () => historyItems.slice(lastUserPromptIndex + 1), [historyItems, lastUserPromptIndex], ); const pendingItems = useMemo( () => ( {pendingHistoryItems.map((item, i) => { const prevType = i === 0 ? uiState.history.at(-1)?.type : pendingHistoryItems[i - 1]?.type; const isFirstThinking = item.type === 'thinking' && prevType !== 'thinking'; const isFirstAfterThinking = item.type !== 'thinking' && prevType === 'thinking'; return ( ); })} {showConfirmationQueue && confirmingTool && ( )} ), [ pendingHistoryItems, uiState.constrainHeight, staticAreaMaxItemHeight, mainAreaWidth, showConfirmationQueue, confirmingTool, uiState.history, ], ); const virtualizedData = useMemo( () => [ { type: 'header' as const }, ...augmentedHistory.map( ({ item, isExpandable, isFirstThinking, isFirstAfterThinking }) => ({ type: 'history' as const, item, isExpandable, isFirstThinking, isFirstAfterThinking, }), ), { type: 'pending' as const }, ], [augmentedHistory], ); const renderItem = useCallback( ({ item }: { item: (typeof virtualizedData)[number] }) => { if (item.type === 'header') { return ( ); } else if (item.type === 'history') { return ( ); } else { return pendingItems; } }, [ showHeaderDetails, version, mainAreaWidth, uiState.slashCommands, pendingItems, uiState.constrainHeight, staticAreaMaxItemHeight, ], ); if (isAlternateBuffer) { return ( 100} keyExtractor={(item, _index) => { if (item.type === 'header') return 'header'; if (item.type === 'history') return item.item.id.toString(); return 'pending'; }} initialScrollIndex={SCROLL_TO_ITEM_END} initialScrollOffsetInIndex={SCROLL_TO_ITEM_END} /> ); } return ( <> , ...staticHistoryItems, ...lastResponseHistoryItems, ]} > {(item) => item} {pendingItems} ); };