From 2a234829f5dfdfde27fdfd30591caa908340efb4 Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Tue, 16 Sep 2025 13:32:42 -0500
Subject: [PATCH] enh: folder background image

---
 src/lib/components/chat/Chat.svelte           | 13 +++-
 .../chat/Placeholder/FolderTitle.svelte       |  3 +-
 .../layout/Sidebar/Folders/FolderModal.svelte | 71 +++++++++++++++++++
 .../layout/Sidebar/RecursiveFolder.svelte     |  3 +-
 4 files changed, 87 insertions(+), 3 deletions(-)

diff --git a/src/lib/components/chat/Chat.svelte b/src/lib/components/chat/Chat.svelte
index 10b5cbdc7b..e987733221 100644
--- a/src/lib/components/chat/Chat.svelte
+++ b/src/lib/components/chat/Chat.svelte
@@ -2263,7 +2263,18 @@
 >
 	{#if !loading}
 		<div in:fade={{ duration: 50 }} class="w-full h-full flex flex-col">
-			{#if $settings?.backgroundImageUrl ?? $config?.license_metadata?.background_image_url ?? null}
+			{#if $selectedFolder && $selectedFolder?.meta?.background_image_url}
+				<div
+					class="absolute {$showSidebar
+						? 'md:max-w-[calc(100%-260px)] md:translate-x-[260px]'
+						: ''} top-0 left-0 w-full h-full bg-cover bg-center bg-no-repeat"
+					style="background-image: url({$selectedFolder?.meta?.background_image_url})  "
+				/>
+
+				<div
+					class="absolute top-0 left-0 w-full h-full bg-linear-to-t from-white to-white/85 dark:from-gray-900 dark:to-gray-900/90 z-0"
+				/>
+			{:else if $settings?.backgroundImageUrl ?? $config?.license_metadata?.background_image_url ?? null}
 				<div
 					class="absolute {$showSidebar
 						? 'md:max-w-[calc(100%-260px)] md:translate-x-[260px]'
diff --git a/src/lib/components/chat/Placeholder/FolderTitle.svelte b/src/lib/components/chat/Placeholder/FolderTitle.svelte
index a8e2004ef0..bfd72681d3 100644
--- a/src/lib/components/chat/Placeholder/FolderTitle.svelte
+++ b/src/lib/components/chat/Placeholder/FolderTitle.svelte
@@ -32,7 +32,7 @@
 	let showFolderModal = false;
 	let showDeleteConfirm = false;
 
-	const updateHandler = async ({ name, data }) => {
+	const updateHandler = async ({ name, meta, data }) => {
 		if (name === '') {
 			toast.error($i18n.t('Folder name cannot be empty.'));
 			return;
@@ -45,6 +45,7 @@
 
 		const res = await updateFolderById(localStorage.token, folder.id, {
 			name,
+			...(meta ? { meta } : {}),
 			...(data ? { data } : {})
 		}).catch((error) => {
 			toast.error(`${error}`);
diff --git a/src/lib/components/layout/Sidebar/Folders/FolderModal.svelte b/src/lib/components/layout/Sidebar/Folders/FolderModal.svelte
index 4b62edb0d5..9488bd235f 100644
--- a/src/lib/components/layout/Sidebar/Folders/FolderModal.svelte
+++ b/src/lib/components/layout/Sidebar/Folders/FolderModal.svelte
@@ -22,6 +22,9 @@
 	export let folder = null;
 
 	let name = '';
+	let meta = {
+		background_image_url: null
+	};
 	let data = {
 		system_prompt: '',
 		files: []
@@ -40,6 +43,7 @@
 
 		await onSubmit({
 			name,
+			meta,
 			data
 		});
 		show = false;
@@ -48,10 +52,15 @@
 
 	const init = () => {
 		name = folder.name;
+		meta = folder.meta || {
+			background_image_url: null
+		};
 		data = folder.data || {
 			system_prompt: '',
 			files: []
 		};
+
+		console.log(folder);
 	};
 
 	const focusInput = async () => {
@@ -73,6 +82,9 @@
 
 	$: if (!show && !edit) {
 		name = '';
+		meta = {
+			background_image_url: null
+		};
 		data = {
 			system_prompt: '',
 			files: []
@@ -123,6 +135,65 @@
 						</div>
 					</div>
 
+					<input
+						id="folder-background-image-input"
+						type="file"
+						hidden
+						accept="image/*"
+						on:change={(e) => {
+							const inputFiles = e.target.files;
+
+							let reader = new FileReader();
+							reader.onload = (event) => {
+								let originalImageUrl = `${event.target.result}`;
+								meta.background_image_url = originalImageUrl;
+							};
+
+							if (
+								inputFiles &&
+								inputFiles.length > 0 &&
+								['image/gif', 'image/webp', 'image/jpeg', 'image/png'].includes(
+									inputFiles[0]['type']
+								)
+							) {
+								reader.readAsDataURL(inputFiles[0]);
+							} else {
+								console.log(`Unsupported File Type '${inputFiles[0]['type']}'.`);
+
+								// clear the input
+								e.target.value = '';
+							}
+						}}
+					/>
+
+					<div class="flex justify-between w-full mt-1 items-center">
+						<div class="text-xs text-gray-500">{$i18n.t('Folder Background Image')}</div>
+
+						<div class="">
+							<button
+								aria-labelledby="chat-background-label background-image-url-state"
+								class="p-1 px-3 text-xs flex rounded-sm transition"
+								on:click={() => {
+									if (meta?.background_image_url !== null) {
+										meta.background_image_url = null;
+									} else {
+										const input = document.getElementById('folder-background-image-input');
+										if (input) {
+											input.click();
+										}
+									}
+								}}
+								type="button"
+							>
+								<span class="ml-2 self-center" id="background-image-url-state"
+									>{meta?.background_image_url !== null
+										? $i18n.t('Reset')
+										: $i18n.t('Upload')}</span
+								>
+							</button>
+						</div>
+					</div>
+
 					<hr class=" border-gray-50 dark:border-gray-850 my-2.5 w-full" />
 
 					{#if $user?.role === 'admin' || ($user?.permissions.chat?.system_prompt ?? true)}
diff --git a/src/lib/components/layout/Sidebar/RecursiveFolder.svelte b/src/lib/components/layout/Sidebar/RecursiveFolder.svelte
index 2bb9eab791..abaf145ca0 100644
--- a/src/lib/components/layout/Sidebar/RecursiveFolder.svelte
+++ b/src/lib/components/layout/Sidebar/RecursiveFolder.svelte
@@ -282,7 +282,7 @@
 		}
 	};
 
-	const updateHandler = async ({ name, data }) => {
+	const updateHandler = async ({ name, meta, data }) => {
 		if (name === '') {
 			toast.error($i18n.t('Folder name cannot be empty.'));
 			return;
@@ -295,6 +295,7 @@
 
 		const res = await updateFolderById(localStorage.token, folderId, {
 			name,
+			...(meta ? { meta } : {}),
 			...(data ? { data } : {})
 		}).catch((error) => {
 			toast.error(`${error}`);