+page.svelte 17.7 KB
Newer Older
Timothy J. Baek's avatar
Timothy J. Baek committed
1
2
3
4
5
6
7
8
<script lang="ts">
	import toast from 'svelte-french-toast';
	import fileSaver from 'file-saver';
	const { saveAs } = fileSaver;

	import { onMount } from 'svelte';
	import { documents } from '$lib/stores';
	import { createNewDoc, deleteDocByName, getDocs } from '$lib/apis/documents';
Timothy J. Baek's avatar
Timothy J. Baek committed
9

10
	import { SUPPORTED_FILE_TYPE, SUPPORTED_FILE_EXTENSIONS } from '$lib/constants';
Timothy J. Baek's avatar
Timothy J. Baek committed
11
	import { uploadDocToVectorDB } from '$lib/apis/rag';
12
	import { transformFileName } from '$lib/utils';
Timothy J. Baek's avatar
Timothy J. Baek committed
13

14
	import EditDocModal from '$lib/components/documents/EditDocModal.svelte';
15
	import AddFilesPlaceholder from '$lib/components/AddFilesPlaceholder.svelte';
16
	import SettingsModal from '$lib/components/documents/SettingsModal.svelte';
Timothy J. Baek's avatar
Timothy J. Baek committed
17
	let importFiles = '';
Timothy J. Baek's avatar
Timothy J. Baek committed
18
19

	let inputFiles = '';
Timothy J. Baek's avatar
Timothy J. Baek committed
20
21
	let query = '';

Timothy J. Baek's avatar
Timothy J. Baek committed
22
23
	let tags = [];

24
	let showSettingsModal = false;
25
26
	let showEditDocModal = false;
	let selectedDoc;
Timothy J. Baek's avatar
Timothy J. Baek committed
27
	let selectedTag = '';
28

Timothy J. Baek's avatar
Timothy J. Baek committed
29
30
31
32
33
34
35
	let dragged = false;

	const deleteDoc = async (name) => {
		await deleteDocByName(localStorage.token, name);
		await documents.set(await getDocs(localStorage.token));
	};

Timothy J. Baek's avatar
Timothy J. Baek committed
36
	const uploadDoc = async (file) => {
37
38
39
40
		const res = await uploadDocToVectorDB(localStorage.token, '', file).catch((error) => {
			toast.error(error);
			return null;
		});
Timothy J. Baek's avatar
Timothy J. Baek committed
41
42
43
44
45
46

		if (res) {
			await createNewDoc(
				localStorage.token,
				res.collection_name,
				res.filename,
47
				transformFileName(res.filename),
Timothy J. Baek's avatar
Timothy J. Baek committed
48
				res.filename
49
50
51
52
			).catch((error) => {
				toast.error(error);
				return null;
			});
Timothy J. Baek's avatar
Timothy J. Baek committed
53
54
55
56
			await documents.set(await getDocs(localStorage.token));
		}
	};

57
	onMount(() => {
Timothy J. Baek's avatar
Timothy J. Baek committed
58
59
60
61
62
		documents.subscribe((docs) => {
			tags = docs.reduce((a, e, i, arr) => {
				return [...new Set([...a, ...(e?.content?.tags ?? []).map((tag) => tag.name)])];
			}, []);
		});
63
		const dropZone = document.querySelector('body');
Timothy J. Baek's avatar
Timothy J. Baek committed
64

65
66
67
68
69
70
71
72
		const onDragOver = (e) => {
			e.preventDefault();
			dragged = true;
		};

		const onDragLeave = () => {
			dragged = false;
		};
Timothy J. Baek's avatar
Timothy J. Baek committed
73

74
75
76
		const onDrop = async (e) => {
			e.preventDefault();
			console.log(e);
Timothy J. Baek's avatar
Timothy J. Baek committed
77

78
79
			if (e.dataTransfer?.files) {
				let reader = new FileReader();
Timothy J. Baek's avatar
Timothy J. Baek committed
80

81
82
83
84
85
86
87
88
89
90
91
92
93
				reader.onload = (event) => {
					files = [
						...files,
						{
							type: 'image',
							url: `${event.target.result}`
						}
					];
				};

				const inputFiles = e.dataTransfer?.files;

				if (inputFiles && inputFiles.length > 0) {
Timothy J. Baek's avatar
Timothy J. Baek committed
94
95
96
97
98
99
100
101
102
103
104
105
106
					for (const file of inputFiles) {
						console.log(file, file.name.split('.').at(-1));
						if (
							SUPPORTED_FILE_TYPE.includes(file['type']) ||
							SUPPORTED_FILE_EXTENSIONS.includes(file.name.split('.').at(-1))
						) {
							uploadDoc(file);
						} else {
							toast.error(
								`Unknown File Type '${file['type']}', but accepting and treating as plain text`
							);
							uploadDoc(file);
						}
107
					}
Timothy J. Baek's avatar
Timothy J. Baek committed
108
				} else {
109
					toast.error(`File not found.`);
Timothy J. Baek's avatar
Timothy J. Baek committed
110
111
112
				}
			}

113
114
115
116
117
118
119
120
121
122
123
124
125
			dragged = false;
		};

		dropZone?.addEventListener('dragover', onDragOver);
		dropZone?.addEventListener('drop', onDrop);
		dropZone?.addEventListener('dragleave', onDragLeave);

		return () => {
			dropZone?.removeEventListener('dragover', onDragOver);
			dropZone?.removeEventListener('drop', onDrop);
			dropZone?.removeEventListener('dragleave', onDragLeave);
		};
	});
