🎛️ 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:
Danny Avila 2024-08-13 02:42:49 -04:00 committed by GitHub
parent 8cbb6ba166
commit 05696233a9
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
20 changed files with 436 additions and 367 deletions

View file

@ -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,
};
}