fix(desktop): fix loss messages issue

src/components/MessageList.vue

@@ -27,6 +27,7 @@ import { Component, Vue, Prop, Watch } from 'vue-property-decorator'
 import MsgRightItem from '@/components/MsgRightItem.vue'
 import MsgLeftItem from '@/components/MsgLeftItem.vue'
 import { matchTopicMethod } from '@/utils/topicMatch'
+import { SCROLL_OFFSET_MAX_NUM } from '@/utils/constant'
 
 @Component({
   components: {
@@ -48,11 +49,10 @@ export default class MessageList extends Vue {
     offset: Number.MAX_SAFE_INTEGER,
     mode: 'before',
   }
-  private scrollOffsetMaxNum: number = 100
   private isScrolling = false
   private timeout: undefined | number = undefined
 
-  @Watch('messages')
+  @Watch('messages', { deep: true })
   private handleMessagesChanged(val: MessageModel[]) {
     this.showMessages = this.getMessageMatchColor(val)
   }
@@ -95,9 +95,9 @@ export default class MessageList extends Vue {
     this.timeout = undefined
     const { scrollTop, scrollHeight, clientHeight } = this.getScrollBox()
     const scrollBottom = scrollHeight - scrollTop - clientHeight
-    if (scrollTop <= this.scrollOffsetMaxNum) {
+    if (scrollTop <= SCROLL_OFFSET_MAX_NUM) {
       this.scrollOffset = { offset: scrollTop, mode: 'before' }
-    } else if (scrollBottom <= this.scrollOffsetMaxNum) {
+    } else if (scrollBottom <= SCROLL_OFFSET_MAX_NUM) {
       this.scrollOffset = { offset: scrollBottom, mode: 'after' }
       this.$emit('hideNewMsgsTip')
     }

src/utils/constant.ts

@@ -0,0 +1,17 @@
+// Message rate threshold (messages/second) for enabling buffering
+export const MESSAGE_RATE_THRESHOLD = 30
+
+// Threshold in pixels from bottom to determine if scrolled to bottom
+export const SCROLL_BOTTOM_THRESHOLD = 500
+
+// Height compensation in pixels for scroll container
+export const SCROLL_HEIGHT_COMPENSATION = 160
+
+// Maximum number of messages to keep in memory
+export const MAX_MESSAGES_COUNT = 40
+
+// Maximum scroll offset in pixels to trigger loading more messages
+export const SCROLL_OFFSET_MAX_NUM = 100
+
+// Messages buffer time in milliseconds
+export const MESSAGES_BUFFER_TIME = 1000

src/utils/messageQueue.ts

@@ -1,5 +1,5 @@
 import { Subject, Observable } from 'rxjs'
-import { bufferTime, filter, mergeMap, map, share } from 'rxjs/operators'
+import { bufferTime, filter, share } from 'rxjs/operators'
 
 /**
  * A generic MessageQueue class for buffering and processing messages.