From b3ce7de8d3ab59f99f0006775dc3158ea079deda Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Fri, 9 Oct 2026 17:19:10 +0400
Subject: [PATCH] refac

---
 src/lib/components/workspace/Knowledge.svelte |  5 +
 .../workspace/Knowledge/ItemMenu.svelte       | 18 +++-
 src/lib/components/workspace/Models.svelte    |  5 +
 .../workspace/Models/ModelMenu.svelte         | 14 +++
 src/lib/components/workspace/Prompts.svelte   |  5 +
 .../workspace/Prompts/PromptMenu.svelte       | 17 +++-
 src/lib/components/workspace/Skills.svelte    |  5 +
 .../workspace/Skills/SkillMenu.svelte         | 17 +++-
 src/lib/components/workspace/Tools.svelte     |  5 +
 .../workspace/Tools/ToolMenu.svelte           | 17 +++-
 .../common/AccessControlModal.svelte          |  7 +-
 .../common/WorkspaceAccessModal.svelte        | 91 +++++++++++++++++++
 12 files changed, 199 insertions(+), 7 deletions(-)
 create mode 100644 src/lib/components/workspace/common/WorkspaceAccessModal.svelte

diff --git a/src/lib/components/workspace/Knowledge.svelte b/src/lib/components/workspace/Knowledge.svelte
index 6841f7df64..89fe155938 100644
--- a/src/lib/components/workspace/Knowledge.svelte
+++ b/src/lib/components/workspace/Knowledge.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import WorkspaceAccessModal from './common/WorkspaceAccessModal.svelte';
+	let accessModal: WorkspaceAccessModal;
 	import dayjs from 'dayjs';
 	import relativeTime from 'dayjs/plugin/relativeTime';
 	dayjs.extend(relativeTime);
@@ -296,6 +298,8 @@
 	});
 </script>
 
+<WorkspaceAccessModal bind:this={accessModal} resourceType="knowledge" onUpdated={init} />
+
 <svelte:head>
 	<!-- LICENSE covers this Open WebUI browser-title identifier.
 	Do not alter, remove, obscure, or replace it except as LICENSE permits:
