Refactoring of the XEP-0085 Chat State Notifications code

* Distinguish between CSN messages and other types of messages
* Properly clear previous notifications
* Better handling of notifications from multiple users (in MUC)
* Rename methods to make clarify intent

css/converse.css

@@ -7354,6 +7354,9 @@ body.reset {
       #converse-embedded-chat .chatbox .chat-body .chat-info.badge,
       #conversejs .chatbox .chat-body .chat-info.badge {
         color: white; }
+      #converse-embedded-chat .chatbox .chat-body .chat-info.chat-state-notification,
+      #conversejs .chatbox .chat-body .chat-info.chat-state-notification {
+        font-style: italic; }
       #converse-embedded-chat .chatbox .chat-body .chat-info.chat-event,
       #conversejs .chatbox .chat-body .chat-info.chat-event {
         clear: left;

css/inverse.css

@@ -7407,6 +7407,9 @@ body {
       #converse-embedded-chat .chatbox .chat-body .chat-info.badge,
       #conversejs .chatbox .chat-body .chat-info.badge {
         color: white; }
+      #converse-embedded-chat .chatbox .chat-body .chat-info.chat-state-notification,
+      #conversejs .chatbox .chat-body .chat-info.chat-state-notification {
+        font-style: italic; }
       #converse-embedded-chat .chatbox .chat-body .chat-info.chat-event,
       #conversejs .chatbox .chat-body .chat-info.chat-event {
         clear: left;

sass/_chatbox.scss

@@ -182,6 +182,9 @@
                 &.badge {
                     color: $chat-head-text-color;
                 }
+                &.chat-state-notification {
+                    font-style: italic;
+                }
                 &.chat-event {
                     clear: left;
                     font-style: italic;

spec/chatbox.js

@@ -1634,7 +1634,7 @@
 
             describe("A Chat Status Notification", function () {
 
-                it("does not open automatically if a chat state notification is received",
+                it("does not open a new chatbox",
                         mock.initConverseWithPromises(
                             null, ['rosterGroupsFetched'], {},
                             function (done, _converse) {
@@ -1787,8 +1787,21 @@
                         var chatboxview = _converse.chatboxviews.get(sender_jid);
                         expect(chatboxview).toBeDefined();
                         // Check that the notification appears inside the chatbox in the DOM
-                        var $events = $(chatboxview.el).find('.chat-event');
+                        var events = chatboxview.el.querySelectorAll('.chat-state-notification');
-                        expect($events.text()).toEqual(mock.cur_names[1] + ' is typing');
+                        expect(events.length).toBe(1);
+                        expect(events[0].textContent).toEqual(mock.cur_names[1] + ' is typing');
+
+                        // Check that it doesn't appear twice
+                        msg = $msg({
+                                from: sender_jid,
+                                to: _converse.connection.jid,
+                                type: 'chat',
+                                id: (new Date()).getTime()
+                            }).c('body').c('composing', {'xmlns': Strophe.NS.CHATSTATES}).tree();
+                        _converse.chatboxes.onMessage(msg);
+                        events = chatboxview.el.querySelectorAll('.chat-state-notification');
+                        expect(events.length).toBe(1);
+                        expect(events[0].textContent).toEqual(mock.cur_names[1] + ' is typing');
                         done();
                     }));
 
@@ -1835,7 +1848,7 @@
                             expect(msg_obj.get('sender')).toEqual('me');
                             expect(msg_obj.get('delayed')).toEqual(false);
                             var $chat_content = $(chatboxview.el).find('.chat-content');
-                            var status_text = $chat_content.find('.chat-info.chat-event').text();
+                            var status_text = $chat_content.find('.chat-info.chat-state-notification').text();
                             expect(status_text).toBe('Typing from another device');
                             done();
                         });
@@ -1931,7 +1944,7 @@
                             _converse.chatboxes.onMessage(msg);
                             expect(_converse.emit).toHaveBeenCalledWith('message', jasmine.any(Object));
                             var chatboxview = _converse.chatboxviews.get(sender_jid);
-                            var $events = $(chatboxview.el).find('.chat-event');
+                            var $events = $(chatboxview.el).find('.chat-info.chat-state-notification');
                             expect($events.text()).toEqual(mock.cur_names[1] + ' has stopped typing');
                             done();
                         });
@@ -1980,7 +1993,7 @@
                             expect(msg_obj.get('sender')).toEqual('me');
                             expect(msg_obj.get('delayed')).toEqual(false);
                             var $chat_content = $(chatboxview.el).find('.chat-content');
-                            var status_text = $chat_content.find('.chat-info.chat-event').text();
+                            var status_text = $chat_content.find('.chat-info.chat-state-notification').text();
                             expect(status_text).toBe('Stopped typing on the other device');
                             done();
                         });
@@ -2106,7 +2119,7 @@
                         });
                     }));
 
-                    it("will clear any other chat status notifications if its received",
+                    it("will clear any other chat status notifications",
                         mock.initConverseWithPromises(
                             null, ['rosterGroupsFetched'], {},
                             function (done, _converse) {
@@ -2119,10 +2132,20 @@
                         var sender_jid = mock.cur_names[1].replace(/ /g,'.').toLowerCase() + '@localhost';
                         test_utils.openChatBoxFor(_converse, sender_jid);
                         var view = _converse.chatboxviews.get(sender_jid);
-                        expect($(view.el).find('.chat-event').length).toBe(0);
+                        expect(view.el.querySelectorAll('.chat-event').length).toBe(0);
-                        view.showStatusNotification(sender_jid+' is typing');
+                        // Insert <composing> message, to also check that
-                        expect($(view.el).find('.chat-event').length).toBe(1);
+                        // text messages are inserted correctly with
+                        // temporary chat events in the chat contents.
                         var msg = $msg({
+                                'to': _converse.bare_jid,
+                                'xmlns': 'jabber:client',
+                                'from': sender_jid,
+                                'type': 'chat'})
+                            .c('composing', {'xmlns': Strophe.NS.CHATSTATES}).up()
+                            .tree();
+                        _converse.chatboxes.onMessage(msg);
+                        expect(view.el.querySelectorAll('.chat-state-notification').length).toBe(1);
+                        msg = $msg({
                                 from: sender_jid,
                                 to: _converse.connection.jid,
                                 type: 'chat',
@@ -2130,7 +2153,7 @@
                             }).c('body').c('inactive', {'xmlns': Strophe.NS.CHATSTATES}).tree();
                         _converse.chatboxes.onMessage(msg);
                         expect(_converse.emit).toHaveBeenCalledWith('message', jasmine.any(Object));
-                        expect($(view.el).find('.chat-event').length).toBe(0);
+                        expect($(view.el).find('.chat-state-notification').length).toBe(0);
                         done();
                     }));
                 });
