Messaging Chat Design

Chat and messaging interface design including conversations, message types, and real-time communication.

dragoon0x a28bdcb 1.1 KB Updated

File contents

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..."

Message Types

  • Text with link previews.
  • Images (tap to fullscreen, gallery for multiple).
  • Files (icon + filename + size + download).
  • Voice messages (waveform + duration + play button).
  • Reactions (emoji on long-press/hover).
  • Reply/thread (quote original message).

Input Area

  • Multiline text input that grows.
  • Attachment button (image, file, camera).
  • Emoji picker.
  • Send on Enter (Shift+Enter for newline).
  • Character/file size limits shown when approaching.

dragoon0x/everything-design-taste/tree/main/skills/messaging-chat-design commit a28bdcb690

Frequently asked questions

npx skillmds@latest add dragoon0x/messaging-chat-design