Hugging Face's logo

Spaces:
rclon
/
web
Running

App Files Community
web
File size: 7,165 Bytes 
8437908
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
 
<script lang="ts">
	import { getContext } from 'svelte';
	import CitationsModal from './CitationsModal.svelte';
	import Collapsible from '$lib/components/common/Collapsible.svelte';
	import ChevronDown from '$lib/components/icons/ChevronDown.svelte';
	import ChevronUp from '$lib/components/icons/ChevronUp.svelte';

	const i18n = getContext('i18n');

	export let citations = [];

	let _citations = [];
	let showPercentage = false;
	let showRelevance = true;

	let showCitationModal = false;
	let selectedCitation: any = null;
	let isCollapsibleOpen = false;

	function calculateShowRelevance(citations: any[]) {
		const distances = citations.flatMap((citation) => citation.distances ?? []);
		const inRange = distances.filter((d) => d !== undefined && d >= -1 && d <= 1).length;
		const outOfRange = distances.filter((d) => d !== undefined && (d < -1 || d > 1)).length;

		if (distances.length === 0) {
			return false;
		}

		if (
			(inRange === distances.length - 1 && outOfRange === 1) ||
			(outOfRange === distances.length - 1 && inRange === 1)
		) {
			return false;
		}

		return true;
	}

	function shouldShowPercentage(citations: any[]) {
		const distances = citations.flatMap((citation) => citation.distances ?? []);
		return distances.every((d) => d !== undefined && d >= -1 && d <= 1);
	}

	$: {
		_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;

				if (metadata?.name) {
					source = { ...source, name: metadata.name };
				}

				if (id.startsWith('http://') || id.startsWith('https://')) {
					source = { name: id, ...source, url: id };
				}

				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;
		}, []);

		showRelevance = calculateShowRelevance(_citations);
		showPercentage = shouldShowPercentage(_citations);
	}
</script>

<CitationsModal
	bind:show={showCitationModal}
	citation={selectedCitation}
	{showPercentage}
	{showRelevance}
/>

{#if _citations.length > 0}
	<div class="mt-1 mb-2 w-full flex gap-1 items-center flex-wrap">
		{#if _citations.length <= 3}
			{#each _citations as citation, idx}
				<div class="flex gap-1 text-xs font-semibold">
					<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"
						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 truncate">
							{citation.source.name}
						</div>
					</button>
				</div>
			{/each}
		{:else}
			<Collapsible bind:open={isCollapsibleOpen} className="w-full">
				<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 items-center gap-1 overflow-hidden">
						<span class="whitespace-nowrap hidden sm:inline">{$i18n.t('References from')}</span>
						<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>
								{/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 -
									(_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>
					</div>
					<div class="flex-shrink-0">
						{#if isCollapsibleOpen}
							<ChevronUp strokeWidth="3.5" className="size-3.5" />
						{:else}
							<ChevronDown strokeWidth="3.5" className="size-3.5" />
						{/if}
					</div>
				</div>
				<div slot="content" class="mt-2">
					<div class="flex flex-wrap gap-2">
						{#each _citations as citation, idx}
							<div class="flex gap-1 text-xs font-semibold">
								<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"
									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}
					</div>
				</div>
			</Collapsible>
		{/if}
	</div>
{/if}