import useLLM from "@react-llm/headless"; import { useEffect, useRef } from "react"; import { ScrollView } from "react95"; 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 (
{conversation?.messages.map((m) => (
{m.role === userRoleName ? screenName : assistantScreenName} : {m.text}
))}
); } export default MessageList;