William Valentin
59 lines
1.9 KiB
TypeScript
59 lines
1.9 KiB
TypeScript
import React from 'react';
|
|
import { Box, Text } from 'ink';
|
|
import type { Message } from '../../../models/types.js';
|
|
import { renderMarkdown } from '../markdown.js';
|
|
|
|
export interface MessageListProps {
|
|
messages: Message[];
|
|
scrollOffset?: number;
|
|
streamingContent?: string;
|
|
}
|
|
|
|
export function MessageList({
|
|
messages,
|
|
scrollOffset = 0,
|
|
streamingContent,
|
|
}: MessageListProps): React.ReactElement {
|
|
// Calculate visible area (approximate, Ink handles overflow)
|
|
const visibleMessages = messages.slice(scrollOffset);
|
|
|
|
return (
|
|
<Box flexDirection="column" flexGrow={1} paddingX={1} overflowY="hidden">
|
|
{visibleMessages.length === 0 && !streamingContent ? (
|
|
<Text color="gray">No messages yet. Start typing to chat with Flynn.</Text>
|
|
) : (
|
|
<>
|
|
{visibleMessages.map((message, index) => (
|
|
<Box key={`${scrollOffset + index}-${message.role}`} marginBottom={1} flexDirection="column">
|
|
<Text color={message.role === 'user' ? 'blue' : 'green'} bold>
|
|
{message.role === 'user' ? 'You:' : 'Flynn:'}
|
|
</Text>
|
|
<Box marginLeft={1}>
|
|
<Text wrap="wrap">
|
|
{message.role === 'assistant'
|
|
? renderMarkdown(message.content)
|
|
: message.content}
|
|
</Text>
|
|
</Box>
|
|
</Box>
|
|
))}
|
|
{streamingContent && (
|
|
<Box marginBottom={1} flexDirection="column">
|
|
<Text color="green" bold>Flynn:</Text>
|
|
<Box marginLeft={1}>
|
|
<Text wrap="wrap">{streamingContent}</Text>
|
|
<Text color="yellow">|</Text>
|
|
</Box>
|
|
</Box>
|
|
)}
|
|
</>
|
|
)}
|
|
{messages.length > 0 && scrollOffset > 0 && (
|
|
<Box position="absolute" marginTop={-1}>
|
|
<Text color="gray">{scrollOffset} more above</Text>
|
|
</Box>
|
|
)}
|
|
</Box>
|
|
);
|
|
}
|