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

🎛️ fix: Improve Frontend Practices for Audio Settings (#3624)

Browse source 
* 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
Download patch file Download diff file Expand all files Collapse all files

61
client/src/hooks/Input/useTextToSpeechBrowser.ts
View file

@ -1,21 +1,46 @@
import { useRecoilState } from 'recoil';
import { useState } from 'react';
import { useState, useEffect, useCallback } from 'react';
import store from '~/store';
interface VoiceOption {
value: string;
display: string;
label: string;
}
function useTextToSpeechBrowser() {
const [cloudBrowserVoices] = useRecoilState(store.cloudBrowserVoices);
const [isSpeaking, setIsSpeaking] = useState(false);
const [voiceName] = useRecoilState(store.voice);
const [voices, setVoices] = useState<VoiceOption[]>([]);
const updateVoices = useCallback(() => {
const availableVoices = window.speechSynthesis
.getVoices()
.filter((v) => cloudBrowserVoices || v.localService === true);
const voiceOptions: VoiceOption[] = availableVoices.map((v) => ({
value: v.name,
label: v.name,
}));
setVoices(voiceOptions);
}, [cloudBrowserVoices]);
useEffect(() => {
if (window.speechSynthesis.getVoices().length) {
updateVoices();
} else {
window.speechSynthesis.onvoiceschanged = updateVoices;
}
return () => {
window.speechSynthesis.onvoiceschanged = null;
};
}, [updateVoices]);
const generateSpeechLocal = (text: string) => {
const synth = window.speechSynthesis;
const voices = synth.getVoices().filter((v) => cloudBrowserVoices || v.localService === true);
const voice = voices.find((v) => v.name === voiceName);
const voice = voices.find((v) => v.value === voiceName);
if (!voice) {
return;
@ -23,7 +48,7 @@ function useTextToSpeechBrowser() {
synth.cancel();
const utterance = new SpeechSynthesisUtterance(text);
utterance.voice = voice;
utterance.voice = synth.getVoices().find((v) => v.name === voice.value) || null;
utterance.onend = () => {
setIsSpeaking(false);
};
@ -32,34 +57,10 @@ function useTextToSpeechBrowser() {
};
const cancelSpeechLocal = () => {
const synth = window.speechSynthesis;
synth.cancel();
window.speechSynthesis.cancel();
setIsSpeaking(false);
};
const voices = (): Promise<VoiceOption[]> => {
return new Promise((resolve) => {
const getAndMapVoices = () => {
const availableVoices = speechSynthesis
.getVoices()
.filter((v) => cloudBrowserVoices || v.localService === true);
const voiceOptions: VoiceOption[] = availableVoices.map((v) => ({
value: v.name,
display: v.name,
}));
resolve(voiceOptions);
};
if (speechSynthesis.getVoices().length) {
getAndMapVoices();
} else {
speechSynthesis.onvoiceschanged = getAndMapVoices;
}
});
};
return { generateSpeechLocal, cancelSpeechLocal, isSpeaking, voices };
}