finalizing fixes & additions

This commit is contained in:
Jannik Streidl
2024-10-12 15:18:56 +02:00
parent 9d4d96429f
commit 0bebc898c8
3 changed files with 134 additions and 92 deletions
@@ -10,48 +10,61 @@
export let citations = [];
let _citations = [];
let showPercentage = false;
let showCitationModal = false;
let selectedCitation = null;
let selectedCitation: any = null;
let isCollapsibleOpen = false;
$: _citations = citations.reduce((acc, citation) => {
citation.document.forEach((document, index) => {
const metadata = citation.metadata?.[index];
const distance = citation.distances?.[index];
const id = metadata?.source ?? 'N/A';
let source = citation?.source;
function shouldShowPercentage(citations: any[]) {
return citations.every(
(citation) =>
citation.distances &&
citation.distances.length > 0 &&
citation.distances.every((d: number) => d !== undefined && d >= -1 && d <= 1)
);
}
if (metadata?.name) {
source = { ...source, name: metadata.name };
}
$: {
_citations = citations.reduce((acc, citation) => {
citation.document.forEach((document, index) => {
const metadata = citation.metadata?.[index];
const distance = citation.distances?.[index];
const id = metadata?.source ?? 'N/A';
let source = citation?.source;
// Check if ID looks like a URL
if (id.startsWith('http://') || id.startsWith('https://')) {
source = { name: id };
}
if (metadata?.name) {
source = { ...source, name: metadata.name };
}
const existingSource = acc.find((item) => item.id === id);
if (id.startsWith('http://') || id.startsWith('https://')) {
source = { name: id };
}
if (existingSource) {
existingSource.document.push(document);
existingSource.metadata.push(metadata);
if (distance !== undefined) existingSource.distances.push(distance);
} else {
acc.push({
id: id,
source: source,
document: [document],
metadata: metadata ? [metadata] : [],
distances: distance !== undefined ? [distance] : undefined
});
}
});
return acc;
}, []);
const existingSource = acc.find((item) => item.id === id);
if (existingSource) {
existingSource.document.push(document);
existingSource.metadata.push(metadata);
if (distance !== undefined) existingSource.distances.push(distance);
} else {
acc.push({
id: id,
source: source,
document: [document],
metadata: metadata ? [metadata] : [],
distances: distance !== undefined ? [distance] : undefined
});
}
});
return acc;
}, []);
showPercentage = shouldShowPercentage(_citations);
}
</script>
<CitationsModal bind:show={showCitationModal} citation={selectedCitation} />
<CitationsModal bind:show={showCitationModal} citation={selectedCitation} {showPercentage} />
{#if _citations.length > 0}
<div class="mt-1 mb-2 w-full flex gap-1 items-center flex-wrap">
@@ -79,42 +92,50 @@
{:else}
<Collapsible bind:open={isCollapsibleOpen} className="w-full">
<div
class="flex items-center gap-2 text-gray-500 hover:text-gray-600 dark:hover:text-gray-400 transition cursor-pointer"
class="flex items-center gap-1 text-gray-500 hover:text-gray-600 dark:hover:text-gray-400 transition cursor-pointer"
>
<span>{$i18n.t('References from')}</span>
{#each _citations.slice(0, 2) as citation, idx}
<div class="flex gap-1 text-xs font-semibold">
<button
class="no-toggle flex dark:text-gray-300 py-1 px-1 bg-gray-50 hover:bg-gray-100 dark:bg-gray-850 dark:hover:bg-gray-800 transition rounded-xl max-w-96"
on:click={() => {
showCitationModal = true;
selectedCitation = citation;
}}
>
{#if _citations.every((c) => c.distances !== undefined)}
<div class="bg-white dark:bg-gray-700 rounded-full size-4">
{idx + 1}
</div>
{/if}
<div class="flex-1 mx-2 line-clamp-1">
{citation.source.name}
<div class="flex-grow flex flex-wrap items-center gap-1">
<span class="whitespace-nowrap hidden sm:inline">{$i18n.t('References from')}</span>
<div class="flex flex-wrap items-center">
{#each _citations.slice(0, 2) as citation, idx}
<div class="flex items-center">
<button
class="no-toggle flex dark:text-gray-300 py-1 px-1 bg-gray-50 hover:bg-gray-100 dark:bg-gray-850 dark:hover:bg-gray-800 transition rounded-xl max-w-96 text-xs font-semibold"
on:click={() => {
showCitationModal = true;
selectedCitation = citation;
}}
>
{#if _citations.every((c) => c.distances !== undefined)}
<div class="bg-white dark:bg-gray-700 rounded-full size-4">
{idx + 1}
</div>
{/if}
<div class="flex-1 mx-2 line-clamp-1">
{citation.source.name}
</div>
</button>
{#if idx === 0}
<span class="mr-1">,</span>
{/if}
</div>
</button>
{/each}
</div>
<div class="flex items-center gap-1 whitespace-nowrap">
<span class="hidden sm:inline">{$i18n.t('and')}</span>
<span class="text-gray-600 dark:text-gray-400">
{_citations.length - 2}
</span>
<span>{$i18n.t('more')}</span>
</div>
{#if idx === 0}
<span class="-ml-2">,</span>
{/if}
{/each}
<span>{$i18n.t('and')}</span>
<div class="text-gray-600 dark:text-gray-400">
{_citations.length - 2}
</div>
<span>{$i18n.t('more')}</span>
{#if isCollapsibleOpen}
<ChevronUp strokeWidth="3.5" className="size-3.5" />
{:else}
<ChevronDown strokeWidth="3.5" className="size-3.5" />
{/if}
<div class="flex-shrink-0">
{#if isCollapsibleOpen}
<ChevronUp strokeWidth="3.5" className="size-3.5" />
{:else}
<ChevronDown strokeWidth="3.5" className="size-3.5" />
{/if}
</div>
</div>
<div slot="content" class="mt-2">
<div class="flex flex-wrap gap-2">