👋 feat: remove Edge TTS (#6885)

* feat: remove Edge TTS

* remove the remaining edge code

* chore: cleanup

* chore: cleanup package-lock

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,7 +1,7 @@
 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';
 
@@ -9,7 +9,6 @@ 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,
 };