@@ -2157,7 +2180,7 @@
                         _converse.chatboxes.onMessage(msg);
                         expect(_converse.emit).toHaveBeenCalledWith('message', jasmine.any(Object));
                         var chatboxview = _converse.chatboxviews.get(sender_jid);
-                        var $events = $(chatboxview.el).find('.chat-event');
+                        var $events = $(chatboxview.el).find('.chat-state-notification');
                         expect($events.text()).toEqual(mock.cur_names[1] + ' has gone away');
                         done();
                     }));

spec/chatroom.js

@@ -2141,7 +2141,7 @@
                     var view = _converse.chatboxviews.get('lounge@localhost');
                     spyOn(view, 'onMessageSubmitted').and.callThrough();
                     spyOn(view.model, 'setAffiliation').and.callThrough();
-                    spyOn(view, 'showStatusNotification').and.callThrough();
+                    spyOn(view, 'showErrorMessage').and.callThrough();
                     spyOn(view, 'validateRoleChangeCommand').and.callThrough();
                     var textarea = view.el.querySelector('.chat-textarea')
                     textarea.value = '/owner';
@@ -2152,7 +2152,7 @@
                     });
                     expect(view.onMessageSubmitted).toHaveBeenCalled();
                     expect(view.validateRoleChangeCommand).toHaveBeenCalled();
-                    expect(view.showStatusNotification).toHaveBeenCalledWith(
+                    expect(view.showErrorMessage).toHaveBeenCalledWith(
                         "Error: the \"owner\" command takes two arguments, the user's nickname and optionally a reason.",
                         true
                     );
@@ -2164,7 +2164,7 @@
                     // reason.
                     view.onMessageSubmitted('/owner annoyingGuy@localhost You\'re responsible');
                     expect(view.validateRoleChangeCommand.calls.count()).toBe(2);
-                    expect(view.showStatusNotification.calls.count()).toBe(1);
+                    expect(view.showErrorMessage.calls.count()).toBe(1);
                     expect(view.model.setAffiliation).toHaveBeenCalled();
                     // Check that the member list now gets updated
                     expect(sent_IQ.toLocaleString()).toBe(
@@ -2194,7 +2194,7 @@
                     var view = _converse.chatboxviews.get('lounge@localhost');
                     spyOn(view, 'onMessageSubmitted').and.callThrough();
                     spyOn(view.model, 'setAffiliation').and.callThrough();
-                    spyOn(view, 'showStatusNotification').and.callThrough();
+                    spyOn(view, 'showErrorMessage').and.callThrough();
                     spyOn(view, 'validateRoleChangeCommand').and.callThrough();
                     var textarea = view.el.querySelector('.chat-textarea')
                     textarea.value = '/ban';
@@ -2205,7 +2205,7 @@
                     });
                     expect(view.onMessageSubmitted).toHaveBeenCalled();
                     expect(view.validateRoleChangeCommand).toHaveBeenCalled();
-                    expect(view.showStatusNotification).toHaveBeenCalledWith(
+                    expect(view.showErrorMessage).toHaveBeenCalledWith(
                         "Error: the \"ban\" command takes two arguments, the user's nickname and optionally a reason.",
                         true
                     );
@@ -2216,7 +2216,7 @@
                     // reason.
                     view.onMessageSubmitted('/ban annoyingGuy@localhost You\'re annoying');
                     expect(view.validateRoleChangeCommand.calls.count()).toBe(2);
-                    expect(view.showStatusNotification.calls.count()).toBe(1);
+                    expect(view.showErrorMessage.calls.count()).toBe(1);
                     expect(view.model.setAffiliation).toHaveBeenCalled();
                     // Check that the member list now gets updated
                     expect(sent_IQ.toLocaleString()).toBe(
@@ -2246,7 +2246,7 @@
                     var view = _converse.chatboxviews.get('lounge@localhost');
                     spyOn(view, 'onMessageSubmitted').and.callThrough();
                     spyOn(view, 'modifyRole').and.callThrough();
-                    spyOn(view, 'showStatusNotification').and.callThrough();
+                    spyOn(view, 'showErrorMessage').and.callThrough();
                     spyOn(view, 'validateRoleChangeCommand').and.callThrough();
 
                     var textarea = view.el.querySelector('.chat-textarea')
@@ -2258,7 +2258,7 @@
                     });
                     expect(view.onMessageSubmitted).toHaveBeenCalled();
                     expect(view.validateRoleChangeCommand).toHaveBeenCalled();
