feat: Add Text-to-Speech VoiceOutput component (Fixes #311)#507
feat: Add Text-to-Speech VoiceOutput component (Fixes #311)#507Ixotic27 wants to merge 10 commits into
Conversation
|
@Ixotic27 is attempting to deploy a commit to the aditthyass' projects Team on Vercel. A member of the Team first needs to authorize it. |
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
Note
|
| Layer / File(s) | Summary |
|---|---|
VoiceOutput component structure and voice initialization src/components/VoiceOutput.jsx |
Component setup with React hooks, refs for speechSynthesis and utterance, playback/voice state, and useEffect to load voices and register onvoiceschanged. |
VoiceOutput playback and lifecycle handlers src/components/VoiceOutput.jsx |
handlePlay resumes paused speech or restarts; sanitizes text (removes markdown/code blocks); creates SpeechSynthesisUtterance; selects preferred English voice and sets rate/pitch; attaches onstart/onend/onerror; handleStop cancels speech; feature-detects speechSynthesis. |
VoiceOutput rendering and animation styling src/components/VoiceOutput.jsx, src/index.css |
Renders "Read Aloud" / "Stop" controls with a bar-based animated visualizer while playing. CSS adds @keyframes sound-wave, .animate-sound-wave, and a prefers-reduced-motion: reduce override. |
AgentRunner integration src/components/AgentRunner.jsx |
Imports VoiceOutput and renders <VoiceOutput text={output} /> when non-streaming output is available, placed before RunRating. |
Sequence Diagram
sequenceDiagram
participant User
participant AgentRunner
participant VoiceOutput
participant SpeechSynthesis
User->>AgentRunner: view agent result (output)
AgentRunner->>VoiceOutput: render(text={output})
User->>VoiceOutput: click "Read Aloud"
VoiceOutput->>SpeechSynthesis: create Utterance & speak(utterance)
SpeechSynthesis-->>VoiceOutput: onstart
SpeechSynthesis-->>VoiceOutput: onend / onerror
VoiceOutput->>SpeechSynthesis: cancel() on stop or cleanup
Estimated code review effort
🎯 3 (Moderate) | ⏱️ ~20 minutes
Suggested reviewers
- AditthyaSS
🚥 Pre-merge checks | ✅ 3 | ❌ 2
❌ Failed checks (2 warnings)
| Check name | Status | Explanation | Resolution |
|---|---|---|---|
| Linked Issues check | PR implements text-to-speech with animated visualizer [#311] but lacks speech-to-text (microphone input) functionality which was a core objective. |
Add speech-to-text component to enable users to speak instead of typing, completing the full conversational voice I/O requirement from issue #311. |
|
| Docstring Coverage | Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. | Write docstrings for the functions missing them to satisfy the coverage threshold. |
✅ Passed checks (3 passed)
| Check name | Status | Explanation |
|---|---|---|
| Description Check | ✅ Passed | Check skipped - CodeRabbit’s high-level summary is enabled. |
| Title check | ✅ Passed | The title accurately summarizes the main change: adding a Text-to-Speech VoiceOutput component that was requested in issue #311. |
| Out of Scope Changes check | ✅ Passed | All changes (VoiceOutput component, animations, AgentRunner integration) are directly scoped to implementing TTS functionality requested in issue #311. |
✏️ Tip: You can configure your own custom pre-merge checks in the settings.
✨ Finishing Touches
🧪 Generate unit tests (beta)
- Create PR with unit tests
Comment @coderabbitai help to get the list of available commands and usage tips.
|
Hey @Ixotic27! 👋
|
![mergify[bot]](https://avatars.githubusercontent.com/in/10562?s=60&v=4){kind=small}
There was a problem hiding this comment.
❌ Build is failing on this PR.
Please fix before merging:
- Run
npm run buildlocally - Fix any errors shown
- Push your fix — the check will re-run automatically
Most common issue: broken registry import.
Replace:
import agents from '../agents/registry'
With:
import { useAgents } from '../lib/useAgents'
const { agents } = useAgents()
See CONTRIBUTING.md for help. 🙏
There was a problem hiding this comment.
Pull request overview
Note
Copilot was unable to run its full agentic suite in this review.
Adds a “Read Aloud” voice output feature using the Web Speech API, including an animated audio visualizer, and wires it into the main agent output UI.
Changes:
- Added
VoiceOutputReact component to speak generated output viaspeechSynthesis. - Added CSS keyframes + utility class for the visualizer animation.
- Integrated
VoiceOutputintoAgentRunnerbeneath the agent output.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 7 comments.
| File | Description |
|---|---|
| src/index.css | Adds sound-wave keyframes and .animate-sound-wave animation used by the visualizer. |
| src/components/VoiceOutput.jsx | Introduces the read-aloud UI and speech synthesis logic with an animated visualizer. |
| src/components/AgentRunner.jsx | Renders VoiceOutput using the current output text. |
Comments suppressed due to low confidence (1)
src/components/VoiceOutput.jsx:1
- Using
Math.random()during render makes animation durations change on every re-render, which can cause visual “popping” and unnecessary style churn (and can also create hydration mismatches if SSR is introduced later). Precompute stable durations once (e.g., viauseMemo/useRef) so re-renders don’t re-randomize timings.
import { useState, useEffect, useRef } from "react";
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (1)
src/index.css (1)
195-197: ⚡ Quick winRespect reduced-motion preference for the infinite visualizer animation.
Line 196 runs endlessly with no
prefers-reduced-motionfallback.💡 Proposed fix
.animate-sound-wave { animation: sound-wave 1s ease-in-out infinite; } + +@media (prefers-reduced-motion: reduce) { + .animate-sound-wave { + animation: none; + height: 60%; + } +}🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/index.css` around lines 195 - 197, The infinite animation on .animate-sound-wave should respect the user's reduced-motion preference; update the CSS to add a prefers-reduced-motion media query that disables or removes the animation for .animate-sound-wave (e.g., set animation: none or animation-play-state: paused inside `@media` (prefers-reduced-motion: reduce)) so the sound-wave keyframes are not played for users who prefer reduced motion.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Nitpick comments:
In `@src/index.css`:
- Around line 195-197: The infinite animation on .animate-sound-wave should
respect the user's reduced-motion preference; update the CSS to add a
prefers-reduced-motion media query that disables or removes the animation for
.animate-sound-wave (e.g., set animation: none or animation-play-state: paused
inside `@media` (prefers-reduced-motion: reduce)) so the sound-wave keyframes are
not played for users who prefer reduced motion.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro Plus
Run ID: 3aa82cc1-93cc-4cdf-a878-68145a77fe61
📒 Files selected for processing (3)
src/components/AgentRunner.jsxsrc/components/VoiceOutput.jsxsrc/index.css
|
|
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
@AditthyaSS merge it |
Description - Adds a native Web Speech API Text-to-Speech VoiceOutput component with an animated visualizer. It is displayed under the output in the AgentRunner. Fixes #311. %0A## Pillar - New Features %0A## Checklist - Tested locally
Summary by CodeRabbit
New Features
Style