feat(contact chat search): display result sources as a readable link

Signed-off-by: Julien Veyssier <julien-nc@posteo.net>

Author: julien-nc

src/components/ContextChat/ContextChatSearchOutputForm.vue

@@ -7,23 +7,20 @@
 		<label class="cc-output__sources__label">
 			{{ outputShape.sources.description }}
 		</label>
-		<NcRichText v-for="(source, i) in sources"
-			:key="'source-' + i"
-			:text="source.url"
-			:use-markdown="false"
-			:reference-limit="1"
-			:autolink="true" />
+		<ContextChatSource v-for="(source, i) in sources"
+			:key="'source-' + i + '-' + source.url"
+			:source="source" />
 	</div>
 </template>
 
 <script>
-import { NcRichText } from '@nextcloud/vue/dist/Components/NcRichText.js'
+import ContextChatSource from './ContextChatSource.vue'
 
 export default {
 	name: 'ContextChatSearchOutputForm',
 
 	components: {
-		NcRichText,
+		ContextChatSource,
 	},
 
 	props: {

src/components/ContextChat/ContextChatSource.vue

@@ -0,0 +1,70 @@
+<!--
+  - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+<template>
+	<NcRichText
+		:text="text"
+		:use-markdown="true"
+		:reference-limit="1"
+		:references="references"
+		:autolink="true" />
+</template>
+
+<script>
+import { NcRichText } from '@nextcloud/vue/dist/Components/NcRichText.js'
+
+import { generateOcsUrl } from '@nextcloud/router'
+import axios from '@nextcloud/axios'
+
+export default {
+	name: 'ContextChatSource',
+
+	components: {
+		NcRichText,
+	},
+
+	props: {
+		source: {
+			type: Object,
+			required: true,
+		},
+	},
+
+	data: () => {
+		return {
+			// we could initialize this with undefined but then NcRichText will try to find links
+			// and resolve them before we had a chance to do so, resulting in unnecessary requests to references/resolve
+			// with [] we inhibit the extract+resolve mechanism on NcRichText
+			// TODO This can be removed (and all the custom extract+resolve logic) when fixed in NcRichText
+			references: [],
+		}
+	},
+
+	computed: {
+		text() {
+			return '[' + this.source.label + '](' + this.source.url + ')'
+		},
+	},
+
+	mounted() {
+		this.fetch()
+	},
+
+	methods: {
+		fetch() {
+			axios.get(generateOcsUrl('references/resolve') + `?reference=${encodeURIComponent(this.source.url)}`)
+				.then((response) => {
+					this.references = Object.values(response.data.ocs.data.references)
+				})
+				.catch((error) => {
+					console.error('Failed to extract references', error)
+				})
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+// nothing yet
+</style>