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') {