refac/enh: folder optimization

src/lib/apis/chats/index.ts

@@ -327,6 +327,45 @@ export const getChatsByFolderId = async (token: string, folderId: string) => {
 	return res;
 };
 
+export const getChatListByFolderId = async (token: string, folderId: string, page: number = 1) => {
+	let error = null;
+
+	const searchParams = new URLSearchParams();
+	if (page !== null) {
+		searchParams.append('page', `${page}`);
+	}
+
+	const res = await fetch(
+		`${WEBUI_API_BASE_URL}/chats/folder/${folderId}/list?${searchParams.toString()}`,
+		{
+			method: 'GET',
+			headers: {
+				Accept: 'application/json',
+				'Content-Type': 'application/json',
+				...(token && { authorization: `Bearer ${token}` })
+			}
+		}
+	)
+		.then(async (res) => {
+			if (!res.ok) throw await res.json();
+			return res.json();
+		})
+		.then((json) => {
+			return json;
+		})
+		.catch((err) => {
+			error = err;
+			console.error(err);
+			return null;
+		});
+
+	if (error) {
+		throw error;
+	}
+
+	return res;
+};
+
 export const getAllArchivedChats = async (token: string) => {
 	let error = null;
 

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

@@ -51,6 +51,8 @@
 	export let selected = false;
 	export let shiftKey = false;
 
+	export let onDragEnd = () => {};
+
 	let chat = null;
 
 	let mouseOver = false;
@@ -201,11 +203,13 @@
 		y = event.clientY;
 	};
 
-	const onDragEnd = (event) => {
+	const onDragEndHandler = (event) => {
 		event.stopPropagation();
 
 		itemElement.style.opacity = '1'; // Reset visual cue after drag
 		dragged = false;
+
+		onDragEnd(event);
 	};
 
 	const onClickOutside = (event) => {
@@ -225,7 +229,7 @@
 			// Event listener for when dragging occurs (optional)
 			itemElement.addEventListener('drag', onDrag);
 			// Event listener for when dragging ends
-			itemElement.addEventListener('dragend', onDragEnd);
+			itemElement.addEventListener('dragend', onDragEndHandler);
 		}
 	});
 
@@ -235,7 +239,7 @@
 
 			itemElement.removeEventListener('dragstart', onDragStart);
 			itemElement.removeEventListener('drag', onDrag);
-			itemElement.removeEventListener('dragend', onDragEnd);
+			itemElement.removeEventListener('dragend', onDragEndHandler);
 		}
 	});
 

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

@@ -18,15 +18,27 @@
 				sensitivity: 'base'
 			})
 		);
+
+	let folderRegistry = {};
+
+	const onItemMove = (e) => {
+		console.log(`onItemMove`, e, folderRegistry);
+
+		if (e.originFolderId) {
+			folderRegistry[e.originFolderId]?.setFolderItems();
+		}
+	};
 </script>
 
 {#each folderList as folderId (folderId)}
 	<RecursiveFolder
 		className=""
+		bind:folderRegistry
 		{folders}
 		{folderId}
 		{shiftKey}
 		{onDelete}
+		{onItemMove}
 		on:import={(e) => {
 			dispatch('import', e.detail);
 		}}

src/lib/components/layout/Sidebar/Folders/FolderModal.svelte

@@ -59,8 +59,6 @@
 			system_prompt: '',
 			files: []
 		};
-
-		console.log(folder);
 	};
 
 	const focusInput = async () => {

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

@@ -8,6 +8,7 @@
 	import fileSaver from 'file-saver';
 	const { saveAs } = fileSaver;
 
+	import { goto } from '$app/navigation';
 	import { toast } from 'svelte-sonner';
 
 	import { chatId, mobile, selectedFolder, showSidebar } from '$lib/stores';
@@ -21,6 +22,7 @@
 	import {
 		getChatById,
 		getChatsByFolderId,
+		getChatListByFolderId,
 		importChat,
 		updateChatFolderIdById
 	} from '$lib/apis/chats';
@@ -37,9 +39,10 @@
 	import FolderMenu from './Folders/FolderMenu.svelte';
 	import DeleteConfirmDialog from '$lib/components/common/ConfirmDialog.svelte';
 	import FolderModal from './Folders/FolderModal.svelte';
-	import { goto } from '$app/navigation';
 	import Emoji from '$lib/components/common/Emoji.svelte';
+	import Spinner from '$lib/components/common/Spinner.svelte';
 
+	export let folderRegistry = {};
 	export let open = false;
 
 	export let folders;
@@ -51,6 +54,7 @@
 	export let parentDragged = false;
 
 	export let onDelete = (e) => {};
+	export let onItemMove = (e) => {};
 
 	let folderElement;
 
@@ -171,6 +175,12 @@
 									return null;
 								});
 
