From cd655b128f49d0509de91405a61e2bc74d4f7047 Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Sat, 16 Nov 2024 01:38:20 -0800
Subject: [PATCH] refac

---
 .../workspace/Models/ModelEditor.svelte       | 24 +++++++---
 .../workspace/common/AccessControl.svelte     | 44 ++++++++-----------
 2 files changed, 35 insertions(+), 33 deletions(-)

diff --git a/src/lib/components/workspace/Models/ModelEditor.svelte b/src/lib/components/workspace/Models/ModelEditor.svelte
index 8e5fb2a02..0af526afd 100644
--- a/src/lib/components/workspace/Models/ModelEditor.svelte
+++ b/src/lib/components/workspace/Models/ModelEditor.svelte
@@ -14,6 +14,7 @@
 	import { getFunctions } from '$lib/apis/functions';
 	import { getKnowledgeItems } from '$lib/apis/knowledge';
 	import AccessControl from '../common/AccessControl.svelte';
+	import { stringify } from 'postcss';
 
 	const i18n = getContext('i18n');
 
@@ -159,6 +160,7 @@
 		}
 
 		if (model) {
+			console.log(model);
 			name = model.name;
 			await tick();
 
@@ -166,7 +168,7 @@
 
 			if (model.base_model_id) {
 				const base_model = $models
-					.filter((m) => !m?.preset && m?.owned_by !== 'arena')
+					.filter((m) => !m?.preset && !(m?.arena ?? false))
 					.find((m) => [model.base_model_id, `${model.base_model_id}:latest`].includes(m.id));
 
 				console.log('base_model', base_model);
@@ -213,6 +215,9 @@
 
 			accessControl = model?.access_control ?? null;
 
+			console.log(model?.access_control);
+			console.log(accessControl);
+
 			info = {
 				...info,
 				...JSON.parse(
@@ -491,6 +496,17 @@
 						</div>
 					</div>
 
+					<div class="my-2">
+						<div class="px-3 py-2 bg-gray-50 dark:bg-gray-950 rounded-lg">
+							<AccessControl
+								{accessControl}
+								onChange={(_accessControl) => {
+									accessControl = _accessControl;
+								}}
+							/>
+						</div>
+					</div>
+
 					<hr class=" border-gray-50 dark:border-gray-850 my-1.5" />
 
 					<div class="my-2">
@@ -670,12 +686,6 @@
 						<Capabilities bind:capabilities />
 					</div>
 
-					<div class="my-2">
-						<div class="px-3 py-2 bg-gray-50 dark:bg-gray-950 rounded-lg">
-							<AccessControl bind:accessControl />
-						</div>
-					</div>
-
 					<div class="my-2 text-gray-300 dark:text-gray-700">
 						<div class="flex w-full justify-between mb-2">
 							<div class=" self-center text-sm font-semibold">{$i18n.t('JSON Preview')}</div>
diff --git a/src/lib/components/workspace/common/AccessControl.svelte b/src/lib/components/workspace/common/AccessControl.svelte
index 8e6bf0f70..8ddbe2b47 100644
--- a/src/lib/components/workspace/common/AccessControl.svelte
+++ b/src/lib/components/workspace/common/AccessControl.svelte
@@ -11,30 +11,11 @@
 
 	export let accessControl = null;
 
-	let privateAccess = false;
-
 	let selectedGroupId = '';
-
 	let groups = [];
 
-	$: if (privateAccess) {
-		accessControl = {
-			read: {
-				group_ids: []
-			}
-		};
-	} else {
-		accessControl = null;
-	}
-
 	onMount(async () => {
 		groups = await getGroups(localStorage.token);
-
-		if (accessControl === null) {
-			privateAccess = false;
-		} else {
-			privateAccess = true;
-		}
 	});
 </script>
 
@@ -45,7 +26,7 @@
 		<div class="flex gap-2.5 items-center mb-1">
 			<div>
 				<div class=" p-2 bg-black/5 dark:bg-white/5 rounded-full">
-					{#if privateAccess}
+					{#if accessControl !== null}
 						<svg
 							xmlns="http://www.w3.org/2000/svg"
 							fill="none"
@@ -83,14 +64,25 @@
 				<select
 					id="models"
 					class="outline-none bg-transparent text-sm font-medium rounded-lg block w-fit pr-10 max-w-full placeholder-gray-400"
-					bind:value={privateAccess}
+					value={accessControl !== null ? 'private' : 'public'}
+					on:change={(e) => {
+						if (e.target.value === 'public') {
+							accessControl = null;
+						} else {
+							accessControl = {
+								read: {
+									group_ids: []
+								}
+							};
+						}
+					}}
 				>
-					<option class=" text-gray-700" value={true} selected>Private</option>
-					<option class=" text-gray-700" value={false} selected>Public</option>
+					<option class=" text-gray-700" value="private" selected>Private</option>
+					<option class=" text-gray-700" value="public" selected>Public</option>
 				</select>
 
 				<div class=" text-xs text-gray-400 font-medium">
-					{#if privateAccess}
+					{#if accessControl !== null}
 						{$i18n.t('Only select users and groups with permission can access')}
 					{:else}
 						{$i18n.t('Accessible to all users')}
@@ -100,7 +92,7 @@
 		</div>
 	</div>
 
-	{#if privateAccess}
+	{#if accessControl !== null}
 		{@const accessGroups = groups.filter((group) =>
 			accessControl.read.group_ids.includes(group.id)
 		)}
@@ -151,7 +143,7 @@
 				</div>
 			</div>
 
-			<hr class=" my-2 border-gray-50 dark:border-gray-900" />
+			<hr class=" my-2 border-black/5 dark:border-white/5" />
 
 			<div class="mb-1">
 				<div class="flex w-full">