feat: OpenRouter Support & Improve Model Fetching ⇆ (#936)

* chore(ChatGPTClient.js): add support for OpenRouter API
chore(OpenAIClient.js): add support for OpenRouter API

* chore: comment out token debugging

* chore: add back streamResult assignment

* chore: remove double condition/assignment from merging

* refactor(routes/endpoints): -> controller/services logic

* feat: add openrouter model fetching

* chore: remove unused endpointsConfig in cleanupPreset function

* refactor: separate models concern from endpointsConfig

* refactor(data-provider): add TModels type and make TEndpointsConfig adaptible to new endpoint keys

* refactor: complete models endpoint service in data-provider

* refactor: onMutate for refreshToken and login, invalidate models query

* feat: complete models endpoint logic for frontend

* chore: remove requireJwtAuth from /api/endpoints and /api/models as not implemented yet

* fix: endpoint will not be overwritten and instead use active value

* feat: openrouter support for plugins

* chore(EndpointOptionsDialog): remove unused recoil value

* refactor(schemas/parseConvo): add handling of secondaryModels to use first of defined secondary models, which includes last selected one as first, or default to the convo's secondary model value

* refactor: remove hooks from store and move to hooks
refactor(switchToConversation): make switchToConversation use latest recoil state, which is necessary to get the most up-to-date models list, replace wrapper function
refactor(getDefaultConversation): factor out logic into 3 pieces to reduce complexity.

* fix: backend tests

* feat: optimistic update by calling newConvo when models are fetched

* feat: openrouter support for titling convos

* feat: cache models fetch

* chore: add missing dep to AuthContext useEffect

* chore: fix useTimeout types

* chore: delete old getDefaultConvo file

* chore: remove newConvo logic from Root, remove console log from api models caching

* chore: ensure bun is used for building in b:client script

* fix: default endpoint will not default to null on a completely fresh login (no localStorage/cookies)

* chore: add openrouter docs to free_ai_apis.md and .env.example

* chore: remove openrouter console logs

* feat: add debugging env variable for Plugins

client/src/hooks/AuthContext.tsx

@@ -95,7 +95,7 @@ const AuthContextProvider = ({
         });
       },
     });
-  }, [setUserContext, logoutUser]);
+  }, [setUserContext, doSetError, logoutUser]);
 
   const silentRefresh = useCallback(() => {
     refreshToken.mutate(undefined, {

client/src/hooks/index.ts

@@ -11,6 +11,9 @@ export { default as useSetOptions } from './useSetOptions';
 export { default as useGenerations } from './useGenerations';
 export { default as useScrollToRef } from './useScrollToRef';
 export { default as useLocalStorage } from './useLocalStorage';
+export { default as useConversation } from './useConversation';
+export { default as useDefaultConvo } from './useDefaultConvo';
 export { default as useServerStream } from './useServerStream';
+export { default as useConversations } from './useConversations';
 export { default as useOnClickOutside } from './useOnClickOutside';
 export { default as useMessageHandler } from './useMessageHandler';

client/src/hooks/useConversation.ts

@@ -0,0 +1,85 @@
+import { useCallback } from 'react';
+import { useSetRecoilState, useResetRecoilState, useRecoilCallback, useRecoilValue } from 'recoil';
+import { TConversation, TMessagesAtom, TSubmission, TPreset } from 'librechat-data-provider';
+import { buildDefaultConvo, getDefaultEndpoint } from '~/utils';
+import store from '~/store';
+
+const useConversation = () => {
+  const setConversation = useSetRecoilState(store.conversation);
+  const setMessages = useSetRecoilState<TMessagesAtom>(store.messages);
+  const setSubmission = useSetRecoilState<TSubmission | null>(store.submission);
+  const resetLatestMessage = useResetRecoilState(store.latestMessage);
+  const endpointsConfig = useRecoilValue(store.endpointsConfig);
+
+  const switchToConversation = useRecoilCallback(
+    ({ snapshot }) =>
+      async (
+        conversation: TConversation,
+        messages: TMessagesAtom = null,
+        preset: TPreset | null = null,
+      ) => {
+        const modelsConfig = snapshot.getLoadable(store.modelsConfig).contents;
+        const { endpoint = null } = conversation;
+
+        if (endpoint === null) {
+          const defaultEndpoint = getDefaultEndpoint({
+            convoSetup: preset ?? conversation,
+            endpointsConfig,
+          });
+
+          const models = modelsConfig?.[defaultEndpoint] ?? [];
+          conversation = buildDefaultConvo({
+            conversation,
+            lastConversationSetup: preset as TConversation,
+            endpoint: defaultEndpoint,
+            models,
+          });
+        }
+
+        setConversation(conversation);
+        setMessages(messages);
+        setSubmission({} as TSubmission);
+        resetLatestMessage();
+      },
+    [endpointsConfig],
+  );
+
+  const newConversation = useCallback(
+    (template = {}, preset?: TPreset) => {
+      switchToConversation(
+        {
+          conversationId: 'new',
+          title: 'New Chat',
+          ...template,
+          endpoint: null,
+          createdAt: '',
+          updatedAt: '',
+        },
+        [],
+        preset,
+      );
+    },
+    [switchToConversation],
+  );
+
+  const searchPlaceholderConversation = useCallback(() => {
+    switchToConversation(
+      {
+        conversationId: 'search',
+        title: 'Search',
+        endpoint: null,
+        createdAt: '',
+        updatedAt: '',
+      },
+      [],
+    );
+  }, [switchToConversation]);
+
+  return {
+    switchToConversation,
+    newConversation,
+    searchPlaceholderConversation,
+  };
+};
+
+export default useConversation;

client/src/hooks/useConversations.ts

@@ -0,0 +1,15 @@
+import { useSetRecoilState } from 'recoil';
+import { useCallback } from 'react';
+import store from '~/store';
+
+const useConversations = () => {
+  const setRefreshConversationsHint = useSetRecoilState(store.refreshConversationsHint);
+
+  const refreshConversations = useCallback(() => {
+    setRefreshConversationsHint((prevState) => prevState + 1);
+  }, [setRefreshConversationsHint]);
+
+  return { refreshConversations };
+};
+
+export default useConversations;

client/src/hooks/useDefaultConvo.ts

@@ -0,0 +1,30 @@
+import { useRecoilValue } from 'recoil';
+import type { TConversation, TPreset } from 'librechat-data-provider';
+import { getDefaultEndpoint, buildDefaultConvo } from '~/utils';
+import store from '~/store';
+
+type TDefaultConvo = { conversation: Partial<TConversation>; preset?: Partial<TPreset> | null };
+
+const useDefaultConvo = () => {
+  const endpointsConfig = useRecoilValue(store.endpointsConfig);
+  const modelsConfig = useRecoilValue(store.modelsConfig);
+
+  const getDefaultConversation = ({ conversation, preset }: TDefaultConvo) => {
+    const endpoint = getDefaultEndpoint({
+      convoSetup: preset as TPreset,
+      endpointsConfig,
+    });
+    const models = modelsConfig?.[endpoint] || [];
+
+    return buildDefaultConvo({
+      conversation: conversation as TConversation,
+      endpoint,
+      lastConversationSetup: preset as TConversation,
+      models,
+    });
+  };
+
+  return getDefaultConversation;
+};
+
+export default useDefaultConvo;

client/src/hooks/useMessageHandler.ts

@@ -1,7 +1,7 @@
 import { v4 } from 'uuid';
 import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
 import { parseConvo, getResponseSender } from 'librechat-data-provider';
-import type { TMessage, TSubmission } from 'librechat-data-provider';
+import type { TMessage, TSubmission, TEndpointOption } from 'librechat-data-provider';
 import type { TAskFunction } from '~/common';
 import useUserKey from './useUserKey';
 import store from '~/store';
@@ -54,10 +54,10 @@ const useMessageHandler = () => {
     // set the endpoint option
     const convo = parseConvo(endpoint, currentConversation);
     const endpointOption = {
-      endpoint,
       ...convo,
+      endpoint,
       key: getExpiry(),
-    };
+    } as TEndpointOption;
     const responseSender = getResponseSender(endpointOption);
 
     let currentMessages: TMessage[] | null = messages ?? [];

client/src/hooks/usePresetOptions.ts

@@ -23,7 +23,6 @@ const usePresetOptions: TUsePresetOptions = (_preset) => {
           ...prevState,
           ...update,
         },
-        endpointsConfig,
       }),
     );
   };
