hoangsonww/AI-RAG-Assistant-Chatbot

Add voice input and text-to-speech for chat interactions

Open

#12 opened on Aug 6, 2025

View on GitHub
 (0 comments) (0 reactions) (1 assignee)TypeScript (14 forks)auto 404
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:

  1. Integrate the Web Speech API (or a suitable polyfill) for speech-to-text user input in the chat UI.
  2. Add a “microphone” button in the chat input area to start/stop recording, with a clear visual recording indicator.
  3. Convert captured audio to text and populate the chat input before sending as a message.
  4. Use the Web Speech Synthesis API for client-side TTS to read AI responses aloud automatically.
  5. Provide playback controls (play/pause, volume) for spoken responses.
  6. Add settings toggles so users can enable/disable voice input and/or TTS separately.
  7. 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 VoiceInput React component with mic button and recording state UI.
  • Hook up speech recognition to feed transcribed text into the existing chat input.
  • Build a TextToSpeech service 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

Contributor guide