+								onItemMove({
+									originFolderId: chat.folder_id,
+									targetFolderId: folderId,
+									e
+								});
+
 								if (res) {
 									dispatch('update');
 								}
@@ -182,6 +192,7 @@
 				}
 			}
 
+			setFolderItems();
 			draggedOver = false;
 		}
 	};
@@ -234,6 +245,10 @@
 	};
 
 	onMount(async () => {
+		folderRegistry[folderId] = {
+			setFolderItems: () => setFolderItems()
+		};
+
 		open = folders[folderId].is_expanded;
 		if (folderElement) {
 			folderElement.addEventListener('dragover', onDragOver);
@@ -250,7 +265,6 @@
 
 		if (folders[folderId]?.new) {
 			delete folders[folderId].new;
-
 			await tick();
 			renameHandler();
 		}
@@ -339,6 +353,21 @@
 		}, 500);
 	};
 
+	let chats = null;
+	export const setFolderItems = async () => {
+		await tick();
+		if (open) {
+			chats = await getChatListByFolderId(localStorage.token, folderId).catch((error) => {
+				toast.error(`${error}`);
+				return [];
+			});
+		} else {
+			chats = null;
+		}
+	};
+
+	$: setFolderItems(open);
+
 	const renameHandler = async () => {
 		console.log('Edit');
 		await tick();
@@ -419,8 +448,6 @@
 		bind:open
 		className="w-full"
 		buttonClassName="w-full"
-		hide={(folders[folderId]?.childrenIds ?? []).length === 0 &&
-			(folders[folderId].items?.chats ?? []).length === 0}
 		onChange={(state) => {
 			dispatch('open', state);
 		}}
@@ -466,6 +493,7 @@
 					class="text-gray-500 dark:text-gray-500 transition-all p-1 hover:bg-gray-200 dark:hover:bg-gray-850 rounded-lg"
 					on:click={(e) => {
 						e.stopPropagation();
+						e.stopImmediatePropagation();
 						open = !open;
 						isExpandedUpdateDebounceHandler();
 					}}
@@ -548,7 +576,7 @@
 		</div>
 
 		<div slot="content" class="w-full">
-			{#if (folders[folderId]?.childrenIds ?? []).length > 0 || (folders[folderId].items?.chats ?? []).length > 0}
+			{#if (folders[folderId]?.childrenIds ?? []).length > 0 || (chats ?? []).length > 0}
 				<div
 					class="ml-3 pl-1 mt-[1px] flex flex-col overflow-y-auto scrollbar-hidden border-s border-gray-100 dark:border-gray-900"
 				>
@@ -564,10 +592,12 @@
 
 						{#each children as childFolder (`${folderId}-${childFolder.id}`)}
 							<svelte:self
+								bind:folderRegistry
 								{folders}
 								folderId={childFolder.id}
 								{shiftKey}
 								parentDragged={dragged}
+								{onItemMove}
 								{onDelete}
 								on:import={(e) => {
 									dispatch('import', e.detail);
@@ -582,18 +612,22 @@
 						{/each}
 					{/if}
 
-					{#if folders[folderId].items?.chats}
-						{#each folders[folderId].items.chats as chat (chat.id)}
-							<ChatItem
-								id={chat.id}
-								title={chat.title}
-								{shiftKey}
-								on:change={(e) => {
-									dispatch('change', e.detail);
-								}}
-							/>
-						{/each}
-					{/if}
+					{#each chats ?? [] as chat (chat.id)}
+						<ChatItem
+							id={chat.id}
+							title={chat.title}
+							{shiftKey}
+							on:change={(e) => {
+								dispatch('change', e.detail);
+							}}
+						/>
+					{/each}
+				</div>
+			{/if}
+
+			{#if chats === null}
+				<div class="flex justify-center items-center p-2">
+					<Spinner className="size-4 text-gray-500" />
 				</div>
 			{/if}
 		</div>