This video is available to students only
Building the User Interface
In this lesson, we'll walk through the creation of a simple chat user interface (UI) using React.
The Chat Component#
Our main component is Chat
. This component initializes with optional starting messages.
xxxxxxxxxx
export function Chat({ initMessages = defaultInitMessages }) {
const { messages, submit, input, setInput, isLoading } = useChat({
initMessages,
});
const { messagesEndRef } = useScrollToMessage({ messages });
return (
<div className="relative flex h-full min-h-[50vh] flex-col overflow-hidden rounded-xl bg-muted/50 lg:col-span-2">
<MessageList messages={messages} isLoading={isLoading} />
<div ref={messagesEndRef} className="h-2" />
{/* Input and button components here */}
</div>
);
}
We build a useScrollToMessage
hook to automatically scroll to the latest message. This functionality enhances user experience, especially in dynamic chat interactions.
xxxxxxxxxx
function useScrollToMessage({ messages }) {
const messagesEndRef = useRef(null);
useEffect(() => {
messagesEndRef.current?.scrollIntoView();
}, [messages]);
return { messagesEndRef };
}
This lesson preview is part of the Responsive LLM Applications with Server-Sent Events course and can be unlocked immediately with a \newline Pro subscription or a single-time purchase. Already have access to this course? Log in here.
Unlock This Course
Get unlimited access to Responsive LLM Applications with Server-Sent Events, plus 70+ \newline books, guides and courses with the \newline Pro subscription.
