Skip to content

fix(web): voice input no longer shifts the composer's model controls #32000

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
koushikxd wants to merge 5 commits into
base: main
Choose a base branch
from
+36 −30
Open

fix(web): voice input no longer shifts the composer's model controls #32000

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
b3e5f07
fix(web): voice input no longer shifts the composer's model controls
koushikxd Nov 6, 2026
b3cd7cf
fix(web): keep the newest waveform bars and the test timer readable w…
koushikxd Nov 6, 2026
dbd8dc8
Merge remote-tracking branch 'github/main' into fix/voice-input-compo…
maria-rcks Nov 6, 2026
784e393
Merge remote-tracking branch 'origin/main' into pr32000-merge
koushikxd Nov 11, 2026
9c64b8e
Merge remote-tracking branch 'origin/main' into pr32000-merge
koushikxd Nov 13, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
66 changes: 36 additions & 30 deletions apps/web/src/components/chat/ChatComposer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1834,6 +1834,7 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
},
});
const { blocksSubmission: voiceInputActive, submitAfterDictation } = speechInput;
const voiceControlsOpen = speechInput.available && speechInput.state.phase !== "idle";
// A compact footer gives the dictation capsule the whole row beside the send button.
const dictationTakesFooter = isComposerFooterCompact && speechInput.state.phase !== "idle";
const submissionTarget = activePendingProgress ? "pending-user-input" : "provider-turn";
Expand Down Expand Up @@ -3667,16 +3668,35 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
}
className="flex min-w-0 flex-1 flex-nowrap items-center justify-end gap-2"
>
<div
ref={attachExpandedComposerControls}
data-chat-composer-controls="footer"
data-chat-composer-footer-controls="true"
className={cn(
"relative flex min-w-0 flex-1 items-center justify-end gap-0.5",
dictationTakesFooter && "hidden",
)}
>
{composerControls}
<div className="relative flex min-w-0 flex-1 items-center">
<div
ref={attachExpandedComposerControls}
data-chat-composer-controls="footer"
data-chat-composer-footer-controls="true"
className={cn(
"relative flex min-w-0 flex-1 items-center justify-end gap-0.5 transition-[opacity,visibility] duration-150 ease-out",
voiceControlsOpen && "invisible opacity-0",
)}
>
{composerControls}
</div>
{/* Outside the measured controls so the timer's text changes never re-measure them. */}
{voiceControlsOpen ? (
<div className="absolute inset-0 flex items-center justify-end transition-[opacity,translate] duration-200 ease-(--ease-drawer) starting:translate-x-2 starting:opacity-0 motion-reduce:starting:translate-x-0">
<ComposerSpeechRecordingPill
state={speechInput.state}
progress={null}
finishShortcutLabel={dictationShortcutLabel}
cancelShortcutLabel="Esc"
level={speechInput.level}
disabled={dictationDisabled}
onStart={() => void speechInput.start()}
onStop={() => void speechInput.stop()}
onCancel={() => speechInput.cancel()}
onSkipPostProcessing={() => speechInput.skipPostProcessing()}
/>
</div>
) : null}
</div>
<ComposerFooterPrimaryActions
// Stop state belongs to one thread; the composer stays mounted across threads.
Expand Down Expand Up @@ -3723,26 +3743,12 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
onToggleKeepFullHistory={props.onToggleKeepFullHistory}
>
{speechInput.available ? (
<>
<ComposerSpeechRecordingPill
state={speechInput.state}
progress={null}
finishShortcutLabel={dictationShortcutLabel}
cancelShortcutLabel="Esc"
level={speechInput.level}
disabled={dictationDisabled}
onStart={() => void speechInput.start()}
onStop={() => void speechInput.stop()}
onCancel={() => speechInput.cancel()}
onSkipPostProcessing={() => speechInput.skipPostProcessing()}
/>
<ComposerSpeechButton
state={speechInput.state}
shortcutLabel={dictationShortcutLabel}
disabled={dictationDisabled}
onStart={() => void speechInput.start()}
/>
</>
<ComposerSpeechButton
state={speechInput.state}
shortcutLabel={dictationShortcutLabel}
disabled={dictationDisabled}
onStart={() => void speechInput.start()}
/>
) : null}
<VoiceInputSetup
environmentId={speechInput.transcriptionEnvironmentId}
Expand Down
Loading