src/components/MessageList.jsx

import useLLM from "@react-llm/headless";
import { useEffect, useRef } from "react";

function MessageList({
  screenName = "endlessbox5",
  assistantScreenName = "SmartestChild",
}) {
  const scrollRef = useRef(null);
  const { conversation, userRoleName } = useLLM();
  const messages = conversation?.messages || [];

  const scrollToBottom = () => {
    if (scrollRef.current) {
      scrollRef.current.scrollIntoView();
    }
  };

  useEffect(() => {
    scrollToBottom();
  }, [conversation, messages.length]);

  return (
    <div style={{ height: "65vh" }} className="w-full">
      <div className="p-2 leading-6 w-full min-h-full">
        {conversation?.messages.map((m) => (
          <div key={m.id} style={{ display: "flex" }}>
            <div
              style={{
                padding: "12px",
                margin: "5px",
                borderRadius: "15px",
                backgroundColor: m.role === userRoleName ? "green": "#333333"
              }}
            >
              <span
                style={{
                  fontWeight: "bold",
                  color: m.role === userRoleName ? "white" : "#999999",
                }}
              >
                {m.role === userRoleName ? `` : `${assistantScreenName}: `}
              </span>
              {m.text}
            </div>
          </div>
        ))}
        <div ref={scrollRef}></div>
      </div>
    </div>
  );
}

export default MessageList;