--- /dev/null
+<!-- CHAT CONTENT -->
+<md-content
+ id="chatContent1"
+ class="chat-messages"
+ ng-style="{'background-color': '{{settings.backgroundColor}}'}"
+>
+ <div
+ layout="row"
+ ng-if="!$first"
+ ng-repeat="(key, message) in messages track by $index"
+ class="md-padding message-row"
+ ng-style="{'font-size': '{{settings.messageFontSize}}px'}"
+ 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}"
+ >
+ <img
+ ng-if="message.direction ==='out' && !message.UserId"
+ ng-src="{{settings.remote}}/api/chat/websites/{{settings.id}}/system_avatar?token={{settings.token}}"
+ class="avatar"
+ alt="system"
+ />
+ <img
+ ng-if="message.direction ==='out' && message.UserId"
+ ng-src="{{settings.remote}}/api/{{settings.showAgentAvatar ? 'users/' + visitor.interaction.UserId + '/avatar' : 'chat/websites/' + settings.id + '/avatar'}}?token={{settings.token}}"
+ class="avatar"
+ alt="agent"
+ />
+ <img
+ ng-if="message.direction ==='in'"
+ ng-src="{{settings.remote}}/api/chat/websites/{{settings.id}}/customer_avatar?token={{settings.token}}"
+ class="avatar"
+ alt="customer"
+ />
+
+ <div class="bubble">
+ <div layout="row" layout-align="end center">
+ <div class="time secondary-text" ng-switch="settings.agentIdentifier">
+ <span ng-switch-when="website_alias">
+ {{message.direction === 'out' ? (message.UserId ?
+ (settings.agentAlias + message.UserId) : settings.systemAlias) :
+ (settings.customerAlias ||erAlias || visitor.from || 'Visitor' +
+ message.ContactId)}} - {{message.createdAt | date : 'h:mm'}}
+ </span>
+ <span ng-switch-when="agent_alias">
+ {{message.direction === 'out' ? (message.UserId ?
+ (message.User.alias || message.User.fullname) :
+ settings.systemAlias) : (settings.customerAlias || visitor.from ||
+ 'Visitor' + message.ContactId)}} - {{message.createdAt | date :
+ 'h:mm'}}
+ </span>
+ <span ng-switch-when="agent_fullname">
+ {{message.direction === 'out' ? (message.UserId ?
+ message.User.fullname : settings.systemAlias) :
+ (settings.customerAlias || visitor.from || 'Visitor' +
+ message.ContactId)}} - {{message.createdAt | date : 'h:mm'}}
+ </span>
+ <span ng-switch-default>
+ {{message.direction === 'out' ? (message.UserId ?
+ ((settings.agentAlias || 'Agent') + message.UserId) :
+ settings.systemAlias) : (settings.customerAlias || visitor.from ||
+ 'Visitor' + message.ContactId)}} - {{message.createdAt | date :
+ 'h:mm'}}
+ </span>
+ </div>
+ <div
+ style="padding-left: 5px"
+ ng-if="message.direction === 'in' && settings.enableCustomerCheckmarks"
+ >
+ <i
+ ng-if="!message.read"
+ class="mdi mdi-18px mdi-check"
+ style="color: grey"
+ ></i>
+ <i
+ ng-if="message.read"
+ class="mdi mdi-18px mdi-check-all"
+ style="color: #34b7f1"
+ ></i>
+ </div>
+ </div>
+ <div
+ ng-class="{'in': message.direction === 'in', 'out': message.direction ==='out' && message.UserId, 'auto': message.direction ==='out' && !message.UserId}"
+ >
+ <div
+ ng-if="message.AttachmentId"
+ ng-bind-html="message.body"
+ class="message"
+ ></div>
+ <div
+ ng-if="!message.AttachmentId"
+ ng-bind-html="message.body | embed:vm.emojiOptions"
+ class="message"
+ ></div>
+ </div>
+ </div>
+ </div>
+
+ <!-- CHAT ERROR -->
+ <div
+ class="chat-error"
+ ng-repeat="error in vm.errors"
+ layout="row"
+ layout-align="center end"
+ layout-margin
+ >
+ <i class="mdi mdi-alert mdi-24px mdi-light"></i>
+ <md-tooltip md-direction="top"
+ >{{error.message || 'Service temporarily unavailable.'}}</md-tooltip
+ >
+ <span class="chat-error-message"
+ >{{error.message || 'Service temporarily unavailable.'}}</span
+ >
+ </div>
+ <!-- CHAT ERROR -->
+</md-content>
+<!-- / CHAT CONTENT -->
+
+<!-- CHAT FOOTER -->
+<div layout="row" layout-align="center center" class="chat-footer md-padding">
+ <div id="input_text" layout="row" layout-align="end center">
+ <input id="emojionearea" />
+
+ <md-button
+ id="attachmentButton"
+ ng-if="settings.enableCustomerAttachment"
+ class="md-fab md-mini md-warn"
+ type="button"
+ flow-init
+ flow-btn
+ flow-file-added="vm.fileAdded($file, $event, $flow)"
+ >
+ <i class="mdi mdi-attachment mdi-24px mdi-light"></i>
+ </md-button>
+ </div>
+
+ <md-button
+ id="sendButton"
+ ng-if="settings.enableSendButton"
+ class="md-fab md-mini md-warn"
+ type="button"
+ ng-click="vm.reply_button($event)"
+ >
+ <i
+ id="sendButton_icon"
+ class="mdi mdi-send mdi-24px mdi-light icon_color"
+ ></i>
+ </md-button>
+</div>
+<!-- / CHAT FOOTER -->