chat client: add timeout screen (@showTimeout)

public/assets/chat/chat.coffee

@@ -32,9 +32,9 @@ do($ = window.jQuery, window) ->
       'Compose your message...': 'Ihre Nachricht...'
       'All colleges are busy.': 'Alle Kollegen sind belegt.'
       'You are on waiting list position <strong>%s</strong>.': 'Sie sind in der Warteliste an der Position <strong>%s</strong>.'
-      '': ''
-      '': ''
-      '': ''
+      'Start new conversation': 'Neue Konversation starten'
+      'Since you didn\'t respond in the last %s your conversation with <strong>%s</strong> got closed.': 'Da sie in den letzten %s nichts geschrieben haben wurde ihre Konversation mit <strong>%s</strong> geschlossen.'
+      'minutes': 'Minuten'
     sessionId: undefined
 
     T: (string, items...) =>
@@ -138,7 +138,6 @@ do($ = window.jQuery, window) ->
       @onConnectionEstablished(data)
 
       for message in data.session
-        @log 'debug', "message in session", message
         @renderMessage
           message: message.content
           id: message.id
@@ -233,7 +232,8 @@ do($ = window.jQuery, window) ->
       @scrollToBottom()
 
     open: =>
-      return if @isOpen
+      if @isOpen
+        @show()
 
       if !@sessionId
         @showLoader()
@@ -365,6 +365,8 @@ do($ = window.jQuery, window) ->
           time: time
 
     addStatus: (status) ->
+      @maybeAddTimestamp()
+
       @el.find('.zammad-chat-body').append @view('status')
         status: status
 
@@ -434,7 +436,6 @@ do($ = window.jQuery, window) ->
       sessionStorage.setItem 'sessionId', id
 
     onConnectionEstablished: (data) =>
-
       # stop delay of initial queue position
       if @onInitialQueueDelayId
         clearTimeout @onInitialQueueDelayId
@@ -456,6 +457,12 @@ do($ = window.jQuery, window) ->
       @el.find('.zammad-chat-agent-status').removeClass('zammad-chat-is-hidden')
       @input.focus()
 
+    showTimeout: ->
+      @el.find('.zammad-chat-body').html @view('timeout')
+        agent: @agent.name
+        delay: 10
+        unit: @T('minutes')
+
     showLoader: ->
       @el.find('.zammad-chat-body').html @view('loader')()
 

public/assets/chat/chat.css

@@ -139,9 +139,9 @@
   top: 3.5em;
   margin-top: 1px;
   text-align: center;
-  background: radial-gradient(rgba(255, 255, 255, 0.75), white);
+  background: white;
   z-index: 1;
-  padding: 10px;
+  padding: 20px;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
@@ -157,6 +157,8 @@
   line-height: 1.45; }
   .zammad-chat-modal-text .zammad-chat-loading-animation {
     font-size: 0.7em; }
+  .zammad-chat-modal-text .zammad-chat-button {
+    margin-top: 1em; }
 
 .zammad-chat-modal .zammad-chat-loading-animation {
   margin-right: 8px;
@@ -293,11 +295,10 @@
 .zammad-chat-input::-webkit-input-placeholder {
   color: #bdc9d0; }
 
-.zammad-chat-send {
+.zammad-chat-button {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
-  float: right;
   font-family: inherit;
   font-size: inherit;
   background: #379ad7;
@@ -308,7 +309,12 @@
   border: none;
   border-radius: 1.5em;
   box-shadow: 0 2px rgba(255, 255, 255, 0.25) inset, 0 0 0 1px #247fb7 inset, 0 1px rgba(0, 0, 0, 0.1);
-  outline: none; }
+  outline: none;
+  font-size: 0.8em;
+  display: inline-block; }
+
+.zammad-chat-send {
+  float: right; }
 
 .zammad-chat-is-hidden {
   display: none; }
@@ -332,7 +338,7 @@
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08) inset; }
 
 .zammad-chat--flat .zammad-chat-agent-status,
-.zammad-chat--flat .zammad-chat-send,
+.zammad-chat--flat .zammad-chat-button,
 .zammad-chat--flat .zammad-chat-status {
   box-shadow: none; }
 

public/assets/chat/chat.scss

@@ -172,9 +172,9 @@ $baseTextColor: if($luminance < 0.2, white, black);
   top: 3.5em;
   margin-top: 1px;
   text-align: center;
-  background: radial-gradient(rgba(255,255,255,.75), rgba(255,255,255,1));
+  background: white;
   z-index: 1;
-  padding: 10px;
+  padding: 20px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -187,6 +187,10 @@ $baseTextColor: if($luminance < 0.2, white, black);
   .zammad-chat-loading-animation {
     font-size: 0.7em;
   }
+
+  .zammad-chat-button {
+    margin-top: 1em;
+  }
 }
 
 .zammad-chat-modal .zammad-chat-loading-animation {
@@ -319,9 +323,8 @@ $baseTextColor: if($luminance < 0.2, white, black);
   color: desaturate(lightenMax($themeColor, 25%, 85%), 50%);
 }
 
-.zammad-chat-send {
+.zammad-chat-button {
   appearance: none;
-  float: right;
   font-family: inherit;
   font-size: inherit;
   background: $themeColor;
@@ -336,6 +339,12 @@ $baseTextColor: if($luminance < 0.2, white, black);
     0 0 0 1px darken($themeColor, 10%) inset,
     0 1px rgba(0,0,0,.1);
   outline: none;
+  font-size: 0.8em;
+  display: inline-block;
+}
+
+.zammad-chat-send {
+  float: right;
 }
 
 .zammad-chat-is-hidden {
@@ -363,7 +372,7 @@ $baseTextColor: if($luminance < 0.2, white, black);
   box-shadow: 0 0 0 1px rgba(0,0,0,.08) inset;
 }
 .zammad-chat--flat .zammad-chat-agent-status,
-.zammad-chat--flat .zammad-chat-send,
+.zammad-chat--flat .zammad-chat-button,
 .zammad-chat--flat .zammad-chat-status {
   box-shadow: none;
 }

public/assets/chat/views/chat.eco

@@ -17,6 +17,6 @@
   <div class="zammad-chat-body"></div>
   <form class="zammad-chat-controls">
     <textarea class="zammad-chat-input" rows="1" placeholder="<%- @T('Compose your message...') %>"></textarea>
-    <button type="submit" class="zammad-chat-send"><%- @T('Send') %></button>
+    <button type="submit" class="zammad-chat-button zammad-chat-send"><%- @T('Send') %></button>
   </form>
 </div>

public/assets/chat/views/timeout.eco

@@ -0,0 +1,6 @@
+<div class="zammad-chat-modal">
+  <div class="zammad-chat-modal-text">
+    <%- @T('Since you didn\'t respond in the last %s your conversation with <strong>%s</strong> got closed.', "#{ @delay } #{ @unit }", @agent) %><br>
+    <div class="zammad-chat-button"><%= @T('Start new conversation') %></div>
+  </div>
+</div>