get rid of older messages when scrolling down in chat to keep it from bloating dom

3 files changed, 24 insertions, 0 deletions

diff --git a/src/components/chat/chat.js b/src/components/chat/chat.js
index e57fcb91..f446f25b 100644
--- a/src/components/chat/chat.js
+++ b/src/components/chat/chat.js
@@ -241,6 +241,7 @@ const Chat = {
         this.fetchChat({ maxId: this.currentChatMessageService.minId })
       } else if (this.bottomedOut(JUMP_TO_BOTTOM_BUTTON_VISIBILITY_OFFSET)) {
         this.jumpToBottomButtonVisible = false
+        this.$store.dispatch('cullOlderMessages', this.currentChatMessageService.chatId)
         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
diff --git a/src/modules/chats.js b/src/modules/chats.js
index 0a373d88..69d683bd 100644
--- a/src/modules/chats.js
+++ b/src/modules/chats.js
@@ -115,6 +115,9 @@ const chats = {
     },
     handleMessageError ({ commit }, value) {
       commit('handleMessageError', { commit, ...value })
+    },
+    cullOlderMessages ({ commit }, chatId) {
+      commit('cullOlderMessages', chatId)
     }
   },
   mutations: {
@@ -227,6 +230,9 @@ const chats = {
     handleMessageError (state, { chatId, fakeId, isRetry }) {
       const chatMessageService = state.openedChatMessageServices[chatId]
       chatService.handleMessageError(chatMessageService, fakeId, isRetry)
+    },
+    cullOlderMessages (state, chatId) {
+      chatService.cullOlderMessages(state.openedChatMessageServices[chatId])
     }
   }
 }
diff --git a/src/services/chat_service/chat_service.js b/src/services/chat_service/chat_service.js
index e653ebc1..92ff689d 100644
--- a/src/services/chat_service/chat_service.js
+++ b/src/services/chat_service/chat_service.js
@@ -48,6 +48,22 @@ const deleteMessage = (storage, messageId) => {
   }
 }
 
+const cullOlderMessages = (storage) => {
+  const maxIndex = storage.messages.length
+  const minIndex = maxIndex - 50
+  if (maxIndex <= 50) return
+
+  storage.messages = _.sortBy(storage.messages, ['id'])
+  storage.minId = storage.messages[minIndex].id
+  for (const message of storage.messages) {
+    if (message.id < storage.minId) {
+      delete storage.idIndex[message.id]
+      delete storage.idempotencyKeyIndex[message.idempotency_key]
+    }
+  }
+  storage.messages = storage.messages.slice(minIndex, maxIndex)
+}
+
 const handleMessageError = (storage, fakeId, isRetry) => {
   if (!storage) { return }
   const fakeMessage = storage.idIndex[fakeId]
@@ -201,6 +217,7 @@ const ChatService = {
   empty,
   getView,
   deleteMessage,
+  cullOlderMessages,
   resetNewMessageCount,
   clear,
   handleMessageError