Lesson 1012 lessons
Building a Chat UI Component
Component structure
A chat UI needs: a scrollable message list, distinct styling for user vs assistant bubbles, an input box with a send button, and a loading indicator while waiting for a response.
Managing state
Store messages in a useState array. On send: append the user message, call your API route, then append the assistant's reply (or stream it token-by-token as covered in Lesson 4).
Polish details that matter
Auto-scroll to the latest message, disable the input while waiting for a response, handle Enter-to-send, and render Markdown in assistant replies (bold, code blocks, lists) for readability.
Key Takeaways
- A chat UI needs a message list, distinct bubble styles, and an input box.
- Store messages in local state, appending user and assistant turns.
- Auto-scroll and disable input while awaiting a response.
- Render Markdown in assistant replies for readability.
Build a minimal chat component
Create a `<ChatWindow />` React component with a message list, input box, and send button, wired to your `/api/ask` route from Lesson 2.