[stable30] feat: add 'Generate summary' integration: frontend ✨

src/components/MessagesList/MessagesGroup/Message/Message.spec.js

@@ -522,7 +522,7 @@ describe('Message.vue', () => {
 				provide: injected,
 			})
 
-			const marker = wrapper.find('.new-message-marker')
+			const marker = wrapper.find('.message-unread-marker')
 			expect(marker.exists()).toBe(true)
 
 			expect(IntersectionObserver).toHaveBeenCalled()
@@ -559,7 +559,7 @@ describe('Message.vue', () => {
 				provide: injected,
 			})
 
-			const marker = wrapper.find('.new-message-marker')
+			const marker = wrapper.find('.message-unread-marker')
 			expect(marker.exists()).toBe(false)
 		})
 	})

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

@@ -60,8 +60,8 @@
 					:title="t('spreed', 'Show or collapse system messages')"
 					@click="toggleCombinedSystemMessage">
 					<template #icon>
-						<UnfoldMore v-if="isCombinedSystemMessageCollapsed" />
-						<UnfoldLess v-else />
+						<IconUnfoldMore v-if="isCombinedSystemMessageCollapsed" />
+						<IconUnfoldLess v-else />
 					</template>
 				</NcButton>
 			</div>
@@ -79,17 +79,27 @@
 
 		<div v-if="isLastReadMessage"
 			v-intersection-observer="lastReadMessageVisibilityChanged"
-			class="new-message-marker">
-			<span>{{ t('spreed', 'Unread messages') }}</span>
+			class="message-unread-marker">
+			<div class="message-unread-marker__wrapper">
+				<span class="message-unread-marker__text">{{ t('spreed', 'Unread messages') }}</span>
+				<NcButton v-if="shouldShowSummaryOption"
+					@click="generateSummary">
+					<template #icon>
+						<IconCreation />
+					</template>
+					{{ t('spreed', 'Generate summary') }}
+				</NcButton>
+			</div>
 		</div>
 	</li>
 </template>
 
 <script>
 import { vIntersectionObserver as IntersectionObserver } from '@vueuse/components'
 
-import UnfoldLess from 'vue-material-design-icons/UnfoldLessHorizontal.vue'
-import UnfoldMore from 'vue-material-design-icons/UnfoldMoreHorizontal.vue'
+import IconCreation from 'vue-material-design-icons/Creation.vue'
+import IconUnfoldLess from 'vue-material-design-icons/UnfoldLessHorizontal.vue'
+import IconUnfoldMore from 'vue-material-design-icons/UnfoldMoreHorizontal.vue'
 
 import { showError, showSuccess, showWarning, TOAST_DEFAULT_TIMEOUT } from '@nextcloud/dialogs'
 import { t } from '@nextcloud/l10n'
@@ -110,24 +120,27 @@ import Poll from './MessagePart/Poll.vue'
 import Reactions from './MessagePart/Reactions.vue'
 
 import { CONVERSATION, MENTION, PARTICIPANT } from '../../../../constants.js'
-import { getTalkConfig } from '../../../../services/CapabilitiesManager.ts'
+import { getTalkConfig, hasTalkFeature } from '../../../../services/CapabilitiesManager.ts'
 import { EventBus } from '../../../../services/EventBus.ts'
 import { useChatExtrasStore } from '../../../../stores/chatExtras.js'
 import { getItemTypeFromMessage } from '../../../../utils/getItemTypeFromMessage.ts'
 
