From 334b6032479070c3eaad46aa1e718628b92a963a Mon Sep 17 00:00:00 2001
From: Danny Avila <messagedaniel@protonmail.com>
Date: Sat, 6 Apr 2024 16:09:16 -0400
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=A7=20refactor:=20Attempt=20Default=20?=
 =?UTF-8?q?Preset=20Fix=20&=20Other=20Changes=20(#2342)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 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
---
 .../Chat/Menus/Presets/PresetItems.tsx        |  9 +++++++--
 client/src/hooks/Conversations/usePresets.ts  | 19 +++++++++++++------
 client/src/hooks/Input/useTextarea.ts         |  2 ++
 client/src/routes/ChatRoute.tsx               |  8 +-------
 4 files changed, 23 insertions(+), 15 deletions(-)

diff --git a/client/src/components/Chat/Menus/Presets/PresetItems.tsx b/client/src/components/Chat/Menus/Presets/PresetItems.tsx
index 957a7b06bb..df4742aeab 100644
--- a/client/src/components/Chat/Menus/Presets/PresetItems.tsx
+++ b/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();
diff --git a/client/src/hooks/Conversations/usePresets.ts b/client/src/hooks/Conversations/usePresets.ts
index 136f25009a..f3723eb137 100644
--- a/client/src/hooks/Conversations/usePresets.ts
+++ b/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[]) => {
diff --git a/client/src/hooks/Input/useTextarea.ts b/client/src/hooks/Input/useTextarea.ts
index 599b5f520a..c8ff1b1e0e 100644
--- a/client/src/hooks/Input/useTextarea.ts
+++ b/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);
     }
 
diff --git a/client/src/routes/ChatRoute.tsx b/client/src/routes/ChatRoute.tsx
index 26fffdeca9..32139b6c4b 100644
--- a/client/src/routes/ChatRoute.tsx
+++ b/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,
-    modelsQuery.data,
-    endpointsQuery.data,
-    assistants,
-    conversation?.model,
-  ]);
+  }, [initialConvoQuery.data, endpointsQuery.data, modelsQuery.data, assistants]);
 
   if (endpointsQuery.isLoading || modelsQuery.isLoading) {
     return <Spinner className="m-auto text-black dark:text-white" />;