Ui Ux Realtime Streaming Ui

State Machine:

type StreamingState =
  | 'idle'           // Ready to send
  | 'connecting'     // Establishing connection
  | 'streaming'      // Receiving chunks
  | 'complete'       // Response finished
  | 'error'          // Error occurred
  | 'cancelled';     // User cancelled

interface StreamingUIState {
  state: StreamingState;
  progress: number;          // 0-1 for known length
  tokensReceived: number;
  latency: number;           // ms since request
  canCancel: boolean;
  retryCount: number;
}

2. Typing Indicator Design

AI Typing Indicators:

Standard Dots:
┌─────────────────────────────────────┐
│  [Avatar]  ● ● ●                    │
│            Thinking...              │
└─────────────────────────────────────┘

Animated Variants:
├── Bouncing dots: ●˙●˙● (sequential bounce)
├── Pulsing dots: ●●● (synchronized pulse)
├── Wave dots: ●●● (wave motion)
└── Progress dots: ●○○ → ●●○ → ●●●

Implementation:
- Duration: Show after 100ms of processing
- Animation: 1s loop, ease-in-out
- Remove: Fade out when response starts

Custom Thinking Indicators:

Language-Learning Context:
┌─────────────────────────────────────┐
│  [Avatar]  📝 Checking your answer..│
└─────────────────────────────────────┘

┌─────────────────────────────────────┐
│  [Avatar]  🎯 Analyzing             │
│            pronunciation...         │
└─────────────────────────────────────┘

┌─────────────────────────────────────┐
│  [Avatar]  💭 Generating            │
│            conversation topic...    │
└─────────────────────────────────────┘

Variants by Action:
├── Checking: Clipboard icon + dots
├── Analyzing: Magnifier icon + progress
├── Generating: Sparkle icon + dots
├── Translating: Language icon + loading
└── Processing: Gear icon + spinner

3. Text Streaming Animation

Character-by-Character:

Animation Specs:
├── Speed: 15-25ms per character
├── Cursor: Blinking at end (optional)
├── Easing: Linear reveal
└── Pause: Slight pause at punctuation

Visual:
"Hello! How can I help you toda█"
                              ↑ Cursor

Implementation (React Native):
- Use animated opacity or translateX
- Batch updates for performance
- Consider word-by-word for longer text

Word-by-Word Reveal:

Animation Specs:
├── Speed: 50-80ms per word
├── Easing: Fade in + slight slide up
├── Grouping: Natural word boundaries
└── Smooth: No jarring jumps

Visual:
"Hello! How can I" [help] [you] [today?]
                    ↑ Currently revealing

CSS-like Animation:
- Opacity: 0 → 1 over 100ms
- TranslateY: 4px → 0
- Stagger: 50ms between words

Chunk-Based Streaming:

For API Responses (token chunks):
├── Buffer small chunks (<3 chars)
├── Render at word boundaries when possible
├── Smooth append without layout shift
└── Handle partial words gracefully

Example Buffer Logic:
Chunk 1: "Hel" → Buffer
Chunk 2: "lo! " → Render "Hello! "
Chunk 3: "How" → Buffer
Chunk 4: " are" → Render "How are"

4. Connection State UI

Connection Indicators:

Connected (Hidden by default):
[No indicator - seamless experience]

Connecting:
┌─────────────────────────────────────┐
│  ⟳ Connecting...                    │
└─────────────────────────────────────┘

Reconnecting:
┌─────────────────────────────────────┐
│  ⚡ Reconnecting...                 │
│  Your messages are saved            │
│  [━━━━━━━━░░░░]                     │
└─────────────────────────────────────┘

Offline:
┌─────────────────────────────────────┐
│  📴 You're offline                  │
│  Messages will send when connected  │
│                                     │
│  [Retry Now]                        │
└─────────────────────────────────────┘

Banner Patterns:

Top Banner (Non-blocking):
┌─────────────────────────────────────┐
│ ⚡ Connection unstable              │
└─────────────────────────────────────┘
│                                     │
│  [Chat content continues below]     │
│                                     │

Placement:
├── Top: Connection status
├── Bottom: Input disabled state
├── Inline: Message send failures
└── Modal: Critical errors only

5. Progress Indicators

Determinate Progress:

When Length is Known:
┌─────────────────────────────────────┐
│  Generating response...             │
│  [████████████░░░░░░░░] 65%        │
│                                     │
│  [Cancel]                           │
└─────────────────────────────────────┘

Use Cases:
├── File processing
├── Known token limits
├── Multi-step operations
└── Audio generation

Indeterminate Progress:

When Length is Unknown:
┌─────────────────────────────────────┐
│  [Avatar]  ● ● ●                    │
│            Thinking...              │
│                                     │
│  Elapsed: 3s                        │
│  [Cancel]                           │
└─────────────────────────────────────┘

Or Skeleton Loading:
┌─────────────────────────────────────┐
│  [Avatar]  ████████████████         │
│            ████████████             │
│            █████████████████        │
│            (Shimmer animation)      │
└─────────────────────────────────────┘

6. Optimistic UI Patterns

Instant Send Feedback:

User sends message:
1. Message appears immediately (opacity 0.7)
2. Sending indicator shown
3. On success: Full opacity + checkmark
4. On failure: Error state + retry

States:
┌─────────────────────────────────────┐
│           "Hello!"  ⏳              │  Sending
│           "Hello!"  ✓               │  Sent
│           "Hello!"  ✓✓              │  Delivered
│           "Hello!"  ⚠️ [Retry]      │  Failed
└─────────────────────────────────────┘

Optimistic Actions:

