Merge pull request #16475 from nextcloud/fix/noid/unread-marker

src/components/MessagesList/MessagesGroup/Message/MessageItem.vue

@@ -7,7 +7,6 @@
 	<li
 		:id="`message_${message.id}`"
 		:data-message-id="message.id"
-		:data-seen="seen"
 		:data-next-message-id="nextMessageId"
 		:data-previous-message-id="previousMessageId"
 		class="message"
@@ -81,21 +80,6 @@
 			:message="message.message"
 			:rich-parameters="richParameters"
 			@close="isTranslateDialogOpen = false" />
-
-		<div
-			v-if="isLastReadMessage"
-			v-intersection-observer="lastReadMessageVisibilityChanged"
-			class="message-unread-marker">
-			<div class="message-unread-marker__wrapper">
-				<span class="message-unread-marker__text">{{ t('spreed', 'Unread messages') }}</span>
-				<NcAssistantButton
-					v-if="shouldShowSummaryOption"
-					:disabled="loading"
-					@click="generateSummary">
-					{{ t('spreed', 'Generate summary') }}
-				</NcAssistantButton>
-			</div>
-		</div>
 	</li>
 </template>
 
@@ -103,9 +87,7 @@
 import { showError, showSuccess, showWarning, TOAST_DEFAULT_TIMEOUT } from '@nextcloud/dialogs'
 import { t } from '@nextcloud/l10n'
 import { useIsSmallMobile } from '@nextcloud/vue/composables/useIsMobile'
-import { vIntersectionObserver as IntersectionObserver } from '@vueuse/components'
+import { inject } from 'vue'
-import { inject, ref } from 'vue'
-import NcAssistantButton from '@nextcloud/vue/components/NcAssistantButton'
 import MessageButtonsBar from './MessageButtonsBar/MessageButtonsBar.vue'
 import MessageForwarder from './MessageButtonsBar/MessageForwarder.vue'
 import MessageTranslateDialog from './MessageButtonsBar/MessageTranslateDialog.vue'
@@ -120,15 +102,12 @@ import PollCard from './MessagePart/PollCard.vue'
 import ReactionsWrapper from './MessagePart/ReactionsWrapper.vue'
 import { useGetThreadId } from '../../../../composables/useGetThreadId.ts'
 import { CONVERSATION, MENTION, MESSAGE, PARTICIPANT } from '../../../../constants.ts'
-import { getTalkConfig, hasTalkFeature } from '../../../../services/CapabilitiesManager.ts'
+import { getTalkConfig } from '../../../../services/CapabilitiesManager.ts'
 import { EventBus } from '../../../../services/EventBus.ts'
 import { useActorStore } from '../../../../stores/actor.ts'
 import { useChatExtrasStore } from '../../../../stores/chatExtras.ts'
 import { getItemTypeFromMessage } from '../../../../utils/getItemTypeFromMessage.ts'
 
