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/Conversations/Conversation.jsx

@@ -4,15 +4,15 @@ import { useUpdateConversationMutation } from 'librechat-data-provider';
 import RenameButton from './RenameButton';
 import DeleteButton from './DeleteButton';
 import ConvoIcon from '../svg/ConvoIcon';
-
+import { useConversations, useConversation } from '~/hooks';
 import store from '~/store';
 
 export default function Conversation({ conversation, retainView }) {
   const [currentConversation, setCurrentConversation] = useRecoilState(store.conversation);
   const setSubmission = useSetRecoilState(store.submission);
 
-  const { refreshConversations } = store.useConversations();
-  const { switchToConversation } = store.useConversation();
+  const { refreshConversations } = useConversations();
+  const { switchToConversation } = useConversation();
 
   const updateConvoMutation = useUpdateConversationMutation(currentConversation?.conversationId);
 

client/src/components/Conversations/DeleteButton.jsx

@@ -5,14 +5,14 @@ import { useRecoilValue } from 'recoil';
 import { useDeleteConversationMutation } from 'librechat-data-provider';
 import { Dialog, DialogTrigger, Label } from '~/components/ui/';
 import DialogTemplate from '~/components/ui/DialogTemplate';
+import { useLocalize, useConversations, useConversation } from '~/hooks';
 import store from '~/store';
-import { useLocalize } from '~/hooks';
 
 export default function DeleteButton({ conversationId, renaming, retainView, title }) {
   const localize = useLocalize();
   const currentConversation = useRecoilValue(store.conversation) || {};
-  const { newConversation } = store.useConversation();
-  const { refreshConversations } = store.useConversations();
+  const { newConversation } = useConversation();
+  const { refreshConversations } = useConversations();
 
   const confirmDelete = () => {
     deleteConvoMutation.mutate({ conversationId, source: 'button' });

client/src/components/Endpoints/EditPresetDialog.tsx

@@ -16,7 +16,6 @@ const EditPresetDialog = ({ open, onOpenChange, preset: _preset, title }: TEditP
   const [preset, setPreset] = useRecoilState(store.preset);
   const setPresets = useSetRecoilState(store.presets);
   const availableEndpoints = useRecoilValue(store.availableEndpoints);
-  const endpointsConfig = useRecoilValue(store.endpointsConfig);
   const { setOption } = useSetOptions(_preset);
   const localize = useLocalize();
 
@@ -27,7 +26,7 @@ const EditPresetDialog = ({ open, onOpenChange, preset: _preset, title }: TEditP
     axios({
       method: 'post',
       url: '/api/presets',
-      data: cleanupPreset({ preset, endpointsConfig }),
+      data: cleanupPreset({ preset }),
       withCredentials: true,
     }).then((res) => {
       setPresets(res?.data);
@@ -40,7 +39,7 @@ const EditPresetDialog = ({ open, onOpenChange, preset: _preset, title }: TEditP
     }
     const fileName = filenamify(preset?.title || 'preset');
     exportFromJSON({
-      data: cleanupPreset({ preset, endpointsConfig }),
+      data: cleanupPreset({ preset }),
       fileName,
       exportType: exportFromJSON.types.json,
     });

client/src/components/Endpoints/EndpointOptionsDialog.tsx

@@ -1,6 +1,6 @@
 import exportFromJSON from 'export-from-json';
 import { useEffect, useState } from 'react';
-import { useRecoilValue, useRecoilState } from 'recoil';
+import { useRecoilState } from 'recoil';
 import { tPresetSchema } from 'librechat-data-provider';
 import type { TSetOption, TEditPresetProps } from '~/common';
 import { Dialog, DialogButton } from '~/components/ui';
@@ -21,7 +21,6 @@ const EndpointOptionsDialog = ({
 }: TEditPresetProps) => {
   const [preset, setPreset] = useRecoilState(store.preset);
   const [saveAsDialogShow, setSaveAsDialogShow] = useState(false);
-  const endpointsConfig = useRecoilValue(store.endpointsConfig);
   const localize = useLocalize();
 
   const setOption: TSetOption = (param) => (newValue) => {
@@ -44,7 +43,7 @@ const EndpointOptionsDialog = ({
       return;
     }
     exportFromJSON({
-      data: cleanupPreset({ preset, endpointsConfig }),
+      data: cleanupPreset({ preset }),
       fileName: `${preset?.title}.json`,
       exportType: exportFromJSON.types.json,
     });

client/src/components/Endpoints/EndpointSettings.tsx

@@ -23,13 +23,13 @@ export default function Settings({
   isPreset = false,
   className = '',
 }: TSettingsProps) {
-  const endpointsConfig = useRecoilValue(store.endpointsConfig);
+  const modelsConfig = useRecoilValue(store.modelsConfig);
   if (!conversation?.endpoint) {
     return null;
   }
 
   const { endpoint } = conversation;
-  const models = endpointsConfig?.[endpoint]?.['availableModels'] || [];
+  const models = modelsConfig?.[endpoint] ?? [];
   const OptionComponent = optionComponents[endpoint];
 
   if (OptionComponent) {

client/src/components/Endpoints/SaveAsPresetDialog.tsx

@@ -1,16 +1,13 @@
 import React, { useEffect, useState } from 'react';
-import { useRecoilValue } from 'recoil';
 import { useCreatePresetMutation } from 'librechat-data-provider';
 import type { TEditPresetProps } from '~/common';
 import { Dialog, Input, Label } from '~/components/ui/';
 import DialogTemplate from '~/components/ui/DialogTemplate';
 import { cn, defaultTextPropsLabel, removeFocusOutlines, cleanupPreset } from '~/utils/';
 import { useLocalize } from '~/hooks';
-import store from '~/store';
 
 const SaveAsPresetDialog = ({ open, onOpenChange, preset }: TEditPresetProps) => {
   const [title, setTitle] = useState<string>(preset?.title || 'My Preset');
-  const endpointsConfig = useRecoilValue(store.endpointsConfig);
   const createPresetMutation = useCreatePresetMutation();
   const localize = useLocalize();
 
@@ -20,7 +17,6 @@ const SaveAsPresetDialog = ({ open, onOpenChange, preset }: TEditPresetProps) =>
         ...preset,
         title,
       },
-      endpointsConfig,
     });
     createPresetMutation.mutate(_preset);
   };

client/src/components/Input/EndpointMenu/EndpointMenu.jsx

@@ -23,12 +23,13 @@ import {
   TooltipContent,
 } from '~/components/ui/';
 import DialogTemplate from '~/components/ui/DialogTemplate';
-import { cn, cleanupPreset, getDefaultConversation } from '~/utils';
-import { useLocalize, useLocalStorage } from '~/hooks';
+import { cn, cleanupPreset } from '~/utils';
+import { useLocalize, useLocalStorage, useConversation, useDefaultConvo } from '~/hooks';
 import store from '~/store';
 
 export default function NewConversationMenu() {
   const localize = useLocalize();
+  const getDefaultConversation = useDefaultConvo();
   const [menuOpen, setMenuOpen] = useState(false);
   const [showPresets, setShowPresets] = useState(true);
   const [showEndpoints, setShowEndpoints] = useState(true);
@@ -37,12 +38,12 @@ export default function NewConversationMenu() {
   const [conversation, setConversation] = useRecoilState(store.conversation) ?? {};
   const [messages, setMessages] = useRecoilState(store.messages);
   const availableEndpoints = useRecoilValue(store.availableEndpoints);
-  const endpointsConfig = useRecoilValue(store.endpointsConfig);
+
   const [presets, setPresets] = useRecoilState(store.presets);
   const modularEndpoints = new Set(['gptPlugins', 'anthropic', 'google', 'openAI']);
 
-  const { endpoint, conversationId } = conversation;
-  const { newConversation } = store.useConversation();
+  const { endpoint } = conversation;
+  const { newConversation } = useConversation();
 
   const deletePresetsMutation = useDeletePresetMutation();
   const createPresetMutation = useCreatePresetMutation();
@@ -62,19 +63,10 @@ export default function NewConversationMenu() {
   };
 
   const onFileSelected = (jsonData) => {
-    const jsonPreset = { ...cleanupPreset({ preset: jsonData, endpointsConfig }), presetId: null };
+    const jsonPreset = { ...cleanupPreset({ preset: jsonData }), presetId: null };
     importPreset(jsonPreset);
   };
 
-  // update the default model when availableModels changes
-  // typically, availableModels changes => modelsFilter or customGPTModels changes
-  useEffect(() => {
-    const isInvalidConversation = !availableEndpoints.find((e) => e === endpoint);
-    if (conversationId == 'new' && isInvalidConversation) {
-      newConversation();
-    }
-  }, [availableEndpoints]);
-
   // save states to localStorage
   const [newUser, setNewUser] = useLocalStorage('newUser', true);
   const [lastModel, setLastModel] = useLocalStorage('lastSelectedModel', {});
@@ -82,7 +74,12 @@ export default function NewConversationMenu() {
   const [lastBingSettings, setLastBingSettings] = useLocalStorage('lastBingSettings', {});
   useEffect(() => {
     if (endpoint && endpoint !== 'bingAI') {
-      setLastModel({ ...lastModel, [endpoint]: conversation?.model }), setLastConvo(conversation);
+      const lastModelUpdate = { ...lastModel, [endpoint]: conversation?.model };
+      if (endpoint === 'gptPlugins') {
+        lastModelUpdate.secondaryModel = conversation.agentOptions.model;
+      }
+      setLastModel(lastModelUpdate);
+      setLastConvo(conversation);
     } else if (endpoint === 'bingAI') {
       const { jailbreak, toneStyle } = conversation;
       setLastBingSettings({ ...lastBingSettings, jailbreak, toneStyle });
@@ -114,7 +111,6 @@ export default function NewConversationMenu() {
     ) {
       const currentConvo = getDefaultConversation({
         conversation,
-        endpointsConfig,
         preset: newPreset,
       });
 

client/src/components/Input/ModelSelect/ModelSelect.tsx

@@ -32,14 +32,14 @@ const optionComponents: { [key: string]: React.FC<TModelSelectProps> } = {
 };
 
 export default function ModelSelect({ conversation, setOption }: TSelectProps) {
-  const endpointsConfig = useRecoilValue(store.endpointsConfig);
+  const modelsConfig = useRecoilValue(store.modelsConfig);
   if (!conversation?.endpoint) {
     return null;
   }
 
   const { endpoint } = conversation;
   const OptionComponent = optionComponents[endpoint];
-  const models = endpointsConfig?.[endpoint]?.['availableModels'] ?? [];
+  const models = modelsConfig?.[endpoint] ?? [];
 
   if (!OptionComponent) {
     return null;

client/src/components/Messages/Message.tsx

@@ -9,7 +9,7 @@ import MultiMessage from './MultiMessage';
 import HoverButtons from './HoverButtons';
 import SiblingSwitch from './SiblingSwitch';
 import { getIcon } from '~/components/Endpoints';
-import { useMessageHandler } from '~/hooks';
+import { useMessageHandler, useConversation } from '~/hooks';
 import type { TMessageProps } from '~/common';
 import { cn } from '~/utils';
 import store from '~/store';
@@ -27,7 +27,7 @@ export default function Message({
   const setLatestMessage = useSetRecoilState(store.latestMessage);
   const [abortScroll, setAbort] = useState(false);
   const { isSubmitting, ask, regenerate, handleContinue } = useMessageHandler();
-  const { switchToConversation } = store.useConversation();
+  const { switchToConversation } = useConversation();
   const {
     text,
     children,

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), []);