// Pattern for immediate UI feedback
async function sendMessage(text: string) {
  // 1. Add to UI immediately
  const tempId = uuid();
  addMessage({ id: tempId, text, status: 'sending' });

  try {
    // 2. Send to server
    const response = await api.send(text);

    // 3. Update with real ID
    updateMessage(tempId, {
      id: response.id,
      status: 'sent'
    });
  } catch (error) {
    // 4. Show error state
    updateMessage(tempId, { status: 'failed' });
  }
}

7. Cancel & Interrupt Patterns

Cancellation UI:

During Streaming:
┌─────────────────────────────────────┐
│  [Avatar]  "The weather today is    │
│            expected to be sunny     │
│            with temperatures..."    │
│                                     │
│            [■ Stop Generating]      │
└─────────────────────────────────────┘

After Cancel:
┌─────────────────────────────────────┐
│  [Avatar]  "The weather today is    │
│            expected to be sunny     │
│            with tempera..."         │
│                                     │
│            ⚠️ Response stopped      │
│            [Continue] [New Message] │
└─────────────────────────────────────┘

Interrupt Handling:

User Types During AI Response:
├── Option A: Queue user message
├── Option B: Stop AI, process user input
├── Option C: Show interrupt confirmation

Recommended (Option B):
1. Detect user input during streaming
2. Fade/minimize current response
3. Show "Interrupted" label
4. Process new user message

8. Error Recovery

Streaming Errors:

Timeout:
┌─────────────────────────────────────┐
│  ⏱️ Taking longer than expected     │
│                                     │
│  [Keep Waiting]  [Cancel]           │
└─────────────────────────────────────┘

Partial Response Error:
┌─────────────────────────────────────┐
│  [Avatar]  "The answer to your      │
│            question is..."          │
│                                     │
│            ⚠️ Response incomplete   │
│            [Regenerate] [Accept]    │
└─────────────────────────────────────┘

Connection Lost Mid-Stream:
┌─────────────────────────────────────┐
│  [Avatar]  "Based on your           │
│            progress, I recommend..." │
│                                     │
│            ⚡ Connection lost        │
│            Reconnecting...          │
│            [━━━━░░░░░░░░]           │
│                                     │
│            [Cancel] [Continue Later]│
└─────────────────────────────────────┘

Auto-Retry Logic:

const retryConfig = {
  maxRetries: 3,
  initialDelay: 1000,      // 1 second
  maxDelay: 10000,         // 10 seconds
  backoffMultiplier: 2,
  retryableErrors: ['NETWORK_ERROR', 'TIMEOUT']
};

// Visual feedback during retry
interface RetryState {
  attempt: number;
  nextRetryIn: number;  // countdown
  canManualRetry: boolean;
}

9. Performance Optimization

Rendering Performance:

60fps Streaming Guidelines:
├── Batch DOM updates (requestAnimationFrame)
├── Use virtualized lists for history
├── Debounce scroll during streaming
├── Minimize re-renders (React.memo)
├── Use native driver for animations
└── Avoid layout thrashing

Code Pattern:
// Batch text updates
const textBuffer = useRef('');
const flushInterval = useRef<number>();

function onChunk(chunk: string) {
  textBuffer.current += chunk;

  if (!flushInterval.current) {
    flushInterval.current = requestAnimationFrame(() => {
      setText(textBuffer.current);
      flushInterval.current = null;
    });
  }
}

Latency Optimization:

Perceived Latency Targets:
├── Request acknowledgment: <100ms
├── First token: <500ms
├── Typing indicator: <100ms
└── Connection feedback: <200ms

Techniques:
├── Show typing indicator immediately
├── Pre-connect WebSocket on app load
├── Use connection pooling
├── Prefetch likely responses
└── Edge deployment for AI services

10. Platform-Specific Patterns

iOS Guidelines:

iOS Streaming Patterns:
├── Use URLSession for streaming
├── Haptic on stream complete
├── SF Symbols for states
├── Respect low power mode
├── Background task handling
└── Liquid Glass progress indicators

Animations:
├── CADisplayLink for smooth updates
├── UIView.animate for state changes
├── preferredFramesPerSecond: 60
└── Use layer animations

Android Guidelines:

Android Streaming Patterns:
├── Use OkHttp/Retrofit streaming
├── Material motion for transitions
├── Edge-to-edge status banners
├── Battery optimization awareness
├── Foreground service for long ops
└── Material You theming

Animations:
├── ValueAnimator for text reveal
├── TransitionManager for states
├── Choreographer for frame sync
└── Use hardware layers

11. Accessibility

Screen Reader Support:

Announcements:
├── "AI is typing" when streaming starts
├── Read complete response when done
├── "Response stopped" on cancel
├── Error messages immediately
└── Progress updates at intervals

VoiceOver/TalkBack:
├── accessibilityLiveRegion: 'polite'
├── Don't interrupt mid-sentence
├── Provide summary for long responses
└── Announce connection changes

Motor Accessibility:

Touch Targets:
├── Cancel button: 44pt/48dp minimum
├── Retry button: Easily reachable
├── No time pressure on actions
└── Keyboard shortcuts (desktop)

Reduced Motion:
├── Disable text animation
├── Instant text reveal
├── Simple fade transitions
└── Static progress indicators

Deliverables

For: $ARGUMENTS

Provide:

1. Typing Indicator Spec: Animation, timing, variants
2. Text Streaming Animation: Character/word reveal specs
3. Connection State UI: All states and transitions
4. Progress Indicators: Determinate and indeterminate
5. Optimistic UI Patterns: Send states and transitions
6. Cancel/Interrupt Flow: User control patterns
7. Error Recovery: All error states with actions
8. Performance Guidelines: 60fps requirements
9. Platform Specifics: iOS and Android patterns
10. Accessibility: Screen reader and motor support