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

🎛️ 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

24
client/src/components/Input/SetKeyDialog/SetKeyDialog.tsx
View file

@ -35,13 +35,13 @@ const formSet: Set<string> = new Set([
]); ]);
const EXPIRY = { const EXPIRY = {
THIRTY_MINUTES: { display: 'in 30 minutes', value: 30 * 60 * 1000 }, THIRTY_MINUTES: { label: 'in 30 minutes', value: 30 * 60 * 1000 },
TWO_HOURS: { display: 'in 2 hours', value: 2 * 60 * 60 * 1000 }, TWO_HOURS: { label: 'in 2 hours', value: 2 * 60 * 60 * 1000 },
TWELVE_HOURS: { display: 'in 12 hours', value: 12 * 60 * 60 * 1000 }, TWELVE_HOURS: { label: 'in 12 hours', value: 12 * 60 * 60 * 1000 },
ONE_DAY: { display: 'in 1 day', value: 24 * 60 * 60 * 1000 }, ONE_DAY: { label: 'in 1 day', value: 24 * 60 * 60 * 1000 },
ONE_WEEK: { display: 'in 7 days', value: 7 * 24 * 60 * 60 * 1000 }, ONE_WEEK: { label: 'in 7 days', value: 7 * 24 * 60 * 60 * 1000 },
ONE_MONTH: { display: 'in 30 days', value: 30 * 24 * 60 * 60 * 1000 }, ONE_MONTH: { label: 'in 30 days', value: 30 * 24 * 60 * 60 * 1000 },
NEVER: { display: 'never', value: 0 }, NEVER: { label: 'never', value: 0 },
}; };
const SetKeyDialog = ({ const SetKeyDialog = ({
@ -72,7 +72,7 @@ const SetKeyDialog = ({
const [userKey, setUserKey] = useState(''); const [userKey, setUserKey] = useState('');
const { data: endpointsConfig } = useGetEndpointsQuery(); const { data: endpointsConfig } = useGetEndpointsQuery();
const [expiresAtLabel, setExpiresAtLabel] = useState(EXPIRY.TWELVE_HOURS.display); const [expiresAtLabel, setExpiresAtLabel] = useState(EXPIRY.TWELVE_HOURS.label);
const { getExpiry, saveUserKey } = useUserKey(endpoint); const { getExpiry, saveUserKey } = useUserKey(endpoint);
const { showToast } = useToastContext(); const { showToast } = useToastContext();
const localize = useLocalize(); const localize = useLocalize();
@ -84,7 +84,7 @@ const SetKeyDialog = ({
}; };
const submit = () => { const submit = () => {
const selectedOption = expirationOptions.find((option) => option.display === expiresAtLabel); const selectedOption = expirationOptions.find((option) => option.label === expiresAtLabel);
let expiresAt; let expiresAt;
if (selectedOption?.value === 0) { if (selectedOption?.value === 0) {
@ -170,14 +170,14 @@ const SetKeyDialog = ({
{expiryTime === 'never' {expiryTime === 'never'
? localize('com_endpoint_config_key_never_expires') ? localize('com_endpoint_config_key_never_expires')
: `${localize('com_endpoint_config_key_encryption')} ${new Date( : `${localize('com_endpoint_config_key_encryption')} ${new Date(
expiryTime, expiryTime ?? 0,
).toLocaleString()}`} ).toLocaleString()}`}
</small>{' '} </small>{' '}
<Dropdown <Dropdown
label="Expires " label="Expires "
value={expiresAtLabel} value={expiresAtLabel}
onChange={handleExpirationChange} onChange={handleExpirationChange}
options={expirationOptions.map((option) => option.display)} options={expirationOptions.map((option) => option.label)}
sizeClasses="w-[185px]" sizeClasses="w-[185px]"
/> />
<FormProvider {...methods}> <FormProvider {...methods}>
@ -185,7 +185,7 @@ const SetKeyDialog = ({
userKey={userKey} userKey={userKey}
setUserKey={setUserKey} setUserKey={setUserKey}
endpoint={ endpoint={
endpoint === EModelEndpoint.gptPlugins && config?.azure endpoint === EModelEndpoint.gptPlugins && (config?.azure ?? false)
? EModelEndpoint.azureOpenAI ? EModelEndpoint.azureOpenAI
: endpoint : endpoint
} }

10
client/src/components/Nav/ExportConversation/ExportModal.tsx
View file

@ -25,11 +25,11 @@ export default function ExportModal({
const [recursive, setRecursive] = useState<boolean | 'indeterminate'>(true); const [recursive, setRecursive] = useState<boolean | 'indeterminate'>(true);
const typeOptions = [ const typeOptions = [
{ value: 'screenshot', display: 'screenshot (.png)' }, { value: 'screenshot', label: 'screenshot (.png)' },
{ value: 'text', display: 'text (.txt)' }, { value: 'text', label: 'text (.txt)' },
{ value: 'markdown', display: 'markdown (.md)' }, { value: 'markdown', label: 'markdown (.md)' },
{ value: 'json', display: 'json (.json)' }, { value: 'json', label: 'json (.json)' },
{ value: 'csv', display: 'csv (.csv)' }, { value: 'csv', label: 'csv (.csv)' },
]; ];
useEffect(() => { useEffect(() => {

10
client/src/components/Nav/SettingsTabs/Chat/FontSizeSelector.tsx
View file

@ -14,11 +14,11 @@ export default function FontSizeSelector() {
}; };
const options = [ const options = [
{ value: 'text-xs', display: localize('com_nav_font_size_xs') }, { value: 'text-xs', label: localize('com_nav_font_size_xs') },
{ value: 'text-sm', display: localize('com_nav_font_size_sm') }, { value: 'text-sm', label: localize('com_nav_font_size_sm') },
{ value: 'text-base', display: localize('com_nav_font_size_base') }, { value: 'text-base', label: localize('com_nav_font_size_base') },
{ value: 'text-lg', display: localize('com_nav_font_size_lg') }, { value: 'text-lg', label: localize('com_nav_font_size_lg') },
{ value: 'text-xl', display: localize('com_nav_font_size_xl') }, { value: 'text-xl', label: localize('com_nav_font_size_xl') },
]; ];
return ( return (

6
client/src/components/Nav/SettingsTabs/Chat/ForkSettings.tsx
View file

@ -12,9 +12,9 @@ export const ForkSettings = () => {
const [remember, setRemember] = useRecoilState<boolean>(store.rememberForkOption); const [remember, setRemember] = useRecoilState<boolean>(store.rememberForkOption);
const forkOptions = [ const forkOptions = [
{ value: ForkOptions.DIRECT_PATH, display: localize('com_ui_fork_visible') }, { value: ForkOptions.DIRECT_PATH, label: localize('com_ui_fork_visible') },
{ value: ForkOptions.INCLUDE_BRANCHES, display: localize('com_ui_fork_branches') }, { value: ForkOptions.INCLUDE_BRANCHES, label: localize('com_ui_fork_branches') },
{ value: ForkOptions.TARGET_LEVEL, display: localize('com_ui_fork_all_target') }, { value: ForkOptions.TARGET_LEVEL, label: localize('com_ui_fork_all_target') },
]; ];
return ( return (

48
client/src/components/Nav/SettingsTabs/General/General.tsx
View file

@ -21,9 +21,9 @@ export const ThemeSelector = ({
const localize = useLocalize(); const localize = useLocalize();
const themeOptions = [ const themeOptions = [
{ value: 'system', display: localize('com_nav_theme_system') }, { value: 'system', label: localize('com_nav_theme_system') },
{ value: 'dark', display: localize('com_nav_theme_dark') }, { value: 'dark', label: localize('com_nav_theme_dark') },
{ value: 'light', display: localize('com_nav_theme_light') }, { value: 'light', label: localize('com_nav_theme_light') },
]; ];
return ( return (
@ -81,27 +81,27 @@ export const LangSelector = ({
// Create an array of options for the Dropdown // Create an array of options for the Dropdown
const languageOptions = [ const languageOptions = [
{ value: 'auto', display: localize('com_nav_lang_auto') }, { value: 'auto', label: localize('com_nav_lang_auto') },
{ value: 'en-US', display: localize('com_nav_lang_english') }, { value: 'en-US', label: localize('com_nav_lang_english') },
{ value: 'zh-CN', display: localize('com_nav_lang_chinese') }, { value: 'zh-CN', label: localize('com_nav_lang_chinese') },
{ value: 'zh-TW', display: localize('com_nav_lang_traditionalchinese') }, { value: 'zh-TW', label: localize('com_nav_lang_traditionalchinese') },
{ value: 'ar-EG', display: localize('com_nav_lang_arabic') }, { value: 'ar-EG', label: localize('com_nav_lang_arabic') },
{ value: 'de-DE', display: localize('com_nav_lang_german') }, { value: 'de-DE', label: localize('com_nav_lang_german') },
{ value: 'es-ES', display: localize('com_nav_lang_spanish') }, { value: 'es-ES', label: localize('com_nav_lang_spanish') },
{ value: 'fr-FR', display: localize('com_nav_lang_french') }, { value: 'fr-FR', label: localize('com_nav_lang_french') },
{ value: 'it-IT', display: localize('com_nav_lang_italian') }, { value: 'it-IT', label: localize('com_nav_lang_italian') },
{ value: 'pl-PL', display: localize('com_nav_lang_polish') }, { value: 'pl-PL', label: localize('com_nav_lang_polish') },
{ value: 'pt-BR', display: localize('com_nav_lang_brazilian_portuguese') }, { value: 'pt-BR', label: localize('com_nav_lang_brazilian_portuguese') },
{ value: 'ru-RU', display: localize('com_nav_lang_russian') }, { value: 'ru-RU', label: localize('com_nav_lang_russian') },
{ value: 'ja-JP', display: localize('com_nav_lang_japanese') }, { value: 'ja-JP', label: localize('com_nav_lang_japanese') },
{ value: 'sv-SE', display: localize('com_nav_lang_swedish') }, { value: 'sv-SE', label: localize('com_nav_lang_swedish') },
{ value: 'ko-KR', display: localize('com_nav_lang_korean') }, { value: 'ko-KR', label: localize('com_nav_lang_korean') },
{ value: 'vi-VN', display: localize('com_nav_lang_vietnamese') }, { value: 'vi-VN', label: localize('com_nav_lang_vietnamese') },
{ value: 'tr-TR', display: localize('com_nav_lang_turkish') }, { value: 'tr-TR', label: localize('com_nav_lang_turkish') },
{ value: 'nl-NL', display: localize('com_nav_lang_dutch') }, { value: 'nl-NL', label: localize('com_nav_lang_dutch') },
{ value: 'id-ID', display: localize('com_nav_lang_indonesia') }, { value: 'id-ID', label: localize('com_nav_lang_indonesia') },
{ value: 'he-HE', display: localize('com_nav_lang_hebrew') }, { value: 'he-HE', label: localize('com_nav_lang_hebrew') },
{ value: 'fi-FI', display: localize('com_nav_lang_finnish') }, { value: 'fi-FI', label: localize('com_nav_lang_finnish') },
]; ];
return ( return (

6
client/src/components/Nav/SettingsTabs/Speech/STT/EngineSTTDropdown.tsx
View file

@ -14,10 +14,10 @@ const EngineSTTDropdown: React.FC<EngineSTTDropdownProps> = ({ external }) => {
const endpointOptions = external const endpointOptions = external
? [ ? [
{ value: 'browser', display: localize('com_nav_browser') }, { value: 'browser', label: localize('com_nav_browser') },
{ value: 'external', display: localize('com_nav_external') }, { value: 'external', label: localize('com_nav_external') },
] ]
: [{ value: 'browser', display: localize('com_nav_browser') }]; : [{ value: 'browser', label: localize('com_nav_browser') }];
const handleSelect = (value: string) => { const handleSelect = (value: string) => {
setEngineSTT(value); setEngineSTT(value);

154
client/src/components/Nav/SettingsTabs/Speech/STT/LanguageSTTDropdown.tsx
View file

@ -8,83 +8,83 @@ export default function LanguageSTTDropdown() {
const [languageSTT, setLanguageSTT] = useRecoilState<string>(store.languageSTT); const [languageSTT, setLanguageSTT] = useRecoilState<string>(store.languageSTT);
const languageOptions = [ const languageOptions = [
{ value: 'af', display: 'Afrikaans' }, { value: 'af', label: 'Afrikaans' },
{ value: 'eu', display: 'Basque' }, { value: 'eu', label: 'Basque' },
{ value: 'bg', display: 'Bulgarian' }, { value: 'bg', label: 'Bulgarian' },
{ value: 'ca', display: 'Catalan' }, { value: 'ca', label: 'Catalan' },
{ value: 'ar-EG', display: 'Arabic (Egypt)' }, { value: 'ar-EG', label: 'Arabic (Egypt)' },
{ value: 'ar-JO', display: 'Arabic (Jordan)' }, { value: 'ar-JO', label: 'Arabic (Jordan)' },
{ value: 'ar-KW', display: 'Arabic (Kuwait)' }, { value: 'ar-KW', label: 'Arabic (Kuwait)' },
{ value: 'ar-LB', display: 'Arabic (Lebanon)' }, { value: 'ar-LB', label: 'Arabic (Lebanon)' },
{ value: 'ar-QA', display: 'Arabic (Qatar)' }, { value: 'ar-QA', label: 'Arabic (Qatar)' },
{ value: 'ar-AE', display: 'Arabic (UAE)' }, { value: 'ar-AE', label: 'Arabic (UAE)' },
{ value: 'ar-MA', display: 'Arabic (Morocco)' }, { value: 'ar-MA', label: 'Arabic (Morocco)' },
{ value: 'ar-IQ', display: 'Arabic (Iraq)' }, { value: 'ar-IQ', label: 'Arabic (Iraq)' },
{ value: 'ar-DZ', display: 'Arabic (Algeria)' }, { value: 'ar-DZ', label: 'Arabic (Algeria)' },
{ value: 'ar-BH', display: 'Arabic (Bahrain)' }, { value: 'ar-BH', label: 'Arabic (Bahrain)' },
{ value: 'ar-LY', display: 'Arabic (Libya)' }, { value: 'ar-LY', label: 'Arabic (Libya)' },
{ value: 'ar-OM', display: 'Arabic (Oman)' }, { value: 'ar-OM', label: 'Arabic (Oman)' },
{ value: 'ar-SA', display: 'Arabic (Saudi Arabia)' }, { value: 'ar-SA', label: 'Arabic (Saudi Arabia)' },
{ value: 'ar-TN', display: 'Arabic (Tunisia)' }, { value: 'ar-TN', label: 'Arabic (Tunisia)' },
{ value: 'ar-YE', display: 'Arabic (Yemen)' }, { value: 'ar-YE', label: 'Arabic (Yemen)' },
{ value: 'cs', display: 'Czech' }, { value: 'cs', label: 'Czech' },
{ value: 'nl-NL', display: 'Dutch' }, { value: 'nl-NL', label: 'Dutch' },
{ value: 'en-AU', display: 'English (Australia)' }, { value: 'en-AU', label: 'English (Australia)' },
{ value: 'en-CA', display: 'English (Canada)' }, { value: 'en-CA', label: 'English (Canada)' },
{ value: 'en-IN', display: 'English (India)' }, { value: 'en-IN', label: 'English (India)' },
{ value: 'en-NZ', display: 'English (New Zealand)' }, { value: 'en-NZ', label: 'English (New Zealand)' },
{ value: 'en-ZA', display: 'English (South Africa)' }, { value: 'en-ZA', label: 'English (South Africa)' },
{ value: 'en-GB', display: 'English (UK)' }, { value: 'en-GB', label: 'English (UK)' },
{ value: 'en-US', display: 'English (US)' }, { value: 'en-US', label: 'English (US)' },
{ value: 'fi', display: 'Finnish' }, { value: 'fi', label: 'Finnish' },
{ value: 'fr-FR', display: 'French' }, { value: 'fr-FR', label: 'French' },
{ value: 'gl', display: 'Galician' }, { value: 'gl', label: 'Galician' },
{ value: 'de-DE', display: 'German' }, { value: 'de-DE', label: 'German' },
{ value: 'el-GR', display: 'Greek' }, { value: 'el-GR', label: 'Greek' },
{ value: 'he', display: 'Hebrew' }, { value: 'he', label: 'Hebrew' },
{ value: 'hu', display: 'Hungarian' }, { value: 'hu', label: 'Hungarian' },
{ value: 'is', display: 'Icelandic' }, { value: 'is', label: 'Icelandic' },
{ value: 'it-IT', display: 'Italian' }, { value: 'it-IT', label: 'Italian' },
{ value: 'id', display: 'Indonesian' }, { value: 'id', label: 'Indonesian' },
{ value: 'ja', display: 'Japanese' }, { value: 'ja', label: 'Japanese' },
{ value: 'ko', display: 'Korean' }, { value: 'ko', label: 'Korean' },
{ value: 'la', display: 'Latin' }, { value: 'la', label: 'Latin' },
{ value: 'zh-CN', display: 'Mandarin Chinese' }, { value: 'zh-CN', label: 'Mandarin Chinese' },
{ value: 'zh-TW', display: 'Taiwanese' }, { value: 'zh-TW', label: 'Taiwanese' },
{ value: 'zh-HK', display: 'Cantonese' }, { value: 'zh-HK', label: 'Cantonese' },
{ value: 'ms-MY', display: 'Malaysian' }, { value: 'ms-MY', label: 'Malaysian' },
{ value: 'no-NO', display: 'Norwegian' }, { value: 'no-NO', label: 'Norwegian' },
{ value: 'pl', display: 'Polish' }, { value: 'pl', label: 'Polish' },
{ value: 'xx-piglatin', display: 'Pig Latin' }, { value: 'xx-piglatin', label: 'Pig Latin' },
{ value: 'pt-PT', display: 'Portuguese' }, { value: 'pt-PT', label: 'Portuguese' },
{ value: 'pt-br', display: 'Portuguese (Brasil)' }, { value: 'pt-br', label: 'Portuguese (Brasil)' },
{ value: 'ro-RO', display: 'Romanian' }, { value: 'ro-RO', label: 'Romanian' },
{ value: 'ru', display: 'Russian' }, { value: 'ru', label: 'Russian' },
{ value: 'sr-SP', display: 'Serbian' }, { value: 'sr-SP', label: 'Serbian' },
{ value: 'sk', display: 'Slovak' }, { value: 'sk', label: 'Slovak' },
{ value: 'es-AR', display: 'Spanish (Argentina)' }, { value: 'es-AR', label: 'Spanish (Argentina)' },
{ value: 'es-BO', display: 'Spanish (Bolivia)' }, { value: 'es-BO', label: 'Spanish (Bolivia)' },
{ value: 'es-CL', display: 'Spanish (Chile)' }, { value: 'es-CL', label: 'Spanish (Chile)' },
{ value: 'es-CO', display: 'Spanish (Colombia)' }, { value: 'es-CO', label: 'Spanish (Colombia)' },
{ value: 'es-CR', display: 'Spanish (Costa Rica)' }, { value: 'es-CR', label: 'Spanish (Costa Rica)' },
{ value: 'es-DO', display: 'Spanish (Dominican Republic)' }, { value: 'es-DO', label: 'Spanish (Dominican Republic)' },
{ value: 'es-EC', display: 'Spanish (Ecuador)' }, { value: 'es-EC', label: 'Spanish (Ecuador)' },
{ value: 'es-SV', display: 'Spanish (El Salvador)' }, { value: 'es-SV', label: 'Spanish (El Salvador)' },
{ value: 'es-GT', display: 'Spanish (Guatemala)' }, { value: 'es-GT', label: 'Spanish (Guatemala)' },
{ value: 'es-HN', display: 'Spanish (Honduras)' }, { value: 'es-HN', label: 'Spanish (Honduras)' },
{ value: 'es-MX', display: 'Spanish (Mexico)' }, { value: 'es-MX', label: 'Spanish (Mexico)' },
{ value: 'es-NI', display: 'Spanish (Nicaragua)' }, { value: 'es-NI', label: 'Spanish (Nicaragua)' },
{ value: 'es-PA', display: 'Spanish (Panama)' }, { value: 'es-PA', label: 'Spanish (Panama)' },
{ value: 'es-PY', display: 'Spanish (Paraguay)' }, { value: 'es-PY', label: 'Spanish (Paraguay)' },
{ value: 'es-PE', display: 'Spanish (Peru)' }, { value: 'es-PE', label: 'Spanish (Peru)' },
{ value: 'es-PR', display: 'Spanish (Puerto Rico)' }, { value: 'es-PR', label: 'Spanish (Puerto Rico)' },
{ value: 'es-ES', display: 'Spanish (Spain)' }, { value: 'es-ES', label: 'Spanish (Spain)' },
{ value: 'es-US', display: 'Spanish (US)' }, { value: 'es-US', label: 'Spanish (US)' },
{ value: 'es-UY', display: 'Spanish (Uruguay)' }, { value: 'es-UY', label: 'Spanish (Uruguay)' },
{ value: 'es-VE', display: 'Spanish (Venezuela)' }, { value: 'es-VE', label: 'Spanish (Venezuela)' },
{ value: 'sv-SE', display: 'Swedish' }, { value: 'sv-SE', label: 'Swedish' },
{ value: 'tr', display: 'Turkish' }, { value: 'tr', label: 'Turkish' },
{ value: 'zu', display: 'Zulu' }, { value: 'zu', label: 'Zulu' },
]; ];
const handleSelect = (value: string) => { const handleSelect = (value: string) => {

4
client/src/components/Nav/SettingsTabs/Speech/Speech.tsx
View file

@ -44,7 +44,7 @@ function Speech() {
const [decibelValue, setDecibelValue] = useRecoilState(store.decibelValue); const [decibelValue, setDecibelValue] = useRecoilState(store.decibelValue);
const [autoSendText, setAutoSendText] = useRecoilState(store.autoSendText); const [autoSendText, setAutoSendText] = useRecoilState(store.autoSendText);
const [engineTTS, setEngineTTS] = useRecoilState<string>(store.engineTTS); const [engineTTS, setEngineTTS] = useRecoilState<string>(store.engineTTS);
const [voice, setVoice] = useRecoilState<string>(store.voice); const [voice, setVoice] = useRecoilState(store.voice);
const [cloudBrowserVoices, setCloudBrowserVoices] = useRecoilState<boolean>( const [cloudBrowserVoices, setCloudBrowserVoices] = useRecoilState<boolean>(
store.cloudBrowserVoices, store.cloudBrowserVoices,
); );
@ -53,7 +53,7 @@ function Speech() {
const [playbackRate, setPlaybackRate] = useRecoilState(store.playbackRate); const [playbackRate, setPlaybackRate] = useRecoilState(store.playbackRate);
const updateSetting = useCallback( const updateSetting = useCallback(
(key, newValue) => { (key: string, newValue: string | number) => {
const settings = { const settings = {
sttExternal: { value: sttExternal, setFunc: setSttExternal }, sttExternal: { value: sttExternal, setFunc: setSttExternal },
ttsExternal: { value: ttsExternal, setFunc: setTtsExternal }, ttsExternal: { value: ttsExternal, setFunc: setTtsExternal },

10
client/src/components/Nav/SettingsTabs/Speech/TTS/EngineTTSDropdown.tsx
View file

@ -14,13 +14,13 @@ const EngineTTSDropdown: React.FC<EngineTTSDropdownProps> = ({ external }) => {
const endpointOptions = external const endpointOptions = external
? [ ? [
{ value: 'browser', display: localize('com_nav_browser') }, { value: 'browser', label: localize('com_nav_browser') },
{ value: 'edge', display: localize('com_nav_edge') }, { value: 'edge', label: localize('com_nav_edge') },
{ value: 'external', display: localize('com_nav_external') }, { value: 'external', label: localize('com_nav_external') },
] ]
: [ : [
{ value: 'browser', display: localize('com_nav_browser') }, { value: 'browser', label: localize('com_nav_browser') },
{ value: 'edge', display: localize('com_nav_edge') }, { value: 'edge', label: localize('com_nav_edge') },
]; ];
const handleSelect = (value: string) => { const handleSelect = (value: string) => {

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

@ -1,39 +1,33 @@
import React, { useEffect, useState, useMemo } from 'react'; import React from 'react';
import { useRecoilState } from 'recoil'; import { useRecoilState, useRecoilValue } from 'recoil';
import Dropdown from '~/components/ui/DropdownNoState'; import type { Option } from '~/common';
import DropdownNoState from '~/components/ui/DropdownNoState';
import { useLocalize, useTextToSpeech } from '~/hooks'; import { useLocalize, useTextToSpeech } from '~/hooks';
import { logger } from '~/utils';
import store from '~/store'; import store from '~/store';
export default function VoiceDropdown() { export default function VoiceDropdown() {
const localize = useLocalize(); const localize = useLocalize();
const { voices = [] } = useTextToSpeech();
const [voice, setVoice] = useRecoilState(store.voice); const [voice, setVoice] = useRecoilState(store.voice);
const { voices } = useTextToSpeech(); const engineTTS = useRecoilValue<string>(store.engineTTS);
const [voiceOptions, setVoiceOptions] = useState([]);
const [engineTTS] = useRecoilState(store.engineTTS);
useEffect(() => { const handleVoiceChange = (newValue?: string | Option) => {
async function fetchVoices() { logger.log('Voice changed:', newValue);
const options = await voices(); const newVoice = typeof newValue === 'string' ? newValue : newValue?.value;
setVoiceOptions(options); if (newVoice != null) {
return setVoice(newVoice.toString());
if (!voice && options.length > 0) {
setVoice(options[0]);
} }
} };
fetchVoices();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [engineTTS]);
const memoizedVoiceOptions = useMemo(() => voiceOptions, [voiceOptions]);
return ( return (
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div>{localize('com_nav_voice_select')}</div> <div>{localize('com_nav_voice_select')}</div>
<Dropdown <DropdownNoState
key={`voice-dropdown-${engineTTS}-${voices.length}`}
value={voice} value={voice}
onChange={setVoice} options={voices}
options={memoizedVoiceOptions} onChange={handleVoiceChange}
sizeClasses="min-w-[200px] !max-w-[400px] [--anchor-max-width:400px]" sizeClasses="min-w-[200px] !max-w-[400px] [--anchor-max-width:400px]"
anchor="bottom start" anchor="bottom start"
testId="VoiceDropdown" testId="VoiceDropdown"

29
client/src/components/ui/Dropdown.tsx
View file

@ -1,4 +1,4 @@
import React, { FC, useContext, useState } from 'react'; import React, { FC, useState } from 'react';
import { import {
Listbox, Listbox,
ListboxButton, ListboxButton,
@ -7,18 +7,14 @@ import {
Transition, Transition,
} from '@headlessui/react'; } from '@headlessui/react';
import { AnchorPropsWithSelection } from '@headlessui/react/dist/internal/floating'; import { AnchorPropsWithSelection } from '@headlessui/react/dist/internal/floating';
import type { Option } from '~/common';
import { cn } from '~/utils/'; import { cn } from '~/utils/';
type OptionType = {
value: string;
display?: string;
};
interface DropdownProps { interface DropdownProps {
value: string; value: string;
label?: string; label?: string;
onChange: (value: string) => void; onChange: (value: string) => void;
options: (string | OptionType)[]; options: string[] | Option[];
className?: string; className?: string;
anchor?: AnchorPropsWithSelection; anchor?: AnchorPropsWithSelection;
sizeClasses?: string; sizeClasses?: string;
@ -50,8 +46,7 @@ const Dropdown: FC<DropdownProps> = ({
<ListboxButton <ListboxButton
data-testid={testId} data-testid={testId}
className={cn( className={cn(
'relative inline-flex items-center justify-between rounded-md border-gray-50 bg-white py-2 pl-3 pr-8 text-black transition-all duration-100 ease-in-out hover:bg-gray-100 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 dark:focus:ring-white dark:focus:ring-offset-gray-700', 'focus:ring-offset-ring-offset relative inline-flex w-auto items-center justify-between rounded-md border-border-light bg-header-primary py-2 pl-3 pr-8 text-text-primary transition-all duration-100 ease-in-out hover:bg-header-hover focus:ring-ring-primary',
'w-auto',
className, className,
)} )}
aria-label="Select an option" aria-label="Select an option"
@ -59,8 +54,8 @@ const Dropdown: FC<DropdownProps> = ({
<span className="block truncate"> <span className="block truncate">
{label} {label}
{options {options
.map((o) => (typeof o === 'string' ? { value: o, display: o } : o)) .map((o) => (typeof o === 'string' ? { value: o, label: o } : o))
.find((o) => o.value === selectedValue)?.display || selectedValue} .find((o) => o.value === selectedValue)?.label ?? selectedValue}
</span> </span>
<span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2"> <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
<svg <svg
@ -69,7 +64,7 @@ const Dropdown: FC<DropdownProps> = ({
viewBox="0 0 24 24" viewBox="0 0 24 24"
strokeWidth="2" strokeWidth="2"
stroke="currentColor" stroke="currentColor"
className="h-4 w-5 rotate-0 transform text-black transition-transform duration-300 ease-in-out dark:text-gray-50" className="h-4 w-5 rotate-0 transform text-text-primary transition-transform duration-300 ease-in-out"
> >
<polyline points="6 9 12 15 18 9"></polyline> <polyline points="6 9 12 15 18 9"></polyline>
</svg> </svg>
@ -82,7 +77,7 @@ const Dropdown: FC<DropdownProps> = ({
> >
<ListboxOptions <ListboxOptions
className={cn( className={cn(
'absolute z-50 mt-1 flex flex-col items-start gap-1 overflow-auto rounded-lg border border-gray-300 bg-white bg-white p-1.5 text-gray-700 shadow-lg transition-opacity focus:outline-none dark:border-gray-600 dark:bg-gray-700 dark:text-white', 'absolute z-50 mt-1 flex flex-col items-start gap-1 overflow-auto rounded-lg border border-border-medium bg-header-primary p-1.5 shadow-lg transition-opacity',
sizeClasses, sizeClasses,
className, className,
)} )}
@ -93,15 +88,13 @@ const Dropdown: FC<DropdownProps> = ({
<ListboxOption <ListboxOption
key={index} key={index}
value={typeof item === 'string' ? item : item.value} value={typeof item === 'string' ? item : item.value}
className={cn( className="focus-visible:ring-offset ring-offset-ring-offset relative cursor-pointer select-none rounded border-border-light bg-header-primary py-2.5 pl-3 pr-3 text-sm text-text-secondary ring-ring-primary hover:bg-header-hover focus-visible:ring"
'relative cursor-pointer select-none rounded border-gray-300 bg-white py-2.5 pl-3 pr-3 text-sm text-gray-700 hover:bg-gray-100 dark:border-gray-300 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600',
)}
style={{ width: '100%' }} style={{ width: '100%' }}
data-theme={typeof item === 'string' ? item : (item as OptionType).value} data-theme={typeof item === 'string' ? item : (item as Option).value}
> >
<div className="flex w-full items-center justify-between"> <div className="flex w-full items-center justify-between">
<span className="block truncate"> <span className="block truncate">
{typeof item === 'string' ? item : (item as OptionType).display} {typeof item === 'string' ? item : (item as Option).label}
</span> </span>
{selectedValue === (typeof item === 'string' ? item : item.value) && ( {selectedValue === (typeof item === 'string' ? item : item.value) && (
<span className="ml-auto pl-2"> <span className="ml-auto pl-2">

53
client/src/components/ui/DropdownNoState.tsx
View file

@ -7,18 +7,14 @@ import {
Transition, Transition,
} from '@headlessui/react'; } from '@headlessui/react';
import { AnchorPropsWithSelection } from '@headlessui/react/dist/internal/floating'; import { AnchorPropsWithSelection } from '@headlessui/react/dist/internal/floating';
import type { Option } from '~/common';
import { cn } from '~/utils/'; import { cn } from '~/utils/';
type OptionType = {
value: string;
display?: string;
};
interface DropdownProps { interface DropdownProps {
value: string | OptionType; value?: string | Option;
label?: string; label?: string;
onChange: (value: string) => void | ((value: OptionType) => void); onChange: (value: string | Option) => void;
options: (string | OptionType)[]; options: (string | Option)[];
className?: string; className?: string;
anchor?: AnchorPropsWithSelection; anchor?: AnchorPropsWithSelection;
sizeClasses?: string; sizeClasses?: string;
@ -35,19 +31,23 @@ const Dropdown: FC<DropdownProps> = ({
sizeClasses, sizeClasses,
testId = 'dropdown-menu', testId = 'dropdown-menu',
}) => { }) => {
const getValue = (option: string | OptionType): string => const getValue = (option?: string | Option) =>
typeof option === 'string' ? option : option.value; typeof option === 'string' ? option : option?.value;
const getDisplay = (option: string | OptionType): string => const getDisplay = (option?: string | Option) =>
typeof option === 'string' ? option : (option.display ?? '') || option.value; typeof option === 'string' ? option : option?.label ?? option?.value;
const selectedOption = options.find((option) => getValue(option) === getValue(value)); const isEqual = (a: string | Option, b: string | Option): boolean => getValue(a) === getValue(b);
const displayValue = selectedOption != null ? getDisplay(selectedOption) : getDisplay(value); const selectedOption = options.find((option) => isEqual(option, value ?? '')) ?? value;
const handleChange = (newValue: string | Option) => {
onChange(newValue);
};
return ( return (
<div className={cn('relative', className)}> <div className={cn('relative', className)}>
<Listbox value={value} onChange={onChange}> <Listbox value={selectedOption} onChange={handleChange}>
<div className={cn('relative', className)}> <div className={cn('relative', className)}>
<ListboxButton <ListboxButton
data-testid={testId} data-testid={testId}
@ -60,7 +60,7 @@ const Dropdown: FC<DropdownProps> = ({
> >
<span className="block truncate"> <span className="block truncate">
{label} {label}
{displayValue} {getDisplay(selectedOption)}
</span> </span>
<span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2"> <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
<svg <svg
@ -99,9 +99,30 @@ const Dropdown: FC<DropdownProps> = ({
style={{ width: '100%' }} style={{ width: '100%' }}
data-theme={getValue(item)} data-theme={getValue(item)}
> >
{({ selected }) => (
<div className="flex w-full items-center justify-between"> <div className="flex w-full items-center justify-between">
<span className="block truncate">{getDisplay(item)}</span> <span className="block truncate">{getDisplay(item)}</span>
{selected && (
<span className="ml-auto pl-2">
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className="icon-md block group-hover:hidden"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12ZM16.0755 7.93219C16.5272 8.25003 16.6356 8.87383 16.3178 9.32549L11.5678 16.0755C11.3931 16.3237 11.1152 16.4792 10.8123 16.4981C10.5093 16.517 10.2142 16.3973 10.0101 16.1727L7.51006 13.4227C7.13855 13.014 7.16867 12.3816 7.57733 12.0101C7.98598 11.6386 8.61843 11.6687 8.98994 12.0773L10.6504 13.9039L14.6822 8.17451C15 7.72284 15.6238 7.61436 16.0755 7.93219Z"
fill="currentColor"
/>
</svg>
</span>
)}
</div> </div>
)}
</ListboxOption> </ListboxOption>
))} ))}
</ListboxOptions> </ListboxOptions>

18
client/src/data-provider/queries.ts
View file

@ -266,7 +266,7 @@ export const useListAssistantsQuery = <TData = AssistantListResponse>(
refetchOnMount: false, refetchOnMount: false,
retry: false, retry: false,
...config, ...config,
enabled: config?.enabled !== undefined ? config?.enabled && enabled : enabled, enabled: config?.enabled !== undefined ? config.enabled && enabled : enabled,
}, },
); );
}; };
@ -333,7 +333,7 @@ export const useGetAssistantByIdQuery = (
retry: false, retry: false,
...config, ...config,
// Query will not execute until the assistant_id exists // Query will not execute until the assistant_id exists
enabled: config?.enabled !== undefined ? config?.enabled && enabled : enabled, enabled: config?.enabled !== undefined ? config.enabled && enabled : enabled,
}, },
); );
}; };
@ -364,7 +364,7 @@ export const useGetActionsQuery = <TData = Action[]>(
refetchOnReconnect: false, refetchOnReconnect: false,
refetchOnMount: false, refetchOnMount: false,
...config, ...config,
enabled: config?.enabled !== undefined ? config?.enabled && enabled : enabled, enabled: config?.enabled !== undefined ? config.enabled && enabled : enabled,
}, },
); );
}; };
@ -394,7 +394,7 @@ export const useGetAssistantDocsQuery = (
refetchOnReconnect: false, refetchOnReconnect: false,
refetchOnMount: false, refetchOnMount: false,
...config, ...config,
enabled: config?.enabled !== undefined ? config?.enabled && enabled : enabled, enabled: config?.enabled !== undefined ? config.enabled && enabled : enabled,
}, },
); );
}; };
@ -440,7 +440,7 @@ export const useVoicesQuery = (): UseQueryResult<t.VoiceResponse> => {
}; };
/* Custom config speech */ /* Custom config speech */
export const useCustomConfigSpeechQuery = (): UseQueryResult<t.getCustomConfigSpeechResponse> => { export const useCustomConfigSpeechQuery = () => {
return useQuery([QueryKeys.customConfigSpeech], () => dataService.getCustomConfigSpeech()); return useQuery([QueryKeys.customConfigSpeech], () => dataService.getCustomConfigSpeech());
}; };
@ -488,7 +488,7 @@ export const useGetPromptGroup = (
refetchOnMount: false, refetchOnMount: false,
retry: false, retry: false,
...config, ...config,
enabled: config?.enabled !== undefined ? config?.enabled : true, enabled: config?.enabled !== undefined ? config.enabled : true,
}, },
); );
}; };
@ -506,7 +506,7 @@ export const useGetPrompts = (
refetchOnMount: false, refetchOnMount: false,
retry: false, retry: false,
...config, ...config,
enabled: config?.enabled !== undefined ? config?.enabled : true, enabled: config?.enabled !== undefined ? config.enabled : true,
}, },
); );
}; };
@ -540,7 +540,7 @@ export const useGetCategories = <TData = t.TGetCategoriesResponse>(
refetchOnMount: false, refetchOnMount: false,
retry: false, retry: false,
...config, ...config,
enabled: config?.enabled !== undefined ? config?.enabled : true, enabled: config?.enabled !== undefined ? config.enabled : true,
}, },
); );
}; };
@ -558,7 +558,7 @@ export const useGetRandomPrompts = (
refetchOnMount: false, refetchOnMount: false,
retry: false, retry: false,
...config, ...config,
enabled: config?.enabled !== undefined ? config?.enabled : true, enabled: config?.enabled !== undefined ? config.enabled : true,
}, },
); );
}; };

16
client/src/hooks/Input/useGetAudioSettings.ts
View file

@ -1,4 +1,5 @@
import { useRecoilState } from 'recoil'; import { useMemo } from 'react';
import { useRecoilValue } from 'recoil';
import store from '~/store'; import store from '~/store';
export enum STTEndpoints { export enum STTEndpoints {
@ -13,13 +14,16 @@ export enum TTSEndpoints {
} }
const useGetAudioSettings = () => { const useGetAudioSettings = () => {
const [engineSTT] = useRecoilState<string>(store.engineSTT); const engineSTT = useRecoilValue<string>(store.engineSTT);
const [engineTTS] = useRecoilState<string>(store.engineTTS); const engineTTS = useRecoilValue<string>(store.engineTTS);
const speechToTextEndpoint: STTEndpoints = engineSTT as STTEndpoints; const speechToTextEndpoint = engineSTT;
const textToSpeechEndpoint: TTSEndpoints = engineTTS as TTSEndpoints; const textToSpeechEndpoint = engineTTS;
return { speechToTextEndpoint, textToSpeechEndpoint }; return useMemo(
() => ({ speechToTextEndpoint, textToSpeechEndpoint }),
[speechToTextEndpoint, textToSpeechEndpoint],
);
}; };
export default useGetAudioSettings; export default useGetAudioSettings;

58
client/src/hooks/Input/useTextToSpeech.ts
View file

@ -1,13 +1,18 @@
import { useRef } from 'react'; import { useRecoilState } from 'recoil';
import { useRef, useMemo, useEffect } from 'react';
import { parseTextParts } from 'librechat-data-provider'; import { parseTextParts } from 'librechat-data-provider';
import type { TMessage } from 'librechat-data-provider'; import type { TMessage } from 'librechat-data-provider';
import type { Option } from '~/common';
import useTextToSpeechExternal from './useTextToSpeechExternal'; import useTextToSpeechExternal from './useTextToSpeechExternal';
import useTextToSpeechBrowser from './useTextToSpeechBrowser'; import useTextToSpeechBrowser from './useTextToSpeechBrowser';
import useGetAudioSettings from './useGetAudioSettings'; import useGetAudioSettings from './useGetAudioSettings';
import useTextToSpeechEdge from './useTextToSpeechEdge'; import useTextToSpeechEdge from './useTextToSpeechEdge';
import { usePauseGlobalAudio } from '../Audio'; import { usePauseGlobalAudio } from '../Audio';
import { logger } from '~/utils';
import store from '~/store';
const useTextToSpeech = (message?: TMessage, isLast = false, index = 0) => { const useTextToSpeech = (message?: TMessage, isLast = false, index = 0) => {
const [voice, setVoice] = useRecoilState(store.voice);
const { textToSpeechEndpoint } = useGetAudioSettings(); const { textToSpeechEndpoint } = useGetAudioSettings();
const { pauseGlobalAudio } = usePauseGlobalAudio(index); const { pauseGlobalAudio } = usePauseGlobalAudio(index);
const audioRef = useRef<HTMLAudioElement | null>(null); const audioRef = useRef<HTMLAudioElement | null>(null);
@ -33,9 +38,47 @@ const useTextToSpeech = (message?: TMessage, isLast = false, index = 0) => {
isLoading: isLoadingExternal, isLoading: isLoadingExternal,
audioRef: audioRefExternal, audioRef: audioRefExternal,
voices: voicesExternal, voices: voicesExternal,
} = useTextToSpeechExternal(message?.messageId || '', isLast, index); } = useTextToSpeechExternal(message?.messageId ?? '', isLast, index);
let generateSpeech, cancelSpeech, isSpeaking, isLoading, voices; let generateSpeech, cancelSpeech, isSpeaking, isLoading;
const voices: Option[] | string[] = useMemo(() => {
const voiceMap = {
external: voicesExternal,
edge: voicesEdge,
browser: voicesLocal,
};
return voiceMap[textToSpeechEndpoint];
}, [textToSpeechEndpoint, voicesEdge, voicesExternal, voicesLocal]);
useEffect(() => {
const firstVoice = voices[0];
if (voices.length && typeof firstVoice === 'object') {
const lastSelectedVoice = voices.find((v) =>
typeof v === 'object' ? v.value === voice : v === voice,
);
if (lastSelectedVoice != null) {
const currentVoice =
typeof lastSelectedVoice === 'object' ? lastSelectedVoice.value : lastSelectedVoice;
logger.log('useTextToSpeech.ts - Effect:', { voices, voice: currentVoice });
setVoice(currentVoice?.toString() ?? undefined);
return;
}
logger.log('useTextToSpeech.ts - Effect:', { voices, voice: firstVoice.value });
setVoice(firstVoice.value?.toString() ?? undefined);
} else if (voices.length) {
const lastSelectedVoice = voices.find((v) => v === voice);
if (lastSelectedVoice != null) {
logger.log('useTextToSpeech.ts - Effect:', { voices, voice: lastSelectedVoice });
setVoice(lastSelectedVoice.toString());
return;
}
logger.log('useTextToSpeech.ts - Effect:', { voices, voice: firstVoice });
setVoice(firstVoice.toString());
}
}, [setVoice, textToSpeechEndpoint, voice, voices]);
switch (textToSpeechEndpoint) { switch (textToSpeechEndpoint) {
case 'external': case 'external':
@ -43,17 +86,15 @@ const useTextToSpeech = (message?: TMessage, isLast = false, index = 0) => {
cancelSpeech = cancelSpeechExternal; cancelSpeech = cancelSpeechExternal;
isSpeaking = isSpeakingExternal; isSpeaking = isSpeakingExternal;
isLoading = isLoadingExternal; isLoading = isLoadingExternal;
if (audioRefExternal) { if (audioRefExternal.current) {
audioRef.current = audioRefExternal.current; audioRef.current = audioRefExternal.current;
} }
voices = voicesExternal;
break; break;
case 'edge': case 'edge':
generateSpeech = generateSpeechEdge; generateSpeech = generateSpeechEdge;
cancelSpeech = cancelSpeechEdge; cancelSpeech = cancelSpeechEdge;
isSpeaking = isSpeakingEdge; isSpeaking = isSpeakingEdge;
isLoading = false; isLoading = false;
voices = voicesEdge;
break; break;
case 'browser': case 'browser':
default: default:
@ -61,7 +102,6 @@ const useTextToSpeech = (message?: TMessage, isLast = false, index = 0) => {
cancelSpeech = cancelSpeechLocal; cancelSpeech = cancelSpeechLocal;
isSpeaking = isSpeakingLocal; isSpeaking = isSpeakingLocal;
isLoading = false; isLoading = false;
voices = voicesLocal;
break; break;
} }
@ -82,7 +122,7 @@ const useTextToSpeech = (message?: TMessage, isLast = false, index = 0) => {
const handleMouseUp = () => { const handleMouseUp = () => {
isMouseDownRef.current = false; isMouseDownRef.current = false;
if (timerRef.current) { if (timerRef.current != null) {
window.clearTimeout(timerRef.current); window.clearTimeout(timerRef.current);
} }
}; };
@ -105,8 +145,8 @@ const useTextToSpeech = (message?: TMessage, isLast = false, index = 0) => {
toggleSpeech, toggleSpeech,
isSpeaking, isSpeaking,
isLoading, isLoading,
voices,
audioRef, audioRef,
voices,
}; };
}; };

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

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

167
client/src/hooks/Input/useTextToSpeechEdge.ts
View file

@ -1,4 +1,4 @@
import { useRecoilState } from 'recoil'; import { useRecoilValue } from 'recoil';
import { useState, useCallback, useRef, useEffect } from 'react'; import { useState, useCallback, useRef, useEffect } from 'react';
import { MsEdgeTTS, OUTPUT_FORMAT } from 'msedge-tts'; import { MsEdgeTTS, OUTPUT_FORMAT } from 'msedge-tts';
import { useToastContext } from '~/Providers'; import { useToastContext } from '~/Providers';
@ -7,20 +7,21 @@ import store from '~/store';
interface Voice { interface Voice {
value: string; value: string;
display: string; label: string;
} }
interface UseTextToSpeechEdgeReturn { interface UseTextToSpeechEdgeReturn {
generateSpeechEdge: (text: string) => Promise<void>; generateSpeechEdge: (text: string) => void;
cancelSpeechEdge: () => void; cancelSpeechEdge: () => void;
isSpeaking: boolean; isSpeaking: boolean;
voices: () => Promise<Voice[]>; voices: Voice[];
} }
function useTextToSpeechEdge(): UseTextToSpeechEdgeReturn { function useTextToSpeechEdge(): UseTextToSpeechEdgeReturn {
const localize = useLocalize(); const localize = useLocalize();
const [voices, setVoices] = useState<Voice[]>([]);
const [isSpeaking, setIsSpeaking] = useState<boolean>(false); const [isSpeaking, setIsSpeaking] = useState<boolean>(false);
const [voiceName] = useRecoilState<string>(store.voice); const voiceName = useRecoilValue(store.voice);
const ttsRef = useRef<MsEdgeTTS | null>(null); const ttsRef = useRef<MsEdgeTTS | null>(null);
const audioElementRef = useRef<HTMLAudioElement | null>(null); const audioElementRef = useRef<HTMLAudioElement | null>(null);
const mediaSourceRef = useRef<MediaSource | null>(null); const mediaSourceRef = useRef<MediaSource | null>(null);
@ -28,61 +29,59 @@ function useTextToSpeechEdge(): UseTextToSpeechEdgeReturn {
const pendingBuffers = useRef<Uint8Array[]>([]); const pendingBuffers = useRef<Uint8Array[]>([]);
const { showToast } = useToastContext(); const { showToast } = useToastContext();
const initializeTTS = useCallback(async (): Promise<void> => { const fetchVoices = useCallback(() => {
if (!ttsRef.current) { if (!ttsRef.current) {
ttsRef.current = new MsEdgeTTS(); ttsRef.current = new MsEdgeTTS();
} }
try { ttsRef.current
await ttsRef.current.setMetadata(voiceName, OUTPUT_FORMAT.AUDIO_24KHZ_48KBITRATE_MONO_MP3); .getVoices()
} catch (error) { .then((voicesList) => {
setVoices(
voicesList.map((v) => ({
value: v.ShortName,
label: v.FriendlyName,
})),
);
})
.catch((error) => {
console.error('Error fetching voices:', error);
showToast({
message: localize('com_nav_voices_fetch_error'),
status: 'error',
});
});
}, [showToast, localize]);
const initializeTTS = useCallback(() => {
if (!ttsRef.current) {
ttsRef.current = new MsEdgeTTS();
}
const availableVoice: Voice | undefined = voices.find((v) => v.value === voiceName);
if (availableVoice) {
ttsRef.current
.setMetadata(availableVoice.value, OUTPUT_FORMAT.AUDIO_24KHZ_48KBITRATE_MONO_MP3)
.catch((error) => {
console.error('Error initializing TTS:', error); console.error('Error initializing TTS:', error);
showToast({ showToast({
message: localize('com_nav_tts_init_error', (error as Error).message), message: localize('com_nav_tts_init_error', (error as Error).message),
status: 'error', status: 'error',
}); });
} });
}, [voiceName, showToast, localize]); } else if (voices.length > 0) {
ttsRef.current
const onSourceOpen = useCallback((): void => { .setMetadata(voices[0].value, OUTPUT_FORMAT.AUDIO_24KHZ_48KBITRATE_MONO_MP3)
if (!sourceBufferRef.current && mediaSourceRef.current) { .catch((error) => {
try { console.error('Error initializing TTS:', error);
sourceBufferRef.current = mediaSourceRef.current.addSourceBuffer('audio/mpeg');
sourceBufferRef.current.addEventListener('updateend', appendNextBuffer);
} catch (error) {
console.error('Error adding source buffer:', error);
showToast({ showToast({
message: localize('com_nav_source_buffer_error'), message: localize('com_nav_tts_init_error', (error as Error).message),
status: 'error', status: 'error',
}); });
}
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [showToast, localize]);
const initializeMediaSource = useCallback(async (): Promise<void> => {
return new Promise<void>((resolve) => {
if (!mediaSourceRef.current) {
mediaSourceRef.current = new MediaSource();
audioElementRef.current = new Audio();
audioElementRef.current.src = URL.createObjectURL(mediaSourceRef.current);
}
const mediaSource = mediaSourceRef.current;
if (mediaSource.readyState === 'open') {
onSourceOpen();
resolve();
} else {
const onSourceOpenWrapper = (): void => {
onSourceOpen();
resolve();
mediaSource.removeEventListener('sourceopen', onSourceOpenWrapper);
};
mediaSource.addEventListener('sourceopen', onSourceOpenWrapper);
}
}); });
}, [onSourceOpen]); }
}, [voiceName, showToast, localize, voices]);
const appendNextBuffer = useCallback((): void => { const appendNextBuffer = useCallback(() => {
if ( if (
sourceBufferRef.current && sourceBufferRef.current &&
!sourceBufferRef.current.updating && !sourceBufferRef.current.updating &&
@ -104,12 +103,40 @@ function useTextToSpeechEdge(): UseTextToSpeechEdgeReturn {
} }
}, [showToast, localize]); }, [showToast, localize]);
const generateSpeechEdge = useCallback( const onSourceOpen = useCallback(() => {
async (text: string): Promise<void> => { if (!sourceBufferRef.current && mediaSourceRef.current) {
try { try {
await initializeTTS(); sourceBufferRef.current = mediaSourceRef.current.addSourceBuffer('audio/mpeg');
await initializeMediaSource(); sourceBufferRef.current.addEventListener('updateend', appendNextBuffer);
} catch (error) {
console.error('Error adding source buffer:', error);
showToast({
message: localize('com_nav_source_buffer_error'),
status: 'error',
});
}
}
}, [showToast, localize, appendNextBuffer]);
const initializeMediaSource = useCallback(() => {
if (!mediaSourceRef.current) {
mediaSourceRef.current = new MediaSource();
audioElementRef.current = new Audio();
audioElementRef.current.src = URL.createObjectURL(mediaSourceRef.current);
}
const mediaSource = mediaSourceRef.current;
if (mediaSource.readyState === 'open') {
onSourceOpen();
} else {
mediaSource.addEventListener('sourceopen', onSourceOpen);
}
}, [onSourceOpen]);
const generateSpeechEdge = useCallback(
(text: string) => {
const generate = async () => {
try {
if (!ttsRef.current || !audioElementRef.current) { if (!ttsRef.current || !audioElementRef.current) {
throw new Error('TTS or Audio element not initialized'); throw new Error('TTS or Audio element not initialized');
} }
@ -143,11 +170,14 @@ function useTextToSpeechEdge(): UseTextToSpeechEdgeReturn {
}); });
setIsSpeaking(false); setIsSpeaking(false);
} }
};
generate();
}, },
[initializeTTS, initializeMediaSource, appendNextBuffer, showToast, localize], [appendNextBuffer, showToast, localize],
); );
const cancelSpeechEdge = useCallback((): void => { const cancelSpeechEdge = useCallback(() => {
try { try {
if (audioElementRef.current) { if (audioElementRef.current) {
audioElementRef.current.pause(); audioElementRef.current.pause();
@ -167,33 +197,22 @@ function useTextToSpeechEdge(): UseTextToSpeechEdgeReturn {
} }
}, [showToast, localize]); }, [showToast, localize]);
const voices = useCallback(async (): Promise<Voice[]> => { useEffect(() => {
if (!ttsRef.current) { fetchVoices();
ttsRef.current = new MsEdgeTTS(); }, [fetchVoices]);
}
try {
const voicesList = await ttsRef.current.getVoices();
return voicesList.map((v) => ({
value: v.ShortName,
display: v.FriendlyName,
}));
} catch (error) {
console.error('Error fetching voices:', error);
showToast({
message: localize('com_nav_voices_fetch_error'),
status: 'error',
});
return [];
}
}, [showToast, localize]);
useEffect(() => { useEffect(() => {
initializeTTS();
}, [voiceName, initializeTTS]);
useEffect(() => {
initializeMediaSource();
return () => { return () => {
if (mediaSourceRef.current) { if (mediaSourceRef.current) {
URL.revokeObjectURL(audioElementRef.current?.src || ''); URL.revokeObjectURL(audioElementRef.current?.src ?? '');
} }
}; };
}, []); }, [initializeMediaSource]);
return { generateSpeechEdge, cancelSpeechEdge, isSpeaking, voices }; return { generateSpeechEdge, cancelSpeechEdge, isSpeaking, voices };
} }

14
client/src/hooks/Input/useTextToSpeechExternal.ts
View file

@ -37,7 +37,7 @@ function useTextToSpeechExternal(messageId: string, isLast: boolean, index = 0)
const playAudioPromise = (blobUrl: string) => { const playAudioPromise = (blobUrl: string) => {
const newAudio = new Audio(blobUrl); const newAudio = new Audio(blobUrl);
const initializeAudio = () => { const initializeAudio = () => {
if (playbackRate && playbackRate !== 1 && playbackRate > 0) { if (playbackRate != null && playbackRate !== 1 && playbackRate > 0) {
newAudio.playbackRate = playbackRate; newAudio.playbackRate = playbackRate;
} }
}; };
@ -47,7 +47,7 @@ function useTextToSpeechExternal(messageId: string, isLast: boolean, index = 0)
playPromise().catch((error: Error) => { playPromise().catch((error: Error) => {
if ( if (
error?.message && error.message &&
error.message.includes('The play() request was interrupted by a call to pause()') error.message.includes('The play() request was interrupted by a call to pause()')
) { ) {
console.log('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) { if (cacheTTS && inputText) {
const cache = await caches.open('tts-responses'); const cache = await caches.open('tts-responses');
const request = new Request(inputText!); const request = new Request(inputText);
const response = new Response(audioBlob); const response = new Response(audioBlob);
cache.put(request, response); cache.put(request, response);
} }
@ -118,7 +118,7 @@ function useTextToSpeechExternal(messageId: string, isLast: boolean, index = 0)
}); });
const startMutation = (text: string, download: boolean) => { const startMutation = (text: string, download: boolean) => {
const formData = createFormData(text, voice); const formData = createFormData(text, voice ?? '');
setDownloadFile(download); setDownloadFile(download);
processAudio(formData); processAudio(formData);
}; };
@ -178,9 +178,7 @@ function useTextToSpeechExternal(messageId: string, isLast: boolean, index = 0)
return isLocalSpeaking || (isLast && globalIsPlaying); return isLocalSpeaking || (isLast && globalIsPlaying);
}, [isLocalSpeaking, globalIsPlaying, isLast]); }, [isLocalSpeaking, globalIsPlaying, isLast]);
const useVoices = () => { const { data: voicesData = [] } = useVoicesQuery();
return useVoicesQuery().data ?? [];
};
return { return {
generateSpeechExternal, generateSpeechExternal,
@ -188,7 +186,7 @@ function useTextToSpeechExternal(messageId: string, isLast: boolean, index = 0)
isLoading, isLoading,
isSpeaking, isSpeaking,
audioRef, audioRef,
voices: useVoices, voices: voicesData,
}; };
} }

2
client/src/store/settings.ts
View file

@ -56,7 +56,7 @@ const localStorageAtoms = {
textToSpeech: atomWithLocalStorage('textToSpeech', true), textToSpeech: atomWithLocalStorage('textToSpeech', true),
engineTTS: atomWithLocalStorage('engineTTS', 'browser'), engineTTS: atomWithLocalStorage('engineTTS', 'browser'),
voice: atomWithLocalStorage('voice', ''), voice: atomWithLocalStorage<string | undefined>('voice', undefined),
cloudBrowserVoices: atomWithLocalStorage('cloudBrowserVoices', false), cloudBrowserVoices: atomWithLocalStorage('cloudBrowserVoices', false),
languageTTS: atomWithLocalStorage('languageTTS', ''), languageTTS: atomWithLocalStorage('languageTTS', ''),
automaticPlayback: atomWithLocalStorage('automaticPlayback', false), automaticPlayback: atomWithLocalStorage('automaticPlayback', false),

3
package-lock.json generated
View file

@ -6645,7 +6645,6 @@
"version": "2.1.2", "version": "2.1.2",
"resolved": "https://registry.npmjs.org/@headlessui/react/-/react-2.1.2.tgz", "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-2.1.2.tgz",
"integrity": "sha512-Kb3hgk9gRNRcTZktBrKdHhF3xFhYkca1Rk6e1/im2ENf83dgN54orMW0uSKTXFnUpZOUFZ+wcY05LlipwgZIFQ==", "integrity": "sha512-Kb3hgk9gRNRcTZktBrKdHhF3xFhYkca1Rk6e1/im2ENf83dgN54orMW0uSKTXFnUpZOUFZ+wcY05LlipwgZIFQ==",
"license": "MIT",
"dependencies": { "dependencies": {
"@floating-ui/react": "^0.26.16", "@floating-ui/react": "^0.26.16",
"@react-aria/focus": "^3.17.1", "@react-aria/focus": "^3.17.1",
@ -30879,7 +30878,7 @@
}, },
"packages/data-provider": { "packages/data-provider": {
"name": "librechat-data-provider", "name": "librechat-data-provider",
"version": "0.7.4", "version": "0.7.41",
"license": "ISC", "license": "ISC",
"dependencies": { "dependencies": {
"@types/js-yaml": "^4.0.9", "@types/js-yaml": "^4.0.9",