Timothy J. Baek's avatar
Timothy J. Baek committed
126
127
</script>

128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
{#if dragged}
	<div
		class="fixed w-full h-full flex z-50 touch-none pointer-events-none"
		id="dropzone"
		role="region"
		aria-label="Drag and Drop Container"
	>
		<div class="absolute rounded-xl w-full h-full backdrop-blur bg-gray-800/40 flex justify-center">
			<div class="m-auto pt-64 flex flex-col justify-center">
				<div class="max-w-md">
					<AddFilesPlaceholder>
						<div class=" mt-2 text-center text-sm dark:text-gray-200 w-full">
							Drop any files here to add to my documents
						</div>
					</AddFilesPlaceholder>
				</div>
			</div>
		</div>
	</div>
{/if}

149
150
151
152
{#key selectedDoc}
	<EditDocModal bind:show={showEditDocModal} {selectedDoc} />
{/key}

Timothy J. Baek's avatar
Timothy J. Baek committed
153
154
155
156
<input
	id="upload-doc-input"
	bind:files={inputFiles}
	type="file"
Timothy J. Baek's avatar
Timothy J. Baek committed
157
	multiple
Timothy J. Baek's avatar
Timothy J. Baek committed
158
159
160
	hidden
	on:change={async (e) => {
		if (inputFiles && inputFiles.length > 0) {
Timothy J. Baek's avatar
Timothy J. Baek committed
161
162
163
164
165
166
167
168
169
170
171
172
173
			for (const file of inputFiles) {
				console.log(file, file.name.split('.').at(-1));
				if (
					SUPPORTED_FILE_TYPE.includes(file['type']) ||
					SUPPORTED_FILE_EXTENSIONS.includes(file.name.split('.').at(-1))
				) {
					uploadDoc(file);
				} else {
					toast.error(
						`Unknown File Type '${file['type']}', but accepting and treating as plain text`
					);
					uploadDoc(file);
				}
Timothy J. Baek's avatar
Timothy J. Baek committed
174
175
176
177
178
179
180
181
182
183
			}

			inputFiles = null;
			e.target.value = '';
		} else {
			toast.error(`File not found.`);
		}
	}}
/>

184
185
<SettingsModal bind:show={showSettingsModal} />

Timothy J. Baek's avatar
Timothy J. Baek committed
186
187
<div class="min-h-screen max-h-[100dvh] w-full flex justify-center dark:text-white">
	<div class=" py-2.5 flex flex-col justify-between w-full overflow-y-auto">
Timothy J. Baek's avatar
Timothy J. Baek committed
188
189
190
		<div class="max-w-2xl mx-auto w-full px-3 md:px-0 my-10">
			<div class="mb-6 flex justify-between items-center">
				<div class=" text-2xl font-semibold self-center">My Documents</div>
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

				<div>
					<button
						class="flex items-center space-x-1 border border-gray-200 dark:border-gray-600 px-3 py-1 rounded-lg"
						type="button"
						on:click={() => {
							showSettingsModal = !showSettingsModal;
						}}
					>
						<svg
							xmlns="http://www.w3.org/2000/svg"
							viewBox="0 0 16 16"
							fill="currentColor"
							class="w-4 h-4"
						>
							<path
								fill-rule="evenodd"
								d="M6.955 1.45A.5.5 0 0 1 7.452 1h1.096a.5.5 0 0 1 .497.45l.17 1.699c.484.12.94.312 1.356.562l1.321-1.081a.5.5 0 0 1 .67.033l.774.775a.5.5 0 0 1 .034.67l-1.08 1.32c.25.417.44.873.561 1.357l1.699.17a.5.5 0 0 1 .45.497v1.096a.5.5 0 0 1-.45.497l-1.699.17c-.12.484-.312.94-.562 1.356l1.082 1.322a.5.5 0 0 1-.034.67l-.774.774a.5.5 0 0 1-.67.033l-1.322-1.08c-.416.25-.872.44-1.356.561l-.17 1.699a.5.5 0 0 1-.497.45H7.452a.5.5 0 0 1-.497-.45l-.17-1.699a4.973 4.973 0 0 1-1.356-.562L4.108 13.37a.5.5 0 0 1-.67-.033l-.774-.775a.5.5 0 0 1-.034-.67l1.08-1.32a4.971 4.971 0 0 1-.561-1.357l-1.699-.17A.5.5 0 0 1 1 8.548V7.452a.5.5 0 0 1 .45-.497l1.699-.17c.12-.484.312-.94.562-1.356L2.629 4.107a.5.5 0 0 1 .034-.67l.774-.774a.5.5 0 0 1 .67-.033L5.43 3.71a4.97 4.97 0 0 1 1.356-.561l.17-1.699ZM6 8c0 .538.212 1.026.558 1.385l.057.057a2 2 0 0 0 2.828-2.828l-.058-.056A2 2 0 0 0 6 8Z"
								clip-rule="evenodd"
							/>
						</svg>

						<div class=" text-xs">Document Settings</div>
					</button>
				</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
			</div>

			<div class=" flex w-full space-x-2">
				<div class="flex flex-1">
					<div class=" self-center ml-1 mr-3">
						<svg
							xmlns="http://www.w3.org/2000/svg"
							viewBox="0 0 20 20"
							fill="currentColor"
							class="w-4 h-4"
						>
							<path
								fill-rule="evenodd"
								d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z"
								clip-rule="evenodd"
							/>
						</svg>
					</div>
					<input
						class=" w-full text-sm pr-4 py-1 rounded-r-xl outline-none bg-transparent"
						bind:value={query}
						placeholder="Search Document"
					/>
				</div>

				<div>
Timothy J. Baek's avatar
Timothy J. Baek committed
242
					<button
Timothy J. Baek's avatar
Timothy J. Baek committed
243
						class=" px-2 py-2 rounded-xl border border-gray-200 dark:border-gray-600 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 transition font-medium text-sm flex items-center space-x-1"
Timothy J. Baek's avatar
Timothy J. Baek committed
244
245
246
						on:click={() => {
							document.getElementById('upload-doc-input')?.click();
						}}
Timothy J. Baek's avatar
Timothy J. Baek committed
247
248
249
250
251
252
253
254
255
256
257
					>
						<svg
							xmlns="http://www.w3.org/2000/svg"
							viewBox="0 0 16 16"
							fill="currentColor"
							class="w-4 h-4"
						>
							<path
								d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z"
							/>
						</svg>
Timothy J. Baek's avatar
Timothy J. Baek committed
258
					</button>
Timothy J. Baek's avatar
Timothy J. Baek committed
259
260
				</div>
			</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
261

262
			<!-- <div>
Timothy J. Baek's avatar
Timothy J. Baek committed
263
264
265
266
267
268
269
270
271
272
273
274
				<div
					class="my-3 py-16 rounded-lg border-2 border-dashed dark:border-gray-600 {dragged &&
						' dark:bg-gray-700'} "
					role="region"
					on:drop={onDrop}
					on:dragover={onDragOver}
					on:dragleave={onDragLeave}
				>
					<div class="  pointer-events-none">
						<div class="text-center dark:text-white text-2xl font-semibold z-50">Add Files</div>

						<div class=" mt-2 text-center text-sm dark:text-gray-200 w-full">
275
							Drop any files here to add to my documents
Timothy J. Baek's avatar
Timothy J. Baek committed
276
						</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
277
					</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
278
				</div>
279
			</div> -->
Timothy J. Baek's avatar
Timothy J. Baek committed
280

Timothy J. Baek's avatar
Timothy J. Baek committed
281
			<hr class=" dark:border-gray-700 my-2.5" />
Timothy J. Baek's avatar
Timothy J. Baek committed
282

Timothy J. Baek's avatar
Timothy J. Baek committed
283
284
285
286
287
288
289
290
291
292
293
294
			{#if tags.length > 0}
				<div class="px-2.5 mt-0.5 mb-2 flex gap-1 flex-wrap">
					<button
						class="px-2 py-0.5 space-x-1 flex h-fit items-center rounded-full transition border dark:border-gray-600 dark:text-white"
						on:click={async () => {
							selectedTag = '';
							// await chats.set(await getChatListByTagName(localStorage.token, tag.name));
						}}
					>
						<div class=" text-xs font-medium self-center line-clamp-1">all</div>
					</button>
					{#each tags as tag}
Timothy J. Baek's avatar
Timothy J. Baek committed
295
296
297
						<button
							class="px-2 py-0.5 space-x-1 flex h-fit items-center rounded-full transition border dark:border-gray-600 dark:text-white"
							on:click={async () => {
Timothy J. Baek's avatar
Timothy J. Baek committed
298
								selectedTag = tag;
Timothy J. Baek's avatar
Timothy J. Baek committed
299
300
301
								// await chats.set(await getChatListByTagName(localStorage.token, tag.name));
							}}
						>
Timothy J. Baek's avatar
Timothy J. Baek committed
302
303
304
							<div class=" text-xs font-medium self-center line-clamp-1">
								#{tag}
							</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
305
						</button>
Timothy J. Baek's avatar
Timothy J. Baek committed
306
307
308
					{/each}
				</div>
			{/if}
Timothy J. Baek's avatar
Timothy J. Baek committed
309

Timothy J. Baek's avatar
Timothy J. Baek committed
310
311
312
			{#each $documents.filter((doc) => (selectedTag === '' || (doc?.content?.tags ?? [])
							.map((tag) => tag.name)
							.includes(selectedTag)) && (query === '' || doc.name.includes(query))) as doc}
Timothy J. Baek's avatar
Timothy J. Baek committed
313
				<div class=" flex space-x-4 cursor-pointer w-full mt-3 mb-3">
Timothy J. Baek's avatar
Timothy J. Baek committed
314
					<div class=" flex flex-1 space-x-4 cursor-pointer w-full">
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
						<div class=" flex items-center space-x-3">
							<div class="p-2.5 bg-red-400 text-white rounded-lg">
								{#if doc}
									<svg
										xmlns="http://www.w3.org/2000/svg"
										viewBox="0 0 24 24"
										fill="currentColor"
										class="w-6 h-6"
									>
										<path
											fill-rule="evenodd"
											d="M5.625 1.5c-1.036 0-1.875.84-1.875 1.875v17.25c0 1.035.84 1.875 1.875 1.875h12.75c1.035 0 1.875-.84 1.875-1.875V12.75A3.75 3.75 0 0 0 16.5 9h-1.875a1.875 1.875 0 0 1-1.875-1.875V5.25A3.75 3.75 0 0 0 9 1.5H5.625ZM7.5 15a.75.75 0 0 1 .75-.75h7.5a.75.75 0 0 1 0 1.5h-7.5A.75.75 0 0 1 7.5 15Zm.75 2.25a.75.75 0 0 0 0 1.5H12a.75.75 0 0 0 0-1.5H8.25Z"
											clip-rule="evenodd"
										/>
										<path
											d="M12.971 1.816A5.23 5.23 0 0 1 14.25 5.25v1.875c0 .207.168.375.375.375H16.5a5.23 5.23 0 0 1 3.434 1.279 9.768 9.768 0 0 0-6.963-6.963Z"
										/>
									</svg>
								{:else}
									<svg
										class=" w-6 h-6 translate-y-[0.5px]"
										fill="currentColor"
										viewBox="0 0 24 24"
										xmlns="http://www.w3.org/2000/svg"
										><style>
											.spinner_qM83 {
												animation: spinner_8HQG 1.05s infinite;
											}
											.spinner_oXPr {
												animation-delay: 0.1s;
											}
											.spinner_ZTLf {
												animation-delay: 0.2s;
											}
											@keyframes spinner_8HQG {
												0%,
												57.14% {
													animation-timing-function: cubic-bezier(0.33, 0.66, 0.66, 1);
													transform: translate(0);
												}
												28.57% {
													animation-timing-function: cubic-bezier(0.33, 0, 0.66, 0.33);
													transform: translateY(-6px);
												}
												100% {
													transform: translate(0);
												}
											}
										</style><circle class="spinner_qM83" cx="4" cy="12" r="2.5" /><circle
											class="spinner_qM83 spinner_oXPr"
											cx="12"
											cy="12"
											r="2.5"
										/><circle class="spinner_qM83 spinner_ZTLf" cx="20" cy="12" r="2.5" /></svg
									>
								{/if}
							</div>
							<div class=" flex-1 self-center flex-1">
Timothy J. Baek's avatar
Timothy J. Baek committed
373
374
375
376
								<div class=" font-bold line-clamp-1">#{doc.name} ({doc.filename})</div>
								<div class=" text-xs overflow-hidden text-ellipsis line-clamp-1">
									{doc.title}
								</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
377
							</div>
378
						</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
379
380
					</div>
					<div class="flex flex-row space-x-1 self-center">
381
						<button
Timothy J. Baek's avatar
Timothy J. Baek committed
382
383
							class="self-center w-fit text-sm px-2 py-2 border dark:border-gray-600 rounded-xl"
							type="button"
384
385
386
387
							on:click={async () => {
								showEditDocModal = !showEditDocModal;
								selectedDoc = doc;
							}}
Timothy J. Baek's avatar
Timothy J. Baek committed
388
389
390
391
392
393
394
395
						>
							<svg
								xmlns="http://www.w3.org/2000/svg"
								fill="none"
								viewBox="0 0 24 24"
								stroke-width="1.5"
								stroke="currentColor"
								class="w-4 h-4"
Timothy J. Baek's avatar
Timothy J. Baek committed
396
							>
Timothy J. Baek's avatar
Timothy J. Baek committed
397
398
399
400
401
402
								<path
									stroke-linecap="round"
									stroke-linejoin="round"
									d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L6.832 19.82a4.5 4.5 0 01-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 011.13-1.897L16.863 4.487zm0 0L19.5 7.125"
								/>
							</svg>
403
						</button>
Timothy J. Baek's avatar
Timothy J. Baek committed
404
405

						<!-- <button
Timothy J. Baek's avatar
Timothy J. Baek committed
406
407
408
									class="self-center w-fit text-sm px-2 py-2 border dark:border-gray-600 rounded-xl"
									type="button"
									on:click={() => {
Timothy J. Baek's avatar
Timothy J. Baek committed
409
										console.log('download file');
Timothy J. Baek's avatar
Timothy J. Baek committed
410
411
412
413
									}}
								>
									<svg
										xmlns="http://www.w3.org/2000/svg"
Timothy J. Baek's avatar
Timothy J. Baek committed
414
415
										viewBox="0 0 16 16"
										fill="currentColor"
Timothy J. Baek's avatar
Timothy J. Baek committed
416
417
418
										class="w-4 h-4"
									>
										<path
Timothy J. Baek's avatar
Timothy J. Baek committed
419
420
421
422
											d="M8.75 2.75a.75.75 0 0 0-1.5 0v5.69L5.03 6.22a.75.75 0 0 0-1.06 1.06l3.5 3.5a.75.75 0 0 0 1.06 0l3.5-3.5a.75.75 0 0 0-1.06-1.06L8.75 8.44V2.75Z"
										/>
										<path
											d="M3.5 9.75a.75.75 0 0 0-1.5 0v1.5A2.75 2.75 0 0 0 4.75 14h6.5A2.75 2.75 0 0 0 14 11.25v-1.5a.75.75 0 0 0-1.5 0v1.5c0 .69-.56 1.25-1.25 1.25h-6.5c-.69 0-1.25-.56-1.25-1.25v-1.5Z"
Timothy J. Baek's avatar
Timothy J. Baek committed
423
424
										/>
									</svg>
Timothy J. Baek's avatar
Timothy J. Baek committed
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
								</button> -->

						<button
							class="self-center w-fit text-sm px-2 py-2 border dark:border-gray-600 rounded-xl"
							type="button"
							on:click={() => {
								deleteDoc(doc.name);
							}}
						>
							<svg
								xmlns="http://www.w3.org/2000/svg"
								fill="none"
								viewBox="0 0 24 24"
								stroke-width="1.5"
								stroke="currentColor"
								class="w-4 h-4"
							>
								<path
									stroke-linecap="round"
									stroke-linejoin="round"
									d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"
								/>
							</svg>
						</button>
					</div>
				</div>
451
452

				<div class=" my-2.5" />
Timothy J. Baek's avatar
Timothy J. Baek committed
453
			{/each}
Timothy J. Baek's avatar
Timothy J. Baek committed
454

Timothy J. Baek's avatar
Timothy J. Baek committed
455
456
457
			{#if $documents.length > 0}
				<hr class=" dark:border-gray-700 my-2.5" />
			{/if}
Timothy J. Baek's avatar
Timothy J. Baek committed
458

459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
			<div class=" flex justify-between w-full mb-3">
				<div class="flex space-x-2">
					<input
						id="documents-import-input"
						bind:files={importFiles}
						type="file"
						accept=".json"
						hidden
						on:change={() => {
							console.log(importFiles);

							const reader = new FileReader();
							reader.onload = async (event) => {
								const savedDocs = JSON.parse(event.target.result);
								console.log(savedDocs);

								for (const doc of savedDocs) {
									await createNewDoc(
										localStorage.token,
										doc.collection_name,
										doc.filename,
										doc.name,
										doc.title
									).catch((error) => {
										toast.error(error);
										return null;
									});
								}

								await documents.set(await getDocs(localStorage.token));
							};

							reader.readAsText(importFiles[0]);
						}}
					/>
Timothy J. Baek's avatar
Timothy J. Baek committed
494

495
496
497
498
499
500
501
					<button
						class="self-center w-fit text-sm px-3 py-1 border dark:border-gray-600 rounded-xl flex"
						on:click={async () => {
							document.getElementById('documents-import-input')?.click();
						}}
					>
						<div class=" self-center mr-2 font-medium">Import Documents Mapping</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
502

503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
						<div class=" self-center">
							<svg
								xmlns="http://www.w3.org/2000/svg"
								viewBox="0 0 16 16"
								fill="currentColor"
								class="w-4 h-4"
							>
								<path
									fill-rule="evenodd"
									d="M4 2a1.5 1.5 0 0 0-1.5 1.5v9A1.5 1.5 0 0 0 4 14h8a1.5 1.5 0 0 0 1.5-1.5V6.621a1.5 1.5 0 0 0-.44-1.06L9.94 2.439A1.5 1.5 0 0 0 8.878 2H4Zm4 9.5a.75.75 0 0 1-.75-.75V8.06l-.72.72a.75.75 0 0 1-1.06-1.06l2-2a.75.75 0 0 1 1.06 0l2 2a.75.75 0 1 1-1.06 1.06l-.72-.72v2.69a.75.75 0 0 1-.75.75Z"
									clip-rule="evenodd"
								/>
							</svg>
						</div>
					</button>

					<button
						class="self-center w-fit text-sm px-3 py-1 border dark:border-gray-600 rounded-xl flex"
						on:click={async () => {
							let blob = new Blob([JSON.stringify($documents)], {
								type: 'application/json'
							});
							saveAs(blob, `documents-mapping-export-${Date.now()}.json`);
Timothy J. Baek's avatar
Timothy J. Baek committed
526
527
						}}
					>
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
						<div class=" self-center mr-2 font-medium">Export Documents Mapping</div>

						<div class=" self-center">
							<svg
								xmlns="http://www.w3.org/2000/svg"
								viewBox="0 0 16 16"
								fill="currentColor"
								class="w-4 h-4"
							>
								<path
									fill-rule="evenodd"
									d="M4 2a1.5 1.5 0 0 0-1.5 1.5v9A1.5 1.5 0 0 0 4 14h8a1.5 1.5 0 0 0 1.5-1.5V6.621a1.5 1.5 0 0 0-.44-1.06L9.94 2.439A1.5 1.5 0 0 0 8.878 2H4Zm4 3.5a.75.75 0 0 1 .75.75v2.69l.72-.72a.75.75 0 1 1 1.06 1.06l-2 2a.75.75 0 0 1-1.06 0l-2-2a.75.75 0 0 1 1.06-1.06l.72.72V6.25A.75.75 0 0 1 8 5.5Z"
									clip-rule="evenodd"
								/>
							</svg>
						</div>
					</button>
Timothy J. Baek's avatar
Timothy J. Baek committed
545
				</div>
546
			</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569

			<div class="text-xs flex items-center space-x-1">
				<div>
					<svg
						xmlns="http://www.w3.org/2000/svg"
						fill="none"
						viewBox="0 0 24 24"
						stroke-width="1.5"
						stroke="currentColor"
						class="w-3 h-3"
					>
						<path
							stroke-linecap="round"
							stroke-linejoin="round"
							d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z"
						/>
					</svg>
				</div>

				<div class="line-clamp-1">
					Tip: Use '#' in the prompt input to swiftly load and select your documents.
				</div>
			</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
570
571
572
		</div>
	</div>
</div>