feat(ui): Introduce useUI Hook and UIContext (#5488)

Co-authored-by: Jacob Richman <jacob314@gmail.com>
2026-04-26 13:04:49 -07:00 · 2025-09-06 01:39:02 -04:00
parent fe15b04f33
commit 885af07ddb
40 changed files with 3443 additions and 3388 deletions
@@ -0,0 +1,64 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { Box, Static } from 'ink';
+import { HistoryItemDisplay } from './HistoryItemDisplay.js';
+import { ShowMoreLines } from './ShowMoreLines.js';
+import { OverflowProvider } from '../contexts/OverflowContext.js';
+import { useUIState } from '../contexts/UIStateContext.js';
+import { useAppContext } from '../contexts/AppContext.js';
+import { AppHeader } from './AppHeader.js';
+
+export const MainContent = () => {
+  const { version } = useAppContext();
+  const uiState = useUIState();
+  const {
+    pendingHistoryItems,
+    mainAreaWidth,
+    staticAreaMaxItemHeight,
+    availableTerminalHeight,
+  } = uiState;
+
+  return (
+    <>
+      <Static
+        key={uiState.historyRemountKey}
+        items={[
+          <AppHeader key="app-header" version={version} />,
+          ...uiState.history.map((h) => (
+            <HistoryItemDisplay
+              terminalWidth={mainAreaWidth}
+              availableTerminalHeight={staticAreaMaxItemHeight}
+              key={h.id}
+              item={h}
+              isPending={false}
+              commands={uiState.slashCommands}
+            />
+          )),
+        ]}
+      >
+        {(item) => item}
+      </Static>
+      <OverflowProvider>
+        <Box flexDirection="column">
+          {pendingHistoryItems.map((item, i) => (
+            <HistoryItemDisplay
+              key={i}
+              availableTerminalHeight={
+                uiState.constrainHeight ? availableTerminalHeight : undefined
+              }
+              terminalWidth={mainAreaWidth}
+              item={{ ...item, id: 0 }}
+              isPending={true}
+              isFocused={!uiState.isEditorDialogOpen}
+            />
+          ))}
+          <ShowMoreLines constrainHeight={uiState.constrainHeight} />
+        </Box>
+      </OverflowProvider>
+    </>
+  );
+};