From ac277e8e9ed4a47c019096e74a187e839aa3891b Mon Sep 17 00:00:00 2001
From: Jannik Streidl <jannik.stdl@gmail.com>
Date: Mon, 23 Sep 2024 15:48:12 +0200
Subject: [PATCH 1/3] enh: CitationsModal

---
 .../chat/Messages/CitationsModal.svelte       | 36 ++++++++++++-------
 src/lib/components/common/Tooltip.svelte      |  5 ++-
 src/lib/i18n/locales/de-DE/translation.json   |  4 ++-
 3 files changed, 30 insertions(+), 15 deletions(-)

diff --git a/src/lib/components/chat/Messages/CitationsModal.svelte b/src/lib/components/chat/Messages/CitationsModal.svelte
index ecd1088a9..ced527166 100644
--- a/src/lib/components/chat/Messages/CitationsModal.svelte
+++ b/src/lib/components/chat/Messages/CitationsModal.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { getContext, onMount, tick } from 'svelte';
 	import Modal from '$lib/components/common/Modal.svelte';
+	import Tooltip from '$lib/components/common/Tooltip.svelte';
 	const i18n = getContext('i18n');
 
 	export let show = false;
@@ -55,19 +56,28 @@
 						</div>
 
 						{#if document.source?.name}
-							<div class="text-sm dark:text-gray-400">
-								<a
-									href={document?.metadata?.file_id
-										? `/api/v1/files/${document?.metadata?.file_id}/content`
-										: document.source.name.includes('http')
-											? document.source.name
-											: `#`}
-									target="_blank"
-								>
-									{document?.metadata?.name ?? document.source.name}
-								</a>
-								{document?.metadata?.page ? `(page ${document.metadata.page + 1})` : ''}
-							</div>
+							<Tooltip
+								content={$i18n.t('Open file')}
+								placement="left"
+								tippyOptions={{ duration: [500, 0], animation: 'perspective' }}
+							>
+								<div class="text-sm dark:text-gray-400">
+									<a
+										class="hover:text-gray-500 hover:dark:text-gray-100 underline"
+										href={document?.metadata?.file_id
+											? `/api/v1/files/${document?.metadata?.file_id}/content#page=${document?.metadata?.page + 1}`
+											: document.source.name.includes('http')
+												? document.source.name
+												: `#`}
+										target="_blank"
+									>
+										{document?.metadata?.name ?? document.source.name}
+									</a>
+									{document?.metadata?.page
+										? `(${$i18n.t('page')} ${document.metadata.page + 1})`
+										: ''}
+								</div>
+							</Tooltip>
 						{:else}
 							<div class="text-sm dark:text-gray-400">
 								{$i18n.t('No source available')}
diff --git a/src/lib/components/common/Tooltip.svelte b/src/lib/components/common/Tooltip.svelte
index a46ef7f79..4286e31d4 100644
--- a/src/lib/components/common/Tooltip.svelte
+++ b/src/lib/components/common/Tooltip.svelte
@@ -5,6 +5,7 @@
 	import { marked } from 'marked';
 
 	import tippy from 'tippy.js';
+	import 'tippy.js/animations/perspective.css';
 	import { roundArrow } from 'tippy.js';
 
 	export let placement = 'top';
@@ -13,6 +14,7 @@
 	export let className = 'flex';
 	export let theme = '';
 	export let allowHTML = true;
+	export let tippyOptions = {};
 
 	let tooltipElement;
 	let tooltipInstance;
@@ -28,7 +30,8 @@
 				touch: touch,
 				...(theme !== '' ? { theme } : { theme: 'dark' }),
 				arrow: false,
-				offset: [0, 4]
+				offset: [0, 4],
+				...tippyOptions
 			});
 		}
 	} else if (tooltipInstance && content === '') {
diff --git a/src/lib/i18n/locales/de-DE/translation.json b/src/lib/i18n/locales/de-DE/translation.json
index 72d2f3be4..d0756379a 100644
--- a/src/lib/i18n/locales/de-DE/translation.json
+++ b/src/lib/i18n/locales/de-DE/translation.json
@@ -754,5 +754,7 @@
 	"Your account status is currently pending activation.": "Ihr Kontostatus ist derzeit ausstehend und wartet auf Aktivierung.",
 	"Your entire contribution will go directly to the plugin developer; Open WebUI does not take any percentage. However, the chosen funding platform might have its own fees.": "",
 	"Youtube": "YouTube",
-	"Youtube Loader Settings": "YouTube-Ladeeinstellungen"
+	"Youtube Loader Settings": "YouTube-Ladeeinstellungen",
+	"page": "Seite",
+	"Open file": "Datei öffnen"
 }

From 8eb82265d01b18cb58b0ea0a9473cda26aed96d4 Mon Sep 17 00:00:00 2001
From: Jannik Streidl <jannik.stdl@gmail.com>
Date: Mon, 23 Sep 2024 15:50:46 +0200
Subject: [PATCH 2/3] Remove animation import - unsure if animations are
 desired

---
 src/lib/components/common/Tooltip.svelte | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/lib/components/common/Tooltip.svelte b/src/lib/components/common/Tooltip.svelte
index 4286e31d4..230427525 100644
--- a/src/lib/components/common/Tooltip.svelte
+++ b/src/lib/components/common/Tooltip.svelte
@@ -5,7 +5,6 @@
 	import { marked } from 'marked';
 
 	import tippy from 'tippy.js';
-	import 'tippy.js/animations/perspective.css';
 	import { roundArrow } from 'tippy.js';
 
 	export let placement = 'top';

From f69956bda8bb11b9bfc1c0987f149a1243f5b592 Mon Sep 17 00:00:00 2001
From: "Jannik S." <69747628+jannikstdl@users.noreply.github.com>
Date: Mon, 23 Sep 2024 23:43:50 +0200
Subject: [PATCH 3/3] fix: only append link with page attribute if
 metatada.page is available

---
 src/lib/components/chat/Messages/CitationsModal.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/components/chat/Messages/CitationsModal.svelte b/src/lib/components/chat/Messages/CitationsModal.svelte
index ced527166..923fdea54 100644
--- a/src/lib/components/chat/Messages/CitationsModal.svelte
+++ b/src/lib/components/chat/Messages/CitationsModal.svelte
@@ -65,7 +65,7 @@
 									<a
 										class="hover:text-gray-500 hover:dark:text-gray-100 underline"
 										href={document?.metadata?.file_id
-											? `/api/v1/files/${document?.metadata?.file_id}/content#page=${document?.metadata?.page + 1}`
+											? `/api/v1/files/${document?.metadata?.file_id}/content${document?.metadata?.page !== undefined ? `#page=${document.metadata.page + 1}` : ''}`
 											: document.source.name.includes('http')
 												? document.source.name
 												: `#`}