enh: disable drag event listener if parent dragged

backend/open_webui/apps/webui/models/chats.py

@@ -256,7 +256,7 @@ class ChatTable:
         limit: int = 50,
     ) -> list[ChatModel]:
         with get_db() as db:
-            query = db.query(Chat).filter_by(user_id=user_id)
+            query = db.query(Chat).filter_by(user_id=user_id).filter_by(parent_id=None)
             if not include_archived:
                 query = query.filter_by(archived=False)
 

src/lib/components/layout/Sidebar.svelte

@@ -77,16 +77,27 @@
 
 		folders = {};
 
+		// First pass: Initialize all folder entries
 		for (const folder of folderList) {
-			folders[folder.id] = { ...(folders[folder.id] ? folders[folder.id] : {}), ...folder };
+			// Ensure folder is added to folders with its data
+			folders[folder.id] = { ...(folders[folder.id] || {}), ...folder };
+		}
 
-			if (folders[folder.id].parent_id) {
-				folders[folders[folder.id].parent_id].childrenIds = folders[folders[folder.id].parent_id]
-					.childrenIds
-					? [...folders[folders[folder.id].parent_id].childrenIds, folder.id]
+		// Second pass: Tie child folders to their parents
+		for (const folder of folderList) {
+			if (folder.parent_id) {
+				// Ensure the parent folder is initialized if it doesn't exist
+				if (!folders[folder.parent_id]) {
+					folders[folder.parent_id] = {}; // Create a placeholder if not already present
+				}
+
+				// Initialize childrenIds array if it doesn't exist and add the current folder id
+				folders[folder.parent_id].childrenIds = folders[folder.parent_id].childrenIds
+					? [...folders[folder.parent_id].childrenIds, folder.id]
 					: [folder.id];
 
-				folders[folders[folder.id].parent_id].childrenIds.sort((a, b) => {
+				// Sort the children by updated_at field
+				folders[folder.parent_id].childrenIds.sort((a, b) => {
 					return folders[b].updated_at - folders[a].updated_at;
 				});
 			}

src/lib/components/layout/Sidebar/RecursiveFolder.svelte

@@ -19,6 +19,8 @@
 
 	export let className = '';
 
+	export let parentDragged = false;
+
 	let folderElement;
 
 	let edit = false;
@@ -31,12 +33,18 @@
 	const onDragOver = (e) => {
 		e.preventDefault();
 		e.stopPropagation();
+		if (dragged || parentDragged) {
+			return;
+		}
 		draggedOver = true;
 	};
 
 	const onDrop = (e) => {
 		e.preventDefault();
 		e.stopPropagation();
+		if (dragged || parentDragged) {
+			return;
+		}
 
 		if (folderElement.contains(e.target)) {
 			console.log('Dropped on the Button');
@@ -57,6 +65,10 @@
 
 	const onDragLeave = (e) => {
 		e.preventDefault();
+		if (dragged || parentDragged) {
+			return;
+		}
+
 		draggedOver = false;
 	};
 
@@ -221,7 +233,7 @@
 				>
 					{#if folders[folderId]?.childrenIds}
 						{#each folders[folderId]?.childrenIds as childId (`${folderId}-${childId}`)}
-							<svelte:self {folders} folderId={childId} />
+							<svelte:self {folders} folderId={childId} parentDragged={dragged} />
 						{/each}
 					{/if}