discourse/plugins/chat/assets/javascripts/discourse/components/chat-composer.hbs

{{! template-lint-disable no-pointer-down-event-binding }}
{{! template-lint-disable no-invalid-interactive }}

<div class="chat-composer__wrapper">
  {{#if this.shouldRenderMessageDetails}}
    <ChatComposerMessageDetails
      @message={{if
        this.currentMessage.editing
        this.currentMessage
        this.currentMessage.inReplyTo
      }}
      @cancelAction={{this.composer.cancel}}
    />
  {{/if}}

  <div
    role="region"
    aria-label={{i18n "chat.aria_roles.composer"}}
    class={{concat-class
      "chat-composer"
      (if this.isFocused "is-focused")
      (if this.pane.sending "is-sending")
      (if this.sendEnabled "is-send-enabled" "is-send-disabled")
      (if this.disabled "is-disabled" "is-enabled")
      (if this.currentMessage.draftSaved "is-draft-saved" "is-draft-unsaved")
    }}
    {{did-update this.didUpdateMessage this.currentMessage}}
    {{did-update this.didUpdateInReplyTo this.currentMessage.inReplyTo}}
    {{did-insert this.setup}}
    {{will-destroy this.teardown}}
    {{will-destroy this.cancelPersistDraft}}
  >
    <div class="chat-composer__outer-container">
      <div class="chat-composer__inner-container">
        <ChatComposerDropdown
          @buttons={{this.dropdownButtons}}
          @isDisabled={{this.disabled}}
          @hasActivePanel={{eq
            this.chatEmojiPickerManager.picker.context
            this.context
          }}
          @onCloseActivePanel={{this.chatEmojiPickerManager.close}}
          {{on "focus" (fn this.computeIsFocused true)}}
          {{on "blur" (fn this.computeIsFocused false)}}
        />

        <div
          class="chat-composer__input-container"
          {{on "click" this.composer.focus}}
        >
          <DTextarea
            id={{this.composerId}}
            value={{readonly this.currentMessage.message}}
            type="text"
            class="chat-composer__input"
            disabled={{this.disabled}}
            autocorrect="on"
            autocapitalize="sentences"
            placeholder={{this.placeholder}}
            rows={{1}}
            {{did-insert this.setupTextareaInteractor}}
            {{on "input" this.onInput}}
            {{on "keydown" this.onKeyDown}}
            {{on "focusin" this.onTextareaFocusIn}}
            {{on "focusin" (fn this.computeIsFocused true)}}
            {{on "focusout" (fn this.computeIsFocused false)}}
            {{did-insert this.setupAutocomplete}}
            {{did-insert this.composer.focus}}
            data-chat-composer-context={{this.context}}
          />
        </div>

        {{#if this.inlineButtons.length}}
          {{#each this.inlineButtons as |button|}}
            <Chat::Composer::Button
              @icon={{button.icon}}
              class="-{{button.id}}"
              disabled={{or this.disabled button.disabled}}
              tabindex={{if button.disabled -1 0}}
              {{on
                "click"
                (fn this.handleInlineButonAction button.action)
                bubbles=false
              }}
              {{on "focus" (fn this.computeIsFocused true)}}
              {{on "blur" (fn this.computeIsFocused false)}}
            />
          {{/each}}

          <Chat::Composer::Separator />
        {{/if}}

        <Chat::Composer::Button
          @icon="paper-plane"
          class="-send"
          title={{i18n "chat.composer.send"}}
          disabled={{or this.disabled (not this.sendEnabled)}}
          tabindex={{if this.sendEnabled 0 -1}}
          {{on "click" this.onSend}}
          {{on "focus" (fn this.computeIsFocused true)}}
          {{on "blur" (fn this.computeIsFocused false)}}
        />
      </div>
    </div>
  </div>

  {{#if this.canAttachUploads}}
    <ChatComposerUploads
      @fileUploadElementId={{this.fileUploadElementId}}
      @onUploadChanged={{this.onUploadChanged}}
      @existingUploads={{this.currentMessage.uploads}}
      @uploadDropZone={{@uploadDropZone}}
      @composerInputEl={{this.composer.textarea.element}}
    />
  {{/if}}

  {{#if this.shouldRenderReplyingIndicator}}
    <div class="chat-replying-indicator-container">
      <ChatReplyingIndicator
        @presenceChannelName={{this.presenceChannelName}}
      />
    </div>
  {{/if}}

  <ChatEmojiPicker
    @context={{this.context}}
    @didSelectEmoji={{this.onSelectEmoji}}
  />
</div>