From 069063b2c723b57922e7ff1e7abc3f9b3e877be8 Mon Sep 17 00:00:00 2001
From: Martin Edenhofer <me@edenhofer.de>
Date: Wed, 25 Nov 2015 17:36:06 +0100
Subject: [PATCH] Use domain of users email address for preview. Added css auto
 load and css Url support. Added possibility to translation chat widget.

---
 .../app/controllers/_channel/chat.coffee      |  44 ++--
 .../app/views/channel/chat.jst.eco            |   9 +-
 public/assets/chat/chat.coffee                |  75 +++++--
 public/assets/chat/chat.js                    | 202 +++++++++++-------
 public/assets/chat/chat.min.js                |   2 +-
 public/assets/chat/index.html                 |   2 +-
 public/assets/chat/views/chat.eco             |   2 +-
 public/assets/chat/znuny.html                 | 135 ++++++------
 8 files changed, 284 insertions(+), 187 deletions(-)

diff --git a/app/assets/javascripts/app/controllers/_channel/chat.coffee b/app/assets/javascripts/app/controllers/_channel/chat.coffee
index 5fd4f65fd..5ce8032b4 100644
--- a/app/assets/javascripts/app/controllers/_channel/chat.coffee
+++ b/app/assets/javascripts/app/controllers/_channel/chat.coffee
@@ -30,10 +30,10 @@ class App.ChannelChat extends App.Controller
 
   apiOptions: [
     {
-      name: 'channel'
-      default: "'default'"
-      type: 'String'
-      description: 'Name of the chat-channel.'
+      name: 'chatId'
+      default: '1'
+      type: 'Integer'
+      description: 'Identifier of the chat-topic.'
     }
     {
       name: 'show'
@@ -54,18 +54,18 @@ class App.ChannelChat extends App.Controller
       description: "If left empty, the host gets auto-detected - in this case %s. The auto-detection reads out the host from the <script> tag. If you don't include it via a <script> tag you need to specify the host."
       descriptionSubstitute: window.location.origin
     }
-    {
-      name: 'port'
-      default: 6042
-      type: 'Int'
-      description: ''
-    }
     {
       name: 'debug'
       default: false
       type: 'Boolean'
       description: 'Enables console logging.'
     }
+    {
+      name: 'title'
+      default: "'<strong>Chat</strong> with us!'"
+      type: 'String'
+      description: 'Welcome Title shown on the closed chat. Can contain HTML.'
+    }
     {
       name: 'fontSize'
       default: 'undefined'
@@ -91,18 +91,29 @@ class App.ChannelChat extends App.Controller
       description: 'This class gets added to the button on initialization and gets removed once the chat connection got established.'
     }
     {
-      name: 'title'
-      default: "'<strong>Chat</strong> with us!'"
+      name: 'cssAutoload'
+      default: 'true'
+      type: 'boolean'
+      description: 'Automatically loads the chat.css file. If you want to use your own css, just set it to false.'
+    }
+    {
+      name: 'cssUrl'
+      default: 'undefined'
       type: 'String'
-      description: 'Welcome Title shown on the closed chat. Can contain HTML.'
+      description: 'Location of an external chat.css file.'
     }
   ]
 
   isOpen: true
   browserWidth: 1280
+  previewUrl: ''
 
   constructor: ->
     super
+
+    if @Session.get('email')
+      @previewUrl = "www.#{@Session.get('email').replace(/^.+?\@/, '')}"
+
     @load()
 
     @widgetDesignerPermanentParams =
@@ -133,6 +144,7 @@ class App.ChannelChat extends App.Controller
       baseurl: window.location.origin
       chats: chats
       apiOptions: @apiOptions
+      previewUrl: @previewUrl
     )
 
     @code.each (i, block) ->
@@ -222,7 +234,7 @@ class App.ChannelChat extends App.Controller
   renderDemoWebsite: (data) =>
     imageSource = data['data_url']
 
-    if imageSource 
+    if imageSource
       @screenshot.attr 'src', imageSource
       @iframe.attr('src', '')
       @website.attr('data-mode', 'screenshot')
@@ -236,7 +248,7 @@ class App.ChannelChat extends App.Controller
     palette = _.map palette, tinycolor
 
     # filter white
-    palette = _.filter palette, (color) =>
+    palette = _.filter palette, (color) ->
       color.getLuminance() < 0.85
 
     htmlString = ''
@@ -347,4 +359,4 @@ class App.ChannelChat extends App.Controller
     @paramsBlock.each (i, block) ->
       hljs.highlightBlock block
 
-App.Config.set( 'Chat Widget', { prio: 4000, name: 'Chat Widget', parent: '#channels', target: '#channels/chat', controller: App.ChannelChat, role: ['Admin'] }, 'NavBarAdmin' )
+App.Config.set( 'Chat', { prio: 4000, name: 'Chat', parent: '#channels', target: '#channels/chat', controller: App.ChannelChat, role: ['Admin'] }, 'NavBarAdmin' )
diff --git a/app/assets/javascripts/app/views/channel/chat.jst.eco b/app/assets/javascripts/app/views/channel/chat.jst.eco
index b3c1832dc..8ba0c8436 100644
--- a/app/assets/javascripts/app/views/channel/chat.jst.eco
+++ b/app/assets/javascripts/app/views/channel/chat.jst.eco
@@ -11,6 +11,7 @@
   <table class="settings-list">
     <thead>
       <tr>
+        <th style="white-space: nowrap;"><%- @T('chatId') %></th>
         <th style="white-space: nowrap;"><%- @T('Name') %></th>
         <th style="white-space: nowrap;"><%- @T('Note') %></th>
         <th style="white-space: nowrap;"><%- @T('Max. clients in waitlist') %></th>
@@ -20,6 +21,10 @@
     <tbody>
   <% for chat in @chats: %>
       <tr data-id="<%= chat.id %>">
+        <td>
+          <label class="inline-label">
+            <%= chat.id %>
+          </label>
         <td>
           <label class="inline-label">
             <a class="js-edit is-clickable"><%= chat.name %></a>
@@ -40,7 +45,7 @@
           </div>
   <% end %>
       <tr>
-        <td colspan="4" class="settings-list-action-cell js-add">
+        <td colspan="5" class="settings-list-action-cell js-add">
           <%- @Icon('plus-small') %> <%- @T('Add') %>
     </tbody>
   </table>
@@ -62,7 +67,7 @@
   <div class="browser chat-demo js-browser">
     <form class="browser-head js-demo-head" novalidate>
       <div class="browser-input">
-        <input type="url" class="js-testurl-input" id="preview-iframe" placeholder="zammad.org">
+        <input type="url" class="js-testurl-input" id="preview-iframe" value="<%= @previewUrl %>" placeholder="www.zammad.org">
         <div class="loading icon small muted"></div>
       </div>
       <input type="submit" class="btn" value="<%- @T('Load') %>">
diff --git a/public/assets/chat/chat.coffee b/public/assets/chat/chat.coffee
index a3888f6cc..26ad26fec 100644
--- a/public/assets/chat/chat.coffee
+++ b/public/assets/chat/chat.coffee
@@ -14,6 +14,9 @@ do($ = window.jQuery, window) ->
       host: ''
       debug: false
       flat: false
+      lang: undefined,
+      cssAutoload: true,
+      cssUrl: undefined,
       fontSize: undefined
       buttonClass: 'open-zammad-chat'
       inactiveClass: 'is-inactive'
@@ -31,30 +34,37 @@ do($ = window.jQuery, window) ->
     state: 'offline'
     initialQueueDelay: 10000
     wsReconnectEnable: true
-    strings:
-      'Online': 'Online'
-      'Offline': 'Offline'
-      'Connecting': 'Verbinden'
-      'Connection re-established': 'Verbindung wiederhergestellt'
-      'Today': 'Heute'
-      'Send': 'Senden'
-      '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'
+    translations:
+      de:
+        '<strong>Chat</strong> with us!': '<strong>Chat</strong> mit uns!'
+        'Online': 'Online'
+        'Online': 'Online'
+        'Offline': 'Offline'
+        'Connecting': 'Verbinden'
+        'Connection re-established': 'Verbindung wiederhergestellt'
+        'Today': 'Heute'
+        'Send': 'Senden'
+        '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...) =>
-      if !@strings[string]
-        @log 'notice', "Translation needed for '#{string}'"
-      translation = @strings[string] || string
+      if @options.lang && @options.lang isnt 'en'
+        if !@translations[@options.lang]
+          @log 'notice', "Translation '#{@options.lang}' needed!"
+        else
+          translations = @translations[@options.lang]
+          if !translations[string]
+            @log 'notice', "Translation needed for '#{string}'"
+          string = translations[string] || string
       if items
         for item in items
-          translation = translation.replace(/%s/, item)
-
-      translation
+          string = string.replace(/%s/, item)
+      string
 
     log: (level, string...) =>
       return if !@options.debug && level is 'debug'
@@ -80,12 +90,18 @@ do($ = window.jQuery, window) ->
         @state = 'unsupported'
         @log 'notice', 'Chat: Browser not supported!'
         return
-
       if !@options.chatId
         @state = 'unsupported'
         @log 'error', 'Chat: need chatId as option!'
         return
 
+      # detect language
+      if !@options.lang
+        @options.lang = $('html').attr('lang')
+      if @options.lang
+        @options.lang = @options.lang.replace(/-.+?$/, '') # replace "-xx" of xx-xx
+        @log 'debug', "lang: #{@options.lang}"
+
       @el = $(@view('chat')(
         title: @options.title
       ))
@@ -105,6 +121,8 @@ do($ = window.jQuery, window) ->
 
       @wsConnect()
 
+      @loadCss()
+
     checkForEnter: (event) =>
       if not event.shiftKey and event.keyCode is 13
         event.preventDefault()
@@ -548,4 +566,21 @@ do($ = window.jQuery, window) ->
         .attr('data-status', state)
         .text @T(capitalizedState)
 
+    loadCss: ->
+      return if !@options.cssAutoload
+      url = @options.cssUrl
+      if !url
+        url = @options.host
+          .replace(/^wss/i, 'https')
+          .replace(/^ws/i, 'http')
+          .replace(/\/ws/i, '')
+        url += '/assets/chat/chat.css'
+
+      @log 'debug', "load css from '#{url}'"
+      styles = "@import url('#{url}');"
+      newSS = document.createElement('link')
+      newSS.rel = 'stylesheet'
+      newSS.href = 'data:text/css,' + escape(styles)
+      document.getElementsByTagName('head')[0].appendChild(newSS)
+
   window.ZammadChat = ZammadChat
