🗣️ fix: get speechTab config; feature: not overriding variables selected by user (#3282)

* fix(Speech): speechTab settings update

* fix: get speech config; refactor: moved everything to types and removed file types; feature: not overriding variables selected by user

api/server/services/Files/Audio/getCustomConfigSpeech.js

@@ -26,6 +26,7 @@ async function getCustomConfigSpeech(req, res) {
     if (ttsSchema.advancedMode !== undefined) {
       settings.advancedMode = ttsSchema.advancedMode;
     }
+
     if (ttsSchema.speechToText) {
       for (const key in ttsSchema.speechToText) {
         if (ttsSchema.speechToText[key] !== undefined) {
@@ -33,6 +34,7 @@ async function getCustomConfigSpeech(req, res) {
         }
       }
     }
+
     if (ttsSchema.textToSpeech) {
       for (const key in ttsSchema.textToSpeech) {
         if (ttsSchema.textToSpeech[key] !== undefined) {
@@ -41,7 +43,7 @@ async function getCustomConfigSpeech(req, res) {
       }
     }
 
-    res.json(settings);
+    return res.status(200).send(settings);
   } catch (error) {
     res.status(200).send();
   }

client/src/components/Nav/SettingsTabs/Speech/Speech.tsx

@@ -23,11 +23,11 @@ import {
   AutoSendTextSwitch,
   AutoTranscribeAudioSwitch,
 } from './STT';
-import { useCustomConfigSpeechQuery } from '~/data-provider';
+import { useGetCustomConfigSpeechQuery } from 'librechat-data-provider/react-query';
 
 function Speech() {
   const [confirmClear, setConfirmClear] = useState(false);
-  const { data } = useCustomConfigSpeechQuery();
+  const { data } = useGetCustomConfigSpeechQuery();
   const isSmallScreen = useMediaQuery('(max-width: 767px)');
 
   const [advancedMode, setAdvancedMode] = useRecoilState(store.advancedMode);
@@ -66,10 +66,12 @@ function Speech() {
         playbackRate: { value: playbackRate, setFunc: setPlaybackRate },
       };
 
-      if (settings[key]) {
+      if (settings[key].value !== newValue || settings[key].value === newValue || !settings[key]) {
+        return;
+      }
+
       const setting = settings[key];
       setting.setFunc(newValue);
-      }
     },
     [
       conversationMode,
@@ -111,7 +113,8 @@ function Speech() {
         updateSetting(key, value);
       });
     }
-  }, []);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [data]);
 
   const contentRef = useRef(null);
   useOnClickOutside(contentRef, () => confirmClear && setConfirmClear(false), []);

packages/data-provider/src/data-service.ts

@@ -355,7 +355,7 @@ export const getVoices = (): Promise<f.VoiceResponse> => {
   return request.get(endpoints.textToSpeechVoices());
 };
 
-export const getCustomConfigSpeech = (): Promise<f.getCustomConfigSpeechResponse[]> => {
+export const getCustomConfigSpeech = (): Promise<t.TCustomConfigSpeechResponse> => {
   return request.get(endpoints.getCustomConfigSpeech());
 };
 

packages/data-provider/src/react-query/react-query-service.ts

@@ -422,3 +422,18 @@ export const useGetStartupConfig = (
     },
   );
 };
+
+export const useGetCustomConfigSpeechQuery = (
+  config?: UseQueryOptions<t.TCustomConfigSpeechResponse>,
+): QueryObserverResult<t.TCustomConfigSpeechResponse> => {
+  return useQuery<t.TCustomConfigSpeechResponse>(
+    [QueryKeys.customConfigSpeech],
+    () => dataService.getCustomConfigSpeech(),
+    {
+      refetchOnWindowFocus: false,
+      refetchOnReconnect: false,
+      refetchOnMount: false,
+      ...config,
+    },
+  );
+};

packages/data-provider/src/types.ts

@@ -463,3 +463,5 @@ export type TGetRandomPromptsRequest = {
   limit: number;
   skip: number;
 };
+
+export type TCustomConfigSpeechResponse = { [key: string]: string };

packages/data-provider/src/types/files.ts

@@ -83,8 +83,6 @@ export type SpeechToTextResponse = {
 
 export type VoiceResponse = string[];
 
-export type getCustomConfigSpeechResponse = { [key: string]: string };
-
 export type UploadMutationOptions = {
   onSuccess?: (data: TFileUpload, variables: FormData, context?: unknown) => void;
   onMutate?: (variables: FormData) => void | Promise<unknown>;
@@ -115,12 +113,6 @@ export type VoiceOptions = {
   onError?: (error: unknown, variables: unknown, context?: unknown) => void;
 };
 
-export type getCustomConfigSpeechOptions = {
-  onSuccess?: (data: getCustomConfigSpeechResponse, variables: unknown, context?: unknown) => void;
-  onMutate?: () => void | Promise<unknown>;
-  onError?: (error: unknown, variables: unknown, context?: unknown) => void;
-};
-
 export type DeleteFilesResponse = {
   message: string;
   result: Record<string, unknown>;