refac: styling

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

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { getContext } from 'svelte';
-	import CitationsModal from '$lib/components/chat/Messages/Citations/CitationsModal.svelte';
+	import CitationModal from './Citations/CitationModal.svelte';
 
 	const i18n = getContext('i18n');
 
@@ -12,15 +12,17 @@
 	let showRelevance = true;
 
 	let citationModal = null;
+
+	let showCitations = false;
 	let showCitationModal = false;
+
 	let selectedCitation: any = null;
-	let isCollapsibleOpen = false;
 
 	export const showSourceModal = (sourceIdx) => {
 		if (citations[sourceIdx]) {
 			console.log('Showing citation modal for:', citations[sourceIdx]);
-			citationModal?.showCitation(citations[sourceIdx]);
-			// showCitationModal = true;
+			selectedCitation = citations[sourceIdx];
+			showCitationModal = true;
 		}
 	};
 
@@ -94,13 +96,19 @@
 		showRelevance = calculateShowRelevance(citations);
 		showPercentage = shouldShowPercentage(citations);
 	}
+
+	const decodeString = (str: string) => {
+		try {
+			return decodeURIComponent(str);
+		} catch (e) {
+			return str;
+		}
+	};
 </script>
 
-<CitationsModal
-	bind:this={citationModal}
+<CitationModal
 	bind:show={showCitationModal}
-	{id}
-	{citations}
+	citation={selectedCitation}
 	{showPercentage}
 	{showRelevance}
 />
@@ -111,7 +119,7 @@
 		<button
 			class="text-xs font-medium text-gray-600 dark:text-gray-300 px-3.5 h-8 rounded-full hover:bg-gray-100 dark:hover:bg-gray-800 transition flex items-center gap-1 border border-gray-50 dark:border-gray-850"
 			on:click={() => {
-				showCitationModal = true;
+				showCitations = !showCitations;
 			}}
 		>
 			{#if urlCitations.length > 0}
@@ -137,3 +145,29 @@
 		</button>
 	</div>
 {/if}
+
+{#if showCitations}
+	<div class="py-1.5">
+		<div class="text-xs gap-2 flex flex-col">
+			{#each citations as citation, idx}
+				<button
+					id={`source-${id}-${idx + 1}`}
+					class="no-toggle outline-hidden flex dark:text-gray-300 bg-white dark:bg-gray-900 text-gray-600 rounded-xl gap-1.5 items-center"
+					on:click={() => {
+						showCitationModal = true;
+						selectedCitation = citation;
+					}}
+				>
+					<div class=" font-medium bg-gray-50 rounded-md px-1.5">
+						{idx + 1}
+					</div>
+					<div
+						class="flex-1 truncate hover:text-black dark:text-white/60 dark:hover:text-white transition text-left"
+					>
+						{decodeString(citation.source.name)}
+					</div>
+				</button>
+			{/each}
+		</div>
+	</div>
+{/if}