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

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

@ -10,12 +10,23 @@
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[]) {
return citations.every(
(citation) =>
citation.distances &&
citation.distances.length > 0 &&
citation.distances.every((d: number) => d !== undefined && d >= -1 && d <= 1)
);
}
$: {
_citations = citations.reduce((acc, citation) => {
citation.document.forEach((document, index) => { citation.document.forEach((document, index) => {
const metadata = citation.metadata?.[index]; const metadata = citation.metadata?.[index];
const distance = citation.distances?.[index]; const distance = citation.distances?.[index];
@ -26,7 +37,6 @@
source = { ...source, name: metadata.name }; source = { ...source, name: metadata.name };
} }
// Check if ID looks like a URL
if (id.startsWith('http://') || id.startsWith('https://')) { if (id.startsWith('http://') || id.startsWith('https://')) {
source = { name: id }; source = { name: id };
} }
@ -49,9 +59,12 @@
}); });
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,13 +92,15 @@
{: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">
<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} {#each _citations.slice(0, 2) as citation, idx}
<div class="flex gap-1 text-xs font-semibold"> <div class="flex items-center">
<button <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" 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={() => { on:click={() => {
showCitationModal = true; showCitationModal = true;
selectedCitation = citation; selectedCitation = citation;
@ -100,22 +115,28 @@
{citation.source.name} {citation.source.name}
</div> </div>
</button> </button>
</div>
{#if idx === 0} {#if idx === 0}
<span class="-ml-2">,</span> <span class="mr-1">,</span>
{/if} {/if}
{/each}
<span>{$i18n.t('and')}</span>
<div class="text-gray-600 dark:text-gray-400">
{_citations.length - 2}
</div> </div>
{/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> <span>{$i18n.t('more')}</span>
</div>
</div>
<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">
{#each _citations as citation, idx} {#each _citations as citation, idx}

46
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>
<Tooltip
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">
{#if showPercentage} {#if showPercentage}
{@const percentage = calculatePercentage(document.distance)} {@const percentage = calculatePercentage(document.distance)}
<div class="text-sm my-1 dark:text-gray-400 flex items-center gap-2">
<span class={`px-1 rounded font-medium ${getRelevanceColor(percentage)}`}> <span class={`px-1 rounded font-medium ${getRelevanceColor(percentage)}`}>
{percentage}% {percentage.toFixed(2)}%
</span>
<span class="text-gray-500 dark:text-gray-500">
({document.distance.toFixed(4)})
</span> </span>
<span class="text-gray-500 dark:text-gray-500"
>({document.distance.toFixed(4)})</span
>
</div>
{:else} {:else}
<div class="text-sm my-1 dark:text-gray-400 flex items-center gap-2">
<span class="text-gray-500 dark:text-gray-500"> <span class="text-gray-500 dark:text-gray-500">
{document.distance.toFixed(4)} {document.distance.toFixed(4)}
</span> </span>
</div>
{/if} {/if}
</div>
</Tooltip>
{:else}
<div class="text-sm dark:text-gray-400">
{$i18n.t('No source available')}
</div>
{/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>