feat: chat folder drag and drop support

src/lib/apis/chats/index.ts

@@ -579,6 +579,41 @@ export const shareChatById = async (token: string, id: string) => {
 	return res;
 };
 
+export const updateChatFolderIdById = async (token: string, id: string, folderId?: string) => {
+	let error = null;
+
+	const res = await fetch(`${WEBUI_API_BASE_URL}/chats/${id}/folder`, {
+		method: 'POST',
+		headers: {
+			Accept: 'application/json',
+			'Content-Type': 'application/json',
+			...(token && { authorization: `Bearer ${token}` })
+		},
+		body: JSON.stringify({
+			folder_id: folderId
+		})
+	})
+		.then(async (res) => {
+			if (!res.ok) throw await res.json();
+			return res.json();
+		})
+		.then((json) => {
+			return json;
+		})
+		.catch((err) => {
+			error = err;
+
+			console.log(err);
+			return null;
+		});
+
+	if (error) {
+		throw error;
+	}
+
+	return res;
+};
+
 export const archiveChatById = async (token: string, id: string) => {
 	let error = null;
 

src/lib/components/layout/Sidebar.svelte

@@ -28,7 +28,9 @@
 		createNewChat,
 		getPinnedChatList,
 		toggleChatPinnedStatusById,
-		getChatPinnedStatusById
+		getChatPinnedStatusById,
+		getChatById,
+		updateChatFolderIdById
 	} from '$lib/apis/chats';
 	import { WEBUI_BASE_URL } from '$lib/constants';
 
@@ -110,13 +112,12 @@
 			return;
 		}
 
