feat: export kb to zip

src/lib/apis/knowledge/index.ts

@@ -485,3 +485,29 @@ export const reindexKnowledgeFiles = async (token: string) => {
 
 	return res;
 };
+
+export const exportKnowledgeById = async (token: string, id: string) => {
+	let error = null;
+
+	const res = await fetch(`${WEBUI_API_BASE_URL}/knowledge/${id}/export`, {
+		method: 'GET',
+		headers: {
+			authorization: `Bearer ${token}`
+		}
+	})
+		.then(async (res) => {
+			if (!res.ok) throw await res.json();
+			return res.blob();
+		})
+		.catch((err) => {
+			error = err.detail;
+			console.error(err);
+			return null;
+		});
+
+	if (error) {
+		throw error;
+	}
+
+	return res;
+};

src/lib/components/icons/ArrowDownTray.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	export let className = 'size-4';
+	export let strokeWidth = '1.5';
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	fill="none"
+	viewBox="0 0 24 24"
+	stroke-width={strokeWidth}
+	stroke="currentColor"
+	class={className}
+>
+	<path
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3"
+	/>
+</svg>

src/lib/components/workspace/Knowledge.svelte

@@ -8,7 +8,11 @@
 	const i18n = getContext('i18n');
 
 	import { WEBUI_NAME, knowledge, user } from '$lib/stores';
-	import { deleteKnowledgeById, searchKnowledgeBases } from '$lib/apis/knowledge';
+	import {
+		deleteKnowledgeById,
+		searchKnowledgeBases,
+		exportKnowledgeById
+	} from '$lib/apis/knowledge';
 
 	import { goto } from '$app/navigation';
 	import { capitalizeFirstLetter } from '$lib/utils';
@@ -104,6 +108,25 @@
 		}
 	};
 
+	const exportHandler = async (item) => {
+		try {
+			const blob = await exportKnowledgeById(localStorage.token, item.id);
+			if (blob) {
+				const url = URL.createObjectURL(blob);
+				const a = document.createElement('a');
+				a.href = url;
+				a.download = `${item.name}.zip`;
+				document.body.appendChild(a);
+				a.click();
+				document.body.removeChild(a);
+				URL.revokeObjectURL(url);
+				toast.success($i18n.t('Knowledge exported successfully'));
+			}
+		} catch (e) {
+			toast.error(`${e}`);
+		}
+	};
+
 	onMount(async () => {
 		viewOption = localStorage?.workspaceViewOption || '';
 		loaded = true;
@@ -239,6 +262,11 @@
 											<div class="flex items-center gap-2">
 												<div class=" flex self-center">
 													<ItemMenu
+														onExport={$user.role === 'admin'
+															? () => {
+																	exportHandler(item);
+																}
+															: null}
 														on:delete={() => {
 															selectedItem = item;
 															showDeleteConfirm = true;

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

@@ -18,6 +18,7 @@
 
 	const i18n = getContext('i18n');
 
+	export let onExport: null | Function = null;
 	export let onClose: Function = () => {};
 
 	let show = false;
@@ -54,6 +55,18 @@
 			align="end"
 			transition={flyAndScale}
 		>
+			{#if onExport}
+				<DropdownMenu.Item
+					class="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"
+					on:click={() => {
+						onExport();
+					}}
+				>
+					<Download />
+					<div class="flex items-center">{$i18n.t('Export')}</div>
+				</DropdownMenu.Item>
+			{/if}
+
 			<DropdownMenu.Item
 				class="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"
 				on:click={() => {