init state

app/(chat)/page.tsx

@@ -1,9 +1,22 @@
+'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 (
 		<>

components/chat.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import { useChat, type Message } from 'ai/react';
 import '@/app/globals.css';
 
@@ -24,8 +22,6 @@ export interface ChatProps extends React.ComponentProps<'div'> {
 }
 
 export function Chat({ id, initialMessages, className }: ChatProps) {
-	const router = useRouter();
-	const path = usePathname();
 	const [targetImage, setTargetImage] = useAtom(targetImageAtom);
 	const { messages, append, reload, stop, isLoading, input, setInput } =
 		useChat({
@@ -42,12 +38,6 @@ export function Chat({ id, initialMessages, className }: ChatProps) {
 			},
 		});
 
-	if (!targetImage)
-		return (
-			<div className={cn('pb-[150px] pt-4 md:pt-10 h-full', className)}>
-				<EmptyScreen />
-			</div>
-		);
 	return (
 		<>
 			<div className={cn('pb-[150px] pt-4 md:pt-10 h-full', className)}>
@@ -56,7 +46,7 @@ export function Chat({ id, initialMessages, className }: ChatProps) {
 						<div className="relative aspect-[1/1] w-full px-12">
 							<div className="flex items-center h-[600px] relative">
 								<Image
-									src={targetImage}
+									src={targetImage!}
 									alt="target image"
 									layout="fill"
 									objectFit="contain"