threema-web/src/directives/latest_message.html

<div class="latest-message" ng-class="{
    'show-draft': ctrl.showDraft(),
    'is-typing': ctrl.isTyping(),
    'is-hidden': ctrl.isHidden(),
}">

    <!-- Typing indicator -->
    <div class="left typing">
        <span translate>messenger.IS_TYPING</span>
    </div>

    <!-- Left aligned message content -->
    <div class="left no-draft no-typing no-hidden" ng-if="ctrl.conversation.latestMessage">

        <!-- If this receiver is a group, show contact name that sent last message. -->
        <span eee-message-contact
              ng-if="ctrl.isGroup" eee-contact="ctrl.getContact()"></span>

        <!-- For non-text-messages, show an icon. -->
        <eee-message-icon
                ng-show="ctrl.showIcon()"
                class="message-icon"
                eee-message="ctrl.conversation.latestMessage"></eee-message-icon>

        <!-- For voip status messages -->
        <eee-message-voip-status
                ng-if="ctrl.showVoipInfo()"
                class="message-voip-status"
                eee-message="ctrl.conversation.latestMessage">
        </eee-message-voip-status>

        <!-- For text-messages, show message text excerpt. -->
        <span eee-message-text class="message-text" message="ctrl.conversation.latestMessage" multi-line="false" linkify="false"></span>

    </div>
    <div class="left hidden no-typing">
        <span class="message-text" translate>messenger.PRIVATE</span>
    </div>
    <div class="left draft no-typing no-hidden">
        <span class="message-text">{{ctrl.getDraft()}}</span>
    </div>

    <!-- Right aligned message metadata -->
    <div class="right">
        <span class="no-draft no-hidden">
            <span eee-message-date
                  class="message-date" eee-message="ctrl.conversation.latestMessage"></span>

            <span class="message-state" ng-show="ctrl.getStatusIcon()">
                 <i class="material-icons md-medium-dark md-14 {{ctrl.conversation.latestMessage.state}}">
                     {{ ctrl.getStatusIcon() }}
                 </i>
            </span>
        </span>
        <span class="draft no-hidden">
            <span translate>messenger.DRAFT</span>
        </span>



    </div>

</div>