-                    expect(view.showStatusNotification).toHaveBeenCalledWith(
+                    expect(view.showErrorMessage).toHaveBeenCalledWith(
                         "Error: the \"kick\" command takes two arguments, the user's nickname and optionally a reason.",
                         true
                     );
@@ -2269,7 +2269,7 @@
                     // reason.
                     view.onMessageSubmitted('/kick annoyingGuy You\'re annoying');
                     expect(view.validateRoleChangeCommand.calls.count()).toBe(2);
-                    expect(view.showStatusNotification.calls.count()).toBe(1);
+                    expect(view.showErrorMessage.calls.count()).toBe(1);
                     expect(view.modifyRole).toHaveBeenCalled();
                     expect(sent_IQ.toLocaleString()).toBe(
                         "<iq to='lounge@localhost' type='set' xmlns='jabber:client' id='"+IQ_id+"'>"+
@@ -2325,7 +2325,8 @@
                     var view = _converse.chatboxviews.get('lounge@localhost');
                     spyOn(view, 'onMessageSubmitted').and.callThrough();
                     spyOn(view, 'modifyRole').and.callThrough();
-                    spyOn(view, 'showStatusNotification').and.callThrough();
+                    spyOn(view, 'showErrorMessage').and.callThrough();
+                    spyOn(view, 'showChatEvent').and.callThrough();
                     spyOn(view, 'validateRoleChangeCommand').and.callThrough();
 
                     // New user enters the room
@@ -2363,7 +2364,7 @@
 
                     expect(view.onMessageSubmitted).toHaveBeenCalled();
                     expect(view.validateRoleChangeCommand).toHaveBeenCalled();
-                    expect(view.showStatusNotification).toHaveBeenCalledWith(
+                    expect(view.showErrorMessage).toHaveBeenCalledWith(
                         "Error: the \"op\" command takes two arguments, the user's nickname and optionally a reason.",
                         true
                     );
@@ -2375,7 +2376,7 @@
                     // reason.
                     view.onMessageSubmitted('/op trustworthyguy You\'re trustworthy');
                     expect(view.validateRoleChangeCommand.calls.count()).toBe(2);
-                    expect(view.showStatusNotification.calls.count()).toBe(1);
+                    expect(view.showErrorMessage.calls.count()).toBe(1);
                     expect(view.modifyRole).toHaveBeenCalled();
                     expect(sent_IQ.toLocaleString()).toBe(
                         "<iq to='lounge@localhost' type='set' xmlns='jabber:client' id='"+IQ_id+"'>"+
@@ -2408,11 +2409,11 @@
                             });
                     _converse.connection._dataRecv(test_utils.createRequest(presence));
                     info_msgs = Array.prototype.slice.call(view.el.querySelectorAll('.chat-info'), 0);
-                    expect(info_msgs.pop().textContent).toBe("trustworthyguy is now a moderator.");
+                    expect(info_msgs.pop().textContent).toBe("trustworthyguy is now a moderator");
 
                     view.onMessageSubmitted('/deop trustworthyguy Perhaps not');
                     expect(view.validateRoleChangeCommand.calls.count()).toBe(3);
-                    expect(view.showStatusNotification.calls.count()).toBe(2);
+                    expect(view.showChatEvent.calls.count()).toBe(1);
                     expect(view.modifyRole).toHaveBeenCalled();
                     expect(sent_IQ.toLocaleString()).toBe(
                         "<iq to='lounge@localhost' type='set' xmlns='jabber:client' id='"+IQ_id+"'>"+
@@ -2444,7 +2445,7 @@
                             });
                     _converse.connection._dataRecv(test_utils.createRequest(presence));
                     info_msgs = Array.prototype.slice.call(view.el.querySelectorAll('.chat-info'), 0);
-                    expect(info_msgs.pop().textContent).toBe("trustworthyguy is no longer a moderator.");
+                    expect(info_msgs.pop().textContent).toBe("trustworthyguy is no longer a moderator");
                     done();
                 });
             }));
@@ -2464,7 +2465,8 @@
                     var view = _converse.chatboxviews.get('lounge@localhost');
                     spyOn(view, 'onMessageSubmitted').and.callThrough();
                     spyOn(view, 'modifyRole').and.callThrough();
-                    spyOn(view, 'showStatusNotification').and.callThrough();
+                    spyOn(view, 'showErrorMessage').and.callThrough();
+                    spyOn(view, 'showChatEvent').and.callThrough();
                     spyOn(view, 'validateRoleChangeCommand').and.callThrough();
 
                     // New user enters the room
@@ -2502,7 +2504,7 @@
 
                     expect(view.onMessageSubmitted).toHaveBeenCalled();
                     expect(view.validateRoleChangeCommand).toHaveBeenCalled();
-                    expect(view.showStatusNotification).toHaveBeenCalledWith(
+                    expect(view.showErrorMessage).toHaveBeenCalledWith(
                         "Error: the \"mute\" command takes two arguments, the user's nickname and optionally a reason.",
                         true
                     );
@@ -2513,7 +2515,7 @@
                     // reason.
                     view.onMessageSubmitted('/mute annoyingGuy You\'re annoying');
                     expect(view.validateRoleChangeCommand.calls.count()).toBe(2);
-                    expect(view.showStatusNotification.calls.count()).toBe(1);
+                    expect(view.showErrorMessage.calls.count()).toBe(1);
                     expect(view.modifyRole).toHaveBeenCalled();
                     expect(sent_IQ.toLocaleString()).toBe(
                         "<iq to='lounge@localhost' type='set' xmlns='jabber:client' id='"+IQ_id+"'>"+
@@ -2546,11 +2548,11 @@
                             });
                     _converse.connection._dataRecv(test_utils.createRequest(presence));
                     info_msgs = Array.prototype.slice.call(view.el.querySelectorAll('.chat-info'), 0);
-                    expect(info_msgs.pop().textContent).toBe("annoyingGuy has been muted.");
+                    expect(info_msgs.pop().textContent).toBe("annoyingGuy has been muted");
 
                     view.onMessageSubmitted('/voice annoyingGuy Now you can talk again');
                     expect(view.validateRoleChangeCommand.calls.count()).toBe(3);
-                    expect(view.showStatusNotification.calls.count()).toBe(2);
+                    expect(view.showChatEvent.calls.count()).toBe(1);
                     expect(view.modifyRole).toHaveBeenCalled();
                     expect(sent_IQ.toLocaleString()).toBe(
                         "<iq to='lounge@localhost' type='set' xmlns='jabber:client' id='"+IQ_id+"'>"+
@@ -2583,7 +2585,7 @@
                             });
                     _converse.connection._dataRecv(test_utils.createRequest(presence));
                     info_msgs = Array.prototype.slice.call(view.el.querySelectorAll('.chat-info'), 0);
