From ceaf09482084b07f1b7b97a74aaa01aff5403fb1 Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Thu, 21 Nov 2024 18:34:45 +0100
Subject: [PATCH] [wip] feat: request tasks and show summary

[skip ci]

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 src/components/NewMessage/NewMessage.vue      |  10 +
 .../NewMessage/NewMessageChatSummary.vue      | 231 ++++++++++++++++++
 src/stores/chatExtras.js                      |  10 +
 3 files changed, 251 insertions(+)
 create mode 100644 src/components/NewMessage/NewMessageChatSummary.vue

diff --git a/src/components/NewMessage/NewMessage.vue b/src/components/NewMessage/NewMessage.vue
index 1f8ee687fd19..599b5be20088 100644
--- a/src/components/NewMessage/NewMessage.vue
+++ b/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'
@@ -220,6 +223,8 @@ import { useSettingsStore } from '../../stores/settings.js'
 import { fetchClipboardContent } from '../../utils/clipboard.js'
 import { parseSpecialSymbols } from '../../utils/textParse.ts'
 
+const canSummarizeChat = hasTalkFeature('local', 'chat-summary-api')
+
 export default {
 	name: 'NewMessage',
 
@@ -234,6 +239,7 @@ export default {
 		NewMessageAbsenceInfo,
 		NewMessageAttachments,
 		NewMessageAudioRecorder,
+		NewMessageChatSummary,
 		NewMessageNewFileDialog,
 		NewMessagePollEditor,
 		PollDraftHandler,
@@ -466,6 +472,10 @@ export default {
 			return this.chatExtrasStore.absence[this.token]
 		},
 
+		showChatSummary() {
+			return canSummarizeChat && this.chatExtrasStore.hasChatSummaryTaskRequested(this.token)
+		},
+
 		isMobileDevice() {
 			return /Android|iPhone|iPad|iPod/i.test(navigator.userAgent)
 		},
diff --git a/src/components/NewMessage/NewMessageChatSummary.vue b/src/components/NewMessage/NewMessageChatSummary.vue
new file mode 100644
index 000000000000..d76212e403ee
--- /dev/null
+++ b/src/components/NewMessage/NewMessageChatSummary.vue
@@ -0,0 +1,231 @@
+<!--
+  - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<!-- eslint-disable vue/multiline-html-element-content-newline -->
+<template>
+	<NcNoteCard type="info" class="absence-reminder">
+		<template #icon>
+			<NcLoadingIcon />
+		</template>
+		<NcButton v-if="isTextMoreThanOneLine"
+			class="absence-reminder__button"
+			type="tertiary"
+			@click="toggleCollapsed">
+			<template #icon>
+				<ChevronUp class="icon" :class="{'icon--reverted': !collapsed}" :size="20" />
+			</template>
+		</NcButton>
+		<p class="absence-reminder__caption">
+			{{ t('spreed', 'Generating summary of unread messages ...') }}
+		</p>
+		<p v-if="loading">
+			{{ t('spreed', 'This might take a moment') }}
+		</p>
+		<p v-else
+			ref="absenceMessage"
+			class="absence-reminder__message"
+			:class="{'absence-reminder__message--collapsed': collapsed}">{{ chatSummary }}</p>
+	</NcNoteCard>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import type { ComputedRef } from 'vue'
+
+import ChevronUp from 'vue-material-design-icons/ChevronUp.vue'
+
+import { showError } from '@nextcloud/dialogs'
+import { t } from '@nextcloud/l10n'
+
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
+import NcNoteCard from '@nextcloud/vue/dist/Components/NcNoteCard.js'
+
+import { useStore } from '../../composables/useStore.js'
+import { TASK_PROCESSING } from '../../constants.js'
+import { getTaskById } from '../../services/coreService.ts'
+import { useChatExtrasStore } from '../../stores/chatExtras.js'
+import type { TaskProcessingResponse, SummarizeChatTask } from '../../types/index.ts'
+import CancelableRequest from '../../utils/cancelableRequest.js'
+
+type TaskProcessingCancelableRequest = {
+	request: (taskId: number) => TaskProcessingResponse,
+	cancel: () => void,
+}
+
+type TaskQueue = Array<SummarizeChatTask & {
+  fromMessageId: number,
+  summary?: string
+}>
+
+let getTaskInterval: NodeJS.Timeout | undefined
+const cancelGetTask: Record<string, TaskProcessingCancelableRequest['cancel']> = {}
+
+// TODO collapsing rename
+const absenceMessage = ref(null)
+const collapsed = ref(true)
+const isTextMoreThanOneLine = ref(false)
+
+const loading = ref(true)
+
+const store = useStore()
+const chatExtrasStore = useChatExtrasStore()
+const token = computed(() => store.getters.getToken())
+const chatSummary = ref(t('spreed', 'Empty summary response'))
+computed(() => chatExtrasStore.getChatSummary(token.value))
+
+watch(token, (newValue, oldValue) => {
+	// Cancel pending requests when leaving room
+	if (oldValue && cancelGetTask[oldValue]) {
+		cancelGetTask[oldValue]?.()
+		clearInterval(getTaskInterval)
+		getTaskInterval = undefined
+	}
+	if (newValue) {
+		checkScheduledTasks(newValue)
+	}
+}, { immediate: true })
+
+/**
+ *
+ * @param token conversation token
+ */
+function checkScheduledTasks(token: string) {
+	const taskQueue: TaskQueue = chatExtrasStore.getChatSummaryTaskQueue(token)
+
+	for (const task of taskQueue) {
+		if (task.summary) {
+			// Task is already finished, checking next one
+			continue
+		}
+		const { request, cancel } = CancelableRequest(getTaskById) as TaskProcessingCancelableRequest
+		cancelGetTask[token] = cancel
+
+		getTaskInterval = setInterval(() => {
+			getTask(token, request, task)
+		}, 5000)
+		return
+	}
+
+	// There was no return, so checking all tasks are finished
+	chatSummary.value = chatExtrasStore.getChatSummary(token)
+	loading.value = false
+}
+
+/**
+ *
+ * @param token
+ * @param request
+ * @param newTask
+ * @param task
+ */
+async function getTask(token, request, task) {
+	try {
+		const response = await request(task.taskId)
+		const status = response.data.ocs.data.task.status
+		switch (status) {
+		case TASK_PROCESSING.STATUS.SUCCESSFUL: {
+			const summary = response.data.ocs.data.task.output?.output ?? t('spreed', 'Empty summary response')
+			console.log('success', summary)
+			chatExtrasStore.storeChatSummary(token, task.fromMessageId, summary)
+			clearInterval(getTaskInterval)
+			getTaskInterval = undefined
+			checkScheduledTasks(token)
+			break
+		}
+		case TASK_PROCESSING.STATUS.FAILED:
+		case TASK_PROCESSING.STATUS.UNKNOWN:
+		case TASK_PROCESSING.STATUS.CANCELLED: {
+			console.log('failed')
+			chatExtrasStore.storeChatSummary(token, task.fromMessageId, t('spreed', 'Generating of summary failed'))
+			clearInterval(getTaskInterval)
+			getTaskInterval = undefined
+			checkScheduledTasks(token)
+			break
+		}
+		case TASK_PROCESSING.STATUS.SCHEDULED:
+		case TASK_PROCESSING.STATUS.RUNNING:
+		default: {
+			console.log('scheduled')
+			break
+		}
+		}
+	} catch (error) {
+		if (CancelableRequest.isCancel(error)) {
+			return
+		}
+		console.error('Error getting chat summary:', error)
+	}
+}
+
+// watch() {
+// userAbsenceMessage() {
+// 	this.$nextTick(() => {
+// 		this.setIsTextMoreThanOneLine()
+// 	})
+// },
+// },
+
+// mounted() {
+// 	this.setIsTextMoreThanOneLine()
+// },
+
+/**
+ *
+ */
+function toggleCollapsed() {
+	collapsed.value = !collapsed.value
+}
+
+/**
+ *
+ */
+function setIsTextMoreThanOneLine() {
+	isTextMoreThanOneLine.value = absenceMessage.value?.scrollHeight > absenceMessage.value?.clientHeight
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../assets/variables';
+
+.absence-reminder {
+	// Override NcNoteCard styles
+	margin: 0 calc(var(--default-grid-baseline) * 4) calc(var(--default-grid-baseline) * 2) !important;
+	padding: calc(var(--default-grid-baseline) * 2) !important;
+
+	&__caption {
+		font-weight: bold;
+		margin: var(--default-grid-baseline) var(--default-clickable-area);
+		margin-left: 0;
+	}
+
+	&__message {
+		white-space: pre-line;
+		word-wrap: break-word;
+
+		&--collapsed {
+			text-overflow: ellipsis;
+			overflow: hidden;
+			display: -webkit-box;
+			-webkit-line-clamp: 1;
+			-webkit-box-orient: vertical;
+		}
+	}
+
+	&__button {
+		position: absolute !important;
+		top: 4px;
+		right: 20px;
+
+		& .icon {
+			transition: $transition;
+
+			&--reverted {
+				transform: rotate(180deg);
+			}
+		}
+	}
+}
+</style>
diff --git a/src/stores/chatExtras.js b/src/stores/chatExtras.js
index e022fd6c61c8..ff9b0a200a46 100644
--- a/src/stores/chatExtras.js
+++ b/src/stores/chatExtras.js
@@ -71,6 +71,10 @@ export const useChatExtrasStore = defineStore('chatExtras', {
 		hasChatSummaryTaskRequested: (state) => (token) => {
 			return state.chatSummary[token] !== undefined
 		},
+
+		getChatSummary: (state) => (token) => {
+			return Object.values(Object(state.chatSummary[token])).map(task => task.summary).join('\n\n')
+		},
 	},
 
 	actions: {
@@ -280,6 +284,12 @@ export const useChatExtrasStore = defineStore('chatExtras', {
 			} catch (error) {
 				console.error('Error while requesting a summary:', error)
 			}
+		},
+
+		storeChatSummary(token, fromMessageId, summary) {
+			if (this.chatSummary[token][fromMessageId]) {
+				Vue.set(this.chatSummary[token][fromMessageId], 'summary', summary)
+			}
 		}
 	},
 })