?Pick a component
Twelve numbered markers highlight the parts of a well-designed chat interface.
Click any orange/blue/gray/green marker on the phone mockup to see the
component, its design rationale, and the best practices behind it.
User-facing
Bot-controlled
Feedback
Layout/structure
Mobile responsive: components stack vertically below 768px.
Accessibility: ARIA labels on every interactive element.
Performance: virtualize the message list beyond ~100 messages.