'use client'; import { Fragment, useEffect, useRef, useState } from 'react'; import MessageInput from './MessageInput'; import { Message } from './ChatWindow'; import MessageBox from './MessageBox'; import MessageBoxLoading from './MessageBoxLoading'; const Chat = ({ loading, messages, sendMessage, messageAppeared, rewrite, }: { messages: Message[]; sendMessage: (message: string) => void; loading: boolean; messageAppeared: boolean; rewrite: (messageId: string) => void; }) => { const [dividerWidth, setDividerWidth] = useState(0); const dividerRef = useRef(null); const messageEnd = useRef(null); useEffect(() => { const updateDividerWidth = () => { if (dividerRef.current) { setDividerWidth(dividerRef.current.scrollWidth); } }; updateDividerWidth(); window.addEventListener('resize', updateDividerWidth); return () => { window.removeEventListener('resize', updateDividerWidth); }; }); useEffect(() => { messageEnd.current?.scrollIntoView({ behavior: 'smooth' }); if (messages.length === 1) { document.title = `${messages[0].content.substring(0, 30)} - Perplexica`; } }, [messages]); return (
{messages.map((msg, i) => { const isLast = i === messages.length - 1; return ( {!isLast && msg.role === 'assistant' && (
)} ); })} {loading && !messageAppeared && }
{dividerWidth > 0 && (
)}
); }; export default Chat;