fix: properly implement space-to-send with hook callback

- Add onSend callback to useVoiceInput options
- Add stopListeningAndSend method that sets a flag before stopping
- When transcription completes, if flag was set, call onSend
- Use setTimeout(0) to let React flush state update before sending
- Simplifies ChatInput code by moving logic into the hook

Author: ammar-agent

src/browser/components/ChatInput/index.tsx

@@ -192,6 +192,7 @@ export const ChatInput: React.FC<ChatInputProps> = (props) => {
   const voiceInput = useVoiceInput({
     onTranscript: handleVoiceTranscript,
     onError: handleVoiceError,
+    onSend: () => void handleSend(),
     openAIKeySet,
   });
 
@@ -986,20 +987,10 @@ export const ChatInput: React.FC<ChatInputProps> = (props) => {
                 ref={(el) => el?.focus()}
                 onClick={voiceInput.isListening ? voiceInput.toggleListening : undefined}
                 onKeyDown={(e) => {
-                  // Space stops recording and sends immediately
+                  // Space stops recording and sends immediately after transcription
                   if (e.key === " " && voiceInput.isListening) {
                     e.preventDefault();
-                    voiceInput.stopListening();
-                    // Small delay to let transcription complete, then send
-                    // The transcript callback will update input, then we send
-                    const checkAndSend = () => {
-                      if (!voiceInput.isTranscribing) {
-                        void handleSend();
-                      } else {
-                        setTimeout(checkAndSend, 100);
-                      }
-                    };
-                    setTimeout(checkAndSend, 100);
+                    voiceInput.stopListeningAndSend();
                   }
                 }}
                 disabled={voiceInput.isTranscribing}

src/browser/hooks/useVoiceInput.ts

@@ -29,6 +29,8 @@ export interface UseVoiceInputOptions {
   onTranscript: (text: string, isFinal: boolean) => void;
   /** Called when an error occurs */
   onError?: (error: string) => void;
+  /** Called to send the message (used by stopListeningAndSend) */
+  onSend?: () => void;
   /** Whether OpenAI API key is configured */
   openAIKeySet: boolean;
 }
@@ -46,33 +48,42 @@ export interface UseVoiceInputResult {
   startListening: () => void;
   /** Stop recording and transcribe */
   stopListening: () => void;
+  /** Stop recording, transcribe, and send when done */
+  stopListeningAndSend: () => void;
   /** Toggle recording state */
   toggleListening: () => void;
 }
 
 export function useVoiceInput(options: UseVoiceInputOptions): UseVoiceInputResult {
-  const { onTranscript, onError, openAIKeySet } = options;
+  const { onTranscript, onError, onSend, openAIKeySet } = options;
 
   const [isListening, setIsListening] = useState(false);
   const [isTranscribing, setIsTranscribing] = useState(false);
 
   const mediaRecorderRef = useRef<MediaRecorder | null>(null);
   const audioChunksRef = useRef<Blob[]>([]);
   const streamRef = useRef<MediaStream | null>(null);
+  // Flag to auto-send after transcription completes
+  const sendAfterTranscribeRef = useRef(false);
 
   const isSupported = isMediaRecorderSupported();
   const isMobile = isMobileDevice();
 
   // Store callbacks in refs to avoid recreating on every render
   const onTranscriptRef = useRef(onTranscript);
   const onErrorRef = useRef(onError);
+  const onSendRef = useRef(onSend);
   useEffect(() => {
     onTranscriptRef.current = onTranscript;
     onErrorRef.current = onError;
-  }, [onTranscript, onError]);
+    onSendRef.current = onSend;
+  }, [onTranscript, onError, onSend]);
 
   const transcribeAudio = useCallback(async (audioBlob: Blob) => {
     setIsTranscribing(true);
+    const shouldSendAfter = sendAfterTranscribeRef.current;
+    sendAfterTranscribeRef.current = false;
+
     try {
       // Convert blob to base64
       const arrayBuffer = await audioBlob.arrayBuffer();
@@ -86,6 +97,10 @@ export function useVoiceInput(options: UseVoiceInputOptions): UseVoiceInputResul
       if (result.success) {
         if (result.data.trim()) {
           onTranscriptRef.current(result.data, true);
+          // Auto-send after transcript is set (use setTimeout to let React update state)
+          if (shouldSendAfter) {
+            setTimeout(() => onSendRef.current?.(), 0);
+          }
         }
       } else {
         onErrorRef.current?.(result.error);
@@ -161,6 +176,11 @@ export function useVoiceInput(options: UseVoiceInputOptions): UseVoiceInputResul
     setIsListening(false);
   }, []);
 
+  const stopListeningAndSend = useCallback(() => {
+    sendAfterTranscribeRef.current = true;
+    stopListening();
+  }, [stopListening]);
+
   const toggleListening = useCallback(() => {
     if (isListening) {
       stopListening();
@@ -188,6 +208,7 @@ export function useVoiceInput(options: UseVoiceInputOptions): UseVoiceInputResul
     shouldShowUI: isSupported && !isMobile && openAIKeySet,
     startListening: () => void startListening(),
     stopListening,
+    stopListeningAndSend,
     toggleListening,
   };
 }