snippet/3.10.1/templates/56adb62107e750fc7c3a.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 ng-if="message.AttachmentId">
  84           <div ng-switch="message.Attachment.type | typeFromMimeType">
  85             <audio-player
  86               ng-switch-when="audio"
  87               source="message.urlFromBody"
  88               type="message.Attachment.type"
  89               dispose-source="true"
  90             ></audio-player>
  91             <media-viewer
  92               ng-switch-when="image|video"
  93               ng-switch-when-separator="|"
  94               source="message.urlFromBody"
  95               type="message.Attachment.type"
  96               dispose-source="true"
  97             ></media-viewer>
  98             <document-wrapper
  99               ng-switch-default
 100               source="message.urlFromBody"
 101               document-name="message.Attachment.name"
 102             ></document-wrapper>
 103           </div>
 104         </div>
 105         <div
 106           ng-if="!message.AttachmentId"
 107           ng-bind-html="message.body | embed:vm.emojiOptions"
 108           class="message"
 109         ></div>
 110       </div>
 111     </div>
 112   </div>
 113
 114   <!-- CHAT ERROR -->
 115   <div
 116     class="chat-error"
 117     ng-repeat="error in vm.errors"
 118     layout="row"
 119     layout-align="center end"
 120     layout-margin
 121   >
 122     <i class="mdi mdi-alert mdi-24px mdi-light"></i>
 123     <span class="chat-error-message"
 124       >{{error.message || 'Service temporarily unavailable.'}}</span
 125     >
 126   </div>
 127   <!-- CHAT ERROR -->
 128 </md-content>
 129 <!-- / CHAT CONTENT -->
 130
 131 <!-- CHAT FOOTER -->
 132 <div
 133   ng-show="!vm.recording"
 134   ng-hide="vm.recording"
 135   layout="row"
 136   layout-align="center center"
 137   class="chat-footer md-padding"
 138 >
 139   <div id="input_text" layout="row" layout-align="end center">
 140     <input id="emojionearea" />
 141     <md-button
 142       id="attachmentButton"
 143       ng-if="settings.enableCustomerAttachment"
 144       class="md-fab md-mini md-warn"
 145       type="button"
 146       flow-init="vm.ngFlowOptions"
 147       flow-btn
 148       flow-name="vm.ngFlow.flow"
 149       flow-file-added="vm.fileAdded($file, $event, $flow)"
 150     >
 151       <i class="mdi mdi-attachment mdi-24px mdi-light"></i>
 152     </md-button>
 153
 154     <!-- Rec button -->
 155     <md-button
 156       id="recButton"
 157       ng-if="settings.enableCustomerAudioRecording"
 158       class="md-fab md-mini md-warn rec-button-group"
 159       type="button"
 160       ng-click="vm.onRecordingStart($event)"
 161     >
 162       <i
 163         id="recButton_icon"
 164         class="mdi mdi-microphone mdi-24px mdi-light icon_color"
 165       ></i>
 166     </md-button>
 167   </div>
 168
 169   <md-button
 170     id="sendButton"
 171     ng-if="settings.enableSendButton"
 172     class="md-fab md-mini md-warn"
 173     type="button"
 174     ng-click="vm.reply_button($event)"
 175   >
 176     <i
 177       id="sendButton_icon"
 178       class="mdi mdi-send mdi-24px mdi-light icon_color"
 179     ></i>
 180   </md-button>
 181 </div>
 182
 183 <!-- Rec controls -->
 184 <div
 185   ng-if="settings.enableCustomerAudioRecording"
 186   ng-show="vm.recording"
 187   ng-hide="!vm.recording"
 188   layout="row"
 189   layout-align="end end"
 190   class="chat-footer md-padding"
 191 >
 192   <!-- record time -->
 193   <div class="record-time" ng-if="!vm.recordingStopped"></div>
 194
 195   <!-- audio player -->
 196   <div ng-if="vm.recordingStopped" style="margin: 1px">
 197     <audio-player source="vm.recordedAudioUrl" dispose-source="true" />
 198   </div>
 199
 200   <!-- stop recording button -->
 201   <md-button
 202     ng-if="!vm.recordingStopped"
 203     id="stop_rec_button"
 204     class="md-icon-button"
 205     style="margin: 1px"
 206     ng-click="vm.onRecordingStop()"
 207   >
 208     <i class="mdi mdi-stop mdi-24px icon_color"></i>
 209   </md-button>
 210
 211   <!-- delete recording button -->
 212   <md-button
 213     id="delete_rec_button"
 214     class="md-icon-button md-warn md-mini"
 215     style="margin: 1px"
 216     ng-click="vm.onRecordingDelete()"
 217   >
 218     <i class="mdi mdi-delete mdi-24px mdi-warn"></i>
 219   </md-button>
 220
 221   <!-- send recording button -->
 222   <div class="btn-send-container" style="margin: 1px">
 223     <div class="record-ripple"></div>
 224     <md-button
 225       id="send_rec_button"
 226       class="md-icon-button md-mini"
 227       ng-click="vm.onRecordingSend()"
 228       flow-init
 229       flow-name="vm.ngFlow.flow"
 230       flow-file-added="vm.fileAdded($file, $event, $flow)"
 231     >
 232       <i class="mdi mdi-send mdi-24px mdi-success"></i>
 233     </md-button>
 234   </div>
 235 </div>
 236 <!-- / CHAT FOOTER -->