snippet/3.0.0/templates/5e32f2e1a6d11e8f150e.html

   1 <!-- CHAT CONTENT -->
   2 <md-content
   3   id="chatContent1"
   4   class="chat-messages"
   5   ng-style="{'background-color': '{{settings.backgroundColor}}'}"
   6 >
   7   <div
   8     layout="row"
   9     ng-if="!$first"
  10     ng-repeat="(key, message) in messages track by $index"
  11     class="md-padding message-row"
  12     ng-style="{'font-size': '{{settings.messageFontSize}}px'}"
  13     ng-class="{'in':( message.direction === 'in' && settings.messagesAlignment === 'alternate'), 'in2': ( message.direction === 'in' && settings.messagesAlignment === 'centered'), 'out': message.direction === 'out' && message.UserId, 'auto': message.direction === 'out' && !message.UserId}"
  14   >
  15     <img
  16       ng-if="message.direction ==='out' && !message.UserId"
  17       ng-src="{{settings.remote}}/api/chat/websites/{{settings.id}}/system_avatar?token={{settings.token}}"
  18       class="avatar"
  19       alt="system"
  20     />
  21     <img
  22       ng-if="message.direction ==='out' && message.UserId"
  23       ng-src="{{settings.remote}}/api/{{settings.showAgentAvatar ? 'users/' + message.UserId + '/avatar' : 'chat/websites/' + settings.id + '/avatar'}}?token={{settings.token}}"
  24       class="avatar"
  25       alt="agent"
  26     />
  27     <img
  28       ng-if="message.direction ==='in'"
  29       ng-src="{{settings.remote}}/api/chat/websites/{{settings.id}}/customer_avatar?token={{settings.token}}"
  30       class="avatar"
  31       alt="customer"
  32     />
  33
  34     <div class="bubble">
  35       <div layout="row" layout-align="end center">
  36         <div class="time secondary-text" ng-switch="settings.agentIdentifier">
  37           <span ng-switch-when="website_alias">
  38             {{message.direction === 'out' ? (message.UserId ?
  39             (settings.agentAlias + message.UserId) : settings.systemAlias) :
  40             (settings.customerAlias || visitor.from || 'Visitor' +
  41             message.ContactId)}} - {{message.createdAt | date : 'h:mm'}}
  42           </span>
  43           <span ng-switch-when="agent_alias">
  44             {{message.direction === 'out' ? (message.UserId ?
  45             (message.User.alias || message.User.fullname) :
  46             settings.systemAlias) : (settings.customerAlias || visitor.from ||
  47             'Visitor' + message.ContactId)}} - {{message.createdAt | date :
  48             'h:mm'}}
  49           </span>
  50           <span ng-switch-when="agent_fullname">
  51             {{message.direction === 'out' ? (message.UserId ?
  52             message.User.fullname : settings.systemAlias) :
  53             (settings.customerAlias || visitor.from || 'Visitor' +
  54             message.ContactId)}} - {{message.createdAt | date : 'h:mm'}}
  55           </span>
  56           <span ng-switch-default>
  57             {{message.direction === 'out' ? (message.UserId ?
  58             ((settings.agentAlias || 'Agent') + message.UserId) :
  59             settings.systemAlias) : (settings.customerAlias || visitor.from ||
  60             'Visitor' + message.ContactId)}} - {{message.createdAt | date :
  61             'h:mm'}}
  62           </span>
  63         </div>
  64         <div
  65           style="padding-left: 5px"
  66           ng-if="message.direction === 'in' && settings.enableCustomerCheckmarks"
  67         >
  68           <i
  69             ng-if="!message.read"
  70             class="mdi mdi-18px mdi-check"
  71             style="color: grey"
  72           ></i>
  73           <i
  74             ng-if="message.read"
  75             class="mdi mdi-18px mdi-check-all"
  76             style="color: #34b7f1"
  77           ></i>
  78         </div>
  79       </div>
  80       <div
  81         ng-class="{'in': message.direction === 'in', 'out': message.direction ==='out' && message.UserId, 'auto': message.direction ==='out' && !message.UserId}"
  82       >
  83         <div
  84           ng-if="message.AttachmentId"
  85           ng-bind-html="message.body"
  86           class="message"
  87         ></div>
  88         <div
  89           ng-if="!message.AttachmentId"
  90           ng-bind-html="message.body | embed:vm.emojiOptions"
  91           class="message"
  92         ></div>
  93       </div>
  94     </div>
  95   </div>
  96
  97   <!-- CHAT ERROR -->
  98   <div
  99     class="chat-error"
 100     ng-repeat="error in vm.errors"
 101     layout="row"
 102     layout-align="center end"
 103     layout-margin
 104   >
 105     <i class="mdi mdi-alert mdi-24px mdi-light"></i>
 106     <md-tooltip md-direction="top"
 107       >{{error.message || 'Service temporarily unavailable.'}}</md-tooltip
 108     >
 109     <span class="chat-error-message"
 110       >{{error.message || 'Service temporarily unavailable.'}}</span
 111     >
 112   </div>
 113   <!-- CHAT ERROR -->
 114 </md-content>
 115 <!-- / CHAT CONTENT -->
 116
 117 <!-- CHAT FOOTER -->
 118 <div layout="row" layout-align="center center" class="chat-footer md-padding">
 119   <div id="input_text" layout="row" layout-align="end center">
 120     <input id="emojionearea" />
 121
 122     <md-button
 123       id="attachmentButton"
 124       ng-if="settings.enableCustomerAttachment"
 125       class="md-fab md-mini md-warn"
 126       type="button"
 127       flow-init
 128       flow-btn
 129       flow-file-added="vm.fileAdded($file, $event, $flow)"
 130     >
 131       <i class="mdi mdi-attachment mdi-24px mdi-light"></i>
 132     </md-button>
 133   </div>
 134
 135   <md-button
 136     id="sendButton"
 137     ng-if="settings.enableSendButton"
 138     class="md-fab md-mini md-warn"
 139     type="button"
 140     ng-click="vm.reply_button($event)"
 141   >
 142     <i
 143       id="sendButton_icon"
 144       class="mdi mdi-send mdi-24px mdi-light icon_color"
 145     ></i>
 146   </md-button>
 147 </div>
 148 <!-- / CHAT FOOTER -->