hoangsonww/AI-RAG-Assistant-Chatbot
View on GitHubAdd voice input and text-to-speech for chat interactions
Open
#12 opened on Aug 6, 2025
documentationenhancementgood first issuehelp wanted
Repository metrics
- Stars
- (43 stars)
- PR merge metrics
- (PR metrics pending)
Description
Description:
Enable users to interact with Lumina via voice, allowing speech-to-text input and AI responses read aloud via text-to-speech. This will improve accessibility, support hands-free usage, and create a more natural conversational experience.
Acceptance Criteria:
- Integrate the Web Speech API (or a suitable polyfill) for speech-to-text user input in the chat UI.
- Add a “microphone” button in the chat input area to start/stop recording, with a clear visual recording indicator.
- Convert captured audio to text and populate the chat input before sending as a message.
- Use the Web Speech Synthesis API for client-side TTS to read AI responses aloud automatically.
- Provide playback controls (play/pause, volume) for spoken responses.
- Add settings toggles so users can enable/disable voice input and/or TTS separately.
- Ensure graceful fallback to text-only mode on browsers that don’t support the Speech APIs.
Tasks:
- Research cross-browser compatibility for Web Speech APIs and choose polyfills if necessary.
- Create a
VoiceInputReact component with mic button and recording state UI. - Hook up speech recognition to feed transcribed text into the existing chat input.
- Build a
TextToSpeechservice using Web Speech Synthesis, with UI controls for playback. - Extend user profile settings to include voice input and TTS toggles.
- Add Playwright tests (or mocks) to verify the voice recording and playback flows.
- Update the README and in-app tooltips to guide users on using voice features.
Estimated Effort: ~2 sprints