Ui Ux Conversational Ai Design

Persona States:

Listening:     [Attentive indicator, subtle animation]
Thinking:      [Processing indicator, "typing" state]
Speaking:      [Text streaming, voice playback]
Waiting:       [Idle, ready for input]
Celebrating:   [Success animations, positive reinforcement]
Correcting:    [Gentle, constructive feedback mode]

2. Chat Interface Anatomy

Message Layout:

┌─────────────────────────────────────────┐
│  [Avatar]  AI Message                   │
│            ┌─────────────────────────┐  │
│            │ "Great job! Your        │  │
│            │ pronunciation of 'r'    │  │
│            │ has really improved."   │  │
│            └─────────────────────────┘  │
│            10:30 AM                      │
├─────────────────────────────────────────┤
│                     User Message [Avatar]│
│  ┌─────────────────────────────────┐    │
│  │ "Can you help me practice      │    │
│  │ rolling my R's?"               │    │
│  └─────────────────────────────────┘    │
│                           10:31 AM  ✓✓  │
└─────────────────────────────────────────┘

Message Types:

type MessageType =
  | 'text'           // Plain text message
  | 'audio'          // Voice message with playback
  | 'pronunciation'  // Pronunciation feedback with waveform
  | 'correction'     // Grammar/vocabulary correction
  | 'exercise'       // Interactive exercise card
  | 'media'          // Image/video content
  | 'system'         // System notifications
  | 'suggestion';    // Quick reply suggestions

3. Chat Bubble Design

AI Message Bubbles:

Visual Specs:
├── Background: semantic/surface/secondary (light theme)
├── Border radius: 16px (tail side: 4px)
├── Padding: 12px 16px
├── Max width: 80% of container
├── Typography: Body/Regular
└── Tail: Left side, pointing to avatar

States:
├── Default: Standard appearance
├── Streaming: Gradient shimmer effect
├── Error: Error border, retry option
└── Expandable: "Show more" for long content

User Message Bubbles:

Visual Specs:
├── Background: primary/500
├── Text color: white
├── Border radius: 16px (tail side: 4px)
├── Padding: 12px 16px
├── Max width: 80% of container
└── Tail: Right side

States:
├── Sending: Opacity 0.7, loading indicator
├── Sent: Full opacity, single check
├── Delivered: Double check
├── Error: Error icon, retry option

4. Turn-Taking Patterns

Conversation Flow:

User Input → AI Processing → AI Response → User Turn

Indicators:
┌─────────────────────────────────────┐
│  [Avatar]  ● ● ●                    │  ← AI typing
│            (Thinking...)            │
└─────────────────────────────────────┘

┌─────────────────────────────────────┐
│  [Avatar]  [Streaming text...]      │  ← AI responding
│            ████████░░░░░            │
└─────────────────────────────────────┘

Turn Management:

interface ConversationState {
  currentTurn: 'user' | 'ai' | 'waiting';
  aiState: 'idle' | 'listening' | 'processing' | 'responding';
  canInterrupt: boolean;
  expectedResponseType: 'text' | 'voice' | 'any';
}

5. Input Methods

Text Input:

┌─────────────────────────────────────────┐
│ ┌─────────────────────────────────────┐ │
│ │ Type your message...                │ │
│ │                              [🎤][➤]│ │
│ └─────────────────────────────────────┘ │
│   [Aa] [😊] [📷] [🎙️]                   │
└─────────────────────────────────────────┘

Input States:
├── Empty: Placeholder, voice button visible
├── Typing: Clear button, send enabled
├── Recording: Waveform, stop button
└── Disabled: During AI response (optional)

Quick Replies / Suggestions:

┌─────────────────────────────────────────┐
│  Suggestions:                           │
│  ┌──────────┐ ┌──────────┐ ┌──────────┐ │
│  │ Say more │ │ Example? │ │ Repeat   │ │
│  └──────────┘ └──────────┘ └──────────┘ │
└─────────────────────────────────────────┘

Voice Input Integration:

States:
├── Idle: Microphone icon
├── Listening: Animated waveform
├── Processing: "Converting speech..."
├── Complete: Preview with edit option
└── Error: Retry prompt

6. AI Response Patterns

Response Streaming:

