Skip to content

Commit

Permalink
🎛️ fix: Improve Frontend Practices for Audio Settings (#3624)
Browse files Browse the repository at this point in the history 
* 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
  • Loading branch information
@danny-avila
danny-avila committed Aug 17, 2024
1 parent 90cfcf4 commit 90d3028
Show file tree
Hide file tree
Showing 20 changed files with 433 additions and 364 deletions.
24 changes: 12 additions & 12 deletions client/src/components/Input/SetKeyDialog/SetKeyDialog.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,13 +35,13 @@ const formSet: Set<string> = new Set([
]);

const EXPIRY = {
THIRTY_MINUTES: { display: 'in 30 minutes', value: 30 * 60 * 1000 },
TWO_HOURS: { display: 'in 2 hours', value: 2 * 60 * 60 * 1000 },
TWELVE_HOURS: { display: 'in 12 hours', value: 12 * 60 * 60 * 1000 },
ONE_DAY: { display: 'in 1 day', value: 24 * 60 * 60 * 1000 },
ONE_WEEK: { display: 'in 7 days', value: 7 * 24 * 60 * 60 * 1000 },
ONE_MONTH: { display: 'in 30 days', value: 30 * 24 * 60 * 60 * 1000 },
NEVER: { display: 'never', value: 0 },
THIRTY_MINUTES: { label: 'in 30 minutes', value: 30 * 60 * 1000 },
TWO_HOURS: { label: 'in 2 hours', value: 2 * 60 * 60 * 1000 },
TWELVE_HOURS: { label: 'in 12 hours', value: 12 * 60 * 60 * 1000 },
ONE_DAY: { label: 'in 1 day', value: 24 * 60 * 60 * 1000 },
ONE_WEEK: { label: 'in 7 days', value: 7 * 24 * 60 * 60 * 1000 },
ONE_MONTH: { label: 'in 30 days', value: 30 * 24 * 60 * 60 * 1000 },
NEVER: { label: 'never', value: 0 },
};

const SetKeyDialog = ({
Expand Down Expand Up @@ -72,7 +72,7 @@ const SetKeyDialog = ({

const [userKey, setUserKey] = useState('');
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 { showToast } = useToastContext();
const localize = useLocalize();
Expand All @@ -84,7 +84,7 @@ const SetKeyDialog = ({
};

const submit = () => {
const selectedOption = expirationOptions.find((option) => option.display === expiresAtLabel);
const selectedOption = expirationOptions.find((option) => option.label === expiresAtLabel);
let expiresAt;

if (selectedOption?.value === 0) {
Expand Down Expand Up @@ -170,22 +170,22 @@ const SetKeyDialog = ({
{expiryTime === 'never'
? localize('com_endpoint_config_key_never_expires')
: `${localize('com_endpoint_config_key_encryption')} ${new Date(
expiryTime,
expiryTime ?? 0,
).toLocaleString()}`}
</small>{' '}
<Dropdown
label="Expires "
value={expiresAtLabel}
onChange={handleExpirationChange}
options={expirationOptions.map((option) => option.display)}
options={expirationOptions.map((option) => option.label)}
sizeClasses="w-[185px]"
/>
<FormProvider {...methods}>
<EndpointComponent
userKey={userKey}
setUserKey={setUserKey}
endpoint={
endpoint === EModelEndpoint.gptPlugins && config?.azure
endpoint === EModelEndpoint.gptPlugins && (config?.azure ?? false)
? EModelEndpoint.azureOpenAI
: endpoint
}
Expand Down
10 changes: 5 additions & 5 deletions client/src/components/Nav/ExportConversation/ExportModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,11 +25,11 @@ export default function ExportModal({
const [recursive, setRecursive] = useState<boolean | 'indeterminate'>(true);

const typeOptions = [
{ value: 'screenshot', display: 'screenshot (.png)' },
{ value: 'text', display: 'text (.txt)' },
{ value: 'markdown', display: 'markdown (.md)' },
{ value: 'json', display: 'json (.json)' },
{ value: 'csv', display: 'csv (.csv)' },
{ value: 'screenshot', label: 'screenshot (.png)' },
{ value: 'text', label: 'text (.txt)' },
{ value: 'markdown', label: 'markdown (.md)' },
{ value: 'json', label: 'json (.json)' },
{ value: 'csv', label: 'csv (.csv)' },
];

useEffect(() => {
Expand Down
10 changes: 5 additions & 5 deletions client/src/components/Nav/SettingsTabs/Chat/FontSizeSelector.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,11 +14,11 @@ export default function FontSizeSelector() {
};

const options = [
{ value: 'text-xs', display: localize('com_nav_font_size_xs') },
{ value: 'text-sm', display: localize('com_nav_font_size_sm') },
{ value: 'text-base', display: localize('com_nav_font_size_base') },
{ value: 'text-lg', display: localize('com_nav_font_size_lg') },
{ value: 'text-xl', display: localize('com_nav_font_size_xl') },
{ value: 'text-xs', label: localize('com_nav_font_size_xs') },
{ value: 'text-sm', label: localize('com_nav_font_size_sm') },
{ value: 'text-base', label: localize('com_nav_font_size_base') },
{ value: 'text-lg', label: localize('com_nav_font_size_lg') },
{ value: 'text-xl', label: localize('com_nav_font_size_xl') },
];

return (
Expand Down
6 changes: 3 additions & 3 deletions client/src/components/Nav/SettingsTabs/Chat/ForkSettings.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,9 @@ export const ForkSettings = () => {
const [remember, setRemember] = useRecoilState<boolean>(store.rememberForkOption);

const forkOptions = [
{ value: ForkOptions.DIRECT_PATH, display: localize('com_ui_fork_visible') },
{ value: ForkOptions.INCLUDE_BRANCHES, display: localize('com_ui_fork_branches') },
{ value: ForkOptions.TARGET_LEVEL, display: localize('com_ui_fork_all_target') },
{ value: ForkOptions.DIRECT_PATH, label: localize('com_ui_fork_visible') },
{ value: ForkOptions.INCLUDE_BRANCHES, label: localize('com_ui_fork_branches') },
{ value: ForkOptions.TARGET_LEVEL, label: localize('com_ui_fork_all_target') },
];

return (
Expand Down
48 changes: 24 additions & 24 deletions client/src/components/Nav/SettingsTabs/General/General.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,9 +21,9 @@ export const ThemeSelector = ({
const localize = useLocalize();

const themeOptions = [
{ value: 'system', display: localize('com_nav_theme_system') },
{ value: 'dark', display: localize('com_nav_theme_dark') },
{ value: 'light', display: localize('com_nav_theme_light') },
{ value: 'system', label: localize('com_nav_theme_system') },
{ value: 'dark', label: localize('com_nav_theme_dark') },
{ value: 'light', label: localize('com_nav_theme_light') },
];

return (
Expand Down Expand Up @@ -81,27 +81,27 @@ export const LangSelector = ({

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

return (
Expand Down
6 changes: 3 additions & 3 deletions client/src/components/Nav/SettingsTabs/Speech/STT/EngineSTTDropdown.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,10 +14,10 @@ const EngineSTTDropdown: React.FC<EngineSTTDropdownProps> = ({ external }) => {

const endpointOptions = external
? [
{ value: 'browser', display: localize('com_nav_browser') },
{ value: 'external', display: localize('com_nav_external') },
{ value: 'browser', label: localize('com_nav_browser') },
{ 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) => {
setEngineSTT(value);
Expand Down
154 changes: 77 additions & 77 deletions client/src/components/Nav/SettingsTabs/Speech/STT/LanguageSTTDropdown.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,83 +8,83 @@ export default function LanguageSTTDropdown() {
const [languageSTT, setLanguageSTT] = useRecoilState<string>(store.languageSTT);

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

const handleSelect = (value: string) => {
Expand Down
4 changes: 2 additions & 2 deletions client/src/components/Nav/SettingsTabs/Speech/Speech.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ function Speech() {
const [decibelValue, setDecibelValue] = useRecoilState(store.decibelValue);
const [autoSendText, setAutoSendText] = useRecoilState(store.autoSendText);
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>(
store.cloudBrowserVoices,
);
Expand All @@ -53,7 +53,7 @@ function Speech() {
const [playbackRate, setPlaybackRate] = useRecoilState(store.playbackRate);

const updateSetting = useCallback(
(key, newValue) => {
(key: string, newValue: string | number) => {
const settings = {
sttExternal: { value: sttExternal, setFunc: setSttExternal },
ttsExternal: { value: ttsExternal, setFunc: setTtsExternal },
Expand Down
10 changes: 5 additions & 5 deletions client/src/components/Nav/SettingsTabs/Speech/TTS/EngineTTSDropdown.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,13 +14,13 @@ const EngineTTSDropdown: React.FC<EngineTTSDropdownProps> = ({ external }) => {

const endpointOptions = external
? [
{ value: 'browser', display: localize('com_nav_browser') },
{ value: 'edge', display: localize('com_nav_edge') },
{ value: 'external', display: localize('com_nav_external') },
{ value: 'browser', label: localize('com_nav_browser') },
{ value: 'edge', label: localize('com_nav_edge') },
{ value: 'external', label: localize('com_nav_external') },
]
: [
{ value: 'browser', display: localize('com_nav_browser') },
{ value: 'edge', display: localize('com_nav_edge') },
{ value: 'browser', label: localize('com_nav_browser') },
{ value: 'edge', label: localize('com_nav_edge') },
];

const handleSelect = (value: string) => {
Expand Down
Loading

0 comments on commit 90d3028

Please sign in to comment.