components/chat.tsx

'use client';

import { useChat, type Message } from 'ai/react';
import '@/app/globals.css';

import { cn } from '@/lib/utils';
import { ChatList } from '@/components/chat-list';
import { ChatPanel } from '@/components/chat-panel';
import { EmptyScreen } from '@/components/empty-screen';
import { ChatScrollAnchor } from '@/components/chat-scroll-anchor';
import { useState } from 'react';
import { Button } from './ui/button';
import { Input } from './ui/input';
import { toast } from 'react-hot-toast';
import { usePathname, useRouter } from 'next/navigation';
import { useAtom } from 'jotai';
import { targetImageAtom } from '@/state';
import Image from 'next/image';
import { ThemeToggle } from './theme-toggle';

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

export function Chat({ id, initialMessages, className }: ChatProps) {
	const [targetImage, setTargetImage] = useAtom(targetImageAtom);
	const { messages, append, reload, stop, isLoading, input, setInput } =
		useChat({
			initialMessages,
			id,
			body: {
				id,
				image: targetImage,
			},
			onResponse(response) {
				if (response.status === 401) {
					toast.error(response.statusText);
				}
			},
		});

	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-200">
						<div className="relative aspect-[1/1] w-full px-12">
							<div className="flex items-center h-[600px] relative">
								<Image
									src={targetImage!}
									alt="target image"
									layout="fill"
									objectFit="contain"
									className="rounded-xl bg-gray-200"
								/>
							</div>
							<button
								className="px-2 py-1 rounded-lg text-gray-600 border-2 border-gray-600 flex items-center mt-4"
								onClick={() => setTargetImage(null)}
							>
								<svg
									xmlns="http://www.w3.org/2000/svg"
									fill="none"
									viewBox="0 0 24 24"
									stroke="currentColor"
									className="size-4"
								>
									<path
										strokeLinecap="round"
										strokeLinejoin="round"
										strokeWidth={2}
										d="M15 19l-7-7 7-7"
									/>
								</svg>
								Back
							</button>
						</div>
					</div>
					<div className="w-1/2 relative overflow-auto">
						<ChatList messages={messages} isLoading={isLoading} />
					</div>
				</div>
				<ChatScrollAnchor trackVisibility={isLoading} />
			</div>
			<ChatPanel
				id={id}
				isLoading={isLoading}
				stop={stop}
				append={append}
				reload={reload}
				messages={messages}
				input={input}
				setInput={setInput}
			/>
		</>
	);
}