customer chat client: open unfinished session

public/assets/chat/chat.coffee

@@ -63,20 +63,22 @@ do($ = window.jQuery, window) ->
       @el = $(@view('chat')(@options))
       @options.target.append @el
 
+      @input = @el.find('.zammad-chat-input')
+
       @el.find('.js-chat-open').click @open
       @el.find('.js-chat-close').click @close
       @el.find('.zammad-chat-controls').on 'submit', @onSubmit
-      @el.find('.zammad-chat-input').on
+      @input.on
         keydown: @checkForEnter
         input: @onInput
 
-      if !window.WebSocket
+      if !window.WebSocket or !sessionStorage
         @log 'notice', 'Chat: Browser not supported!'
         return
 
       @connect()
 
-      @onReady()
+      #@onReady()
 
     checkForEnter: (event) =>
       if not event.shiftKey and event.keyCode is 13
@@ -103,11 +105,9 @@ do($ = window.jQuery, window) ->
             return if pipe.data.self_written
             @onAgentTypingStart()
           when 'chat_session_start'
-            @onConnectionEstablished pipe.data.agent
+            @onConnectionEstablished pipe.data
-            @sessionId = pipe.data.session_id
           when 'chat_session_queue'
-            @onQueue pipe.data.position
+            @onQueue pipe.data
-            @sessionId = pipe.data.session_id
           when 'chat_session_closed'
             @onSessionClosed pipe.data
           when 'chat_session_left'
@@ -124,20 +124,36 @@ do($ = window.jQuery, window) ->
               when 'no_seats_available'
                 @log 'debug', 'Zammad Chat: Too many clients in queue. Clients in queue: ', pipe.data.queue
               when 'reconnect'
-                # old messages
                 @log 'debug', 'old messages', pipe.data.session
+                @openSession pipe.data.session
 
     onReady: =>
       if @options.show
         @show()
-        @el.find('.zammad-chat-input').autoGrow
+
-          extraLine: false
+    openSession: (session) =>
+      for message in session
+        console.log "message in session", message
+        @renderMessage
+          message: message.content
+          id: message.id
+          from: if message.created_by_id then 'agent' else 'customer'
+
+      if sessionStorage.getItem 'unfinished_message'
+        @input.val( sessionStorage.getItem('unfinished_message') ).focus()
+
+      @show()
+      @open
+        showLoader: false
+        animate: false
 
     onInput: =>
       # remove unread-state from messages
       @el.find('.zammad-chat-message--unread')
         .removeClass 'zammad-chat-message--unread'
 
+      sessionStorage.setItem 'unfinished_message', @input.val()
+
       @onTypingStart()
 
     onTypingStart: ->
@@ -161,10 +177,12 @@ do($ = window.jQuery, window) ->
       @sendMessage()
 
     sendMessage: ->
-      message = @el.find('.zammad-chat-input').val()
+      message = @input.val()
 
       return if !message
 
+      sessionStorage.removeItem 'unfinished_message'
+
       messageElement = @view('message')
         message: message
         from: 'customer'
@@ -197,22 +215,31 @@ do($ = window.jQuery, window) ->
 
       @maybeAddTimestamp()
 
-      @lastAddedType = 'message--agent'
+      @renderMessage
-      unread = document.hidden ? " zammad-chat-message--unread" : ""
-      @el.find('.zammad-chat-body').append @view('message')
         message: data.message.content
         id: data.id
         from: 'agent'
+
+    renderMessage: (data) =>
+      @lastAddedType = "message--#{ data.from }"
+      unread = document.hidden ? " zammad-chat-message--unread" : ""
+      @el.find('.zammad-chat-body').append @view('message')(data)
       @scrollToBottom()
 
-    open: =>
+    open: (options = { showLoader: true, animate: true }) =>
       return if @isOpen
 
-      @showLoader()
+      if options.showLoader
+        @showLoader()
 
       @el
         .addClass('zammad-chat-is-open')
-        .animate { bottom: 0 }, 500, @onOpenAnimationEnd
+
+      if options.animate
+        @el.animate { bottom: 0 }, 500, @onOpenAnimationEnd
+      else
+        @el.css 'bottom', 0
+        @onOpenAnimationEnd()
 
       @isOpen = true
 
@@ -225,6 +252,15 @@ do($ = window.jQuery, window) ->
 
     close: (event) =>
       event.stopPropagation() if event
+
+      @ws.close()
+
+      sessionStorage.removeItem 'sessionId'
+      sessionStorage.removeItem 'unfinished_message'
+
+      @closeWindow()
+
+    closeWindow: =>
       remainerHeight = @el.height() - @el.find('.zammad-chat-header').outerHeight()
       @el.animate { bottom: -remainerHeight }, 500, @onCloseAnimationEnd
 
@@ -246,6 +282,9 @@ do($ = window.jQuery, window) ->
 
       @el.css 'bottom', -remainerHeight
 
+      @el.find('.zammad-chat-input').autoGrow
+        extraLine: false
+
     disableInput: ->
       @el.find('.zammad-chat-input').prop('disabled', true)
       @el.find('.zammad-chat-send').prop('disabled', true)
@@ -254,12 +293,13 @@ do($ = window.jQuery, window) ->
       @el.find('.zammad-chat-input').prop('disabled', false)
       @el.find('.zammad-chat-send').prop('disabled', false)
 
-    onQueue: (position) =>
+    onQueue: (data) =>
-      @log 'notice', 'onQueue', position
+      @log 'notice', 'onQueue', data.position
       @inQueue = true
+      @setSessionId data.session_id
 
       @el.find('.zammad-chat-body').html @view('waiting')
-        position: position
+        position: data.position
 
     onAgentTypingStart: =>
       if @stopTypingId
@@ -316,11 +356,7 @@ do($ = window.jQuery, window) ->
     connect: =>
       @log 'notice', "Connecting to #{@host}"
       @ws = new window.WebSocket(@host)
-      @ws.onopen = =>
+      @ws.onopen = @onWebSocketOpen
-        @log 'debug', 'ws connected'
-        @send 'chat_status_customer',
-          session_id: @sessionId
-        @setAgentOnlineState(true)
 
       @ws.onmessage = @onWebSocketMessage
 
@@ -332,6 +368,16 @@ do($ = window.jQuery, window) ->
       @ws.onerror = (e) =>
         @log 'debug', 'ws:onerror', e
 
+    onWebSocketOpen: =>
+      @sessionId = sessionStorage.getItem('sessionId')
+
+      @log 'debug', 'ws connected'
+
+      @send 'chat_status_customer',
+        session_id: @sessionId
+
+      @setAgentOnlineState(true)
+
     reconnect: =>
       # set status to connecting
       @log 'notice', 'reconnecting'
@@ -360,12 +406,17 @@ do($ = window.jQuery, window) ->
       @el.find('.zammad-chat-agent').addClass('zammad-chat-is-hidden')
       @el.find('.zammad-chat-agent-status').addClass('zammad-chat-is-hidden')
 
-    onConnectionEstablished: (agent) =>
+    setSessionId: (id) =>
+      @sessionId = id
+      sessionStorage.setItem 'sessionId', id
+
+    onConnectionEstablished: (data) =>
       @inQueue = false
-      @agent = agent
+      @agent = data.agent
+      @setSessionId data.session_id
 
       @el.find('.zammad-chat-agent').html @view('agent')
-        agent: agent
+        agent: @agent
 
       @enableInput()