upstream-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">
            {{!-- We add a semi-transparent underlay to the scroll to bottom
            button with the same background color as those of the stream
            messages for better visibility against the message timestamps. --}}
            <div id="scroll-to-bottom-button-underlay"></div>
            {{> components/action_button id="scroll-to-bottom-button" icon="chevron-down" variant="subtle" intent="brand" }}
        </div>
    </div>
    <div id="closed-compose-controls">
        <div id="legacy-closed-compose-box">
            <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-channel-recipient">
                                <input type="text" name="stream_message_recipient_topic" id="stream_message_recipient_topic" 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="compose-new-recipient-button" 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 users' }}" ></div>
                                    <button type="button" id="compose-new-direct-recipient-button" class="compose-new-recipient-button tippy-zulip-delayed-tooltip" data-tippy-content="{{t 'Add recipient' }}" tabindex="-1">
                                        <i class="zulip-icon zulip-icon-square-plus"></i>
                                    </button>
                                </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' }}" aria-label="{{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" aria-label="{{t 'Scroll 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" aria-label="{{t 'Scroll 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" aria-label="{{t 'Cancel compose' }}"></button>
    </div>
</div>