46 lines
1.3 KiB
TypeScript
46 lines
1.3 KiB
TypeScript
|
import { React, h, Box, Text } from './plugins.js';
|
||
|
|
import { Message, type IChatMessage } from './components.message.js';
|
||
|
|
|
||
|
|
interface IMessageListProps {
|
||
|
|
messages: IChatMessage[];
|
||
|
|
streamingText: string;
|
||
|
|
busy: boolean;
|
||
|
|
}
|
||
|
|
|
||
|
|
export function MessageList({ messages, streamingText, busy }: IMessageListProps): React.ReactElement {
|
||
|
|
const children: React.ReactNode[] = [];
|
||
|
|
|
||
|
|
if (messages.length === 0 && !busy) {
|
||
|
|
children.push(
|
||
|
|
h(Box, { justifyContent: 'center', marginY: 1, key: 'empty' },
|
||
|
|
h(Text, { dimColor: true }, 'Type a message to start chatting.'),
|
||
|
|
),
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
for (let i = 0; i < messages.length; i++) {
|
||
|
|
children.push(h(Message, { key: `msg-${i}`, message: messages[i]! }));
|
||
|
|
}
|
||
|
|
|
||
|
|
if (busy && streamingText) {
|
||
|
|
children.push(
|
||
|
|
h(Box, { marginY: 0, key: 'streaming' },
|
||
|
|
h(Text, { bold: true, color: 'green' }, 'Assistant: '),
|
||
|
|
h(Text, null, streamingText),
|
||
|
|
h(Text, { dimColor: true }, '\u2588'),
|
||
|
|
),
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
if (busy && !streamingText) {
|
||
|
|
children.push(
|
||
|
|
h(Box, { marginY: 0, key: 'spinner' },
|
||
|
|
h(Text, { color: 'yellow' }, '\u25CF'),
|
||
|
|
h(Text, { dimColor: true }, ' Thinking...'),
|
||
|
|
),
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
return h(Box, { flexDirection: 'column' as const, flexGrow: 1 }, ...children);
|
||
|
|
}
|