refactor: move outputs to a separate component

Signed-off-by: Anupam Kumar <[email protected]>
nextcloud · Sep 16, 2024 · 5bcab3e · 5bcab3e
1 parent 90d12d0
commit 5bcab3e
Show file tree

Hide file tree

Showing 2 changed files with 117 additions and 65 deletions.
diff --git a/src/components/AssistantFormOutputs.vue b/src/components/AssistantFormOutputs.vue
@@ -0,0 +1,110 @@
+<template>
+	<div class="output">
+		<ContextChatOutputForm v-if="selectedTaskTypeId === 'context_chat:context_chat'"
+			class="output-fields"
+			:output-shape="selectedTaskType.outputShape"
+			:output="outputs" />
+		<TaskTypeFields v-else
+			class="output-fields"
+			:is-output="true"
+			:shape="selectedTaskType.outputShape"
+			:optional-shape="selectedTaskType.optionalOutputShape ?? null"
+			:shape-options="selectedTaskType.outputShapeEnumValues ?? null"
+			:optional-shape-options="selectedTaskType.optionalOutputShapeEnumValues ?? null"
+			:values="outputs"
+			:show-advanced="showAdvanced"
+			@update:outputs="$emit('update:outputs', $event)"
+			@update:show-advanced="$emit('update:show-advanced', $event)" />
+		<NcNoteCard v-if="outputEqualsInput()"
+			class="warning-note"
+			type="warning">
+			{{ t('assistant', 'The task ran successfully but the result is identical to the input.') }}
+		</NcNoteCard>
+		<NcNoteCard v-else-if="hasInitialOutput()"
+			class="warning-note"
+			type="warning">
+			{{ t('assistant', 'This output was generated by AI. Make sure to double-check and adjust.') }}
+		</NcNoteCard>
+	</div>
+</template>
+
+<script>
+import NcNoteCard from '@nextcloud/vue/dist/Components/NcNoteCard.js'
+
+import ContextChatOutputForm from './ContextChat/ContextChatOutputForm.vue'
+import TaskTypeFields from './fields/TaskTypeFields.vue'
+
+export default {
+	name: 'AssistantFormOutputs',
+
+	components: {
+		ContextChatOutputForm,
+		TaskTypeFields,
+		NcNoteCard,
+	},
+
+	props: {
+		inputs: {
+			type: Object,
+			default: () => {},
+		},
+		outputs: {
+			type: Object,
+			default: () => {},
+		},
+		selectedTaskType: {
+			type: [Object, null],
+			default: null,
+		},
+		showAdvanced: {
+			type: Boolean,
+			default: false,
+		},
+	},
+
+	computed: {
+		selectedTaskTypeId() {
+			return this.selectedTaskType?.id ?? null
+		},
+	},
+
+	methods: {
+		outputEqualsInput() {
+			if (typeof this.inputs?.input === 'string' && typeof this.outputs?.output === 'string') {
+				return this.hasInitialOutput && this.outputs.output?.trim() === this.inputs.input?.trim()
+			}
+			return false
+		},
+		hasInitialOutput() {
+			return !!this.outputs.output?.trim()
+		},
+	},
+}
+
+</script>
+
+<style lang="scss" scoped>
+.output {
+	margin-top: 24px;
+	display: flex;
+	flex-direction: column;
+	align-items: start;
+	justify-content: center;
+
+	.warning-note {
+		align-self: normal;
+	}
+
+	hr {
+		width: 100%;
+	}
+
+	.input-label {
+		align-self: start;
+		font-weight: bold;
+	}
+	.output-fields {
+		width: 100%;
+	}
+}
+</style>
diff --git a/src/components/AssistantTextProcessingForm.vue b/src/components/AssistantTextProcessingForm.vue
@@ -42,32 +42,11 @@
 				:selected-task-id="selectedTaskId"
 				:selected-task-type="selectedTaskType"
 				:show-advanced.sync="showAdvanced" />
