'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 ImageList from './ImageList';
import useChatWithDataset from '../../lib/hooks/useChatWithDataset';
import { useChat } from 'ai/react';
import { Button } from '../ui/Button';
import ImageSelector from './ImageSelector';

export interface ChatProps extends React.ComponentProps<'div'> {
  id: string;
}

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

  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 border-gray-400 overflow-auto">
            {/* <ImageList /> */}
            <ImageSelector />
          </div>
          <div className="w-1/2 relative overflow-auto">
            {/* <ChatList messages={messages} /> */}
            <ChatScrollAnchor trackVisibility={isLoading} />
          </div>
        </div>
      </div>
      {/* <ChatPanel
        id={id}
        isLoading={isLoading}
        stop={stop}
        append={append}
        reload={reload}
        messages={messages}
        input={input}
        setInput={setInput}
      /> */}
    </>
  );
}