diff --git a/src/components/MessagesList/MessagesGroup/Message/Message.vue b/src/components/MessagesList/MessagesGroup/Message/Message.vue
index 4580ccfc6c2..bddc1bc642d 100644
--- a/src/components/MessagesList/MessagesGroup/Message/Message.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/Message.vue
@@ -235,10 +235,9 @@ the main body of the message as well as a quote.
@close="isTranslateDialogOpen = false" />
-
- {{ t('spreed', 'Unread messages') }}
-
+ v-observe-visibility="lastReadMessageVisibilityChanged"
+ class="new-message-marker">
+
{{ t('spreed', 'Unread messages') }}
@@ -1052,7 +1051,7 @@ export default {
.new-message-marker {
position: relative;
- margin: 20px 15px 20px -45px;
+ margin: 20px 15px;
border-top: 1px solid var(--color-border);
span {
diff --git a/src/components/MessagesList/MessagesGroup/MessagesSystemGroup.vue b/src/components/MessagesList/MessagesGroup/MessagesSystemGroup.vue
index efc182f81b0..2fa3703adf7 100644
--- a/src/components/MessagesList/MessagesGroup/MessagesSystemGroup.vue
+++ b/src/components/MessagesList/MessagesGroup/MessagesSystemGroup.vue
@@ -104,6 +104,12 @@ export default {
}
},
+ computed: {
+ lastReadMessageId() {
+ return this.$store.getters.conversation(this.token)?.lastReadMessage
+ }
+ },
+
watch: {
messages: {
deep: true,
@@ -186,24 +192,28 @@ export default {
let lastMessage = null
let forceNextGroup = false
for (const message of messages) {
+ const isLastRead = message.id === this.lastReadMessageId
const groupingType = this.messagesShouldBeGrouped(message, lastMessage)
if (!groupingType || forceNextGroup) {
- groups.push({ id: message.id, messages: [message], type: '', collapsed: this.groupIsCollapsed[message.id] ?? true })
+ groups.push({ id: message.id, messages: [message], type: '', collapsed: this.groupIsCollapsed[message.id] ?? !isLastRead })
forceNextGroup = false
} else {
if (groupingType === 'call_reconnected') {
- groups.push({ id: message.id, messages: [groups.at(-1).messages.pop()], type: '', collapsed: this.groupIsCollapsed[message.id] ?? true })
+ groups.push({ id: message.id, messages: [groups.at(-1).messages.pop()], type: '', collapsed: this.groupIsCollapsed[message.id] ?? !isLastRead })
forceNextGroup = true
}
groups.at(-1).messages.push(message)
groups.at(-1).type = groupingType
+ if (isLastRead) {
+ groups.at(-1).collapsed = false
+ }
}
lastMessage = message
}
groups.forEach(group => {
if (this.groupIsCollapsed[group.id] === undefined) {
- this.groupIsCollapsed[group.id] = true
+ this.groupIsCollapsed[group.id] = group.collapsed
}
})
return groups
diff --git a/src/composables/useCombinedSystemMessage.js b/src/composables/useCombinedSystemMessage.js
index e1b247f10e9..a37640c86bc 100644
--- a/src/composables/useCombinedSystemMessage.js
+++ b/src/composables/useCombinedSystemMessage.js
@@ -71,6 +71,7 @@ export function useCombinedSystemMessage() {
*/
function createCombinedSystemMessage({ id, messages, type, collapsed }) {
const combinedMessage = cloneDeep(messages[0])
+ combinedMessage.id = messages[0].id + '_combined'
// Handle cases when users reconnected to the call
if (type === 'call_reconnected') {