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