✍️ refactor(Textarea): Optimize Text Input & Enhance UX (#2058)

* refactor(useDebouncedInput): make object as input arg and accept setter

* refactor(ChatForm/Textarea): consolidate textarea/form logic to one component, use react-hook-form, programmatically click send button instead of passing submitMessage, forwardRef and memoize SendButton

* refactor(Textarea): use Controller field value to avoid manual update of ref

* chore: remove forms provider

* chore: memoize AttachFile

* refactor(ChatForm/SendButton): only re-render SendButton when there is text input

* chore: make iconURL bigger

* chore: optimize Root/Nav

* refactor(SendButton): memoize disabled prop based on text

* chore: memoize Nav and ChatForm

* chore: remove textarea ref text on submission

* feat(EditMessage): Make Esc exit the edit mode and dismiss changes when editing a message

* style(MenuItem): Display the ☑️  icon only on the selected model
This commit is contained in:
Danny Avila 2024-03-11 09:18:10 -04:00 committed by GitHub
parent f489aee518
commit f307488dd4
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
16 changed files with 244 additions and 225 deletions

View file

@ -1,16 +1,11 @@
import { EModelEndpoint } from 'librechat-data-provider';
import { useGetEndpointsQuery } from 'librechat-data-provider/react-query';
import {
useLocalize,
useConversation,
useNewConvo,
useOriginNavigate,
useLocalStorage,
} from '~/hooks';
import { useLocalize, useNewConvo, useLocalStorage } from '~/hooks';
import { icons } from '~/components/Chat/Menus/Endpoints/Icons';
import { NewChatIcon } from '~/components/svg';
import { getEndpointField } from '~/utils';
import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from '~/components/ui/';
import { useNavigate } from 'react-router-dom';
export default function NewChat({
toggleNav,
@ -20,8 +15,7 @@ export default function NewChat({
subHeaders?: React.ReactNode;
}) {
const { newConversation: newConvo } = useNewConvo();
const { newConversation } = useConversation();
const navigate = useOriginNavigate();
const navigate = useNavigate();
const localize = useLocalize();
const { data: endpointsConfig } = useGetEndpointsQuery();
@ -36,8 +30,7 @@ export default function NewChat({
if (event.button === 0 && !event.ctrlKey) {
event.preventDefault();
newConvo();
newConversation();
navigate('new');
navigate('/c/new');
toggleNav();
}
};