feat: knowledge directory

src/lib/apis/knowledge/index.ts

@@ -201,7 +201,8 @@ export const searchKnowledgeFilesById = async (
 	viewOption?: string | null = null,
 	orderBy?: string | null = null,
 	direction?: string | null = null,
-	page: number = 1
+	page: number = 1,
+	directoryId?: string | null = undefined
 ) => {
 	let error = null;
 
@@ -211,6 +212,10 @@ export const searchKnowledgeFilesById = async (
 	if (orderBy) searchParams.append('order_by', orderBy);
 	if (direction) searchParams.append('direction', direction);
 	searchParams.append('page', page.toString());
+	// directoryId: undefined = don't filter, null = root, string = specific dir
+	if (directoryId !== undefined) {
+		searchParams.append('directory_id', directoryId ?? '');
+	}
 
 	const res = await fetch(
 		`${WEBUI_API_BASE_URL}/knowledge/${id}/files?${searchParams.toString()}`,
@@ -322,9 +327,17 @@ export const updateKnowledgeAccessGrants = async (
 	return res;
 };
 
-export const addFileToKnowledgeById = async (token: string, id: string, fileId: string) => {
+export const addFileToKnowledgeById = async (
+	token: string,
+	id: string,
+	fileId: string,
+	directoryId?: string | null
+) => {
 	let error = null;
 
+	const body: Record<string, string> = { file_id: fileId };
+	if (directoryId) body.directory_id = directoryId;
+
 	const res = await fetch(`${WEBUI_API_BASE_URL}/knowledge/${id}/file/add`, {
 		method: 'POST',
 		headers: {
@@ -332,9 +345,7 @@ export const addFileToKnowledgeById = async (token: string, id: string, fileId:
 			'Content-Type': 'application/json',
 			authorization: `Bearer ${token}`
 		},
-		body: JSON.stringify({
-			file_id: fileId
-		})
+		body: JSON.stringify(body)
 	})
 		.then(async (res) => {
 			if (!res.ok) throw await res.json();
@@ -544,3 +555,151 @@ export const exportKnowledgeById = async (token: string, id: string) => {
 
 	return res;
 };
+
+// ── Directory API ───────────────────────────────────────────────────
+
+export const createKnowledgeDirectory = async (
+	token: string,
+	id: string,
+	name: string,
+	parentId?: string | null
+) => {
+	let error = null;
+
+	const body: Record<string, string | null> = { name };
+	if (parentId) body.parent_id = parentId;
+
+	const res = await fetch(`${WEBUI_API_BASE_URL}/knowledge/${id}/dirs/create`, {
+		method: 'POST',
+		headers: {
+			Accept: 'application/json',
+			'Content-Type': 'application/json',
+			authorization: `Bearer ${token}`
+		},
+		body: JSON.stringify(body)
+	})
+		.then(async (res) => {
+			if (!res.ok) throw await res.json();
+			return res.json();
+		})
+		.catch((err) => {
+			error = err.detail;
+			console.error(err);
+			return null;
+		});
+
+	if (error) {
+		throw error;
+	}
+
+	return res;
+};
+
+export const updateKnowledgeDirectory = async (
+	token: string,
+	id: string,
+	dirId: string,
+	form: { name?: string; parent_id?: string | null }
+) => {
+	let error = null;
+
+	const res = await fetch(`${WEBUI_API_BASE_URL}/knowledge/${id}/dirs/${dirId}/update`, {
+		method: 'POST',
+		headers: {
+			Accept: 'application/json',
+			'Content-Type': 'application/json',
+			authorization: `Bearer ${token}`
+		},
+		body: JSON.stringify(form)
+	})
+		.then(async (res) => {
+			if (!res.ok) throw await res.json();
+			return res.json();
+		})
+		.catch((err) => {
+			error = err.detail;
+			console.error(err);
+			return null;
+		});
+
+	if (error) {
+		throw error;
+	}
+
+	return res;
+};
+
+export const deleteKnowledgeDirectory = async (
+	token: string,
+	id: string,
+	dirId: string,
+	moveFiles: boolean = true
+) => {
+	let error = null;
+
+	const searchParams = new URLSearchParams();
+	searchParams.append('move_files', moveFiles.toString());
+
+	const res = await fetch(
+		`${WEBUI_API_BASE_URL}/knowledge/${id}/dirs/${dirId}/delete?${searchParams.toString()}`,
+		{
+			method: 'DELETE',
+			headers: {
+				Accept: 'application/json',
+				authorization: `Bearer ${token}`
+			}
+		}
+	)
+		.then(async (res) => {
+			if (!res.ok) throw await res.json();
+			return res.json();
+		})
+		.catch((err) => {
+			error = err.detail;
+			console.error(err);
+			return null;
+		});
+
+	if (error) {
+		throw error;
+	}
+
+	return res;
+};
+
+export const moveFileInKnowledge = async (
+	token: string,
+	id: string,
+	fileId: string,
+	directoryId?: string | null
+) => {
+	let error = null;
+
+	const res = await fetch(`${WEBUI_API_BASE_URL}/knowledge/${id}/file/move`, {
+		method: 'POST',
+		headers: {
+			Accept: 'application/json',
+			'Content-Type': 'application/json',
+			authorization: `Bearer ${token}`
+		},
+		body: JSON.stringify({
+			file_id: fileId,
+			directory_id: directoryId ?? null
+		})
+	})
+		.then(async (res) => {
+			if (!res.ok) throw await res.json();
+			return res.json();
+		})
+		.catch((err) => {
+			error = err.detail;
+			console.error(err);
+			return null;
+		});
+
+	if (error) {
+		throw error;
+	}
+
+	return res;
+};

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

@@ -32,7 +32,11 @@
 		updateFileFromKnowledgeById,
 		updateKnowledgeById,
 		updateKnowledgeAccessGrants,
-		searchKnowledgeFilesById
+		searchKnowledgeFilesById,
+		createKnowledgeDirectory,
+		updateKnowledgeDirectory,
+		deleteKnowledgeDirectory,
+		moveFileInKnowledge
 	} from '$lib/apis/knowledge';
 	import { processWeb, processYoutubeVideo } from '$lib/apis/retrieval';
 
@@ -44,8 +48,11 @@
 
 	import AddContentMenu from './KnowledgeBase/AddContentMenu.svelte';
 	import AddTextContentModal from './KnowledgeBase/AddTextContentModal.svelte';
+	import NewDirectoryModal from './KnowledgeBase/NewDirectoryModal.svelte';
+	import KnowledgeBreadcrumbs from './KnowledgeBase/KnowledgeBreadcrumbs.svelte';
 
 	import SyncConfirmDialog from '../../common/ConfirmDialog.svelte';
+	import ConfirmDialog from '../../common/ConfirmDialog.svelte';
 	import Drawer from '$lib/components/common/Drawer.svelte';
 	import ChevronLeft from '$lib/components/icons/ChevronLeft.svelte';
 	import LockClosed from '$lib/components/icons/LockClosed.svelte';
@@ -63,6 +70,7 @@
 
 	let showAddWebpageModal = false;
 	let showAddTextContentModal = false;
+	let showNewDirectoryModal = false;
 
 	let showSyncConfirmModal = false;
 	let showAccessControlModal = false;
@@ -101,6 +109,15 @@
 	let fileItems = null;
 	let fileItemsTotal = null;
 
+	// Directory state
+	let currentDirectoryId: string | null = null;
+	let directoryItems = [];
+	let breadcrumbs = [];
+
+	let showDeleteDirectoryConfirm = false;
+	let pendingDeleteDirectoryId: string | null = null;
+	let deleteDirectoryContents = true;
+
 	const reset = () => {
 		currentPage = 1;
 	};
@@ -156,7 +173,8 @@
 			viewOption,
 			sortKey,
 			direction,
-			currentPage
+			currentPage,
+			currentDirectoryId
 		).catch(() => {
 			return null;
 		});
@@ -164,6 +182,8 @@
 		if (res) {
 			fileItems = res.items;
 			fileItemsTotal = res.total;
+			directoryItems = res.directories ?? [];
+			breadcrumbs = res.breadcrumbs ?? [];
 		}
 		return res;
 	};
@@ -531,7 +551,12 @@
 	};
 
 	const addFileHandler = async (fileId) => {
-		const res = await addFileToKnowledgeById(localStorage.token, id, fileId).catch((e) => {
+		const res = await addFileToKnowledgeById(
+			localStorage.token,
+			id,
+			fileId,
+			currentDirectoryId
+		).catch((e) => {
 			toast.error(`${e}`);
 			return null;
 		});
@@ -545,6 +570,88 @@
 		}
 	};
 
+	// Directory handlers
+	const navigateToDirectory = (directoryId: string | null) => {
+		currentDirectoryId = directoryId;
+		currentPage = 1;
+		selectedFileId = null;
+		selectedFile = null;
+		getItemsPage();
+	};
+
+	const createDirectoryHandler = async (name: string) => {
+		const res = await createKnowledgeDirectory(
+			localStorage.token,
+			knowledge.id,
+			name,
+			currentDirectoryId
+		).catch((e) => {
+			toast.error(`${e}`);
+			return null;
+		});
+
+		if (res) {
+			toast.success($i18n.t('Directory created.'));
+			getItemsPage();
+		}
+	};
+
+	const renameDirectoryHandler = async (dirId: string, name: string) => {
+		const res = await updateKnowledgeDirectory(localStorage.token, knowledge.id, dirId, {
+			name
+		}).catch((e) => {
+			toast.error(`${e}`);
+			return null;
+		});
+
+		if (res) {
+			toast.success($i18n.t('Directory renamed.'));
+			getItemsPage();
+		}
+	};
+
+	const confirmDeleteDirectory = (dirId: string) => {
+		pendingDeleteDirectoryId = dirId;
+		showDeleteDirectoryConfirm = true;
+	};
+
+	const deleteDirectoryHandler = async (moveFiles: boolean) => {
+		if (!pendingDeleteDirectoryId) return;
+
+		const res = await deleteKnowledgeDirectory(
+			localStorage.token,
+			knowledge.id,
+			pendingDeleteDirectoryId,
+			moveFiles
+		).catch((e) => {
+			toast.error(`${e}`);
+			return null;
+		});
+
+		if (res) {
+			toast.success($i18n.t('Directory deleted.'));
+			getItemsPage();
+		}
+		pendingDeleteDirectoryId = null;
+	};
+
+	const moveFileToDirectoryHandler = async (fileId: string, directoryId: string | null) => {
+		const res = await moveFileInKnowledge(
+			localStorage.token,
+			knowledge.id,
+			fileId,
+			directoryId
+		).catch((e) => {
+			toast.error(`${e}`);
+			return null;
+		});
+
+		if (res) {
+			toast.success($i18n.t('File moved.'));
+			getItemsPage();
+		}
+	};
+
 	const deleteFileHandler = async (fileId) => {
 		try {
 			console.log('Starting file deletion process for:', fileId);
@@ -806,6 +913,13 @@
 	}}
 />
 
+<NewDirectoryModal
+	bind:show={showNewDirectoryModal}
+	on:submit={(e) => {
+		createDirectoryHandler(e.detail.name);
+	}}
+/>
+
 <input
 	id="files-input"
 	bind:files={inputFiles}
@@ -942,6 +1056,8 @@
 								onUpload={(data) => {
 									if (data.type === 'directory') {
 										uploadDirectoryHandler();
+									} else if (data.type === 'new_directory') {
+										showNewDirectoryModal = true;
 									} else if (data.type === 'web') {
 										showAddWebpageModal = true;
 									} else if (data.type === 'text') {
@@ -959,6 +1075,12 @@
 				</div>
 			</div>
 
+			{#if currentDirectoryId !== null}
+				<div class="px-5 -mt-1 pb-2">
+					<KnowledgeBreadcrumbs rootLabel={knowledge.name} {breadcrumbs} onNavigate={(dirId) => navigateToDirectory(dirId)} />
+				</div>
+			{/if}
+
 			<div class="px-3 flex justify-between">
 				<div
 					class="flex w-full bg-transparent overflow-x-auto scrollbar-none"
@@ -1020,10 +1142,11 @@
 					<div class="flex-1 flex">
 						<div class=" flex flex-col w-full space-x-2 rounded-lg h-full">
 							<div class="w-full h-full flex flex-col min-h-full">
-								{#if fileItems.length > 0}
+								{#if fileItems.length > 0 || directoryItems.length > 0}
 									<div class=" flex overflow-y-auto h-full w-full scrollbar-hidden text-xs">
 										<Files
 											files={fileItems}
+											directories={directoryItems}
 											{knowledge}
 											{selectedFileId}
 											onClick={(fileId) => {
@@ -1044,6 +1167,11 @@
 
 												deleteFileHandler(fileId);
 											}}
+											onNavigateDirectory={(dirId) => navigateToDirectory(dirId)}
+											onRenameDirectory={(id, name) => renameDirectoryHandler(id, name)}
+											onDeleteDirectory={(id) => confirmDeleteDirectory(id)}
+											onMoveFileToDirectory={(fileId, dirId) =>
+												moveFileToDirectoryHandler(fileId, dirId)}
 										/>
 									</div>
 
@@ -1133,3 +1261,26 @@
 		<Spinner className="size-5" />
 	{/if}
 </div>
+
+<ConfirmDialog
+	bind:show={showDeleteDirectoryConfirm}
+	title={$i18n.t('Delete directory?')}
+	on:confirm={() => {
+		deleteDirectoryHandler(!deleteDirectoryContents);
+	}}
+	on:cancel={() => {
+		pendingDeleteDirectoryId = null;
+	}}
+>
+	<div class="text-sm text-gray-700 dark:text-gray-300 flex-1 line-clamp-3 mb-2">
+		{$i18n.t(`Are you sure you want to delete this directory?`)}
+	</div>
+
+	<div class="flex items-center gap-1.5">
+		<input type="checkbox" bind:checked={deleteDirectoryContents} />
+
+		<div class="text-xs text-gray-500">
+			{$i18n.t('Delete all contents inside this directory')}
+		</div>
+	</div>
+</ConfirmDialog>

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

@@ -7,6 +7,7 @@
 	import ArrowUpCircle from '$lib/components/icons/ArrowUpCircle.svelte';
 	import BarsArrowUp from '$lib/components/icons/BarsArrowUp.svelte';
 	import FolderOpen from '$lib/components/icons/FolderOpen.svelte';
+	import NewFolderAlt from '$lib/components/icons/NewFolderAlt.svelte';
 	import ArrowPath from '$lib/components/icons/ArrowPath.svelte';
 	import GlobeAlt from '$lib/components/icons/GlobeAlt.svelte';
 
@@ -54,6 +55,19 @@
 		<div
 			class="min-w-[200px] rounded-2xl px-1 py-1 border border-gray-100 dark:border-gray-800 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-lg transition"
 		>
+			<button
+				class="select-none flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl w-full"
+				on:click={() => {
+					onUpload({ type: 'new_directory' });
+					show = false;
+				}}
+			>
+				<NewFolderAlt />
+				<div class="flex items-center">{$i18n.t('New directory')}</div>
+			</button>
+
+			<hr class="my-1 border-gray-100 dark:border-gray-800" />
+
 			<button
 				class="select-none flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl w-full"
 				on:click={() => {

src/lib/components/workspace/Knowledge/KnowledgeBase/DirectoryRow.svelte

@@ -0,0 +1,174 @@
+<script lang="ts">
+	import dayjs from '$lib/dayjs';
+	import duration from 'dayjs/plugin/duration';
+	import relativeTime from 'dayjs/plugin/relativeTime';
+
+	dayjs.extend(duration);
+	dayjs.extend(relativeTime);
+
+	import { getContext } from 'svelte';
+	const i18n = getContext('i18n');
+
+	import Tooltip from '$lib/components/common/Tooltip.svelte';
+	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 Folder from '$lib/components/icons/Folder.svelte';
+	import EllipsisHorizontal from '$lib/components/icons/EllipsisHorizontal.svelte';
+
+	export let directory: {
+		id: string;
+		name: string;
+		created_at: number;
+		updated_at: number;
+	};
+	export let writeAccess = false;
+
+	export let onNavigate: (id: string) => void = () => {};
+	export let onRename: (id: string, name: string) => void = () => {};
+	export let onDelete: (id: string) => void = () => {};
+	export let onFileDrop: (fileId: string, directoryId: string) => void = () => {};
+
+	let editing = false;
+	let editName = '';
+	let editInput: HTMLInputElement;
+	let dragOver = false;
+	let showDropdown = false;
+
+	const startRename = () => {
+		editName = directory.name;
+		editing = true;
+		showDropdown = false;
+		setTimeout(() => editInput?.select(), 0);
+	};
+
+	const submitRename = () => {
+		if (!editName.trim() || editName === directory.name) {
+			editing = false;
+			return;
+		}
+		onRename(directory.id, editName.trim());
+		editing = false;
+	};
+
+	const cancelRename = () => {
+		editing = false;
+	};
+</script>
+
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div
+	class="group flex cursor-pointer w-full px-2 bg-transparent dark:hover:bg-gray-850/50 hover:bg-white rounded-xl transition
+		{dragOver
+		? 'bg-gray-100 dark:bg-gray-800 ring-1 ring-gray-300 dark:ring-gray-600'
+		: 'hover:bg-gray-100 dark:hover:bg-gray-850'}"
+	on:dblclick={() => {
+		if (writeAccess) startRename();
+	}}
+	on:dragover={(e) => {
+		if (!e.dataTransfer?.types.includes('application/x-kb-file-move')) return;
+		e.preventDefault();
+		e.stopPropagation();
+		dragOver = true;
+	}}
+	on:dragleave={() => {
+		dragOver = false;
+	}}
+	on:drop={(e) => {
+		const raw = e.dataTransfer?.getData('application/x-kb-file-move');
+		if (!raw) return;
+		e.preventDefault();
+		e.stopPropagation();
+		dragOver = false;
+		try {
+			const data = JSON.parse(raw);
+			onFileDrop(data.fileId, directory.id);
+		} catch {}
+	}}
+>
+	<div class="flex items-center">
+		<button
+			class="p-1 rounded-full transition"
+			type="button"
+			on:click={() => onNavigate(directory.id)}
+		>
+			<Folder className="size-3.5" />
+		</button>
+	</div>
+
+	<button
+		class="relative flex items-center gap-1 rounded-xl p-2 text-left flex-1 justify-between"
+		type="button"
+		on:click={() => onNavigate(directory.id)}
+	>
+		<div>
+			<div class="flex gap-2 items-center line-clamp-1">
+				{#if editing}
+					<!-- svelte-ignore a11y-autofocus -->
+					<input
+						bind:this={editInput}
+						bind:value={editName}
+						class="text-sm bg-transparent border border-gray-300 dark:border-gray-600 rounded px-1 py-0 outline-none focus:ring-1 focus:ring-gray-400"
+						on:keydown={(e) => {
+							if (e.key === 'Enter') submitRename();
+							if (e.key === 'Escape') cancelRename();
+						}}
+						on:blur={submitRename}
+						on:click={(e) => e.stopPropagation()}
+						autofocus
+					/>
+				{:else}
+					<div class="line-clamp-1 text-sm">
+						{directory.name}
+					</div>
+				{/if}
+			</div>
+		</div>
+
+		<div class="flex items-center gap-2 shrink-0">
+			{#if directory.updated_at}
+				<Tooltip content={dayjs(directory.updated_at * 1000).format('LLLL')}>
+					<div class="text-xs text-gray-400">
+						{dayjs(directory.updated_at * 1000).fromNow()}
+					</div>
+				</Tooltip>
+			{/if}
+		</div>
+	</button>
+
+	{#if writeAccess}
+		<div class="flex items-center">
+			<Dropdown bind:show={showDropdown} align="end" sideOffset={4}>
+				<button
+					class="p-1 rounded-full hover:bg-gray-100 dark:hover:bg-gray-850 transition"
+					type="button"
+				>
+					<EllipsisHorizontal className="size-3.5" />
+				</button>
+
+				<div slot="content">
+					<div
+						class="min-w-[140px] rounded-2xl p-1 z-[9999999] bg-white dark:bg-gray-850 dark:text-white shadow-lg border border-gray-100 dark:border-gray-800"
+					>
+						<button
+							type="button"
+							class="select-none flex rounded-xl py-1.5 px-3 w-full hover:bg-gray-50 dark:hover:bg-gray-800 transition items-center gap-2 text-sm"
+							on:click={() => startRename()}
+						>
+							<Pencil className="size-3.5" />
+							{$i18n.t('Rename')}
+						</button>
+						<button
+							type="button"
+							class="select-none flex rounded-xl py-1.5 px-3 w-full hover:bg-gray-50 dark:hover:bg-gray-800 transition items-center gap-2 text-sm"
+							on:click={() => onDelete(directory.id)}
+						>
+							<GarbageBin className="size-3.5" />
+							{$i18n.t('Delete')}
+						</button>
+					</div>
+				</div>
+			</Dropdown>
+		</div>
+	{/if}
+</div>

src/lib/components/workspace/Knowledge/KnowledgeBase/Files.svelte

@@ -17,21 +17,50 @@
 	import DocumentPage from '$lib/components/icons/DocumentPage.svelte';
 	import XMark from '$lib/components/icons/XMark.svelte';
 	import Spinner from '$lib/components/common/Spinner.svelte';
+	import DirectoryRow from './DirectoryRow.svelte';
 
 	export let knowledge = null;
 	export let selectedFileId = null;
 	export let files = [];
+	export let directories = [];
 
 	export let onClick = (fileId) => {};
 	export let onDelete = (fileId) => {};
+	export let onNavigateDirectory = (directoryId: string) => {};
+	export let onRenameDirectory = (id: string, name: string) => {};
+	export let onDeleteDirectory = (id: string) => {};
+	export let onMoveFileToDirectory = (fileId: string, directoryId: string) => {};
 </script>
 
 <div class=" max-h-full flex flex-col w-full gap-[0.5px]">
+	<!-- Directories first -->
+	{#each directories as dir (dir.id)}
+		<DirectoryRow
+			directory={dir}
+			writeAccess={knowledge?.write_access}
+			onNavigate={(id) => onNavigateDirectory(id)}
+			onRename={(id, name) => onRenameDirectory(id, name)}
+			onDelete={(id) => onDeleteDirectory(id)}
+			onFileDrop={(fileId, directoryId) => onMoveFileToDirectory(fileId, directoryId)}
+		/>
+	{/each}
+
+	<!-- Files -->
 	{#each files as file (file?.id ?? file?.itemId ?? file?.tempId)}
 		<div
-			class=" flex cursor-pointer w-full px-1.5 py-0.5 bg-transparent dark:hover:bg-gray-850/50 hover:bg-white rounded-xl transition {selectedFileId
+			class=" flex cursor-pointer w-full px-2 bg-transparent dark:hover:bg-gray-850/50 hover:bg-white rounded-xl transition {selectedFileId
 				? ''
 				: 'hover:bg-gray-100 dark:hover:bg-gray-850'}"
+			draggable="true"
+			on:dragstart={(e) => {
+				const fileId = file?.id ?? file?.tempId;
+				if (fileId) {
+					e.dataTransfer?.setData(
+						'application/x-kb-file-move',
+						JSON.stringify({ fileId })
+					);
+				}
+			}}
 		>
 			<div class="flex items-center">
 				{#if file?.status !== 'uploading'}

src/lib/components/workspace/Knowledge/KnowledgeBase/KnowledgeBreadcrumbs.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+	import { afterUpdate, getContext } from 'svelte';
+	const i18n = getContext('i18n');
+
+	import ChevronRight from '$lib/components/icons/ChevronRight.svelte';
+
+	export let rootLabel: string = 'Root';
+	export let breadcrumbs: { id: string; name: string }[] = [];
+	export let onNavigate: (directoryId: string | null) => void = () => {};
+
+	let breadcrumbEl: HTMLDivElement;
+
+	afterUpdate(() => {
+		if (breadcrumbEl) breadcrumbEl.scrollLeft = breadcrumbEl.scrollWidth;
+	});
+</script>
+
+<div
+	bind:this={breadcrumbEl}
+	class="flex items-center flex-1 min-w-0 overflow-x-auto scrollbar-none"
+>
+	<button
+		class="text-xs shrink-0 py-0.5 hover:underline transition
+			{breadcrumbs.length === 0
+			? 'text-gray-700 dark:text-gray-300'
+			: 'text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-400'}"
+		on:click={() => onNavigate(null)}
+	>
+		{rootLabel}
+	</button>
+
+	{#each breadcrumbs as crumb, i}
+		<ChevronRight className="size-3 shrink-0 mx-0.5 text-gray-300 dark:text-gray-600" />
+		<button
+			class="text-xs shrink-0 py-0.5 hover:underline transition
+				{i === breadcrumbs.length - 1
+				? 'text-gray-700 dark:text-gray-300'
+				: 'text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-400'}"
+			on:click={() => onNavigate(crumb.id)}
+		>
+			{crumb.name}
+		</button>
+	{/each}
+</div>

src/lib/components/workspace/Knowledge/KnowledgeBase/NewDirectoryModal.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+	import { createEventDispatcher, getContext } from 'svelte';
+	import { toast } from 'svelte-sonner';
+
+	import Modal from '$lib/components/common/Modal.svelte';
+	import XMark from '$lib/components/icons/XMark.svelte';
+
+	const i18n = getContext('i18n');
+	const dispatch = createEventDispatcher();
+
+	export let show = false;
+
+	let name = '';
+
+	$: if (show) {
+		name = '';
+	}
+
+	const submitHandler = () => {
+		if (!name.trim()) {
+			toast.error($i18n.t('Name is required'));
+			return;
+		}
+
+		dispatch('submit', { name: name.trim() });
+		show = false;
+		name = '';
+	};
+</script>
+
+<Modal size="sm" bind:show>
+	<div>
+		<!-- Header -->
+		<div class="flex justify-between items-center dark:text-gray-100 px-5 pt-4 pb-2">
+			<h3 class="text-base font-medium">{$i18n.t('New Directory')}</h3>
+			<button
+				class="self-center shrink-0 ml-2"
+				aria-label={$i18n.t('Close')}
+				on:click={() => (show = false)}
+			>
+				<XMark className="size-5" />
+			</button>
+		</div>
+
+		<!-- Form -->
+		<div class="px-5 pb-2 flex flex-col gap-3">
+			<div>
+				<div class="mb-1 text-xs text-gray-500">{$i18n.t('Name')}</div>
+				<input
+					class="w-full text-sm bg-transparent outline-hidden font-primary placeholder:text-gray-300 dark:placeholder:text-gray-700"
+					type="text"
+					bind:value={name}
+					placeholder={$i18n.t('Directory name')}
+					on:keydown={(e) => {
+						if (e.key === 'Enter') submitHandler();
+					}}
+				/>
+			</div>
+		</div>
+
+		<!-- Bottom toolbar -->
+		<div class="flex items-center justify-end px-4 pb-3.5 pt-2 gap-2">
+			<button
+				class="px-3 py-1 text-xs text-gray-500 hover:text-gray-700 dark:hover:text-gray-200 transition"
+				type="button"
+				on:click={() => (show = false)}
+			>
+				{$i18n.t('Cancel')}
+			</button>
+			<button
+				class="px-3.5 py-1.5 text-sm bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full"
+				on:click={submitHandler}
+				type="button"
+			>
+				{$i18n.t('Create')}
+			</button>
+		</div>
+	</div>
+</Modal>