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

{{! template-lint-disable no-invalid-interactive }}

{{#if this.shouldRender}}
  {{#if (eq @context "channel")}}
    <ChatMessageSeparatorDate
      @fetchMessagesByDate={{@fetchMessagesByDate}}
      @message={{@message}}
    />
    <ChatMessageSeparatorNew @message={{@message}} />
  {{/if}}

  <div
    class={{concat-class
      "chat-message-container"
      (if this.pane.selectingMessages "-selectable")
      (if @message.highlighted "-highlighted")
      (if (eq @message.user.id this.currentUser.id) "is-by-current-user")
      (if @message.staged "-staged" "-persisted")
      (if this.hasActiveState "-active")
      (if @message.bookmark "-bookmarked")
      (if @message.deletedAt "-deleted")
      (if @message.selected "-selected")
      (if @message.error "-errored")
      (if this.showThreadIndicator "has-thread-indicator")
      (if this.hideUserInfo "-user-info-hidden")
      (if this.hasReply "has-reply")
    }}
    data-id={{@message.id}}
    data-thread-id={{@message.thread.id}}
    {{did-insert this.didInsertMessage}}
    {{did-update this.didUpdateMessageId @message.id}}
    {{did-update this.didUpdateMessageVersion @message.version}}
    {{will-destroy this.willDestroyMessage}}
    {{on "mouseenter" this.onMouseEnter passive=true}}
    {{on "mouseleave" this.onMouseLeave passive=true}}
    {{on "mousemove" this.onMouseMove passive=true}}
    {{chat/on-long-press
      this.onLongPressStart
      this.onLongPressEnd
      this.onLongPressCancel
    }}
    {{chat/track-message
      (fn (mut @message.visible) true)
      (fn (mut @message.visible) false)
    }}
  >
    {{#if this.show}}
      {{#if this.pane.selectingMessages}}
        <Input
          @type="checkbox"
          class="chat-message-selector"
          @checked={{@message.selected}}
          {{on "click" this.toggleChecked}}
        />
      {{/if}}

      {{#if this.deletedAndCollapsed}}
        <div class="chat-message-text -deleted">
          <DButton
            @class="btn-flat chat-message-expand"
            @action={{this.expand}}
            @translatedLabel={{this.deletedMessageLabel}}
          />
        </div>
      {{else if this.hiddenAndCollapsed}}
        <div class="chat-message-text -hidden">
          <DButton
            @class="btn-flat chat-message-expand"
            @action={{this.expand}}
            @label="chat.hidden"
          />
        </div>
      {{else}}
        <div class="chat-message">
          {{#unless this.hideReplyToInfo}}
            <ChatMessageInReplyToIndicator @message={{@message}} />
          {{/unless}}

          {{#if this.hideUserInfo}}
            <Chat::Message::LeftGutter @message={{@message}} />
          {{else}}
            <Chat::Message::Avatar @message={{@message}} />
          {{/if}}

          <div class="chat-message-content">
            <Chat::Message::Info
              @message={{@message}}
              @show={{not this.hideUserInfo}}
            />

            <ChatMessageText
              @cooked={{@message.cooked}}
              @uploads={{@message.uploads}}
              @edited={{@message.edited}}
            >
              {{#if @message.reactions.length}}
                <div class="chat-message-reaction-list">
                  {{#each @message.reactions as |reaction|}}
                    <ChatMessageReaction
                      @reaction={{reaction}}
                      @onReaction={{this.messageInteractor.react}}
                      @message={{@message}}
                      @showTooltip={{true}}
                    />
                  {{/each}}

                  {{#if this.shouldRenderOpenEmojiPickerButton}}
                    <DButton
                      @class="chat-message-react-btn"
                      @action={{this.messageInteractor.openEmojiPicker}}
                      @icon="discourse-emojis"
                      @title="chat.react"
                      @forwardEvent={{true}}
                    />
                  {{/if}}
                </div>
              {{/if}}
            </ChatMessageText>

            <Chat::Message::Error
              @message={{@message}}
              @onRetry={{@resendStagedMessage}}
            />
            <Chat::Message::MentionWarning @message={{@message}} />
          </div>

          {{#if this.showThreadIndicator}}
            <ChatMessageThreadIndicator @message={{@message}} />
          {{/if}}
        </div>
      {{/if}}
    {{/if}}
  </div>
{{/if}}