Implementation:
1. Show typing indicator immediately
2. Begin streaming text as tokens arrive
3. Smooth text reveal animation (word by word or character)
4. Complete indicator when finished
5. Enable user input

Animation:
- Character reveal: 20ms per character
- Word reveal: 50ms per word
- Chunk reveal: Immediate for each chunk

Response Structure:

interface AIResponse {
  content: string;
  type: 'text' | 'correction' | 'exercise' | 'feedback';
  metadata?: {
    confidence: number;
    language: string;
    corrections?: Correction[];
    suggestions?: string[];
  };
  actions?: ResponseAction[];
}

Contextual Actions:

After AI Response:
┌─────────────────────────────────────┐
│  [AI Response content...]           │
│                                     │
│  [👍] [👎] [🔊] [📋] [...]         │
│   Like Dislike Speak Copy  More    │
└─────────────────────────────────────┘

7. Error Recovery

Error Types & Handling:

Network Error:
┌─────────────────────────────────────┐
│  ⚠️ Connection lost                 │
│                                     │
│  Your message will be sent when    │
│  connection is restored.            │
│                                     │
│  [Retry Now]  [Cancel]              │
└─────────────────────────────────────┘

AI Error:
┌─────────────────────────────────────┐
│  [Avatar]  Sorry, I had trouble    │
│            understanding that.      │
│                                     │
│            Could you try:           │
│            • Rephrasing your        │
│              question               │
│            • Speaking more slowly   │
│                                     │
│  [Try Again] [Get Help]             │
└─────────────────────────────────────┘

Graceful Degradation:

Fallback Hierarchy:
1. Retry with exponential backoff
2. Show cached/offline responses if applicable
3. Offer alternative actions
4. Clear error message with recovery path
5. Never leave user stuck

8. Trust & Transparency

AI Disclosure:

Transparency Elements:
├── Clear AI identity (not pretending to be human)
├── Confidence indicators for corrections
├── Source attribution for information
├── Limitations acknowledgment
└── Feedback mechanisms

Confidence Display:

High Confidence (>90%):
┌─────────────────────────────────────┐
│  ✓ "Hola" means "Hello"            │
└─────────────────────────────────────┘

Medium Confidence (70-90%):
┌─────────────────────────────────────┐
│  ○ This likely means "I would like" │
│    but could also mean "I wanted"   │
└─────────────────────────────────────┘

Low Confidence (<70%):
┌─────────────────────────────────────┐
│  ? I'm not sure, but this might    │
│    mean... [Ask native speaker]     │
└─────────────────────────────────────┘

9. Platform-Specific Considerations

iOS Guidelines:

- Follow iMessage bubble conventions
- Use SF Symbols for actions
- Support Dynamic Type
- Integrate with system keyboard
- Haptic feedback for interactions
- Liquid Glass effects for premium feel

Android Guidelines:

- Follow Material Design chat patterns
- Use Material icons
- Support edge-to-edge display
- Integrate with Gboard suggestions
- Ripple effects for touch feedback
- Material You color theming

10. Accessibility Requirements

WCAG 2.2 AA Compliance:

Visual:
├── Color contrast: 4.5:1 for text
├── Don't rely on color alone for status
├── Support dynamic text sizing
└── Clear focus indicators

Screen Reader:
├── Announce new messages
├── Describe message sender and time
├── Announce AI states (typing, etc.)
├── Provide text alternatives for audio
└── Label all interactive elements

Motor:
├── Touch targets ≥ 44pt (iOS) / 48dp (Android)
├── Keyboard navigation support
├── Voice control compatibility
└── Sufficient spacing between actions

Performance Guidelines

Rendering Performance

• Virtual list for message history (60fps scroll)
• Lazy load images and media
• Debounce input handling
• Optimize re-renders with React.memo

Response Latency

• Show typing indicator within 100ms
• Begin streaming within 300ms (perceived)
• Use optimistic UI for sent messages

Deliverables

For: $ARGUMENTS

Provide:

1. Persona Definition: AI character, voice, and personality
2. Message Component Specs: Bubble designs, states, variants
3. Input Interface Design: Text, voice, suggestions
4. Turn-Taking Flow: State machine and indicators
5. Error Handling: Recovery patterns and fallbacks
6. Accessibility Checklist: Screen reader, motor, visual
7. Implementation Notes: React Native code patterns
8. Animation Specs: Typing, streaming, transitions