Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2026-01-18 00:15:30 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 9

🔀 refactor: Modularize TTS Logic for Improved Browser support (#3657)

Browse source 
* WIP: message audio refactor

* WIP: use MessageAudio by provider

* fix: Update MessageAudio component to use TTSEndpoints enum

* feat: Update useTextToSpeechBrowser hook to handle errors and improve error logging

* feat: Add voice dropdown components for different TTS engines

* docs: update incorrect `voices` example

changed `voice: ''` to `voices: ['alloy']`

* feat: Add brwoser support check for Edge TTS engine component with error toast if not supported

---------

Co-authored-by: Marco Beretta <81851188+berry-13@users.noreply.github.com>
This commit is contained in:
Danny Avila 2024-08-15 11:34:25 -04:00 • committed by GitHub
parent bcde0beb47
commit dba704079c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
18 changed files with 784 additions and 187 deletions
Download patch file Download diff file Expand all files Collapse all files

46
client/src/components/Nav/SettingsTabs/Speech/TTS/VoiceDropdown.tsx
View file

@ -1,37 +1,21 @@
import React from 'react';
import { useRecoilState, useRecoilValue } from 'recoil';
import type { Option } from '~/common';
import DropdownNoState from '~/components/ui/DropdownNoState';
import { useLocalize, useTextToSpeech } from '~/hooks';
import { logger } from '~/utils';
import { useRecoilValue } from 'recoil';
import {
EdgeVoiceDropdown,
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,
};
export default function VoiceDropdown() {
const localize = useLocalize();
const { voices = [] } = useTextToSpeech();
const [voice, setVoice] = useRecoilState(store.voice);
const engineTTS = useRecoilValue<string>(store.engineTTS);
const VoiceDropdownComponent = voiceDropdownComponentsMap[engineTTS];
const handleVoiceChange = (newValue?: string | Option) => {
logger.log('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>
<DropdownNoState
key={`voice-dropdown-${engineTTS}-${voices.length}`}
value={voice}
options={voices}
onChange={handleVoiceChange}
sizeClasses="min-w-[200px] !max-w-[400px] [--anchor-max-width:400px]"
anchor="bottom start"
testId="VoiceDropdown"
/>
</div>
);
return <VoiceDropdownComponent />;
}