Skip to content

Commit ba827da

Browse files
kyteinskykyteinsky
committed
refactor: move outputs to a separate component
Signed-off-by: Anupam Kumar <kyteinsky@gmail.com>
1 parent 90d12d0 commit ba827da

File tree

2 files changed

+114
-65
lines changed

2 files changed

+114
-65
lines changed

‎src/components/AssistantFormOutputs.vue‎

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
<template>
2+
<div class="output">
3+
<ContextChatOutputForm v-if="selectedTaskTypeId === 'context_chat:context_chat'"
4+
class="output-fields"
5+
:output-shape="selectedTaskType.outputShape"
6+
:output="outputs" />
7+
<TaskTypeFields v-else
8+
class="output-fields"
9+
:is-output="true"
10+
:shape="selectedTaskType.outputShape"
11+
:optional-shape="selectedTaskType.optionalOutputShape ?? null"
12+
:shape-options="selectedTaskType.outputShapeEnumValues ?? null"
13+
:optional-shape-options="selectedTaskType.optionalOutputShapeEnumValues ?? null"
14+
:values="outputs"
15+
:show-advanced="showAdvanced"
16+
@update:outputs="$emit('update:outputs', $event)"
17+
@update:show-advanced="$emit('update:show-advanced', $event)" />
18+
<NcNoteCard v-if="outputEqualsInput"
19+
class="warning-note"
20+
type="warning">
21+
{{ t('assistant', 'The task ran successfully but the result is identical to the input.') }}
22+
</NcNoteCard>
23+
<NcNoteCard v-else-if="hasInitialOutput"
24+
class="warning-note"
25+
type="warning">
26+
{{ t('assistant', 'This output was generated by AI. Make sure to double-check and adjust.') }}
27+
</NcNoteCard>
28+
</div>
29+
</template>
30+
31+
<script>
32+
import NcNoteCard from '@nextcloud/vue/dist/Components/NcNoteCard.js'
33+
34+
import ContextChatOutputForm from './ContextChat/ContextChatOutputForm.vue'
35+
import TaskTypeFields from './fields/TaskTypeFields.vue'
36+
37+
export default {
38+
name: 'AssistantFormOutputs',
39+
40+
components: {
41+
ContextChatOutputForm,
42+
TaskTypeFields,
43+
NcNoteCard,
44+
},
45+
46+
props: {
47+
inputs: {
48+
type: Object,
49+
default: () => {},
50+
},
51+
outputs: {
52+
type: Object,
53+
default: () => {},
54+
},
55+
selectedTaskType: {
56+
type: [Object, null],
57+
default: null,
58+
},
59+
showAdvanced: {
60+
type: Boolean,
61+
default: false,
62+
},
63+
},
64+
65+
computed: {
66+
selectedTaskTypeId() {
67+
return this.selectedTaskType?.id ?? null
68+
},
69+
outputEqualsInput() {
70+
if (typeof this.inputs?.input === 'string' && typeof this.outputs?.output === 'string') {
71+
return this.hasInitialOutput && this.outputs.output?.trim() === this.inputs.input?.trim()
72+
}
73+
return false
74+
},
75+
hasInitialOutput() {
76+
return !!this.outputs.output?.trim()
77+
},
78+
},
79+
}
80+
81+
</script>
82+
83+
<style lang="scss" scoped>
84+
.output {
85+
margin-top: 24px;
86+
display: flex;
87+
flex-direction: column;
88+
align-items: start;
89+
justify-content: center;
90+
91+
.warning-note {
92+
align-self: normal;
93+
}
94+
95+
hr {
96+
width: 100%;
97+
}
98+
99+
.input-label {
100+
align-self: start;
101+
font-weight: bold;
102+
}
103+
.output-fields {
104+
width: 100%;
105+
}
106+
}
107+
</style>

‎src/components/AssistantTextProcessingForm.vue‎

