Messaging Chat Design

Conversation List

• Avatar + name + last message preview + timestamp.
• Unread indicator (bold text + badge count).
• Pinned conversations at top.
• Search conversations.

Chat Interface

• Messages: left-aligned (others) and right-aligned (you).
• Bubble style with subtle background differentiation.
• Timestamps: grouped by day, inline for gaps > 30 min.
• Read receipts: sent → delivered → read (optional).
• Typing indicator: "Alex is typing..."