👋 feat: remove Edge TTS (#6885)

* feat: remove Edge TTS

* remove the remaining edge code

* chore: cleanup

* chore: cleanup package-lock

Author: berry-13

client/package.json

@@ -73,7 +73,6 @@
     "lodash": "^4.17.21",
     "lucide-react": "^0.394.0",
     "match-sorter": "^6.3.4",
-    "msedge-tts": "^2.0.0",
     "qrcode.react": "^4.2.0",
     "rc-input-number": "^7.4.2",
     "react": "^18.2.0",

client/src/common/types.ts

@@ -29,7 +29,6 @@ export enum STTEndpoints {
 
 export enum TTSEndpoints {
   browser = 'browser',
-  edge = 'edge',
   external = 'external',
 }
 

client/src/components/Audio/TTS.tsx

@@ -2,9 +2,8 @@
 import { useEffect, useMemo } from 'react';
 import { useRecoilValue } from 'recoil';
 import type { TMessageAudio } from '~/common';
-import { useLocalize, useTTSBrowser, useTTSEdge, useTTSExternal } from '~/hooks';
-import { VolumeIcon, VolumeMuteIcon, Spinner } from '~/components/svg';
-import { useToastContext } from '~/Providers/ToastContext';
+import { useLocalize, useTTSBrowser, useTTSExternal } from '~/hooks';
+import { VolumeIcon, VolumeMuteIcon, Spinner } from '~/components';
 import { logger } from '~/utils';
 import store from '~/store';
 
@@ -85,97 +84,6 @@ export function BrowserTTS({ isLast, index, messageId, content, className }: TMe
   );
 }
 
-export function EdgeTTS({ isLast, index, messageId, content, className }: TMessageAudio) {
-  const localize = useLocalize();
-  const playbackRate = useRecoilValue(store.playbackRate);
-  const isBrowserSupported = useMemo(
-    () => typeof MediaSource !== 'undefined' && MediaSource.isTypeSupported('audio/mpeg'),
-    [],
-  );
-
-  const { showToast } = useToastContext();
-  const { toggleSpeech, isSpeaking, isLoading, audioRef } = useTTSEdge({
-    isLast,
-    index,
-    messageId,
-    content,
-  });
-
-  const renderIcon = (size: string) => {
-    if (isLoading === true) {
-      return <Spinner size={size} />;
-    }
-
-    if (isSpeaking === true) {
-      return <VolumeMuteIcon size={size} />;
-    }
-
-    return <VolumeIcon size={size} />;
-  };
-
-  useEffect(() => {
-    const messageAudio = document.getElementById(`audio-${messageId}`) as HTMLAudioElement | null;
-    if (!messageAudio) {
-      return;
-    }
-    if (playbackRate != null && playbackRate > 0 && messageAudio.playbackRate !== playbackRate) {
-      messageAudio.playbackRate = playbackRate;
-    }
-  }, [audioRef, isSpeaking, playbackRate, messageId]);
-
-  logger.log(
-    'MessageAudio: audioRef.current?.src, audioRef.current',
-    audioRef.current?.src,
-    audioRef.current,
-  );
-
-  return (
-    <>
-      <button
-        className={className}
-        onClickCapture={() => {
-          if (!isBrowserSupported) {
-            showToast({
-              message: localize('com_nav_tts_unsupported_error'),
-              status: 'error',
-            });
-            return;
-          }
-          if (audioRef.current) {
-            audioRef.current.muted = false;
-          }
-          toggleSpeech();
-        }}
-        type="button"
-        title={isSpeaking === true ? localize('com_ui_stop') : localize('com_ui_read_aloud')}
-      >
-        {renderIcon('19')}
-      </button>
-      {isBrowserSupported ? (
-        <audio
-          ref={audioRef}
-          controls
-          preload="none"
-          controlsList="nodownload nofullscreen noremoteplayback"
-          style={{
-            position: 'absolute',
-            overflow: 'hidden',
-            display: 'none',
-            height: '0px',
-            width: '0px',
-          }}
-          src={audioRef.current?.src}
-          onError={(error) => {
-            logger.error('Error fetching audio:', error);
-          }}
-          id={`audio-${messageId}`}
-          autoPlay
-        />
-      ) : null}
-    </>
-  );
-}
-
 export function ExternalTTS({ isLast, index, messageId, content, className }: TMessageAudio) {
   const localize = useLocalize();
   const playbackRate = useRecoilValue(store.playbackRate);

client/src/components/Audio/Voices.tsx

@@ -1,39 +1,11 @@
 import React from 'react';
 import { useRecoilState } from 'recoil';
 import type { Option } from '~/common';
-import { useLocalize, useTTSBrowser, useTTSEdge, useTTSExternal } from '~/hooks';
+import { useLocalize, useTTSBrowser, useTTSExternal } from '~/hooks';
 import { Dropdown } from '~/components/ui';
 import { logger } from '~/utils';
 import store from '~/store';
 
-export function EdgeVoiceDropdown() {
-  const localize = useLocalize();
-  const { voices = [] } = useTTSEdge();
-  const [voice, setVoice] = useRecoilState(store.voice);
-
-  const handleVoiceChange = (newValue?: string | Option) => {
-    logger.log('Edge Voice changed:', newValue);
-    const newVoice = typeof newValue === 'string' ? newValue : newValue?.value;
-    if (newVoice != null) {
-      return setVoice(newVoice.toString());
-    }
-  };
-
-  return (
-    <div className="flex items-center justify-between">
-      <div>{localize('com_nav_voice_select')}</div>
-      <Dropdown
-        key={`edge-voice-dropdown-${voices.length}`}
-        value={voice ?? ''}
-        options={voices}
-        onChange={handleVoiceChange}
-        sizeClasses="min-w-[200px] !max-w-[400px] [--anchor-max-width:400px]"
-        testId="EdgeVoiceDropdown"
-      />
-    </div>
-  );
-}
-
 export function BrowserVoiceDropdown() {
   const localize = useLocalize();
   const { voices = [] } = useTTSBrowser();

client/src/components/Chat/Messages/MessageAudio.tsx

@@ -1,15 +1,14 @@
 import { memo } from 'react';
 import { useRecoilValue } from 'recoil';
 import type { TMessageAudio } from '~/common';
-import { BrowserTTS, EdgeTTS, ExternalTTS } from '~/components/Audio/TTS';
+import { BrowserTTS, ExternalTTS } from '~/components/Audio/TTS';
 import { TTSEndpoints } from '~/common';
 import store from '~/store';
 
 function MessageAudio(props: TMessageAudio) {
   const engineTTS = useRecoilValue<string>(store.engineTTS);
 
   const TTSComponents = {
-    [TTSEndpoints.edge]: EdgeTTS,
     [TTSEndpoints.browser]: BrowserTTS,
     [TTSEndpoints.external]: ExternalTTS,
   };

client/src/components/Nav/SettingsTabs/Speech/TTS/EngineTTSDropdown.tsx

@@ -15,13 +15,9 @@ const EngineTTSDropdown: React.FC<EngineTTSDropdownProps> = ({ external }) => {
   const endpointOptions = external
     ? [
       { value: 'browser', label: localize('com_nav_browser') },
-      { value: 'edge', label: localize('com_nav_edge') },
       { value: 'external', label: localize('com_nav_external') },
     ]
-    : [
-      { value: 'browser', label: localize('com_nav_browser') },
-      { value: 'edge', label: localize('com_nav_edge') },
-    ];
+    : [{ value: 'browser', label: localize('com_nav_browser') }];
 
   const handleSelect = (value: string) => {
     setEngineTTS(value);

client/src/components/Nav/SettingsTabs/Speech/TTS/VoiceDropdown.tsx

@@ -1,14 +1,9 @@
 import { useRecoilValue } from 'recoil';
-import {
-  EdgeVoiceDropdown,
-  BrowserVoiceDropdown,
-  ExternalVoiceDropdown,
-} from '~/components/Audio/Voices';
+import { BrowserVoiceDropdown, ExternalVoiceDropdown } from '~/components/Audio/Voices';
 import store from '~/store';
 import { TTSEndpoints } from '~/common';
 
 const voiceDropdownComponentsMap = {
-  [TTSEndpoints.edge]: EdgeVoiceDropdown,
   [TTSEndpoints.browser]: BrowserVoiceDropdown,
   [TTSEndpoints.external]: ExternalVoiceDropdown,
 };

client/src/hooks/Audio/index.ts

@@ -3,4 +3,3 @@ export { default as useCustomAudioRef } from './useCustomAudioRef';
 export { default as usePauseGlobalAudio } from './usePauseGlobalAudio';
 export { default as useTTSExternal } from './useTTSExternal';
 export { default as useTTSBrowser } from './useTTSBrowser';
-export { default as useTTSEdge } from './useTTSEdge';

client/src/hooks/Audio/useTTSEdge.ts

@@ -6,7 +6,6 @@ import type { Option } from '~/common';
 import useTextToSpeechExternal from '~/hooks/Input/useTextToSpeechExternal';
 import useTextToSpeechBrowser from '~/hooks/Input/useTextToSpeechBrowser';
 import useGetAudioSettings from '~/hooks/Input/useGetAudioSettings';
-import useTextToSpeechEdge from '~/hooks/Input/useTextToSpeechEdge';
 import useAudioRef from '~/hooks/Audio/useAudioRef';
 import { usePauseGlobalAudio } from '../Audio';
 import { logger } from '~/utils';
@@ -40,12 +39,6 @@ const useTextToSpeech = (props?: TUseTextToSpeech) => {
     voices: voicesLocal,
   } = useTextToSpeechBrowser({ setIsSpeaking });
 
-  const {
-    generateSpeechEdge,
-    cancelSpeechEdge,
-    voices: voicesEdge,
-  } = useTextToSpeechEdge({ setIsSpeaking });
-
   const {
     generateSpeechExternal,
     cancelSpeech: cancelSpeechExternal,
@@ -61,26 +54,23 @@ const useTextToSpeech = (props?: TUseTextToSpeech) => {
 
   const generateSpeech = useMemo(() => {
     const map = {
-      edge: generateSpeechEdge,
       browser: generateSpeechLocal,
       external: generateSpeechExternal,
     };
 
     return map[textToSpeechEndpoint];
-  }, [generateSpeechEdge, generateSpeechExternal, generateSpeechLocal, textToSpeechEndpoint]);
+  }, [generateSpeechExternal, generateSpeechLocal, textToSpeechEndpoint]);
 
   const cancelSpeech = useMemo(() => {
     const map = {
-      edge: cancelSpeechEdge,
       browser: cancelSpeechLocal,
       external: cancelSpeechExternal,
     };
     return map[textToSpeechEndpoint];
-  }, [cancelSpeechEdge, cancelSpeechExternal, cancelSpeechLocal, textToSpeechEndpoint]);
+  }, [cancelSpeechExternal, cancelSpeechLocal, textToSpeechEndpoint]);
 
   const isLoading = useMemo(() => {
     const map = {
-      edge: false,
       browser: false,
       external: isLoadingExternal,
     };
@@ -89,13 +79,12 @@ const useTextToSpeech = (props?: TUseTextToSpeech) => {
 
   const voices: Option[] | string[] = useMemo(() => {
     const voiceMap = {
-      edge: voicesEdge,
       browser: voicesLocal,
       external: voicesExternal,
     };
 
     return voiceMap[textToSpeechEndpoint];
-  }, [textToSpeechEndpoint, voicesEdge, voicesExternal, voicesLocal]);
+  }, [textToSpeechEndpoint, voicesExternal, voicesLocal]);
 
   useEffect(() => {
     const firstVoice = voices[0];