fix

src/lib/components/chat/Messages/Citations.svelte

@@ -83,7 +83,7 @@
 								{idx + 1}
 							</div>
 						{/if}
-						<div class="flex-1 mx-2 line-clamp-1">
+						<div class="flex-1 mx-2 line-clamp-1 truncate">
 							{citation.source.name}
 						</div>
 					</button>
@@ -94,37 +94,67 @@
 				<div
 					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>
-						<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 class="flex items-center">
+							{#if _citations.length > 1 && _citations
+									.slice(0, 2)
+									.reduce((acc, citation) => acc + citation.source.name.length, 0) <= 50}
+								{#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 class="flex-1 mx-2 line-clamp-1">
-											{citation.source.name}
-										</div>
-									</button>
-									{#if idx === 0}
-										<span class="mr-1">,</span>
-									{/if}
-								</div>
-							{/each}
+									</div>
+								{/each}
+							{:else}
+								{#each _citations.slice(0, 1) 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>
+									</div>
+								{/each}
+							{/if}
 						</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}
+								{_citations.length -
+									(_citations.length > 1 &&
+									_citations
+										.slice(0, 2)
+										.reduce((acc, citation) => acc + citation.source.name.length, 0) <= 50
+										? 2
+										: 1)}
 							</span>
 							<span>{$i18n.t('more')}</span>
 						</div>

src/lib/components/chat/Messages/CitationsModal.svelte

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