✍️ 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

client/src/components/Endpoints/Icon.tsx

@@ -141,7 +141,7 @@ const Icon: React.FC<IconProps> = (props) => {
           <UnknownIcon
             iconURL={props.iconURL}
             endpoint={endpoint ?? ''}
-            className="icon-sm"
+            className="icon-md"
             context="message"
           />
         ),

client/src/components/Endpoints/Settings/Assistants.tsx

@@ -33,16 +33,16 @@ export default function Settings({ conversation, setOption, models, readonly }:
 
   const { model, endpoint, assistant_id, endpointType, promptPrefix, instructions } =
     conversation ?? {};
-  const [onPromptPrefixChange, promptPrefixValue] = useDebouncedInput(
+  const [onPromptPrefixChange, promptPrefixValue] = useDebouncedInput({
     setOption,
-    'promptPrefix',
-    promptPrefix,
-  );
-  const [onInstructionsChange, instructionsValue] = useDebouncedInput(
+    optionKey: 'promptPrefix',
+    initialValue: promptPrefix,
+  });
+  const [onInstructionsChange, instructionsValue] = useDebouncedInput({
     setOption,
-    'instructions',
-    instructions,
-  );
+    optionKey: 'instructions',
+    initialValue: instructions,
+  });
 
   const activeAssistant = useMemo(() => {
     if (assistant_id) {