diff --git a/public/assets/chat/chat.js b/public/assets/chat/chat.js
index 1ee1af423..8508350e5 100644
--- a/public/assets/chat/chat.js
+++ b/public/assets/chat/chat.js
@@ -1,64 +1,3 @@
-if (!window.zammadChatTemplates) {
-  window.zammadChatTemplates = {};
-}
-window.zammadChatTemplates["agent"] = function (__obj) {
-  if (!__obj) __obj = {};
-  var __out = [], __capture = function(callback) {
-    var out = __out, result;
-    __out = [];
-    callback.call(this);
-    result = __out.join('');
-    __out = out;
-    return __safe(result);
-  }, __sanitize = function(value) {
-    if (value && value.ecoSafe) {
-      return value;
-    } else if (typeof value !== 'undefined' && value != null) {
-      return __escape(value);
-    } else {
-      return '';
-    }
-  }, __safe, __objSafe = __obj.safe, __escape = __obj.escape;
-  __safe = __obj.safe = function(value) {
-    if (value && value.ecoSafe) {
-      return value;
-    } else {
-      if (!(typeof value !== 'undefined' && value != null)) value = '';
-      var result = new String(value);
-      result.ecoSafe = true;
-      return result;
-    }
-  };
-  if (!__escape) {
-    __escape = __obj.escape = function(value) {
-      return ('' + value)
-        .replace(/&/g, '&amp;')
-        .replace(/</g, '&lt;')
-        .replace(/>/g, '&gt;')
-        .replace(/"/g, '&quot;');
-    };
-  }
-  (function() {
-    (function() {
-      if (this.agent.avatar) {
-        __out.push('\n<img class="zammad-chat-agent-avatar" src="');
-        __out.push(__sanitize(this.agent.avatar));
-        __out.push('">\n');
-      }
-    
-      __out.push('\n<span class="zammad-chat-agent-sentence">\n  <span class="zammad-chat-agent-name">');
-    
-      __out.push(__sanitize(this.agent.name));
-    
-      __out.push('</span>\n</span>');
-    
-    }).call(this);
-    
-  }).call(__obj);
-  __obj.safe = __objSafe, __obj.escape = __escape;
-  return __out.join('');
-};
-
 var bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; },
   slice = [].slice;
 
@@ -75,6 +14,9 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
       host: '',
       debug: false,
       flat: false,
+      lang: void 0,
+      cssAutoload: true,
+      cssUrl: void 0,
       fontSize: void 0,
       buttonClass: 'open-zammad-chat',
       inactiveClass: 'is-inactive',
@@ -105,37 +47,48 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
 
     ZammadChat.prototype.wsReconnectEnable = true;
 
-    ZammadChat.prototype.strings = {
-      'Online': 'Online',
-      'Offline': 'Offline',
-      'Connecting': 'Verbinden',
-      'Connection re-established': 'Verbindung wiederhergestellt',
-      'Today': 'Heute',
-      'Send': 'Senden',
-      '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'
+    ZammadChat.prototype.translations = {
+      de: {
+        '<strong>Chat</strong> with us!': '<strong>Chat</strong> mit uns!',
+        'Online': 'Online',
+        'Online': 'Online',
+        'Offline': 'Offline',
+        'Connecting': 'Verbinden',
+        'Connection re-established': 'Verbindung wiederhergestellt',
+        'Today': 'Heute',
+        'Send': 'Senden',
+        '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'
+      }
     };
 
     ZammadChat.prototype.sessionId = void 0;
 
     ZammadChat.prototype.T = function() {
-      var i, item, items, len, string, translation;
+      var i, item, items, len, string, translations;
       string = arguments[0], items = 2 <= arguments.length ? slice.call(arguments, 1) : [];
-      if (!this.strings[string]) {
-        this.log('notice', "Translation needed for '" + string + "'");
+      if (this.options.lang && this.options.lang !== 'en') {
+        if (!this.translations[this.options.lang]) {
+          this.log('notice', "Translation '" + this.options.lang + "' needed!");
+        } else {
+          translations = this.translations[this.options.lang];
+          if (!translations[string]) {
+            this.log('notice', "Translation needed for '" + string + "'");
+          }
+          string = translations[string] || string;
+        }
       }
-      translation = this.strings[string] || string;
       if (items) {
         for (i = 0, len = items.length; i < len; i++) {
           item = items[i];
-          translation = translation.replace(/%s/, item);
+          string = string.replace(/%s/, item);
         }
       }
-      return translation;
+      return string;
     };
 
     ZammadChat.prototype.log = function() {
@@ -205,6 +158,13 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
         this.log('error', 'Chat: need chatId as option!');
         return;
       }
+      if (!this.options.lang) {
+        this.options.lang = $('html').attr('lang');
+      }
+      if (this.options.lang) {
+        this.options.lang = this.options.lang.replace(/-.+?$/, '');
+        this.log('debug', "lang: " + this.options.lang);
+      }
       this.el = $(this.view('chat')({
         title: this.options.title
       }));
@@ -219,6 +179,7 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
         input: this.onInput
       });
       this.wsConnect();
+      this.loadCss();
     }
 
     ZammadChat.prototype.checkForEnter = function(event) {
@@ -730,12 +691,91 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
       return this.el.find('.zammad-chat-agent-status').attr('data-status', state).text(this.T(capitalizedState));
     };
 
+    ZammadChat.prototype.loadCss = function() {
+      var newSS, styles, url;
+      if (!this.options.cssAutoload) {
+        return;
+      }
+      url = this.options.cssUrl;
+      if (!url) {
+        url = this.options.host.replace(/^wss/i, 'https').replace(/^ws/i, 'http').replace(/\/ws/i, '');
+        url += '/assets/chat/chat.css';
+      }
+      this.log('debug', "load css from '" + url + "'");
+      styles = "@import url('" + url + "');";
+      newSS = document.createElement('link');
+      newSS.rel = 'stylesheet';
+      newSS.href = 'data:text/css,' + escape(styles);
+      return document.getElementsByTagName('head')[0].appendChild(newSS);
+    };
+
     return ZammadChat;
 
   })();
   return window.ZammadChat = ZammadChat;
 })(window.jQuery, window);
 
