enh: CitationsModal

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')}

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 === '') {

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"
 }