This commit is contained in:
Jannik Streidl 2024-10-14 10:37:54 +02:00
parent f0f4de59eb
commit 33c3dbd9fa
2 changed files with 60 additions and 30 deletions

View File

@ -83,7 +83,7 @@
{idx + 1} {idx + 1}
</div> </div>
{/if} {/if}
<div class="flex-1 mx-2 line-clamp-1"> <div class="flex-1 mx-2 line-clamp-1 truncate">
{citation.source.name} {citation.source.name}
</div> </div>
</button> </button>
@ -94,37 +94,67 @@
<div <div
class="flex items-center gap-1 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"
> >
<div class="flex-grow flex flex-wrap items-center gap-1"> <div class="flex-grow flex items-center gap-1 overflow-hidden">
<span class="whitespace-nowrap hidden sm:inline">{$i18n.t('References from')}</span> <span class="whitespace-nowrap hidden sm:inline">{$i18n.t('References from')}</span>
<div class="flex flex-wrap items-center"> <div class="flex items-center">
{#each _citations.slice(0, 2) as citation, idx} {#if _citations.length > 1 && _citations
<div class="flex items-center"> .slice(0, 2)
<button .reduce((acc, citation) => acc + citation.source.name.length, 0) <= 50}
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" {#each _citations.slice(0, 2) as citation, idx}
on:click={() => { <div class="flex items-center">
showCitationModal = true; <button
selectedCitation = citation; 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;
{#if _citations.every((c) => c.distances !== undefined)} selectedCitation = citation;
<div class="bg-white dark:bg-gray-700 rounded-full size-4"> }}
{idx + 1} >
{#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> </div>
</button>
{#if idx === 0}<span class="mr-1">,</span>
{/if} {/if}
<div class="flex-1 mx-2 line-clamp-1"> </div>
{citation.source.name} {/each}
</div> {:else}
</button> {#each _citations.slice(0, 1) as citation, idx}
{#if idx === 0} <div class="flex items-center">
<span class="mr-1">,</span> <button
{/if} 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"
</div> on:click={() => {
{/each} 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>
</div>
{/each}
{/if}
</div> </div>
<div class="flex items-center gap-1 whitespace-nowrap"> <div class="flex items-center gap-1 whitespace-nowrap">
<span class="hidden sm:inline">{$i18n.t('and')}</span> <span class="hidden sm:inline">{$i18n.t('and')}</span>
<span class="text-gray-600 dark:text-gray-400"> <span class="text-gray-600 dark:text-gray-400">
{_citations.length - 2} {_citations.length -
(_citations.length > 1 &&
_citations
.slice(0, 2)
.reduce((acc, citation) => acc + citation.source.name.length, 0) <= 50
? 2
: 1)}
</span> </span>
<span>{$i18n.t('more')}</span> <span>{$i18n.t('more')}</span>
</div> </div>

View File

@ -103,10 +103,10 @@
{/if} {/if}
</div> </div>
</Tooltip> </Tooltip>
<div class="text-sm font-medium dark:text-gray-300 mt-2">
{$i18n.t('Relevance')}
</div>
{#if document.distance !== undefined} {#if document.distance !== undefined}
<div class="text-sm font-medium dark:text-gray-300 mt-2">
{$i18n.t('Relevance')}
</div>
<Tooltip <Tooltip
content={$i18n.t('Semantic distance to query from vector store')} content={$i18n.t('Semantic distance to query from vector store')}
placement="left" placement="left"
@ -130,7 +130,7 @@
</Tooltip> </Tooltip>
{:else} {:else}
<div class="text-sm dark:text-gray-400"> <div class="text-sm dark:text-gray-400">
{$i18n.t('No source available')} {$i18n.t('No distance available')}
</div> </div>
{/if} {/if}
{:else} {:else}
@ -140,7 +140,7 @@
{/if} {/if}
</div> </div>
<div class="flex flex-col w-full"> <div class="flex flex-col w-full">
<div class=" text-sm font-medium dark:text-gray-300"> <div class=" text-sm font-medium dark:text-gray-300 mt-2">
{$i18n.t('Content')} {$i18n.t('Content')}
</div> </div>
<pre class="text-sm dark:text-gray-400 whitespace-pre-line"> <pre class="text-sm dark:text-gray-400 whitespace-pre-line">