mirror of
https://github.com/danny-avila/LibreChat.git
synced 2025-12-20 10:20:15 +01:00
🎛️ fix: Improve Frontend Practices for Audio Settings (#3624)
* refactor: do not call await inside useCallbacks, rely on updates for dropdown * fix: remember last selected voice * refactor: Update Speech component to use TypeScript in useCallback * refactor: Update Dropdown component styles to match header theme
This commit is contained in:
parent
8cbb6ba166
commit
05696233a9
20 changed files with 436 additions and 367 deletions
|
|
@ -37,7 +37,7 @@ function useTextToSpeechExternal(messageId: string, isLast: boolean, index = 0)
|
|||
const playAudioPromise = (blobUrl: string) => {
|
||||
const newAudio = new Audio(blobUrl);
|
||||
const initializeAudio = () => {
|
||||
if (playbackRate && playbackRate !== 1 && playbackRate > 0) {
|
||||
if (playbackRate != null && playbackRate !== 1 && playbackRate > 0) {
|
||||
newAudio.playbackRate = playbackRate;
|
||||
}
|
||||
};
|
||||
|
|
@ -47,7 +47,7 @@ function useTextToSpeechExternal(messageId: string, isLast: boolean, index = 0)
|
|||
|
||||
playPromise().catch((error: Error) => {
|
||||
if (
|
||||
error?.message &&
|
||||
error.message &&
|
||||
error.message.includes('The play() request was interrupted by a call to pause()')
|
||||
) {
|
||||
console.log('Play request was interrupted by a call to pause()');
|
||||
|
|
@ -92,7 +92,7 @@ function useTextToSpeechExternal(messageId: string, isLast: boolean, index = 0)
|
|||
|
||||
if (cacheTTS && inputText) {
|
||||
const cache = await caches.open('tts-responses');
|
||||
const request = new Request(inputText!);
|
||||
const request = new Request(inputText);
|
||||
const response = new Response(audioBlob);
|
||||
cache.put(request, response);
|
||||
}
|
||||
|
|
@ -118,7 +118,7 @@ function useTextToSpeechExternal(messageId: string, isLast: boolean, index = 0)
|
|||
});
|
||||
|
||||
const startMutation = (text: string, download: boolean) => {
|
||||
const formData = createFormData(text, voice);
|
||||
const formData = createFormData(text, voice ?? '');
|
||||
setDownloadFile(download);
|
||||
processAudio(formData);
|
||||
};
|
||||
|
|
@ -178,9 +178,7 @@ function useTextToSpeechExternal(messageId: string, isLast: boolean, index = 0)
|
|||
return isLocalSpeaking || (isLast && globalIsPlaying);
|
||||
}, [isLocalSpeaking, globalIsPlaying, isLast]);
|
||||
|
||||
const useVoices = () => {
|
||||
return useVoicesQuery().data ?? [];
|
||||
};
|
||||
const { data: voicesData = [] } = useVoicesQuery();
|
||||
|
||||
return {
|
||||
generateSpeechExternal,
|
||||
|
|
@ -188,7 +186,7 @@ function useTextToSpeechExternal(messageId: string, isLast: boolean, index = 0)
|
|||
isLoading,
|
||||
isSpeaking,
|
||||
audioRef,
|
||||
voices: useVoices,
|
||||
voices: voicesData,
|
||||
};
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue