threema-web/src/partials/messenger.conversation.html

<div id="conversation" class="drag-container">
    <drag-file
            ng-if="!ctrl.locked"
            submit="ctrl.submit"
            on-uploading="ctrl.onUploading"></drag-file>

    <div id="conversation-header" class="detail-header">
        <ng-include src="'partials/messenger.backbutton.html'"></ng-include>
        <div class="header-avatar" ng-click="ctrl.showReceiver()">
            <eee-avatar eee-type="ctrl.type" eee-receiver="ctrl.receiver"
                        eee-resolution="'low'"></eee-avatar>
        </div>
        <div class="header-details" ng-click="ctrl.showReceiver()">
            <div class="conversation-header-details-name"
                 ng-bind-html="ctrl.receiver.displayName | escapeHtml | emojify"></div>
            <div class="conversation-header-details-detail" ng-if="ctrl.type == 'contact'">
            <eee-verification-level ng-if="ctrl.type == 'contact'"
                                    contact="ctrl.receiver"></eee-verification-level>
            </div>
            <div class="conversation-header-details-detail" ng-if="ctrl.type == 'group'"
                 title="{{ ctrl.receiver.members | idsToNames | escapeHtml }}">
                <span ng-bind-html="ctrl.receiver.members | idsToNames | escapeHtml | emojify"></span>
            </div>
        </div>
    </div>
    <div id="conversation-is-private" ng-if="ctrl.locked">
        <md-card>
            <md-toolbar class="md-warn">
                <div class="md-toolbar-tools">
                    <h2 class="md-flex" translate>messenger.PRIVATE_CHAT</h2>
                </div>
            </md-toolbar>
            <md-card-content>
                <span translate>messenger.PRIVATE_CHAT_DESCRIPTION</span>
            </md-card-content>
        </md-card>
    </div>

    <div id="conversation-chat" scroll-glue in-view-container ng-show="!ctrl.locked">
        <ul class="chat">
            <li in-view="$inview && !ctrl.locked && ctrl.topOfChat()" class="load-more">
                <div ng-if="ctrl.hasMoreMessages()" class="loading">
                    <img ng-src="img/spinner.gif" alt="...">
                </div>
            </li>
            <li ng-repeat="message in ctrl.messages" id="message-{{message.id}}">
                <eee-message eee-receiver="ctrl.receiver" eee-type="ctrl.type" eee-message="message"
                             in-view="$inview  && !ctrl.locked && ctrl.msgRead(message.id)"
                             in-view-options="{ considerPageVisibility: true }"></eee-message>
            </li>
            <li ng-if="ctrl.isTyping()" class="typing-indicator">
                <!-- Non status messages -->
                <article class="message message-in">

                    <div class="bubble-triangle"></div>
                    <section class="message-body text-message-body">
                        <div class="typing-animation"/>
                    </section>
                </article>
            </li>
        </ul>
    </div>

    <div id="scrolljump" ng-click="ctrl.scrollDown()" ng-if="ctrl.showScrollJump && !ctrl.receiver.locked"
         translate translate-attr-title="messenger.SCROLL_DOWN">
        <svg x="0" y="0" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 50 50" width="100" height="100" style="fill: rgb(66, 66, 66);"><g fill="none" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="sans-serif" font-weight="normal" font-size="12" text-anchor="start" mix-blend-mode="normal"><g><g><path d="M0,50l0,-50l50,0l0,50z" fill="none"/><path d="M25,46.5c-11.87412,0 -21.5,-9.62588 -21.5,-21.5l0,0c0,-11.87412 9.62588,-21.5 21.5,-21.5l0,0c11.87412,0 21.5,9.62588 21.5,21.5l0,0c0,11.87412 -9.62588,21.5 -21.5,21.5z" fill="#ffffff"/><g fill="#424242"><path d="M25,0.16c-13.69656,0 -24.84,11.14344 -24.84,24.84c0,13.69764 11.14344,24.84 24.84,24.84c13.69764,0 24.84,-11.14236 24.84,-24.84c0,-13.69656 -11.14236,-24.84 -24.84,-24.84z M36.56356,22.52356l-10.8,10.8c-0.2106,0.2106 -0.48708,0.31644 -0.76356,0.31644c-0.27648,0 -0.55296,-0.10584 -0.76356,-0.31644l-10.8,-10.8c-0.42228,-0.42228 -0.42228,-1.10484 0,-1.52712c0.42228,-0.42228 1.10484,-0.42228 1.52712,0l10.03644,10.03644l10.03644,-10.03644c0.42228,-0.42228 1.10484,-0.42228 1.52712,0c0.42228,0.42228 0.42228,1.10484 0,1.52712z"/></g></g></g></g></svg>
    </div>

    <div id="conversation-footer" ng-if="ctrl.isEnabled() && !ctrl.receiver.locked">

        <div ng-if="ctrl.isQuoting()" id="conversation-quote">
            <eee-message-quote
                    class="message-quote"
                    eee-quote="ctrl.getQuote()">
            </eee-message-quote>

            <md-button aria-label="Cancel Quoting" class="md-icon-button" ng-click="ctrl.cancelQuoting()">
                <i class="material-icons md-dark md-24" translate translate-attr-title="common.CANCEL">clear</i>
            </md-button>
        </div>
        <div id="mention-selector" ng-if="ctrl.showMentionSelector()">
            <ul class="member-list">
                <li ng-repeat="mention in ctrl.currentMentions"
                    ng-click="ctrl.onMentionSelected(mention.identity)"
                    ng-class="{selected: ctrl.selectedMention == $index}">
                    <div class="contact-badge receiver-badge" ng-if="mention.isAll">
                        <section class="avatar-box">
                            <eee-avatar eee-type="'group'"
                                        eee-receiver="ctrl.receiver"
                                        eee-resolution="'low'"></eee-avatar>
                        </section>
                        <div translate>messenger.ALL</div>
                    </div>

                    <eee-contact-badge
                            ng-if="!mention.isAll"
                            eee-identity="mention.identity"
                            eee-disable-click="true"/>
                </li>
            </ul>
        </div>
        <div class="chat-input">
            <compose-area
                    submit="ctrl.submit"
                    initial-data="ctrl.initialData"
                    on-typing="ctrl.onTyping"
                    on-key-down="ctrl.onComposeKeyDown"
                    start-typing="ctrl.startTyping"
                    stop-typing="ctrl.stopTyping"
                    on-uploading="ctrl.onUploading"
                    max-text-length="ctrl.maxTextLength">
            </compose-area>
        </div>
    </div>
</div>