explorer-monorepo/docs/specs/frontend/vtm-ui.md

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