✍️ 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/hooks/Conversations/useDebouncedInput.ts

@@ -1,34 +1,48 @@
 import debounce from 'lodash/debounce';
-import { useState, useCallback } from 'react';
+import React, { useState, useCallback } from 'react';
+import type { SetterOrUpdater } from 'recoil';
 import type { TSetOption } from '~/common';
 
 /** A custom hook that accepts a setOption function and an option key (e.g., 'title').
 It manages a local state for the option value, a debounced setter function for that value,
 and returns the local state value, its setter, and an onChange handler suitable for inputs. */
-function useDebouncedInput(
-  setOption: TSetOption,
-  optionKey: string | number,
-  initialValue: unknown,
+function useDebouncedInput({
+  setOption,
+  setter,
+  optionKey,
+  initialValue,
   delay = 450,
-): [
+}: {
+  setOption?: TSetOption;
+  setter?: SetterOrUpdater<string>;
+  optionKey?: string | number;
+  initialValue: unknown;
+  delay?: number;
+}): [
   React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>,
   unknown,
-  React.Dispatch<React.SetStateAction<unknown>>,
+  SetterOrUpdater<string>,
+  // (newValue: string) => void,
 ] {
   const [value, setValue] = useState(initialValue);
 
   /** A debounced function to call the passed setOption with the optionKey and new value.
    *
   Note: We use useCallback to ensure our debounced function is stable across renders. */
-  const setDebouncedOption = useCallback(debounce(setOption(optionKey), delay), []);
+  const setDebouncedOption = useCallback(
+    debounce(setOption && optionKey ? setOption(optionKey) : setter, delay),
+    [],
+  );
 
   /** An onChange handler that updates the local state and the debounced option */
-  const onChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
-    const newValue = e.target.value;
-    setValue(newValue);
-    setDebouncedOption(newValue);
-  };
-
+  const onChange: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement> = useCallback(
+    (e) => {
+      const newValue: unknown = e.target.value;
+      setValue(newValue);
+      setDebouncedOption(newValue);
+    },
+    [setDebouncedOption],
+  );
   return [onChange, value, setValue];
 }