Messaging

Features

• Conversation thread list with unread badges, pin indicators, and active state
• Full chat view with date dividers, message bubbles, and delivery status (sent → delivered → read)
• Search with debounced filtering and keyboard shortcut (/)
• Filter chips (All / Unread / Pinned)
• New conversation modal with contact picker and scroll masking
• Typing indicator with animated dots
• Auto-resizing textarea with animated send button
• Skeleton loading states during simulated API fetch
• Responsive layout — sidebar/chat split on desktop, slide-over on mobile
• Simulated API layer with configurable latency (200–600ms)
• Contrast-safe timestamps, selected filters, outgoing bubbles, unread badges, delivery states, and text selection across light and dark themes
• Design-system-propagated card shape, elevation, typography, density and accent mixing

Accessibility

Filter state

Filter buttons expose their selected state through aria-pressed

Conversation state

Thread buttons expose the active conversation through aria-pressed

Message updates

The conversation is a named polite role="log" with non-atomic additions

Keyboard nav

/ focuses search, Escape closes modals

Focus management

Modal traps focus, marks closed content inert, focuses its first action, and restores the opener on close

Demo-only actions

Unimplemented attachment, emoji, voice and video controls are explicitly disabled

Reduced motion

prefers-reduced-motion: reduce kills all animations

XSS prevention

esc() helper HTML-escapes all user-generated content

Customise it with AI

Open Messaging in Atheros AI Builder, pick a design system and ask the AI assistant to change the layout, copy or behaviour — the messaging is regenerated against your tokens. Take the HTML, CSS, JS and React source with you, or pull it into your repo from Claude Code, Cursor or Codex over MCP.