refactor: Speed up Config fetching and Setup Config Groundwork 👷🚧 (#1297)

* refactor: move endpoint services to own directory

* refactor: make endpointconfig handling more concise, separate logic, and cache result for subsequent serving

* refactor: ModelController gets same treatment as EndpointController, draft OverrideController

* wip: flesh out override controller more to return real value

* refactor: client/api changes in anticipation of override

client/src/data-provider/index.ts

@@ -1 +1,2 @@
 export * from './mutations';
+export * from './queries';

client/src/data-provider/queries.ts

@@ -0,0 +1,17 @@
+import { UseQueryOptions, useQuery, QueryObserverResult } from '@tanstack/react-query';
+import { QueryKeys, dataService } from 'librechat-data-provider';
+
+export const useGetEndpointsConfigOverride = <TData = unknown | boolean>(
+  config?: UseQueryOptions<unknown | boolean, unknown, TData>,
+): QueryObserverResult<TData> => {
+  return useQuery<unknown | boolean, unknown, TData>(
+    [QueryKeys.endpointsConfigOverride],
+    () => dataService.getEndpointsConfigOverride(),
+    {
+      refetchOnWindowFocus: false,
+      refetchOnReconnect: false,
+      refetchOnMount: false,
+      ...config,
+    },
+  );
+};

client/src/hooks/Config/index.ts

@@ -0,0 +1 @@
+export { default as useConfigOverride } from './useConfigOverride';

client/src/hooks/Config/useConfigOverride.ts

@@ -0,0 +1,47 @@
+import { useSetRecoilState } from 'recoil';
+import { useEffect, useCallback } from 'react';
+import { useQueryClient } from '@tanstack/react-query';
+import type { TEndpointsConfig, TModelsConfig } from 'librechat-data-provider';
+import { useGetEndpointsConfigOverride } from '~/data-provider';
+import { QueryKeys } from 'librechat-data-provider';
+import store from '~/store';
+
+type TempOverrideType = Record<string, unknown> & {
+  endpointsConfig: TEndpointsConfig;
+  modelsConfig: TModelsConfig;
+  combinedOptions: unknown[];
+  combined: boolean;
+};
+
+export default function useConfigOverride() {
+  const setModelsConfig = useSetRecoilState(store.modelsConfig);
+  const setEndpointsQueryEnabled = useSetRecoilState(store.endpointsQueryEnabled);
+  const overrideQuery = useGetEndpointsConfigOverride({
+    staleTime: Infinity,
+  });
+
+  const queryClient = useQueryClient();
+
+  const handleOverride = useCallback(
+    async (data: unknown | boolean) => {
+      const { endpointsConfig, modelsConfig } = data as TempOverrideType;
+      if (endpointsConfig) {
+        setEndpointsQueryEnabled(false);
+        await queryClient.cancelQueries([QueryKeys.endpoints]);
+        queryClient.setQueryData([QueryKeys.endpoints], endpointsConfig);
+      }
+      if (modelsConfig) {
+        await queryClient.cancelQueries([QueryKeys.models]);
+        queryClient.setQueryData([QueryKeys.models], modelsConfig);
+        setModelsConfig(modelsConfig);
+      }
+    },
+    [queryClient, setEndpointsQueryEnabled, setModelsConfig],
+  );
+
+  useEffect(() => {
+    if (overrideQuery.data) {
+      handleOverride(overrideQuery.data);
+    }
+  }, [overrideQuery.data, handleOverride]);
+}

client/src/hooks/index.ts

@@ -1,4 +1,5 @@
 export * from './Messages';
+export * from './Config';
 export * from './Input';
 export * from './Conversations';
 

client/src/routes/ChatRoute.tsx

@@ -1,20 +1,23 @@
+import { useRecoilValue } from 'recoil';
 import { useEffect, useRef } from 'react';
 import { useParams } from 'react-router-dom';
 import { useGetConvoIdQuery, useGetModelsQuery } from 'librechat-data-provider';
+import { useNewConvo, useConfigOverride } from '~/hooks';
 import ChatView from '~/components/Chat/ChatView';
 import useAuthRedirect from './useAuthRedirect';
-import { useNewConvo } from '~/hooks';
 import store from '~/store';
 
 export default function ChatRoute() {
   const index = 0;
+  useConfigOverride();
   const { conversationId } = useParams();
   const { conversation } = store.useCreateConversationAtom(index);
+  const modelsQueryEnabled = useRecoilValue(store.modelsQueryEnabled);
   const { isAuthenticated } = useAuthRedirect();
   const { newConversation } = useNewConvo();
   const hasSetConversation = useRef(false);
 
-  const modelsQuery = useGetModelsQuery({ enabled: isAuthenticated });
+  const modelsQuery = useGetModelsQuery({ enabled: isAuthenticated && modelsQueryEnabled });
   const initialConvoQuery = useGetConvoIdQuery(conversationId ?? '', {
     enabled: isAuthenticated && conversationId !== 'new',
   });

client/src/routes/Root.tsx

@@ -20,11 +20,12 @@ export default function Root() {
   const submission = useRecoilValue(store.submission);
   useServerStream(submission ?? null);
 
+  const modelsQueryEnabled = useRecoilValue(store.modelsQueryEnabled);
   const setIsSearchEnabled = useSetRecoilState(store.isSearchEnabled);
   const setModelsConfig = useSetRecoilState(store.modelsConfig);
 
   const searchEnabledQuery = useGetSearchEnabledQuery({ enabled: isAuthenticated });
-  const modelsQuery = useGetModelsQuery({ enabled: isAuthenticated });
+  const modelsQuery = useGetModelsQuery({ enabled: isAuthenticated && modelsQueryEnabled });
 
   useEffect(() => {
     localStorage.setItem('navVisible', JSON.stringify(navVisible));

client/src/store/endpoints.ts

@@ -17,6 +17,11 @@ const endpointsConfig = atom<TEndpointsConfig>({
   default: defaultConfig,
 });
 
+const endpointsQueryEnabled = atom<boolean>({
+  key: 'endpointsQueryEnabled',
+  default: true,
+});
+
 const plugins = selector({
   key: 'plugins',
   get: ({ get }) => {
@@ -62,4 +67,5 @@ export default {
   endpointsFilter,
   availableEndpoints,
   defaultConfig,
+  endpointsQueryEnabled,
 };

client/src/store/models.ts

@@ -25,6 +25,12 @@ const modelsConfig = atom<TModelsConfig>({
   },
 });
 
+const modelsQueryEnabled = atom<boolean>({
+  key: 'modelsQueryEnabled',
+  default: true,
+});
+
 export default {
   modelsConfig,
+  modelsQueryEnabled,
 };