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] 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>