-		if (Object.values(folders).find((folder) => folder.name.toLowerCase() === name.toLowerCase())) {
+		const rootFolders = Object.values(folders).filter((folder) => folder.parent_id === null);
+		if (rootFolders.find((folder) => folder.name.toLowerCase() === name.toLowerCase())) {
 			// If a folder with the same name already exists, append a number to the name
 			let i = 1;
 			while (
-				Object.values(folders).find(
-					(folder) => folder.name.toLowerCase() === `${name} ${i}`.toLowerCase()
-				)
+				rootFolders.find((folder) => folder.name.toLowerCase() === `${name} ${i}`.toLowerCase())
 			) {
 				i++;
 			}
@@ -601,14 +602,33 @@
 							const { type, id } = e.detail;
 
 							if (type === 'chat') {
-								const status = await getChatPinnedStatusById(localStorage.token, id);
+								const chat = await getChatById(localStorage.token, id);
 
-								if (!status) {
-									const res = await toggleChatPinnedStatusById(localStorage.token, id);
+								if (chat) {
+									console.log(chat);
+									if (chat.folder_id) {
+										const res = await updateChatFolderIdById(
+											localStorage.token,
+											chat.id,
+											null
+										).catch((error) => {
+											toast.error(error);
+											return null;
+										});
 
-									if (res) {
-										await pinnedChats.set(await getPinnedChatList(localStorage.token));
-										initChatList();
+										if (res) {
+											await initFolders();
+											initChatList();
+										}
+									}
+
+									if (chat.pinned) {
+										const res = await toggleChatPinnedStatusById(localStorage.token, id);
+
+										if (res) {
+											await pinnedChats.set(await getPinnedChatList(localStorage.token));
+											initChatList();
+										}
 									}
 								}
 							}
@@ -672,14 +692,31 @@
 						const { type, id } = e.detail;
 
 						if (type === 'chat') {
-							const status = await getChatPinnedStatusById(localStorage.token, id);
+							const chat = await getChatById(localStorage.token, id);
 
-							if (status) {
-								const res = await toggleChatPinnedStatusById(localStorage.token, id);
+							if (chat) {
+								console.log(chat);
+								if (chat.folder_id) {
+									const res = await updateChatFolderIdById(localStorage.token, chat.id, null).catch(
+										(error) => {
+											toast.error(error);
+											return null;
+										}
+									);
 
-								if (res) {
-									await pinnedChats.set(await getPinnedChatList(localStorage.token));
-									initChatList();
+									if (res) {
+										await initFolders();
+										initChatList();
+									}
+								}
+
+								if (chat.pinned) {
+									const res = await toggleChatPinnedStatusById(localStorage.token, id);
+
+									if (res) {
+										await pinnedChats.set(await getPinnedChatList(localStorage.token));
+										initChatList();
+									}
 								}
 							}
 						} else if (type === 'folder') {

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

@@ -109,6 +109,8 @@
 		'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=';
 
 	const onDragStart = (event) => {
+		event.stopPropagation();
+
 		event.dataTransfer.setDragImage(dragImage, 0, 0);
 
 		// Set the data to be transferred
@@ -125,11 +127,15 @@
 	};
 
 	const onDrag = (event) => {
+		event.stopPropagation();
+
 		x = event.clientX;
 		y = event.clientY;
 	};
 
 	const onDragEnd = (event) => {
+		event.stopPropagation();
+
 		itemElement.style.opacity = '1'; // Reset visual cue after drag
 		dragged = false;
 	};

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

@@ -17,6 +17,8 @@
 		updateFolderParentIdById
 	} from '$lib/apis/folders';
 	import { toast } from 'svelte-sonner';
+	import { updateChatFolderIdById } from '$lib/apis/chats';
+	import ChatItem from './ChatItem.svelte';
 
 	export let open = true;
 
@@ -80,7 +82,16 @@
 					}
 				} else if (type === 'chat') {
 					// Move the chat
-					console.log('Move the chat');
+					const res = await updateChatFolderIdById(localStorage.token, id, folderId).catch(
+						(error) => {
+							toast.error(error);
+							return null;
+						}
+					);
+
+					if (res) {
+						dispatch('update');
+					}
 				}
 			} catch (error) {
 				console.error(error);
@@ -272,8 +283,8 @@
 							type="text"
 							bind:value={name}
 							on:blur={() => {
-								edit = false;
 								nameUpdateHandler();
+								edit = false;
 							}}
 							on:click={(e) => {
 								// Prevent accidental collapse toggling when clicking inside input
@@ -283,6 +294,11 @@
 								// Prevent accidental collapse toggling when clicking inside input
 								e.stopPropagation();
 							}}
+							on:keydown={(e) => {
+								if (e.key === 'Enter') {
+									edit = false;
+								}
+							}}
 							class="w-full h-full bg-transparent text-gray-500 dark:text-gray-500 outline-none"
 						/>
 					{:else}
@@ -304,15 +320,24 @@
 		</div>
 
 		<div slot="content" class="w-full">
-			{#if folders[folderId].childrenIds || folders[folderId].items?.chat_ids}
+			{#if folders[folderId].childrenIds || folders[folderId].items?.chats}
 				<div
-					class="ml-3 pl-1 mt-[1px] flex flex-col overflow-y-auto scrollbar-hidden border-s dark:border-gray-850"
+					class="ml-3 pl-1 mt-[1px] flex flex-col overflow-y-auto scrollbar-hidden border-s border-gray-100 dark:border-gray-900"
 				>
 					{#if folders[folderId]?.childrenIds}
-						{#each folders[folderId]?.childrenIds as childId (`${folderId}-${childId}`)}
+						{@const children = folders[folderId]?.childrenIds
+							.map((id) => folders[id])
+							.sort((a, b) =>
+								a.name.localeCompare(b.name, undefined, {
+									numeric: true,
+									sensitivity: 'base'
+								})
+							)}
+
+						{#each children as childFolder (`${folderId}-${childFolder.id}`)}
 							<svelte:self
 								{folders}
-								folderId={childId}
+								folderId={childFolder.id}
 								parentDragged={dragged}
 								on:update={(e) => {
 									dispatch('update', e.detail);
@@ -321,9 +346,9 @@
 						{/each}
 					{/if}
 
-					{#if folders[folderId].items?.chat_ids}
-						{#each folder.items.chat_ids as chatId (chatId)}
-							{chatId}
+					{#if folders[folderId].items?.chats}
+						{#each folders[folderId].items.chats as chat (chat.id)}
+							<ChatItem id={chat.id} title={chat.title} />
 						{/each}
 					{/if}
 				</div>