components/project/Chat.tsx

'use client';

import { MediaDetails } from '@/lib/fetch';
import useChatWithMedia from '@/lib/hooks/useChatWithMedia';
import React from 'react';
import { ChatList } from '../chat/ChatList';
import { ChatScrollAnchor } from '../chat/ChatScrollAnchor';
import { ChatPanel } from '../chat/ChatPanel';

export interface ChatProps {
	mediaList: MediaDetails[];
}

const Chat: React.FC<ChatProps> = ({ mediaList }) => {
	const { messages, append, reload, stop, isLoading, input, setInput } =
		useChatWithMedia(mediaList);
	return (
		<>
			<ChatList messages={messages} />
			<ChatScrollAnchor trackVisibility={isLoading} />
			<ChatPanel
				isLoading={isLoading}
				stop={stop}
				append={append}
				reload={reload}
				messages={messages}
				input={input}
				setInput={setInput}
			/>
		</>
	);
};

export default Chat;