🐞 fix: Handle Empty Model Error in Assistants Form (#2265)

client/src/common/types.ts

@@ -18,6 +18,8 @@ import type { LucideIcon } from 'lucide-react';
 
 export type GenericSetter<T> = (value: T | ((currentValue: T) => T)) => void;
 
+export type LastSelectedModels = Record<EModelEndpoint, string>;
+
 export type NavLink = {
   title: string;
   label?: string;

client/src/components/SidePanel/Builder/AssistantPanel.tsx

@@ -317,19 +317,28 @@ export default function AssistantPanel({
             <Controller
               name="model"
               control={control}
-              render={({ field }) => (
+              rules={{ required: true, minLength: 1 }}
-                <SelectDropDown
+              render={({ field, fieldState: { error } }) => (
-                  emptyTitle={true}
+                <>
-                  value={field.value}
+                  <SelectDropDown
-                  setValue={field.onChange}
+                    emptyTitle={true}
-                  availableValues={modelsQuery.data?.[EModelEndpoint.assistants] ?? []}
+                    value={field.value}
-                  showAbove={false}
+                    setValue={field.onChange}
-                  showLabel={false}
+                    availableValues={modelsQuery.data?.[EModelEndpoint.assistants] ?? []}
-                  className={cn(
+                    showAbove={false}
-                    cardStyle,
+                    showLabel={false}
-                    'flex h-[40px] w-full flex-none items-center justify-center px-4 hover:cursor-pointer',
+                    className={cn(
+                      cardStyle,
+                      'flex h-[40px] w-full flex-none items-center justify-center px-4 hover:cursor-pointer',
+                    )}
+                    containerClassName={cn('rounded-md', error ? 'border-red-500 border-2' : '')}
+                  />
+                  {error && (
+                    <span className="text-sm text-red-500 transition duration-300 ease-in-out">
+                      {localize('com_ui_field_required')}
+                    </span>
                   )}
-                />
+                </>
               )}
             />
           </div>

client/src/components/SidePanel/Builder/AssistantSelect.tsx

@@ -4,17 +4,24 @@ import {
   defaultAssistantFormValues,
   defaultOrderQuery,
   isImageVisionTool,
+  EModelEndpoint,
   Capabilities,
   FileSources,
 } from 'librechat-data-provider';
 import type { UseFormReset } from 'react-hook-form';
 import type { UseMutationResult } from '@tanstack/react-query';
 import type { Assistant, AssistantCreateParams } from 'librechat-data-provider';
-import type { AssistantForm, Actions, TAssistantOption, ExtendedFile } from '~/common';
+import type {
+  AssistantForm,
+  Actions,
+  TAssistantOption,
+  ExtendedFile,
+  LastSelectedModels,
+} from '~/common';
 import SelectDropDown from '~/components/ui/SelectDropDown';
 import { useListAssistantsQuery } from '~/data-provider';
+import { useLocalize, useLocalStorage } from '~/hooks';
 import { useFileMapContext } from '~/Providers';
-import { useLocalize } from '~/hooks';
 import { cn } from '~/utils';
 
 const keys = new Set(['name', 'id', 'description', 'instructions', 'model']);
@@ -35,6 +42,10 @@ export default function AssistantSelect({
   const localize = useLocalize();
   const fileMap = useFileMapContext();
   const lastSelectedAssistant = useRef<string | null>(null);
+  const [lastSelectedModels] = useLocalStorage<LastSelectedModels>(
+    'lastSelectedModel',
+    {} as LastSelectedModels,
+  );
 
   const assistants = useListAssistantsQuery(defaultOrderQuery, {
     select: (res) =>
@@ -79,7 +90,10 @@ export default function AssistantSelect({
       createMutation.reset();
       if (!assistant) {
         setCurrentAssistantId(undefined);
-        return reset(defaultAssistantFormValues);
+        return reset({
+          ...defaultAssistantFormValues,
+          model: lastSelectedModels?.[EModelEndpoint.assistants] ?? '',
+        });
       }
 
       const update = {
@@ -127,7 +141,7 @@ export default function AssistantSelect({
       reset(formValues);
       setCurrentAssistantId(assistant?.id);
     },
-    [assistants.data, reset, setCurrentAssistantId, createMutation],
+    [assistants.data, reset, setCurrentAssistantId, createMutation, lastSelectedModels],
   );
 
   useEffect(() => {

client/src/localization/languages/Eng.tsx

@@ -46,6 +46,7 @@ export default {
   com_assistants_update_error: 'There was an error updating your assistant.',
   com_assistants_create_success: 'Successfully created',
   com_assistants_create_error: 'There was an error creating your assistant.',
+  com_ui_field_required: 'This field is required',
   com_ui_download_error: 'Error downloading file. The file may have been deleted.',
   com_ui_attach_error_type: 'Unsupported file type for endpoint:',
   com_ui_attach_error_size: 'File size limit exceeded for endpoint:',