components/chat/index.tsx

'use client';

import { cn } from '@/lib/utils';
import { ChatList } from '@/components/chat/ChatList';
import { ChatPanel } from '@/components/chat/ChatPanel';
import { ChatScrollAnchor } from '@/components/chat/ChatScrollAnchor';
import { ChatEntity } from '@/lib/types';
import Image from 'next/image';
import useVisionAgent from '@/lib/hooks/useVisionAgent';

export interface ChatProps extends React.ComponentProps<'div'> {
  chat: ChatEntity;
}

export function Chat({ chat }: ChatProps) {
  const { url, id } = chat;
  const { messages, append, reload, stop, isLoading, input, setInput } =
    useVisionAgent(chat);

  return (
    <>
      <div className={cn('pb-[150px] h-full')}>
        <div className="relative border-b border-gray-400 overflow-auto p-4 flex flex-row items-start h-[300px]">
          <Image
            draggable={false}
            src={url}
            alt={url}
            fill
            className="object-contain"
          />
        </div>
        <div className="overflow-auto">
          <ChatList messages={messages} />
          <ChatScrollAnchor trackVisibility={isLoading} />
        </div>
      </div>
      <ChatPanel
        id={id}
        url={url}
        isLoading={isLoading}
        stop={stop}
        append={append}
        reload={reload}
        messages={messages}
        input={input}
        setInput={setInput}
      />
    </>
  );
}