Explore how to not cause jitter when typing notifications appear

The idea is to have a separate container outside of the messages area
for showing notifications.

However, the extra space added by this container causes messages to look
like they're cut off prematurely when one scrolls up.

A redesign of the chat's textarea would be necessary to make things look
harmonious again.

dist/converse.js

@@ -69970,10 +69970,18 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
 
           if (_.isNull(prev_msg_date) || moment(next_msg_date).isAfter(prev_msg_date, 'day')) {
             const day_date = moment(next_msg_date).startOf('day');
-            next_msg_el.insertAdjacentHTML('beforeBegin', tpl_new_day({
-              'isodate': day_date.format(),
-              'datestring': day_date.format("dddd MMM Do YYYY")
-            }));
+
+            if (u.hasClass('chat-state-notification', next_msg_el)) {
+              next_msg_el.parentElement.insertAdjacentHTML('beforeBegin', tpl_new_day({
+                'isodate': day_date.format(),
+                'datestring': day_date.format("dddd MMM Do YYYY")
+              }));
+            } else {
+              next_msg_el.insertAdjacentHTML('beforeBegin', tpl_new_day({
+                'isodate': day_date.format(),
+                'datestring': day_date.format("dddd MMM Do YYYY")
+              }));
+            }
           }
         },
 
@@ -70068,11 +70076,12 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
         },
 
         clearChatStateNotification(message, isodate) {
-          if (isodate) {
-            _.each(sizzle(`.chat-state-notification[data-csn="${message.get('from')}"][data-isodate="${isodate}"]`, this.content), u.removeElement);
-          } else {
-            _.each(sizzle(`.chat-state-notification[data-csn="${message.get('from')}"]`, this.content), u.removeElement);
-          }
+          this.el.querySelector('.chat-state-notifications').innerHTML = '';
+        },
+
+        insertChatStateNotification(view) {
+          const container = this.el.querySelector('.chat-state-notifications');
+          container.insertAdjacentElement('afterbegin', view.el);
         },
 
         shouldShowOnTextMessage() {
@@ -70159,9 +70168,14 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
             'model': message
           });
           this.clearChatStateNotification(message);
