feat(ui): added wave animation for voice mode#26284
Conversation
Summary of ChangesHello, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request enhances the user experience in voice mode by replacing static text with a visually engaging wave animation. The change involves creating a new reusable UI component that utilizes a sine function to animate bar characters, providing immediate visual feedback when the application is recording. Highlights
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for GitHub and other Google products, sign up here. Footnotes
|
There was a problem hiding this comment.
Code Review
This pull request introduces a new ListeningIndicator component that replaces the static 'Listening...' text in the InputPrompt with an animated wave effect using Unicode block characters. Feedback was provided regarding an accessibility regression, as screen readers may attempt to read the individual characters; it is recommended to add an aria-label to the Text component to ensure users of assistive technology receive the correct context.
|
Size Change: +1.05 kB (0%) Total Size: 33.9 MB
ℹ️ View Unchanged
|
- google-gemini/gemini-cli#26284 merge-after-nits: voice-mode wave animation, must remove duplicate ternary arm before merge - google-gemini/gemini-cli#26282 merge-after-nits (CLOSED, design-of-record): clean-parse equality + trailing-newline preservation for settings.json - docs: append drip-236 block to reviews/INDEX.md
Abhijit-2592
left a comment
There was a problem hiding this comment.
Thanks for the PR! The wave animation is a nice touch for voice mode. I've reviewed the changes and found a few issues that need to be addressed before merging, particularly around accessibility, strict development rules, and a minor duplication bug.
packages/cli/src/ui/components/InputPrompt.tsx
- Lines 1829-1830: There is an accidental duplication of the
showYoloStylingcondition block. - Lines 1834-1836: Moving
"Listening... "to be inline here (next to the prompt indicator) will push the user's input buffer to the right. Previously, it was on its own vertical line above the input (marginBottom={0}). Please verify if this horizontal layout change is intentional, as it might unnecessarily crowd the input line.
packages/cli/src/ui/components/shared/ListeningIndicator.tsx
- Line 3: The copyright year should be updated to
2026as per our strict development rules. - Lines 22-26: The animation does not respect screen readers. Please import and use
useIsScreenReaderEnabledfrominkto disable the animation interval and render a static fallback when a screen reader is active, similar to how it's handled inGeminiSpinner.tsx. - Line 24: The
80msinterval is a bit slow compared to the project's standard30ms(approx ~33fps) used for smooth animations. Consider adjusting this for smoother rendering. - Lines 31-32: Please extract the magic numbers (
0.4,1.2,3.5) into named constants at the top of the file to clarify their purpose in the sine wave calculation. - File Location: Most indicator components (like
LoadingIndicator.tsx,ApprovalModeIndicator.tsx) reside directly inpackages/cli/src/ui/components/rather than theshared/subfolder. Consider moving this file up one directory for consistency.
Abhijit-2592
left a comment
There was a problem hiding this comment.
Thanks for the PR! The wave animation is a nice touch for voice mode. I've reviewed the changes and found a few issues that need to be addressed before merging, particularly around accessibility, strict development rules, and a minor duplication bug.
I also noticed that most indicator components (like LoadingIndicator.tsx, ApprovalModeIndicator.tsx) reside directly in packages/cli/src/ui/components/ rather than the shared/ subfolder. Consider moving this file up one directory for consistency.
Abhijit-2592
left a comment
There was a problem hiding this comment.
Approved with comments
Summary
Added wave UI instead of "Listening..." in the input prompt when the user is in voice mode.
Details
Added
ListeningIndicator.tsxwhich creates a wave animation by displaying 3 bars and sizing them using a sin function and an array of 7 sizes. Replaces the microphone on the left with it when the user is recording.Related Issues
Closes #25493
How to Validate
Enter voice mode and hold the space key. You should see the animation.
Screen.Recording.2026-04-30.at.3.18.55.PM.mov
Pre-Merge Checklist