🎙️ fix: Optimize and Fix Browser TTS Incompatibility (firefox) (#3627)

* fix: 'disable' MsEdgeTTS on unsupported browser (firefox)

* refactor: only pass necessary props to HoverButton MessageAudio

* refactor: Fix conditional comparison operators in MessageAudio component

* refactor: Remove console.log statement in MessageAudio component

client/src/hooks/Input/useTextToSpeechEdge.ts

@@ -1,5 +1,5 @@
 import { useRecoilValue } from 'recoil';
-import { useState, useCallback, useRef, useEffect } from 'react';
+import { useState, useCallback, useRef, useEffect, useMemo } from 'react';
 import { MsEdgeTTS, OUTPUT_FORMAT } from 'msedge-tts';
 import { useToastContext } from '~/Providers';
 import useLocalize from '~/hooks/useLocalize';
@@ -29,6 +29,8 @@ function useTextToSpeechEdge(): UseTextToSpeechEdgeReturn {
   const pendingBuffers = useRef<Uint8Array[]>([]);
   const { showToast } = useToastContext();
 
+  const isBrowserSupported = useMemo(() => MediaSource.isTypeSupported('audio/mpeg'), []);
+
   const fetchVoices = useCallback(() => {
     if (!ttsRef.current) {
       ttsRef.current = new MsEdgeTTS();
@@ -198,14 +200,23 @@ function useTextToSpeechEdge(): UseTextToSpeechEdgeReturn {
   }, [showToast, localize]);
 
   useEffect(() => {
+    if (!MediaSource.isTypeSupported('audio/mpeg')) {
+      return;
+    }
     fetchVoices();
   }, [fetchVoices]);
 
   useEffect(() => {
+    if (!MediaSource.isTypeSupported('audio/mpeg')) {
+      return;
+    }
     initializeTTS();
   }, [voiceName, initializeTTS]);
 
   useEffect(() => {
+    if (!MediaSource.isTypeSupported('audio/mpeg')) {
+      return;
+    }
     initializeMediaSource();
     return () => {
       if (mediaSourceRef.current) {
@@ -214,6 +225,15 @@ function useTextToSpeechEdge(): UseTextToSpeechEdgeReturn {
     };
   }, [initializeMediaSource]);
 
+  if (!isBrowserSupported) {
+    return {
+      generateSpeechEdge: () => ({}),
+      cancelSpeechEdge: () => ({}),
+      isSpeaking: false,
+      voices: [],
+    };
+  }
+
   return { generateSpeechEdge, cancelSpeechEdge, isSpeaking, voices };
 }