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 { useLocalStorage } from '@/lib/hooks/use-local-storage';
import {
	Dialog,
	DialogContent,
	DialogDescription,
	DialogFooter,
	DialogHeader,
	DialogTitle,
} from '@/components/ui/dialog';
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 { useAtomValue } from 'jotai';
import { targetImageAtom } from '@/state';
import Image from 'next/image';

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

export function Chat({ id, initialMessages, className }: ChatProps) {
	const router = useRouter();
	const path = usePathname();
	const targetImage = useAtomValue(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)}>
				{targetImage ? (
					<>
						<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-8">
									<Image
										src={targetImage}
										alt="target image"
										layout="responsive"
										objectFit="contain"
										width={1000}
										height={1000}
										className="rounded-xl shadow-lg"
									/>
								</div>
							</div>
							<div className="w-1/2 relative overflow-auto">
								<ChatList messages={messages} />
							</div>
						</div>
						<ChatScrollAnchor trackVisibility={isLoading} />
					</>
				) : (
					<EmptyScreen setInput={setInput} />
				)}
			</div>
			<ChatPanel
				id={id}
				isLoading={isLoading}
				stop={stop}
				append={append}
				reload={reload}
				messages={messages}
				input={input}
				setInput={setInput}
			/>
		</>
	);
}