feat(web): add LiveVoiceSession for real-time voice chat (#1345)#1346
Open
feat(web): add LiveVoiceSession for real-time voice chat (#1345)#1346
Conversation
Add a continuous voice conversation mode using the Web Speech API: - New LiveVoiceSession component with speech recognition, waveform visualizer (AudioContext + AnalyserNode), and control bar - Integrate into PiChat with liveMode toggle replacing VoiceRecorder - Three states: IDLE (listening), SENDING (thinking), SPEAKING (placeholder) - Auto-restart recognition on silence, mute/unmute support Closes #1345 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Rewrite the voice panel UI with ElevenLabs-inspired dark theme: - AudioVisualizer: larger canvas (400x80), 3px round-cap bars, state-based colors (zinc idle, blue hearing, emerald speaking), idle breathing animation - Voice panel: backdrop-blur-xl, multi-layer dark shadow, h-52 with centered flex layout and generous spacing - Pill-shaped controls: translucent mute (bg-white/5) and red-tinted end button - Status label: uppercase 11px tracked text - Interim text: italic muted with min-height to prevent layout jank - PiChat toggle: active state shows red pulsing dot + "LIVE" pill badge Closes #1345
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Add a real-time voice conversation mode (Steps 1-3 of the voice chat design):
LiveVoiceSessioncomponent — continuous speech-to-text via Web Speech API (webkitSpeechRecognition), waveform visualizer using AudioContext + AnalyserNode, mute/unmute and end-session controlsliveModestate toggle replaces the top-right VoiceRecorder button with a live voice button; bottom panel overlay shows when activelucide-reacticons; skipped LiveKit Agents UI (requires special shadcn registry) in favor of a lightweight hand-written waveform visualizerState machine
IDLE(listening) →SENDING(thinking, waiting for WS response) → back toIDLE.SPEAKINGstate is a placeholder for Phase 2 (TTS playback).Type of change
enhancementComponent
uiCloses
Closes #1345
Test plan
npm run buildpasses (tsc + vite)