# Messaging

> A real-time messaging interface with conversation threads, chat bubbles, typing indicators, and simulated API integration — fully token-driven and design-system agnostic.

- Category: Messaging
- Frameworks: Vanilla, React + CSS, React + Tailwind
- Design system: Odyssey
- Dark mode: yes
- Access: free (sign in to copy the code)
- Tags: chat
- Page: https://builder.atheros.ai/components/messaging
- Preview: https://d17nmjscumqk5d.cloudfront.net/builder/templates/tpl_014/preview-445bd9c75e13.webp

## 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

## Keyboard shortcuts

- `/` — Focus search input
- `Escape` — Blur search, close modals
- `Enter` — Send message (in compose)
- `Shift+Enter` — New line in compose textarea

## Common questions

**Which frameworks is Messaging available in?**

Messaging ships as Vanilla, React + CSS and React + Tailwind — HTML, CSS, JS and React source you can copy, download or clone into Atheros AI Builder.

**Is Messaging free?**

Yes. Messaging is a free component: preview it without an account, and sign in with a free Atheros account to copy or download the full source and customise it with AI.

**Does Messaging support dark mode?**

Yes. Messaging ships light and dark themes, both drawn from the Odyssey design system's tokens. Switch the preview to dark mode to compare them.

## Get the code

Preview Messaging live, then sign in to copy or download the source, apply another design system, or ask the AI assistant to change it: https://builder.atheros.ai/components/messaging

Every component on https://builder.atheros.ai is also reachable from Claude Code, Cursor and Codex through the Atheros MCP server (paid plans). Component index: https://builder.atheros.ai/llms-components.txt