✍️ 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,6 +1,6 @@
import { useParams } from 'react-router-dom';
import { useRecoilValue, useSetRecoilState } from 'recoil';
import { useCallback, useEffect, useState, useMemo } from 'react';
import { useCallback, useEffect, useState, useMemo, memo } from 'react';
import type { ConversationListResponse } from 'librechat-data-provider';
import {
useMediaQuery,
@ -21,7 +21,7 @@ import NewChat from './NewChat';
import { cn } from '~/utils';
import store from '~/store';
export default function Nav({ navVisible, setNavVisible }) {
const Nav = ({ navVisible, setNavVisible }) => {
const { conversationId } = useParams();
const { isAuthenticated } = useAuthContext();
@ -97,7 +97,10 @@ export default function Nav({ navVisible, setNavVisible }) {
};
const toggleNavVisible = () => {
setNavVisible((prev: boolean) => !prev);
setNavVisible((prev: boolean) => {
localStorage.setItem('navVisible', JSON.stringify(!prev));
return !prev;
});
if (newUser) {
setNewUser(false);
}
@ -179,4 +182,6 @@ export default function Nav({ navVisible, setNavVisible }) {
</Tooltip>
</TooltipProvider>
);
}
};
export default memo(Nav);