enh: add folder modal

backend/open_webui/models/folders.py

@@ -63,7 +63,7 @@ class FolderForm(BaseModel):
 
 class FolderTable:
     def insert_new_folder(
-        self, user_id: str, name: str, parent_id: Optional[str] = None
+        self, user_id: str, form_data: FolderForm, parent_id: Optional[str] = None
     ) -> Optional[FolderModel]:
         with get_db() as db:
             id = str(uuid.uuid4())
@@ -71,7 +71,7 @@ class FolderTable:
                 **{
                     "id": id,
                     "user_id": user_id,
-                    "name": name,
+                    **(form_data.model_dump(exclude_unset=True) or {}),
                     "parent_id": parent_id,
                     "created_at": int(time.time()),
                     "updated_at": int(time.time()),

backend/open_webui/routers/folders.py

@@ -78,7 +78,7 @@ def create_folder(form_data: FolderForm, user=Depends(get_verified_user)):
         )
 
     try:
-        folder = Folders.insert_new_folder(user.id, form_data.name)
+        folder = Folders.insert_new_folder(user.id, form_data)
         return folder
     except Exception as e:
         log.exception(e)

src/lib/apis/folders/index.ts

@@ -1,6 +1,11 @@
 import { WEBUI_API_BASE_URL } from '$lib/constants';
 
-export const createNewFolder = async (token: string, name: string) => {
+type FolderForm = {
+	name: string;
+	data?: Record<string, any>;
+};
+
+export const createNewFolder = async (token: string, folderForm: FolderForm) => {
 	let error = null;
 
 	const res = await fetch(`${WEBUI_API_BASE_URL}/folders/`, {
@@ -10,9 +15,7 @@ export const createNewFolder = async (token: string, name: string) => {
 			'Content-Type': 'application/json',
 			authorization: `Bearer ${token}`
 		},
-		body: JSON.stringify({
-			name: name
-		})
+		body: JSON.stringify(folderForm)
 	})
 		.then(async (res) => {
 			if (!res.ok) throw await res.json();
@@ -92,11 +95,6 @@ export const getFolderById = async (token: string, id: string) => {
 	return res;
 };
 
-type FolderForm = {
-	name: string;
-	data?: Record<string, any>;
-};
-
 export const updateFolderById = async (token: string, id: string, folderForm: FolderForm) => {
 	let error = null;
 

src/lib/components/layout/Sidebar.svelte

@@ -58,6 +58,7 @@
 	import Home from '../icons/Home.svelte';
 	import Search from '../icons/Search.svelte';
 	import SearchModal from './SearchModal.svelte';
+	import FolderModal from './Sidebar/Folders/FolderModal.svelte';
 
 	const BREAKPOINT = 768;
 
@@ -74,6 +75,7 @@
 	let chatListLoading = false;
 	let allChatsLoaded = false;
 
+	let showCreateFolderModal = false;
 	let folders = {};
 	let newFolderId = null;
 
@@ -117,7 +119,7 @@
 		}
 	};
 
-	const createFolder = async (name = 'Untitled') => {
+	const createFolder = async ({ name, data }) => {
 		if (name === '') {
 			toast.error($i18n.t('Folder name cannot be empty.'));
 			return;
@@ -148,13 +150,16 @@
 			}
 		};
 
-		const res = await createNewFolder(localStorage.token, name).catch((error) => {
+		const res = await createNewFolder(localStorage.token, {
+			name,
+			data
+		}).catch((error) => {
 			toast.error(`${error}`);
 			return null;
 		});
 
 		if (res) {
-			newFolderId = res.id;
+			// newFolderId = res.id;
 			await initFolders();
 		}
 	};
@@ -429,6 +434,14 @@
 	}}
 />
 
+<FolderModal
+	bind:show={showCreateFolderModal}
+	onSubmit={async (folder) => {
+		await createFolder(folder);
+		showCreateFolderModal = false;
+	}}
+/>
+
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 
 {#if $showSidebar}
@@ -732,7 +745,7 @@
 				className="px-2 mt-0.5"
 				name={$i18n.t('Chats')}
 				onAdd={() => {
-					createFolder();
+					showCreateFolderModal = true;
 				}}
 				onAddLabel={$i18n.t('New Folder')}
 				on:change={async (e) => {

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

@@ -49,6 +49,14 @@
 	$: if (folder) {
 		init();
 	}
+
+	$: if (!show && !edit) {
+		name = '';
+		data = {
+			system_prompt: '',
+			files: []
+		};
+	}
 </script>
 
 <Modal size="md" bind:show>