refactor: clean up useVoiceInput with enum state

- Replace isListening/isTranscribing booleans with single state enum
- Merge stopListening/stopListeningAndSend into stop(options?)
- Rename methods: startListening→start, toggleListening→toggle
- Consolidate callback refs into single callbacksRef object
- Move platform checks (isMobile, isSupported) to module scope
- Simplify VoiceInputButton with STATE_CONFIG lookup table
- Inline simple callbacks in ChatInput (no separate handlers)

Author: ammar-agent

src/browser/components/ChatInput/VoiceInputButton.tsx

@@ -1,69 +1,55 @@
 /**
  * Voice input button - floats inside the chat input textarea.
  * Minimal footprint: just an icon that changes color based on state.
- *
- * Visual states:
- * - Idle: Subtle gray mic icon
- * - Recording: Blue pulsing mic
- * - Transcribing: Amber spinning loader
- * - Disabled (no API key): Subtle gray with explanatory tooltip
- * - Hidden: When on mobile or unsupported
  */
 
 import React from "react";
 import { Mic, Loader2 } from "lucide-react";
 import { TooltipWrapper, Tooltip } from "../Tooltip";
 import { formatKeybind, KEYBINDS } from "@/browser/utils/ui/keybinds";
 import { cn } from "@/common/lib/utils";
+import type { VoiceInputState } from "@/browser/hooks/useVoiceInput";
 
 interface VoiceInputButtonProps {
-  isListening: boolean;
-  isTranscribing: boolean;
-  isSupported: boolean;
+  state: VoiceInputState;
   isApiKeySet: boolean;
   shouldShowUI: boolean;
   onToggle: () => void;
   disabled?: boolean;
 }
 