-          this.insertMessage(view);
-          this.insertDayIndicator(view.el);
-          this.setScrollPosition(view.el);
+
+          if (message.isOnlyChatStateNotification()) {
+            this.insertChatStateNotification(view);
+          } else {
+            this.insertMessage(view);
+            this.insertDayIndicator(view.el);
+            this.setScrollPosition(view.el);
+          }
 
           if (u.isNewMessage(message)) {
             if (message.get('sender') === 'me') {
@@ -76257,6 +76271,7 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
           this.el.innerHTML = tpl_chatroom();
           this.renderHeading();
           this.renderChatArea();
+          this.renderMessageForm();
 
           if (this.model.get('connection_status') !== converse.ROOMSTATUS.ENTERED) {
             this.showSpinner();
@@ -76276,14 +76291,9 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
           if (_.isNull(this.el.querySelector('.chat-area'))) {
             const container_el = this.el.querySelector('.chatroom-body');
             container_el.insertAdjacentHTML('beforeend', tpl_chatarea({
-              'label_message': __('Message'),
-              'label_send': __('Send'),
-              'show_send_button': _converse.show_send_button,
-              'show_toolbar': _converse.show_toolbar,
-              'unread_msgs': __('You have unread messages')
+              'show_send_button': _converse.show_send_button
             }));
             container_el.insertAdjacentElement('beforeend', this.occupantsview.el);
-            this.renderToolbar(tpl_chatroom_toolbar);
             this.content = this.el.querySelector('.chat-content');
             this.toggleOccupants(null, true);
           }
@@ -84346,31 +84356,13 @@ return __p
 
 var _ = {escape:__webpack_require__(/*! ./node_modules/lodash/escape.js */ "./node_modules/lodash/escape.js")};
 module.exports = function(o) {
-var __t, __p = '', __e = _.escape, __j = Array.prototype.join;
+var __t, __p = '', __j = Array.prototype.join;
 function print() { __p += __j.call(arguments, '') }
 __p += '<!-- src/templates/chatarea.html -->\n<div class="chat-area col">\n    <div class="chat-content ';
  if (o.show_send_button) { ;
 __p += 'chat-content-sendbutton';
  } ;
-__p += '"></div>\n    <div class="new-msgs-indicator hidden">▼ ' +
-__e( o.unread_msgs ) +
-' ▼</div>\n    <form class="sendXMPPMessage">\n        ';
- if (o.show_toolbar) { ;
-__p += '\n            <ul class="chat-toolbar no-text-select"></ul>\n        ';
- } ;
-__p += '\n        <textarea type="text" class="chat-textarea ';
- if (o.show_send_button) { ;
-__p += 'chat-textarea-send-button';
- } ;
-__p += '"\n                  placeholder="' +
-__e(o.label_message) +
-'"></textarea>\n    ';
- if (o.show_send_button) { ;
-__p += '\n        <button type="submit" class="pure-button send-button">' +
-__e( o.label_send ) +
-'</button>\n    ';
- } ;
-__p += '\n    </form>\n</div>\n';
+__p += '"></div>\n    <div class="message-form-container"/>\n</div>\n';
 return __p
 };
 
@@ -84391,7 +84383,7 @@ __p += '<!-- src/templates/chatbox.html -->\n<div class="flyout box-flyout">\n
  if (o.show_send_button) { ;
 __p += 'chat-content-sendbutton';
  } ;
-__p += '"></div>\n        <div class="message-form-container"/>\n    </div>\n</div>\n';
+__p += '"></div>\n        <div class="chat-state-notifications"></div>\n        <div class="message-form-container"/>\n    </div>\n</div>\n';
 return __p
 };
 

sass/_chatbox.scss

@@ -197,6 +197,8 @@
             border: 0;
             background-color: #ffffff;
             line-height: 1.3em;
+            display: flex;
+            flex-direction: column;
 
             video {
                 width: 100%

sass/_messages.scss

 #conversejs {
     .message {
+        flex-shrink: 0;
 
         &.date-separator {
             height: 2em;
@@ -37,9 +38,6 @@
             &.badge {
                 color: $chat-head-text-color;
             }
-            &.chat-state-notification {
-                font-style: italic;
-            }
             &.chat-event {
                 clear: left;
                 font-style: italic;

sass/converse.scss

@@ -48,6 +48,7 @@
 @import "chatrooms";
 @import "headline";
 @import "messages";
+@import "csn";
 @import "minimized_chats";
 @import "bookmarks";
 @import "awesomplete";

src/converse-chatview.js

@@ -590,12 +590,21 @@
 
                     if (_.isNull(prev_msg_date) || moment(next_msg_date).isAfter(prev_msg_date, 'day')) {
                         const day_date = moment(next_msg_date).startOf('day');
-                        next_msg_el.insertAdjacentHTML('beforeBegin',
-                            tpl_new_day({
-                                'isodate': day_date.format(),
-                                'datestring': day_date.format("dddd MMM Do YYYY")
-                            })
-                        );
+                        if (u.hasClass('chat-state-notification', next_msg_el)) {
+                            next_msg_el.parentElement.insertAdjacentHTML('beforeBegin',
+                                tpl_new_day({
+                                    'isodate': day_date.format(),
+                                    'datestring': day_date.format("dddd MMM Do YYYY")
+                                })
+                            );
+                        } else {
+                            next_msg_el.insertAdjacentHTML('beforeBegin',
+                                tpl_new_day({
+                                    'isodate': day_date.format(),
+                                    'datestring': day_date.format("dddd MMM Do YYYY")
+                                })
+                            );
+                        }
                     }
                 },
 
@@ -682,14 +691,12 @@
                 },
 
                 clearChatStateNotification (message, isodate) {
-                    if (isodate) {
-                        _.each(
-                            sizzle(`.chat-state-notification[data-csn="${message.get('from')}"][data-isodate="${isodate}"]`, this.content),
-                            u.removeElement
-                        );
-                    } else {
-                        _.each(sizzle(`.chat-state-notification[data-csn="${message.get('from')}"]`, this.content), u.removeElement);
-                    }
+                    this.el.querySelector('.chat-state-notifications').innerHTML = '';
+                },
+
+                insertChatStateNotification (view) {
+                    const container = this.el.querySelector('.chat-state-notifications');
+                    container.insertAdjacentElement('afterbegin', view.el);
                 },
 
                 shouldShowOnTextMessage () {
@@ -710,7 +717,7 @@
                         }
                     }
                     const current_msg_date = moment(view.model.get('time')) || moment,
-                            previous_msg_date = this.getLastMessageDate(current_msg_date);
+                          previous_msg_date = this.getLastMessageDate(current_msg_date);
 
                     if (_.isNull(previous_msg_date)) {
                         this.content.insertAdjacentElement('afterbegin', view.el);
@@ -773,10 +780,13 @@
                      */
                     const view = new _converse.MessageView({'model': message});
                     this.clearChatStateNotification(message);
-                    this.insertMessage(view);
-                    this.insertDayIndicator(view.el);
-                    this.setScrollPosition(view.el);
-
+                    if (message.isOnlyChatStateNotification()) {
+                        this.insertChatStateNotification(view);
+                    } else {
+                        this.insertMessage(view);
+                        this.insertDayIndicator(view.el);
+                        this.setScrollPosition(view.el);
+                    }
                     if (u.isNewMessage(message)) {
                         if (message.get('sender') === 'me') {
                             // We remove the "scrolled" flag so that the chat area

src/templates/chatbox.html

 <div class="flyout box-flyout">
     <div class="chat-body">
         <div class="chat-content {[ if (o.show_send_button) { ]}chat-content-sendbutton{[ } ]}"></div>
+        <div class="chat-state-notifications"></div>
         <div class="message-form-container"/>
     </div>
 </div>