Merge pull request #227 from nextcloud/fix/task-layout

feat: task layout design update

Author: edward-ly

src/assistant.js

@@ -137,13 +137,63 @@ export async function openAssistantForm({
 		view.$on('load-task', (task) => {
 			if (!view.loading) {
 				console.debug('[assistant] loading task', task)
+				cancelTaskPolling()
+
 				view.selectedTaskTypeId = task.type
 				view.inputs = task.input
 				view.outputs = task.status === TASK_STATUS_STRING.successful ? task.output : null
 				view.selectedTaskId = task.id
 				lastTask = task
+
+				if ([TASK_STATUS_STRING.scheduled, TASK_STATUS_STRING.running].includes(task?.status)) {
+					getTask(task.id).then(response => {
+						const updatedTask = response.data?.ocs?.data?.task
+
+						if (![TASK_STATUS_STRING.scheduled, TASK_STATUS_STRING.running].includes(updatedTask?.status)) {
+							view.selectedTaskTypeId = updatedTask.type
+							view.inputs = updatedTask.input
+							view.outputs = updatedTask.status === TASK_STATUS_STRING.successful ? updatedTask.output : null
+							view.selectedTaskId = updatedTask.id
+							lastTask = updatedTask
+							return
+						}
+
+						view.loading = true
+						view.showSyncTaskRunning = true
+						view.progress = null
+						view.expectedRuntime = (updatedTask?.completionExpectedAt - updatedTask?.scheduledAt) || null
+
+						const setProgress = (progress) => {
+							view.progress = progress
+						}
+						pollTask(updatedTask.id, setProgress).then(finishedTask => {
+							console.debug('pollTask.then', finishedTask)
+							if (finishedTask.status === TASK_STATUS_STRING.successful) {
+								view.outputs = finishedTask?.output
+								view.selectedTaskId = finishedTask?.id
+							} else if (finishedTask.status === TASK_STATUS_STRING.failed) {
+								showError(t('assistant', 'Your task with ID {id} has failed', { id: finishedTask.id }))
+								console.error('[assistant] Task failed', finishedTask)
+								view.outputs = null
+							}
+							// resolve(finishedTask)
+							view.loading = false
+							view.showSyncTaskRunning = false
+						}).catch(error => {
+							console.debug('[assistant] poll error', error)
+						})
+					}).catch(error => {
+						console.error(error)
+					})
+				}
 			}
 		})
+		view.$on('new-task', () => {
+			console.debug('[assistant] new task')
+			view.outputs = null
+			view.selectedTaskId = null
+			lastTask = null
+		})
 		view.$on('background-notify', () => {
 			cancelTaskPolling()
 			view.showScheduleConfirmation = true
@@ -166,6 +216,7 @@ export async function openAssistantForm({
 			view.$destroy()
 		})
 		view.$on('back-to-assistant', () => {
+			cancelTaskPolling()
 			view.showScheduleConfirmation = false
 			view.showSyncTaskRunning = false
 			view.loading = false
@@ -430,13 +481,63 @@ export async function openAssistantTask(task, { isInsideViewer = undefined, acti
 	})
 	view.$on('load-task', (task) => {
 		if (!view.loading) {
+			cancelTaskPolling()
+
 			view.selectedTaskTypeId = task.type
 			view.inputs = task.input
 			view.outputs = task.status === TASK_STATUS_STRING.successful ? task.output : null
 			view.selectedTaskId = task.id
 			lastTask = task
+
+			if ([TASK_STATUS_STRING.scheduled, TASK_STATUS_STRING.running].includes(task?.status)) {
+				getTask(task.id).then(response => {
+					const updatedTask = response.data?.ocs?.data?.task
+
+					if (![TASK_STATUS_STRING.scheduled, TASK_STATUS_STRING.running].includes(updatedTask?.status)) {
+						view.selectedTaskTypeId = updatedTask.type
+						view.inputs = updatedTask.input
+						view.outputs = updatedTask.status === TASK_STATUS_STRING.successful ? updatedTask.output : null
+						view.selectedTaskId = updatedTask.id
+						lastTask = updatedTask
+						return
+					}
+
+					view.loading = true
+					view.showSyncTaskRunning = true
+					view.progress = null
+					view.expectedRuntime = (updatedTask?.completionExpectedAt - updatedTask?.scheduledAt) || null
+
+					const setProgress = (progress) => {
+						view.progress = progress
+					}
+					pollTask(updatedTask.id, setProgress).then(finishedTask => {
+						console.debug('pollTask.then', finishedTask)
+						if (finishedTask.status === TASK_STATUS_STRING.successful) {
+							view.outputs = finishedTask?.output
+							view.selectedTaskId = finishedTask?.id
+						} else if (finishedTask.status === TASK_STATUS_STRING.failed) {
+							showError(t('assistant', 'Your task with ID {id} has failed', { id: finishedTask.id }))
+							console.error('[assistant] Task failed', finishedTask)
+							view.outputs = null
+						}
+						// resolve(finishedTask)
+						view.loading = false
+						view.showSyncTaskRunning = false
+					}).catch(error => {
+						console.debug('[assistant] poll error', error)
+					})
+				}).catch(error => {
+					console.error(error)
+				})
+			}
 		}
 	})
+	view.$on('new-task', () => {
+		console.debug('[assistant] new task')
+		view.outputs = null
+		view.selectedTaskId = null
+		lastTask = null
+	})
 	view.$on('background-notify', () => {
 		cancelTaskPolling()
 		view.showScheduleConfirmation = true
@@ -457,6 +558,7 @@ export async function openAssistantTask(task, { isInsideViewer = undefined, acti
 		view.$destroy()
 	})
 	view.$on('back-to-assistant', () => {
+		cancelTaskPolling()
 		view.showScheduleConfirmation = false
 		view.showSyncTaskRunning = false
 		view.loading = false

src/components/AssistantFormInputs.vue

@@ -3,8 +3,7 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 <template>
-	<ChattyLLMInputForm v-if="selectedTaskTypeId === 'chatty-llm'" class="chatty-inputs" />
-	<ContextChatInputForm v-else-if="selectedTaskTypeId === 'context_chat:context_chat'"
+	<ContextChatInputForm v-if="selectedTaskTypeId === 'context_chat:context_chat'"
 		:inputs="inputs"
 		:task-type="selectedTaskType"
 		@update:inputs="$emit('update:inputs', $event)" />
@@ -26,15 +25,13 @@
 </template>
 
 <script>
-import ChattyLLMInputForm from './ChattyLLM/ChattyLLMInputForm.vue'
 import ContextChatInputForm from './ContextChat/ContextChatInputForm.vue'
 import TaskTypeFields from './fields/TaskTypeFields.vue'
 
 export default {
 	name: 'AssistantFormInputs',
 	components: {
 		ContextChatInputForm,
-		ChattyLLMInputForm,
 		TaskTypeFields,
 	},
 	props: {