# VTM UI Integration Specification

## Overview

UI integration for Virtual Teller Machine (VTM) with Soul Machines digital human.

## Digital Human Embedding

### Container

**Position**: Modal overlay or side panel
**Size**: Responsive, minimum 600x400px
**Z-index**: High (overlay other content)

### Integration Points

- Session initialization
- Conversation display
- User input (text/voice)
- Workflow step indicators

## Conversation Interface

### Components

- Digital human video/avatar
- Message history
- Input field (text)
- Voice input button
- Workflow progress indicator

### Message Display

- User messages (right-aligned)
- Assistant messages (left-aligned)
- System messages (centered)
- Typing indicators

## Workflow Step Indicators

### Progress Indicator

**Display**:
- Current step
- Completed steps
- Remaining steps
- Estimated time

**Visual**: Progress bar or step list

## Human Escalation UI

### Escalation Trigger

**Button**: "Talk to Human Agent"
**Status**: Show when human agent available
**Transfer**: Smooth transition to human agent

### Escalation Status

- Waiting for agent
- Connected to agent
- Agent typing indicator

## References

- VTM Integration: See `../vtm/soul-machines-integration.md`
- Frontend Architecture: See `frontend-architecture.md`