'use client';

import { Separator } from '@/components/ui/Separator';
import { ChatMessage } from '@/components/chat/ChatMessage';
import { MessageWithSelectedDataset } from '../../lib/types';

export interface ChatList {
	messages: MessageWithSelectedDataset[];
}

export function ChatList({ messages }: ChatList) {
	return (
		<div className="relative mx-auto max-w-3xl px-8 pr-12">
			{messages
				.filter(message => message.role !== 'system')
				.map((message, index) => (
					<div key={index}>
						<ChatMessage message={message} />
						{index < messages.length - 1 && (
							<Separator className="my-4 md:my-8" />
						)}
					</div>
				))}
		</div>
	);
}