zulip/web/templates/compose.hbs

<div id="compose-content">
    {{!-- scroll to bottom button is not part of compose but
    helps us align it at various screens sizes with
    minimal css and no JS. We keep it `position: absolute` to prevent
    it changing compose box layout in any way. --}}
    <div id="scroll-to-bottom-button-container" aria-hidden="true">
        <div id="scroll-to-bottom-button-clickable-area" data-tooltip-template-id="scroll-to-bottom-button-tooltip-template">
            <div id="scroll-to-bottom-button">
                <i class="scroll-to-bottom-icon fa fa-chevron-down"></i>
            </div>
        </div>
    </div>
    <div id="compose_controls">
        <div id="compose_buttons">
            <div class="reply_button_container">
                <div class="compose-reply-button-wrapper" data-reply-button-type="selected_message">
                    <button type="button" class="compose_reply_button"
                      id="left_bar_compose_reply_button_big">
                        {{t 'Compose message' }}
                    </button>
                </div>
                <button type="button" class="compose_new_conversation_button"
                  id="new_conversation_button"
                  data-tooltip-template-id="new_stream_message_button_tooltip_template">
                    {{t 'Start new conversation' }}
                </button>
            </div>
            <span class="mobile_button_container">
                <button type="button" class="compose_mobile_button"
                  id="left_bar_compose_mobile_button_big"
                  data-tooltip-template-id="left_bar_compose_mobile_button_tooltip_template">
                    +
                </button>
            </span>
            {{#unless embedded }}
            <span class="new_direct_message_button_container">
                <button type="button" class="compose_new_direct_message_button"
                  id="new_direct_message_button"
                  data-tooltip-template-id="new_direct_message_button_tooltip_template">
                    {{t 'New direct message' }}
                </button>
            </span>
            {{/unless}}
        </div>
    </div>
    <div class="message_comp">
        <div id="compose_banners" data-simplebar data-simplebar-tab-index="-1"></div>
        <div class="composition-area">
            <form id="send_message_form" action="/json/messages" method="post">
                <div class="compose_table">
                    <div id="compose_top">
                        {{!-- We start with the low-attention-recipient-row class
                        on the template to avoid showing the transition
                        when the compose box first opens. Note that this
                        class is immediately removed when it's not used,
                        so, for example, opening the compose box from
                        Inbox view does not cause any flash of unwanted
                        styling. --}}
                        <div id="compose-recipient" class="low-attention-recipient-row">
                            {{> dropdown_widget_wrapper
                              widget_name="compose_select_recipient"}}
                            <div class="topic-marker-container">
                                <a role="button" class="conversation-arrow zulip-icon zulip-icon-chevron-right"></a>
                            </div>
                            <div id="compose_recipient_box">
                                <input type="text" name="stream_message_recipient_topic" id="stream_message_recipient_topic" maxlength="{{ max_topic_length }}" value="" placeholder="{{t 'Topic' }}" autocomplete="off" tabindex="0" aria-label="{{t 'Topic' }}" />
                                <span id="topic-not-mandatory-placeholder" class="placeholder">
                                    {{> topic_not_mandatory_placeholder_text empty_string_topic_display_name=empty_string_topic_display_name}}
                                </span>
                                <button type="button" id="recipient_box_clear_topic_button" class="tippy-zulip-delayed-tooltip" data-tippy-content="{{t 'New topic' }}" tabindex="-1">
                                    <i class="zulip-icon zulip-icon-square-plus"></i>
                                </button>
                            </div>
                            <div id="compose-direct-recipient" data-before="{{t 'You and' }}">
                                <div class="pill-container">
                                    <div class="input" contenteditable="true" id="private_message_recipient" data-no-recipients-text="{{t 'Add one or more users' }}" data-some-recipients-text="{{t 'Add another user…' }}"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="messagebox">
                        <div id="message-content-container" class="surround-formatting-buttons-row">
                            <textarea class="new_message_textarea message-textarea" name="content" id='compose-textarea' placeholder="{{t 'Compose your message here' }}" tabindex="0" aria-label="{{t 'Compose your message here…' }}"></textarea>
                            <div id="preview-message-area-container">
                                <div class="scrolling_list preview_message_area" data-simplebar data-simplebar-tab-index="-1" id="preview_message_area" style="display:none;">
                                    <div class="markdown_preview_spinner"></div>
                                    <div class="preview_content rendered_markdown"></div>
                                </div>
                            </div>
                            <div class="composebox-buttons">
                                <button type="button" class="maximize-composebox-button zulip-icon zulip-icon-maximize-diagonal" aria-label="{{t 'Maximize compose box' }}" data-tippy-content="{{t 'Maximize compose box' }}"></button>
                                <button type="button" class="expand-composebox-button zulip-icon zulip-icon-expand-diagonal" aria-label="{{t 'Expand compose box' }}" data-tippy-content="{{t 'Expand compose box' }}"></button>
                                <button type="button" class="collapse-composebox-button zulip-icon zulip-icon-collapse-diagonal" aria-label="{{t 'Collapse compose box' }}" data-tippy-content="{{t 'Collapse compose box' }}"></button>
                            </div>
                            <div class="drag"></div>
                        </div>

                        <div id="message-send-controls-container">
                            <a id="compose-drafts-button" role="button" class="send-control-button hide-sm" tabindex=0 href="#drafts">
                                <span class="compose-drafts-text">{{t 'Drafts' }}</span><span class="compose-drafts-count-container">(<span class="compose-drafts-count"></span>)</span>
                            </a>
                            <span id="compose-limit-indicator" class="message-limit-indicator"></span>
                            <div class="message-send-controls">
                                <button type="submit" id="compose-send-button" class="send_message compose-submit-button compose-send-or-save-button" aria-label="{{t 'Send' }}">
                                    <img class="loader" alt="" src="" />
                                    <i class="zulip-icon zulip-icon-send"></i>
                                </button>
                                <button class="send-control-button send-related-action-button" id="send_later" tabindex=0 type="button" data-tippy-content="{{t 'Send options' }}">
                                    <i class="zulip-icon zulip-icon-more-vertical"></i>
                                </button>
                            </div>
                        </div>

                        <div id="message-formatting-controls-container" class="compose-scrolling-buttons-container">
                            {{> compose_control_buttons . }}
                            <button type="button" class="formatting-control-scroller-button formatting-scroller-forward">
                                <i class="scroller-forward-icon zulip-icon zulip-icon-compose-scroll-right"></i>
                            </button>
                            <button type="button" class="formatting-control-scroller-button formatting-scroller-backward">
                                <i class="scroller-backward-icon zulip-icon zulip-icon-compose-scroll-left"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
        <button type="button" class="zulip-icon zulip-icon-close" id='compose_close' data-tooltip-template-id="compose_close_tooltip_template"></button>
    </div>
</div>