+const STATE_CONFIG: Record<VoiceInputState, { label: string; colorClass: string }> = {
+  idle: { label: "Voice input", colorClass: "text-muted/50 hover:text-muted" },
+  recording: { label: "Stop recording", colorClass: "text-blue-500 animate-pulse" },
+  transcribing: { label: "Transcribing...", colorClass: "text-amber-500" },
+};
+
 export const VoiceInputButton: React.FC<VoiceInputButtonProps> = (props) => {
-  // Don't render on mobile or unsupported platforms
-  if (!props.shouldShowUI) {
-    return null;
-  }
+  if (!props.shouldShowUI) return null;
 
   const needsApiKey = !props.isApiKeySet;
-  const label = needsApiKey
-    ? "Voice input (requires OpenAI API key)"
-    : props.isTranscribing
-      ? "Transcribing..."
-      : props.isListening
-        ? "Stop recording"
-        : "Voice input";
+  const { label, colorClass } = needsApiKey
+    ? { label: "Voice input (requires OpenAI API key)", colorClass: "text-muted/50" }
+    : STATE_CONFIG[props.state];
 
-  const Icon = props.isTranscribing ? Loader2 : Mic;
+  const Icon = props.state === "transcribing" ? Loader2 : Mic;
+  const isTranscribing = props.state === "transcribing";
 
   return (
     <TooltipWrapper inline>
       <button
         type="button"
         onClick={props.onToggle}
-        disabled={
-          (props.disabled ?? false) || !props.isSupported || props.isTranscribing || needsApiKey
-        }
+        disabled={(props.disabled ?? false) || isTranscribing || needsApiKey}
         aria-label={label}
-        aria-pressed={props.isListening}
+        aria-pressed={props.state === "recording"}
         className={cn(
           "inline-flex items-center justify-center rounded p-0.5 transition-colors duration-150",
           "disabled:cursor-not-allowed disabled:opacity-40",
-          props.isTranscribing
-            ? "text-amber-500"
-            : props.isListening
-              ? "text-blue-500 animate-pulse"
-              : "text-muted/50 hover:text-muted"
+          colorClass
         )}
       >
-        <Icon className={cn("h-4 w-4", props.isTranscribing && "animate-spin")} strokeWidth={1.5} />
+        <Icon className={cn("h-4 w-4", isTranscribing && "animate-spin")} strokeWidth={1.5} />
       </button>
       <Tooltip className="tooltip" align="right">
         {needsApiKey ? (

src/browser/components/ChatInput/index.tsx

@@ -160,32 +160,17 @@ export const ChatInput: React.FC<ChatInputProps> = (props) => {
   // Track if OpenAI API key is configured for voice input
   const [openAIKeySet, setOpenAIKeySet] = useState(false);
 
-  // Voice input handling - appends transcribed text to input
-  const handleVoiceTranscript = useCallback(
-    (text: string, _isFinal: boolean) => {
-      // Whisper only returns final results, append to input with space separator if needed
+  // Voice input - appends transcribed text to input
+  const voiceInput = useVoiceInput({
+    onTranscript: (text) => {
       setInput((prev) => {
         const separator = prev.length > 0 && !prev.endsWith(" ") ? " " : "";
         return prev + separator + text;
       });
     },
-    [setInput]
-  );
-
-  const handleVoiceError = useCallback(
-    (error: string) => {
-      setToast({
-        id: Date.now().toString(),
-        type: "error",
-        message: error,
-      });
+    onError: (error) => {
+      setToast({ id: Date.now().toString(), type: "error", message: error });
     },
-    [setToast]
-  );
-
-  const voiceInput = useVoiceInput({
-    onTranscript: handleVoiceTranscript,
-    onError: handleVoiceError,
     onSend: () => void handleSend(),
     openAIKeySet,
   });
@@ -508,7 +493,7 @@ export const ChatInput: React.FC<ChatInputProps> = (props) => {
         });
         return;
       }
-      voiceInput.toggleListening();
+      voiceInput.toggle();
     };
     window.addEventListener(CUSTOM_EVENTS.TOGGLE_VOICE_INPUT, handler as EventListener);
     return () =>
@@ -857,7 +842,7 @@ export const ChatInput: React.FC<ChatInputProps> = (props) => {
         });
         return;
       }
-      voiceInput.toggleListening();
+      voiceInput.toggle();
       return;
     }
 
@@ -990,43 +975,42 @@ export const ChatInput: React.FC<ChatInputProps> = (props) => {
           />
 
           <div className="relative flex items-end" data-component="ChatInputControls">
-            {/* Recording/transcribing overlay - dramatically replaces textarea */}
-            {voiceInput.isListening || voiceInput.isTranscribing ? (
+            {/* Recording/transcribing overlay - replaces textarea when active */}
+            {voiceInput.state !== "idle" ? (
               <button
                 type="button"
                 ref={(el) => el?.focus()}
-                onClick={voiceInput.isListening ? voiceInput.toggleListening : undefined}
+                onClick={voiceInput.state === "recording" ? voiceInput.toggle : undefined}
                 onKeyDown={(e) => {
-                  // Space stops recording and sends immediately after transcription
-                  if (e.key === " " && voiceInput.isListening) {
+                  if (e.key === " " && voiceInput.state === "recording") {
                     e.preventDefault();
-                    voiceInput.stopListeningAndSend();
+                    voiceInput.stop({ send: true });
                   }
                 }}
-                disabled={voiceInput.isTranscribing}
+                disabled={voiceInput.state === "transcribing"}
                 className={cn(
                   "mb-1 flex min-h-[60px] w-full items-center justify-center gap-3 rounded-md border px-4 py-4 transition-all",
-                  voiceInput.isListening
+                  voiceInput.state === "recording"
                     ? "cursor-pointer border-blue-500 bg-blue-500/10"
                     : "cursor-wait border-amber-500 bg-amber-500/10"
                 )}
-                aria-label={voiceInput.isListening ? "Stop recording" : "Transcribing..."}
+                aria-label={voiceInput.state === "recording" ? "Stop recording" : "Transcribing..."}
               >
                 <WaveformBars
-                  colorClass={voiceInput.isListening ? "bg-blue-500" : "bg-amber-500"}
+                  colorClass={voiceInput.state === "recording" ? "bg-blue-500" : "bg-amber-500"}
                 />
                 <span
                   className={cn(
                     "text-sm font-medium",
-                    voiceInput.isListening ? "text-blue-500" : "text-amber-500"
+                    voiceInput.state === "recording" ? "text-blue-500" : "text-amber-500"
                   )}
                 >
-                  {voiceInput.isListening
+                  {voiceInput.state === "recording"
                     ? `Recording... space to send, ${formatKeybind(KEYBINDS.TOGGLE_VOICE_INPUT)} to stop`
                     : "Transcribing..."}
                 </span>
                 <WaveformBars
-                  colorClass={voiceInput.isListening ? "bg-blue-500" : "bg-amber-500"}
+                  colorClass={voiceInput.state === "recording" ? "bg-blue-500" : "bg-amber-500"}
                   mirrored
                 />
               </button>
@@ -1057,12 +1041,10 @@ export const ChatInput: React.FC<ChatInputProps> = (props) => {
                 {/* Floating voice input button inside textarea */}
                 <div className="absolute right-2 bottom-2">
                   <VoiceInputButton
-                    isListening={voiceInput.isListening}
-                    isTranscribing={voiceInput.isTranscribing}
-                    isSupported={voiceInput.isSupported}
+                    state={voiceInput.state}
                     isApiKeySet={voiceInput.isApiKeySet}
                     shouldShowUI={voiceInput.shouldShowUI}
-                    onToggle={voiceInput.toggleListening}
+                    onToggle={voiceInput.toggle}
                     disabled={disabled || isSending}
                   />
                 </div>