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

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

<ChatMessageSeparator @message={{this.message}} />

{{#if (and this.showActions this.site.mobileView this.chatMessageActionsMobileAnchor)}}
  {{#in-element this.chatMessageActionsMobileAnchor}}
    <ChatMessageActionsMobile @message={{this.message}} @emojiReactions={{this.emojiReactions}} @secondaryButtons={{this.secondaryButtons}} @messageActions={{this.messageActions}} @messageCapabilities={{this.messageCapabilities}} @onHoverMessage={{this.onHoverMessage}} />
  {{/in-element}}
{{/if}}

{{#if (and this.showActions this.site.desktopView this.chatMessageActionsDesktopAnchor)}}
  {{#in-element this.chatMessageActionsDesktopAnchor}}
    <ChatMessageActionsDesktop @message={{this.message}} @emojiReactions={{this.emojiReactions}} @secondaryButtons={{this.secondaryButtons}} @messageActions={{this.messageActions}} @messageCapabilities={{this.messageCapabilities}} />
  {{/in-element}}
{{/if}}

<div
  {{on "touchmove" this.handleTouchMove passive=true}}
  {{on "touchstart" this.handleTouchStart passive=true}}
  {{on "touchend" this.handleTouchEnd passive=true}}
  {{on "mouseenter" (fn this.onHoverMessage this.message (hash desktopOnly=true))}}
  {{on "mouseleave" (fn this.onHoverMessage null (hash desktopOnly=true))}}
  {{chat/track-message-visibility}}
  class={{concat-class
    "chat-message-container"
    (if this.isHovered "is-hovered")
    (if this.selectingMessages "selecting-messages")
  }}
  data-id={{or this.message.id this.message.stagedId}}
>
  {{#if this.show}}
    {{#if this.selectingMessages}}
      <Input @type="checkbox" class="chat-message-selector" @checked={{this.message.selected}} {{on "click" (action "toggleChecked")}} />
    {{/if}}

    {{#if this.deletedAndCollapsed}}
      <div class="chat-message-deleted">
        <DButton @class="btn-flat chat-message-expand" @action={{action "expand"}} @label="chat.deleted" />
      </div>
    {{else if this.hiddenAndCollapsed}}
      <div class="chat-message-hidden">
        <DButton @class="btn-flat chat-message-expand" @action={{action "expand"}} @label="chat.hidden" />
      </div>
    {{else}}
      <div class={{this.chatMessageClasses}}>
        {{#if this.message.in_reply_to}}
          <div
            role="button"
            onclick={{action "viewReply"}}
            class="chat-reply is-direct-reply"
          >
            {{d-icon "share" title="chat.in_reply_to"}}

            {{#if this.message.in_reply_to.chat_webhook_event.emoji}}
              <ChatEmojiAvatar @emoji={{this.message.in_reply_to.chat_webhook_event.emoji}} />
            {{else}}
              <ChatUserAvatar @user={{this.message.in_reply_to.user}} />
            {{/if}}

            <span class="chat-reply__excerpt">
              {{replace-emoji this.message.in_reply_to.excerpt}}
            </span>
          </div>
        {{/if}}

        {{#if this.hideUserInfo}}
          <ChatMessageLeftGutter @message={{@message}} @details={{@details}} />
        {{else}}
          <ChatMessageAvatar @message={{@message}} />
        {{/if}}

        <div class="chat-message-content">
          {{#unless this.hideUserInfo}}
            <ChatMessageInfo @message={{@message}} @details={{@details}} />
          {{/unless}}

          <ChatMessageText @cooked={{this.message.cooked}} @uploads={{this.message.uploads}} @edited={{this.message.edited}}>
            {{#if this.hasReactions}}
              <div class="chat-message-reaction-list">
                {{#if this.reactionLabel}}
                  <div class="reaction-users-list">
                    {{replace-emoji this.reactionLabel}}
                  </div>
                {{/if}}

                {{#each-in this.message.reactions as |emoji reactionAttrs|}}
                  <ChatMessageReaction @reaction={{hash
                      emoji=emoji
                      users=reactionAttrs.users
                      count=reactionAttrs.count
                      reacted=reactionAttrs.reacted
                    }} @react={{action "react"}} @showUsersList={{true}} />
                {{/each-in}}

                {{#if this.canInteractWithChat}}
                  {{#unless this.site.mobileView}}
                    <DButton @class="chat-message-react-btn" @action={{action "startReactionForReactionList"}} @icon="discourse-emojis" @title="chat.react" />
                  {{/unless}}
                {{/if}}
              </div>
            {{/if}}
          </ChatMessageText>

          {{#if this.message.error}}
            <div class="chat-send-error">
              {{#if (eq this.message.error "network_error")}}
                <DButton
                  class="retry-staged-message-btn"
                  @action={{fn this.resendStagedMessage this.message}}
                >
                  {{d-icon "exclamation-circle"}}
                  <span class="retry-staged-message-btn__title">
                    {{i18n "chat.retry_staged_message.title"}}
                  </span>
                  <span class="retry-staged-message-btn__action">
                    {{i18n "chat.retry_staged_message.action"}}
                  </span>
                </DButton>
              {{else}}
                {{this.message.error}}
              {{/if}}
            </div>
          {{/if}}

          {{#if this.mentionWarning}}
            <div class="alert alert-info chat-message-mention-warning">
              {{#if this.mentionWarning.invitationSent}}
                {{d-icon "check"}}
                <span>
                  {{i18n
                    "chat.mention_warning.invitations_sent"
                    count=this.mentionWarning.without_membership.length
                  }}
                </span>
              {{else}}
                <FlatButton @class="dismiss-mention-warning" @title="chat.mention_warning.dismiss" @action={{action "dismissMentionWarning"}} @icon="times" />

                {{#if this.mentionWarning.cannot_see}}
                  <p class="warning-item cannot-see">{{this.mentionedCannotSeeText}}</p>
                {{/if}}

                {{#if this.mentionWarning.without_membership}}
                  <p class="warning-item without-membership">
                    <span>{{this.mentionedWithoutMembershipText}}</span>
                    <a
                      class="invite-link"
                      href
                      onclick={{action "inviteMentioned"}}
                    >
                      {{i18n "chat.mention_warning.invite"}}
                    </a>
                  </p>
                {{/if}}
                {{#if this.mentionWarning.group_mentions_disabled}}
                  <p class="warning-item">{{this.groupsWithDisabledMentions}}</p>
                {{/if}}

                {{#if this.mentionWarning.groups_with_too_many_members}}
                  <p class="warning-item">{{this.groupsWithTooManyMembers}}</p>
                {{/if}}
              {{/if}}
            </div>
          {{/if}}
        </div>
      </div>
    {{/if}}
  {{/if}}
</div>