enh: sync directory

src/lib/components/workspace/Knowledge/Collection.svelte

@@ -14,6 +14,7 @@
 		addFileToKnowledgeById,
 		getKnowledgeById,
 		removeFileFromKnowledgeById,
+		resetKnowledgeById,
 		updateFileFromKnowledgeById,
 		updateKnowledgeById
 	} from '$lib/apis/knowledge';
@@ -70,10 +71,12 @@
 	let selectedFileId = null;
 
 	$: if (selectedFileId) {
-		const file = knowledge.files.find((file) => file.id === selectedFileId);
+		const file = (knowledge?.files ?? []).find((file) => file.id === selectedFileId);
 		if (file) {
 			file.data = file.data ?? { content: '' };
 			selectedFile = file;
+		} else {
+			selectedFile = null;
 		}
 	} else {
 		selectedFile = null;
@@ -130,6 +133,9 @@
 			// Get directory handle through picker
 			const dirHandle = await window.showDirectoryPicker();
 
+			console.log(typeof dirHandle);
+			console.log(dirHandle);
+
 			let totalFiles = 0;
 			let uploadedFiles = 0;
 
@@ -196,8 +202,18 @@
 	};
 
 	// Helper function to maintain file paths within zip
-	const getRelativePath = (fullPath, basePath) => {
-		return fullPath.substring(basePath.length + 1);
+	const syncDirectoryHandler = async () => {
+		const res = await resetKnowledgeById(localStorage.token, id).catch((e) => {
+			toast.error(e);
+		});
+
+		if (res) {
+			knowledge = res;
+			toast.success($i18n.t('Knowledge reset successfully.'));
+
+			// Upload directory
+			uploadDirectoryHandler();
+		}
 	};
 
 	const addFileHandler = async (fileId) => {
@@ -501,6 +517,9 @@
 													document.getElementById('files-input').click();
 												}
 											}}
+											on:sync={(e) => {
+												syncDirectoryHandler();
+											}}
 										/>
 									</div>
 								</div>

src/lib/components/workspace/Knowledge/Collection/AddContentMenu.svelte

@@ -5,18 +5,11 @@
 	const dispatch = createEventDispatcher();
 
 	import Dropdown from '$lib/components/common/Dropdown.svelte';
-	import GarbageBin from '$lib/components/icons/GarbageBin.svelte';
-	import Pencil from '$lib/components/icons/Pencil.svelte';
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
-	import Tags from '$lib/components/chat/Tags.svelte';
-	import Share from '$lib/components/icons/Share.svelte';
-	import ArchiveBox from '$lib/components/icons/ArchiveBox.svelte';
-	import DocumentDuplicate from '$lib/components/icons/DocumentDuplicate.svelte';
-	import ArrowDownTray from '$lib/components/icons/ArrowDownTray.svelte';
 	import ArrowUpCircle from '$lib/components/icons/ArrowUpCircle.svelte';
-	import EllipsisHorizontal from '$lib/components/icons/EllipsisHorizontal.svelte';
 	import BarsArrowUp from '$lib/components/icons/BarsArrowUp.svelte';
 	import FolderOpen from '$lib/components/icons/FolderOpen.svelte';
+	import ArrowPath from '$lib/components/icons/ArrowPath.svelte';
 
 	const i18n = getContext('i18n');
 
@@ -83,6 +76,23 @@
 				<div class="flex items-center">{$i18n.t('Upload directory')}</div>
 			</DropdownMenu.Item>
 
+			<Tooltip
+				content={$i18n.t(
+					'This option will delete all existing files in the collection and replace them with newly uploaded files.'
+				)}
+				className="w-full"
+			>
+				<DropdownMenu.Item
+					class="flex  gap-2  items-center px-3 py-2 text-sm  cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md"
+					on:click={() => {
+						dispatch('sync', { type: 'directory' });
+					}}
+				>
+					<ArrowPath strokeWidth="2" />
+					<div class="flex items-center">{$i18n.t('Sync directory')}</div>
+				</DropdownMenu.Item>
+			</Tooltip>
+
 			<DropdownMenu.Item
 				class="flex  gap-2  items-center px-3 py-2 text-sm  cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md"
 				on:click={() => {