Add audio-mode button with shared Waveform primitives#666
Merged
Conversation
Drop misused aria-pressed on WaveformButton (one-shot stop, not a toggle), add role=status announcement for active recording/dictation, gate animations on motion-safe.
Discriminated union on isRecording forces recordingBars to be passed when recording — no more silent fallback.
Three sibling testId props collapse to a single testIds object — same DOM ids, easier to read at the call site.
Waveform now takes pixel heights directly; new audioLevelsToBarHeights helper handles the analyser-value-to-px conversion. Restores the 'pure visual primitive' framing — non-audio consumers can use Waveform without inheriting the audio scale.
Same handler runs in both states; the new name says so.
Replace three copies of the sine-drive boilerplate with one hook in stories/helpers.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This pull request adds comprehensive support and tests for an audio transcription mode button in the
ChatInputcomponent. The changes introduce a dedicated button for starting and stopping audio transcription, ensure it appears or is disabled under the correct conditions, and add thorough test coverage for its behavior. The implementation also refactors dictation button rendering for clarity and maintainability.Audio Transcription Mode Button Implementation:
Introduced the
ChatInputAudioModeButtonand integrated it intoChatInput, displaying it when audio transcription is enabled, the input is empty, and the user is in compose mode. The button toggles recording and updates its state based on recording status and other conditions. [1] [2] [3] [4]Added logic to disable or hide the audio transcription button when dictation is active, an attachment is present or transcribing, or other relevant states (e.g., loading, token limits). [1] [2]
Testing Enhancements:
Added extensive tests to
ChatInput.test.tsxcovering all major behaviors of the audio transcription mode button, including visibility, toggling, disabling, and interactions with dictation and attachments.Mocked the new
useAudioTranscriptionRecorderhook and ensured its behavior is properly simulated in tests. [1] [2] [3]Dictation Button Refactor:
ChatInputto use a dedicatedWaveformButtoncomponent when dictation is active, improving code clarity and separating concerns between dictation and transcription UI. [1] [2]Code Cleanup:
DICTATION_WAVEFORM_MAX_BAR_HEIGHT_PXas part of the dictation button refactor.