feat(chat): lock scroll to bottom of chat

components/ui/CaretDivider/CaretDivider.less

@@ -45,7 +45,6 @@
   }
   border-bottom: 1px solid @red;
   position: relative;
-  margin-top: @light-spacing;
-  margin-bottom: 0.5rem + @light-spacing;
+  margin: 1.25rem 0;
   pointer-events: none;
 }

components/views/chat/conversation/Conversation.html

@@ -1,4 +1,11 @@
 <div class="conversation" ref="container">
+  <UiChatEncrypted />
+  <UiChatInfiniteScroll
+    :isLoading="isLoadingMore"
+    :noMore="noMore"
+    @loadMore="loadMore"
+  />
+  <UiLoadersMessage :count="3" v-if="false" />
   <div class="messages">
     <template v-for="(item, i) of chatItems">
       <TypographyHorizontalRuleText
@@ -17,11 +24,4 @@
       />
     </template>
   </div>
-  <UiChatEncrypted />
-  <UiChatInfiniteScroll
-    :isLoading="isLoadingMore"
-    :noMore="noMore"
-    @loadMore="loadMore"
-  />
-  <UiLoadersMessage :count="3" v-if="false" />
 </div>

components/views/chat/conversation/Conversation.less

@@ -1,6 +1,6 @@
 .conversation {
   display: flex;
-  flex-direction: column-reverse;
+  flex-direction: column;
   flex: 1;
   overflow-y: auto;
   justify-content: space-between;
@@ -13,6 +13,12 @@
     margin: 0 @normal-spacing;
     padding-bottom: @normal-spacing;
     margin-top: auto;
+    display: flex;
+    flex-direction: column;
+
+    .caret_divider + .chat-message-container.show-header {
+      margin-top: 0;
+    }
   }
 
   &-infiniteScroll.is-reversed {

components/views/chat/conversation/Conversation.vue

@@ -29,6 +29,8 @@ export default Vue.extend({
       numMessages: MESSAGE_PAGE_SIZE,
       isLoadingMore: false,
       isBlurred: false,
+      mutationObserver: null as MutationObserver | null,
+      isLockedToBottom: true,
     }
   },
   computed: {
@@ -94,20 +96,53 @@ export default Vue.extend({
       }
       return messages
     },
+    isLastChatItemAuthor(): boolean {
+      const lastItem = this.chatItems.at(-1)
+      if (!lastItem || !iridium.connector) {
+        return false
+      }
+      return lastItem.message.from === iridium.connector.id
+    },
     noMore(): boolean {
       return (
         this.numMessages >=
         this.messages.filter((message) => !message.replyToId).length
       )
     },
   },
-  async mounted() {
+  mounted() {
     window.addEventListener('blur', async () => {
       this.isBlurred = true
     })
     window.addEventListener('focus', async () => {
       this.isBlurred = false
     })
+    const container = this.$refs.container as HTMLElement
+    if (!container) {
+      return
+    }
+    container.addEventListener('scroll', () => {
+      this.isLockedToBottom =
+        container.scrollTop === container.scrollHeight - container.clientHeight
+    })
+    const scrollToBottom = () => {
+      const y = container.scrollHeight - container.clientHeight
+      container.scrollTo(0, y)
+    }
+    scrollToBottom()
+    this.mutationObserver = new MutationObserver(() => {
+      if (this.isLockedToBottom || this.isLastChatItemAuthor) {
+        scrollToBottom()
+      }
+    })
+    this.mutationObserver.observe(container, {
+      childList: true,
+      subtree: true,
+      attributes: true,
+    })
+  },
+  beforeDestroy() {
+    this.mutationObserver?.disconnect()
   },
   methods: {
     loadMore() {

components/views/chat/message/Message.html

@@ -1,4 +1,8 @@
-<UiContextMenu class="chat-message-container" :items="contextMenuValues">
+<UiContextMenu
+  class="chat-message-container"
+  :class="{ 'show-header': showHeader }"
+  :items="contextMenuValues"
+>
   <MessageNotice v-if="isNotice" :message="message" />
   <div
     v-else

components/views/chat/message/Message.less

@@ -8,6 +8,12 @@
   }
 }
 
+.chat-message-container {
+  &.show-header {
+    margin-top: @normal-spacing;
+  }
+}
+
 .chat-message {
   display: grid;
   text-align: left;
@@ -46,7 +52,6 @@
       'avatar body body'
       'avatar footer footer';
     grid-template-columns: 52px auto 1fr;
-    margin-top: @normal-spacing;
 
     .timestamp {
       margin-left: @light-spacing;

locales/en-US.js

@@ -640,7 +640,7 @@ export default {
       recent_messages: 'Go to most recent messages',
       infinite_scroll: {
         loading: 'Loading ...',
-        no_more: 'No more data.',
+        no_more: 'No more messages.',
       },
       add_reaction: 'Add reaction',
     },