🚧 refactor: Attempt Default Preset Fix & Other Changes (#2342)

* fix(useTextarea): trigger SendButton re-render on undo and clearing text

* refactor(PresetItems): show pin icon for default preset

* fix(ChatRoute): do not use conversation.model for useEffect, do not set default Preset if real model list is not yet fetched

client/src/components/Chat/Menus/Presets/PresetItems.tsx

@@ -1,4 +1,3 @@
-import { Trash2 } from 'lucide-react';
 import { useRecoilValue } from 'recoil';
 import { Close } from '@radix-ui/react-popover';
 import { Flipper, Flipped } from 'react-flip-toolkit';
@@ -13,6 +12,7 @@ import { Dialog, DialogTrigger, Label } from '~/components/ui/';
 import { MenuSeparator, MenuItem } from '../UI';
 import { icons } from '../Endpoints/Icons';
 import { useLocalize } from '~/hooks';
+import { cn } from '~/utils';
 import store from '~/store';
 
 const PresetItems: FC<{
@@ -143,7 +143,12 @@ const PresetItems: FC<{
                     >
                       <div className="flex h-full items-center justify-end gap-1">
                         <button
-                          className="m-0 h-full rounded-md p-2 text-gray-400 hover:text-gray-700 dark:bg-gray-600 dark:text-gray-400 dark:hover:text-gray-200 sm:invisible sm:group-hover:visible"
+                          className={cn(
+                            'm-0 h-full rounded-md bg-transparent p-2 text-gray-400 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200',
+                            defaultPreset?.presetId === preset.presetId
+                              ? ''
+                              : 'sm:invisible sm:group-hover:visible',
+                          )}
                           onClick={(e) => {
                             e.preventDefault();
                             e.stopPropagation();

client/src/hooks/Conversations/usePresets.ts

@@ -2,9 +2,9 @@ import filenamify from 'filenamify';
 import exportFromJSON from 'export-from-json';
 import { useCallback, useEffect, useRef } from 'react';
 import { useQueryClient } from '@tanstack/react-query';
-import { QueryKeys, modularEndpoints, EModelEndpoint } from 'librechat-data-provider';
 import { useRecoilState, useSetRecoilState, useRecoilValue } from 'recoil';
-import { useCreatePresetMutation } from 'librechat-data-provider/react-query';
+import { QueryKeys, modularEndpoints, EModelEndpoint } from 'librechat-data-provider';
+import { useCreatePresetMutation, useGetModelsQuery } from 'librechat-data-provider/react-query';
 import type { TPreset, TEndpointsConfig } from 'librechat-data-provider';
 import {
   useUpdatePresetMutation,
@@ -17,6 +17,7 @@ import useDefaultConvo from '~/hooks/useDefaultConvo';
 import { useAuthContext } from '~/hooks/AuthContext';
 import { NotificationSeverity } from '~/common';
 import useLocalize from '~/hooks/useLocalize';
+import useNewConvo from '~/hooks/useNewConvo';
 import store from '~/store';
 
 export default function usePresets() {
@@ -27,12 +28,18 @@ export default function usePresets() {
   const { user, isAuthenticated } = useAuthContext();
 
   const modularChat = useRecoilValue(store.modularChat);
-  const [_defaultPreset, setDefaultPreset] = useRecoilState(store.defaultPreset);
   const setPresetModalVisible = useSetRecoilState(store.presetModalVisible);
-  const { preset, conversation, newConversation, setPreset } = useChatContext();
+  const [_defaultPreset, setDefaultPreset] = useRecoilState(store.defaultPreset);
   const presetsQuery = useGetPresetsQuery({ enabled: !!user && isAuthenticated });
+  const { preset, conversation, index, setPreset } = useChatContext();
+  const { data: modelsData } = useGetModelsQuery();
+  const { newConversation } = useNewConvo(index);
 
   useEffect(() => {
+    if (modelsData?.initial) {
+      return;
+    }
+
     const { data: presets } = presetsQuery;
     if (_defaultPreset || !presets || hasLoaded.current) {
       return;
@@ -50,12 +57,12 @@ export default function usePresets() {
     }
     setDefaultPreset(defaultPreset);
     if (!conversation?.conversationId || conversation.conversationId === 'new') {
-      newConversation({ preset: defaultPreset });
+      newConversation({ preset: defaultPreset, modelsData });
     }
     hasLoaded.current = true;
     // dependencies are stable and only needed once
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [presetsQuery.data, user]);
+  }, [presetsQuery.data, user, modelsData]);
 
   const setPresets = useCallback(
     (presets: TPreset[]) => {

client/src/hooks/Input/useTextarea.ts

@@ -160,9 +160,11 @@ export default function useTextarea({
     const isUndo = e.key === 'z' && (e.ctrlKey || e.metaKey);
     if (isUndo && target.value.trim() === '') {
       textAreaRef.current?.setRangeText('', 0, textAreaRef.current?.value?.length, 'end');
+      setValue('text', '', { shouldValidate: true });
       forceResize(textAreaRef);
     } else if (isUndo) {
       trimUndoneRange(textAreaRef);
+      setValue('text', '', { shouldValidate: true });
       forceResize(textAreaRef);
     }
 

client/src/routes/ChatRoute.tsx

@@ -90,13 +90,7 @@ export default function ChatRoute() {
     }
     /* Creates infinite render if all dependencies included */
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [
+  }, [initialConvoQuery.data, endpointsQuery.data, modelsQuery.data, assistants]);
-    initialConvoQuery.data,
-    modelsQuery.data,
-    endpointsQuery.data,
-    assistants,
-    conversation?.model,
-  ]);
 
   if (endpointsQuery.isLoading || modelsQuery.isLoading) {
     return <Spinner className="m-auto text-black dark:text-white" />;