refactored chat into separate chat_view and chat_message_list

src/components/chat_view/chat_layout_utils.js

@@ -0,0 +1,27 @@
+// Captures a scroll position
+export const getScrollPosition = () => {
+  return {
+    scrollTop: window.scrollY,
+    scrollHeight: document.documentElement.scrollHeight,
+    offsetHeight: window.innerHeight,
+  }
+}
+
+// A helper function that is used to keep the scroll position fixed as the new elements are added to the top
+// Takes two scroll positions, before and after the update.
+export const getNewTopPosition = (previousPosition, newPosition) => {
+  return (
+    previousPosition.scrollTop +
+    (newPosition.scrollHeight - previousPosition.scrollHeight)
+  )
+}
+
+export const isBottomedOut = (offset = 0) => {
+  const scrollHeight = window.scrollY + offset
+  const totalHeight = document.documentElement.scrollHeight - window.innerHeight
+  return totalHeight <= scrollHeight
+}
+// Returns whether or not the scrollbar is visible.
+export const isScrollable = () => {
+  return document.documentElement.scrollHeight > window.innerHeight
+}

src/components/chat_view/chat_view.js

@@ -0,0 +1,433 @@
+import { throttle } from 'lodash'
+import { mapState as mapPiniaState } from 'pinia'
+import { mapGetters, mapState } from 'vuex'
+
+import ChatTitle from 'src/components/chat_title/chat_title.vue'
+import ChatMessageList from 'src/components/chat_message_list/chat_message_list.vue'
+import PostStatusForm from 'src/components/post_status_form/post_status_form.vue'
+import chatService from '../../services/chat_service/chat_service.js'
+import { buildFakeMessage } from '../../services/chat_utils/chat_utils.js'
+import { promiseInterval } from '../../services/promise_interval/promise_interval.js'
+import {
+  getNewTopPosition,
+  getScrollPosition,
+  isBottomedOut,
+  isScrollable,
+} from './chat_layout_utils.js'
+
+import { useInterfaceStore } from 'src/stores/interface.js'
+import { useOAuthStore } from 'src/stores/oauth.js'
+import { useMergedConfigStore } from 'src/stores/merged_config.js'
+
+import {
+  chatMessages,
+  getOrCreateChat,
+  sendChatMessage,
+} from 'src/api/chats.js'
+import { WSConnectionStatus } from 'src/api/websocket.js'
+
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faChevronDown, faChevronLeft } from '@fortawesome/free-solid-svg-icons'
+
+library.add(faChevronDown, faChevronLeft)
+
+const BOTTOMED_OUT_OFFSET = 10
+const JUMP_TO_BOTTOM_BUTTON_VISIBILITY_OFFSET = 10
+const SAFE_RESIZE_TIME_OFFSET = 100
+const MARK_AS_READ_DELAY = 1500
+const MAX_RETRIES = 10
+
+const Chat = {
+  components: {
+    ChatMessageList,
+    ChatTitle,
+    PostStatusForm,
+  },
+  props: {
+    messages: Array,
+  },
+  data() {
+    return {
+      jumpToBottomButtonVisible: false,
+      hoveredMessageChainId: undefined,
+      lastScrollPosition: {},
+      scrollableContainerHeight: '100%',
+      errorLoadingChat: false,
+      messageRetriers: {},
+    }
+  },
+  created() {
+    this.startFetching()
+    window.addEventListener('resize', this.handleResize)
+  },
+  mounted() {
+    window.addEventListener('scroll', this.handleScroll)
+    if (typeof document.hidden !== 'undefined') {
+      document.addEventListener(
+        'visibilitychange',
+        this.handleVisibilityChange,
+        false,
+      )
+    }
+
+    this.$nextTick(() => {
+      this.handleResize()
+    })
+  },
+  unmounted() {
+    window.removeEventListener('scroll', this.handleScroll)
+    window.removeEventListener('resize', this.handleResize)
+    if (typeof document.hidden !== 'undefined')
+      document.removeEventListener(
+        'visibilitychange',
+        this.handleVisibilityChange,
+        false,
+      )
+    this.$store.dispatch('clearCurrentChat')
+  },
+  computed: {
+    recipient() {
+      return this.currentChat && this.currentChat.account
+    },
+    recipientId() {
+      return this.$route.params.recipient_id
+    },
+    formPlaceholder() {
+      if (this.recipient) {
+        return this.$t('chats.message_user', {
+          nickname: this.recipient.screen_name_ui,
+        })
+      } else {
+        return ''
+      }
+    },
+    chatMessages() {
+      return this.currentChatMessageService?.messages
+    },
+    newMessageCount() {
+      return this.currentChatMessageService?.newMessageCount
+    },
+    streamingEnabled() {
+      return (
+        this.mergedConfig.useStreamingApi &&
+        this.mastoUserSocketStatus === WSConnectionStatus.JOINED
+      )
+    },
+    ...mapGetters([
+      'currentChat',
+      'currentChatMessageService',
+      'findOpenedChatByRecipientId',
+    ]),
+    ...mapPiniaState(useInterfaceStore, {
+      mobileLayout: (store) => store.layoutType === 'mobile',
+    }),
+    ...mapPiniaState(useMergedConfigStore, ['mergedConfig']),
+    ...mapState({
+      mastoUserSocketStatus: (state) => state.api.mastoUserSocketStatus,
+      currentUser: (state) => state.users.currentUser,
+    }),
+  },
+  watch: {
+    chatMessages() {
+      // We don't want to scroll to the bottom on a new message when the user is viewing older messages.
+      // Therefore we need to know whether the scroll position was at the bottom before the DOM update.
+      const bottomedOutBeforeUpdate = this.bottomedOut(BOTTOMED_OUT_OFFSET)
+      this.$nextTick(() => {
+        if (bottomedOutBeforeUpdate) {
+          this.scrollDown()
+        }
+      })
+    },
+    $route: function () {
+      this.startFetching()
+    },
+    mastoUserSocketStatus(newValue) {
+      if (newValue === WSConnectionStatus.JOINED) {
+        this.fetchChat({ isFirstFetch: true })
+      }
+    },
+  },
+  methods: {
+    // Used to animate the avatar near the first message of the message chain when any message belonging to the chain is hovered
+    onMessageHover({ isHovered, messageChainId }) {
+      this.hoveredMessageChainId = isHovered ? messageChainId : undefined
+    },
+    onFilesDropped() {
+      this.$nextTick(() => {
+        this.handleResize()
+      })
+    },
+    handleVisibilityChange() {
+      this.$nextTick(() => {
+        if (!document.hidden && this.bottomedOut(BOTTOMED_OUT_OFFSET)) {
+          this.scrollDown({ forceRead: true })
+        }
+      })
+    },
+    // "Sticks" scroll to bottom instead of top, helps with OSK resizing the viewport
+    handleResize(opts = {}) {
+      const { delayed = false } = opts
+
+      if (delayed) {
+        setTimeout(() => {
+          this.handleResize({ ...opts, delayed: false })
+        }, SAFE_RESIZE_TIME_OFFSET)
+        return
+      }
+
+      this.$nextTick(() => {
+        const { offsetHeight = undefined } = getScrollPosition()
+        const diff = offsetHeight - this.lastScrollPosition.offsetHeight
+        if (diff !== 0 && !this.bottomedOut()) {
+          this.$nextTick(() => {
+            window.scrollBy({ top: -Math.trunc(diff) })
+          })
+        }
+        this.lastScrollPosition = getScrollPosition()
+      })
+    },
+    scrollDown(options = {}) {
+      const { behavior = 'auto', forceRead = false } = options
+      this.$nextTick(() => {
+        window.scrollTo({
+          top: document.documentElement.scrollHeight,
+          behavior,
+        })
+      })
+      if (forceRead) {
+        this.readChat()
+      }
+    },
+    readChat() {
+      if (
+        !(
+          this.currentChatMessageService && this.currentChatMessageService.maxId
+        )
+      ) {
+        return
+      }
+      if (document.hidden) {
+        return
+      }
+      const lastReadId = this.currentChatMessageService.maxId
+      this.$store.dispatch('readChat', {
+        id: this.currentChat.id,
+        lastReadId,
+      })
+    },
+    bottomedOut(offset) {
+      return isBottomedOut(offset)
+    },
+    reachedTop() {
+      return window.scrollY <= 0
+    },
+    cullOlderCheck() {
+      window.setTimeout(() => {
+        if (this.bottomedOut(JUMP_TO_BOTTOM_BUTTON_VISIBILITY_OFFSET)) {
+          this.$store.dispatch(
+            'cullOlderMessages',
+            this.currentChatMessageService.chatId,
+          )
+        }
+      }, 5000)
+    },
+    handleScroll: throttle(function () {
+      this.lastScrollPosition = getScrollPosition()
+      if (!this.currentChat) {
+        return
+      }
+
+      if (this.reachedTop()) {
+        this.fetchChat({ maxId: this.currentChatMessageService.minId })
+      } else if (this.bottomedOut(JUMP_TO_BOTTOM_BUTTON_VISIBILITY_OFFSET)) {
+        this.jumpToBottomButtonVisible = false
+        this.cullOlderCheck()
+        if (this.newMessageCount > 0) {
+          // Use a delay before marking as read to prevent situation where new messages
+          // arrive just as you're leaving the view and messages that you didn't actually
+          // get to see get marked as read.
+          window.setTimeout(() => {
+            // Don't mark as read if the element doesn't exist, user has left chat view
+            if (this.$el) this.readChat()
+          }, MARK_AS_READ_DELAY)
+        }
+      } else {
+        this.jumpToBottomButtonVisible = true
+      }
+    }, 200),
+    handleScrollUp(positionBeforeLoading) {
+      const positionAfterLoading = getScrollPosition()
+      window.scrollTo({
+        top: getNewTopPosition(positionBeforeLoading, positionAfterLoading),
+      })
+    },
+    fetchChat({ isFirstFetch = false, fetchLatest = false, maxId }) {
+      const chatMessageService = this.currentChatMessageService
+      if (!chatMessageService) {
+        return
+      }
+      if (fetchLatest && this.streamingEnabled) {
+        return
+      }
+
+      const chatId = chatMessageService.chatId
+      const fetchOlderMessages = !!maxId
+      const sinceId = fetchLatest && chatMessageService.maxId
+
+      return chatMessages({
+        id: chatId,
+        maxId,
+        sinceId,
+        credentials: useOAuthStore().token,
+      }).then(({ data: messages }) => {
+        // Clear the current chat in case we're recovering from a ws connection loss.
+        if (isFirstFetch) {
+          chatService.clear(chatMessageService)
+        }
+
+        const positionBeforeUpdate = getScrollPosition()
+        this.$store
+          .dispatch('addChatMessages', { chatId, messages })
+          .then(() => {
+            this.$nextTick(() => {
+              if (fetchOlderMessages) {
+                this.handleScrollUp(positionBeforeUpdate)
+              }
+
+              // In vertical screens, the first batch of fetched messages may not always take the
+              // full height of the scrollable container.
+              // If this is the case, we want to fetch the messages until the scrollable container
+              // is fully populated so that the user has the ability to scroll up and load the history.
+              if (!isScrollable() && messages.length > 0) {
+                this.fetchChat({
+                  maxId: this.currentChatMessageService.minId,
+                })
+              }
+            })
+          })
+      })
+    },
+    async startFetching() {
+      let chat = this.findOpenedChatByRecipientId(this.recipientId)
+      if (!chat) {
+        try {
+          const { data } = await getOrCreateChat({
+            accountId: this.recipientId,
+            credentials: useOAuthStore().token,
+          })
+          chat = data
+        } catch (e) {
+          console.error('Error creating or getting a chat', e)
+          this.errorLoadingChat = true
+        }
+      }
+      if (chat) {
+        this.$nextTick(() => {
+          this.scrollDown({ forceRead: true })
+        })
+        this.$store.dispatch('addOpenedChat', { chat })
+        this.doStartFetching()
+      }
+    },
+    doStartFetching() {
+      this.$store.dispatch('startFetchingCurrentChat', {
+        fetcher: () =>
+          promiseInterval(() => this.fetchChat({ fetchLatest: true }), 5000),
+      })
+      this.fetchChat({ isFirstFetch: true })
+    },
+    handleAttachmentPosting() {
+      this.$nextTick(() => {
+        this.handleResize()
+        // When the posting form size changes because of a media attachment, we need an extra resize
+        // to account for the potential delay in the DOM update.
+        this.scrollDown({ forceRead: true })
+      })
+    },
+    sendMessage({ status, media, idempotencyKey }) {
+      const params = {
+        id: this.currentChat.id,
+        content: status,
+        idempotencyKey,
+      }
+
+      if (media[0]) {
+        params.mediaId = media[0].id
+      }
+
+      const fakeMessage = buildFakeMessage({
+        attachments: media,
+        chatId: this.currentChat.id,
+        content: status,
+        userId: this.currentUser.id,
+        idempotencyKey,
+      })
+
+      this.$store
+        .dispatch('addChatMessages', {
+          chatId: this.currentChat.id,
+          messages: [fakeMessage],
+        })
+        .then(() => {
+          this.handleAttachmentPosting()
+        })
+
+      return this.doSendMessage({
+        params,
+        fakeMessage,
+        retriesLeft: MAX_RETRIES,
+      })
+    },
+    doSendMessage({ params, fakeMessage, retriesLeft = MAX_RETRIES }) {
+      if (retriesLeft <= 0) return
+
+      sendChatMessage({
+        params,
+        credentials: useOAuthStore().token,
+      })
+        .then(({ data }) => {
+          this.$store.dispatch('addChatMessages', {
+            chatId: this.currentChat.id,
+            updateMaxId: false,
+            messages: [{ ...data, fakeId: fakeMessage.id }],
+          })
+
+          return data
+        })
+        .catch((error) => {
+          console.error('Error sending message', error)
+          this.$store.dispatch('handleMessageError', {
+            chatId: this.currentChat.id,
+            fakeId: fakeMessage.id,
+            isRetry: retriesLeft !== MAX_RETRIES,
+          })
+          if (
+            (error.statusCode >= 500 && error.statusCode < 600) ||
+            error.message === 'Failed to fetch'
+          ) {
+            this.messageRetriers[fakeMessage.id] = setTimeout(
+              () => {
+                this.doSendMessage({
+                  params,
+                  fakeMessage,
+                  retriesLeft: retriesLeft - 1,
+                })
+              },
+              1000 * 2 ** (MAX_RETRIES - retriesLeft),
+            )
+          }
+          return {}
+        })
+
+      return Promise.resolve(fakeMessage)
+    },
+    goBack() {
+      this.$router.push({
+        name: 'chats',
+        params: { username: this.currentUser.screen_name },
+      })
+    },
+  },
+}
+
+export default Chat

