components/chat/ChatClient.tsx

'use client';

// import { ChatList } from '@/components/chat/ChatList';
import { Composer } from '@/components/chat/Composer';
import useVisionAgent from '@/lib/hooks/useVisionAgent';
import { useScrollAnchor } from '@/lib/hooks/useScrollAnchor';
import { Session } from 'next-auth';
import { useState } from 'react';
import { ChatWithMessages } from '@/lib/db/types';
import { ChatMessage } from './ChatMessage';

export interface ChatClientProps {
  chat: ChatWithMessages;
}

const ChatClient: React.FC<ChatClientProps> = ({ chat }) => {
  const { mediaUrl, id } = chat;
  const { messages, append, reload, stop, isLoading, input, setInput } =
    useVisionAgent(chat);

  const { messagesRef, scrollRef, visibilityRef, isAtBottom, scrollToBottom } =
    useScrollAnchor();

  return (
    <div
      className="h-full overflow-auto mx-auto max-w-5xl min-w-3xl border rounded-lg"
      ref={scrollRef}
    >
      <div className="overflow-auto h-full pt-6 px-6" ref={messagesRef}>
        {messages
          // .filter(message => message.role !== 'system')
          .map((message, index) => (
            <ChatMessage
              key={index}
              message={message}
              isLoading={isLoading && index === messages.length - 1}
            />
          ))}
        <div className="h-px w-full" ref={visibilityRef} />
      </div>
      <div className="sticky bottom-3 w-full">
        <Composer
          id={id}
          mediaUrl={mediaUrl}
          isLoading={isLoading}
          stop={stop}
          append={append}
          reload={reload}
          messages={messages}
          input={input}
          setInput={setInput}
        />
      </div>
    </div>
  );
};

export default ChatClient;