+const canSummarizeChat = hasTalkFeature('local', 'chat-summary-api')
+const summaryThreshold = getTalkConfig('local', 'chat', 'summary-threshold') ?? 0
+
 export default {
 	name: 'Message',
 
 	components: {
+		IconCreation,
+		IconUnfoldLess,
+		IconUnfoldMore,
 		MessageBody,
 		MessageButtonsBar,
 		MessageForwarder,
 		MessageTranslateDialog,
 		NcButton,
 		Reactions,
-		// Icons
-		UnfoldLess,
-		UnfoldMore,
 	},
 
 	directives: {
@@ -222,9 +235,19 @@ export default {
 			if (this.isLastMessage) {
 				return false
 			}
-			return (!this.isCollapsedSystemMessage && this.message.id === this.visualLastLastReadMessageId)
-				|| (this.isCollapsedSystemMessage && this.message.id === this.visualLastLastReadMessageId && this.message.id !== this.lastCollapsedMessageId)
-				|| (this.isCombinedSystemMessage && this.lastCollapsedMessageId === this.visualLastLastReadMessageId)
+
+			if (this.message.id === this.visualLastLastReadMessageId) {
+				return !this.isCollapsedSystemMessage || this.message.id !== this.lastCollapsedMessageId
+			}
+
+			return this.isCombinedSystemMessage && this.lastCollapsedMessageId === this.visualLastLastReadMessageId
+		},
+
+		shouldShowSummaryOption() {
+			if (!canSummarizeChat || this.chatExtrasStore.hasChatSummaryTaskRequested(this.message.token)) {
+				return false
+			}
+			return (this.conversation.unreadMessages >= summaryThreshold)
 		},
 
 		isSystemMessage() {
@@ -424,6 +447,10 @@ export default {
 		toggleFollowUpEmojiPicker() {
 			this.isFollowUpEmojiPickerOpen = !this.isFollowUpEmojiPickerOpen
 		},
+
+		async generateSummary() {
+			await this.chatExtrasStore.requestChatSummary(this.message.token, this.message.id)
+		}
 	},
 }
 </script>
@@ -467,23 +494,37 @@ export default {
 	100% { background-color: rgba(var(--color-background-hover), 0); }
 }
 
-.new-message-marker {
+.message-unread-marker {
 	position: relative;
-	margin: 20px 15px;
-	border-top: 1px solid var(--color-border);
+	margin: calc(4 * var(--default-grid-baseline));
 
-	span {
+	&::before {
+		content: '';
+		width: 100%;
+		border-top: 1px solid var(--color-border-maxcontrast);
 		position: absolute;
-		top: 0;
-		left: 50%;
-		transform: translateX(-50%) translateY(-50%);
-		padding: 0 7px 0 7px;
-		text-align: center;
-		white-space: nowrap;
-		color: var(--color-text-light);
+		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 {

src/components/MessagesList/MessagesList.vue

@@ -1015,7 +1015,7 @@ export default {
 					// e.g: it is the last message in collapsed group
 					// unread marker is set to the combined system message.
 					// Look for the unread marker itself
-					el = document.querySelector('.new-message-marker')
+					el = document.querySelector('.message-unread-marker')
 					if (el) {
 						el = el.closest('.message')
 					} else {

src/components/NewMessage/NewMessage.vue

@@ -38,6 +38,8 @@
 					:user-absence="userAbsence"
 					:display-name="conversation.displayName" />
 
+				<NewMessageChatSummary v-if="showChatSummary" />
+
 				<div class="new-message-form__emoji-picker">
 					<NcEmojiPicker v-if="!disabled"
 						:close-on-select="false"
@@ -201,6 +203,7 @@ import { useHotKey } from '@nextcloud/vue/dist/Composables/useHotKey.js'
 import NewMessageAbsenceInfo from './NewMessageAbsenceInfo.vue'
 import NewMessageAttachments from './NewMessageAttachments.vue'
 import NewMessageAudioRecorder from './NewMessageAudioRecorder.vue'
+import NewMessageChatSummary from './NewMessageChatSummary.vue'
 import NewMessageNewFileDialog from './NewMessageNewFileDialog.vue'
 import NewMessagePollEditor from './NewMessagePollEditor.vue'
 import NewMessageTypingIndicator from './NewMessageTypingIndicator.vue'
@@ -234,6 +237,7 @@ export default {
 		NewMessageAbsenceInfo,
 		NewMessageAttachments,
 		NewMessageAudioRecorder,
+		NewMessageChatSummary,
 		NewMessageNewFileDialog,
 		NewMessagePollEditor,
 		PollDraftHandler,
@@ -466,6 +470,10 @@ export default {
 			return this.chatExtrasStore.absence[this.token]
 		},
 
+		showChatSummary() {
+			return this.chatExtrasStore.hasChatSummaryTaskRequested(this.token)
+		},
+
 		isMobileDevice() {
 			return /Android|iPhone|iPad|iPod/i.test(navigator.userAgent)
 		},

src/components/NewMessage/NewMessageAbsenceInfo.vue

@@ -163,6 +163,8 @@ export default {
 	&__message {
 		white-space: pre-line;
 		word-wrap: break-word;
+		max-height: 30vh;
+		overflow: auto;
 
 		&--collapsed {
 			text-overflow: ellipsis;