-                    expect(info_msgs.pop().textContent).toBe("annoyingGuy has been given a voice again.");
+                    expect(info_msgs.pop().textContent).toBe("annoyingGuy has been given a voice again");
                     done();
                 });
             }));
@@ -3229,6 +3231,331 @@
                     done();
                 });
             }));
+
+            describe("A Chat Status Notification", function () {
+
+                describe("A composing notification", function () {
+
+                    it("will be shown if received",
+                        mock.initConverseWithPromises(
+                            null, ['rosterGroupsFetched'], {},
+                            function (done, _converse) {
+
+                        test_utils.openAndEnterChatRoom(
+                                _converse, 'coven', 'chat.shakespeare.lit', 'some1').then(function () {
+
+                            var room_jid = 'coven@chat.shakespeare.lit';
+                            var view = _converse.chatboxviews.get('coven@chat.shakespeare.lit');
+                            var $chat_content = $(view.el).find('.chat-content');
+
+                            /* <presence to="dummy@localhost/_converse.js-29092160"
+                            *           from="coven@chat.shakespeare.lit/some1">
+                            *      <x xmlns="http://jabber.org/protocol/muc#user">
+                            *          <item affiliation="owner" jid="dummy@localhost/_converse.js-29092160" role="moderator"/>
+                            *          <status code="110"/>
+                            *      </x>
+                            *  </presence></body>
+                            */
+                            var presence = $pres({
+                                    to: 'dummy@localhost/_converse.js-29092160',
+                                    from: 'coven@chat.shakespeare.lit/some1'
+                                }).c('x', {xmlns: Strophe.NS.MUC_USER})
+                                .c('item', {
+                                    'affiliation': 'owner',
+                                    'jid': 'dummy@localhost/_converse.js-29092160',
+                                    'role': 'moderator'
+                                }).up()
+                                .c('status', {code: '110'});
+                            _converse.connection._dataRecv(test_utils.createRequest(presence));
+                            expect($chat_content[0].querySelectorAll('div.chat-info').length).toBe(2);
+                            expect($chat_content.find('div.chat-info:first').html()).toBe("some1 has entered the room");
+                            expect($chat_content.find('div.chat-info:last').html()).toBe("some1 is now a moderator");
+
+                            presence = $pres({
+                                    to: 'dummy@localhost/_converse.js-29092160',
+                                    from: 'coven@chat.shakespeare.lit/newguy'
+                                })
+                                .c('x', {xmlns: Strophe.NS.MUC_USER})
+                                .c('item', {
+                                    'affiliation': 'none',
+                                    'jid': 'newguy@localhost/_converse.js-290929789',
+                                    'role': 'participant'
+                                });
+                            _converse.connection._dataRecv(test_utils.createRequest(presence));
+                            expect($chat_content[0].querySelectorAll('div.chat-info').length).toBe(3);
+                            expect($chat_content.find('div.chat-info:last').html()).toBe("newguy has entered the room");
+
+                            presence = $pres({
+                                    to: 'dummy@localhost/_converse.js-29092160',
+                                    from: 'coven@chat.shakespeare.lit/nomorenicks'
+                                })
+                                .c('x', {xmlns: Strophe.NS.MUC_USER})
+                                .c('item', {
+                                    'affiliation': 'none',
+                                    'jid': 'nomorenicks@localhost/_converse.js-290929789',
+                                    'role': 'participant'
+                                });
+                            _converse.connection._dataRecv(test_utils.createRequest(presence));
+                            expect($chat_content[0].querySelectorAll('div.chat-info').length).toBe(4);
+                            expect($chat_content.find('div.chat-info:last').html()).toBe("nomorenicks has entered the room");
+
+                            // See XEP-0085 http://xmpp.org/extensions/xep-0085.html#definitions
+
+                            // <composing> state
+                            var msg = $msg({
+                                    from: room_jid+'/newguy',
+                                    id: (new Date()).getTime(),
+                                    to: 'dummy@localhost',
+                                    type: 'groupchat'
+                                }).c('body').c('composing', {'xmlns': Strophe.NS.CHATSTATES}).tree();
+                            view.handleMUCMessage(msg);
+
+                            // Check that the notification appears inside the chatbox in the DOM
+                            var events = view.el.querySelectorAll('.chat-event');
+                            expect(events.length).toBe(4);
+                            expect(events[0].textContent).toEqual('some1 has entered the room');
+                            expect(events[1].textContent).toEqual('some1 is now a moderator');
+                            expect(events[2].textContent).toEqual('newguy has entered the room');
+                            expect(events[3].textContent).toEqual('nomorenicks has entered the room');
+
+                            var notifications = view.el.querySelectorAll('.chat-state-notification');
+                            expect(notifications.length).toBe(1);
+                            expect(notifications[0].textContent).toEqual('newguy is typing');
+
+                            const timeout_functions = [];
+                            spyOn(window, 'setTimeout').and.callFake(function (func, delay) {
+                                timeout_functions.push(func);
+                            });
+
+                            // Check that it doesn't appear twice
+                            msg = $msg({
+                                    from: room_jid+'/newguy',
+                                    id: (new Date()).getTime(),
+                                    to: 'dummy@localhost',
+                                    type: 'groupchat'
+                                }).c('body').c('composing', {'xmlns': Strophe.NS.CHATSTATES}).tree();
+                            view.handleMUCMessage(msg);
+
+                            events = view.el.querySelectorAll('.chat-event');
+                            expect(events.length).toBe(4);
+                            expect(events[0].textContent).toEqual('some1 has entered the room');
+                            expect(events[1].textContent).toEqual('some1 is now a moderator');
+                            expect(events[2].textContent).toEqual('newguy has entered the room');
+                            expect(events[3].textContent).toEqual('nomorenicks has entered the room');
+
+                            notifications = view.el.querySelectorAll('.chat-state-notification');
+                            expect(notifications.length).toBe(1);
+                            expect(notifications[0].textContent).toEqual('newguy is typing');
+
+                            expect(timeout_functions.length).toBe(1);
+
+                            // <composing> state for a different occupant
+                            msg = $msg({
+                                    from: room_jid+'/nomorenicks',
+                                    id: (new Date()).getTime(),
+                                    to: 'dummy@localhost',
+                                    type: 'groupchat'
+                                }).c('body').c('composing', {'xmlns': Strophe.NS.CHATSTATES}).tree();
+                            view.handleMUCMessage(msg);
+                            events = view.el.querySelectorAll('.chat-event');
+                            expect(events.length).toBe(4);
+                            expect(events[0].textContent).toEqual('some1 has entered the room');
+                            expect(events[1].textContent).toEqual('some1 is now a moderator');
+                            expect(events[2].textContent).toEqual('newguy has entered the room');
+                            expect(events[3].textContent).toEqual('nomorenicks has entered the room');
+
+                            notifications = view.el.querySelectorAll('.chat-state-notification');
+                            expect(notifications.length).toBe(2);
+                            expect(notifications[0].textContent).toEqual('newguy is typing');
+                            expect(notifications[1].textContent).toEqual('nomorenicks is typing');
+                            expect(timeout_functions.length).toBe(2);
+
+                            // Check that new messages appear under the chat state
+                            // notifications
+                            msg = $msg({
+                                from: 'lounge@localhost/some1',
+                                id: (new Date()).getTime(),
+                                to: 'dummy@localhost',
+                                type: 'groupchat'
+                            }).c('body').t('hello world').tree();
+                            view.handleMUCMessage(msg);
+
+                            var messages = view.el.querySelectorAll('.message');
+                            expect(messages.length).toBe(8);
+                            expect(view.el.querySelectorAll('.chat-message').length).toBe(1);
+                            expect(view.el.querySelector('.chat-message .chat-msg-content').textContent).toBe('hello world');
+
+                            // Test that the composing notifications get removed
+                            // via timeout.
+                            timeout_functions[0]();
+                            events = view.el.querySelectorAll('.chat-event');
+                            expect(events.length).toBe(4);
+                            expect(events[0].textContent).toEqual('some1 has entered the room');
+                            expect(events[1].textContent).toEqual('some1 is now a moderator');
+                            expect(events[2].textContent).toEqual('newguy has entered the room');
+                            expect(events[3].textContent).toEqual('nomorenicks has entered the room');
+
+                            notifications = view.el.querySelectorAll('.chat-state-notification');
+                            expect(notifications.length).toBe(1);
+                            expect(notifications[0].textContent).toEqual('nomorenicks is typing');
+
+                            timeout_functions[1]();
+                            events = view.el.querySelectorAll('.chat-event');
+                            expect(events.length).toBe(4);
+                            expect(events[0].textContent).toEqual('some1 has entered the room');
+                            expect(events[1].textContent).toEqual('some1 is now a moderator');
+                            expect(events[2].textContent).toEqual('newguy has entered the room');
+                            expect(events[3].textContent).toEqual('nomorenicks has entered the room');
+
+                            notifications = view.el.querySelectorAll('.chat-state-notification');
+                            expect(notifications.length).toBe(0);
+                            done();
+                        });
+                    }));
+                });
+
+                describe("A paused notification", function () {
+                    it("will be shown if received",
+                        mock.initConverseWithPromises(
+                            null, ['rosterGroupsFetched'], {},
+                            function (done, _converse) {
+
+                        test_utils.openChatRoom(_converse, "coven", 'chat.shakespeare.lit', 'some1');
+                        var room_jid = 'coven@chat.shakespeare.lit';
+                        var view = _converse.chatboxviews.get('coven@chat.shakespeare.lit');
+                        var $chat_content = $(view.el).find('.chat-content');
+
+                        /* <presence to="dummy@localhost/_converse.js-29092160"
+                         *           from="coven@chat.shakespeare.lit/some1">
+                         *      <x xmlns="http://jabber.org/protocol/muc#user">
+                         *          <item affiliation="owner" jid="dummy@localhost/_converse.js-29092160" role="moderator"/>
+                         *          <status code="110"/>
+                         *      </x>
+                         *  </presence></body>
+                         */
+                        var presence = $pres({
+                                to: 'dummy@localhost/_converse.js-29092160',
+                                from: 'coven@chat.shakespeare.lit/some1'
+                            }).c('x', {xmlns: Strophe.NS.MUC_USER})
+                            .c('item', {
+                                'affiliation': 'owner',
+                                'jid': 'dummy@localhost/_converse.js-29092160',
+                                'role': 'moderator'
+                            }).up()
+                            .c('status', {code: '110'});
+                        _converse.connection._dataRecv(test_utils.createRequest(presence));
+                        expect($chat_content.find('div.chat-info:first').html()).toBe("some1 has entered the room");
+
+                        presence = $pres({
+                                to: 'dummy@localhost/_converse.js-29092160',
+                                from: 'coven@chat.shakespeare.lit/newguy'
+                            })
+                            .c('x', {xmlns: Strophe.NS.MUC_USER})
+                            .c('item', {
+                                'affiliation': 'none',
+                                'jid': 'newguy@localhost/_converse.js-290929789',
+                                'role': 'participant'
+                            });
+                        _converse.connection._dataRecv(test_utils.createRequest(presence));
+                        expect($chat_content[0].querySelectorAll('div.chat-info').length).toBe(2);
+                        expect($chat_content.find('div.chat-info:last').html()).toBe("newguy has entered the room");
+
+                        presence = $pres({
+                                to: 'dummy@localhost/_converse.js-29092160',
+                                from: 'coven@chat.shakespeare.lit/nomorenicks'
+                            })
+                            .c('x', {xmlns: Strophe.NS.MUC_USER})
+                            .c('item', {
+                                'affiliation': 'none',
+                                'jid': 'nomorenicks@localhost/_converse.js-290929789',
+                                'role': 'participant'
+                            });
+                        _converse.connection._dataRecv(test_utils.createRequest(presence));
+                        expect($chat_content[0].querySelectorAll('div.chat-info').length).toBe(3);
+                        expect($chat_content.find('div.chat-info:last').html()).toBe("nomorenicks has entered the room");
+
+                        // See XEP-0085 http://xmpp.org/extensions/xep-0085.html#definitions
+
+                        // <composing> state
+                        var msg = $msg({
+                                from: room_jid+'/newguy',
+                                id: (new Date()).getTime(),
+                                to: 'dummy@localhost',
+                                type: 'groupchat'
+                            }).c('body').c('composing', {'xmlns': Strophe.NS.CHATSTATES}).tree();
+                        view.handleMUCMessage(msg);
+
+                        // Check that the notification appears inside the chatbox in the DOM
+                        var events = view.el.querySelectorAll('.chat-event');
+                        expect(events.length).toBe(3);
+                        expect(events[0].textContent).toEqual('some1 has entered the room');
+                        expect(events[1].textContent).toEqual('newguy has entered the room');
+                        expect(events[2].textContent).toEqual('nomorenicks has entered the room');
+
+                        var notifications = view.el.querySelectorAll('.chat-state-notification');
+                        expect(notifications.length).toBe(1);
+                        expect(notifications[0].textContent).toEqual('newguy is typing');
+
+                        // Check that it doesn't appear twice
+                        msg = $msg({
+                                from: room_jid+'/newguy',
+                                id: (new Date()).getTime(),
+                                to: 'dummy@localhost',
+                                type: 'groupchat'
+                            }).c('body').c('composing', {'xmlns': Strophe.NS.CHATSTATES}).tree();
+                        view.handleMUCMessage(msg);
+
+                        events = view.el.querySelectorAll('.chat-event');
+                        expect(events.length).toBe(3);
+                        expect(events[0].textContent).toEqual('some1 has entered the room');
+                        expect(events[1].textContent).toEqual('newguy has entered the room');
+                        expect(events[2].textContent).toEqual('nomorenicks has entered the room');
+
+                        notifications = view.el.querySelectorAll('.chat-state-notification');
+                        expect(notifications.length).toBe(1);
+                        expect(notifications[0].textContent).toEqual('newguy is typing');
+
+                        // <composing> state for a different occupant
+                        msg = $msg({
+                                from: room_jid+'/nomorenicks',
+                                id: (new Date()).getTime(),
+                                to: 'dummy@localhost',
+                                type: 'groupchat'
+                            }).c('body').c('composing', {'xmlns': Strophe.NS.CHATSTATES}).tree();
+                        view.handleMUCMessage(msg);
+                        events = view.el.querySelectorAll('.chat-event');
+                        expect(events.length).toBe(3);
+                        expect(events[0].textContent).toEqual('some1 has entered the room');
+                        expect(events[1].textContent).toEqual('newguy has entered the room');
+                        expect(events[2].textContent).toEqual('nomorenicks has entered the room');
+
+                        notifications = view.el.querySelectorAll('.chat-state-notification');
+                        expect(notifications.length).toBe(2);
+                        expect(notifications[0].textContent).toEqual('newguy is typing');
+                        expect(notifications[1].textContent).toEqual('nomorenicks is typing');
+
+                        // <paused> state from occupant who typed first
+                        msg = $msg({
+                                from: room_jid+'/newguy',
+                                id: (new Date()).getTime(),
+                                to: 'dummy@localhost',
+                                type: 'groupchat'
+                            }).c('body').c('paused', {'xmlns': Strophe.NS.CHATSTATES}).tree();
+                        view.handleMUCMessage(msg);
+                        events = view.el.querySelectorAll('.chat-event');
+                        expect(events.length).toBe(3);
+                        expect(events[0].textContent).toEqual('some1 has entered the room');
+                        expect(events[1].textContent).toEqual('newguy has entered the room');
+                        expect(events[2].textContent).toEqual('nomorenicks has entered the room');
+
+                        notifications = view.el.querySelectorAll('.chat-state-notification');
+                        expect(notifications.length).toBe(2);
+                        expect(notifications[0].textContent).toEqual('nomorenicks is typing');
+                        expect(notifications[1].textContent).toEqual('newguy has stopped typing');
+                        done();
+                    }));
+                });
+            });
         });
     });
 }));

