Enable Speech Recognition on IPhone

src/apps/call/CallWizard.tsx

@@ -152,9 +152,10 @@ export function CallWizard(props: { strict?: boolean, conversationId: string, ch
     <StatusCard
       icon={<MicIcon />}
       text={
-        (overriddenRecognition ? 'Speech recognition should be good to go.' : 'There might be a speech recognition issue.')
+        ((overriddenRecognition && !recognition.warnings.length) ? 'Speech recognition should be good to go.' : 'There might be a speech recognition issue.')
         + (recognition.isApiAvailable ? '' : ' Your browser does not support the speech recognition API.')
-        + (recognition.isDeviceNotSupported ? ' Your device does not provide this feature (IPhone?).' : '')
+        + (recognition.isDeviceNotSupported ? ' Your device does not provide this feature.' : '')
+        + (recognition.warnings.length ? ' ⚠️ ' + recognition.warnings.join(' · ') : '')
       }
       button={overriddenRecognition ? undefined : (
         <Button variant='outlined' onClick={handleOverrideRecognition} sx={{ mx: 1 }}>

src/common/components/useCapabilities.ts

@@ -16,6 +16,7 @@ export interface CapabilityBrowserSpeechRecognition {
   mayWork: boolean; // Is the SpeechRecognition API available in the user's browser and device
   isApiAvailable: boolean; // Is the SpeechRecognition API available in the user's browser
   isDeviceNotSupported: boolean; // Is the user's device not supported (e.g., iPhone)
+  warnings: string[];
 }
 
 export { browserSpeechRecognitionCapability as useCapabilityBrowserSpeechRecognition } from './useSpeechRecognition';

src/common/components/useSpeechRecognition.ts

@@ -17,11 +17,12 @@ let cachedCapability: CapabilityBrowserSpeechRecognition | null = null;
 export const browserSpeechRecognitionCapability = (): CapabilityBrowserSpeechRecognition => {
   if (!cachedCapability) {
     const isApiAvailable = !!getSpeechRecognition();
-    const isDeviceNotSupported = isIPhone();
+    const isDeviceNotSupported = false;
     cachedCapability = {
       mayWork: isApiAvailable && !isDeviceNotSupported,
       isApiAvailable,
       isDeviceNotSupported,
+      warnings: isIPhone() ? ['Not tested on this browser/device.'] : [],
     };
   }
   return cachedCapability;