From 0bebc898c84c95d00d9dc5873f56448f544e975a Mon Sep 17 00:00:00 2001 From: Jannik Streidl Date: Sat, 12 Oct 2024 15:18:56 +0200 Subject: [PATCH] finalizing fixes & additions --- .../components/chat/Messages/Citations.svelte | 149 ++++++++++-------- .../chat/Messages/CitationsModal.svelte | 60 ++++--- src/lib/components/common/Collapsible.svelte | 17 +- 3 files changed, 134 insertions(+), 92 deletions(-) diff --git a/src/lib/components/chat/Messages/Citations.svelte b/src/lib/components/chat/Messages/Citations.svelte index 9ab3b31ae..a991e248b 100644 --- a/src/lib/components/chat/Messages/Citations.svelte +++ b/src/lib/components/chat/Messages/Citations.svelte @@ -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); + } - + {#if _citations.length > 0}
@@ -79,42 +92,50 @@ {:else}
- {$i18n.t('References from')} - {#each _citations.slice(0, 2) as citation, idx} -
- + {#if idx === 0} + , + {/if}
- + {/each} +
+
+ + + {_citations.length - 2} + + {$i18n.t('more')}
- {#if idx === 0} - , - {/if} - {/each} - {$i18n.t('and')} -
- {_citations.length - 2}
- {$i18n.t('more')} - {#if isCollapsibleOpen} - - {:else} - - {/if} +
+ {#if isCollapsibleOpen} + + {:else} + + {/if} +
diff --git a/src/lib/components/chat/Messages/CitationsModal.svelte b/src/lib/components/chat/Messages/CitationsModal.svelte index c7a68d6fb..4f4d6a420 100644 --- a/src/lib/components/chat/Messages/CitationsModal.svelte +++ b/src/lib/components/chat/Messages/CitationsModal.svelte @@ -7,24 +7,26 @@ export let show = false; export let citation; + export let showPercentage = false; let mergedDocuments = []; - function calculatePercentage(distance) { + function calculatePercentage(distance: number) { if (distance < 0) return 100; if (distance > 1) return 0; - return Math.round((1 - distance) * 100); + return Math.round((1 - distance) * 10000) / 100; } - function shouldShowPercentage(documents) { - const validDistances = documents.filter( - (d) => d.distance !== undefined && d.distance >= 0 && d.distance <= 1 - ); - return validDistances.length >= 2; + function getRelevanceColor(percentage: number) { + if (percentage >= 80) + return 'bg-green-200 dark:bg-green-800 text-green-800 dark:text-green-200'; + if (percentage >= 60) + 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) { mergedDocuments = citation.document?.map((c, i) => { return { @@ -79,7 +81,7 @@
{$i18n.t('Relevance')}
- {#if showPercentage} - {@const percentage = calculatePercentage(document.distance)} +
- - {percentage}% - - ({document.distance.toFixed(4)}) + {#if showPercentage} + {@const percentage = calculatePercentage(document.distance)} + + {percentage.toFixed(2)}% + + + ({document.distance.toFixed(4)}) + + {:else} + + {document.distance.toFixed(4)} + + {/if}
- {:else} -
- - {document.distance.toFixed(4)} - -
- {/if} + + {:else} +
+ {$i18n.t('No source available')} +
{/if} {:else}
diff --git a/src/lib/components/common/Collapsible.svelte b/src/lib/components/common/Collapsible.svelte index d62e26c37..47f4ae44b 100644 --- a/src/lib/components/common/Collapsible.svelte +++ b/src/lib/components/common/Collapsible.svelte @@ -9,11 +9,18 @@ export let className = ''; export let title = null; + let contentHeight = 0; + let contentElement: HTMLElement; + function handleClick(event) { if (!event.target.closest('.no-toggle')) { open = !open; } } + + $: if (contentElement) { + contentHeight = open ? contentElement.scrollHeight : 0; + }
@@ -43,9 +50,13 @@ {/if} - {#if open} -
+
+
- {/if} +