src/components/chat/message-list.tsx

'use client';

import { Message as MessageType, UserData } from '@/lib/types';
import { Message } from './message';
import { useRef, useEffect } from 'react';

interface MessageListProps {
  messages: MessageType[];
  loggedInUser: UserData;
  isTyping: boolean;
}

export function MessageList({ messages, loggedInUser, isTyping }: MessageListProps) {
  const messagesEndRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
  }, [messages, isTyping]);

  return (
    <div className="flex-1 overflow-y-auto p-4">
      <div className="flex flex-col gap-4">
        {messages.map((message) => (
          <Message
            key={message.id}
            message={message}
            isSender={message.sender.id === loggedInUser.id}
          />
        ))}
        {isTyping && (
          <div className="flex items-center gap-2">
            <div className="flex items-center gap-1">
                <span className="h-2 w-2 animate-pulse rounded-full bg-muted-foreground delay-0"></span>
                <span className="h-2 w-2 animate-pulse rounded-full bg-muted-foreground delay-150"></span>
                <span className="h-2 w-2 animate-pulse rounded-full bg-muted-foreground delay-300"></span>
            </div>
          </div>
        )}
        <div ref={messagesEndRef} />
      </div>
    </div>
  );
}