Anatomy of a Chat Interface
A chat interface is six stacked components: message area, input bar, suggested prompts, status indicators, header, and a disclosure surface for sources and context. The first five are the shell every team builds. The sixth is where most AI products quietly fail.
The Core Components
A chat interface has six essential components. The first five are the chat shell most teams already build; the sixth — the disclosure surface — is where most products quietly fail.
- Message area
- The scrollable container showing the conversation history. User messages align right, AI messages align left. Each message has a bubble, optional avatar, and timestamp.
- Input bar
- Where users type their message. Includes a text field, send button, and optionally: file upload, voice input toggle, and character count.
- Suggested prompts
- Clickable chips or buttons showing example queries. These appear in the empty state (to help users start) and after AI responses (as follow-up suggestions).
- Status indicators
- Typing dots, "thinking" spinners, or streaming text that show the AI is processing. Critical for perceived responsiveness.
- Header / toolbar
- Shows the AI's name/avatar, conversation title, and actions (new chat, settings, history).
- Disclosure surface
- The always-visible signals that tell the user what the AI is, what it can see right now, and what it's authorized to do. Identity badge in the header, context indicators in the input bar, and an audit trail under each AI action. Without this surface, users feel surveilled rather than helped — and the product gets pulled.
Message Bubble Design
Message bubbles are the visual backbone of your chat UI. Key decisions:
Alignment: User messages right-aligned, AI messages left-aligned. This is a universal convention - don't break it.
Color: User messages get the primary/accent color (filled). AI messages get a neutral background (white/gray or surface color). This creates instant visual scanning.
Width: Messages should have a max-width (60-75% of container). Full-width messages are hard to read. On mobile, allow up to 85%.
Rich content: AI responses often include code blocks, tables, lists, images, and buttons. Design these as first-class elements within the bubble - not as plain text dumped into a container.
Spacing: 8-12px between messages from the same sender, 16-20px between sender changes. This creates natural visual grouping.
The Empty State
The empty state (first visit, no messages) is the most important screen in your conversational UI. Users who don't know what to type will leave.
Include:
- A welcome message explaining what the AI can do (1-2 sentences, not a paragraph)
- 3-4 suggested prompts relevant to common use cases
- A subtle capability list or examples section
Real-world examples:
- ChatGPT shows "How can I help you?" with prompt suggestions organized by capability
- Claude shows a clean input with suggested starters
- Perplexity shows trending topics and example queries
Don't overload the empty state with features, tutorials, or marketing. Users came to chat - get them typing within 3 seconds of landing on the page.