feat: Add Clear Text Eraser Button to Call page TTS Composer

[Kritika200520]

🚀 Program

GSSoC

📝 Description

Adds a "Clear" / Eraser button to the inline TextToSpeech composer on the Call page. This allows users to clear the text entry area with a single click, creating a consistent and user-friendly experience across both the Call and Compose pages.

🔗 Related Issue

Closes #407

🔄 Type of Change

• 🐛 Bug fix
• ✨ New feature
• 🔍 SEO improvement
• 🎨 Style / UI improvement
• ♿ Accessibility improvement
• 📝 Documentation
• ⚙️ CI / configuration
• 🧹 Refactor / cleanup

🧪 How to Test

1. Go to the Call page where the inline TextToSpeech composer is rendered.
2. Enter some text into the textarea composer.
3. Click the newly added Clear button (with the Eraser icon).
4. Verify the text in the composer is wiped clean, the character count resets to 0 / 300, and the button disables itself

✅ Checklist

• I am contributing under GSSoC, NSOC, SSOC, or ELUSOC
• My code follows the project's existing style
• I have tested my changes in a browser
• I have linked the related issue above
• My PR title follows Conventional Commits format (e.g. feat: Add "Clear Text" Eraser Button to Call page TTS Composer)

---

Summary by cubic

Adds a Clear button to the Call page TTS composer to wipe the textarea in one click. Previously users deleted text manually; now the button clears text, resets the 0/300 counter, and is disabled when empty for parity with the Compose page.

• Renders a “Clear” control with an Eraser icon from lucide-react, plus aria-label and title for accessibility.
• Places the button next to the character counter; no changes to Speak behavior or keyboard shortcuts.

^{Written for commit 78cd867. Summary will update on new commits.}

Summary by CodeRabbit

• New Features
  • Added a “Clear text” button to quickly remove all entered text.
  • The button is disabled when the text area is empty.
  • Character count remains visible alongside the new control.

[vercel]

@Kritika200520 is attempting to deploy a commit to the itzzavdhesh's projects Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

✍️ DCO Sign-off Needed

Hey @Kritika200520! 👋 One or more commits in this PR are missing a Signed-off-by: line.

Warning

• ef89f76 feat: Add Clear Text Eraser Button to Call page TTS Composer
• 78cd867 Merge branch 'main' into feat/clear-text-button

How to fix:

For the latest commit:

git commit --amend --signoff
git push --force-with-lease

For multiple commits, replace N with the number to update:

git rebase --signoff HEAD~N
git push --force-with-lease

This comment will update automatically after you push.

---

_{🤖 VoiceForge Automation · Updates automatically on edits}

[github-actions]

🎉 PR Ready for Mentor Review

Hey @Kritika200520! 👋 Your PR passed all checks and is now in the GSSoC review queue.

Note

🔗 Closing: #407 · 📐 24 lines across 1 file(s) · 📬 Already requested or no eligible reviewer found

@sabeenaviklar @Anushreebasics @itsdakshjain @snehkris @Mrigakshi-Rathore @Itzzavdheshh @Nitya-003 @4f4d @lovestaco, this PR is ready for your review — please confirm scope, check behavior and tests, then approve or request changes.

Important

This is not an approval. Please wait for mentor feedback before expecting a merge. If changes are requested, push them to this same branch and keep the PR focused on the linked issue.

---

_{🤖 VoiceForge Automation · Updates automatically on edits}

[coderabbitai]

Warning

Review limit reached

@Itzzavdheshh, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 49 minutes

You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository.

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 54abd8b9-b536-427e-a378-13f808970ab6

📥 Commits

Reviewing files that changed from the base of the PR and between ef89f76 and 78cd867.

📒 Files selected for processing (1)

• client/src/components/TextToSpeech.jsx

📝 Walkthrough

Walkthrough

The TextToSpeech composer adds an Eraser button beside the character counter. Clicking it clears the textarea, while the button is disabled when no text is present.

Changes

Text composer controls

Layer / File(s)	Summary
Add clear-text control client/src/components/TextToSpeech.jsx	Imports the Eraser icon and adds an accessible clear button that calls setText(""), is disabled for empty text, and preserves the character counter.

Estimated code review effort: 2 (Simple) | ~10 minutes

Possibly related PRs

• itzzavdhesh/VoiceForge#408: Modifies the same character counter UI in TextToSpeech.jsx.

Suggested labels: accessibility, quality:clean

Suggested reviewers: ffrazi, vivek0028

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (1 warning, 1 inconclusive)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	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.
Linked Issues check	❓ Inconclusive	Core clear-button behavior is present, but accessibility requirements like aria-label, hover styles, and keyboard nav aren't verifiable from the summary.	Share the button markup and styling diff so accessibility requirements can be confirmed.

✅ 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 clearly describes the main change: adding a Clear Text Eraser button to the Call page TTS composer.
Out of Scope Changes check	✅ Passed	The summary shows only the intended TextToSpeech clear-button update, with no unrelated changes.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

Actionable comments posted: 1

🤖 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.

Inline comments:
In `@client/src/components/TextToSpeech.jsx`:
- Around line 140-146: Update the Clear text button’s disabled condition in
TextToSpeech to include the component’s disabled prop alongside the empty-text
check, ensuring it is inactive whenever the composer is disabled or has no text.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 276204d1-cf3e-4b3c-a557-e0857ac15a56

📥 Commits

Reviewing files that changed from the base of the PR and between e915118 and ef89f76.

📒 Files selected for processing (1)

• client/src/components/TextToSpeech.jsx

[cubic-dev-ai]

All reported issues were addressed across 1 file

<sub>Reply with feedback, questions, or to request a fix.

Re-trigger cubic</sub>

[itsdakshjain]

Good work, just one note both cubic and coderabit pointing a minor change for control consistency.
Rest lgtm

[github-actions]

❌ Merge Policy Violation

Caution

Unauthorized Merge — Pull request #1161 was merged by @Itzzavdheshh (mentor) without any review on record.

VoiceForge guidelines require contributors/mentors to submit at least one review (approval, comment, or changes requested) before merging a pull request to ensure code quality and point-tracking integrity.

📊 Violation Summary

Parameter	Details
Merged By	@Itzzavdheshh (mentor)
Review Count	0 reviews on record
PR Author	@Kritika200520
PR Number	#1161

⚠️ Action Required (@itzzavdhesh):

• Please review the merged code for quality and scope.
• Consider reverting the merge if it was done inappropriately.
  • Ensure your repository ruleset or branch protection rules are active.

---

_{🤖 VoiceForge Automation}

[github-actions]

🎊 PR Merged Successfully

Hey @Kritika200520! 👋 Congratulations and thank you for your contribution to VoiceForge!

Note

🔗 Linked issue(s): #407 · ✅ Marked as merged and complete

Maintainers may still handle final cleanup, release notes, or follow-up tracking after the merge.

---

_{🤖 VoiceForge Automation · Updates automatically on edits}