+if (!window.zammadChatTemplates) {
+  window.zammadChatTemplates = {};
+}
+window.zammadChatTemplates["agent"] = function (__obj) {
+  if (!__obj) __obj = {};
+  var __out = [], __capture = function(callback) {
+    var out = __out, result;
+    __out = [];
+    callback.call(this);
+    result = __out.join('');
+    __out = out;
+    return __safe(result);
+  }, __sanitize = function(value) {
+    if (value && value.ecoSafe) {
+      return value;
+    } else if (typeof value !== 'undefined' && value != null) {
+      return __escape(value);
+    } else {
+      return '';
+    }
+  }, __safe, __objSafe = __obj.safe, __escape = __obj.escape;
+  __safe = __obj.safe = function(value) {
+    if (value && value.ecoSafe) {
+      return value;
+    } else {
+      if (!(typeof value !== 'undefined' && value != null)) value = '';
+      var result = new String(value);
+      result.ecoSafe = true;
+      return result;
+    }
+  };
+  if (!__escape) {
+    __escape = __obj.escape = function(value) {
+      return ('' + value)
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;');
+    };
+  }
+  (function() {
+    (function() {
+      if (this.agent.avatar) {
+        __out.push('\n<img class="zammad-chat-agent-avatar" src="');
+        __out.push(__sanitize(this.agent.avatar));
+        __out.push('">\n');
+      }
+    
+      __out.push('\n<span class="zammad-chat-agent-sentence">\n  <span class="zammad-chat-agent-name">');
+    
+      __out.push(__sanitize(this.agent.name));
+    
+      __out.push('</span>\n</span>');
+    
+    }).call(this);
+    
+  }).call(__obj);
+  __obj.safe = __objSafe, __obj.escape = __escape;
+  return __out.join('');
+};
+
 /*!
  * ----------------------------------------------------------------------------
  * "THE BEER-WARE LICENSE" (Revision 42):
@@ -875,7 +915,7 @@ window.zammadChatTemplates["chat"] = function (__obj) {
     
       __out.push('>\n    <div class="zammad-chat-header-controls">\n      <span class="zammad-chat-agent-status zammad-chat-is-hidden" data-status="online"></span>\n      <span class="zammad-chat-header-icon">\n        <svg class="zammad-chat-header-icon-open" viewBox="0 0 13 7"><path d="M10.807 7l1.4-1.428-5-4.9L6.5-.02l-.7.7-4.9 4.9 1.414 1.413L6.5 2.886 10.807 7z" fill-rule="evenodd"/></svg>\n        <svg class="zammad-chat-header-icon-close js-chat-close" viewBox="0 0 13 13"><path d="m2.241.12l-2.121 2.121 4.243 4.243-4.243 4.243 2.121 2.121 4.243-4.243 4.243 4.243 2.121-2.121-4.243-4.243 4.243-4.243-2.121-2.121-4.243 4.243-4.243-4.243" fill-rule="evenodd"/></svg>\n      </span>\n    </div>\n    <div class="zammad-chat-agent zammad-chat-is-hidden">\n    </div>\n    <div class="zammad-chat-welcome">\n      <svg class="zammad-chat-icon" viewBox="0 0 24 24"><path d="M2 5C2 4 3 3 4 3h16c1 0 2 1 2 2v10C22 16 21 17 20 17H4C3 17 2 16 2 15V5zM12 17l6 4v-4h-6z" fill-rule="evenodd"/></svg>\n      <span class="zammad-chat-welcome-text">');
     
-      __out.push(this.title);
+      __out.push(this.T(this.title));
     
       __out.push('</span>\n    </div>\n  </div>\n  <div class="zammad-chat-body"></div>\n  <form class="zammad-chat-controls">\n    <textarea class="zammad-chat-input" rows="1" placeholder="');
     
diff --git a/public/assets/chat/chat.min.js b/public/assets/chat/chat.min.js
index 4651c28da..d3d606290 100644
--- a/public/assets/chat/chat.min.js
+++ b/public/assets/chat/chat.min.js
@@ -1 +1 @@
-window.zammadChatTemplates||(window.zammadChatTemplates={}),window.zammadChatTemplates.agent=function(t){t||(t={});var e,s=[],n=function(t){return t&&t.ecoSafe?t:"undefined"!=typeof t&&null!=t?a(t):""},i=t.safe,a=t.escape;return e=t.safe=function(t){if(t&&t.ecoSafe)return t;("undefined"==typeof t||null==t)&&(t="");var e=new String(t);return e.ecoSafe=!0,e},a||(a=t.escape=function(t){return(""+t).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;")}),function(){(function(){this.agent.avatar&&(s.push('\n<img class="zammad-chat-agent-avatar" src="'),s.push(n(this.agent.avatar)),s.push('">\n')),s.push('\n<span class="zammad-chat-agent-sentence">\n  <span class="zammad-chat-agent-name">'),s.push(n(this.agent.name)),s.push("</span>\n</span>")}).call(this)}.call(t),t.safe=i,t.escape=a,s.join("")};var bind=function(t,e){return function(){return t.apply(e,arguments)}},slice=[].slice;!function(t,e){var s,n,i,a;return a=document.getElementsByTagName("script"),n=a[a.length-1],i=n.src.match(".*://([^:/]*).*")[1],s=function(){function s(s){return this.setAgentOnlineState=bind(this.setAgentOnlineState,this),this.onConnectionEstablished=bind(this.onConnectionEstablished,this),this.setSessionId=bind(this.setSessionId,this),this.onConnectionReestablished=bind(this.onConnectionReestablished,this),this.reconnect=bind(this.reconnect,this),this.onWebSocketOpen=bind(this.onWebSocketOpen,this),this.wsReconnect=bind(this.wsReconnect,this),this.wsClose=bind(this.wsClose,this),this.wsConnect=bind(this.wsConnect,this),this.onAgentTypingEnd=bind(this.onAgentTypingEnd,this),this.onAgentTypingStart=bind(this.onAgentTypingStart,this),this.onQueue=bind(this.onQueue,this),this.onQueueScreen=bind(this.onQueueScreen,this),this.onCloseAnimationEnd=bind(this.onCloseAnimationEnd,this),this.closeWindow=bind(this.closeWindow,this),this.close=bind(this.close,this),this.open=bind(this.open,this),this.renderMessage=bind(this.renderMessage,this),this.receiveMessage=bind(this.receiveMessage,this),this.onSubmit=bind(this.onSubmit,this),this.onInput=bind(this.onInput,this),this.reopenSession=bind(this.reopenSession,this),this.onError=bind(this.onError,this),this.onReady=bind(this.onReady,this),this.onWebSocketMessage=bind(this.onWebSocketMessage,this),this.send=bind(this.send,this),this.checkForEnter=bind(this.checkForEnter,this),this.view=bind(this.view,this),this.log=bind(this.log,this),this.T=bind(this.T,this),this.options=t.extend({},this.defaults,s),e.WebSocket&&sessionStorage?this.options.chatId?(this.el=t(this.view("chat")({title:this.options.title})),this.options.target.append(this.el),this.input=this.el.find(".zammad-chat-input"),t("."+this.options.buttonClass).addClass(this.inactiveClass),this.el.find(".js-chat-open").click(this.open),this.el.find(".js-chat-close").click(this.close),this.el.find(".zammad-chat-controls").on("submit",this.onSubmit),this.input.on({keydown:this.checkForEnter,input:this.onInput}),void this.wsConnect()):(this.state="unsupported",void this.log("error","Chat: need chatId as option!")):(this.state="unsupported",void this.log("notice","Chat: Browser not supported!"))}return s.prototype.defaults={chatId:void 0,show:!0,target:t("body"),host:"",debug:!1,flat:!1,fontSize:void 0,buttonClass:"open-zammad-chat",inactiveClass:"is-inactive",title:"<strong>Chat</strong> with us!"},s.prototype._messageCount=0,s.prototype.isOpen=!0,s.prototype.blinkOnlineInterval=null,s.prototype.stopBlinOnlineStateTimeout=null,s.prototype.showTimeEveryXMinutes=1,s.prototype.lastTimestamp=null,s.prototype.lastAddedType=null,s.prototype.inputTimeout=null,s.prototype.isTyping=!1,s.prototype.state="offline",s.prototype.initialQueueDelay=1e4,s.prototype.wsReconnectEnable=!0,s.prototype.strings={Online:"Online",Offline:"Offline",Connecting:"Verbinden","Connection re-established":"Verbindung wiederhergestellt",Today:"Heute",Send:"Senden","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"},s.prototype.sessionId=void 0,s.prototype.T=function(){var t,e,s,n,i,a;if(i=arguments[0],s=2<=arguments.length?slice.call(arguments,1):[],this.strings[i]||this.log("notice","Translation needed for '"+i+"'"),a=this.strings[i]||i,s)for(t=0,n=s.length;n>t;t++)e=s[t],a=a.replace(/%s/,e);return a},s.prototype.log=function(){var t,e;return t=arguments[0],e=2<=arguments.length?slice.call(arguments,1):[],this.options.debug||"debug"!==t?(e.unshift(t),console.log.apply(console,e)):void 0},s.prototype.view=function(t){return function(s){return function(n){return n||(n={}),n.T=s.T,n.background=s.options.background,n.flat=s.options.flat,n.fontSize=s.options.fontSize,e.zammadChatTemplates[t](n)}}(this)},s.prototype.checkForEnter=function(t){return t.shiftKey||13!==t.keyCode?void 0:(t.preventDefault(),this.sendMessage())},s.prototype.send=function(t,e){var s;return null==e&&(e={}),e.chat_id=this.options.chatId,this.log("debug","ws:send",t,e),s=JSON.stringify({event:t,data:e}),this.ws.send(s)},s.prototype.onWebSocketMessage=function(t){var e,s,n,i;for(i=JSON.parse(t.data),e=0,s=i.length;s>e;e++)switch(n=i[e],this.log("debug","ws:onmessage",n),n.event){case"chat_error":this.log("error",n.data);break;case"chat_session_message":if(n.data.self_written)return;this.receiveMessage(n.data);break;case"chat_session_typing":if(n.data.self_written)return;this.onAgentTypingStart();break;case"chat_session_start":this.onConnectionEstablished(n.data);break;case"chat_session_queue":this.onQueueScreen(n.data);break;case"chat_session_closed":this.onSessionClosed(n.data);break;case"chat_session_left":this.onSessionClosed(n.data);break;case"chat_status_customer":switch(n.data.state){case"online":this.sessionId=void 0,this.onReady(),this.log("debug","Zammad Chat: ready");break;case"offline":this.onError("Zammad Chat: No agent online"),this.state="off",this.hide(),this.wsClose();break;case"chat_disabled":this.onError("Zammad Chat: Chat is disabled"),this.state="off",this.hide(),this.wsClose();break;case"no_seats_available":this.onError("Zammad Chat: Too many clients in queue. Clients in queue: "+n.data.queue),this.state="off",this.hide(),this.wsClose();break;case"reconnect":this.log("debug","old messages",n.data.session),this.reopenSession(n.data)}}},s.prototype.onReady=function(){return t("."+this.options.buttonClass).click(this.open).removeClass(this.inactiveClass),this.options.show?this.show():void 0},s.prototype.onError=function(e){return this.log("debug",e),t("."+this.options.buttonClass).hide()},s.prototype.reopenSession=function(t){var e,s,n,i,a;if(a=sessionStorage.getItem("unfinished_message"),t.agent){for(this.onConnectionEstablished(t),i=t.session,e=0,s=i.length;s>e;e++)n=i[e],this.renderMessage({message:n.content,id:n.id,from:n.created_by_id?"agent":"customer"});a&&this.input.val(a)}return t.position&&this.onQueue(t),this.show(),this.open(),this.scrollToBottom(),a?this.input.focus():void 0},s.prototype.onInput=function(){return this.el.find(".zammad-chat-message--unread").removeClass("zammad-chat-message--unread"),sessionStorage.setItem("unfinished_message",this.input.val()),this.onTyping()},s.prototype.onTyping=function(){return this.isTyping&&this.isTyping>new Date((new Date).getTime()-1500)?void 0:(this.isTyping=new Date,this.send("chat_session_typing",{session_id:this.sessionId}))},s.prototype.onSubmit=function(t){return t.preventDefault(),this.sendMessage()},s.prototype.sendMessage=function(){var t,e;return(t=this.input.val())?(sessionStorage.removeItem("unfinished_message"),e=this.view("message")({message:t,from:"customer",id:this._messageCount++}),this.maybeAddTimestamp(),this.el.find(".zammad-chat-message--typing").size()?(this.lastAddedType="typing-placeholder",this.el.find(".zammad-chat-message--typing").before(e)):(this.lastAddedType="message--customer",this.el.find(".zammad-chat-body").append(e)),this.input.val(""),this.scrollToBottom(),this.send("chat_session_message",{content:t,id:this._messageCount,session_id:this.sessionId})):void 0},s.prototype.receiveMessage=function(t){return this.onAgentTypingEnd(),this.maybeAddTimestamp(),this.renderMessage({message:t.message.content,id:t.id,from:"agent"})},s.prototype.renderMessage=function(t){var e,s;return this.lastAddedType="message--"+t.from,s=null!=(e=document.hidden)?e:{" zammad-chat-message--unread":""},this.el.find(".zammad-chat-body").append(this.view("message")(t)),this.scrollToBottom()},s.prototype.open=function(){return this.isOpen&&this.show(),this.sessionId||this.showLoader(),this.el.addClass("zammad-chat-is-open"),this.sessionId?(this.el.css("bottom",0),this.onOpenAnimationEnd()):this.el.animate({bottom:0},500,this.onOpenAnimationEnd),this.isOpen=!0,this.sessionId?void 0:this.session_init()},s.prototype.onOpenAnimationEnd=function(){},s.prototype.close=function(t){return"off"===this.state||"unsupported"===this.state?this.state:(t&&t.stopPropagation(),this.sessionId?(this.onInitialQueueDelayId&&clearTimeout(this.onInitialQueueDelayId),this.closeWindow()):void 0)},s.prototype.closeWindow=function(){var t;return this.el.removeClass("zammad-chat-is-open"),t=this.el.height()-this.el.find(".zammad-chat-header").outerHeight(),this.el.animate({bottom:-t},500,this.onCloseAnimationEnd)},s.prototype.onCloseAnimationEnd=function(){return this.el.removeClass("zammad-chat-is-visible"),this.disconnect(),this.isOpen=!1,this.send("chat_session_close",{session_id:this.sessionId}),this.setSessionId(void 0),sessionStorage.removeItem("unfinished_message"),this.onWebSocketOpen()},s.prototype.hide=function(){return this.el.removeClass("zammad-chat-is-shown")},s.prototype.show=function(){var t;return"off"===this.state||"unsupported"===this.state?this.state:(this.el.addClass("zammad-chat-is-shown"),this.inputInitialized||(this.inputInitialized=!0,this.input.autoGrow({extraLine:!1})),t=this.el.height()-this.el.find(".zammad-chat-header").outerHeight(),this.el.css("bottom",-t))},s.prototype.disableInput=function(){return this.input.prop("disabled",!0),this.el.find(".zammad-chat-send").prop("disabled",!0)},s.prototype.enableInput=function(){return this.input.prop("disabled",!1),this.el.find(".zammad-chat-send").prop("disabled",!1)},s.prototype.onQueueScreen=function(t){var e;return this.setSessionId(t.session_id),e=function(e){return function(){return e.onQueue(t)}}(this),this.initialQueueDelay&&!this.onInitialQueueDelayId?void(this.onInitialQueueDelayId=setTimeout(e,this.initialQueueDelay)):(this.onInitialQueueDelayId&&clearTimeout(this.onInitialQueueDelayId),e())},s.prototype.onQueue=function(t){return this.log("notice","onQueue",t.position),this.inQueue=!0,this.el.find(".zammad-chat-body").html(this.view("waiting")({position:t.position}))},s.prototype.onAgentTypingStart=function(){return this.stopTypingId&&clearTimeout(this.stopTypingId),this.stopTypingId=setTimeout(this.onAgentTypingEnd,3e3),this.el.find(".zammad-chat-message--typing").size()?void 0:(this.maybeAddTimestamp(),this.el.find(".zammad-chat-body").append(this.view("typingIndicator")()),this.scrollToBottom())},s.prototype.onAgentTypingEnd=function(){return this.el.find(".zammad-chat-message--typing").remove()},s.prototype.maybeAddTimestamp=function(){var t,e,s;return s=Date.now(),!this.lastTimestamp||s-this.lastTimestamp>6e4*this.showTimeEveryXMinutes?(t=this.T("Today"),e=(new Date).toTimeString().substr(0,5),"timestamp"===this.lastAddedType?(this.updateLastTimestamp(t,e),this.lastTimestamp=s):(this.el.find(".zammad-chat-body").append(this.view("timestamp")({label:t,time:e})),this.lastTimestamp=s,this.lastAddedType="timestamp",this.scrollToBottom())):void 0},s.prototype.updateLastTimestamp=function(t,e){return this.el.find(".zammad-chat-body").find(".zammad-chat-timestamp").last().replaceWith(this.view("timestamp")({label:t,time:e}))},s.prototype.addStatus=function(t){return this.maybeAddTimestamp(),this.el.find(".zammad-chat-body").append(this.view("status")({status:t})),this.scrollToBottom()},s.prototype.scrollToBottom=function(){return this.el.find(".zammad-chat-body").scrollTop(t(".zammad-chat-body").prop("scrollHeight"))},s.prototype.session_init=function(){return this.send("chat_session_init")},s.prototype.detectHost=function(){var t;return t="ws://","https:"===e.location.protocol&&(t="wss://"),this.options.host=""+t+i+"/ws"},s.prototype.wsConnect=function(){return this.options.host||this.detectHost(),this.log("debug","Connecting to "+this.options.host),this.ws=new e.WebSocket(""+this.options.host),this.ws.onopen=this.onWebSocketOpen,this.ws.onmessage=this.onWebSocketMessage,this.ws.onclose=function(t){return function(e){return t.log("debug","close websocket connection"),t.wsReconnectEnable?t.reconnect():void 0}}(this),this.ws.onerror=function(t){return function(e){return t.log("debug","ws:onerror",e)}}(this)},s.prototype.wsClose=function(){return this.wsReconnectEnable=!1,this.ws.close()},s.prototype.wsReconnect=function(){return this.reconnectDelayId&&clearTimeout(this.reconnectDelayId),this.reconnectDelayId=setTimeout(this.wsConnect,5e3)},s.prototype.onWebSocketOpen=function(){return this.sessionId=sessionStorage.getItem("sessionId"),this.log("debug","ws connected"),this.send("chat_status_customer",{session_id:this.sessionId}),this.setAgentOnlineState("online")},s.prototype.reconnect=function(){return this.log("notice","reconnecting"),this.disableInput(),this.lastAddedType="status",this.setAgentOnlineState("connecting"),this.addStatus(this.T("Connection lost")),this.wsReconnect()},s.prototype.onConnectionReestablished=function(){return this.lastAddedType="status",this.setAgentOnlineState("online"),this.addStatus(this.T("Connection re-established"))},s.prototype.onSessionClosed=function(t){return this.addStatus(this.T("Chat closed by %s",t.realname)),this.disableInput(),this.setAgentOnlineState("offline")},s.prototype.disconnect=function(){return this.showLoader(),this.el.find(".zammad-chat-welcome").removeClass("zammad-chat-is-hidden"),this.el.find(".zammad-chat-agent").addClass("zammad-chat-is-hidden"),this.el.find(".zammad-chat-agent-status").addClass("zammad-chat-is-hidden")},s.prototype.setSessionId=function(t){return this.sessionId=t,void 0===t?sessionStorage.removeItem("sessionId"):sessionStorage.setItem("sessionId",t)},s.prototype.onConnectionEstablished=function(t){return this.onInitialQueueDelayId&&clearTimeout(this.onInitialQueueDelayId),this.inQueue=!1,t.agent&&(this.agent=t.agent),t.session_id&&this.setSessionId(t.session_id),this.el.find(".zammad-chat-agent").html(this.view("agent")({agent:this.agent})),this.enableInput(),this.el.find(".zammad-chat-body").empty(),this.el.find(".zammad-chat-welcome").addClass("zammad-chat-is-hidden"),this.el.find(".zammad-chat-agent").removeClass("zammad-chat-is-hidden"),this.el.find(".zammad-chat-agent-status").removeClass("zammad-chat-is-hidden"),this.input.focus(),this.setAgentOnlineState("online")},s.prototype.showTimeout=function(){return this.el.find(".zammad-chat-body").html(this.view("timeout")({agent:this.agent.name,delay:10,unit:this.T("minutes")}))},s.prototype.showLoader=function(){return this.el.find(".zammad-chat-body").html(this.view("loader")())},s.prototype.setAgentOnlineState=function(t){var e;return this.state=t,e=t.charAt(0).toUpperCase()+t.slice(1),this.el.find(".zammad-chat-agent-status").attr("data-status",t).text(this.T(e))},s}(),e.ZammadChat=s}(window.jQuery,window),jQuery.fn.autoGrow=function(t){return this.each(function(){var e=jQuery.extend({extraLine:!0},t),s=function(t){return jQuery(t).after('<div class="autogrow-textarea-mirror"></div>'),jQuery(t).next(".autogrow-textarea-mirror")[0]},n=function(t){a.innerHTML=String(t.value).replace(/&/g,"&amp;").replace(/"/g,"&quot;").replace(/'/g,"&#39;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/ /g,"&nbsp;").replace(/\n/g,"<br />")+(e.extraLine?".<br/>.":""),jQuery(t).height()!=jQuery(a).height()&&jQuery(t).height(jQuery(a).height())},i=function(){n(this)},a=s(this);a.style.display="none",a.style.wordWrap="break-word",a.style.whiteSpace="normal",a.style.padding=jQuery(this).css("paddingTop")+" "+jQuery(this).css("paddingRight")+" "+jQuery(this).css("paddingBottom")+" "+jQuery(this).css("paddingLeft"),a.style.width=jQuery(this).css("width"),a.style.fontFamily=jQuery(this).css("font-family"),a.style.fontSize=jQuery(this).css("font-size"),a.style.lineHeight=jQuery(this).css("line-height"),this.style.overflow="hidden",this.style.minHeight=this.rows+"em",this.onkeyup=i,n(this)})},window.zammadChatTemplates||(window.zammadChatTemplates={}),window.zammadChatTemplates.chat=function(t){t||(t={});var e,s=[],n=function(t){return t&&t.ecoSafe?t:"undefined"!=typeof t&&null!=t?a(t):""},i=t.safe,a=t.escape;return e=t.safe=function(t){if(t&&t.ecoSafe)return t;("undefined"==typeof t||null==t)&&(t="");var e=new String(t);return e.ecoSafe=!0,e},a||(a=t.escape=function(t){return(""+t).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;")}),function(){(function(){s.push('<div class="zammad-chat'),this.flat&&s.push(n(" zammad-chat--flat")),s.push('"'),this.fontSize&&s.push(n(" style='font-size: "+this.fontSize+"'")),s.push('>\n  <div class="zammad-chat-header js-chat-open"'),this.background&&s.push(n(" style='background: "+this.background+"'")),s.push('>\n    <div class="zammad-chat-header-controls">\n      <span class="zammad-chat-agent-status zammad-chat-is-hidden" data-status="online"></span>\n      <span class="zammad-chat-header-icon">\n        <svg class="zammad-chat-header-icon-open" viewBox="0 0 13 7"><path d="M10.807 7l1.4-1.428-5-4.9L6.5-.02l-.7.7-4.9 4.9 1.414 1.413L6.5 2.886 10.807 7z" fill-rule="evenodd"/></svg>\n        <svg class="zammad-chat-header-icon-close js-chat-close" viewBox="0 0 13 13"><path d="m2.241.12l-2.121 2.121 4.243 4.243-4.243 4.243 2.121 2.121 4.243-4.243 4.243 4.243 2.121-2.121-4.243-4.243 4.243-4.243-2.121-2.121-4.243 4.243-4.243-4.243" fill-rule="evenodd"/></svg>\n      </span>\n    </div>\n    <div class="zammad-chat-agent zammad-chat-is-hidden">\n    </div>\n    <div class="zammad-chat-welcome">\n      <svg class="zammad-chat-icon" viewBox="0 0 24 24"><path d="M2 5C2 4 3 3 4 3h16c1 0 2 1 2 2v10C22 16 21 17 20 17H4C3 17 2 16 2 15V5zM12 17l6 4v-4h-6z" fill-rule="evenodd"/></svg>\n      <span class="zammad-chat-welcome-text">'),s.push(this.title),s.push('</span>\n    </div>\n  </div>\n  <div class="zammad-chat-body"></div>\n  <form class="zammad-chat-controls">\n    <textarea class="zammad-chat-input" rows="1" placeholder="'),s.push(this.T("Compose your message...")),s.push('"></textarea>\n    <button type="submit" class="zammad-chat-button zammad-chat-send"'),this.background&&s.push(n(" style='background: "+this.background+"'")),s.push(">"),s.push(this.T("Send")),s.push("</button>\n  </form>\n</div>")}).call(this)}.call(t),t.safe=i,t.escape=a,s.join("")},window.zammadChatTemplates||(window.zammadChatTemplates={}),window.zammadChatTemplates.loader=function(t){t||(t={});var e,s=[],n=t.safe,i=t.escape;return e=t.safe=function(t){if(t&&t.ecoSafe)return t;("undefined"==typeof t||null==t)&&(t="");var e=new String(t);return e.ecoSafe=!0,e},i||(i=t.escape=function(t){return(""+t).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;")}),function(){(function(){s.push('<div class="zammad-chat-modal">\n  <span class="zammad-chat-loading-animation">\n    <span class="zammad-chat-loading-circle"></span>\n    <span class="zammad-chat-loading-circle"></span>\n    <span class="zammad-chat-loading-circle"></span>\n  </span>\n  <span class="zammad-chat-modal-text">'),s.push(this.T("Connecting")),s.push("</span>\n</div>")}).call(this)}.call(t),t.safe=n,t.escape=i,s.join("")},window.zammadChatTemplates||(window.zammadChatTemplates={}),window.zammadChatTemplates.message=function(t){t||(t={});var e,s=[],n=function(t){return t&&t.ecoSafe?t:"undefined"!=typeof t&&null!=t?a(t):""},i=t.safe,a=t.escape;return e=t.safe=function(t){if(t&&t.ecoSafe)return t;("undefined"==typeof t||null==t)&&(t="");var e=new String(t);return e.ecoSafe=!0,e},a||(a=t.escape=function(t){return(""+t).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;")}),function(){(function(){s.push('<div class="zammad-chat-message zammad-chat-message--'),s.push(n(this.from)),s.push('">\n  <span class="zammad-chat-message-body"'),this.background&&"customer"===this.from&&s.push(n(" style='background: "+this.background+"'")),s.push(">"),s.push(this.message),s.push("</span>\n</div>")}).call(this)}.call(t),t.safe=i,t.escape=a,s.join("")},window.zammadChatTemplates||(window.zammadChatTemplates={}),window.zammadChatTemplates.status=function(t){t||(t={});var e,s=[],n=t.safe,i=t.escape;return e=t.safe=function(t){if(t&&t.ecoSafe)return t;("undefined"==typeof t||null==t)&&(t="");var e=new String(t);return e.ecoSafe=!0,e},i||(i=t.escape=function(t){return(""+t).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;")}),function(){(function(){s.push('<div class="zammad-chat-status">'),s.push(this.status),s.push("</div>")}).call(this)}.call(t),t.safe=n,t.escape=i,s.join("")},window.zammadChatTemplates||(window.zammadChatTemplates={}),window.zammadChatTemplates.timeout=function(t){t||(t={});var e,s=[],n=function(t){return t&&t.ecoSafe?t:"undefined"!=typeof t&&null!=t?a(t):""},i=t.safe,a=t.escape;return e=t.safe=function(t){if(t&&t.ecoSafe)return t;("undefined"==typeof t||null==t)&&(t="");var e=new String(t);return e.ecoSafe=!0,e},a||(a=t.escape=function(t){return(""+t).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;")}),function(){(function(){s.push('<div class="zammad-chat-modal">\n  <div class="zammad-chat-modal-text">\n    '),s.push(this.T("Since you didn't respond in the last %s your conversation with <strong>%s</strong> got closed.",this.delay+" "+this.unit,this.agent)),s.push('<br>\n    <div class="zammad-chat-button"'),this.background&&s.push(n(" style='background: "+this.background+"'")),s.push(">"),s.push(this.T("Start new conversation")),s.push("</div>\n  </div>\n</div>")}).call(this)}.call(t),t.safe=i,t.escape=a,s.join("")},window.zammadChatTemplates||(window.zammadChatTemplates={}),window.zammadChatTemplates.timestamp=function(t){t||(t={});var e,s=[],n=function(t){return t&&t.ecoSafe?t:"undefined"!=typeof t&&null!=t?a(t):""},i=t.safe,a=t.escape;return e=t.safe=function(t){if(t&&t.ecoSafe)return t;("undefined"==typeof t||null==t)&&(t="");var e=new String(t);return e.ecoSafe=!0,e},a||(a=t.escape=function(t){return(""+t).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;")}),function(){(function(){s.push('<div class="zammad-chat-timestamp"><strong>'),s.push(n(this.label)),s.push("</strong> "),s.push(n(this.time)),s.push("</div>")}).call(this)}.call(t),t.safe=i,t.escape=a,s.join("")},window.zammadChatTemplates||(window.zammadChatTemplates={}),window.zammadChatTemplates.typingIndicator=function(t){t||(t={});var e,s=[],n=t.safe,i=t.escape;return e=t.safe=function(t){if(t&&t.ecoSafe)return t;("undefined"==typeof t||null==t)&&(t="");var e=new String(t);return e.ecoSafe=!0,e},i||(i=t.escape=function(t){return(""+t).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;")}),function(){(function(){s.push('<div class="zammad-chat-message zammad-chat-message--typing zammad-chat-message--agent">\n  <span class="zammad-chat-message-body">\n    <span class="zammad-chat-loading-animation">\n      <span class="zammad-chat-loading-circle"></span>\n      <span class="zammad-chat-loading-circle"></span>\n      <span class="zammad-chat-loading-circle"></span>\n    </span>\n  </span>\n</div>')}).call(this)}.call(t),t.safe=n,t.escape=i,s.join("")},window.zammadChatTemplates||(window.zammadChatTemplates={}),window.zammadChatTemplates.waiting=function(t){t||(t={});var e,s=[],n=t.safe,i=t.escape;return e=t.safe=function(t){if(t&&t.ecoSafe)return t;("undefined"==typeof t||null==t)&&(t="");var e=new String(t);return e.ecoSafe=!0,e},i||(i=t.escape=function(t){return(""+t).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;")}),function(){(function(){s.push('<div class="zammad-chat-modal">\n  <div class="zammad-chat-modal-text">\n    <span class="zammad-chat-loading-animation">\n      <span class="zammad-chat-loading-circle"></span>\n      <span class="zammad-chat-loading-circle"></span>\n      <span class="zammad-chat-loading-circle"></span>\n    </span>\n    '),s.push(this.T("All colleges are busy.")),s.push("<br>\n    "),s.push(this.T("You are on waiting list position <strong>%s</strong>.",this.position)),s.push("\n  </div>\n</div>")}).call(this)}.call(t),t.safe=n,t.escape=i,s.join("")};
\ No newline at end of file
+var bind=function(t,e){return function(){return t.apply(e,arguments)}},slice=[].slice;!function(t,e){var s,n,i,a;return a=document.getElementsByTagName("script"),n=a[a.length-1],i=n.src.match(".*://([^:/]*).*")[1],s=function(){function s(s){return this.setAgentOnlineState=bind(this.setAgentOnlineState,this),this.onConnectionEstablished=bind(this.onConnectionEstablished,this),this.setSessionId=bind(this.setSessionId,this),this.onConnectionReestablished=bind(this.onConnectionReestablished,this),this.reconnect=bind(this.reconnect,this),this.onWebSocketOpen=bind(this.onWebSocketOpen,this),this.wsReconnect=bind(this.wsReconnect,this),this.wsClose=bind(this.wsClose,this),this.wsConnect=bind(this.wsConnect,this),this.onAgentTypingEnd=bind(this.onAgentTypingEnd,this),this.onAgentTypingStart=bind(this.onAgentTypingStart,this),this.onQueue=bind(this.onQueue,this),this.onQueueScreen=bind(this.onQueueScreen,this),this.onCloseAnimationEnd=bind(this.onCloseAnimationEnd,this),this.closeWindow=bind(this.closeWindow,this),this.close=bind(this.close,this),this.open=bind(this.open,this),this.renderMessage=bind(this.renderMessage,this),this.receiveMessage=bind(this.receiveMessage,this),this.onSubmit=bind(this.onSubmit,this),this.onInput=bind(this.onInput,this),this.reopenSession=bind(this.reopenSession,this),this.onError=bind(this.onError,this),this.onReady=bind(this.onReady,this),this.onWebSocketMessage=bind(this.onWebSocketMessage,this),this.send=bind(this.send,this),this.checkForEnter=bind(this.checkForEnter,this),this.view=bind(this.view,this),this.log=bind(this.log,this),this.T=bind(this.T,this),this.options=t.extend({},this.defaults,s),e.WebSocket&&sessionStorage?this.options.chatId?(this.options.lang||(this.options.lang=t("html").attr("lang")),this.options.lang&&(this.options.lang=this.options.lang.replace(/-.+?$/,""),this.log("debug","lang: "+this.options.lang)),this.el=t(this.view("chat")({title:this.options.title})),this.options.target.append(this.el),this.input=this.el.find(".zammad-chat-input"),t("."+this.options.buttonClass).addClass(this.inactiveClass),this.el.find(".js-chat-open").click(this.open),this.el.find(".js-chat-close").click(this.close),this.el.find(".zammad-chat-controls").on("submit",this.onSubmit),this.input.on({keydown:this.checkForEnter,input:this.onInput}),this.wsConnect(),void this.loadCss()):(this.state="unsupported",void this.log("error","Chat: need chatId as option!")):(this.state="unsupported",void this.log("notice","Chat: Browser not supported!"))}return s.prototype.defaults={chatId:void 0,show:!0,target:t("body"),host:"",debug:!1,flat:!1,lang:void 0,cssAutoload:!0,cssUrl:void 0,fontSize:void 0,buttonClass:"open-zammad-chat",inactiveClass:"is-inactive",title:"<strong>Chat</strong> with us!"},s.prototype._messageCount=0,s.prototype.isOpen=!0,s.prototype.blinkOnlineInterval=null,s.prototype.stopBlinOnlineStateTimeout=null,s.prototype.showTimeEveryXMinutes=1,s.prototype.lastTimestamp=null,s.prototype.lastAddedType=null,s.prototype.inputTimeout=null,s.prototype.isTyping=!1,s.prototype.state="offline",s.prototype.initialQueueDelay=1e4,s.prototype.wsReconnectEnable=!0,s.prototype.translations={de:{"<strong>Chat</strong> with us!":"<strong>Chat</strong> mit uns!",Online:"Online",Online:"Online",Offline:"Offline",Connecting:"Verbinden","Connection re-established":"Verbindung wiederhergestellt",Today:"Heute",Send:"Senden","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"}},s.prototype.sessionId=void 0,s.prototype.T=function(){var t,e,s,n,i,a;if(i=arguments[0],s=2<=arguments.length?slice.call(arguments,1):[],this.options.lang&&"en"!==this.options.lang&&(this.translations[this.options.lang]?(a=this.translations[this.options.lang],a[i]||this.log("notice","Translation needed for '"+i+"'"),i=a[i]||i):this.log("notice","Translation '"+this.options.lang+"' needed!")),s)for(t=0,n=s.length;n>t;t++)e=s[t],i=i.replace(/%s/,e);return i},s.prototype.log=function(){var t,e;return t=arguments[0],e=2<=arguments.length?slice.call(arguments,1):[],this.options.debug||"debug"!==t?(e.unshift(t),console.log.apply(console,e)):void 0},s.prototype.view=function(t){return function(s){return function(n){return n||(n={}),n.T=s.T,n.background=s.options.background,n.flat=s.options.flat,n.fontSize=s.options.fontSize,e.zammadChatTemplates[t](n)}}(this)},s.prototype.checkForEnter=function(t){return t.shiftKey||13!==t.keyCode?void 0:(t.preventDefault(),this.sendMessage())},s.prototype.send=function(t,e){var s;return null==e&&(e={}),e.chat_id=this.options.chatId,this.log("debug","ws:send",t,e),s=JSON.stringify({event:t,data:e}),this.ws.send(s)},s.prototype.onWebSocketMessage=function(t){var e,s,n,i;for(i=JSON.parse(t.data),e=0,s=i.length;s>e;e++)switch(n=i[e],this.log("debug","ws:onmessage",n),n.event){case"chat_error":this.log("error",n.data);break;case"chat_session_message":if(n.data.self_written)return;this.receiveMessage(n.data);break;case"chat_session_typing":if(n.data.self_written)return;this.onAgentTypingStart();break;case"chat_session_start":this.onConnectionEstablished(n.data);break;case"chat_session_queue":this.onQueueScreen(n.data);break;case"chat_session_closed":this.onSessionClosed(n.data);break;case"chat_session_left":this.onSessionClosed(n.data);break;case"chat_status_customer":switch(n.data.state){case"online":this.sessionId=void 0,this.onReady(),this.log("debug","Zammad Chat: ready");break;case"offline":this.onError("Zammad Chat: No agent online"),this.state="off",this.hide(),this.wsClose();break;case"chat_disabled":this.onError("Zammad Chat: Chat is disabled"),this.state="off",this.hide(),this.wsClose();break;case"no_seats_available":this.onError("Zammad Chat: Too many clients in queue. Clients in queue: "+n.data.queue),this.state="off",this.hide(),this.wsClose();break;case"reconnect":this.log("debug","old messages",n.data.session),this.reopenSession(n.data)}}},s.prototype.onReady=function(){return t("."+this.options.buttonClass).click(this.open).removeClass(this.inactiveClass),this.options.show?this.show():void 0},s.prototype.onError=function(e){return this.log("debug",e),t("."+this.options.buttonClass).hide()},s.prototype.reopenSession=function(t){var e,s,n,i,a;if(a=sessionStorage.getItem("unfinished_message"),t.agent){for(this.onConnectionEstablished(t),i=t.session,e=0,s=i.length;s>e;e++)n=i[e],this.renderMessage({message:n.content,id:n.id,from:n.created_by_id?"agent":"customer"});a&&this.input.val(a)}return t.position&&this.onQueue(t),this.show(),this.open(),this.scrollToBottom(),a?this.input.focus():void 0},s.prototype.onInput=function(){return this.el.find(".zammad-chat-message--unread").removeClass("zammad-chat-message--unread"),sessionStorage.setItem("unfinished_message",this.input.val()),this.onTyping()},s.prototype.onTyping=function(){return this.isTyping&&this.isTyping>new Date((new Date).getTime()-1500)?void 0:(this.isTyping=new Date,this.send("chat_session_typing",{session_id:this.sessionId}))},s.prototype.onSubmit=function(t){return t.preventDefault(),this.sendMessage()},s.prototype.sendMessage=function(){var t,e;return(t=this.input.val())?(sessionStorage.removeItem("unfinished_message"),e=this.view("message")({message:t,from:"customer",id:this._messageCount++}),this.maybeAddTimestamp(),this.el.find(".zammad-chat-message--typing").size()?(this.lastAddedType="typing-placeholder",this.el.find(".zammad-chat-message--typing").before(e)):(this.lastAddedType="message--customer",this.el.find(".zammad-chat-body").append(e)),this.input.val(""),this.scrollToBottom(),this.send("chat_session_message",{content:t,id:this._messageCount,session_id:this.sessionId})):void 0},s.prototype.receiveMessage=function(t){return this.onAgentTypingEnd(),this.maybeAddTimestamp(),this.renderMessage({message:t.message.content,id:t.id,from:"agent"})},s.prototype.renderMessage=function(t){var e,s;return this.lastAddedType="message--"+t.from,s=null!=(e=document.hidden)?e:{" zammad-chat-message--unread":""},this.el.find(".zammad-chat-body").append(this.view("message")(t)),this.scrollToBottom()},s.prototype.open=function(){return this.isOpen&&this.show(),this.sessionId||this.showLoader(),this.el.addClass("zammad-chat-is-open"),this.sessionId?(this.el.css("bottom",0),this.onOpenAnimationEnd()):this.el.animate({bottom:0},500,this.onOpenAnimationEnd),this.isOpen=!0,this.sessionId?void 0:this.session_init()},s.prototype.onOpenAnimationEnd=function(){},s.prototype.close=function(t){return"off"===this.state||"unsupported"===this.state?this.state:(t&&t.stopPropagation(),this.sessionId?(this.onInitialQueueDelayId&&clearTimeout(this.onInitialQueueDelayId),this.closeWindow()):void 0)},s.prototype.closeWindow=function(){var t;return this.el.removeClass("zammad-chat-is-open"),t=this.el.height()-this.el.find(".zammad-chat-header").outerHeight(),this.el.animate({bottom:-t},500,this.onCloseAnimationEnd)},s.prototype.onCloseAnimationEnd=function(){return this.el.removeClass("zammad-chat-is-visible"),this.disconnect(),this.isOpen=!1,this.send("chat_session_close",{session_id:this.sessionId}),this.setSessionId(void 0),sessionStorage.removeItem("unfinished_message"),this.onWebSocketOpen()},s.prototype.hide=function(){return this.el.removeClass("zammad-chat-is-shown")},s.prototype.show=function(){var t;return"off"===this.state||"unsupported"===this.state?this.state:(this.el.addClass("zammad-chat-is-shown"),this.inputInitialized||(this.inputInitialized=!0,this.input.autoGrow({extraLine:!1})),t=this.el.height()-this.el.find(".zammad-chat-header").outerHeight(),this.el.css("bottom",-t))},s.prototype.disableInput=function(){return this.input.prop("disabled",!0),this.el.find(".zammad-chat-send").prop("disabled",!0)},s.prototype.enableInput=function(){return this.input.prop("disabled",!1),this.el.find(".zammad-chat-send").prop("disabled",!1)},s.prototype.onQueueScreen=function(t){var e;return this.setSessionId(t.session_id),e=function(e){return function(){return e.onQueue(t)}}(this),this.initialQueueDelay&&!this.onInitialQueueDelayId?void(this.onInitialQueueDelayId=setTimeout(e,this.initialQueueDelay)):(this.onInitialQueueDelayId&&clearTimeout(this.onInitialQueueDelayId),e())},s.prototype.onQueue=function(t){return this.log("notice","onQueue",t.position),this.inQueue=!0,this.el.find(".zammad-chat-body").html(this.view("waiting")({position:t.position}))},s.prototype.onAgentTypingStart=function(){return this.stopTypingId&&clearTimeout(this.stopTypingId),this.stopTypingId=setTimeout(this.onAgentTypingEnd,3e3),this.el.find(".zammad-chat-message--typing").size()?void 0:(this.maybeAddTimestamp(),this.el.find(".zammad-chat-body").append(this.view("typingIndicator")()),this.scrollToBottom())},s.prototype.onAgentTypingEnd=function(){return this.el.find(".zammad-chat-message--typing").remove()},s.prototype.maybeAddTimestamp=function(){var t,e,s;return s=Date.now(),!this.lastTimestamp||s-this.lastTimestamp>6e4*this.showTimeEveryXMinutes?(t=this.T("Today"),e=(new Date).toTimeString().substr(0,5),"timestamp"===this.lastAddedType?(this.updateLastTimestamp(t,e),this.lastTimestamp=s):(this.el.find(".zammad-chat-body").append(this.view("timestamp")({label:t,time:e})),this.lastTimestamp=s,this.lastAddedType="timestamp",this.scrollToBottom())):void 0},s.prototype.updateLastTimestamp=function(t,e){return this.el.find(".zammad-chat-body").find(".zammad-chat-timestamp").last().replaceWith(this.view("timestamp")({label:t,time:e}))},s.prototype.addStatus=function(t){return this.maybeAddTimestamp(),this.el.find(".zammad-chat-body").append(this.view("status")({status:t})),this.scrollToBottom()},s.prototype.scrollToBottom=function(){return this.el.find(".zammad-chat-body").scrollTop(t(".zammad-chat-body").prop("scrollHeight"))},s.prototype.session_init=function(){return this.send("chat_session_init")},s.prototype.detectHost=function(){var t;return t="ws://","https:"===e.location.protocol&&(t="wss://"),this.options.host=""+t+i+"/ws"},s.prototype.wsConnect=function(){return this.options.host||this.detectHost(),this.log("debug","Connecting to "+this.options.host),this.ws=new e.WebSocket(""+this.options.host),this.ws.onopen=this.onWebSocketOpen,this.ws.onmessage=this.onWebSocketMessage,this.ws.onclose=function(t){return function(e){return t.log("debug","close websocket connection"),t.wsReconnectEnable?t.reconnect():void 0}}(this),this.ws.onerror=function(t){return function(e){return t.log("debug","ws:onerror",e)}}(this)},s.prototype.wsClose=function(){return this.wsReconnectEnable=!1,this.ws.close()},s.prototype.wsReconnect=function(){return this.reconnectDelayId&&clearTimeout(this.reconnectDelayId),this.reconnectDelayId=setTimeout(this.wsConnect,5e3)},s.prototype.onWebSocketOpen=function(){return this.sessionId=sessionStorage.getItem("sessionId"),this.log("debug","ws connected"),this.send("chat_status_customer",{session_id:this.sessionId}),this.setAgentOnlineState("online")},s.prototype.reconnect=function(){return this.log("notice","reconnecting"),this.disableInput(),this.lastAddedType="status",this.setAgentOnlineState("connecting"),this.addStatus(this.T("Connection lost")),this.wsReconnect()},s.prototype.onConnectionReestablished=function(){return this.lastAddedType="status",this.setAgentOnlineState("online"),this.addStatus(this.T("Connection re-established"))},s.prototype.onSessionClosed=function(t){return this.addStatus(this.T("Chat closed by %s",t.realname)),this.disableInput(),this.setAgentOnlineState("offline")},s.prototype.disconnect=function(){return this.showLoader(),this.el.find(".zammad-chat-welcome").removeClass("zammad-chat-is-hidden"),this.el.find(".zammad-chat-agent").addClass("zammad-chat-is-hidden"),this.el.find(".zammad-chat-agent-status").addClass("zammad-chat-is-hidden")},s.prototype.setSessionId=function(t){return this.sessionId=t,void 0===t?sessionStorage.removeItem("sessionId"):sessionStorage.setItem("sessionId",t)},s.prototype.onConnectionEstablished=function(t){return this.onInitialQueueDelayId&&clearTimeout(this.onInitialQueueDelayId),this.inQueue=!1,t.agent&&(this.agent=t.agent),t.session_id&&this.setSessionId(t.session_id),this.el.find(".zammad-chat-agent").html(this.view("agent")({agent:this.agent})),this.enableInput(),this.el.find(".zammad-chat-body").empty(),this.el.find(".zammad-chat-welcome").addClass("zammad-chat-is-hidden"),this.el.find(".zammad-chat-agent").removeClass("zammad-chat-is-hidden"),this.el.find(".zammad-chat-agent-status").removeClass("zammad-chat-is-hidden"),this.input.focus(),this.setAgentOnlineState("online")},s.prototype.showTimeout=function(){return this.el.find(".zammad-chat-body").html(this.view("timeout")({agent:this.agent.name,delay:10,unit:this.T("minutes")}))},s.prototype.showLoader=function(){return this.el.find(".zammad-chat-body").html(this.view("loader")())},s.prototype.setAgentOnlineState=function(t){var e;return this.state=t,e=t.charAt(0).toUpperCase()+t.slice(1),this.el.find(".zammad-chat-agent-status").attr("data-status",t).text(this.T(e))},s.prototype.loadCss=function(){var t,e,s;if(this.options.cssAutoload)return s=this.options.cssUrl,s||(s=this.options.host.replace(/^wss/i,"https").replace(/^ws/i,"http").replace(/\/ws/i,""),s+="/assets/chat/chat.css"),this.log("debug","load css from '"+s+"'"),e="@import url('"+s+"');",t=document.createElement("link"),t.rel="stylesheet",t.href="data:text/css,"+escape(e),document.getElementsByTagName("head")[0].appendChild(t)},s}(),e.ZammadChat=s}(window.jQuery,window),window.zammadChatTemplates||(window.zammadChatTemplates={}),window.zammadChatTemplates.agent=function(t){t||(t={});var e,s=[],n=function(t){return t&&t.ecoSafe?t:"undefined"!=typeof t&&null!=t?a(t):""},i=t.safe,a=t.escape;return e=t.safe=function(t){if(t&&t.ecoSafe)return t;("undefined"==typeof t||null==t)&&(t="");var e=new String(t);return e.ecoSafe=!0,e},a||(a=t.escape=function(t){return(""+t).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;")}),function(){(function(){this.agent.avatar&&(s.push('\n<img class="zammad-chat-agent-avatar" src="'),s.push(n(this.agent.avatar)),s.push('">\n')),s.push('\n<span class="zammad-chat-agent-sentence">\n  <span class="zammad-chat-agent-name">'),s.push(n(this.agent.name)),s.push("</span>\n</span>")}).call(this)}.call(t),t.safe=i,t.escape=a,s.join("")},jQuery.fn.autoGrow=function(t){return this.each(function(){var e=jQuery.extend({extraLine:!0},t),s=function(t){return jQuery(t).after('<div class="autogrow-textarea-mirror"></div>'),jQuery(t).next(".autogrow-textarea-mirror")[0]},n=function(t){a.innerHTML=String(t.value).replace(/&/g,"&amp;").replace(/"/g,"&quot;").replace(/'/g,"&#39;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/ /g,"&nbsp;").replace(/\n/g,"<br />")+(e.extraLine?".<br/>.":""),jQuery(t).height()!=jQuery(a).height()&&jQuery(t).height(jQuery(a).height())},i=function(){n(this)},a=s(this);a.style.display="none",a.style.wordWrap="break-word",a.style.whiteSpace="normal",a.style.padding=jQuery(this).css("paddingTop")+" "+jQuery(this).css("paddingRight")+" "+jQuery(this).css("paddingBottom")+" "+jQuery(this).css("paddingLeft"),a.style.width=jQuery(this).css("width"),a.style.fontFamily=jQuery(this).css("font-family"),a.style.fontSize=jQuery(this).css("font-size"),a.style.lineHeight=jQuery(this).css("line-height"),this.style.overflow="hidden",this.style.minHeight=this.rows+"em",this.onkeyup=i,n(this)})},window.zammadChatTemplates||(window.zammadChatTemplates={}),window.zammadChatTemplates.chat=function(t){t||(t={});var e,s=[],n=function(t){return t&&t.ecoSafe?t:"undefined"!=typeof t&&null!=t?a(t):""},i=t.safe,a=t.escape;return e=t.safe=function(t){if(t&&t.ecoSafe)return t;("undefined"==typeof t||null==t)&&(t="");var e=new String(t);return e.ecoSafe=!0,e},a||(a=t.escape=function(t){return(""+t).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;")}),function(){(function(){s.push('<div class="zammad-chat'),this.flat&&s.push(n(" zammad-chat--flat")),s.push('"'),this.fontSize&&s.push(n(" style='font-size: "+this.fontSize+"'")),s.push('>\n  <div class="zammad-chat-header js-chat-open"'),this.background&&s.push(n(" style='background: "+this.background+"'")),s.push('>\n    <div class="zammad-chat-header-controls">\n      <span class="zammad-chat-agent-status zammad-chat-is-hidden" data-status="online"></span>\n      <span class="zammad-chat-header-icon">\n        <svg class="zammad-chat-header-icon-open" viewBox="0 0 13 7"><path d="M10.807 7l1.4-1.428-5-4.9L6.5-.02l-.7.7-4.9 4.9 1.414 1.413L6.5 2.886 10.807 7z" fill-rule="evenodd"/></svg>\n        <svg class="zammad-chat-header-icon-close js-chat-close" viewBox="0 0 13 13"><path d="m2.241.12l-2.121 2.121 4.243 4.243-4.243 4.243 2.121 2.121 4.243-4.243 4.243 4.243 2.121-2.121-4.243-4.243 4.243-4.243-2.121-2.121-4.243 4.243-4.243-4.243" fill-rule="evenodd"/></svg>\n      </span>\n    </div>\n    <div class="zammad-chat-agent zammad-chat-is-hidden">\n    </div>\n    <div class="zammad-chat-welcome">\n      <svg class="zammad-chat-icon" viewBox="0 0 24 24"><path d="M2 5C2 4 3 3 4 3h16c1 0 2 1 2 2v10C22 16 21 17 20 17H4C3 17 2 16 2 15V5zM12 17l6 4v-4h-6z" fill-rule="evenodd"/></svg>\n      <span class="zammad-chat-welcome-text">'),s.push(this.T(this.title)),s.push('</span>\n    </div>\n  </div>\n  <div class="zammad-chat-body"></div>\n  <form class="zammad-chat-controls">\n    <textarea class="zammad-chat-input" rows="1" placeholder="'),s.push(this.T("Compose your message...")),s.push('"></textarea>\n    <button type="submit" class="zammad-chat-button zammad-chat-send"'),this.background&&s.push(n(" style='background: "+this.background+"'")),s.push(">"),s.push(this.T("Send")),s.push("</button>\n  </form>\n</div>")}).call(this)}.call(t),t.safe=i,t.escape=a,s.join("")},window.zammadChatTemplates||(window.zammadChatTemplates={}),window.zammadChatTemplates.loader=function(t){t||(t={});var e,s=[],n=t.safe,i=t.escape;return e=t.safe=function(t){if(t&&t.ecoSafe)return t;("undefined"==typeof t||null==t)&&(t="");var e=new String(t);return e.ecoSafe=!0,e},i||(i=t.escape=function(t){return(""+t).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;")}),function(){(function(){s.push('<div class="zammad-chat-modal">\n  <span class="zammad-chat-loading-animation">\n    <span class="zammad-chat-loading-circle"></span>\n    <span class="zammad-chat-loading-circle"></span>\n    <span class="zammad-chat-loading-circle"></span>\n  </span>\n  <span class="zammad-chat-modal-text">'),s.push(this.T("Connecting")),s.push("</span>\n</div>")}).call(this)}.call(t),t.safe=n,t.escape=i,s.join("")},window.zammadChatTemplates||(window.zammadChatTemplates={}),window.zammadChatTemplates.message=function(t){t||(t={});var e,s=[],n=function(t){return t&&t.ecoSafe?t:"undefined"!=typeof t&&null!=t?a(t):""},i=t.safe,a=t.escape;return e=t.safe=function(t){if(t&&t.ecoSafe)return t;("undefined"==typeof t||null==t)&&(t="");var e=new String(t);return e.ecoSafe=!0,e},a||(a=t.escape=function(t){return(""+t).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;")}),function(){(function(){s.push('<div class="zammad-chat-message zammad-chat-message--'),s.push(n(this.from)),s.push('">\n  <span class="zammad-chat-message-body"'),this.background&&"customer"===this.from&&s.push(n(" style='background: "+this.background+"'")),s.push(">"),s.push(this.message),s.push("</span>\n</div>")}).call(this)}.call(t),t.safe=i,t.escape=a,s.join("")},window.zammadChatTemplates||(window.zammadChatTemplates={}),window.zammadChatTemplates.status=function(t){t||(t={});var e,s=[],n=t.safe,i=t.escape;return e=t.safe=function(t){if(t&&t.ecoSafe)return t;("undefined"==typeof t||null==t)&&(t="");var e=new String(t);return e.ecoSafe=!0,e},i||(i=t.escape=function(t){return(""+t).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;")}),function(){(function(){s.push('<div class="zammad-chat-status">'),s.push(this.status),s.push("</div>")}).call(this)}.call(t),t.safe=n,t.escape=i,s.join("")},window.zammadChatTemplates||(window.zammadChatTemplates={}),window.zammadChatTemplates.timeout=function(t){t||(t={});var e,s=[],n=function(t){return t&&t.ecoSafe?t:"undefined"!=typeof t&&null!=t?a(t):""},i=t.safe,a=t.escape;return e=t.safe=function(t){if(t&&t.ecoSafe)return t;("undefined"==typeof t||null==t)&&(t="");var e=new String(t);return e.ecoSafe=!0,e},a||(a=t.escape=function(t){return(""+t).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;")}),function(){(function(){s.push('<div class="zammad-chat-modal">\n  <div class="zammad-chat-modal-text">\n    '),s.push(this.T("Since you didn't respond in the last %s your conversation with <strong>%s</strong> got closed.",this.delay+" "+this.unit,this.agent)),s.push('<br>\n    <div class="zammad-chat-button"'),this.background&&s.push(n(" style='background: "+this.background+"'")),s.push(">"),s.push(this.T("Start new conversation")),s.push("</div>\n  </div>\n</div>")}).call(this)}.call(t),t.safe=i,t.escape=a,s.join("")},window.zammadChatTemplates||(window.zammadChatTemplates={}),window.zammadChatTemplates.timestamp=function(t){t||(t={});var e,s=[],n=function(t){return t&&t.ecoSafe?t:"undefined"!=typeof t&&null!=t?a(t):""},i=t.safe,a=t.escape;return e=t.safe=function(t){if(t&&t.ecoSafe)return t;("undefined"==typeof t||null==t)&&(t="");var e=new String(t);return e.ecoSafe=!0,e},a||(a=t.escape=function(t){return(""+t).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;")}),function(){(function(){s.push('<div class="zammad-chat-timestamp"><strong>'),s.push(n(this.label)),s.push("</strong> "),s.push(n(this.time)),s.push("</div>")}).call(this)}.call(t),t.safe=i,t.escape=a,s.join("")},window.zammadChatTemplates||(window.zammadChatTemplates={}),window.zammadChatTemplates.typingIndicator=function(t){t||(t={});var e,s=[],n=t.safe,i=t.escape;return e=t.safe=function(t){if(t&&t.ecoSafe)return t;("undefined"==typeof t||null==t)&&(t="");var e=new String(t);return e.ecoSafe=!0,e},i||(i=t.escape=function(t){return(""+t).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;")}),function(){(function(){s.push('<div class="zammad-chat-message zammad-chat-message--typing zammad-chat-message--agent">\n  <span class="zammad-chat-message-body">\n    <span class="zammad-chat-loading-animation">\n      <span class="zammad-chat-loading-circle"></span>\n      <span class="zammad-chat-loading-circle"></span>\n      <span class="zammad-chat-loading-circle"></span>\n    </span>\n  </span>\n</div>')}).call(this)}.call(t),t.safe=n,t.escape=i,s.join("")},window.zammadChatTemplates||(window.zammadChatTemplates={}),window.zammadChatTemplates.waiting=function(t){t||(t={});var e,s=[],n=t.safe,i=t.escape;return e=t.safe=function(t){if(t&&t.ecoSafe)return t;("undefined"==typeof t||null==t)&&(t="");var e=new String(t);return e.ecoSafe=!0,e},i||(i=t.escape=function(t){return(""+t).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;")}),function(){(function(){s.push('<div class="zammad-chat-modal">\n  <div class="zammad-chat-modal-text">\n    <span class="zammad-chat-loading-animation">\n      <span class="zammad-chat-loading-circle"></span>\n      <span class="zammad-chat-loading-circle"></span>\n      <span class="zammad-chat-loading-circle"></span>\n    </span>\n    '),s.push(this.T("All colleges are busy.")),s.push("<br>\n    "),s.push(this.T("You are on waiting list position <strong>%s</strong>.",this.position)),s.push("\n  </div>\n</div>")}).call(this)}.call(t),t.safe=n,t.escape=i,s.join("")};
\ No newline at end of file
diff --git a/public/assets/chat/index.html b/public/assets/chat/index.html
index bd04a81c0..e72254bce 100644
--- a/public/assets/chat/index.html
+++ b/public/assets/chat/index.html
@@ -1,7 +1,6 @@
 <!doctype html>
 <meta charset="utf-8">
 <title>Zammad Chat</title>
-<link rel="stylesheet" href="chat.css">
 <meta name="viewport" content="width=device-width">
 <script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35738/livereload.js?snipver=1"></' + 'script>')</script>
 <style>
@@ -140,6 +139,7 @@
   var chat = new ZammadChat({
     chatId: 1,
     host: 'ws://localhost:6042',
+    cssUrl: 'http://localhost:3000/assets/chat/chat.css',
     debug: true
   });
 
diff --git a/public/assets/chat/views/chat.eco b/public/assets/chat/views/chat.eco
index 69e65097b..ddbbad0f7 100644
--- a/public/assets/chat/views/chat.eco
+++ b/public/assets/chat/views/chat.eco
@@ -11,7 +11,7 @@
     </div>
     <div class="zammad-chat-welcome">
       <svg class="zammad-chat-icon" viewBox="0 0 24 24"><path d="M2 5C2 4 3 3 4 3h16c1 0 2 1 2 2v10C22 16 21 17 20 17H4C3 17 2 16 2 15V5zM12 17l6 4v-4h-6z" fill-rule="evenodd"/></svg>
-      <span class="zammad-chat-welcome-text"><%- @title %></span>
+      <span class="zammad-chat-welcome-text"><%- @T(@title) %></span>
     </div>
   </div>
   <div class="zammad-chat-body"></div>
diff --git a/public/assets/chat/znuny.html b/public/assets/chat/znuny.html
index 2c9d908bf..a4c92bcf1 100644
--- a/public/assets/chat/znuny.html
+++ b/public/assets/chat/znuny.html
@@ -1,71 +1,73 @@
 <!doctype html>
-<meta charset="utf-8">
-<title>Zammad Chat</title>
-<link rel="stylesheet" href="chat.css">
-<link rel="stylesheet" href="znuny.css">
-<meta name="viewport" content="width=device-width">
-<script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35738/livereload.js?snipver=1"></' + 'script>')</script>
-<style>
-  body {
-    margin: 0;
-    font-family: sans-serif;
-  }
-
-  .mockup {
-    vertical-align: bottom;
-  }
-
-  .settings {
-    position: fixed;
-    left: 20px;
-    top: 20px;
-    background: white;
-    font-size: 14px;
-    padding: 10px;
-    border-radius: 5px;
-    box-shadow: 0 3px 10px rgba(0,0,0,.3);
-  }
-
-  .settings input {
-    vertical-align: middle;
-  }
-  .settings input + input {
-    margin-right: 3px;
-  }
-
-  table td:first-child {
-    text-align: right;
-    padding-right: 0;
-  }
-
-  td {
-    padding: 5px;
-  }
-
-  h2 {
-    font-size: 1em;
-    margin: 0;
-  }
-
-  @media only screen and (max-width: 768px) {
-    .settings {
-      display: none;
+<html lang="de-de">
+<head>
+  <meta charset="utf-8">
+  <title>Zammad Chat</title>
+  <link rel="stylesheet" href="znuny.css">
+  <meta name="viewport" content="width=device-width">
+  <script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35738/livereload.js?snipver=1"></' + 'script>')</script>
+  <style>
+    body {
+      margin: 0;
+      font-family: sans-serif;
     }
-  }
 
-  .Box {
-    background: hsl(0,0%,91%);
-    width: 26px;
-    height: 24px;
-    color: hsl(0,0%,47%);
-    float: left;
-  }
-  .Box.Active {
-    background: hsl(0,0%,36%);
-    color: white;
-  }
-</style>
+    .mockup {
+      vertical-align: bottom;
+    }
 
+    .settings {
+      position: fixed;
+      left: 20px;
+      top: 20px;
+      background: white;
+      font-size: 14px;
+      padding: 10px;
+      border-radius: 5px;
+      box-shadow: 0 3px 10px rgba(0,0,0,.3);
+    }
+
+    .settings input {
+      vertical-align: middle;
+    }
+    .settings input + input {
+      margin-right: 3px;
+    }
+
+    table td:first-child {
+      text-align: right;
+      padding-right: 0;
+    }
+
+    td {
+      padding: 5px;
+    }
+
+    h2 {
+      font-size: 1em;
+      margin: 0;
+    }
+
+    @media only screen and (max-width: 768px) {
+      .settings {
+        display: none;
+      }
+    }
+
+    .Box {
+      background: hsl(0,0%,91%);
+      width: 26px;
+      height: 24px;
+      color: hsl(0,0%,47%);
+      float: left;
+    }
+    .Box.Active {
+      background: hsl(0,0%,36%);
+      color: white;
+    }
+  </style>
+</head>
+<body>
 <img class="mockup" width="100%" src="znuny.png">
 
 <div class="settings">
@@ -107,6 +109,7 @@
   var chat = new ZammadChat({
     chatId: 1,
     host: 'ws://localhost:6042',
+    cssUrl: 'http://localhost:3000/assets/chat/chat.css',
     debug: true,
     background: '#494d52',
     flat: true,
@@ -144,4 +147,6 @@
       }
     }
   });
-</script>
\ No newline at end of file
+</script>
+</body>
+</html>
\ No newline at end of file