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

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);

client/src/routes/Chat.tsx

@@ -1,19 +1,19 @@
 import { useState, useEffect } from 'react';
-import { useAuthContext } from '~/hooks';
 import { useNavigate, useParams } from 'react-router-dom';
 import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
-
-import Landing from '~/components/ui/Landing';
-import Messages from '~/components/Messages/Messages';
-import TextChat from '~/components/Input/TextChat';
-
-import store from '~/store';
 import {
   useGetMessagesByConvoId,
   useGetConversationByIdMutation,
   useGetStartupConfig,
 } from 'librechat-data-provider';
 
+import Landing from '~/components/ui/Landing';
+import Messages from '~/components/Messages/Messages';
+import TextChat from '~/components/Input/TextChat';
+
+import { useAuthContext, useConversation } from '~/hooks';
+import store from '~/store';
+
 export default function Chat() {
   const { isAuthenticated } = useAuthContext();
   const [shouldNavigate, setShouldNavigate] = useState(true);
@@ -22,7 +22,7 @@ export default function Chat() {
   const setMessages = useSetRecoilState(store.messages);
   const messagesTree = useRecoilValue(store.messagesTree);
   const isSubmitting = useRecoilValue(store.isSubmitting);
-  const { newConversation } = store.useConversation();
+  const { newConversation } = useConversation();
   const { conversationId } = useParams();
   const navigate = useNavigate();
 

client/src/routes/Root.tsx

@@ -4,6 +4,7 @@ import { useRecoilValue, useSetRecoilState } from 'recoil';
 import { Outlet } from 'react-router-dom';
 import {
   useGetEndpointsQuery,
+  useGetModelsQuery,
   useGetPresetsQuery,
   useGetSearchEnabledQuery,
 } from 'librechat-data-provider';
@@ -13,6 +14,7 @@ import { useAuthContext, useServerStream } from '~/hooks';
 import store from '~/store';
 
 export default function Root() {
+  const { user, isAuthenticated } = useAuthContext();
   const [navVisible, setNavVisible] = useState(() => {
     const savedNavVisible = localStorage.getItem('navVisible');
     return savedNavVisible !== null ? JSON.parse(savedNavVisible) : false;
@@ -21,13 +23,14 @@ export default function Root() {
   const submission = useRecoilValue(store.submission);
   useServerStream(submission ?? null);
 
+  const setPresets = useSetRecoilState(store.presets);
   const setIsSearchEnabled = useSetRecoilState(store.isSearchEnabled);
   const setEndpointsConfig = useSetRecoilState(store.endpointsConfig);
-  const setPresets = useSetRecoilState(store.presets);
-  const { user, isAuthenticated } = useAuthContext();
+  const setModelsConfig = useSetRecoilState(store.modelsConfig);
 
   const searchEnabledQuery = useGetSearchEnabledQuery();
   const endpointsQuery = useGetEndpointsQuery();
+  const modelsQuery = useGetModelsQuery();
   const presetsQuery = useGetPresetsQuery({ enabled: !!user });
 
   useEffect(() => {
@@ -42,6 +45,14 @@ export default function Root() {
     }
   }, [endpointsQuery.data, endpointsQuery.isError]);
 
+  useEffect(() => {
+    if (modelsQuery.data) {
+      setModelsConfig(modelsQuery.data);
+    } else if (modelsQuery.isError) {
+      console.error('Failed to get models', modelsQuery.error);
+    }
+  }, [modelsQuery.data, modelsQuery.isError]);
+
   useEffect(() => {
     if (presetsQuery.data) {
       setPresets(presetsQuery.data);

client/src/routes/Search.tsx

@@ -5,12 +5,13 @@ import { useRecoilState, useRecoilValue } from 'recoil';
 import Messages from '~/components/Messages/Messages';
 import TextChat from '~/components/Input/TextChat';
 
+import { useConversation } from '~/hooks';
 import store from '~/store';
 
 export default function Search() {
   const [searchQuery, setSearchQuery] = useRecoilState(store.searchQuery);
   const conversation = useRecoilValue(store.conversation);
-  const { searchPlaceholderConversation } = store.useConversation();
+  const { searchPlaceholderConversation } = useConversation();
   const { query } = useParams();
   const navigate = useNavigate();
 

client/src/store/conversation.ts

@@ -1,22 +1,6 @@
-import { useCallback } from 'react';
-import {
-  atom,
-  selector,
-  atomFamily,
-  useSetRecoilState,
-  useResetRecoilState,
-  useRecoilCallback,
-} from 'recoil';
-import {
-  TConversation,
-  TMessagesAtom,
-  TMessage,
-  TSubmission,
-  TPreset,
-} from 'librechat-data-provider';
-import { buildTree, getDefaultConversation } from '~/utils';
-import submission from './submission';
-import endpoints from './endpoints';
+import { atom, selector, atomFamily } from 'recoil';
+import { TConversation, TMessagesAtom, TMessage } from 'librechat-data-provider';
+import { buildTree } from '~/utils';
 
 const conversation = atom<TConversation | null>({
   key: 'conversation',
@@ -48,94 +32,10 @@ const messagesSiblingIdxFamily = atomFamily({
   default: 0,
 });
 
-const useConversation = () => {
-  const setConversation = useSetRecoilState(conversation);
-  const setMessages = useSetRecoilState<TMessagesAtom>(messages);
-  const setSubmission = useSetRecoilState<TSubmission | null>(submission.submission);
-  const resetLatestMessage = useResetRecoilState(latestMessage);
-
-  const _switchToConversation = (
-    conversation: TConversation,
-    messages: TMessagesAtom = null,
-    preset: object | null = null,
-    { endpointsConfig = {} },
-  ) => {
-    const { endpoint = null } = conversation;
-
-    if (endpoint === null) {
-      // get the default model
-      conversation = getDefaultConversation({
-        conversation,
-        endpointsConfig,
-        preset,
-      });
-    }
-
-    setConversation(conversation);
-    setMessages(messages);
-    setSubmission({} as TSubmission);
-    resetLatestMessage();
-  };
-
-  const switchToConversation = useRecoilCallback(
-    ({ snapshot }) =>
-      async (
-        _conversation: TConversation,
-        messages: TMessagesAtom = null,
-        preset: object | null = null,
-      ) => {
-        const endpointsConfig = await snapshot.getPromise(endpoints.endpointsConfig);
-        _switchToConversation(_conversation, messages, preset, {
-          endpointsConfig,
-        });
-      },
-    [],
-  );
-
-  const newConversation = useCallback(
-    (template = {}, preset?: TPreset) => {
-      switchToConversation(
-        {
-          conversationId: 'new',
-          title: 'New Chat',
-          ...template,
-          endpoint: null,
-          createdAt: '',
-          updatedAt: '',
-        },
-        [],
-        preset,
-      );
-    },
-    [switchToConversation],
-  );
-
-  const searchPlaceholderConversation = () => {
-    switchToConversation(
-      {
-        conversationId: 'search',
-        title: 'Search',
-        endpoint: null,
-        createdAt: '',
-        updatedAt: '',
-      },
-      [],
-    );
-  };
-
-  return {
-    _switchToConversation,
-    newConversation,
-    switchToConversation,
-    searchPlaceholderConversation,
-  };
-};
-
 export default {
   messages,
   conversation,
   messagesTree,
   latestMessage,
   messagesSiblingIdxFamily,
-  useConversation,
 };

client/src/store/conversations.ts

@@ -1,19 +1,8 @@
-import { atom, useSetRecoilState } from 'recoil';
-import { useCallback } from 'react';
+import { atom } from 'recoil';
 
-const refreshConversationsHint = atom({
+const refreshConversationsHint = atom<number>({
   key: 'refreshConversationsHint',
   default: 1,
 });
 
-const useConversations = () => {
-  const setRefreshConversationsHint = useSetRecoilState(refreshConversationsHint);
-
-  const refreshConversations = useCallback(() => {
-    setRefreshConversationsHint((prevState) => prevState + 1);
-  }, [setRefreshConversationsHint]);
-
-  return { refreshConversations };
-};
-
-export default { refreshConversationsHint, useConversations };
+export default { refreshConversationsHint };

client/src/store/index.ts

@@ -1,6 +1,7 @@
 import conversation from './conversation';
 import conversations from './conversations';
 import endpoints from './endpoints';
+import models from './models';
 import user from './user';
 import text from './text';
 import submission from './submission';
@@ -13,6 +14,7 @@ export default {
   ...conversation,
   ...conversations,
   ...endpoints,
+  ...models,
   ...user,
   ...text,
   ...submission,

client/src/store/models.ts

@@ -0,0 +1,34 @@
+import { atom } from 'recoil';
+import { TModelsConfig } from 'librechat-data-provider';
+const openAIModels = [
+  'gpt-3.5-turbo',
+  'gpt-3.5-turbo-16k',
+  'gpt-3.5-turbo-0301',
+  'text-davinci-003',
+  'gpt-4',
+  'gpt-4-0314',
+  'gpt-4-0613',
+];
+
+const modelsConfig = atom<TModelsConfig>({
+  key: 'models',
+  default: {
+    openAI: openAIModels,
+    gptPlugins: openAIModels,
+    azureOpenAI: openAIModels,
+    bingAI: ['BingAI', 'Sydney'],
+    chatGPTBrowser: ['text-davinci-002-render-sha'],
+    google: ['chat-bison', 'text-bison', 'codechat-bison'],
+    anthropic: [
+      'claude-1',
+      'claude-1-100k',
+      'claude-instant-1',
+      'claude-instant-1-100k',
+      'claude-2',
+    ],
+  },
+});
+
+export default {
+  modelsConfig,
+};

client/src/utils/buildDefaultConvo.ts

@@ -0,0 +1,64 @@
+import { parseConvo } from 'librechat-data-provider';
+import getLocalStorageItems from './getLocalStorageItems';
+import type { TConversation, EModelEndpoint } from 'librechat-data-provider';
+
+const buildDefaultConvo = ({
+  conversation,
+  endpoint,
+  models,
+  lastConversationSetup,
+}: {
+  conversation: TConversation;
+  endpoint: EModelEndpoint;
+  models: string[];
+  lastConversationSetup: TConversation;
+}) => {
+  const { lastSelectedModel, lastSelectedTools, lastBingSettings } = getLocalStorageItems();
+  const { jailbreak, toneStyle } = lastBingSettings;
+
+  if (!endpoint) {
+    return {
+      ...conversation,
+      endpoint,
+    };
+  }
+
+  const availableModels = models;
+  const model = lastConversationSetup?.model ?? lastSelectedModel?.[endpoint];
+  const secondaryModel =
+    endpoint === 'gptPlugins'
+      ? lastConversationSetup?.agentOptions?.model ?? lastSelectedModel?.secondaryModel
+      : null;
+
+  let possibleModels: string[], secondaryModels: string[];
+
+  if (availableModels.includes(model)) {
+    possibleModels = [model, ...availableModels];
+  } else {
+    possibleModels = [...availableModels];
+  }
+
+  if (secondaryModel && availableModels.includes(secondaryModel)) {
+    secondaryModels = [secondaryModel, ...availableModels];
+  } else {
+    secondaryModels = [...availableModels];
+  }
+
+  const convo = parseConvo(endpoint, lastConversationSetup, {
+    models: possibleModels,
+    secondaryModels,
+  });
+  const defaultConvo = {
+    ...conversation,
+    ...convo,
+    endpoint,
+  };
+
+  defaultConvo.tools = lastSelectedTools ?? defaultConvo.tools;
+  defaultConvo.jailbreak = jailbreak ?? defaultConvo.jailbreak;
+  defaultConvo.toneStyle = toneStyle ?? defaultConvo.toneStyle;
+
+  return defaultConvo;
+};
+
+export default buildDefaultConvo;

client/src/utils/cleanupPreset.ts

@@ -1,9 +1,8 @@
 import { parseConvo } from 'librechat-data-provider';
-import type { TEndpointsConfig, TPreset } from 'librechat-data-provider';
+import type { TPreset } from 'librechat-data-provider';
 
 type TCleanupPreset = {
   preset: Partial<TPreset>;
-  endpointsConfig: TEndpointsConfig;
 };
 
 const cleanupPreset = ({ preset: _preset }: TCleanupPreset): TPreset => {
@@ -20,9 +19,9 @@ const cleanupPreset = ({ preset: _preset }: TCleanupPreset): TPreset => {
   const parsedPreset = parseConvo(endpoint, _preset);
 
   return {
-    endpoint,
     presetId: _preset?.presetId ?? null,
     ...parsedPreset,
+    endpoint,
     title: _preset?.title ?? 'New Preset',
   } as TPreset;
 };

client/src/utils/getDefaultConversation.ts

@@ -1,96 +0,0 @@
-import { parseConvo } from 'librechat-data-provider';
-import getLocalStorageItems from './getLocalStorageItems';
-import type {
-  TConversation,
-  TEndpointsConfig,
-  EModelEndpoint,
-  TConfig,
-} from 'librechat-data-provider';
-
-const defaultEndpoints = [
-  'openAI',
-  'azureOpenAI',
-  'bingAI',
-  'chatGPTBrowser',
-  'gptPlugins',
-  'google',
-  'anthropic',
-];
-
-const buildDefaultConversation = ({
-  conversation,
-  endpoint,
-  endpointsConfig,
-  lastConversationSetup,
-}: {
-  conversation: TConversation;
-  endpoint: EModelEndpoint;
-  endpointsConfig: TEndpointsConfig;
-  lastConversationSetup: TConversation;
-}) => {
-  const { lastSelectedModel, lastSelectedTools, lastBingSettings } = getLocalStorageItems();
-  const { jailbreak, toneStyle } = lastBingSettings;
-
-  if (!endpoint) {
-    return {
-      ...conversation,
-      endpoint,
-    };
-  }
-
-  const { availableModels = [] } = endpointsConfig[endpoint] as TConfig;
-  const possibleModels = [lastSelectedModel[endpoint], ...availableModels];
-  const convo = parseConvo(endpoint, lastConversationSetup, { model: possibleModels });
-  const defaultConvo = {
-    ...conversation,
-    ...convo,
-    endpoint,
-  };
-
-  defaultConvo.tools = lastSelectedTools ?? defaultConvo.tools;
-  defaultConvo.jailbreak = jailbreak ?? defaultConvo.jailbreak;
-  defaultConvo.toneStyle = toneStyle ?? defaultConvo.toneStyle;
-
-  return defaultConvo;
-};
-
-const getDefaultConversation = ({ conversation, endpointsConfig, preset }) => {
-  const getEndpointFromPreset = () => {
-    const { endpoint: targetEndpoint } = preset || {};
-    if (targetEndpoint && endpointsConfig?.[targetEndpoint]) {
-      return targetEndpoint;
-    } else if (targetEndpoint) {
-      console.warn(`Illegal target endpoint ${targetEndpoint} ${endpointsConfig}`);
-    }
-    return null;
-  };
-
-  const getEndpointFromLocalStorage = () => {
-    try {
-      const { lastConversationSetup } = getLocalStorageItems();
-
-      return (
-        lastConversationSetup.endpoint &&
-        (endpointsConfig[lastConversationSetup.endpoint] ? lastConversationSetup.endpoint : null)
-      );
-    } catch (error) {
-      console.error(error);
-      return null;
-    }
-  };
-
-  const getDefaultEndpoint = () => {
-    return defaultEndpoints.find((e) => endpointsConfig?.[e]) || null;
-  };
-
-  const endpoint = getEndpointFromPreset() || getEndpointFromLocalStorage() || getDefaultEndpoint();
-
-  return buildDefaultConversation({
-    conversation,
-    endpoint,
-    lastConversationSetup: preset,
-    endpointsConfig,
-  });
-};
-
-export default getDefaultConversation;

client/src/utils/getDefaultEndpoint.ts

@@ -0,0 +1,54 @@
+import type { TConversation, TPreset, TEndpointsConfig } from 'librechat-data-provider';
+import getLocalStorageItems from './getLocalStorageItems';
+
+type TConvoSetup = Partial<TPreset> | Partial<TConversation>;
+
+type TDefaultEndpoint = { convoSetup: TConvoSetup; endpointsConfig: TEndpointsConfig };
+
+const defaultEndpoints = [
+  'openAI',
+  'azureOpenAI',
+  'bingAI',
+  'chatGPTBrowser',
+  'gptPlugins',
+  'google',
+  'anthropic',
+];
+
+const getEndpointFromSetup = (convoSetup: TConvoSetup, endpointsConfig: TEndpointsConfig) => {
+  const { endpoint: targetEndpoint } = convoSetup || {};
+  if (targetEndpoint && endpointsConfig?.[targetEndpoint]) {
+    return targetEndpoint;
+  } else if (targetEndpoint) {
+    console.warn(`Illegal target endpoint ${targetEndpoint} ${endpointsConfig}`);
+  }
+  return null;
+};
+
+const getEndpointFromLocalStorage = (endpointsConfig: TEndpointsConfig) => {
+  try {
+    const { lastConversationSetup } = getLocalStorageItems();
+
+    return (
+      lastConversationSetup.endpoint &&
+      (endpointsConfig[lastConversationSetup.endpoint] ? lastConversationSetup.endpoint : null)
+    );
+  } catch (error) {
+    console.error(error);
+    return null;
+  }
+};
+
+const getDefinedEndpoint = (endpointsConfig: TEndpointsConfig) => {
+  return defaultEndpoints.find((e) => Object.hasOwn(endpointsConfig ?? {}, e)) ?? 'openAI';
+};
+
+const getDefaultEndpoint = ({ convoSetup, endpointsConfig }: TDefaultEndpoint) => {
+  return (
+    getEndpointFromSetup(convoSetup, endpointsConfig) ||
+    getEndpointFromLocalStorage(endpointsConfig) ||
+    getDefinedEndpoint(endpointsConfig)
+  );
+};
+
+export default getDefaultEndpoint;

client/src/utils/index.ts

@@ -7,8 +7,9 @@ export { default as getLoginError } from './getLoginError';
 export { default as cleanupPreset } from './cleanupPreset';
 export { default as validateIframe } from './validateIframe';
 export { default as getMessageError } from './getMessageError';
+export { default as buildDefaultConvo } from './buildDefaultConvo';
+export { default as getDefaultEndpoint } from './getDefaultEndpoint';
 export { default as getLocalStorageItems } from './getLocalStorageItems';
-export { default as getDefaultConversation } from './getDefaultConversation';
 
 export function cn(...inputs: string[]) {
   return twMerge(clsx(inputs));