Indicate to the user when there are unread messages

further down in the chat box.

css/converse.css

@@ -1369,6 +1369,16 @@
       color: #FB5D50; }
     #conversejs .chatbox .chat-body .delayed .chat-msg-me {
       color: #7EABBB; }
+  #conversejs .chatbox .new-msgs-indicator {
+    position: absolute;
+    width: 100%;
+    cursor: pointer;
+    background-color: #F4A261;
+    color: #FCFDFD;
+    padding: 0.3em;
+    font-size: 0.9em;
+    text-align: center;
+    z-index: 20; }
   #conversejs .chatbox .chat-content {
     position: relative;
     padding: 0.5em;
@@ -1455,7 +1465,7 @@
         box-shadow: -1px -1px 2px 0 rgba(0, 0, 0, 0.4);
         display: none;
         font-size: 12px;
-        margin: 0 0 1px 0;
+        margin: 0;
         position: absolute;
         right: 0; }
         #conversejs .chatbox form.sendXMPPMessage .chat-toolbar ul li {
@@ -1985,10 +1995,15 @@
         max-width: 70%;
         float: left;
         min-width: 200px; }
+        #conversejs .chatroom .box-flyout .chatroom-body .chat-area .new-msgs-indicator {
+          background-color: #E76F51;
+          max-width: 70%; }
         #conversejs .chatroom .box-flyout .chatroom-body .chat-area .chat-content {
           padding: 0 0.5em 0 0.5em; }
         #conversejs .chatroom .box-flyout .chatroom-body .chat-area.full {
           max-width: 100%; }
+          #conversejs .chatroom .box-flyout .chatroom-body .chat-area.full .new-msgs-indicator {
+            max-width: 100%; }
       #conversejs .chatroom .box-flyout .chatroom-body .mentioned {
         font-weight: bold; }
       #conversejs .chatroom .box-flyout .chatroom-body .chat-msg-room {

sass/_chatbox.scss

@@ -187,6 +187,17 @@
                 }
             }
         }
+        .new-msgs-indicator {
+            position: absolute;
+            width: 100%;
+            cursor: pointer;
+            background-color: $chat-head-color;
+            color: $light-background-color;
+            padding: 0.3em;
+            font-size: 0.9em;
+            text-align: center;
+            z-index: 20;
+        }
         .chat-content {
             position: relative;
             padding: 0.5em;
@@ -283,7 +294,7 @@
                     box-shadow: -1px -1px 2px 0 rgba(0, 0, 0, 0.4);
                     display: none;
                     font-size: 12px;
-                    margin: 0 0 1px 0;
+                    margin: 0;
                     position: absolute;
                     right: 0;
                     li {

sass/_chatrooms.scss

@@ -50,12 +50,19 @@
                     max-width: 70%;
                     float: left;
                     min-width: $chat-width;
+                    .new-msgs-indicator {
+                        background-color: $chatroom-head-color;
+                        max-width: 70%;
+                    }
                     .chat-content {
                         // There's an annoying Chrome box-sizing bug which prevents us from adding 0.5em padding here.
                         padding: 0 0.5em 0 0.5em;
                     }
                     &.full {
                         max-width: 100%;
+                        .new-msgs-indicator {
+                            max-width: 100%;
+                        }
                     }
                 }
                 .mentioned {

spec/chatroom.js

@@ -216,6 +216,50 @@
                 expect(converse.emit.callCount, 1);
             });
 
+            it("will cause the chat area to be scrolled down only if it was at the bottom already", function () {
+                var message = 'This message is received while the chat area is scrolled up';
+                test_utils.openChatRoom('lounge', 'localhost', 'dummy');
+                var view = converse.chatboxviews.get('lounge@localhost');
+                spyOn(view, 'scrollDown').andCallThrough();
+                runs(function () {
+                    /* Create enough messages so that there's a
+                        * scrollbar.
+                        */
+                    for (var i=0; i<20; i++) {
+                        converse.chatboxes.onMessage(
+                            $msg({
+                                from: 'lounge@localhost/someone',
+                                to: 'dummy@localhost.com',
+                                type: 'groupchat',
+                                id: (new Date()).getTime(),
+                            }).c('body').t('Message: '+i).tree());
+                    }
+                });
+                waits(50);
+                runs(function () {
+                    view.$content.scrollTop(0);
+                });
+                waits(250);
+                runs(function () {
+                    expect(view.model.get('scrolled')).toBeTruthy();
+                    converse.chatboxes.onMessage(
+                        $msg({
+                            from: 'lounge@localhost/someone',
+                            to: 'dummy@localhost.com',
+                            type: 'groupchat',
+                            id: (new Date()).getTime(),
+                        }).c('body').t(message).tree());
+                });
+                waits(150);
+                runs(function () {
+                    // Now check that the message appears inside the chatbox in the DOM
+                    var $chat_content = view.$el.find('.chat-content');
+                    var msg_txt = $chat_content.find('.chat-message:last').find('.chat-msg-content').text();
+                    expect(msg_txt).toEqual(message);
+                    expect(view.$content.scrollTop()).toBe(0);
+                });
+            });
+
             it("shows received chatroom subject messages", function () {
                 var text = 'Jabber/XMPP Development | RFCs and Extensions: http://xmpp.org/ | Protocol and XSF discussions: xsf@muc.xmpp.org';
                 var stanza = Strophe.xmlHtmlNode(
@@ -461,8 +505,8 @@
                 }.bind(converse));
             }.bind(converse));
         }.bind(converse));