src/components/chat_view/chat_view.scss

@@ -0,0 +1,98 @@
+.chat-view {
+  display: flex;
+  height: 100%;
+
+  .chat-view-inner {
+    height: auto;
+    width: 100%;
+    overflow: visible;
+    display: flex;
+  }
+
+  .chat-view-body {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    overflow: visible;
+    min-height: calc(100vh - var(--navbar-height));
+    margin: 0;
+    border-radius: var(--roundness);
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+
+    &::after {
+      border-radius: 0;
+    }
+  }
+
+  .message-list {
+    padding: 0 0.8em;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: end;
+  }
+
+  .footer {
+    position: sticky;
+    bottom: 0;
+    z-index: 1;
+  }
+
+  .chat-view-heading {
+    grid-template-columns: auto minmax(50%, 1fr);
+  }
+
+  .go-back-button {
+    text-align: center;
+    line-height: 1;
+    height: 100%;
+    align-self: start;
+    width: var(--__panel-heading-height-inner);
+  }
+
+  .jump-to-bottom-button {
+    width: 2.5em;
+    height: 2.5em;
+    border-radius: 100%;
+    position: absolute;
+    right: 1.3em;
+    top: -3.2em;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    box-shadow: 0 1px 1px rgb(0 0 0 / 30%), 0 2px 4px rgb(0 0 0 / 30%);
+    z-index: 10;
+    transition: 0.35s all;
+    transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
+    opacity: 0;
+    visibility: hidden;
+    cursor: pointer;
+
+    &.visible {
+      opacity: 1;
+      visibility: visible;
+    }
+
+    .unread-message-count {
+      font-size: 0.8em;
+      left: 50%;
+      margin-top: -1rem;
+      padding: 0.1em;
+      border-radius: 50px;
+      position: absolute;
+    }
+
+    .chat-loading-error {
+      width: 100%;
+      display: flex;
+      align-items: flex-end;
+      height: 100%;
+
+      .error {
+        width: 100%;
+      }
+    }
+  }
+}

src/components/chat_view/chat_view.style.js

@@ -0,0 +1,13 @@
+export default {
+  name: 'Chat',
+  selector: '.ChatMessageList',
+  validInnerComponents: ['Text', 'Link', 'Icon', 'Avatar', 'ChatMessage'],
+  defaultRules: [
+    {
+      directives: {
+        background: '--bg',
+        blur: '5px',
+      },
+    },
+  ],
+}

src/components/chat_view/chat_view.vue

@@ -0,0 +1,77 @@
+<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>
+        <ChatMessageList :messages="chatMessages" />
+        <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 -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-quotes="true"
+            :disable-sensitivity-checkbox="true"
+            :disable-submit="errorLoadingChat || !currentChat"
+            :disable-preview="true"
+            :disable-draft="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_view.js"></script>
+<style src="./chat_view.scss" lang="scss" />