UniqAI/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui synced 2024-11-08 01:30:40 +00:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

finalizing fixes & additions

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

149
src/lib/components/chat/Messages/Citations.svelte
View File

@ -10,48 +10,61 @@
export let citations = []; export let citations = [];
let _citations = []; let _citations = [];
let showPercentage = false;
let showCitationModal = false; let showCitationModal = false;
let selectedCitation = null; let selectedCitation: any = null;
let isCollapsibleOpen = false; let isCollapsibleOpen = false;
$: _citations = citations.reduce((acc, citation) => { function shouldShowPercentage(citations: any[]) {
citation.document.forEach((document, index) => { return citations.every(
const metadata = citation.metadata?.[index]; (citation) =>
const distance = citation.distances?.[index]; citation.distances &&
const id = metadata?.source ?? 'N/A'; citation.distances.length > 0 &&
let source = citation?.source; 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 (metadata?.name) {
if (id.startsWith('http://') || id.startsWith('https://')) { source = { ...source, name: metadata.name };
source = { name: id }; }
}
const existingSource = acc.find((item) => item.id === id); if (id.startsWith('http://') || id.startsWith('https://')) {
source = { name: id };
}
if (existingSource) { const existingSource = acc.find((item) => item.id === id);
existingSource.document.push(document);
existingSource.metadata.push(metadata); if (existingSource) {
if (distance !== undefined) existingSource.distances.push(distance); existingSource.document.push(document);
} else { existingSource.metadata.push(metadata);
acc.push({ if (distance !== undefined) existingSource.distances.push(distance);
id: id, } else {
source: source, acc.push({
document: [document], id: id,
metadata: metadata ? [metadata] : [], source: source,
distances: distance !== undefined ? [distance] : undefined document: [document],
}); metadata: metadata ? [metadata] : [],
} distances: distance !== undefined ? [distance] : undefined
}); });
return acc; }
}, []); });
return acc;
}, []);
showPercentage = shouldShowPercentage(_citations);
}
</script> </script>
<CitationsModal bind:show={showCitationModal} citation={selectedCitation} /> <CitationsModal bind:show={showCitationModal} citation={selectedCitation} {showPercentage} />
{#if _citations.length > 0} {#if _citations.length > 0}
<div class="mt-1 mb-2 w-full flex gap-1 items-center flex-wrap"> <div class="mt-1 mb-2 w-full flex gap-1 items-center flex-wrap">
@ -79,42 +92,50 @@
{:else} {:else}
<Collapsible bind:open={isCollapsibleOpen} className="w-full"> <Collapsible bind:open={isCollapsibleOpen} className="w-full">
<div <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> <div class="flex-grow flex flex-wrap items-center gap-1">
{#each _citations.slice(0, 2) as citation, idx} <span class="whitespace-nowrap hidden sm:inline">{$i18n.t('References from')}</span>
<div class="flex gap-1 text-xs font-semibold"> <div class="flex flex-wrap items-center">
<button {#each _citations.slice(0, 2) as citation, idx}
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" <div class="flex items-center">
on:click={() => { <button
showCitationModal = true; 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"
selectedCitation = citation; 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} {#if _citations.every((c) => c.distances !== undefined)}
</div> <div class="bg-white dark:bg-gray-700 rounded-full size-4">
{/if} {idx + 1}
<div class="flex-1 mx-2 line-clamp-1"> </div>
{citation.source.name} {/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> </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> </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> </div>
<span>{$i18n.t('more')}</span> <div class="flex-shrink-0">
{#if isCollapsibleOpen} {#if isCollapsibleOpen}
<ChevronUp strokeWidth="3.5" className="size-3.5" /> <ChevronUp strokeWidth="3.5" className="size-3.5" />
{:else} {:else}
<ChevronDown strokeWidth="3.5" className="size-3.5" /> <ChevronDown strokeWidth="3.5" className="size-3.5" />
{/if} {/if}
</div>
</div> </div>
<div slot="content" class="mt-2"> <div slot="content" class="mt-2">
<div class="flex flex-wrap gap-2"> <div class="flex flex-wrap gap-2">

60
src/lib/components/chat/Messages/CitationsModal.svelte
View File

@ -7,24 +7,26 @@
export let show = false; export let show = false;
export let citation; export let citation;
export let showPercentage = false;
let mergedDocuments = []; let mergedDocuments = [];
function calculatePercentage(distance) { function calculatePercentage(distance: number) {
if (distance < 0) return 100; if (distance < 0) return 100;
if (distance > 1) return 0; if (distance > 1) return 0;
return Math.round((1 - distance) * 100); return Math.round((1 - distance) * 10000) / 100;
} }
function shouldShowPercentage(documents) { function getRelevanceColor(percentage: number) {
const validDistances = documents.filter( if (percentage >= 80)
(d) => d.distance !== undefined && d.distance >= 0 && d.distance <= 1 return 'bg-green-200 dark:bg-green-800 text-green-800 dark:text-green-200';
); if (percentage >= 60)
return validDistances.length >= 2; return 'bg-yellow-200 dark:bg-yellow-800 text-yellow-800 dark:text-yellow-200';
if (percentage >= 40)
return 'bg-orange-200 dark:bg-orange-800 text-orange-800 dark:text-orange-200';
return 'bg-red-200 dark:bg-red-800 text-red-800 dark:text-red-200';
} }
$: showPercentage = shouldShowPercentage(mergedDocuments);
$: if (citation) { $: if (citation) {
mergedDocuments = citation.document?.map((c, i) => { mergedDocuments = citation.document?.map((c, i) => {
return { return {
@ -79,7 +81,7 @@
<Tooltip <Tooltip
content={$i18n.t('Open file')} content={$i18n.t('Open file')}
placement="left" placement="left"
tippyOptions={{ duration: [500, 0], animation: 'perspective' }} tippyOptions={{ duration: [500, 0] }}
> >
<div class="text-sm dark:text-gray-400 flex items-center gap-2"> <div class="text-sm dark:text-gray-400 flex items-center gap-2">
<a <a
@ -105,23 +107,31 @@
<div class="text-sm font-medium dark:text-gray-300 mt-2"> <div class="text-sm font-medium dark:text-gray-300 mt-2">
{$i18n.t('Relevance')} {$i18n.t('Relevance')}
</div> </div>
{#if showPercentage} <Tooltip
{@const percentage = calculatePercentage(document.distance)} content={$i18n.t('Semantic distance to query from vector store')}
placement="left"
tippyOptions={{ duration: [500, 0] }}
>
<div class="text-sm my-1 dark:text-gray-400 flex items-center gap-2"> <div class="text-sm my-1 dark:text-gray-400 flex items-center gap-2">
<span class={`px-1 rounded font-medium ${getRelevanceColor(percentage)}`}> {#if showPercentage}
{percentage}% {@const percentage = calculatePercentage(document.distance)}
</span> <span class={`px-1 rounded font-medium ${getRelevanceColor(percentage)}`}>
<span class="text-gray-500 dark:text-gray-500" {percentage.toFixed(2)}%
>({document.distance.toFixed(4)})</span </span>
> <span class="text-gray-500 dark:text-gray-500">
({document.distance.toFixed(4)})
</span>
{:else}
<span class="text-gray-500 dark:text-gray-500">
{document.distance.toFixed(4)}
</span>
{/if}
</div> </div>
{:else} </Tooltip>
<div class="text-sm my-1 dark:text-gray-400 flex items-center gap-2"> {:else}
<span class="text-gray-500 dark:text-gray-500"> <div class="text-sm dark:text-gray-400">
{document.distance.toFixed(4)} {$i18n.t('No source available')}
</span> </div>
</div>
{/if}
{/if} {/if}
{:else} {:else}
<div class="text-sm dark:text-gray-400"> <div class="text-sm dark:text-gray-400">

17
src/lib/components/common/Collapsible.svelte
View File

@ -9,11 +9,18 @@
export let className = ''; export let className = '';
export let title = null; export let title = null;
let contentHeight = 0;
let contentElement: HTMLElement;
function handleClick(event) { function handleClick(event) {
if (!event.target.closest('.no-toggle')) { if (!event.target.closest('.no-toggle')) {
open = !open; open = !open;
} }
} }
$: if (contentElement) {
contentHeight = open ? contentElement.scrollHeight : 0;
}
</script> </script>
<div class={className}> <div class={className}>
@ -43,9 +50,13 @@
</button> </button>
{/if} {/if}
{#if open} <div
<div transition:slide={{ duration: 300, easing: quintOut, axis: 'y' }}> bind:this={contentElement}
class="overflow-hidden transition-all duration-300 ease-in-out"
style="max-height: {contentHeight}px;"
>
<div>
<slot name="content" /> <slot name="content" />
</div> </div>
{/if} </div>
</div> </div>