Feat (chat) add new message badge (#11987)

Change scroll to bottom when receive a new message with:
- scroll to bottom if scroll was at the bottom before getting a new message
- keep the scroll in his original position when the scroll position was not at the bottom
- scroll to bottom when open first time the chat

react/features/chat/components/web/ChatInput.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable lines-around-comment */
-import React, { Component } from 'react';
+import React, { Component, RefObject } from 'react';
 import { WithTranslation } from 'react-i18next';
 import type { Dispatch } from 'redux';
 
@@ -31,17 +31,10 @@ interface Props extends WithTranslation {
      */
     dispatch: Dispatch<any>,
 
-    /**
-     * Optional callback to invoke when the chat textarea has auto-resized to
-     * fit overflowing text.
-     */
-    onResize?: Function,
-
     /**
      * Callback to invoke on message send.
      */
     onSend: Function
-
 }
 
 /**
@@ -66,7 +59,7 @@ type State = {
  * @augments Component
  */
 class ChatInput extends Component<Props, State> {
-    _textArea?: HTMLTextAreaElement;
+    _textArea?: RefObject<HTMLTextAreaElement>;
 
     state = {
         message: '',
@@ -82,7 +75,7 @@ class ChatInput extends Component<Props, State> {
     constructor(props: Props) {
         super(props);
 
-        this._textArea = undefined;
+        this._textArea = React.createRef<HTMLTextAreaElement>();
 
         // Bind event handlers so they are only bound once for every instance.
         this._onDetectSubmit = this._onDetectSubmit.bind(this);
@@ -90,7 +83,6 @@ class ChatInput extends Component<Props, State> {
         this._onSmileySelect = this._onSmileySelect.bind(this);
         this._onSubmitMessage = this._onSubmitMessage.bind(this);
         this._toggleSmileysPanel = this._toggleSmileysPanel.bind(this);
-        this._setTextAreaRef = this._setTextAreaRef.bind(this);
     }
 
     /**
@@ -101,7 +93,7 @@ class ChatInput extends Component<Props, State> {
     componentDidMount() {
         if (isMobileBrowser()) {
             // Ensure textarea is not focused when opening chat on mobile browser.
-            this._textArea && this._textArea.blur();
+            this._textArea?.current && this._textArea.current.blur();
         }
     }
 
@@ -134,7 +126,7 @@ class ChatInput extends Component<Props, State> {
                         onChange = { this._onMessageChange }
                         onKeyPress = { this._onDetectSubmit }
                         placeholder = { this.props.t('chat.messagebox') }
-                        ref = { this._setTextAreaRef }
+                        ref = { this._textArea }
                         textarea = { true }
                         value = { this.state.message } />
                     <Button
@@ -155,7 +147,7 @@ class ChatInput extends Component<Props, State> {
      * @returns {void}
      */
     _focus() {
-        this._textArea && this._textArea.focus();
+        this._textArea?.current && this._textArea.current.focus();
     }
 
     /**
@@ -254,17 +246,6 @@ class ChatInput extends Component<Props, State> {
         }
         this.setState({ showSmileysPanel: !this.state.showSmileysPanel });
     }
-
-    /**
-     * Sets the reference to the HTML TextArea.
-     *
-     * @param {HTMLAudioElement} textAreaElement - The HTML text area element.
-     * @private
-     * @returns {void}
-     */
-    _setTextAreaRef(textAreaElement?: HTMLTextAreaElement) {
-        this._textArea = textAreaElement;
-    }
 }
 
 /**