feat(dictation): allow cancel while transcription is processing

Author: Samigos

src/App.tsx

@@ -195,6 +195,7 @@ function MainApp() {
     dictationHint,
     dictationReady,
     handleToggleDictation,
+    cancelDictation,
     clearDictationTranscript,
     clearDictationError,
     clearDictationHint,
@@ -2435,6 +2436,7 @@ function MainApp() {
     dictationState,
     dictationLevel,
     onToggleDictation: handleToggleDictation,
+    onCancelDictation: cancelDictation,
     dictationTranscript,
     onDictationTranscriptHandled: (id) => {
       clearDictationTranscript(id);
@@ -2540,6 +2542,7 @@ function MainApp() {
       dictationState={dictationState}
       dictationLevel={dictationLevel}
       onToggleDictation={handleToggleDictation}
+      onCancelDictation={cancelDictation}
       onOpenDictationSettings={() => openSettings("dictation")}
       dictationError={dictationError}
       onDismissDictationError={clearDictationError}

src/features/composer/components/Composer.tsx

@@ -106,6 +106,7 @@ type ComposerProps = {
   dictationState?: "idle" | "listening" | "processing";
   dictationLevel?: number;
   onToggleDictation?: () => void;
+  onCancelDictation?: () => void;
   onOpenDictationSettings?: () => void;
   dictationTranscript?: DictationTranscript | null;
   onDictationTranscriptHandled?: (id: string) => void;
@@ -214,6 +215,7 @@ export const Composer = memo(function Composer({
   dictationState = "idle",
   dictationLevel = 0,
   onToggleDictation,
+  onCancelDictation,
   onOpenDictationSettings,
   dictationTranscript = null,
   onDictationTranscriptHandled,
@@ -695,6 +697,7 @@ export const Composer = memo(function Composer({
         dictationState={dictationState}
         dictationLevel={dictationLevel}
         onToggleDictation={onToggleDictation}
+        onCancelDictation={onCancelDictation}
         onOpenDictationSettings={onOpenDictationSettings}
         dictationError={dictationError}
         onDismissDictationError={onDismissDictationError}

src/features/composer/components/ComposerInput.dictation.test.tsx

@@ -0,0 +1,60 @@
+/** @vitest-environment jsdom */
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import { createRef } from "react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { ComposerInput } from "./ComposerInput";
+
+vi.mock("../../../services/dragDrop", () => ({
+  subscribeWindowDragDrop: vi.fn(() => () => {}),
+}));
+
+vi.mock("@tauri-apps/api/core", () => ({
+  convertFileSrc: (path: string) => `tauri://${path}`,
+}));
+
+afterEach(() => {
+  cleanup();
+});
+
+describe("ComposerInput dictation controls", () => {
+  it("uses the mic control to cancel transcription while processing", () => {
+    const onToggleDictation = vi.fn();
+    const onCancelDictation = vi.fn();
+    const onOpenDictationSettings = vi.fn();
+    render(
+      <ComposerInput
+        text=""
+        disabled={false}
+        sendLabel="Send"
+        canStop={false}
+        canSend={false}
+        isProcessing={false}
+        onStop={() => {}}
+        onSend={() => {}}
+        dictationState="processing"
+        dictationEnabled={true}
+        onToggleDictation={onToggleDictation}
+        onCancelDictation={onCancelDictation}
+        onOpenDictationSettings={onOpenDictationSettings}
+        onTextChange={() => {}}
+        onSelectionChange={() => {}}
+        onKeyDown={() => {}}
+        textareaRef={createRef<HTMLTextAreaElement>()}
+        suggestionsOpen={false}
+        suggestions={[]}
+        highlightIndex={0}
+        onHighlightIndex={() => {}}
+        onSelectSuggestion={() => {}}
+      />,
+    );
+
+    const cancelButton = screen.getByRole("button", {
+      name: "Cancel transcription",
+    });
+    fireEvent.click(cancelButton);
+
+    expect(onCancelDictation).toHaveBeenCalledTimes(1);
+    expect(onToggleDictation).not.toHaveBeenCalled();
+    expect(onOpenDictationSettings).not.toHaveBeenCalled();
+  });
+});

src/features/composer/components/ComposerInput.tsx

@@ -12,6 +12,7 @@ import ChevronDown from "lucide-react/dist/esm/icons/chevron-down";
 import ChevronUp from "lucide-react/dist/esm/icons/chevron-up";
 import Mic from "lucide-react/dist/esm/icons/mic";
 import Square from "lucide-react/dist/esm/icons/square";
+import X from "lucide-react/dist/esm/icons/x";
 import Brain from "lucide-react/dist/esm/icons/brain";
 import GitFork from "lucide-react/dist/esm/icons/git-fork";
 import PlusCircle from "lucide-react/dist/esm/icons/plus-circle";
@@ -46,6 +47,7 @@ type ComposerInputProps = {
   dictationLevel?: number;
   dictationEnabled?: boolean;
   onToggleDictation?: () => void;
+  onCancelDictation?: () => void;
   onOpenDictationSettings?: () => void;
   dictationError?: string | null;
   onDismissDictationError?: () => void;
@@ -148,6 +150,7 @@ export function ComposerInput({
   dictationLevel = 0,
   dictationEnabled = false,
   onToggleDictation,
+  onCancelDictation,
   onOpenDictationSettings,
   dictationError = null,
   onDismissDictationError,
@@ -331,27 +334,39 @@ export function ComposerInput({
     }
   }, [canStop, onSend, onStop]);
   const isDictating = dictationState === "listening";
+  const isDictationProcessing = dictationState === "processing";
   const isDictationBusy = dictationState !== "idle";
   const allowOpenDictationSettings = Boolean(
-    onOpenDictationSettings && !dictationEnabled && !disabled,
+    onOpenDictationSettings && !dictationEnabled && !disabled && !isDictationProcessing,
   );
   const micDisabled =
-    disabled || dictationState === "processing" || !dictationEnabled || !onToggleDictation;
+    disabled ||
+    (!allowOpenDictationSettings &&
+      (isDictationProcessing
+        ? !onCancelDictation
+        : !dictationEnabled || !onToggleDictation));
   const micAriaLabel = allowOpenDictationSettings
     ? "Open dictation settings"
-    : dictationState === "processing"
-      ? "Dictation processing"
+    : isDictationProcessing
+      ? "Cancel transcription"
       : isDictating
         ? "Stop dictation"
         : "Start dictation";
   const micTitle = allowOpenDictationSettings
     ? "Dictation disabled. Open settings"
-    : dictationState === "processing"
-      ? "Processing dictation"
+    : isDictationProcessing
+      ? "Cancel transcription"
       : isDictating
         ? "Stop dictation"
         : "Start dictation";
   const handleMicClick = useCallback(() => {
+    if (isDictationProcessing) {
+      if (disabled || !onCancelDictation) {
+        return;
+      }
+      onCancelDictation();
+      return;
+    }
     if (allowOpenDictationSettings) {
       onOpenDictationSettings?.();
       return;
@@ -361,7 +376,10 @@ export function ComposerInput({
     }
     onToggleDictation();
   }, [
+    disabled,
+    isDictationProcessing,
     allowOpenDictationSettings,
+    onCancelDictation,
     micDisabled,
     onOpenDictationSettings,
     onToggleDictation,
@@ -478,15 +496,19 @@ export function ComposerInput({
                     {isExpanded ? "Collapse input" : "Expand input"}
                   </PopoverMenuItem>
                 )}
-                {(onToggleDictation || onOpenDictationSettings) && (
+                {(onToggleDictation || onOpenDictationSettings || onCancelDictation) && (
                   <PopoverMenuItem
                     onClick={handleMobileDictationClick}
-                    disabled={
-                      disabled ||
-                      dictationState === "processing" ||
-                      (!onToggleDictation && !allowOpenDictationSettings)
+                    disabled={micDisabled}
+                    icon={
+                      isDictationProcessing ? (
+                        <X size={14} />
+                      ) : isDictating ? (
+                        <Square size={14} />
+                      ) : (
+                        <Mic size={14} />
+                      )
                     }
-                    icon={isDictating ? <Square size={14} /> : <Mic size={14} />}
                   >
                     {micAriaLabel}
                   </PopoverMenuItem>
@@ -685,19 +707,21 @@ export function ComposerInput({
       <button
         className={`composer-action composer-action--mic${
           isDictationBusy ? " is-active" : ""
-        }${dictationState === "processing" ? " is-processing" : ""}${
+        }${isDictationProcessing ? " is-processing is-stop" : ""}${
           micDisabled ? " is-disabled" : ""
         }`}
         onClick={handleMicClick}
-        disabled={
-          disabled ||
-          dictationState === "processing" ||
-          (!onToggleDictation && !allowOpenDictationSettings)
-        }
+        disabled={micDisabled}
         aria-label={micAriaLabel}
         title={micTitle}
       >
-        {isDictating ? <Square aria-hidden /> : <Mic aria-hidden />}
+        {isDictationProcessing ? (
+          <X aria-hidden />
+        ) : isDictating ? (
+          <Square aria-hidden />
+        ) : (
+          <Mic aria-hidden />
+        )}
       </button>
       <button
         className={`composer-action${canStop ? " is-stop" : " is-send"}${

src/features/layout/hooks/layoutNodes/buildPrimaryNodes.tsx

@@ -178,6 +178,7 @@ export function buildPrimaryNodes(options: LayoutNodesOptions): PrimaryLayoutNod
       dictationState={options.dictationState}
       dictationLevel={options.dictationLevel}
       onToggleDictation={options.onToggleDictation}
+      onCancelDictation={options.onCancelDictation}
       onOpenDictationSettings={options.onOpenDictationSettings}
       dictationTranscript={options.dictationTranscript}
       onDictationTranscriptHandled={options.onDictationTranscriptHandled}

src/features/layout/hooks/layoutNodes/types.ts

@@ -467,6 +467,7 @@ export type LayoutNodesOptions = {
   dictationState: DictationSessionState;
   dictationLevel: number;
   onToggleDictation: () => void;
+  onCancelDictation?: () => void;
   dictationTranscript: DictationTranscript | null;
   onDictationTranscriptHandled: (id: string) => void;
   dictationError: string | null;

src/features/workspaces/components/WorkspaceHome.tsx

@@ -76,6 +76,7 @@ type WorkspaceHomeProps = {
   dictationState: DictationSessionState;
   dictationLevel: number;
   onToggleDictation: () => void;
+  onCancelDictation?: () => void;
   onOpenDictationSettings: () => void;
   dictationError: string | null;
   onDismissDictationError: () => void;
@@ -138,6 +139,7 @@ export function WorkspaceHome({
   dictationState,
   dictationLevel,
   onToggleDictation,
+  onCancelDictation,
   onOpenDictationSettings,
   dictationError,
   onDismissDictationError,
@@ -386,6 +388,7 @@ export function WorkspaceHome({
             dictationLevel={dictationLevel}
             dictationEnabled={dictationEnabled}
             onToggleDictation={onToggleDictation}
+            onCancelDictation={onCancelDictation}
             onOpenDictationSettings={onOpenDictationSettings}
             dictationError={dictationError}
             onDismissDictationError={onDismissDictationError}