77 lines
2.3 KiB
TypeScript
77 lines
2.3 KiB
TypeScript
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);
|