Lines changed: 7 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -42,32 +42,11 @@
4242
:selected-task-id="selectedTaskId"
4343
:selected-task-type="selectedTaskType"
4444
:show-advanced.sync="showAdvanced" />
45-
<div v-if="hasOutput"
46-
class="output">
47-
<ContextChatOutputForm v-if="mySelectedTaskTypeId === 'context_chat:context_chat'"
48-
class="output-fields"
49-
:output-shape="selectedTaskType.outputShape"
50-
:output="myOutputs" />
51-
<TaskTypeFields v-else
52-
class="output-fields"
53-
:is-output="true"
54-
:shape="selectedTaskType.outputShape"
55-
:optional-shape="selectedTaskType.optionalOutputShape ?? null"
56-
:shape-options="selectedTaskType.outputShapeEnumValues ?? null"
57-
:optional-shape-options="selectedTaskType.optionalOutputShapeEnumValues ?? null"
58-
:values.sync="myOutputs"
59-
:show-advanced.sync="showAdvanced" />
60-
<NcNoteCard v-if="outputEqualsInput"
61-
class="warning-note"
62-
type="warning">
63-
{{ t('assistant', 'The task ran successfully but the result is identical to the input.') }}
64-
</NcNoteCard>
65-
<NcNoteCard v-else-if="hasInitialOutput"
66-
class="warning-note"
67-
type="warning">
68-
{{ t('assistant', 'This output was generated by AI. Make sure to double-check and adjust.') }}
69-
</NcNoteCard>
70-
</div>
45+
<AssistantFormOutputs v-if="hasOutput"
46+
:inputs="myInputs"
47+
:outputs.sync="myOutputs"
48+
:selected-task-type="selectedTaskType"
49+
:show-advanced.sync="showAdvanced" />
7150
</div>
7251
<!-- hide the footer for chatty-llm -->
7352
<div v-if="!showHistory && mySelectedTaskTypeId !== 'chatty-llm'" class="footer">
@@ -135,14 +114,12 @@ import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
135114
import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
136115
import NcIconSvgWrapper from '@nextcloud/vue/dist/Components/NcIconSvgWrapper.js'
137116
import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
138-
import NcNoteCard from '@nextcloud/vue/dist/Components/NcNoteCard.js'
139117
140118
import AssistantFormInputs from './AssistantFormInputs.vue'
141-
import ContextChatOutputForm from './ContextChat/ContextChatOutputForm.vue'
119+
import AssistantFormOutputs from './AssistantFormOutputs.vue'
142120
import NoProviderEmptyContent from './NoProviderEmptyContent.vue'
143121
import TaskList from './TaskList.vue'
144122
import TaskTypeSelect from './TaskTypeSelect.vue'
145-
import TaskTypeFields from './fields/TaskTypeFields.vue'
146123
147124
import { SHAPE_TYPE_NAMES } from '../constants.js'
148125
@@ -158,7 +135,6 @@ const TEXT2TEXT_TASK_TYPE_ID = 'core:text2text'
158135
export default {
159136
name: 'AssistantTextProcessingForm',
160137
components: {
161-
TaskTypeFields,
162138
NoProviderEmptyContent,
163139
TaskList,
164140
TaskTypeSelect,
@@ -172,9 +148,8 @@ export default {
172148
UnfoldMoreHorizontalIcon,
173149
HistoryIcon,
174150
ArrowLeftIcon,
175-
NcNoteCard,
176151
AssistantFormInputs,
177-
ContextChatOutputForm,
152+
AssistantFormOutputs,
178153
},
179154
provide() {
180155
return {
@@ -308,20 +283,11 @@ export default {
308283
? t('assistant', 'Launch this task again')
309284
: t('assistant', 'Launch a task')
310285
},
311-
hasInitialOutput() {
312-
return !!this.outputs?.output?.trim()
313-
},
314286
hasOutput() {
315287
return this.myOutputs
316288
&& Object.keys(this.myOutputs).length > 0
317289
&& Object.values(this.myOutputs).every(v => v !== null)
318290
},
319-
outputEqualsInput() {
320-
if (typeof this.inputs.input === 'string' && typeof this.outputs.output === 'string') {
321-
return this.hasInitialOutput && this.outputs?.output?.trim() === this.inputs.input?.trim()
322-
}
323-
return false
324-
},
325291
formattedOutput() {
326292
if (this.mySelectedTaskTypeId === 'OCP\\TextToImage\\Task') {
327293
return window.location.protocol + '//' + window.location.host + generateUrl('/apps/assistant/i/{imageGenId}', { imageGenId: this.myOutput })
@@ -443,30 +409,6 @@ export default {
443409
}
444410
}
445411
446-
.output {
447-
margin-top: 24px;
448-
display: flex;
449-
flex-direction: column;
450-
align-items: start;
451-
justify-content: center;
452-
453-
.warning-note {
454-
align-self: normal;
455-
}
456-
457-
hr {
458-
width: 100%;
459-
}
460-
461-
.input-label {
462-
align-self: start;
463-
font-weight: bold;
464-
}
465-
.output-fields {
466-
width: 100%;
467-
}
468-
}
469-
470412
.assistant-bubble {
471413
align-self: start;
472414
display: flex;

0 commit comments

Comments
 (0)