-			<div v-if="hasOutput"
-				class="output">
-				<ContextChatOutputForm v-if="mySelectedTaskTypeId === 'context_chat:context_chat'"
-					class="output-fields"
-					:output-shape="selectedTaskType.outputShape"
-					:output="myOutputs" />
-				<TaskTypeFields v-else
-					class="output-fields"
-					:is-output="true"
-					:shape="selectedTaskType.outputShape"
-					:optional-shape="selectedTaskType.optionalOutputShape ?? null"
-					:shape-options="selectedTaskType.outputShapeEnumValues ?? null"
-					:optional-shape-options="selectedTaskType.optionalOutputShapeEnumValues ?? null"
-					:values.sync="myOutputs"
-					:show-advanced.sync="showAdvanced" />
-				<NcNoteCard v-if="outputEqualsInput"
-					class="warning-note"
-					type="warning">
-					{{ t('assistant', 'The task ran successfully but the result is identical to the input.') }}
-				</NcNoteCard>
-				<NcNoteCard v-else-if="hasInitialOutput"
-					class="warning-note"
-					type="warning">
-					{{ t('assistant', 'This output was generated by AI. Make sure to double-check and adjust.') }}
-				</NcNoteCard>
-			</div>
+			<AssistantFormOutputs v-if="hasOutput"
+				:inputs="myInputs"
+				:outputs.sync="myOutputs"
+				:selected-task-type="selectedTaskType"
+				:show-advanced.sync="showAdvanced" />
 		</div>
 		<!-- hide the footer for chatty-llm -->
 		<div v-if="!showHistory && mySelectedTaskTypeId !== 'chatty-llm'" class="footer">
@@ -135,14 +114,12 @@ import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcIconSvgWrapper from '@nextcloud/vue/dist/Components/NcIconSvgWrapper.js'
 import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
-import NcNoteCard from '@nextcloud/vue/dist/Components/NcNoteCard.js'
 
 import AssistantFormInputs from './AssistantFormInputs.vue'
-import ContextChatOutputForm from './ContextChat/ContextChatOutputForm.vue'
+import AssistantFormOutputs from './AssistantFormOutputs.vue'
 import NoProviderEmptyContent from './NoProviderEmptyContent.vue'
 import TaskList from './TaskList.vue'
 import TaskTypeSelect from './TaskTypeSelect.vue'
-import TaskTypeFields from './fields/TaskTypeFields.vue'
 
 import { SHAPE_TYPE_NAMES } from '../constants.js'
 
@@ -158,7 +135,6 @@ const TEXT2TEXT_TASK_TYPE_ID = 'core:text2text'
 export default {
 	name: 'AssistantTextProcessingForm',
 	components: {
-		TaskTypeFields,
 		NoProviderEmptyContent,
 		TaskList,
 		TaskTypeSelect,
@@ -172,9 +148,8 @@ export default {
 		UnfoldMoreHorizontalIcon,
 		HistoryIcon,
 		ArrowLeftIcon,
-		NcNoteCard,
 		AssistantFormInputs,
-		ContextChatOutputForm,
+		AssistantFormOutputs,
 	},
 	provide() {
 		return {
@@ -308,20 +283,11 @@ export default {
 				? t('assistant', 'Launch this task again')
 				: t('assistant', 'Launch a task')
 		},
-		hasInitialOutput() {
-			return !!this.outputs?.output?.trim()
-		},
 		hasOutput() {
 			return this.myOutputs
 				&& Object.keys(this.myOutputs).length > 0
 				&& Object.values(this.myOutputs).every(v => v !== null)
 		},
-		outputEqualsInput() {
-			if (typeof this.inputs.input === 'string' && typeof this.outputs.output === 'string') {
-				return this.hasInitialOutput && this.outputs?.output?.trim() === this.inputs.input?.trim()
-			}
-			return false
-		},
 		formattedOutput() {
 			if (this.mySelectedTaskTypeId === 'OCP\\TextToImage\\Task') {
 				return window.location.protocol + '//' + window.location.host + generateUrl('/apps/assistant/i/{imageGenId}', { imageGenId: this.myOutput })
@@ -443,30 +409,6 @@ export default {
 		}
 	}
 
-	.output {
-		margin-top: 24px;
-		display: flex;
-		flex-direction: column;
-		align-items: start;
-		justify-content: center;
-
-		.warning-note {
-			align-self: normal;
-		}
-
-		hr {
-			width: 100%;
-		}
-
-		.input-label {
-			align-self: start;
-			font-weight: bold;
-		}
-		.output-fields {
-			width: 100%;
-		}
-	}
-
 	.assistant-bubble {
 		align-self: start;
 		display: flex;