@@ -41,7 +40,6 @@ const usePresetOptions: TUsePresetOptions = (_preset) => {
           ...prevState,
           ...update,
         },
-        endpointsConfig,
       }),
     );
   };
@@ -57,7 +55,6 @@ const usePresetOptions: TUsePresetOptions = (_preset) => {
           ...prevState,
           ...update,
         },
-        endpointsConfig,
       }),
     );
   };
@@ -73,7 +70,6 @@ const usePresetOptions: TUsePresetOptions = (_preset) => {
             ...prevState,
             ...update,
           },
-          endpointsConfig,
         }),
       );
       return;
@@ -86,7 +82,6 @@ const usePresetOptions: TUsePresetOptions = (_preset) => {
           ...prevState,
           ...update,
         },
-        endpointsConfig,
       }),
     );
   };
@@ -101,7 +96,6 @@ const usePresetOptions: TUsePresetOptions = (_preset) => {
           ...prevState,
           agentOptions,
         },
-        endpointsConfig,
       }),
     );
   };

client/src/hooks/useServerStream.ts

@@ -3,7 +3,9 @@ import { useResetRecoilState, useSetRecoilState } from 'recoil';
 /* @ts-ignore */
 import { SSE, createPayload, tMessageSchema, tConversationSchema } from 'librechat-data-provider';
 import type { TResPlugin, TMessage, TConversation, TSubmission } from 'librechat-data-provider';
-import { useAuthContext } from '~/hooks/AuthContext';
+import useConversations from './useConversations';
+import { useAuthContext } from './AuthContext';
+
 import store from '~/store';
 
 type TResData = {
@@ -22,7 +24,7 @@ export default function useServerStream(submission: TSubmission | null) {
   const resetLatestMessage = useResetRecoilState(store.latestMessage);
   const { token } = useAuthContext();
 
-  const { refreshConversations } = store.useConversations();
+  const { refreshConversations } = useConversations();
 
   const messageHandler = (data: string, submission: TSubmission) => {
     const {

client/src/hooks/useTimeout.tsx

@@ -2,14 +2,14 @@ import { useEffect, useRef } from 'react';
 
 type TUseTimeoutParams = {
   callback: (error: string | number | boolean | null) => void;
-  delay?: number | undefined;
+  delay?: number;
 };
 type TTimeout = ReturnType<typeof setTimeout> | null;
 
 function useTimeout({ callback, delay = 400 }: TUseTimeoutParams) {
   const timeout = useRef<TTimeout>(null);
 
-  const callOnTimeout = (value: string | undefined) => {
+  const callOnTimeout = (value?: string) => {
     // Clear existing timeout
     if (timeout.current !== null) {
       clearTimeout(timeout.current);