Chat UI Patterns & Best Practices

The AI UX Challenge:

AI chat interfaces face unique UX challenges that traditional apps do not: unpredictable response lengths (2 words or 2000 words), variable latency (1 second or 30 seconds), streaming text (content appearing token by token), hallucination risk (AI might be confidently wrong), and multi-modal outputs (text, code, images, tables in one response). Good chat UI design addresses ALL of these.

Analogy - Auto-Rickshaw Meter vs Uber:

Old auto-rickshaws had no meter -- you never knew the fare until the end (anxiety!). Uber shows real-time tracking, estimated fare, driver location. Same journey, completely different experience. AI chat apps are similar: without proper UI patterns (loading states, streaming, progress), users feel lost. With good patterns, they feel in control even when waiting 20 seconds for a response.

Core Design Principles for AI Chat:

• Transparency: Always show what the AI is doing (thinking, searching, generating)
• Progressive Disclosure: Show answer first, details on demand (expandable sections)
• Graceful Degradation: Handle errors without losing the conversation
• User Control: Allow stop, retry, edit, and regenerate at any point
• Trust Signals: Show sources, confidence, and limitations

Message Bubble Design:

• User Messages: Right-aligned, colored background (blue/purple). Short, compact. Show timestamp on hover.
• AI Messages: Left-aligned, neutral background. Full width for long content. Show model name (GPT-4, Claude) as a label.
• System Messages: Centered, muted styling. Used for "conversation started", "model switched", errors.
• Avatar: User photo or initials for user. Model icon or logo for AI. Helps distinguish speakers instantly.

Rich Content Rendering:

AI responses are not plain text. A single response might contain:

• Markdown: Headers, bold, italic, lists, links. Use a markdown renderer (react-markdown).
• Code Blocks: Syntax highlighted with language tag and copy button. Critical for developer-facing AI.
• Tables: Rendered as proper HTML tables, not ASCII art.
• Math: LaTeX rendered with KaTeX or MathJax for educational AI.
• Images: Inline image rendering for DALL-E or Stable Diffusion outputs.
• Citations: Numbered references [1][2] linking to source documents.

Message Action Bar:

Below each AI message, provide action buttons:

• Copy: Copy full response to clipboard (most used action)
• Regenerate: Get a different response to the same question
• Thumbs Up/Down: Feedback for model improvement
• Share: Generate a shareable link to this conversation
• Edit: Edit the user message and regenerate (branching)

The Streaming UX Revolution:

Before ChatGPT, AI interfaces showed a loading spinner until the full response was ready (5-30 seconds). ChatGPT changed everything by streaming tokens as they were generated. This had three psychological benefits: (1) Users see progress immediately (0.5s to first token). (2) They can start reading while the AI is still generating. (3) It feels like the AI is "thinking" in real-time, which builds trust.

Loading State Patterns:

• Typing Indicator: Three bouncing dots (like WhatsApp/iMessage) while waiting for the first token. Shows the AI is "thinking".
• Skeleton Loading: Gray placeholder blocks that show the shape of the upcoming response. Used by Perplexity.
• Status Messages: "Searching the web...", "Reading your document...", "Generating response..." -- tells the user WHAT is happening, not just that something is happening.
• Progress Steps: For agents, show each step as it completes: "Step 1/4: Searching database..." with checkmarks. Used by Claude with tool use.

Cursor Animation:

The blinking cursor at the end of streaming text is not just decorative -- it is a critical UX element. It tells the user: "I am still generating, the response is not complete yet." Remove it when streaming ends. This simple cue prevents users from responding too early.

Stop/Cancel Button:

Always show a stop button during generation. Users want control. If the AI is going in the wrong direction, they should be able to stop immediately. The stop button should: (1) Be visually prominent (red or high contrast). (2) Work instantly (abort the stream). (3) Keep whatever was generated so far. (4) Transform into a "Continue" button if the user wants to resume.

Conversation Branching (ChatGPT):

When you edit a previous message, ChatGPT creates a "branch" -- the old response is preserved, and a new one is generated. Users can navigate between branches with arrows. This non-destructive editing is critical because users experiment with different prompts to get the best result.

Artifacts (Claude):

When Claude generates a substantial piece of content (code, document, diagram), it appears in a separate "Artifact" panel alongside the chat. This keeps the conversation clean while giving the content proper space. The artifact can be edited, downloaded, or iterated on independently.

Source Citations (Perplexity):

Perplexity shows numbered citations [1][2][3] inline in the AI response, with source cards at the top. Clicking a citation shows the original source. This pattern builds trust by showing WHERE the information comes from, and it is critical for any AI that retrieves information from external sources (RAG).

Suggested Follow-ups:

After the AI responds, show 2-3 suggested follow-up questions. This guides users who do not know what to ask next and keeps the conversation flowing. The suggestions should be contextual (based on the current response) and diverse (offer different directions).

Indian-Context Patterns:

• Language Toggle: Switch between Hindi/English response language without changing the conversation
• Voice Input: Speech-to-text button in the input box (essential for non-typing-comfortable users)
• Simplified Mode: Option to get shorter, simpler responses for less technical users

Common Error Scenarios:

• Rate Limited: "You have sent too many messages. Please wait X minutes." Show a countdown timer, not just an error message.
• Model Overloaded: "The model is busy. Your request is queued (position 5)." Show queue position and estimated wait time.
• Stream Interrupted: Network dropped mid-response. Keep whatever was generated. Show "Connection lost. Retry?" button.
• Context Too Long: Conversation exceeded model context window. Offer to "Start a new conversation" or "Summarize and continue".
• Content Filter: Response blocked by safety filters. Show a clear explanation, not a generic error.

Accessibility (Often Forgotten):

• Screen Reader Support: New messages should be announced. Use aria-live regions.
• Keyboard Navigation: Full chat should be navigable without a mouse. Tab through messages, Enter to copy/regenerate.
• High Contrast: Streaming text must be readable during animation. Do not use light gray on white.
• Font Size: Allow adjustable text size. Long AI responses in small font are unusable.
• Motion Sensitivity: Allow disabling streaming animation for users with vestibular disorders.

Mobile Chat UX:

• Sticky Input: Input box stays at bottom, above keyboard. This is #1 mobile UX rule for chat.
• Auto-Scroll: Scroll to bottom as new tokens arrive. But stop auto-scrolling if user has scrolled up to read earlier content.
• Long Press: Long-press on a message to copy/share (mobile convention).
• Swipe to Reply: Swipe on a specific message to reference it in the next prompt.

Q: Why is streaming important for AI chat UX?

Q: How should you handle a network disconnection during streaming?

Q: What is conversation branching and why is it useful?

Q: What accessibility features should an AI chat interface have?

Q: What is the most important metric for AI chat UX performance?