customer chat: add scrollhint

app/assets/javascripts/app/controllers/chat.coffee

@@ -343,14 +343,16 @@ class ChatWindow extends App.Controller
     'click .js-send':                'sendMessage'
     'click .js-close':               'close'
     'click .js-disconnect':          'disconnect'
+    'click .js-scrollHint':          'onScrollHintClick'
 
   elements:
-    '.js-customerChatInput': 'input'
+    '.js-customerChatInput':         'input'
-    '.js-status':            'status'
+    '.js-status':                    'status'
-    '.js-close':            'closeButton'
+    '.js-close':                     'closeButton'
-    '.js-disconnect':            'disconnectButton'
+    '.js-disconnect':                'disconnectButton'
-    '.js-body':              'body'
+    '.js-body':                      'body'
-    '.js-scrollHolder':      'scrollHolder'
+    '.js-scrollHolder':              'scrollHolder'
+    '.js-scrollHint':                'scrollHint'
 
   sounds:
     message: new Audio('assets/sounds/chat_message.mp3')
@@ -364,6 +366,7 @@ class ChatWindow extends App.Controller
     @isTyping = false
     @isAgentTyping = false
     @resetUnreadMessages()
+    @scrolledToBottom = true
 
     @chat = App.Chat.find(@session.chat_id)
     @name = "#{@chat.displayName()} ##{@session.id}"
@@ -407,6 +410,7 @@ class ChatWindow extends App.Controller
       name: @name
 
     @el.one 'transitionend', @onTransitionend
+    @scrollHolder.scroll @detectScrolledtoBottom
 
     # force repaint
     @el.prop('offsetHeight')
@@ -611,7 +615,6 @@ class ChatWindow extends App.Controller
       @isTyping = true
       @maybeAddTimestamp()
       @body.append App.view('customer_chat/chat_loader')()
-      return if !@el.find('.js-loader').visible(true)
       @scrollToBottom()
 
     # clear old delay, set new
@@ -677,8 +680,20 @@ class ChatWindow extends App.Controller
 
     @scrollToBottom()
 
+  detectScrolledtoBottom: =>
+    scrollBottom = @scrollHolder.scrollTop() + @scrollHolder.height()
+    @scrolledToBottom = scrollBottom == @scrollHolder.prop('scrollHeight')
+
+  onScrollHintClick: ->
+    # animate scroll
+    @scrollHolder.animate({scrollTop: @scrollHolder.prop('scrollHeight')}, 300)
+    @scrollHint.addClass('is-hidden')
+
   scrollToBottom: ->
-    @scrollHolder.scrollTop(@scrollHolder.prop('scrollHeight'))
+    if @scrolledToBottom
+      @scrollHolder.scrollTop(@scrollHolder.prop('scrollHeight'))
+    else
+      @scrollHint.removeClass('is-hidden')
 
 class Setting extends App.ControllerModal
   buttonClose: true

app/assets/javascripts/app/views/customer_chat/chat_window.jst.eco

@@ -18,6 +18,10 @@
     <div class="btn btn--action btn--small"><%- @T('close') %></div>
   </div>
 </div>
+<div class="chat-scroll-hint js-scrollHint is-hidden">
+  <%- @Icon('chat') %>
+  <div class="chat-scroll-hint-message">Scroll down to see new messages</div>
+</div>
 <div class="chat-body-holder js-scrollHolder">
   <div class="chat-body js-body"></div>
 </div>

app/assets/stylesheets/zammad.scss

@@ -7717,6 +7717,26 @@ output {
   display: none;
 }
 
+.chat-scroll-hint {
+  background: hsl(210,8%,98%);
+  display: flex;
+  align-items: center;
+  border: 1px solid hsl(0,0%,91%);
+  border-top: none;
+  padding: 7px 10px 6px;
+  color: hsl(0,0%,60%);
+  cursor: pointer;
+  
+  &.is-hidden {
+    display: none;
+  }
+  
+  .icon {
+    fill: hsl(210,5%,78%);
+    margin-right: 8px;
+  }
+}
+
 .chat-body-holder {
   flex: 1;
   background: hsl(210,17%,98%);