🐛 fix: Ensure Default ModelSpecs Are Set Correctly (#5218)

* 🐛 fix: default modelSpecs not being set

* feat: Add imageDetail parameter for OpenAI endpoints in tQueryParamsSchema

* feat: Implement processModelSpecs function to enhance model specs processing from configuration

* feat: Refactor configuration schemas and types for improved structure and clarity

* feat: Add append_current_datetime parameter to tQueryParamsSchema for enhanced endpoint functionality

* fix: Add endpointType to getSaveOptions and enhance endpoint handling in Settings component

* fix: Change endpointType to be nullable and optional in tConversationSchema for improved flexibility

* fix: allow save & submit for google endpoint

client/src/components/Chat/Messages/Content/EditMessage.tsx

@@ -1,6 +1,5 @@
-import { useRecoilState, useRecoilValue } from 'recoil';
-import { EModelEndpoint } from 'librechat-data-provider';
 import { useRef, useEffect, useCallback } from 'react';
+import { useRecoilState, useRecoilValue } from 'recoil';
 import { useForm } from 'react-hook-form';
 import { useUpdateMessageMutation } from 'librechat-data-provider/react-query';
 import type { TEditProps } from '~/common';
@@ -31,8 +30,6 @@ const EditMessage = ({
   const textAreaRef = useRef<HTMLTextAreaElement | null>(null);
 
   const { conversationId, parentMessageId, messageId } = message;
-  const { endpoint: _endpoint, endpointType } = conversation ?? { endpoint: null };
-  const endpoint = endpointType ?? _endpoint;
   const updateMessageMutation = useUpdateMessageMutation(conversationId ?? '');
   const localize = useLocalize();
 
@@ -181,9 +178,7 @@ const EditMessage = ({
             <button
               ref={submitButtonRef}
               className="btn btn-primary relative mr-2"
-              disabled={
-                isSubmitting || (endpoint === EModelEndpoint.google && !message.isCreatedByUser)
-              }
+              disabled={isSubmitting}
               onClick={handleSubmit(resubmitMessage)}
             >
               {localize('com_ui_save_submit')}

client/src/components/Endpoints/EndpointSettings.tsx

@@ -1,9 +1,9 @@
 import { useRecoilValue } from 'recoil';
-import { SettingsViews } from 'librechat-data-provider';
-import { useGetModelsQuery } from 'librechat-data-provider/react-query';
+import { SettingsViews, TConversation } from 'librechat-data-provider';
+import { useGetModelsQuery, useGetEndpointsQuery } from 'librechat-data-provider/react-query';
 import type { TSettingsProps } from '~/common';
 import { getSettings } from './Settings';
-import { cn } from '~/utils';
+import { cn, getEndpointField } from '~/utils';
 import store from '~/store';
 
 export default function Settings({
@@ -13,15 +13,17 @@ export default function Settings({
   className = '',
 }: TSettingsProps) {
   const modelsQuery = useGetModelsQuery();
+  const { data: endpointsConfig } = useGetEndpointsQuery();
   const currentSettingsView = useRecoilValue(store.currentSettingsView);
-  if (!conversation?.endpoint || currentSettingsView !== SettingsViews.default) {
+  const endpointType = getEndpointField(endpointsConfig, conversation?.endpoint ?? '', 'type');
+  const endpoint = endpointType ?? conversation?.endpoint ?? '';
+  if (!endpoint || currentSettingsView !== SettingsViews.default) {
     return null;
   }
 
   const { settings, multiViewSettings } = getSettings();
-  const { endpoint: _endpoint, endpointType } = conversation;
-  const models = modelsQuery?.data?.[_endpoint] ?? [];
-  const endpoint = endpointType ?? _endpoint;
+  const { endpoint: _endpoint } = conversation as TConversation;
+  const models = modelsQuery.data?.[_endpoint ?? ''] ?? [];
   const OptionComponent = settings[endpoint];
 
   if (OptionComponent) {
@@ -39,7 +41,7 @@ export default function Settings({
 
   const MultiViewComponent = multiViewSettings[endpoint];
 
-  if (!MultiViewComponent) {
+  if (MultiViewComponent == null) {
     return null;
   }
 

client/src/components/Endpoints/Settings/settings.ts

@@ -8,7 +8,7 @@ import BedrockSettings from './Bedrock';
 import BingAISettings from './BingAI';
 import OpenAISettings from './OpenAI';
 
-const settings: { [key: string]: FC<TModelSelectProps> } = {
+const settings: { [key: string]: FC<TModelSelectProps> | undefined } = {
   [EModelEndpoint.assistants]: AssistantsSettings,
   [EModelEndpoint.azureAssistants]: AssistantsSettings,
   [EModelEndpoint.agents]: OpenAISettings,

client/src/hooks/Config/useAppStartup.ts

@@ -4,7 +4,6 @@ import { useRecoilState, useSetRecoilState } from 'recoil';
 import { LocalStorageKeys } from 'librechat-data-provider';
 import { useAvailablePluginsQuery } from 'librechat-data-provider/react-query';
 import type { TStartupConfig, TPlugin, TUser } from 'librechat-data-provider';
-import { data as modelSpecs } from '~/components/Chat/Menus/Models/fakeData';
 import { mapPlugins, selectPlugins, processPlugins } from '~/utils';
 import useConfigOverride from './useConfigOverride';
 import store from '~/store';
@@ -36,18 +35,22 @@ export default function useAppStartup({
 
   /** Set the app title */
   useEffect(() => {
-    if (startupConfig?.appTitle) {
-      document.title = startupConfig.appTitle;
-      localStorage.setItem(LocalStorageKeys.APP_TITLE, startupConfig.appTitle);
+    const appTitle = startupConfig?.appTitle ?? '';
+    if (!appTitle) {
+      return;
     }
+    document.title = appTitle;
+    localStorage.setItem(LocalStorageKeys.APP_TITLE, appTitle);
   }, [startupConfig]);
 
   /** Set the default spec's preset as default */
   useEffect(() => {
-    if (defaultPreset && defaultPreset.spec) {
+    if (defaultPreset && defaultPreset.spec != null) {
       return;
     }
 
+    const modelSpecs = startupConfig?.modelSpecs?.list;
+
     if (!modelSpecs || !modelSpecs.length) {
       return;
     }
@@ -63,7 +66,7 @@ export default function useAppStartup({
       iconURL: defaultSpec.iconURL,
       spec: defaultSpec.name,
     });
-  }, [defaultPreset, setDefaultPreset]);
+  }, [defaultPreset, setDefaultPreset, startupConfig?.modelSpecs?.list]);
 
   /** Set the available Plugins */
   useEffect(() => {
@@ -75,17 +78,20 @@ export default function useAppStartup({
       return;
     }
 
-    if (!user.plugins || user.plugins.length === 0) {
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    const userPlugins = user.plugins ?? [];
+
+    if (userPlugins.length === 0) {
       setAvailableTools({ pluginStore });
       return;
     }
 
-    const tools = [...user.plugins]
+    const tools = [...userPlugins]
       .map((el) => allPlugins.map[el])
-      .filter((el): el is TPlugin => el !== undefined);
+      .filter((el: TPlugin | undefined): el is TPlugin => el !== undefined);
 
     /* Filter Last Selected Tools */
-    const localStorageItem = localStorage.getItem(LocalStorageKeys.LAST_TOOLS);
+    const localStorageItem = localStorage.getItem(LocalStorageKeys.LAST_TOOLS) ?? '';
     if (!localStorageItem) {
       return setAvailableTools({ pluginStore, ...mapPlugins(tools) });
     }
@@ -94,7 +100,7 @@ export default function useAppStartup({
       .filter((tool: TPlugin) =>
         tools.some((existingTool) => existingTool.pluginKey === tool.pluginKey),
       )
-      .filter((tool: TPlugin) => !!tool);
+      .filter((tool: TPlugin | undefined) => !!tool);
     localStorage.setItem(LocalStorageKeys.LAST_TOOLS, JSON.stringify(filteredTools));
 
     setAvailableTools({ pluginStore, ...mapPlugins(tools) });