Chat Messaging

Chat & Messaging Patterns

Message Bubbles

• Sent messages: Right-aligned, brand/accent color background
• Received messages: Left-aligned, neutral/gray background
• Status indicators: Sent (single check), Delivered (double check), Read (blue/colored check)
• Timestamps: Show for each message or group by time (messages within 5 minutes share a timestamp)

Input Area

• Multi-line text input that grows with content (up to ~4 lines, then scroll)
• Attachment button (files, images, audio)
• Emoji picker
• Send button (enabled only when input has content)
• Shift+Enter for new line, Enter to send

Typing Indicator

• Show "[Name] is typing..." with animated dots
• Position: bottom of message list, left-aligned
• Show for 3-5 seconds after last keystroke
• Multiple users: "[Name] and [Name] are typing..."

Real-Time

• New messages appear at the bottom
• Auto-scroll to bottom on new message (only if already at bottom)
• "New messages" indicator if user scrolled up
• Optimistic send (show message immediately, confirm silently)

Message Types