[feat] Integrate audio recording into ChatInput widget #12835
Merged
Conversation
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
Contributor
✅ Snyk checks have passed. No issues have been found so far.
💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse. |
Contributor
Author
This stack of pull requests is managed by Graphite. Learn more about stacking. |
This was referenced Oct 20, 2025
Contributor
✅ PR preview is ready!
|
![graphite-app[bot]](https://avatars.githubusercontent.com/in/158384?s=60&v=4){kind=small}
frontend/lib/src/components/widgets/AudioInput/AudioInput.test.tsx
Outdated
Show resolved
Hide resolved
Contributor
📉 Python coverage change detectedThe Python unit test coverage has decreased by 0.0000%
✅ Coverage change is within normal range. Coverage by files
|
sfc-gh-nbellante
force-pushed
the
nico/pr8-chatinput-integration
branch
from
d8dc6fd to
d8de826
Compare
sfc-gh-nbellante
force-pushed
the
nico/pr7-chatinput-components
branch
from
deb8f05 to
53062ef
Compare
sfc-gh-nbellante
added
security-assessment-completed
sfc-gh-nbellante
force-pushed
the
nico/pr8-chatinput-integration
branch
from
d8de826 to
bcfdda6
Compare
sfc-gh-nbellante
force-pushed
the
nico/pr7-chatinput-components
branch
2 times, most recently
from
662c525 to
fa19cbe
Compare
sfc-gh-nbellante
force-pushed
the
nico/pr8-chatinput-integration
branch
2 times, most recently
from
2109c8a to
7f52651
Compare
sfc-gh-nbellante
force-pushed
the
nico/pr7-chatinput-components
branch
from
fa19cbe to
1d2cf42
Compare
sfc-gh-nbellante
force-pushed
the
nico/pr8-chatinput-integration
branch
from
7f52651 to
d8c8b84
Compare
sfc-gh-nbellante
force-pushed
the
nico/pr7-chatinput-components
branch
from
1d2cf42 to
9c1fd45
Compare
sfc-gh-nbellante
force-pushed
the
nico/pr8-chatinput-integration
branch
from
d8c8b84 to
b68c2ad
Compare
sfc-gh-nbellante
force-pushed
the
nico/pr8-chatinput-integration
branch
from
b68c2ad to
bb13287
Compare
sfc-gh-nbellante
force-pushed
the
nico/pr7-chatinput-components
branch
from
9c1fd45 to
5dbf8af
Compare
sfc-gh-nbellante
force-pushed
the
nico/pr8-chatinput-integration
branch
from
bb13287 to
f71021d
Compare
sfc-gh-nbellante
force-pushed
the
nico/pr7-chatinput-components
branch
2 times, most recently
from
53b4659 to
9ba9e8d
Compare
sfc-gh-bnisco
approved these changes
Oct 31, 2025
| bottom: "0px", | ||
| // Calculate the right padding to account for button(s) on the right | ||
| // Each button is: iconSizes.xl + 2 * spacing.sm | ||
| // When acceptAudio is true, there are 2 buttons (mic + send) with extra margin |
Collaborator
There was a problem hiding this comment.
note: My previous comment about re-structuring this so we aren't unnecessarily coupling this still stands: #12835
Contributor
Author
There was a problem hiding this comment.
I have no idea where this is being used actually. I was trying to tweak this earlier and get it to not overlap the placeholder text, but it wasn't changing anything and I found that the actual padding was coming from a paddingRight elsewhere. Let me see if this can be removed entirely.
Contributor
Author
There was a problem hiding this comment.
Ah, gem from claude.
The wrapper exists solely to push the character count left to avoid the absolutely positioned buttons.
Comment on lines
+673
to
+676
| onClick={() => { | ||
| handleRecordingApprove().catch(_error => { | ||
| // Error handling is done via controller events | ||
| }) |
Collaborator
There was a problem hiding this comment.
suggestion (non-blocking): This should be wrapped in a useCallback.
Comment on lines
+694
to
+698
| onClick={(e: React.MouseEvent) => { | ||
| handleMicClick(e).catch(_error => { | ||
| // Error handling is done via controller events | ||
| }) | ||
| }} |
Collaborator
There was a problem hiding this comment.
suggestion (non-blocking): This should be wrapped in a useCallback.
sfc-gh-nbellante
force-pushed
the
nico/pr8-chatinput-integration
branch
from
317e4cf to
8ab4bd4
Compare
sfc-gh-nbellante
force-pushed
the
nico/pr6-audio-infra
branch
from
dc6bbd0 to
2f6226e
Compare
sfc-gh-nbellante
force-pushed
the
nico/pr8-chatinput-integration
branch
from
8ab4bd4 to
804f153
Compare
sfc-gh-nbellante
force-pushed
the
nico/pr6-audio-infra
branch
2 times, most recently
from
244738a to
41b2ef3
Compare
sfc-gh-nbellante
force-pushed
the
nico/pr6-audio-infra
branch
from
41b2ef3 to
e45c02d
Compare
sfc-gh-nbellante
changed the base branch from
nico/pr6-audio-infra
to
graphite-base/12835
Add audio recording capability to the ChatInput widget with waveform visualization and approve/cancel controls. Includes shared logger for ChatInput components. - Add WaveformController integration for live audio recording - Add recording state management and UI controls - Add shared logger.ts for ChatInput component logging - Add comprehensive test coverage for audio recording flow
Update AudioInput and useWaveformController to support being controlled externally by ChatInput. Changes include: - Add controllerRef pattern to allow parent components to access controller methods - Fix circular dependency by moving upload logic out of controller events - Add error handling comments for silent catch blocks - Update AudioInput test to match new controller pattern
Move StyledChatAudioWave from removed component library to widget's styled-components file and update import path.
- Consolidate styled-components imports into single block - Add empty line between import groups - Move StyledChatAudioWave to correct import location
When copying StyledChatAudioWave from PR7, we missed the width: 100% that was added in PR8's inline styles refactor. Without explicit width, the waveform collapses to 0 width and becomes invisible despite recording working.
When recording, use static positioning instead of absolute so buttons participate in flex layout alongside waveform. This fixes overlapping layout issues.
Add acceptAudio prop to StyledInputInstructionsContainer to account for both mic and send buttons when audio is enabled. Doubles the right padding calculation from 1 button to 2 buttons to prevent overlap.
Add extra spacing.sm to account for the gap between mic and send buttons when calculating right padding for InputInstructions.
Double the final margin from spacing.sm to 2*spacing.sm when acceptAudio is true to prevent overlap with mic button.
Apply the same conditional padding logic to the textarea input that we use for InputInstructions - account for 2 buttons when acceptAudio is true.
sfc-gh-nbellante
force-pushed
the
nico/pr8-chatinput-integration
branch
from
804f153 to
ddd2d4a
Compare
sfc-gh-nbellante
force-pushed
the
graphite-base/12835
branch
from
e45c02d to
34fbfe4
Compare
Remove extra spacing.sm margin - 80px (2 × 40px buttons) is sufficient padding.
sfc-gh-nbellante
force-pushed
the
nico/pr8-chatinput-integration
branch
from
ddd2d4a to
ee72aaf
Compare
Contributor
Author
Merge activity
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Describe your changes
This PR refactors the AudioInput component and adds audio recording capabilities to the ChatInput component:
In AudioInput:
In ChatInput:
Testing Plan
Contribution License Agreement
By submitting this pull request you agree that all contributions to this project are made under the Apache 2.0 license.