akkoma-fe/src/components/chat/chat.vue

<template>
  <div class="chat-view">
    <div class="chat-view-inner">
      <div
        ref="inner"
        class="panel-default panel chat-view-body"
      >
        <div
          ref="header"
          class="panel-heading -sticky chat-view-heading"
        >
          <button
            class="button-unstyled go-back-button"
            @click="goBack"
          >
            <FAIcon
              size="lg"
              icon="chevron-left"
            />
          </button>
          <div class="title text-center">
            <ChatTitle
              :user="recipient"
              :with-avatar="true"
            />
          </div>
        </div>
        <div
          class="message-list"
          :style="{ height: scrollableContainerHeight }"
        >
          <template v-if="!errorLoadingChat">
            <ChatMessage
              v-for="chatViewItem in chatViewItems"
              :key="chatViewItem.id"
              :author="recipient"
              :chat-view-item="chatViewItem"
              :hovered-message-chain="chatViewItem.messageChainId === hoveredMessageChainId"
              @hover="onMessageHover"
            />
          </template>
          <div
            v-else
            class="chat-loading-error"
          >
            <div class="alert error">
              {{ $t('chats.error_loading_chat') }}
            </div>
          </div>
        </div>
        <div
          ref="footer"
          class="panel-body footer"
        >
          <div
            class="jump-to-bottom-button"
            :class="{ 'visible': jumpToBottomButtonVisible }"
            @click="scrollDown({ behavior: 'smooth' })"
          >
            <span>
              <FAIcon icon="chevron-down" />
              <div
                v-if="newMessageCount"
                class="badge badge-notification unread-chat-count unread-message-count"
              >
                {{ newMessageCount }}
              </div>
            </span>
          </div>
          <PostStatusForm
            :disable-subject="true"
            :disable-scope-selector="true"
            :disable-notice="true"
            :disable-lock-warning="true"
            :disable-polls="true"
            :disable-sensitivity-checkbox="true"
            :disable-submit="errorLoadingChat || !currentChat"
            :disable-preview="true"
            :optimistic-posting="true"
            :post-handler="sendMessage"
            :submit-on-enter="!mobileLayout"
            :preserve-focus="!mobileLayout"
            :auto-focus="!mobileLayout"
            :placeholder="formPlaceholder"
            :file-limit="1"
            max-height="160"
            emoji-picker-placement="top"
            @resize="handleResize"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script src="./chat.js"></script>
<style lang="scss">
@import '../../_variables.scss';
@import './chat.scss';
</style>