converse.js/src/templates/message.html

Browser based XMPP chat client

<div class="message chat-msg {{{o.type}}}{[ if (o.is_me_message) { ]} chat-msg--action {[ } ]}{{{o.extra_classes}}}"
        data-isodate="{{{o.time}}}" data-msgid="{{{o.msgid}}}" data-from="{{{o.from}}}" data-encrypted="{{{o.is_encrypted}}}">
    {[ if (o.type !== 'headline' && !o.is_me_message) { ]}
    <canvas class="avatar chat-msg__avatar" height="36" width="36"></canvas>
    {[ } ]}
    <div class="chat-msg__content chat-msg__content--{{{o.sender}}} {{{o.is_me_message ? 'chat-msg__content--action' : ''}}}">
        <span class="chat-msg__heading">
            {[ if (o.is_me_message) { ]}<time timestamp="{{{o.isodate}}}" class="chat-msg__time">{{{o.pretty_time}}}</time>{[ } ]}
            <span class="chat-msg__author">{[ if (o.is_me_message) { ]}**{[ }; ]}{{{o.username}}}</span>
            {[ if (!o.is_me_message) { ]}
                {[o.roles.forEach(function (role) { ]} <span class="badge badge-secondary">{{{role}}}</span> {[ }); ]}
                <time timestamp="{{{o.isodate}}}" class="chat-msg__time">{{{o.pretty_time}}}</time>
            {[ } ]}
            {[ if (o.is_encrypted) { ]}<span class="fa fa-lock"></span>{[ } ]}
        </span>
        <div class="chat-msg__body chat-msg__body--{{{o.type}}} {{{o.received ? 'chat-msg__body--received' : '' }}} {{{o.is_delayed ? 'chat-msg__body--delayed' : '' }}}">
            <div class="chat-msg__message">
                {[ if (o.is_spoiler) { ]}
                    <div class="chat-msg__spoiler-hint">
                        <span class="spoiler-hint">{{{o.spoiler_hint}}}</span>
                        <a class="badge badge-info spoiler-toggle" data-toggle-state="closed" href="#"><i class="fa fa-eye"></i>{{{o.label_show}}}</a>
                    </div>
                {[ } ]}
                {[ if (o.subject) { ]}
                    <div class="chat-msg__subject">{{{ o.subject }}}</div>
                {[ } ]}
                <div class="chat-msg__text
                    {[ if (o.is_single_emoji) { ]} chat-msg__text--larger{[ } ]}
                    {[ if (o.is_spoiler) { ]} spoiler collapsed{[ } ]}"><!-- message gets added here via renderMessage --></div>
                <div class="chat-msg__media"></div>
            </div>
            {[ if (o.received && !o.is_me_message && !o.is_groupchat_message) { ]} <span class="fa fa-check chat-msg__receipt"></span> {[ } ]}
            {[ if (o.edited) { ]} <i title="{{{o.__('This message has been edited')}}}" class="fa fa-edit chat-msg__edit-modal"></i> {[ } ]}
            {[ if (o.editable) { ]}
                <div class="chat-msg__actions">
                    <button class="chat-msg__action chat-msg__action-edit fa fa-pencil-alt" title="{{{o.__('Edit this message')}}}"></button>
                </div>
            {[ } ]}
        </div>
    </div>
</div>