37 lines
956 B
TypeScript
37 lines
956 B
TypeScript
import { Box, Text } from "ink";
|
|
import { memo } from "react";
|
|
|
|
interface QueuedMessagesProps {
|
|
messages: string[];
|
|
}
|
|
|
|
export const QueuedMessages = memo(({ messages }: QueuedMessagesProps) => {
|
|
const maxDisplay = 5;
|
|
|
|
return (
|
|
<Box flexDirection="column" marginBottom={1}>
|
|
{messages.slice(0, maxDisplay).map((msg, index) => (
|
|
<Box key={`${index}-${msg.slice(0, 50)}`} flexDirection="row">
|
|
<Box width={2} flexShrink={0}>
|
|
<Text dimColor>{">"}</Text>
|
|
</Box>
|
|
<Box flexGrow={1}>
|
|
<Text dimColor>{msg}</Text>
|
|
</Box>
|
|
</Box>
|
|
))}
|
|
|
|
{messages.length > maxDisplay && (
|
|
<Box flexDirection="row">
|
|
<Box width={2} flexShrink={0} />
|
|
<Box flexGrow={1}>
|
|
<Text dimColor>...and {messages.length - maxDisplay} more</Text>
|
|
</Box>
|
|
</Box>
|
|
)}
|
|
</Box>
|
|
);
|
|
});
|
|
|
|
QueuedMessages.displayName = "QueuedMessages";
|