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/components/Nav/ClearConvos.tsx

@@ -3,12 +3,11 @@ import { Dialog } from '~/components/ui/';
 import DialogTemplate from '~/components/ui/DialogTemplate';
 import { ClearChatsButton } from './SettingsTabs/';
 import { useClearConversationsMutation } from 'librechat-data-provider';
-import store from '~/store';
-import { useLocalize } from '~/hooks';
+import { useLocalize, useConversation, useConversations } from '~/hooks';
 
 const ClearConvos = ({ open, onOpenChange }) => {
-  const { newConversation } = store.useConversation();
-  const { refreshConversations } = store.useConversations();
+  const { newConversation } = useConversation();
+  const { refreshConversations } = useConversations();
   const clearConvosMutation = useClearConversationsMutation();
   const [confirmClear, setConfirmClear] = useState(false);
   const localize = useLocalize();

client/src/components/Nav/ExportConversation/ExportModel.jsx

@@ -22,7 +22,6 @@ export default function ExportModel({ open, onOpenChange }) {
 
   const conversation = useRecoilValue(store.conversation) || {};
   const messagesTree = useRecoilValue(store.messagesTree) || [];
-  const endpointsConfig = useRecoilValue(store.endpointsConfig);
 
   const getSiblingIdx = useRecoilCallback(
     ({ snapshot }) =>
@@ -197,7 +196,7 @@ export default function ExportModel({ open, onOpenChange }) {
 
     if (includeOptions) {
       data += '\n## Options\n';
-      const options = cleanupPreset({ preset: conversation, endpointsConfig });
+      const options = cleanupPreset({ preset: conversation });
 
       for (const key of Object.keys(options)) {
         data += `- ${key}: ${options[key]}\n`;
@@ -246,7 +245,7 @@ export default function ExportModel({ open, onOpenChange }) {
 
     if (includeOptions) {
       data += '\nOptions\n########################\n';
-      const options = cleanupPreset({ preset: conversation, endpointsConfig });
+      const options = cleanupPreset({ preset: conversation });
 
       for (const key of Object.keys(options)) {
         data += `${key}: ${options[key]}\n`;
@@ -295,7 +294,7 @@ export default function ExportModel({ open, onOpenChange }) {
     };
 
     if (includeOptions) {
-      data.options = cleanupPreset({ preset: conversation, endpointsConfig });
+      data.options = cleanupPreset({ preset: conversation });
     }
 
     const messages = await buildMessageTree({

client/src/components/Nav/MobileNav.jsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import { useRecoilValue } from 'recoil';
+import { useLocalize, useConversation } from '~/hooks';
 import store from '~/store';
-import { useLocalize } from '~/hooks';
 
 export default function MobileNav({ setNavVisible }) {
   const conversation = useRecoilValue(store.conversation);
-  const { newConversation } = store.useConversation();
+  const { newConversation } = useConversation();
   const { title = 'New Chat' } = conversation || {};
   const localize = useLocalize();
 

client/src/components/Nav/Nav.tsx

@@ -11,7 +11,14 @@ import SearchBar from './SearchBar';
 import NavLinks from './NavLinks';
 import { Panel, Spinner } from '~/components';
 import { Conversations, Pages } from '../Conversations';
-import { useAuthContext, useDebounce, useMediaQuery, useLocalize } from '~/hooks';
+import {
+  useAuthContext,
+  useDebounce,
+  useMediaQuery,
+  useLocalize,
+  useConversation,
+  useConversations,
+} from '~/hooks';
 import { cn } from '~/utils/';
 import store from '~/store';
 
@@ -47,14 +54,14 @@ export default function Nav({ navVisible, setNavVisible }) {
   const searchQuery = useRecoilValue(store.searchQuery);
   const isSearchEnabled = useRecoilValue(store.isSearchEnabled);
   const isSearching = useRecoilValue(store.isSearching);
-  const { newConversation, searchPlaceholderConversation } = store.useConversation();
+  const { newConversation, searchPlaceholderConversation } = useConversation();
 
   // current conversation
   const conversation = useRecoilValue(store.conversation);
   const { conversationId } = conversation || {};
   const setSearchResultMessages = useSetRecoilState(store.searchResultMessages);
   const refreshConversationsHint = useRecoilValue(store.refreshConversationsHint);
-  const { refreshConversations } = store.useConversations();
+  const { refreshConversations } = useConversations();
 
   const [isFetching, setIsFetching] = useState(false);
 

client/src/components/Nav/NewChat.jsx

@@ -1,9 +1,8 @@
 import React from 'react';
-import store from '~/store';
-import { useLocalize } from '~/hooks';
+import { useLocalize, useConversation } from '~/hooks';
 
 export default function NewChat() {
-  const { newConversation } = store.useConversation();
+  const { newConversation } = useConversation();
   const localize = useLocalize();
 
   const clickHandler = () => {

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

@@ -2,7 +2,13 @@ import { useRecoilState } from 'recoil';
 import * as Tabs from '@radix-ui/react-tabs';
 import React, { useState, useContext, useEffect, useCallback, useRef } from 'react';
 import { useClearConversationsMutation } from 'librechat-data-provider';
-import { ThemeContext, useLocalize, useOnClickOutside } from '~/hooks';
+import {
+  ThemeContext,
+  useLocalize,
+  useOnClickOutside,
+  useConversation,
+  useConversations,
+} from '~/hooks';
 import type { TDangerButtonProps } from '~/common';
 import DangerButton from './DangerButton';
 import store from '~/store';
@@ -87,7 +93,6 @@ export const LangSelector = ({
         <option value="ru">{localize('com_nav_lang_russian')}</option>
         <option value="jp">{localize('com_nav_lang_japanese')}</option>
         <option value="sv">{localize('com_nav_lang_swedish')}</option>
-
       </select>
     </div>
   );
@@ -98,8 +103,8 @@ function General() {
   const clearConvosMutation = useClearConversationsMutation();
   const [confirmClear, setConfirmClear] = useState(false);
   const [langcode, setLangcode] = useRecoilState(store.lang);
-  const { newConversation } = store.useConversation();
-  const { refreshConversations } = store.useConversations();
+  const { newConversation } = useConversation();
+  const { refreshConversations } = useConversations();
 
   const contentRef = useRef(null);
   useOnClickOutside(contentRef, () => confirmClear && setConfirmClear(false), []);