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

🔀 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

94
client/src/components/Audio/Voices.tsx Normal file
View file

@ -0,0 +1,94 @@
import React from 'react';
import { useRecoilState } from 'recoil';
import type { Option } from '~/common';
import DropdownNoState from '~/components/ui/DropdownNoState';
import { useLocalize, useTTSBrowser, useTTSEdge, useTTSExternal } from '~/hooks';
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>
<DropdownNoState
key={`edge-voice-dropdown-${voices.length}`}
value={voice}
options={voices}
onChange={handleVoiceChange}
sizeClasses="min-w-[200px] !max-w-[400px] [--anchor-max-width:400px]"
anchor="bottom start"
testId="EdgeVoiceDropdown"
/>
</div>
);
}
export function BrowserVoiceDropdown() {
const localize = useLocalize();
const { voices = [] } = useTTSBrowser();
const [voice, setVoice] = useRecoilState(store.voice);
const handleVoiceChange = (newValue?: string | Option) => {
logger.log('Browser 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={`browser-voice-dropdown-${voices.length}`}
value={voice}
options={voices}
onChange={handleVoiceChange}
sizeClasses="min-w-[200px] !max-w-[400px] [--anchor-max-width:400px]"
anchor="bottom start"
testId="BrowserVoiceDropdown"
/>
</div>
);
}
export function ExternalVoiceDropdown() {
const localize = useLocalize();
const { voices = [] } = useTTSExternal();
const [voice, setVoice] = useRecoilState(store.voice);
const handleVoiceChange = (newValue?: string | Option) => {
logger.log('External 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={`external-voice-dropdown-${voices.length}`}
value={voice}
options={voices}
onChange={handleVoiceChange}
sizeClasses="min-w-[200px] !max-w-[400px] [--anchor-max-width:400px]"
anchor="bottom start"
testId="ExternalVoiceDropdown"
/>
</div>
);
}