Create chat UI component

[apermo]

Summary

Build the frontend chat interface for interacting with the AI assistant.

UI Components

Chat Button (FAB)

• Floating action button in bottom-right corner
• Shows unread indicator if AI has suggestions
• Doesn't interfere with exercise UI

Chat Modal/Drawer

• Slide-up modal on mobile (iOS-friendly)
• Message history with user/assistant bubbles
• Input field with send button
• "Typing..." indicator during AI response
• Action cards showing what AI did (e.g., "Weight updated: 60kg → 65kg")

Design

┌─────────────────────────────┐
│  AI Coach              [X]  │
├─────────────────────────────┤
│                             │
│  [User bubble]              │
│  Das war zu leicht          │
│                             │
│         [Assistant bubble]  │
│         Verstanden! Ich     │
│         habe das Gewicht    │
│         erhöht.             │
│                             │
│  ┌─────────────────────┐    │
│  │ ✓ Bankdrücken       │    │
│  │   60kg → 65kg       │    │
│  └─────────────────────┘    │
│                             │
├─────────────────────────────┤
│ [Message input...]    [➤]   │
└─────────────────────────────┘

Implementation

• Create ChatModal module in /assets/js/modules/
• Add chat button to main UI
• WebSocket or polling for responses
• Local message queue for offline support

Mobile Considerations

• Safe area insets for iOS
• Keyboard handling
• Touch-friendly message input
• Haptic feedback on send

Part of

Phase 3: Chat UI