auto resize on type message connect (#10378)

app/assets/stylesheets/chat.scss

@@ -806,7 +806,7 @@
   height: inherit;
   align-items: stretch;
   position: relative;
-  height: 40px;
+  height: auto;
   padding: var(--su-4);
 
   textarea {
@@ -1028,9 +1028,18 @@
 
 .composer-textarea__edit {
   height: 80px;
+  max-height: 8rem;
   margin-bottom: var(--su-4);
 }
 
+.composer-textarea {
+  height: auto;
+  margin-bottom: var(--su-4);
+  min-height: 2.5rem;
+  resize: vertical;
+  max-height: 8rem;
+}
+
 .composer-btn-group {
   button {
     margin-right: var(--su-2);

app/javascript/chat/compose.jsx

@@ -1,5 +1,6 @@
 import { h, Component } from 'preact';
 import PropTypes from 'prop-types';
+import Textarea from 'preact-textarea-autosize';
 
 export default class Chat extends Component {
   static propTypes = {
@@ -15,6 +16,14 @@ export default class Chat extends Component {
     handleEditMessageClose: PropTypes.func.isRequired,
   };
 
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      value: null,
+    };
+  }
+
   componentDidUpdate() {
     const { editMessageMarkdown, markdownEdited, startEditing } = this.props;
     const textarea = document.getElementById('messageform');
@@ -34,8 +43,8 @@ export default class Chat extends Component {
 
     return (
       <div className="composer-container__edit">
-        <textarea
-          className="crayons-textfield composer-textarea composer-textarea__edit"
+        <Textarea
+          className="crayons-textfield composer-textarea__edit"
           id="messageform"
           placeholder="Let's connect"
           onKeyDown={handleKeyDownEdit}
@@ -75,9 +84,24 @@ export default class Chat extends Component {
       handleMention,
       handleKeyUp,
     } = this.props;
+
+    const handleInput = (e) => {
+      this.setState({
+        value: e.target.value,
+      });
+    };
+
+    const handleOnSubmitAction = (e) => {
+      handleSubmitOnClick(e);
+
+      this.setState({
+        value: '',
+      });
+    };
+
     return (
       <div className="messagecomposer">
-        <textarea
+        <Textarea
           className="crayons-textfield composer-textarea"
           id="messageform"
           placeholder="Write message..."
@@ -85,15 +109,19 @@ export default class Chat extends Component {
           onKeyPress={handleMention}
           onKeyUp={handleKeyUp}
           maxLength="1000"
+          value={this.state.value}
+          onInput={handleInput}
           aria-label="Compose a message"
         />
-        <button
-          type="button"
-          className="crayons-btn composer-submit"
-          onClick={handleSubmitOnClick}
-        >
-          Send
-        </button>
+        <div>
+          <button
+            type="button"
+            className="crayons-btn composer-submit"
+            onClick={handleOnSubmitAction}
+          >
+            Send
+          </button>
+        </div>
       </div>
     );
   };