src/converse-chatboxes.js

@@ -167,6 +167,7 @@
                     const spoiler = message.querySelector(`spoiler[xmlns="${Strophe.NS.SPOILER}"]`);
                     const attrs = {
                         'type': type,
+                        'from': from,
                         'chat_state': chat_state,
                         'delayed': delayed,
                         'fullname': fullname,

src/converse-chatview.js

@@ -16,7 +16,9 @@
             "tpl!chatbox",
             "tpl!chatbox_head",
             "tpl!chatbox_message_form",
+            "tpl!csn",
             "tpl!emojis",
+            "tpl!error_message",
             "tpl!help_message",
             "tpl!info",
             "tpl!message",
@@ -24,6 +26,7 @@
             "tpl!spinner",
             "tpl!spoiler_button",
             "tpl!spoiler_message",
+            "tpl!status_message",
             "tpl!toolbar",
             "converse-chatboxes"
     ], factory);
@@ -36,7 +39,9 @@
             tpl_chatbox,
             tpl_chatbox_head,
             tpl_chatbox_message_form,
+            tpl_csn,
             tpl_emojis,
+            tpl_error_message,
             tpl_help_message,
             tpl_info,
             tpl_message,
@@ -44,6 +49,7 @@
             tpl_spinner,
             tpl_spoiler_button,
             tpl_spoiler_message,
