'use client';
import { cn } from '@/lib/utils';
import { ChatList } from '@/components/chat/ChatList';
import { ChatPanel } from '@/components/chat/ChatPanel';
import { ChatScrollAnchor } from '@/components/chat/ChatScrollAnchor';
import ImageList from './ImageList';
import useChatWithDataset from '../../lib/hooks/useChatWithDataset';

export interface ChatProps extends React.ComponentProps<'div'> {
	id?: string;
}

export function Chat({ id, className }: ChatProps) {
	const { messages, append, reload, stop, isLoading, input, setInput } =
		useChatWithDataset();

	return (
		<>
			<div className={cn('pb-[150px] pt-4 md:pt-10 h-full', className)}>
				<div className="flex h-full">
					<div className="w-1/2 relative border-r-2 border-gray-300 overflow-auto">
						<ImageList />
					</div>
					<div className="w-1/2 relative overflow-auto">
						<ChatList messages={messages} />
						<ChatScrollAnchor trackVisibility={isLoading} />
					</div>
				</div>
			</div>
			<ChatPanel
				id={id}
				isLoading={isLoading}
				stop={stop}
				append={append}
				reload={reload}
				messages={messages}
				input={input}
				setInput={setInput}
			/>
		</>
	);
}