feat: documents backend integration

src/routes/(app)/documents/+page.svelte

@@ -11,11 +11,16 @@
 	import { uploadDocToVectorDB } from '$lib/apis/rag';
 	import { transformFileName } from '$lib/utils';
 
+	import EditDocModal from '$lib/components/documents/EditDocModal.svelte';
+
 	let importFiles = '';
 
 	let inputFiles = '';
 	let query = '';
 
+	let showEditDocModal = false;
+	let selectedDoc;
+
 	let dragged = false;
 
 	const deleteDoc = async (name) => {
@@ -70,6 +75,10 @@
 	};
 </script>
 
+{#key selectedDoc}
+	<EditDocModal bind:show={showEditDocModal} {selectedDoc} />
+{/key}
+
 <div class="min-h-screen w-full flex justify-center dark:text-white">
 	<div class=" py-2.5 flex flex-col justify-between w-full">
 		<div class="max-w-2xl mx-auto w-full px-3 md:px-0 my-10">
@@ -156,7 +165,7 @@
 						<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">
-							Drop any files here to add to the conversation
+							Drop any files here to add to my documents
 						</div>
 					</div>
 				</div>
@@ -232,10 +241,13 @@
 						</div>
 					</div>
 					<div class="flex flex-row space-x-1 self-center">
-						<a
+						<button
 							class="self-center w-fit text-sm px-2 py-2 border dark:border-gray-600 rounded-xl"
 							type="button"
-							href={`/prompts/edit?command=${encodeURIComponent(doc.name)}`}
+							on:click={async () => {
+								showEditDocModal = !showEditDocModal;
+								selectedDoc = doc;
+							}}
 						>
 							<svg
 								xmlns="http://www.w3.org/2000/svg"
@@ -251,7 +263,7 @@
 									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>
-						</a>
+						</button>
 
 						<!-- <button
 									class="self-center w-fit text-sm px-2 py-2 border dark:border-gray-600 rounded-xl"