+            tpl_status_message,
             tpl_toolbar
     ) {
     "use strict";
@@ -400,23 +406,26 @@
                     return this;
                 },
 
-                clearStatusNotification () {
+                showChatEvent (message, data='') {
-                    u.removeElement(this.content.querySelector('.chat-event'));
+                    const isodate = moment().format();
-                },
-
-                showStatusNotification (message, keep_old, permanent) {
-                    if (!keep_old) {
-                        this.clearStatusNotification();
-                    }
                     this.content.insertAdjacentHTML(
                         'beforeend',
                         tpl_info({
-                            'extra_classes': !permanent ? 'chat-event' : '',
+                            'extra_classes': 'chat-event',
                             'message': message,
-                            'isodate': moment().format(),
+                            'isodate': isodate,
-                            'data': ''
+                            'data': data
                         }));
                     this.scrollDown();
+                    return isodate;
+                },
+
+                showErrorMessage (message) {
+                    this.content.insertAdjacentHTML(
+                        'beforeend',
+                        tpl_error_message({'message': message, 'isodate': moment().format() })
+                    );
+                    this.scrollDown();
                 },
 
                 addSpinner (append=false) {
@@ -449,7 +458,7 @@
                      *      This element must have a "data-isodate" attribute
                      *      which specifies its creation date.
                      */
-                    const prev_msg_el = u.getPreviousElement(next_msg_el, ".message:not(.chat-event)"),
+                    const prev_msg_el = u.getPreviousElement(next_msg_el, ".message:not(.chat-state-notification)"),
                           prev_msg_date = _.isNull(prev_msg_el) ? null : prev_msg_el.getAttribute('data-isodate'),
                           next_msg_date = next_msg_el.getAttribute('data-isodate');
 
@@ -471,24 +480,24 @@
                      *  (Object) cutoff: Moment Date cutoff date. The last
                      *      message received cutoff this date will be returned.
                      */
-                    const first_msg = u.getFirstChildElement(this.content, '.message:not(.chat-event)'),
+                    const first_msg = u.getFirstChildElement(this.content, '.message:not(.chat-state-notification)'),
                           oldest_date = first_msg ? first_msg.getAttribute('data-isodate') : null;
                     if (!_.isNull(oldest_date) && moment(oldest_date).isAfter(cutoff)) {
                         return null;
                     }
-                    const last_msg = u.getLastChildElement(this.content, '.message:not(.chat-event)'),
+                    const last_msg = u.getLastChildElement(this.content, '.message:not(.chat-state-notification)'),
                           most_recent_date = last_msg ? last_msg.getAttribute('data-isodate') : null;
                     if (_.isNull(most_recent_date) || moment(most_recent_date).isBefore(cutoff)) {
                         return most_recent_date;
                     }
-                    /* XXX: We avoid .chat-event messages, since they are
+                    /* XXX: We avoid .chat-state-notification messages, since they are
                      * temporary and get removed once a new element is
                      * inserted into the chat area, so we don't query for
                      * them here, otherwise we get a null reference later
                      * upon element insertion.
                      */
                     const msg_dates = _.invokeMap(
-                        sizzle('.message:not(.chat-event)', this.content),
+                        sizzle('.message:not(.chat-state-notification)', this.content),
                         Element.prototype.getAttribute, 'data-isodate'
                     )
                     if (_.isObject(cutoff)) {
@@ -527,7 +536,7 @@
                         previous_msg_el.insertAdjacentElement('afterend', message_el);
                     }
                     this.insertDayIndicator(message_el);
-                    this.clearStatusNotification();
+                    this.clearChatStateNotification(attrs.from);
                     this.setScrollPosition(message_el);
                 },
 
@@ -662,28 +671,55 @@
                     return this.scrollDown();
                 },
 
