70 lines
1.3 KiB
Markdown
70 lines
1.3 KiB
Markdown
|
# 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`
|
||
|
|
|