Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2025-12-19 09:50:15 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

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

Browse source 
* 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
Download patch file Download diff file Expand all files Collapse all files

13
client/src/components/Chat/Messages/Content/EditMessage.tsx
View file

@ -1,6 +1,6 @@
import { useState, useRef, useEffect } from 'react';
import TextareaAutosize from 'react-textarea-autosize';
import { EModelEndpoint } from 'librechat-data-provider';
import { useState, useRef, useEffect, useCallback } from 'react';
import { useUpdateMessageMutation } from 'librechat-data-provider/react-query';
import type { TEditProps } from '~/common';
import Container from '~/components/Messages/Content/Container';
@ -94,6 +94,16 @@ const EditMessage = ({
enterEdit(true);
};
const handleKeyDown = useCallback(
(e: React.KeyboardEvent<HTMLTextAreaElement>) => {
if (e.key === 'Escape') {
e.preventDefault();
enterEdit(true);
}
},
[enterEdit],
);
return (
<Container>
<TextareaAutosize
@ -101,6 +111,7 @@ const EditMessage = ({
onChange={(e) => {
setEditedText(e.target.value);
}}
onKeyDown={handleKeyDown}
data-testid="message-text-editor"
className={cn(
'markdown prose dark:prose-invert light whitespace-pre-wrap break-words dark:text-gray-20',