How do I handle the chat layout?
Use a flex layout: ChatPage with a sidebar (ChatList) and main area (ChatWindow or empty state). The sidebar shows all conversations, the main area shows the selected chat. On mobile, show either the list or the chat (not both) with a back button.
Verify This Answer
Cross-check this information using these trusted sources:
More FAQs in Chat UI Components in React Building a Polished Chat Interface
ChatPage (layout), ChatList (conversation list with online status and unread badges), ChatWindow (active conversation), MessageBubble (individual message with own/other styling), MessageInput (text input with typing indicator and send button), TypingIndicator (animated dots), and ChatHeader (user info and online status).
Own messages: background primary color, align right, border-radius 20px 20px 0 20px. Other messages: background gray, align left, border-radius 20px 20px 20px 0. Include timestamp and read receipt (double checkmark) for own messages.
Store unreadCount in the conversation. In ChatList, show a badge with the count if unreadCount > 0. When a chat is opened, emit messages:read to mark as read and reset the count. Listen for message:received to refresh the chat list and update unread counts.
Still have questions?
Browse all our FAQs or reach out to our support team