-                handleChatStateMessage (message) {
+                clearChatStateNotification (from, isodate) {
+                    if (isodate) {
+                        _.each(
+                            sizzle(`.chat-state-notification[data-csn="${from}"][data-isodate="${isodate}"]`, this.content),
+                            u.removeElement
+                        );
+                    } else {
+                        _.each(sizzle(`.chat-state-notification[data-csn="${from}"]`, this.content), u.removeElement);
+                    }
+                },
+
+                showChatStateNotification (message) {
+                    /* Support for XEP-0085, Chat State Notifications */
+                    let text;
+                    const from = message.get('from');
+                    const data = `data-csn=${from}`;
+                    this.clearChatStateNotification(from);
+
                     if (message.get('chat_state') === _converse.COMPOSING) {
                         if (message.get('sender') === 'me') {
-                            this.showStatusNotification(__('Typing from another device'));
+                            text = __('Typing from another device');
                         } else {
-                            this.showStatusNotification(message.get('fullname')+' '+__('is typing'));
+                            text = message.get('fullname')+' '+__('is typing');
                         }
-                        this.clear_status_timeout = window.setTimeout(
-                            this.clearStatusNotification.bind(this),
-                            30000
-                        );
                     } else if (message.get('chat_state') === _converse.PAUSED) {
                         if (message.get('sender') === 'me') {
-                            this.showStatusNotification(__('Stopped typing on the other device'));
+                            text = __('Stopped typing on the other device');
                         } else {
-                            this.showStatusNotification(message.get('fullname')+' '+__('has stopped typing'));
+                            text = message.get('fullname')+' '+__('has stopped typing');
                         }
-                    } else if (_.includes([_converse.INACTIVE, _converse.ACTIVE], message.get('chat_state'))) {
-                        this.clearStatusNotification();
                     } else if (message.get('chat_state') === _converse.GONE) {
-                        this.showStatusNotification(message.get('fullname')+' '+__('has gone away'));
+                        text = message.get('fullname')+' '+__('has gone away');
+                    } else {
+                        return;
                     }
+                    const isodate = moment().format();
+                    this.content.insertAdjacentHTML(
+                        'beforeend',
+                        tpl_csn({
+                            'message': text,
+                            'from': from,
+                            'isodate': isodate
+                        }));
+                    this.scrollDown();
+
+                    this.clear_status_timeout = window.setTimeout(
+                        this.clearChatStateNotification.bind(this, from, isodate),
+                        30000
+                    );
                     return message;
                 },
 
@@ -740,7 +776,7 @@
                         this.handleErrorMessage(message);
                     } else {
                         if (message.get('chat_state')) {
-                            this.handleChatStateMessage(message);
+                            this.showChatStateNotification(message);
                         }
                         if (message.get('message')) {
                             this.handleTextMessage(message);
@@ -1021,16 +1057,27 @@
                 onChatStatusChanged (item) {
                     const chat_status = item.get('chat_status');
                     let fullname = item.get('fullname');
+                    let text;
+
                     fullname = _.isEmpty(fullname)? item.get('jid'): fullname;
                     if (u.isVisible(this.el)) {
                         if (chat_status === 'offline') {
-                            this.showStatusNotification(fullname+' '+__('has gone offline'));
+                            text = fullname+' '+__('has gone offline');
                         } else if (chat_status === 'away') {
-                            this.showStatusNotification(fullname+' '+__('has gone away'));
+                            text = fullname+' '+__('has gone away');
                         } else if ((chat_status === 'dnd')) {
-                            this.showStatusNotification(fullname+' '+__('is busy'));
+                            text = fullname+' '+__('is busy');
                         } else if (chat_status === 'online') {
-                            this.clearStatusNotification();
+                            text = fullname+' '+__('is online');
+                        }
+                        if (text) {
+                            this.content.insertAdjacentHTML(
+                                'beforeend',
+                                tpl_status_message({
+                                    'message': text,
+                                    'isodate': moment().format(),
+                                }));
+                            this.scrollDown();
                         }
                     }
                 },

src/converse-muc-views.js

@@ -497,25 +497,16 @@
                 informOfOccupantsRoleChange (occupant, changed) {
                     const previous_role = occupant._previousAttributes.role;
                     if (previous_role === 'moderator') {
-                        this.showStatusNotification(
+                        this.showChatEvent(__("%1$s is no longer a moderator", occupant.get('nick')))
-                            __("%1$s is no longer a moderator.", occupant.get('nick')),
-                            false, true)
                     }
                     if (previous_role === 'visitor') {
-                        this.showStatusNotification(
+                        this.showChatEvent(__("%1$s has been given a voice again", occupant.get('nick')))
-                            __("%1$s has been given a voice again.", occupant.get('nick')),
-                            false, true)
                     }
-
                     if (occupant.get('role') === 'visitor') {
-                        this.showStatusNotification(
+                        this.showChatEvent(__("%1$s has been muted", occupant.get('nick')))
-                            __("%1$s has been muted.", occupant.get('nick')),
-                            false, true)
                     }
                     if (occupant.get('role') === 'moderator') {
-                        this.showStatusNotification(
+                        this.showChatEvent(__("%1$s is now a moderator", occupant.get('nick')))
-                            __("%1$s is now a moderator.", occupant.get('nick')),
-                            false, true)
                     }
                 },
 
@@ -629,7 +620,7 @@
                     this.insertIntoTextArea(ev.target.textContent);
                 },
 
-                handleChatStateMessage (message) {
+                handleChatStateNotification (message) {
                     /* Override the method on the ChatBoxView base class to
                      * ignore <gone/> notifications in groupchats.
                      *
@@ -643,7 +634,7 @@
                         return;
                     }
                     if (message.get('chat_state') !== _converse.GONE) {
-                        _converse.ChatBoxView.prototype.handleChatStateMessage.apply(this, arguments);
+                        _converse.ChatBoxView.prototype.handleChatStateNotification.apply(this, arguments);
                     }
                 },
 
@@ -707,7 +698,7 @@
                      */
                     // TODO check if first argument is valid
                     if (args.length < 1 || args.length > 2) {
-                        this.showStatusNotification(
+                        this.showErrorMessage(
                             __('Error: the "%1$s" command takes two arguments, the user\'s nickname and optionally a reason.',
                                 command),
                             true
@@ -729,7 +720,7 @@
                 },
 
                 onCommandError () {
-                    this.showStatusNotification(__("Error: could not execute the command"), true);
+                    this.showErrorMessage(__("Error: could not execute the command"), true);
                 },
 
                 onMessageSubmitted (text) {
@@ -1446,7 +1437,7 @@
                             }));
                     });
                     if (notification.reason) {
-                        this.showStatusNotification(__('The reason given is: "%1$s".', notification.reason), true);
+                        this.showChatEvent(__('The reason given is: "%1$s".', notification.reason));
                     }
                     if (_.get(notification.messages, 'length')) {
                         this.scrollDown();
@@ -1577,7 +1568,7 @@
                     return stanza;
                 },
 
-                showErrorMessage (presence) {
+                showErrorMessageFromPresence (presence) {
                     // We didn't enter the room, so we must remove it from the MUC add-on
                     const error = presence.querySelector('error');
                     if (error.getAttribute('type') === 'auth') {
@@ -1698,7 +1689,7 @@
                      */
                     if (pres.getAttribute('type') === 'error') {
                         this.model.save('connection_status', converse.ROOMSTATUS.DISCONNECTED);
-                        this.showErrorMessage(pres);
+                        this.showErrorMessageFromPresence(pres);
                         return true;
                     }
                     const is_self = pres.querySelector("status[code='110']");

src/templates/csn.html

@@ -0,0 +1,3 @@
+<div class="message chat-info chat-state-notification"
+     data-isodate="{{{o.isodate}}}"
+     data-csn="{{{o.from}}}">{{{o.message}}}</div>

src/templates/error_message.html

@@ -0,0 +1 @@
+<div class="message chat-info chat-error" data-isodate="{{{o.isodate}}}">{{{o.message}}}</div>

src/templates/info.html

@@ -1 +1,3 @@
-<div class="message chat-info {{{o.extra_classes}}}" data-isodate="{{{o.isodate}}}" {{{o.data}}}>{{{o.message}}}</div>
+<div class="message chat-info {{{o.extra_classes}}}"
+     data-isodate="{{{o.isodate}}}"
+     {{{o.data}}}>{{{o.message}}}</div>

src/templates/status_message.html

@@ -0,0 +1,3 @@
+<div class="message chat-info chat-status"
+     data-isodate="{{{o.isodate}}}"
+     data-status="{{{o.from}}}">{{{o.message}}}</div>