Function MessageForm

apps/web/ui/MessageForm/index.tsx:149–471

({
  id,
  autoFocus,
  currentUser,
  draft,
  progress,
  uploading,
  uploads,
  rows,
  sendOnEnter,
  preview,
  message: initialMessage,
  onSend,
  onMessageChange,
  onCloseThread,
  onReopenThread,
  onFocus,
  onBlur,
  fetchMentions,
  upload,
  useUsersContext,
  mentions = [],
  onKeyDown,
  onKeyUp,
}: Props)

}

function MessageForm({
  id,
  autoFocus,
  currentUser,
  draft,
  progress,
  uploading,
  uploads,
  rows,
  sendOnEnter,
  preview,
  message: initialMessage,
  onSend,
  onMessageChange,
  onCloseThread,
  onReopenThread,
  onFocus,
  onBlur,
  fetchMentions,
  upload,
  useUsersContext,
  mentions = [],
  onKeyDown,
  onKeyUp,
}: Props) {
  const STORAGE_KEY = currentUser
    ? `message.draft.${id}.user.${currentUser.id}`
    : `message.draft.${id}`;
  const [message, setMessage] = useState<string>(initialMessage || '');

  const [loading, setLoading] = useState(false);
  const [users, setUsers] = useState<SerializedUser[]>([]);
  const [contextUsers, addUsers] = useUsersContext();
  const [position, setPosition] = useState(0);
  const ref = useRef(null);
  const mode = getMode(message, position);
  const mention = getMention(message, position);
  const allUsers = [...contextUsers, ...mentions];

  useLayoutEffect(() => {
    if (draft) {
      const message = localStorage.get(STORAGE_KEY);
      if (message) {
        setMessage(message);
      }
    }
  }, [draft]);

  useEffect(() => {
    onMessageChange?.(message);
    draft && localStorage.set(STORAGE_KEY, message);
    return () => {
      draft && localStorage.set(STORAGE_KEY, message);
    };
  }, [message]);

  const handleSubmit = async (event: React.SyntheticEvent, callback?: any) => {
    event.preventDefault();