refac

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

@@ -4,6 +4,7 @@
 	import Collapsible from '$lib/components/common/Collapsible.svelte';
 	import ChevronDown from '$lib/components/icons/ChevronDown.svelte';
 	import ChevronUp from '$lib/components/icons/ChevronUp.svelte';
+	import { mobile } from '$lib/stores';
 
 	const i18n = getContext('i18n');
 
@@ -155,7 +156,7 @@
 						>
 						<div class="flex items-center overflow-auto scrollbar-none w-full max-w-full flex-1">
 							<div class="flex text-xs font-medium items-center">
-								{#each citations.slice(0, 2) as citation, idx}
+								{#each citations.slice(0, $mobile ? 1 : 2) as citation, idx}
 									<button
 										class="no-toggle outline-hidden flex dark:text-gray-300 p-1 bg-gray-50 hover:bg-gray-100 dark:bg-gray-900 dark:hover:bg-gray-850 transition rounded-xl max-w-96"
 										on:click={() => {
@@ -180,7 +181,7 @@
 						</div>
 						<div class="flex items-center gap-1 whitespace-nowrap shrink-0">
 							<span class="hidden sm:inline">{$i18n.t('and')}</span>
-							{citations.length - 2}
+							{citations.length - ($mobile ? 1 : 2)}
 							<span>{$i18n.t('more')}</span>
 						</div>
 					</div>
@@ -194,7 +195,7 @@
 				</div>
 				<div slot="content">
 					<div class="flex text-xs font-medium flex-wrap">
-						{#each citations.slice(2) as citation, idx}
+						{#each citations.slice($mobile ? 1 : 2) as citation, idx}
 							<button
 								class="no-toggle outline-hidden flex dark:text-gray-300 p-1 bg-gray-50 hover:bg-gray-100 dark:bg-gray-900 dark:hover:bg-gray-850 transition rounded-xl max-w-96"
 								on:click={() => {