Initial commit

Signed-off-by: Ilan Bigio <ilan@openai.com>

codex-cli/src/components/chat/terminal-message-history.tsx

@@ -0,0 +1,76 @@
+import type { TerminalHeaderProps } from "./terminal-header.js";
+import type { GroupedResponseItem } from "./use-message-grouping.js";
+import type { ResponseItem } from "openai/resources/responses/responses.mjs";
+
+import TerminalChatResponseItem from "./terminal-chat-response-item.js";
+import TerminalHeader from "./terminal-header.js";
+import { Box, Static, Text } from "ink";
+import React, { useMemo } from "react";
+
+// A batch entry can either be a standalone response item or a grouped set of
+// items (e.g. auto‑approved tool‑call batches) that should be rendered
+// together.
+type BatchEntry = { item?: ResponseItem; group?: GroupedResponseItem };
+type MessageHistoryProps = {
+  batch: Array<BatchEntry>;
+  groupCounts: Record<string, number>;
+  items: Array<ResponseItem>;
+  userMsgCount: number;
+  confirmationPrompt: React.ReactNode;
+  loading: boolean;
+  thinkingSeconds: number;
+  headerProps: TerminalHeaderProps;
+  fullStdout: boolean;
+};
+
+const MessageHistory: React.FC<MessageHistoryProps> = ({
+  batch,
+  headerProps,
+  loading,
+  thinkingSeconds,
+  fullStdout,
+}) => {
+  const [messages, debug] = useMemo(
+    () => [batch.map(({ item }) => item!), process.env["DEBUG"]],
+    [batch],
+  );
+
+  return (
+    <Box flexDirection="column">
+      {loading && debug && (
+        <Box marginTop={1}>
+          <Text color="yellow">{`(${thinkingSeconds}s)`}</Text>
+        </Box>
+      )}
+      <Static items={["header", ...messages]}>
+        {(item, index) => {
+          if (item === "header") {
+            return <TerminalHeader key="header" {...headerProps} />;
+          }
+
+          // After the guard above `item` can only be a ResponseItem.
+          const message = item as ResponseItem;
+          return (
+            <Box
+              key={`${message.id}-${index}`}
+              flexDirection="column"
+              marginLeft={
+                message.type === "message" && message.role === "user" ? 0 : 4
+              }
+              marginTop={
+                message.type === "message" && message.role === "user" ? 0 : 1
+              }
+            >
+              <TerminalChatResponseItem
+                item={message}
+                fullStdout={fullStdout}
+              />
+            </Box>
+          );
+        }}
+      </Static>
+    </Box>
+  );
+};
+
+export default React.memo(MessageHistory);