-        
-        
+
+
         describe("Each chat room can take special commands", function () {
             beforeEach(function () {
                 runs(function () {

src/converse-chatview.js

@@ -99,6 +99,7 @@
                                         show_toolbar: converse.show_toolbar,
                                         show_textarea: true,
                                         title: this.model.get('fullname'),
+                                        unread_msgs: __('You have unread messages'),
                                         info_close: __('Close this chat box'),
                                         label_personal_message: __('Personal message')
                                     }
@@ -333,6 +334,9 @@
                         if (converse.windowState === 'blur' || this.model.get('scrolled', true)) {
                             converse.incrementMsgCounter();
                         }
+                        if (this.model.get('scrolled', true)) {
+                            this.$el.find('.new-msgs-indicator').removeClass('hidden');
+                        }
                     } else {
                         // We remove the "scrolled" flag so that the chat area
                         // gets scrolled down. We always want to scroll down
@@ -688,15 +692,16 @@
                     // and the user is scrolled away...
                     // Should probably take a look at incrementMsgCounter
                     if (ev && ev.preventDefault) { ev.preventDefault(); }
-                    var is_at_bottom = this.$content.scrollTop() + this.$content.innerHeight() >= this.$content[0].scrollHeight;
+                    var is_at_bottom = this.$content.scrollTop() + this.$content.innerHeight() >= this.$content[0].scrollHeight-10;
                     if (is_at_bottom) {
                         this.model.set('scrolled', false);
+                        this.$el.find('.new-msgs-indicator').addClass('hidden');
                     } else {
                         // We're not at the bottom of the chat area, so we mark
                         // that the box is in a scrolled-up state.
                         this.model.set('scrolled', true);
                     }
-                }, 50),
+                }, 150),
 
                 scrollDownMessageHeight: function ($message) {
                     if (this.$content.is(':visible') && !this.model.get('scrolled')) {
@@ -708,6 +713,7 @@
                 scrollDown: function () {
                     if (this.$content.is(':visible') && !this.model.get('scrolled')) {
                         this.$content.scrollTop(this.$content[0].scrollHeight);
+                        this.$el.find('.new-msgs-indicator').addClass('hidden');
                     }
                     return this;
                 }

src/converse-core.js

@@ -1577,6 +1577,9 @@
         });
 
         this.setUpXMLLogging = function () {
+            Strophe.log = function (level, msg) {
+                converse.log(msg, level);
+            };
             if (this.debug) {
                 this.connection.xmlInput = function (body) { converse.log(body.outerHTML); };
                 this.connection.xmlOutput = function (body) { converse.log(body.outerHTML); };

src/converse-dragresize.js

@@ -27,7 +27,7 @@
             // relevant objects or classes.
             //
             // New functions which don't exist yet can also be added.
-            
+
             registerGlobalEventHandlers: function () {
                 $(document).on('mousemove', function (ev) {
                     if (!this.resizing || !this.allow_dragresize) { return true; }

src/converse-headline.js

@@ -44,7 +44,7 @@
             // relevant objects or classes.
             //
             // New functions which don't exist yet can also be added.
-            
+
             ChatBoxViews: {
                 onChatBoxAdded: function (item) {
                     var view = this.get(item.get('id'));
@@ -93,6 +93,7 @@
                                         show_toolbar: converse.show_toolbar,
                                         show_textarea: false,
                                         title: this.model.get('fullname'),
+                                        unread_msgs: __('You have unread messages'),
                                         info_close: __('Close this box'),
                                         info_minimize: __('Minimize this box'),
                                         label_personal_message: ''

src/converse-muc.js

@@ -216,6 +216,7 @@
                         this.$('.chatroom-body').empty()
                             .append(
                                 converse.templates.chatarea({
+                                    'unread_msgs': __('You have unread messages'),
                                     'show_toolbar': converse.show_toolbar,
                                     'label_message': __('Message')
                                 }))

src/templates/chatarea.html

 <div class="chat-area">
     <div class="chat-content"></div>
+    <div class="new-msgs-indicator hidden">▼ {{ unread_msgs }} ▼</div>
     <form class="sendXMPPMessage" action="" method="post">
         {[ if (show_toolbar) { ]}
             <ul class="chat-toolbar no-text-select"></ul>

src/templates/chatbox.html

@@ -17,6 +17,7 @@
     </div>
     <div class="chat-body">
         <div class="chat-content"></div>
+        <div class="new-msgs-indicator hidden">▼ {{ unread_msgs }} ▼</div>
         {[ if (show_textarea) { ]}
         <form class="sendXMPPMessage" action="" method="post">
             {[ if (show_toolbar) { ]}

tests/main.js

@@ -55,7 +55,7 @@ require([
             auto_login: true,
             jid: 'dummy@localhost',
             password: 'secret',
-            debug: false
+            debug: true 
         }, function (converse) {
             window.converse = converse;
             window.crypto = {