Multimodal Interaction

Design an interface with progressive disclosure that reveals AI features gradually: Create 3 states: 1. **Initial view**: Show essential content only (summary, key action) 2. **Expanded view**: Reveal more details (AI insights, key points) 3. **Full view**: Show all options (actions, settings, advanced features) Include clear expand/collapse triggers (chevrons, "Show more" buttons) and smooth transitions between states.

Design a conversational AI interface that feels natural and engaging: Create a chat interface showing: 1. **Message Area**: Clear distinction between user and AI messages with appropriate spacing, timestamps, and read indicators 2. **AI Personality**: Subtle visual elements that reflect brand personality (avatar, colors, tone) without being distracting 3. **Context Indicators**: Show when AI is typing, thinking, searching, or generating — each state should look distinct 4. **Rich Content**: AI responses that include formatted text, code blocks, images, buttons, and cards within the conversation flow 5. **Input Options**: Text input with suggested prompts, quick action buttons, file attachments, and voice input toggle 6. **Conversation History**: Sidebar or dropdown showing past conversations with search and resume functionality Design for three scenarios: - **First-time user**: Empty state with welcome message and 4 suggested prompts - **Active conversation**: Multi-turn dialogue with mixed content types (text, code, image) - **Error state**: AI doesn't understand — show clarifying question with suggested rephrasing

Design a context-switching interface similar to Slack's workspace switcher or browser tab management with session restore. Show seamless transitions between different AI contexts or tasks. Include: context carousel or sidebar showing active contexts with thumbnails, quick-switch panel with keyboard shortcuts (Cmd+K style), each context card showing task name, last activity timestamp, and preview thumbnail, auto-save indicator showing context is preserved, visual transition animation when switching (slide/fade), and 'Resume where you left off' messaging. Style: Organized, efficient, minimal cognitive load. Use clear visual separation between contexts, smooth animations (200-300ms), consistent iconography. Platform: Web application, keyboard-friendly.