-const canSummarizeChat = hasTalkFeature('local', 'chat-summary-api')
-const summaryThreshold = getTalkConfig('local', 'chat', 'summary-threshold') ?? 0
-
 export default {
 	name: 'MessageItem',
 
@@ -137,14 +116,9 @@ export default {
 		MessageButtonsBar,
 		MessageForwarder,
 		MessageTranslateDialog,
-		NcAssistantButton,
 		ReactionsWrapper,
 	},
 
-	directives: {
-		IntersectionObserver,
-	},
-
 	props: {
 		message: {
 			type: Object,
@@ -188,11 +162,8 @@ export default {
 
 	data() {
 		return {
-			loading: false,
 			isHovered: false,
 			isDeleting: false,
-			// whether the message was seen, only used if this was marked as last read message
-			seen: false,
 			isActionMenuOpen: false,
 			// Right side bottom bar
 			isEmojiPickerOpen: false,
@@ -209,30 +180,6 @@ export default {
 			return this.message.timestamp === 0
 		},
 
-		isLastMessage() {
-			// never displayed for the very last message
-			return !this.nextMessageId || this.message.id === this.conversation?.lastMessage?.id
-		},
-
-		visualLastLastReadMessageId() {
-			return this.$store.getters.getVisualLastReadMessageId(this.message.token)
-		},
-
-		isLastReadMessage() {
-			if (this.isLastMessage) {
-				return false
-			}
-
-			return this.message.id === this.visualLastLastReadMessageId
-		},
-
-		shouldShowSummaryOption() {
-			if (this.conversation.remoteServer || !canSummarizeChat || this.chatExtrasStore.hasChatSummaryTaskRequested(this.message.token)) {
-				return false
-			}
-			return (this.conversation.unreadMessages >= summaryThreshold)
-		},
-
 		isDeletedMessage() {
 			return this.message.messageType === MESSAGE.TYPE.COMMENT_DELETED
 		},
@@ -365,11 +312,6 @@ export default {
 
 	methods: {
 		t,
-		lastReadMessageVisibilityChanged([{ isIntersecting }]) {
-			if (isIntersecting) {
-				this.seen = true
-			}
-		},
 
 		handleMouseover() {
 			if (!this.isHovered) {
@@ -435,12 +377,6 @@ export default {
 		toggleFollowUpEmojiPicker() {
 			this.isFollowUpEmojiPickerOpen = !this.isFollowUpEmojiPickerOpen
 		},
-
-		async generateSummary() {
-			this.loading = true
-			await this.chatExtrasStore.requestChatSummary(this.message.token, this.message.id)
-			this.loading = false
-		},
 	},
 }
 </script>
@@ -569,39 +505,6 @@ export default {
 	100% { background-color: rgba(var(--color-background-hover), 0); }
 }
 
-.message-unread-marker {
-	position: relative;
-	margin: calc(4 * var(--default-grid-baseline));
-
-	&::before {
-		content: '';
-		width: 100%;
-		border-top: 1px solid var(--color-border-maxcontrast);
-		position: absolute;
-		top: 50%;
-		z-index: -1;
-	}
-
-	&__wrapper {
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		gap: calc(3 * var(--default-grid-baseline));
-		margin-inline: auto;
-		padding-inline: calc(3 * var(--default-grid-baseline));
-		width: fit-content;
-		border-radius: var(--border-radius);
-		background-color: var(--color-main-background);
-	}
-
-	&__text {
-		text-align: center;
-		white-space: nowrap;
-		font-weight: bold;
-		color: var(--color-main-text);
-	}
-}
-
 .message-buttons-bar {
 	display: flex;
 	inset-inline-end: 14px;

src/components/MessagesList/MessagesGroup/Message/SystemMessageItem.vue

@@ -7,7 +7,6 @@
 	<li
 		:id="`message_${message.id}`"
 		:data-message-id="message.id"
-		:data-seen="seen"
 		:data-next-message-id="nextMessageId"
 		:data-previous-message-id="previousMessageId"
 		class="message">
@@ -40,28 +39,11 @@
 				</NcButton>
 			</div>
 		</div>
-
-		<div
-			v-if="isLastReadMessage"
-			v-intersection-observer="lastReadMessageVisibilityChanged"
-			class="message-unread-marker">
-			<div class="message-unread-marker__wrapper">
-				<span class="message-unread-marker__text">{{ t('spreed', 'Unread messages') }}</span>
-				<NcAssistantButton
-					v-if="shouldShowSummaryOption"
-					:disabled="loading"
-					@click="generateSummary">
-					{{ t('spreed', 'Generate summary') }}
-				</NcAssistantButton>
-			</div>
-		</div>
 	</li>
 </template>
 
 <script>
 import { t } from '@nextcloud/l10n'
-import { vIntersectionObserver as IntersectionObserver } from '@vueuse/components'
-import NcAssistantButton from '@nextcloud/vue/components/NcAssistantButton'
 import NcButton from '@nextcloud/vue/components/NcButton'
 import IconUnfoldLessHorizontal from 'vue-material-design-icons/UnfoldLessHorizontal.vue'
 import IconUnfoldMoreHorizontal from 'vue-material-design-icons/UnfoldMoreHorizontal.vue'
@@ -69,11 +51,6 @@ import DefaultParameter from './MessagePart/DefaultParameter.vue'
 import MentionChip from './MessagePart/MentionChip.vue'
 import MessageBody from './MessagePart/MessageBody.vue'
 import { MENTION } from '../../../../constants.ts'
-import { getTalkConfig, hasTalkFeature } from '../../../../services/CapabilitiesManager.ts'
-import { useChatExtrasStore } from '../../../../stores/chatExtras.ts'
-
-const canSummarizeChat = hasTalkFeature('local', 'chat-summary-api')
-const summaryThreshold = getTalkConfig('local', 'chat', 'summary-threshold') ?? 0
 
 export default {
 	name: 'MessageItem',
@@ -82,14 +59,9 @@ export default {
 		IconUnfoldLessHorizontal,
 		IconUnfoldMoreHorizontal,
 		MessageBody,
-		NcAssistantButton,
 		NcButton,
 	},
 
-	directives: {
-		IntersectionObserver,
-	},
-
 	props: {
 		message: {
 			type: Object,
@@ -138,49 +110,7 @@ export default {
 
 	emits: ['toggleCombinedSystemMessage'],
 
-	setup() {
-		return {
-			chatExtrasStore: useChatExtrasStore(),
-		}
-	},
-
-	data() {
-		return {
-			loading: false,
-			// whether the message was seen, only used if this was marked as last read message
-			seen: false,
-		}
-	},
-
 	computed: {
-		isLastMessage() {
-			// never displayed for the very last message
-			return !this.nextMessageId || this.message.id === this.conversation?.lastMessage?.id
-		},
-
-		visualLastLastReadMessageId() {
-			return this.$store.getters.getVisualLastReadMessageId(this.message.token)
-		},
-
-		isLastReadMessage() {
-			if (this.isLastMessage) {
-				return false
-			}
-
-			if (this.message.id === this.visualLastLastReadMessageId) {
-				return !this.isCollapsedSystemMessage || this.message.id !== this.lastCollapsedMessageId
-			}
-
-			return this.isCombinedSystemMessage && this.lastCollapsedMessageId === this.visualLastLastReadMessageId
-		},
-
-		shouldShowSummaryOption() {
-			if (this.conversation.remoteServer || !canSummarizeChat || this.chatExtrasStore.hasChatSummaryTaskRequested(this.message.token)) {
-				return false
-			}
-			return (this.conversation.unreadMessages >= summaryThreshold)
-		},
-
 		conversation() {
 			return this.$store.getters.conversation(this.message.token)
 		},
@@ -210,21 +140,10 @@ export default {
 
 	methods: {
 		t,
-		lastReadMessageVisibilityChanged([{ isIntersecting }]) {
-			if (isIntersecting) {
-				this.seen = true
-			}
-		},
 
 		toggleCombinedSystemMessage() {
 			this.$emit('toggleCombinedSystemMessage')
 		},
-
-		async generateSummary() {
-			this.loading = true
-			await this.chatExtrasStore.requestChatSummary(this.message.token, this.message.id)
-			this.loading = false
-		},
 	},
 }
 </script>
@@ -262,39 +181,6 @@ export default {
 	}
 }
 
-.message-unread-marker {
-	position: relative;
-	margin: calc(4 * var(--default-grid-baseline));
-
-	&::before {
-		content: '';
-		width: 100%;
-		border-top: 1px solid var(--color-border-maxcontrast);
-		position: absolute;
-		top: 50%;
-		z-index: -1;
-	}
-
-	&__wrapper {
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		gap: calc(3 * var(--default-grid-baseline));
-		margin-inline: auto;
-		padding-inline: calc(3 * var(--default-grid-baseline));
-		width: fit-content;
-		border-radius: var(--border-radius);
-		background-color: var(--color-main-background);
-	}
-
-	&__text {
-		text-align: center;
-		white-space: nowrap;
-		font-weight: bold;
-		color: var(--color-main-text);
-	}
-}
-
 .message-buttons-bar {
 	background-color: var(--color-main-background);
 	border-radius: var(--border-radius-element, calc(var(--default-clickable-area) / 2));

src/components/MessagesList/MessagesGroup/MessagesSystemGroup.vue

@@ -91,12 +91,6 @@ export default {
 		}
 	},
 
-	computed: {
-		lastReadMessageId() {
-			return this.$store.getters.conversation(this.token)?.lastReadMessage
-		},
-	},
-
 	watch: {
 		messages: {
 			deep: true,
@@ -106,10 +100,6 @@ export default {
 				this.updateCollapsedState()
 			},
 		},
-
-		lastReadMessageId() {
-			this.updateCollapsedState()
-		},
 	},
 
 	methods: {
@@ -188,11 +178,7 @@ export default {
 
 		updateCollapsedState() {
 			for (const group of this.messagesGroupedBySystemMessage) {
-				const isLastReadInsideGroup = this.lastReadMessageId >= group.id && this.lastReadMessageId < group.lastId
+				if (this.groupIsCollapsed[group.id] !== undefined) {
-				if (isLastReadInsideGroup) {
-					// If the last read message is inside the group, we should show the group expanded
-					group.collapsed = false
-				} else if (this.groupIsCollapsed[group.id] !== undefined) {
 					// If the group was collapsed before, we should keep it collapsed
 					group.collapsed = this.groupIsCollapsed[group.id]
 				} else {

src/components/MessagesList/MessagesList.vue

@@ -51,14 +51,30 @@
 						role="heading"
 						aria-level="3" />
 				</li>
-				<component
+				<template
-					:is="messagesGroupComponent[group.type]"
 					v-for="group in list"
-					:key="group.id"
+					:key="group.id">
-					:token="token"
+					<component
-					:messages="group.messages"
+						:is="messagesGroupComponent[group.type]"
-					:previous-message-id="group.previousMessageId"
+						:token="token"
-					:next-message-id="group.nextMessageId" />
+						:messages="group.messages"
+						:previous-message-id="group.previousMessageId"
+						:next-message-id="group.nextMessageId" />
+					<div
+						v-if="isLastReadMessage(group)"
+						v-intersection-observer="lastReadMessageVisibilityChanged"
+						class="message-unread-marker">
+						<div class="message-unread-marker__wrapper">
+							<span class="message-unread-marker__text">{{ t('spreed', 'Unread messages') }}</span>
+							<NcAssistantButton
+								v-if="shouldShowSummaryOption"
+								:disabled="loadingSummary"
+								@click="generateSummary">
+								{{ t('spreed', 'Generate summary') }}
+							</NcAssistantButton>
+						</div>
+					</div>
+				</template>
 			</ul>
 
 			<TransitionWrapper name="fade">
@@ -75,8 +91,10 @@
 
 <script>
 import { n, t } from '@nextcloud/l10n'
+import { vIntersectionObserver as IntersectionObserver } from '@vueuse/components'
 import debounce from 'debounce'
-import { computed, provide } from 'vue'
+import { computed, provide, ref } from 'vue'
+import NcAssistantButton from '@nextcloud/vue/components/NcAssistantButton'
 import NcEmptyContent from '@nextcloud/vue/components/NcEmptyContent'
 import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
 import IconMessageOutline from 'vue-material-design-icons/MessageOutline.vue'
@@ -90,6 +108,7 @@ import { useGetMessages } from '../../composables/useGetMessages.ts'
 import { useGetThreadId } from '../../composables/useGetThreadId.ts'
 import { ATTENDEE, CONVERSATION } from '../../constants.ts'
 import { CHAT_STYLE } from '../../constants.ts'
+import { getTalkConfig, hasTalkFeature } from '../../services/CapabilitiesManager.ts'
 import { EventBus } from '../../services/EventBus.ts'
 import { useChatStore } from '../../stores/chat.ts'
 import { useChatExtrasStore } from '../../stores/chatExtras.ts'
@@ -98,6 +117,8 @@ import { convertToUnix } from '../../utils/formattedTime.ts'
 
 const SCROLL_TOLERANCE = 10
 const LOAD_HISTORY_THRESHOLD = 800
+const canSummarizeChat = hasTalkFeature('local', 'chat-summary-api')
+const summaryThreshold = getTalkConfig('local', 'chat', 'summary-threshold') ?? 0
 
 const messagesGroupComponent = {
 	system: MessagesSystemGroup,
@@ -110,11 +131,16 @@ export default {
 		IconMessageOutline,
 		LoadingPlaceholder,
 		NcEmptyContent,
+		NcAssistantButton,
 		NcLoadingIcon,
 		StaticDateTime,
 		TransitionWrapper,
 	},
 
+	directives: {
+		IntersectionObserver,
+	},
+
 	provide() {
 		return {
 			getMessagesListScroller: () => this.$refs.scroller,
@@ -206,6 +232,10 @@ export default {
 			stickyDate: null,
 
 			endScrollTimeout: () => {},
+
+			isUnreadMarkerSeen: false,
+
+			loadingSummary: false,
 		}
 	},
 
@@ -255,6 +285,13 @@ export default {
 		currentDay() {
 			return convertToUnix(new Date().setHours(0, 0, 0, 0))
 		},
+
+		shouldShowSummaryOption() {
+			if (this.conversation.remoteServer || !canSummarizeChat || this.chatExtrasStore.hasChatSummaryTaskRequested(this.token)) {
+				return false
+			}
+			return (this.conversation.unreadMessages >= summaryThreshold)
+		},
 	},
 
 	watch: {
@@ -277,6 +314,7 @@ export default {
 		token(newToken, oldToken) {
 			// Expire older messages when navigating to another conversation
 			this.$store.dispatch('easeMessageList', { token: oldToken })
+			this.isUnreadMarkerSeen = false
 		},
 
 		messagesList: {
@@ -323,6 +361,16 @@ export default {
 				})
 			}
 		},
+
+		visualLastReadMessageId(newValue, oldValue) {
+			if (newValue === oldValue) {
+				return
+			}
+			const newGroups = this.prepareMessagesGroups(this.messagesList)
+			this.softUpdateByDateGroups(this.messagesGroupedByDateByAuthor, newGroups)
+			this.isUnreadMarkerSeen = false
+		},
+
 	},
 
 	mounted() {
@@ -488,6 +536,12 @@ export default {
 				return false // No previous message
 			}
 
+			// If there is last read message visually, the group ends there
+			if ((message1.id === this.visualLastReadMessageId && message2.id > message1.id)
+				|| (message2.id === this.visualLastReadMessageId && message1.id > message2.id)) {
+				return false
+			}
+
 			if (!!message1.lastEditTimestamp || !!message2.lastEditTimestamp) {
 				return false // Edited messages are not grouped
 			}
@@ -813,7 +867,7 @@ export default {
 			const lastReadMessageElement = this.getVisualLastReadMessageElement()
 
 			// first unread message has not been seen yet, so don't move it
-			if (lastReadMessageElement && lastReadMessageElement.getAttribute('data-seen') !== 'true') {
+			if (!this.isUnreadMarkerSeen) {
 				return
 			}
 
@@ -1036,6 +1090,31 @@ export default {
 				this.debounceHandleScroll({ skipHeightCheck: true })
 			}
 		},
+
+		isLastReadMessage(group) {
+			if (!group.nextMessageId) {
+				return false
+			}
+
+			const message = group.messages.at(-1)
+			if (this.conversation.lastMessage && message.id >= this.conversation.lastMessage?.id) {
+				return false
+			}
+
+			return message.id === this.visualLastReadMessageId
+		},
+
+		lastReadMessageVisibilityChanged([{ isIntersecting }]) {
+			if (isIntersecting) {
+				this.isUnreadMarkerSeen = true
+			}
+		},
+
+		async generateSummary() {
+			this.loadingSummary = true
+			await this.chatExtrasStore.requestChatSummary(this.token, this.visualLastReadMessageId)
+			this.loadingSummary = false
+		},
 	},
 }
 </script>
@@ -1139,4 +1218,37 @@ export default {
 	opacity: 1;
 	transition: opacity 0s;
 }
+
+.message-unread-marker {
+	position: relative;
+	margin: calc(4 * var(--default-grid-baseline));
+
+	&::before {
+		content: '';
+		width: 100%;
+		border-top: 1px solid var(--color-border-maxcontrast);
+		position: absolute;
+		top: 50%;
+		z-index: -1;
+	}
+
+	&__wrapper {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		gap: calc(3 * var(--default-grid-baseline));
+		margin-inline: auto;
+		padding-inline: calc(3 * var(--default-grid-baseline));
+		width: fit-content;
+		border-radius: var(--border-radius);
+		background-color: var(--color-main-background);
+	}
+
+	&__text {
+		text-align: center;
+		white-space: nowrap;
+		font-weight: bold;
+		color: var(--color-main-text);
+	}
+}
 </style>