From 34bb9426a128e8c28a4618d87f3bfce125fb9fad Mon Sep 17 00:00:00 2001
From: shivam <91240327+shivamhwp@users.noreply.github.com>
Date: Tue, 10 Nov 2026 14:08:25 +0000
Subject: [PATCH] fix(web): dictation can be cancelled by touch again

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 apps/web/src/components/chat/ChatComposer.tsx         | 11 ++++++++++-
 apps/web/src/components/chat/ComposerSpeechButton.tsx |  2 +-
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/components/chat/ChatComposer.tsx b/apps/web/src/components/chat/ChatComposer.tsx
index 3031170f591f4..25b5f910a4fc3 100644
--- a/apps/web/src/components/chat/ChatComposer.tsx
+++ b/apps/web/src/components/chat/ChatComposer.tsx
@@ -143,7 +143,7 @@ import {
   useEnvironmentSpeechInput,
   useSpeechUnavailableReason,
 } from "../../speech/useEnvironmentSpeechInput";
-import { ComposerSpeechButton } from "./ComposerSpeechButton";
+import { ComposerSpeechButton, ComposerSpeechCancelButton } from "./ComposerSpeechButton";
 import { VoiceInputErrorPill } from "./VoiceInputErrorPill";
 import { COMPOSER_PILL_SLOT_BUTTON_CLASS_NAME } from "./ComposerPrimaryActions";
 import type { AssistantCitationSourceAnchor } from "~/lib/assistantTextSelection";
@@ -3779,6 +3779,15 @@ export function ChatComposer(props: ChatComposerProps) {
                       onDismiss={() => speechInput.cancel()}
                     />
                   ) : null}
+                  {speechInput.available &&
+                  speechInput.state.phase !== "idle" &&
+                  speechInput.state.phase !== "error" ? (
+                    <ComposerSpeechCancelButton
+                      state={speechInput.state}
+                      shortcutLabel="Esc"
+                      onCancel={() => speechInput.cancel()}
+                    />
+                  ) : null}
                   <VoiceInputSetup
                     environmentId={speechInput.transcriptionEnvironmentId}
                     open={speechInput.setup.open}
diff --git a/apps/web/src/components/chat/ComposerSpeechButton.tsx b/apps/web/src/components/chat/ComposerSpeechButton.tsx
index 4aa8082d95304..fef4cfdb980cd 100644
--- a/apps/web/src/components/chat/ComposerSpeechButton.tsx
+++ b/apps/web/src/components/chat/ComposerSpeechButton.tsx
@@ -142,7 +142,7 @@ function ComposerSpeechStatus(props: {
   );
 }
 
-function ComposerSpeechCancelButton(props: {
+export function ComposerSpeechCancelButton(props: {
   state: VoiceInputState;
   shortcutLabel?: string | null;
   onCancel(): void;