@@ -524,6 +528,7 @@
 								{#if item?.write_access || $user?.role === 'admin'}
 									<div class="ml-2 flex shrink-0 flex-row items-center self-center">
 										<ItemMenu
+											accessHandler={() => accessModal.open(item.id)}
 											onExport={$user?.role === 'admin'
 												? () => {
 														exportHandler(item);
diff --git a/src/lib/components/workspace/Knowledge/ItemMenu.svelte b/src/lib/components/workspace/Knowledge/ItemMenu.svelte
index bfedc09529..b2e291d8e9 100644
--- a/src/lib/components/workspace/Knowledge/ItemMenu.svelte
+++ b/src/lib/components/workspace/Knowledge/ItemMenu.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import LockClosed from '$lib/components/icons/LockClosed.svelte';
 	import { getContext, createEventDispatcher } from 'svelte';
 	const dispatch = createEventDispatcher();
 
@@ -9,9 +10,10 @@
 	import Download from '$lib/components/icons/Download.svelte';
 	import EllipsisHorizontal from '$lib/components/icons/EllipsisHorizontal.svelte';
 
-	const i18n = getContext('i18n');
+	const i18n = getContext<typeof import('$lib/i18n').default>('i18n');
 
 	export let onExport: null | Function = null;
+	export let accessHandler: (() => void) | null = null;
 	export let onClose: Function = () => {};
 
 	let show = false;
@@ -50,6 +52,20 @@
 
 	<div slot="content">
 		<DropdownMenu className="min-w-[10.625rem]">
+			{#if accessHandler}
+				<button
+					type="button"
+					class="select-none flex h-[1.6875rem] w-full cursor-pointer items-center gap-2 rounded-xl bg-transparent px-2 text-[0.8125rem] hover:text-gray-900 dark:hover:text-gray-100"
+					on:click={() => {
+						accessHandler?.();
+						closeMenu();
+					}}
+				>
+					<LockClosed className="size-3.5" />
+					<div class="flex items-center">{$i18n.t('Access')}</div>
+				</button>
+			{/if}
+
 			{#if onExport}
 				<button
 					class="select-none flex h-[1.6875rem] w-full cursor-pointer items-center gap-2 rounded-xl bg-transparent px-2 text-[0.8125rem] hover:text-gray-900 dark:hover:text-gray-100"
diff --git a/src/lib/components/workspace/Models.svelte b/src/lib/components/workspace/Models.svelte
index e46f169c43..f626cb9a7f 100644
--- a/src/lib/components/workspace/Models.svelte
+++ b/src/lib/components/workspace/Models.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import WorkspaceAccessModal from './common/WorkspaceAccessModal.svelte';
+	let accessModal: WorkspaceAccessModal;
 	import dayjs from 'dayjs';
 	import relativeTime from 'dayjs/plugin/relativeTime';
 	import { toast } from 'svelte-sonner';
@@ -506,6 +508,8 @@
 	});
 </script>
 
+<WorkspaceAccessModal bind:this={accessModal} resourceType="models" onUpdated={getModelList} />
+
 <svelte:head>
 	<!-- LICENSE covers this Open WebUI browser-title identifier.
 	Do not alter, remove, obscure, or replace it except as LICENSE permits:
@@ -924,6 +928,7 @@
 									{:else}
 										<div class="flex shrink-0 flex-row items-center gap-1 self-center">
 											<ModelMenu
+												accessHandler={() => accessModal.open(model.id)}
 												user={$user}
 												{model}
 												writeAccess={model.write_access}
diff --git a/src/lib/components/workspace/Models/ModelMenu.svelte b/src/lib/components/workspace/Models/ModelMenu.svelte
index 9e134e9d59..e341e6b41d 100644
--- a/src/lib/components/workspace/Models/ModelMenu.svelte
+++ b/src/lib/components/workspace/Models/ModelMenu.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import LockClosed from '$lib/components/icons/LockClosed.svelte';
 	import { getContext } from 'svelte';
 
 	import Dropdown from '$lib/components/common/Dropdown.svelte';
@@ -33,6 +34,7 @@
 	export let hideHandler: Function;
 	export let pinModelHandler: Function;
 	export let deleteHandler: Function;
+	export let accessHandler: (() => void) | null = null;
 	export let onClose: Function;
 
 	export let writeAccess: boolean = true;
@@ -80,6 +82,18 @@
 					<div class="flex items-center">{$i18n.t('Edit')}</div>
 				</button>
 			{/if}
+			{#if accessHandler && writeAccess}
+				<button
+					type="button"
+					class="select-none flex h-[1.6875rem] w-full cursor-pointer items-center gap-2 rounded-xl bg-transparent px-2 text-[0.8125rem] hover:text-gray-900 dark:hover:text-gray-100"
+					on:click={() => {
+						runAndClose(() => accessHandler?.());
+					}}
+				>
+					<LockClosed className="size-3.5" />
+					<div class="flex items-center">{$i18n.t('Access')}</div>
+				</button>
+			{/if}
 
 			{#if writeAccess}
 				<button
diff --git a/src/lib/components/workspace/Prompts.svelte b/src/lib/components/workspace/Prompts.svelte
index 979c3c1db6..e84a2f34b6 100644
--- a/src/lib/components/workspace/Prompts.svelte
+++ b/src/lib/components/workspace/Prompts.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import WorkspaceAccessModal from './common/WorkspaceAccessModal.svelte';
+	let accessModal: WorkspaceAccessModal;
 	import dayjs from 'dayjs';
 	import relativeTime from 'dayjs/plugin/relativeTime';
 	import { toast } from 'svelte-sonner';
@@ -375,6 +377,8 @@
 	});
 </script>
 
+<WorkspaceAccessModal bind:this={accessModal} resourceType="prompts" onUpdated={getPromptList} />
+
 <svelte:head>
 	<!-- LICENSE covers this Open WebUI browser-title identifier.
 	Do not alter, remove, obscure, or replace it except as LICENSE permits:
@@ -688,6 +692,7 @@
 
 									<div class="ml-0.5 flex shrink-0 flex-row items-center gap-1.5 self-center">
 										<PromptMenu
+											accessHandler={() => accessModal.open(prompt.id)}
 											writeAccess={prompt.write_access}
 											show={openPromptMenuId === prompt.id}
 											editHandler={() => {
diff --git a/src/lib/components/workspace/Prompts/PromptMenu.svelte b/src/lib/components/workspace/Prompts/PromptMenu.svelte
index bf4aa22529..006a377894 100644
--- a/src/lib/components/workspace/Prompts/PromptMenu.svelte
+++ b/src/lib/components/workspace/Prompts/PromptMenu.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import LockClosed from '$lib/components/icons/LockClosed.svelte';
 	import { getContext } from 'svelte';
 	import { config, user } from '$lib/stores';
 
@@ -10,7 +11,7 @@
 	import DocumentDuplicate from '$lib/components/icons/DocumentDuplicate.svelte';
 	import Download from '$lib/components/icons/Download.svelte';
 
-	const i18n = getContext('i18n');
+	const i18n = getContext<typeof import('$lib/i18n').default>('i18n');
 
 	export let writeAccess = true;
 
@@ -19,6 +20,7 @@
 	export let cloneHandler: Function;
 	export let exportHandler: Function;
 	export let deleteHandler: Function;
+	export let accessHandler: (() => void) | null = null;
 	export let onClose: Function;
 
 	export let show = false;
@@ -69,6 +71,19 @@
 
 				<div class="flex items-center">{$i18n.t('Edit')}</div>
 			</button>
+			{#if accessHandler && writeAccess}
+				<button
+					type="button"
+					class="select-none flex h-[1.6875rem] w-full cursor-pointer items-center gap-2 rounded-xl bg-transparent px-2 text-[0.8125rem] hover:text-gray-900 dark:hover:text-gray-100"
+					on:click={() => {
+						accessHandler?.();
+						closeMenu();
+					}}
+				>
+					<LockClosed className="size-3.5" />
+					<div class="flex items-center">{$i18n.t('Access')}</div>
+				</button>
+			{/if}
 
 			{#if $config.features.enable_community_sharing}
 				<button
diff --git a/src/lib/components/workspace/Skills.svelte b/src/lib/components/workspace/Skills.svelte
index f636a096b0..80c1cbb7d2 100644
--- a/src/lib/components/workspace/Skills.svelte
+++ b/src/lib/components/workspace/Skills.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import WorkspaceAccessModal from './common/WorkspaceAccessModal.svelte';
+	let accessModal: WorkspaceAccessModal;
 	import { resolveLocalizedResource } from '$lib/utils/localizedContent';
 	import dayjs from 'dayjs';
 	import relativeTime from 'dayjs/plugin/relativeTime';
@@ -282,6 +284,8 @@
 	});
 </script>
 
+<WorkspaceAccessModal bind:this={accessModal} resourceType="skills" onUpdated={loadSkillItems} />
+
 <svelte:head>
 	<!-- LICENSE covers this Open WebUI browser-title identifier.
 	Do not alter, remove, obscure, or replace it except as LICENSE permits:
@@ -535,6 +539,7 @@
 									{:else}
 										<div class="flex shrink-0 flex-row items-center gap-1.5 self-center">
 											<SkillMenu
+												accessHandler={() => accessModal.open(skill.id)}
 												show={openSkillMenuId === skill.id}
 												editHandler={() => {
 													goto(`/workspace/skills/edit?id=${encodeURIComponent(skill.id)}`);
diff --git a/src/lib/components/workspace/Skills/SkillMenu.svelte b/src/lib/components/workspace/Skills/SkillMenu.svelte
index 04c6995c29..4c344e3ff8 100644
--- a/src/lib/components/workspace/Skills/SkillMenu.svelte
+++ b/src/lib/components/workspace/Skills/SkillMenu.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import LockClosed from '$lib/components/icons/LockClosed.svelte';
 	import { getContext } from 'svelte';
 
 	import Dropdown from '$lib/components/common/Dropdown.svelte';
@@ -9,12 +10,13 @@
 	import Download from '$lib/components/icons/Download.svelte';
 	import { user } from '$lib/stores';
 
-	const i18n = getContext('i18n');
+	const i18n = getContext<typeof import('$lib/i18n').default>('i18n');
 
 	export let editHandler: Function;
 	export let cloneHandler: Function;
 	export let exportHandler: Function;
 	export let deleteHandler: Function;
+	export let accessHandler: (() => void) | null = null;
 	export let onClose: Function;
 
 	export let show = false;
@@ -63,6 +65,19 @@
 
 				<div class="flex items-center">{$i18n.t('Edit')}</div>
 			</button>
+			{#if accessHandler}
+				<button
+					type="button"
+					class="select-none flex h-[1.6875rem] w-full cursor-pointer items-center gap-2 rounded-xl bg-transparent px-2 text-[0.8125rem] hover:text-gray-900 dark:hover:text-gray-100"
+					on:click={() => {
+						accessHandler?.();
+						closeMenu();
+					}}
+				>
+					<LockClosed className="size-3.5" />
+					<div class="flex items-center">{$i18n.t('Access')}</div>
+				</button>
+			{/if}
 
 			<button
 				class="select-none flex h-[1.6875rem] w-full cursor-pointer items-center gap-2 rounded-xl bg-transparent px-2 text-[0.8125rem] hover:text-gray-900 dark:hover:text-gray-100"
diff --git a/src/lib/components/workspace/Tools.svelte b/src/lib/components/workspace/Tools.svelte
index 743e83c42a..ef2fdab771 100644
--- a/src/lib/components/workspace/Tools.svelte
+++ b/src/lib/components/workspace/Tools.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import WorkspaceAccessModal from './common/WorkspaceAccessModal.svelte';
+	let accessModal: WorkspaceAccessModal;
 	import { resolveLocalizedResource } from '$lib/utils/localizedContent';
 	import dayjs from 'dayjs';
 	import relativeTime from 'dayjs/plugin/relativeTime';
@@ -294,6 +296,8 @@
 	});
 </script>
 
+<WorkspaceAccessModal bind:this={accessModal} resourceType="tools" onUpdated={init} />
+
 <svelte:head>
 	<!-- LICENSE covers this Open WebUI browser-title identifier.
 	Do not alter, remove, obscure, or replace it except as LICENSE permits:
@@ -587,6 +591,7 @@
 										</Tooltip>
 
 										<ToolMenu
+											accessHandler={() => accessModal.open(tool.id)}
 											show={openToolMenuId === tool.id}
 											editHandler={() => {
 												goto(`/workspace/tools/edit?id=${encodeURIComponent(tool.id)}`);
diff --git a/src/lib/components/workspace/Tools/ToolMenu.svelte b/src/lib/components/workspace/Tools/ToolMenu.svelte
index bfe2dd50bc..7f9e445e05 100644
--- a/src/lib/components/workspace/Tools/ToolMenu.svelte
+++ b/src/lib/components/workspace/Tools/ToolMenu.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import LockClosed from '$lib/components/icons/LockClosed.svelte';
 	import { getContext } from 'svelte';
 
 	import Dropdown from '$lib/components/common/Dropdown.svelte';
@@ -11,13 +12,14 @@
 	import Download from '$lib/components/icons/Download.svelte';
 	import { config, user } from '$lib/stores';
 
-	const i18n = getContext('i18n');
+	const i18n = getContext<typeof import('$lib/i18n').default>('i18n');
 
 	export let editHandler: Function;
 	export let shareHandler: Function;
 	export let cloneHandler: Function;
 	export let exportHandler: Function;
 	export let deleteHandler: Function;
+	export let accessHandler: (() => void) | null = null;
 	export let onClose: Function;
 
 	export let show = false;
@@ -67,6 +69,19 @@
 
 				<div class="flex items-center">{$i18n.t('Edit')}</div>
 			</button>
+			{#if accessHandler}
+				<button
+					type="button"
+					class="select-none flex h-[1.6875rem] w-full cursor-pointer items-center gap-2 rounded-xl bg-transparent px-2 text-[0.8125rem] hover:text-gray-900 dark:hover:text-gray-100"
+					on:click={() => {
+						accessHandler?.();
+						closeMenu();
+					}}
+				>
+					<LockClosed className="size-3.5" />
+					<div class="flex items-center">{$i18n.t('Access')}</div>
+				</button>
+			{/if}
 
 			{#if $config.features.enable_community_sharing}
 				<button
diff --git a/src/lib/components/workspace/common/AccessControlModal.svelte b/src/lib/components/workspace/common/AccessControlModal.svelte
index b0eb291b7b..f8da900e36 100644
--- a/src/lib/components/workspace/common/AccessControlModal.svelte
+++ b/src/lib/components/workspace/common/AccessControlModal.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { getContext } from 'svelte';
-	const i18n = getContext('i18n');
+	const i18n = getContext<typeof import('$lib/i18n').default>('i18n');
 
 	import Modal from '$lib/components/common/Modal.svelte';
 	import AccessControl from './AccessControl.svelte';
@@ -14,6 +14,7 @@
 	};
 
 	export let show = false;
+	export let disabled = false;
 	export let accessGrants: AccessGrant[] = [];
 	export let accessControl: any = undefined;
 	export let accessRoles = ['read'];
@@ -24,7 +25,7 @@
 	export let shareUsers = true;
 	export let allowGroups = true;
 
-	export let onChange = () => {};
+	export let onChange: (grants: AccessGrant[]) => void | Promise<void> = () => {};
 </script>
 
 <Modal size="sm" bind:show>
@@ -43,7 +44,7 @@
 			</button>
 		</div>
 
-		<div class="w-full px-4 pb-3 dark:text-white">
+		<div class="w-full px-4 pb-3 dark:text-white" inert={disabled} aria-busy={disabled}>
 			<AccessControl
 				bind:accessGrants
 				bind:accessControl
diff --git a/src/lib/components/workspace/common/WorkspaceAccessModal.svelte b/src/lib/components/workspace/common/WorkspaceAccessModal.svelte
new file mode 100644
index 0000000000..48c7249516
--- /dev/null
+++ b/src/lib/components/workspace/common/WorkspaceAccessModal.svelte
@@ -0,0 +1,91 @@
+<script lang="ts">
+	import { getContext } from 'svelte';
+	import { toast } from 'svelte-sonner';
+	import { user } from '$lib/stores';
+	import { getModelById, updateModelAccessGrants } from '$lib/apis/models';
+	import { getKnowledgeById, updateKnowledgeAccessGrants } from '$lib/apis/knowledge';
+	import { getPromptById, updatePromptAccessGrants } from '$lib/apis/prompts';
+	import { getSkillById, updateSkillAccessGrants } from '$lib/apis/skills';
+	import { getToolById, updateToolAccessGrants } from '$lib/apis/tools';
+	import AccessControlModal from './AccessControlModal.svelte';
+
+	export let resourceType: 'models' | 'knowledge' | 'prompts' | 'skills' | 'tools';
+	export let onUpdated: () => void | Promise<void> = () => {};
+	const i18n = getContext<any>('i18n');
+	const loaders = {
+		models: getModelById,
+		knowledge: getKnowledgeById,
+		prompts: getPromptById,
+		skills: getSkillById,
+		tools: getToolById
+	};
+	const savers = {
+		knowledge: updateKnowledgeAccessGrants,
+		prompts: updatePromptAccessGrants,
+		skills: updateSkillAccessGrants,
+		tools: updateToolAccessGrants
+	};
+	let show = false;
+	let saving = false;
+	let resource: any = null;
+	let accessGrants: any[] = [];
+	let savedGrants: any[] = [];
+	let requestId = 0;
+	const reportError = (error: any) => toast.error(`${error?.detail ?? error}`);
+
+	export const open = async (id: string) => {
+		const request = ++requestId;
+		show = false;
+		try {
+			const result = await loaders[resourceType](localStorage.token, id);
+			if (request !== requestId) return;
+			resource = result;
+			accessGrants = structuredClone(result.access_grants ?? []);
+			savedGrants = structuredClone(accessGrants);
+			saving = false;
+			show = true;
+		} catch (error) {
+			if (request === requestId) reportError(error);
+		}
+	};
+
+	const save = async (grants: any[]) => {
+		if (saving || !resource) return;
+		const request = requestId;
+		saving = true;
+		try {
+			const updated =
+				resourceType === 'models'
+					? await updateModelAccessGrants(localStorage.token, resource.id, resource.name, grants)
+					: await savers[resourceType](localStorage.token, resource.id, grants);
+			if (request === requestId) {
+				accessGrants = structuredClone(updated.access_grants ?? []);
+				savedGrants = structuredClone(accessGrants);
+			}
+			toast.success($i18n.t('Saved'));
+		} catch (error) {
+			if (request === requestId) accessGrants = structuredClone(savedGrants);
+			reportError(error);
+			return;
+		} finally {
+			if (request === requestId) saving = false;
+		}
+		try {
+			await onUpdated();
+		} catch (error) {
+			reportError(error);
+		}
+	};
+</script>
+
+<AccessControlModal
+	bind:show
+	bind:accessGrants
+	disabled={saving}
+	accessRoles={resourceType === 'models' && !resource?.base_model_id ? ['read'] : ['read', 'write']}
+	share={$user?.permissions?.sharing?.[resourceType] || $user?.role === 'admin'}
+	sharePublic={$user?.permissions?.sharing?.[`public_${resourceType}`] || $user?.role === 'admin'}
+	shareUsers={($user?.permissions?.access_grants?.allow_users ?? true) || $user?.role === 'admin'}
+	allowGroups={($user?.permissions?.access_grants?.allow_groups ?? true) || $user?.role === 'admin'}
+	onChange={save}
+/>