<div class="neo-widget widget--interaction-messenger">

<div class="neo-widget__header aoc-chat">Sample Chat Messenger <span class="aoc-

observe imw-observed" ng-if="isObserved" title="The interaction is being
observed"></span></div>

<div class="neo-widget__content">
<div class="imw-header-container">
<div class="imw-participants-header">
<span class="imw-participants-header--item"><strong>Participants:</strong>
<label ng-repeat="participant in participants">{{ participant.name }}<span ng-if="!
$last">, </span></label></span>
</div>
</div>

<div class="imw-messages-tab" layout="column">

<div class="imw-messages-container" flex>
<div class="imw-messages-container--inner" flex>
<div class="imw-messenger-message imw-messenger-message--
{{::message.side}}" ng-repeat="message in messages track by $index">
<div layout="column" layout-align="{{::message.side === 'right' ?
'start end' : 'start start'}}">
<div class="imw-text-avatar"><figure class="neo-avatar neo-avatar--
small" data-initials="{{ getInitials(message.receivedFrom.participantName)}}"
title="{{ message.receivedFrom.participantName }}"></figure></div>
<div class="imw-messages-header--item" layout="row" layout-
align="start center"><span><strong>{{ message.receivedFrom.participantName |
translate }}</strong></span></div>
<div class="imw-message-body">
<div class="imw-message-body-transfer" ng-
if="message.isFileTransfer" layout="row">
<div class="imw-message-body-file--icon"><span class="aoc-
file"></span></div>
<div class="imw-message-body-file--box" layout="column">
<span class="imw-message-body--text" ng-if="!
message.isDownloadInitiated && !message.isDelivered">Waiting for customer to
accept...</span>
<span class="imw-message-body--text" ng-
if="message.isDownloadInitiated && !message.isDelivered">File transfer in
progress...</span>
<span class="imw-message-body--text" ng-
if="message.isDelivered">File transfer complete</span>
<a class="imw-message-body-file--name"
href="{{::message.body}}" ng-click="uploadAttachedFile($event, message.body,
message.filename)" target="_blank">{{ ::message.filename }} ({{
::convertFormatSize(message.fileSize) }})</a>
</div>
</div>
<div class="imw-message-body--text" ng-if="!message.isFileTransfer"
ng-bind-html="::message.body | linky:'_blank'"></div>
<div class="imw-message-body--icons" ng-if="message.isDelivered &&
message.receivedFrom.participantType != 'CUSTOMER'"><span class="aoc-
accept"></span></div>
</div>
</div>
</div>
</div>
</div>

<div class="imw-status-container">
 <p class="imw-status-container--panel" ng-switch="isTypingParticipant">
<span ng-switch-when="true"><strong>{{ typingParticipant }}</strong> is
typing...</span>
<span ng-switch-default>Information about received messages</span>
</p>
<p class="imw-status-container--panel">
<span>{{ messageInput.length || 0 }}/{{ charLimit }}</span>
</p>
</div>

<div class="neo-input-group imw-input-container">

<textarea type="text" class="neo-input imw-textarea" ng-
model="messageInput" placeholder="Type a message..." ng-change="onInputChange()"
ng-keypress="handleMessageInputKeypress($event)" maxlength="{{charLimit}}" ng-
model-options="{updateOn: 'default change blur input'}"></textarea>
<input class="ng-hide imw-upload-input" id="imw-upload-new-file"
type="file">
<button class="aoc-attach imw-upload-btn" type="button" ng-
click="uploadFile('imw-upload-new-file')"></button>
<button class="neo-btn" type="submit" ng-
click="sendMessage()">Send</button>
</div>
</div>
</div>
</div>