app/(chat)/page.tsx

'use client';

import { nanoid } from '@/lib/utils';
import { Chat } from '@/components/chat';
import { ThemeToggle } from '../../components/theme-toggle';
import { useAtomValue } from 'jotai';
import { targetImageAtom } from '../../state';
import { EmptyScreen } from '../../components/empty-screen';

export default function IndexPage() {
	const id = nanoid();
	const targetImage = useAtomValue(targetImageAtom);

	if (!targetImage)
		return (
			<div className="pb-[150px] pt-4 md:pt-10 h-full">
				<EmptyScreen />
			</div>
		);

	return (
		<>
			<Chat
				id={id}
				initialMessages={[
					{
						id: '123',
						content: 'Hi, what do you want to know about this image?',
						role: 'system',
					},
				]}
			/>
			<ThemeToggle />
		</>
	);
}