From 90d12d0980629b75665e06f6a9900a23e897583a Mon Sep 17 00:00:00 2001
From: Anupam Kumar <kyteinsky@gmail.com>
Date: Mon, 16 Sep 2024 12:08:16 +0200
Subject: [PATCH 1/2] fix: render context chat's the referenced source items

Signed-off-by: Anupam Kumar <kyteinsky@gmail.com>
---
 .../AssistantTextProcessingForm.vue           |  14 +-
 .../ContextChat/ContextChatOutputForm.vue     | 138 ++++++++++++++++++
 2 files changed, 148 insertions(+), 4 deletions(-)
 create mode 100644 src/components/ContextChat/ContextChatOutputForm.vue

diff --git a/src/components/AssistantTextProcessingForm.vue b/src/components/AssistantTextProcessingForm.vue
index 6b866a93..7b818605 100644
--- a/src/components/AssistantTextProcessingForm.vue
+++ b/src/components/AssistantTextProcessingForm.vue
@@ -44,7 +44,11 @@
 				:show-advanced.sync="showAdvanced" />
 			<div v-if="hasOutput"
 				class="output">
-				<TaskTypeFields
+				<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"
@@ -120,20 +124,21 @@
 </template>
 
 <script>
-import UnfoldLessHorizontalIcon from 'vue-material-design-icons/UnfoldLessHorizontal.vue'
-import UnfoldMoreHorizontalIcon from 'vue-material-design-icons/UnfoldMoreHorizontal.vue'
 import ArrowLeftIcon from 'vue-material-design-icons/ArrowLeft.vue'
 import CreationIcon from 'vue-material-design-icons/Creation.vue'
 import HistoryIcon from 'vue-material-design-icons/History.vue'
+import UnfoldLessHorizontalIcon from 'vue-material-design-icons/UnfoldLessHorizontal.vue'
+import UnfoldMoreHorizontalIcon from 'vue-material-design-icons/UnfoldMoreHorizontal.vue'
 
-import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
 import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
+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 NoProviderEmptyContent from './NoProviderEmptyContent.vue'
 import TaskList from './TaskList.vue'
 import TaskTypeSelect from './TaskTypeSelect.vue'
@@ -169,6 +174,7 @@ export default {
 		ArrowLeftIcon,
 		NcNoteCard,
 		AssistantFormInputs,
+		ContextChatOutputForm,
 	},
 	provide() {
 		return {
diff --git a/src/components/ContextChat/ContextChatOutputForm.vue b/src/components/ContextChat/ContextChatOutputForm.vue
new file mode 100644
index 00000000..b2591b48
--- /dev/null
+++ b/src/components/ContextChat/ContextChatOutputForm.vue
@@ -0,0 +1,138 @@
+<template>
+	<div class="cc-output">
+		<div class="cc-output__text">
+			<TextField
+				field-key="cc-output-text"
+				:value="output.output"
+				:field="outputShape.output"
+				:is-output="true" />
+		</div>
+		<div class="cc-output__sources">
+			<label for="v-select" class="cc-output__sources__label">
+				{{ outputShape.sources.description }}
+			</label>
+			<NcSelect
+				:value="sources"
+				:placeholder="t('assistant', 'No sources referenced')"
+				:multiple="true"
+				:close-on-select="false"
+				:no-wrap="false"
+				:label-outside="true"
+				:append-to-body="false"
+				:dropdown-should-open="() => false">
+				<template #option="option">
+					<a class="select-option" :href="option.url">
+						<NcAvatar
+							:size="24"
+							:url="option.icon"
+							:display-name="option.label" />
+						<span class="multiselect-name">
+							{{ option.label }}
+						</span>
+					</a>
+				</template>
+				<template #selected-option="option">
+					<a class="select-option" :href="option.url">
+						<NcAvatar
+							:size="24"
+							:url="option.icon"
+							:display-name="option.label" />
+						<span class="multiselect-name">
+							{{ option.label }}
+						</span>
+					</a>
+				</template>
+			</NcSelect>
+		</div>
+	</div>
+</template>
+
+<script>
+import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
+import NcSelect from '@nextcloud/vue/dist/Components/NcSelect.js'
+
+import TextField from '../fields/TextField.vue'
+
+export default {
+	name: 'ContextChatOutputForm',
+
+	components: {
+		NcAvatar,
+		NcSelect,
+		TextField,
+	},
+
+	props: {
+		outputShape: {
+			type: Object,
+			required: true,
+		},
+		output: {
+			type: Object,
+			required: true,
+		},
+	},
+
+	computed: {
+		sources() {
+			try {
+				return JSON.parse(this.output.sources)
+			} catch (e) {
+				console.error('Failed to parse sources', e)
+				return []
+			}
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+.cc-output {
+	display: flex;
+	flex-direction: column;
+	align-items: start;
+	gap: 8px;
+
+	.advanced {
+		width: 100%;
+	}
+
+	&__text {
+		width: 100%;
+	}
+
+	&__sources {
+		display: flex;
+		flex-direction: column;
+
+		:deep .v-select {
+			min-width: 400px !important;
+
+			> div {
+				border: 2px solid var(--color-primary-element) !important;
+			}
+
+			.avatardiv {
+				border-radius: 50%;
+
+				&> img {
+					border-radius: 0 !important;
+				}
+			}
+
+			.vs__actions {
+				display: none !important;
+			}
+		}
+
+		.select-option {
+			display: flex;
+			align-items: center;
+		}
+
+		.multiselect-name {
+			margin-left: 8px;
+		}
+	}
+}
+</style>

From ba827da0622c556e3d2c945de69bf9bd33e58993 Mon Sep 17 00:00:00 2001
From: Anupam Kumar <kyteinsky@gmail.com>
Date: Mon, 16 Sep 2024 18:24:24 +0200
Subject: [PATCH 2/2] refactor: move outputs to a separate component

Signed-off-by: Anupam Kumar <kyteinsky@gmail.com>
---
 src/components/AssistantFormOutputs.vue       | 107 ++++++++++++++++++
 .../AssistantTextProcessingForm.vue           |  72 ++----------
 2 files changed, 114 insertions(+), 65 deletions(-)
 create mode 100644 src/components/AssistantFormOutputs.vue

diff --git a/src/components/AssistantFormOutputs.vue b/src/components/AssistantFormOutputs.vue
new file mode 100644
index 00000000..8b0580a0
--- /dev/null
+++ b/src/components/AssistantFormOutputs.vue
@@ -0,0 +1,107 @@
+<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
+		},
+		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
index 7b818605..6a1f4cbb 100644
--- 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;