update

frontend/src/pages/user/messages/Home.vue

@@ -92,6 +92,7 @@ export default {
       handler: function (val) {
         if (val && val.length > 0) {
           this.current_thread = val[0]
+          this.clearUnreadMessageBy(val[0])
         }
       },
       deep: false
@@ -118,6 +119,13 @@ export default {
     },
     selectConversation(conversation) {
       this.current_thread = conversation
+      this.clearUnreadMessageBy(conversation)
+    },
+    clearUnreadMessageBy(current) {
+      const sender = current.conversation.messages?.[0].raw_data.sender_id
+      if (sender) {
+        this.$store.dispatch('basic/readMessageBy', sender)
+      }
     },
     sendMessage(conversation_id) {
       MessageHubApi.sendMessageToConversation(conversation_id, this.writtenMessage)

frontend/src/plugins/store/basic.js

@@ -45,6 +45,9 @@ const basicStore = {
               console.log('downstream_web_socket closed')
             }
           )
+        },
+        readMessageBy(state, sender) {
+          delete state.unreadCountMapper?.[sender]
         }
     },
     actions: {
@@ -53,6 +56,9 @@ const basicStore = {
       },
       initWebsocket(context, token) {
         context.commit('initWebsocket', token)
+      },
+      readMessageBy(context, sender) {
+        context.commit('readMessageBy', sender)
       }
     },
     getters: {