boocode/apps/web/src/components/MessageList.tsx

import { useEffect, useRef } from 'react';
import type { Chat, Message } from '@/api/types';
import { MessageBubble } from './MessageBubble';

interface Props {
  messages: Message[];
  sessionChats?: Chat[];
}

export function MessageList({ messages, sessionChats }: Props) {
  const endRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    endRef.current?.scrollIntoView({ block: 'end' });
  }, [messages]);

  if (messages.length === 0) {
    return (
      <div className="flex-1 flex items-center justify-center text-sm text-muted-foreground">
        Send a message to start.
      </div>
    );
  }

  return (
    <div className="flex-1 overflow-y-auto">
      <div className="max-w-[1000px] mx-auto w-full px-6 py-4 space-y-4">
        {messages.map((m) => (
          <MessageBubble key={m.id} message={m} sessionChats={sessionChats} />
        ))}
        <div ref={endRef} />
      </div>
    </div>
  );
}