Clawd BotandClaude Opus 4.6
ca9b510922
- Reset master to upstream/main (16,697 commits) - Overlay 2,271 local-only files (skills, tools, workspace, configs, apps) - Restore IDENTITY.md and USER.md templates - Build verified, gateway running, Discord working Co-Authored-By: Claude Opus 4.6 <[email protected]>
11 KiB
11 KiB
Voice Surface UI Reference
Main Interface
┌─────────────────────────────────────────────┐
│ │
│ 🎤 Voice Surface │
│ │
│ ┌─────────────────────────────────────┐ │
│ │ │ │
│ │ Ready to record │ │
│ │ │ │
│ └─────────────────────────────────────┘ │
│ │
│ ╭─────────╮ │
│ │ │ │
│ │ Hold │ ← Push-to-Talk │
│ │ to │ Button │
│ │ Talk │ │
│ │ │ │
│ ╰─────────╯ │
│ │
│ 🟢 Connected │
│ │
└─────────────────────────────────────────────┘
During Recording
┌─────────────────────────────────────────────┐
│ │
│ 🎤 Voice Surface │
│ │
│ ┌─────────────────────────────────────┐ │
│ │ │ │
│ │ Recording... (release to send) │ │
│ │ │ │
│ └─────────────────────────────────────┘ │
│ │
│ ╭─────────╮ │
│ │ │ │
│ │ ◉ REC │ ← Recording │
│ │ │ (pulsing) │
│ │ │ │
│ │ │ │
│ ╰─────────╯ │
│ │
│ 🟢 Connected │
│ │
└─────────────────────────────────────────────┘
Processing
┌─────────────────────────────────────────────┐
│ │
│ 🎤 Voice Surface │
│ │
│ ┌─────────────────────────────────────┐ │
│ │ │ │
│ │ Processing audio... │ │
│ │ │ │
│ └─────────────────────────────────────┘ │
│ │
│ ╭─────────╮ │
│ │ │ │
│ │ Hold │ ← Disabled while │
│ │ to │ processing │
│ │ Talk │ │
│ │ │ │
│ ╰─────────╯ │
│ │
│ ┌─────────────────────────────────────┐ │
│ │ You said: │ │
│ │ What's the weather today? │ │
│ └─────────────────────────────────────┘ │
│ │
│ 🟢 Connected │
│ │
└─────────────────────────────────────────────┘
Reply Received
┌─────────────────────────────────────────────┐
│ │
│ 🎤 Voice Surface │
│ │
│ ┌─────────────────────────────────────┐ │
│ │ │ │
│ │ Playing response │ │
│ │ │ │
│ └─────────────────────────────────────┘ │
│ │
│ ╭─────────╮ │
│ │ │ │
│ │ Hold │ ← Ready for next │
│ │ to │ interaction │
│ │ Talk │ │
│ │ │ │
│ ╰─────────╯ │
│ │
│ ┌─────────────────────────────────────┐ │
│ │ You said: │ │
│ │ What's the weather today? │ │
│ └─────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────┐ │
│ │ OpenClaw: │ │
│ │ I don't have real-time weather │ │
│ │ data access, but I can help you... │ │
│ └─────────────────────────────────────┘ │
│ │
│ 🟢 Connected │
│ │
└─────────────────────────────────────────────┘
Status Messages
The status bar shows real-time pipeline progress:
- Ready to record - Idle state
- Recording... (release to send) - Capturing audio
- Sending audio... - Uploading to server
- Processing audio... - Server received data
- Audio converted to WAV - Format conversion (if needed)
- Transcribing... - Running STT
- Thinking... - Agent processing
- Generating speech... - Running TTS
- Playing response - Audio playback
- Ready to record - Back to idle
Error States
┌─────────────────────────────────────────────┐
│ │
│ 🎤 Voice Surface │
│ │
│ ┌─────────────────────────────────────┐ │
│ │ ⚠️ │ │
│ │ Microphone access denied │ │
│ │ │ │
│ └─────────────────────────────────────┘ │
│ (red background) │
│ │
│ ╭─────────╮ │
│ │ │ │
│ │ Hold │ ← Disabled │
│ │ to │ │
│ │ Talk │ │
│ │ │ │
│ ╰─────────╯ │
│ (grayed out) │
│ │
│ 🔴 Disconnected │
│ │
└─────────────────────────────────────────────┘
Color Scheme
- Background: Purple gradient (667eea → 764ba2)
- Card: White with transparency + blur (glassmorphism)
- Button (idle): Red gradient (ff6b6b → ff4757)
- Button (recording): Darker red (ee5a6f → c23866) with pulse animation
- Button (disabled): Gray (#888)
- Status (normal): White background with transparency
- Status (error): Red background with transparency
- Text: White throughout
- Connection indicator: 🟢 Green (connected), 🔴 Red (disconnected)
Interactions
Mouse/Touch
- Press button → Start recording
- Release button → Stop & send
- Move away while pressed → Stop & send
Keyboard
- Spacebar press → Start recording
- Spacebar release → Stop & send
Visual Feedback
- Button scales up on hover (1.05x)
- Button scales down on press (0.95x)
- Button pulses during recording
- Status box changes color on error
- Transcript/reply boxes appear when data received
Accessibility Notes
- Large touch target (200px × 200px button)
- High contrast colors
- Clear status messages
- Keyboard support (spacebar)
- Visual feedback for all states
- No small text or icons requiring precision
Browser Compatibility
Tested on:
- ✅ Chrome/Chromium 90+
- ✅ Firefox 88+
- ✅ Safari 14+ (macOS/iOS)
- ✅ Edge 90+
Required APIs:
- MediaRecorder (WebM/Opus support)
- WebSocket
- getUserMedia
- Web Audio API (for playback)