From 7d9ca0c8e29d2791851132d94cd053e9000dcbd8 Mon Sep 17 00:00:00 2001
From: Robert Vollmer <rovo89@users.noreply.github.com>
Date: Thu, 15 Jan 2026 09:57:41 +0100
Subject: [PATCH] Add preferWebSpeechApi prop to SpeechInput component

While builtin speech support is nice, consistency is also important.

This option gives developers a way to use the MediaRecorder
implementation for all supported browsers, so they can use e.g. OpenAI
transcriptions with automated language detection everywhere.
---
 packages/elements/src/speech-input.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/elements/src/speech-input.tsx b/packages/elements/src/speech-input.tsx
index 4f37e863..27f41944 100644
--- a/packages/elements/src/speech-input.tsx
+++ b/packages/elements/src/speech-input.tsx
@@ -70,6 +70,7 @@ type SpeechInputMode = "speech-recognition" | "media-recorder" | "none";
 
 export type SpeechInputProps = ComponentProps<typeof Button> & {
   onTranscriptionChange?: (text: string) => void;
+  preferWebSpeechApi?: boolean;
   /**
    * Callback for when audio is recorded using MediaRecorder fallback.
    * This is called in browsers that don't support the Web Speech API (Firefox, Safari).
@@ -80,12 +81,12 @@ export type SpeechInputProps = ComponentProps<typeof Button> & {
   lang?: string;
 };
 
-const detectSpeechInputMode = (): SpeechInputMode => {
+const detectSpeechInputMode = (preferWebSpeechApi: boolean): SpeechInputMode => {
   if (typeof window === "undefined") {
     return "none";
   }
 
-  if ("SpeechRecognition" in window || "webkitSpeechRecognition" in window) {
+  if (preferWebSpeechApi && ("SpeechRecognition" in window || "webkitSpeechRecognition" in window)) {
     return "speech-recognition";
   }
 
@@ -100,6 +101,7 @@ export const SpeechInput = ({
   className,
   onTranscriptionChange,
   onAudioRecorded,
+  preferWebSpeechApi = true,
   lang = "en-US",
   ...props
 }: SpeechInputProps) => {
@@ -115,8 +117,8 @@ export const SpeechInput = ({
 
   // Detect mode on mount
   useEffect(() => {
-    setMode(detectSpeechInputMode());
-  }, []);
+    setMode(detectSpeechInputMode(preferWebSpeechApi));
+  }, [preferWebSpeechApi]);
 
   // Initialize Speech Recognition when mode is speech-recognition
   useEffect(() => {