Feat: Add warning for conflicting group permissions

This change introduces a visual warning in the group settings page. The warning appears when an admin attempts to disable a permission for a group that is already enabled in the default 'user' group. This is necessary because permissions are additive, and disabling a permission in a specific group will not revoke it if it's enabled in the default group.

To achieve this, the following changes were made:
- A new `PermissionSwitch.svelte` component was created to encapsulate the permission switch and its warning logic, avoiding redundant code.
- The `Groups.svelte` component was updated to correctly fetch the default user group's permissions.
- The `Permissions.svelte` component was refactored to use the new `PermissionSwitch.svelte` component, making the code cleaner and more maintainable.

src/lib/components/admin/Users/Groups.svelte

@@ -24,11 +24,7 @@
 	import GroupItem from './Groups/GroupItem.svelte';
 	import AddGroupModal from './Groups/AddGroupModal.svelte';
 	import { createNewGroup, getGroups } from '$lib/apis/groups';
-	import {
-		getUserDefaultPermissions,
-		getAllUsers,
-		updateUserDefaultPermissions
-	} from '$lib/apis/users';
+	import { getAllUsers, updateUserDefaultPermissions } from '$lib/apis/users';
 
 	const i18n = getContext('i18n');
 
@@ -51,54 +47,20 @@
 	});
 
 	let search = '';
-	let defaultPermissions = {
-		workspace: {
-			models: false,
-			knowledge: false,
-			prompts: false,
-			tools: false
-		},
-		sharing: {
-			public_models: false,
-			public_knowledge: false,
-			public_prompts: false,
-			public_tools: false
-		},
-		chat: {
-			controls: true,
-			valves: true,
-			system_prompt: true,
-			params: true,
-			file_upload: true,
-			delete: true,
-			delete_message: true,
-			continue_response: true,
-			regenerate_response: true,
-			rate_response: true,
-			edit: true,
-			share: true,
-			export: true,
-			stt: true,
-			tts: true,
-			call: true,
-			multiple_models: true,
-			temporary: true,
-			temporary_enforced: false
-		},
-		features: {
-			direct_tool_servers: false,
-			web_search: true,
-			image_generation: true,
-			code_interpreter: true,
-			notes: true
-		}
-	};
+	let defaultPermissions = {};
 
 	let showCreateGroupModal = false;
 	let showDefaultPermissionsModal = false;
 
 	const setGroups = async () => {
-		groups = await getGroups(localStorage.token);
+		const allGroups = await getGroups(localStorage.token);
+		const userGroup = allGroups.find((g) => g.name.toLowerCase() === 'user');
+
+		if (userGroup) {
+			defaultPermissions = userGroup.permissions;
+		}
+
+		groups = allGroups.filter((g) => g.name.toLowerCase() !== 'user');
 	};
 
 	const addGroupHandler = async (group) => {
@@ -146,8 +108,6 @@
 		}
 
 		await setGroups();
-		defaultPermissions = await getUserDefaultPermissions(localStorage.token);
-
 		loaded = true;
 	});
 </script>
@@ -226,7 +186,7 @@
 
 				{#each filteredGroups as group}
 					<div class="my-2">
-						<GroupItem {group} {users} {setGroups} />
+						<GroupItem {group} {users} {setGroups} {defaultPermissions} />
 					</div>
 				{/each}
 			</div>

src/lib/components/admin/Users/Groups/EditGroupModal.svelte

@@ -21,6 +21,7 @@
 
 	export let users = [];
 	export let group = null;
+	export let defaultPermissions = {};
 
 	export let custom = true;
 
@@ -230,7 +231,7 @@
 							{#if selectedTab == 'general'}
 								<Display bind:name bind:description />
 							{:else if selectedTab == 'permissions'}
-								<Permissions bind:permissions />
+								<Permissions bind:permissions {defaultPermissions} />
 							{:else if selectedTab == 'users'}
 								<Users bind:userIds {users} />
 							{/if}

src/lib/components/admin/Users/Groups/GroupItem.svelte

@@ -17,6 +17,7 @@
 		name: 'Admins',
 		user_ids: [1, 2, 3]
 	};
+	export let defaultPermissions = {};
 
 	export let setGroups = () => {};
 
@@ -59,6 +60,7 @@
 	edit
 	{users}
 	{group}
+	{defaultPermissions}
 	onSubmit={updateHandler}
 	onDelete={deleteHandler}
 />

src/lib/components/admin/Users/Groups/PermissionSwitch.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import { getContext } from 'svelte';
+	const i18n = getContext('i18n');
+
+	import Switch from '$lib/components/common/Switch.svelte';
+	import Warning from '$lib/components/common/Warning.svelte';
+	import Tooltip from '$lib/components/common/Tooltip.svelte';
+
+	export let label = '';
+	export let state = false;
+	export let defaultState = undefined;
+	export let tooltip = '';
+</script>
+
+<div class="flex w-full flex-col">
+	{#if tooltip}
+		<Tooltip content={tooltip} placement="top-start" className="flex w-full justify-between pr-2">
+			<div class="self-center text-xs font-medium">
+				{label}
+			</div>
+			<Switch bind:state />
+		</Tooltip>
+	{:else}
+		<div class="flex w-full justify-between pr-2">
+			<div class="self-center text-xs font-medium">
+				{label}
+			</div>
+			<Switch bind:state />
+		</div>
+	{/if}
+	{#if defaultState && !state}
+		<div class="pb-1 pl-1 pr-2 pt-1">
+			<Warning
+				text={$i18n.t('This permission is enabled for the default "user" role and will remain active.')}
+			/>
+		</div>
+	{/if}
+</div>

src/lib/components/admin/Users/Groups/Permissions.svelte

@@ -2,11 +2,11 @@
 	import { getContext, onMount } from 'svelte';
 	const i18n = getContext('i18n');
 
-	import Switch from '$lib/components/common/Switch.svelte';
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
+	import PermissionSwitch from './PermissionSwitch.svelte';
 
 	// Default values for permissions
-	const defaultPermissions = {
+	const DEFAULT_PERMISSIONS = {
 		workspace: {
 			models: false,
 			knowledge: false,
@@ -51,10 +51,11 @@
 	};
 
 	export let permissions = {};
+	export let defaultPermissions = {};
 
 	// Reactive statement to ensure all fields are present in `permissions`
 	$: {
-		permissions = fillMissingProperties(permissions, defaultPermissions);
+		permissions = fillMissingProperties(permissions, DEFAULT_PERMISSIONS);
 	}
 
 	function fillMissingProperties(obj: any, defaults: any) {
@@ -69,398 +70,217 @@
 	}
 
 	onMount(() => {
-		permissions = fillMissingProperties(permissions, defaultPermissions);
+		permissions = fillMissingProperties(permissions, DEFAULT_PERMISSIONS);
 	});
 </script>
 
-<div>
-	<!-- <div>
-		<div class=" mb-2 text-sm font-medium">{$i18n.t('Model Permissions')}</div>
-
-		<div class="mb-2">
-			<div class="flex justify-between items-center text-xs pr-2">
-				<div class=" text-xs font-medium">{$i18n.t('Model Filtering')}</div>
-
-				<Switch bind:state={permissions.model.filter} />
-			</div>
-		</div>
-
-		{#if permissions.model.filter}
-			<div class="mb-2">
-				<div class=" space-y-1.5">
-					<div class="flex flex-col w-full">
-						<div class="mb-1 flex justify-between">
-							<div class="text-xs text-gray-500">{$i18n.t('Model IDs')}</div>
-						</div>
-
-						{#if model_ids.length > 0}
-							<div class="flex flex-col">
-								{#each model_ids as modelId, modelIdx}
-									<div class=" flex gap-2 w-full justify-between items-center">
-										<div class=" text-sm flex-1 rounded-lg">
-											{modelId}
-										</div>
-										<div class="shrink-0">
-											<button
-												type="button"
-												on:click={() => {
-													model_ids = model_ids.filter((_, idx) => idx !== modelIdx);
-												}}
-											>
-												<Minus strokeWidth="2" className="size-3.5" />
-											</button>
-										</div>
-									</div>
-								{/each}
-							</div>
-						{:else}
-							<div class="text-gray-500 text-xs text-center py-2 px-10">
-								{$i18n.t('No model IDs')}
-							</div>
-						{/if}
-					</div>
-				</div>
-				<hr class=" border-gray-100 dark:border-gray-700/10 mt-2.5 mb-1 w-full" />
-
-				<div class="flex items-center">
-					<select
-						class="w-full py-1 text-sm rounded-lg bg-transparent {selectedModelId
-							? ''
-							: 'text-gray-500'} placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-hidden"
-						bind:value={selectedModelId}
-					>
-						<option value="">{$i18n.t('Select a model')}</option>
-						{#each $models.filter((m) => m?.owned_by !== 'arena') as model}
-							<option value={model.id} class="bg-gray-50 dark:bg-gray-700">{model.name}</option>
-						{/each}
-					</select>
-
-					<div>
-						<button
-							type="button"
-							on:click={() => {
-								if (selectedModelId && !permissions.model.model_ids.includes(selectedModelId)) {
-									permissions.model.model_ids = [...permissions.model.model_ids, selectedModelId];
-									selectedModelId = '';
-								}
-							}}
-						>
-							<Plus className="size-3.5" strokeWidth="2" />
-						</button>
-					</div>
-				</div>
-			</div>
-		{/if}
-
-		<div class=" space-y-1 mb-3">
-			<div class="">
-				<div class="flex justify-between items-center text-xs">
-					<div class=" text-xs font-medium">{$i18n.t('Default Model')}</div>
-				</div>
-			</div>
-
-			<div class="flex-1 mr-2">
-				<select
-					class="w-full bg-transparent outline-hidden py-0.5 text-sm"
-					bind:value={permissions.model.default_id}
-					placeholder={$i18n.t('Select a model')}
-				>
-					<option value="" disabled selected>{$i18n.t('Select a model')}</option>
-					{#each permissions.model.filter ? $models.filter( (model) => filterModelIds.includes(model.id) ) : $models.filter((model) => model.id) as model}
-						<option value={model.id} class="bg-gray-100 dark:bg-gray-700">{model.name}</option>
-					{/each}
-				</select>
-			</div>
-		</div>
-	</div>
-
-	<hr class=" border-gray-100 dark:border-gray-850 my-2" /> -->
-
+<div class="space-y-2">
 	<div>
 		<div class=" mb-2 text-sm font-medium">{$i18n.t('Workspace Permissions')}</div>
-
-		<div class="  flex w-full justify-between my-2 pr-2">
-			<div class=" self-center text-xs font-medium">
-				{$i18n.t('Models Access')}
-			</div>
-			<Switch bind:state={permissions.workspace.models} />
-		</div>
-
-		<div class="  flex w-full justify-between my-2 pr-2">
-			<div class=" self-center text-xs font-medium">
-				{$i18n.t('Knowledge Access')}
-			</div>
-			<Switch bind:state={permissions.workspace.knowledge} />
-		</div>
-
-		<div class="  flex w-full justify-between my-2 pr-2">
-			<div class=" self-center text-xs font-medium">
-				{$i18n.t('Prompts Access')}
-			</div>
-			<Switch bind:state={permissions.workspace.prompts} />
-		</div>
-
-		<div class=" ">
-			<Tooltip
-				className=" flex w-full justify-between my-2 pr-2"
-				content={$i18n.t(
+		<div class="flex flex-col space-y-2">
+			<PermissionSwitch
+				label={$i18n.t('Models Access')}
+				bind:state={permissions.workspace.models}
+				defaultState={defaultPermissions?.workspace?.models}
+			/>
+			<PermissionSwitch
+				label={$i18n.t('Knowledge Access')}
+				bind:state={permissions.workspace.knowledge}
+				defaultState={defaultPermissions?.workspace?.knowledge}
+			/>
+			<PermissionSwitch
+				label={$i18n.t('Prompts Access')}
+				bind:state={permissions.workspace.prompts}
+				defaultState={defaultPermissions?.workspace?.prompts}
+			/>
+			<PermissionSwitch
+				label={$i18n.t('Tools Access')}
+				bind:state={permissions.workspace.tools}
+				defaultState={defaultPermissions?.workspace?.tools}
+				tooltip={$i18n.t(
 					'Warning: Enabling this will allow users to upload arbitrary code on the server.'
 				)}
-				placement="top-start"
-			>
-				<div class=" self-center text-xs font-medium">
-					{$i18n.t('Tools Access')}
-				</div>
-				<Switch bind:state={permissions.workspace.tools} />
-			</Tooltip>
+			/>
 		</div>
 	</div>
 
-	<hr class=" border-gray-100 dark:border-gray-850 my-2" />
+	<hr class=" border-gray-100 dark:border-gray-850" />
 
 	<div>
 		<div class=" mb-2 text-sm font-medium">{$i18n.t('Sharing Permissions')}</div>
-
-		<div class="  flex w-full justify-between my-2 pr-2">
-			<div class=" self-center text-xs font-medium">
-				{$i18n.t('Models Public Sharing')}
-			</div>
-			<Switch bind:state={permissions.sharing.public_models} />
-		</div>
-
-		<div class="  flex w-full justify-between my-2 pr-2">
-			<div class=" self-center text-xs font-medium">
-				{$i18n.t('Knowledge Public Sharing')}
-			</div>
-			<Switch bind:state={permissions.sharing.public_knowledge} />
-		</div>
-
-		<div class="  flex w-full justify-between my-2 pr-2">
-			<div class=" self-center text-xs font-medium">
-				{$i18n.t('Prompts Public Sharing')}
-			</div>
-			<Switch bind:state={permissions.sharing.public_prompts} />
-		</div>
-
-		<div class="  flex w-full justify-between my-2 pr-2">
-			<div class=" self-center text-xs font-medium">
-				{$i18n.t('Tools Public Sharing')}
-			</div>
-			<Switch bind:state={permissions.sharing.public_tools} />
-		</div>
-
-		<div class="  flex w-full justify-between my-2 pr-2">
-			<div class=" self-center text-xs font-medium">
-				{$i18n.t('Notes Public Sharing')}
-			</div>
-			<Switch bind:state={permissions.sharing.public_notes} />
+		<div class="flex flex-col space-y-2">
+			<PermissionSwitch
+				label={$i18n.t('Models Public Sharing')}
+				bind:state={permissions.sharing.public_models}
+				defaultState={defaultPermissions?.sharing?.public_models}
+			/>
+			<PermissionSwitch
+				label={$i18n.t('Knowledge Public Sharing')}
+				bind:state={permissions.sharing.public_knowledge}
+				defaultState={defaultPermissions?.sharing?.public_knowledge}
+			/>
+			<PermissionSwitch
+				label={$i18n.t('Prompts Public Sharing')}
+				bind:state={permissions.sharing.public_prompts}
+				defaultState={defaultPermissions?.sharing?.public_prompts}
+			/>
+			<PermissionSwitch
+				label={$i18n.t('Tools Public Sharing')}
+				bind:state={permissions.sharing.public_tools}
+				defaultState={defaultPermissions?.sharing?.public_tools}
+			/>
+			<PermissionSwitch
+				label={$i18n.t('Notes Public Sharing')}
+				bind:state={permissions.sharing.public_notes}
+				defaultState={defaultPermissions?.sharing?.public_notes}
+			/>
 		</div>
 	</div>
 
-	<hr class=" border-gray-100 dark:border-gray-850 my-2" />
+	<hr class=" border-gray-100 dark:border-gray-850" />
 
 	<div>
 		<div class=" mb-2 text-sm font-medium">{$i18n.t('Chat Permissions')}</div>
-
-		<div class="  flex w-full justify-between my-2 pr-2">
-			<div class=" self-center text-xs font-medium">
-				{$i18n.t('Allow File Upload')}
-			</div>
-
-			<Switch bind:state={permissions.chat.file_upload} />
-		</div>
-
-		<div class="  flex w-full justify-between my-2 pr-2">
-			<div class=" self-center text-xs font-medium">
-				{$i18n.t('Allow Chat Controls')}
-			</div>
-
-			<Switch bind:state={permissions.chat.controls} />
-		</div>
-
-		{#if permissions.chat.controls}
-			<div class="  flex w-full justify-between my-2 pr-2">
-				<div class=" self-center text-xs font-medium">
-					{$i18n.t('Allow Chat Valves')}
-				</div>
-
-				<Switch bind:state={permissions.chat.valves} />
-			</div>
-
-			<div class="  flex w-full justify-between my-2 pr-2">
-				<div class=" self-center text-xs font-medium">
-					{$i18n.t('Allow Chat System Prompt')}
+		<div class="flex flex-col space-y-2">
+			<PermissionSwitch
+				label={$i18n.t('Allow File Upload')}
+				bind:state={permissions.chat.file_upload}
+				defaultState={defaultPermissions?.chat?.file_upload}
+			/>
+			<PermissionSwitch
+				label={$i18n.t('Allow Chat Controls')}
+				bind:state={permissions.chat.controls}
+				defaultState={defaultPermissions?.chat?.controls}
+			/>
+
+			{#if permissions.chat.controls}
+				<div class="flex flex-col space-y-2 pl-4">
+					<PermissionSwitch
+						label={$i18n.t('Allow Chat Valves')}
+						bind:state={permissions.chat.valves}
+						defaultState={defaultPermissions?.chat?.valves}
+					/>
+					<PermissionSwitch
+						label={$i18n.t('Allow Chat System Prompt')}
+						bind:state={permissions.chat.system_prompt}
+						defaultState={defaultPermissions?.chat?.system_prompt}
+					/>
+					<PermissionSwitch
+						label={$i18n.t('Allow Chat Params')}
+						bind:state={permissions.chat.params}
+						defaultState={defaultPermissions?.chat?.params}
+					/>
 				</div>
-
-				<Switch bind:state={permissions.chat.system_prompt} />
-			</div>
-
-			<div class="  flex w-full justify-between my-2 pr-2">
-				<div class=" self-center text-xs font-medium">
-					{$i18n.t('Allow Chat Params')}
+			{/if}
+
+			<PermissionSwitch
+				label={$i18n.t('Allow Chat Edit')}
+				bind:state={permissions.chat.edit}
+				defaultState={defaultPermissions?.chat?.edit}
+			/>
+			<PermissionSwitch
+				label={$i18n.t('Allow Chat Delete')}
+				bind:state={permissions.chat.delete}
+				defaultState={defaultPermissions?.chat?.delete}
+			/>
+			<PermissionSwitch
+				label={$i18n.t('Allow Delete Messages')}
+				bind:state={permissions.chat.delete_message}
+				defaultState={defaultPermissions?.chat?.delete_message}
+			/>
+			<PermissionSwitch
+				label={$i18n.t('Allow Continue Response')}
+				bind:state={permissions.chat.continue_response}
+				defaultState={defaultPermissions?.chat?.continue_response}
+			/>
+			<PermissionSwitch
+				label={$i18n.t('Allow Regenerate Response')}
+				bind:state={permissions.chat.regenerate_response}
+				defaultState={defaultPermissions?.chat?.regenerate_response}
+			/>
+			<PermissionSwitch
+				label={$i18n.t('Allow Rate Response')}
+				bind:state={permissions.chat.rate_response}
+				defaultState={defaultPermissions?.chat?.rate_response}
+			/>
+			<PermissionSwitch
+				label={$i18n.t('Allow Chat Share')}
+				bind:state={permissions.chat.share}
+				defaultState={defaultPermissions?.chat?.share}
+			/>
+			<PermissionSwitch
+				label={$i18n.t('Allow Chat Export')}
+				bind:state={permissions.chat.export}
+				defaultState={defaultPermissions?.chat?.export}
+			/>
+			<PermissionSwitch
+				label={$i18n.t('Allow Speech to Text')}
+				bind:state={permissions.chat.stt}
+				defaultState={defaultPermissions?.chat?.stt}
+			/>
+			<PermissionSwitch
+				label={$i18n.t('Allow Text to Speech')}
+				bind:state={permissions.chat.tts}
+				defaultState={defaultPermissions?.chat?.tts}
+			/>
+			<PermissionSwitch
+				label={$i18n.t('Allow Call')}
+				bind:state={permissions.chat.call}
+				defaultState={defaultPermissions?.chat?.call}
+			/>
+			<PermissionSwitch
+				label={$i18n.t('Allow Multiple Models in Chat')}
+				bind:state={permissions.chat.multiple_models}
+				defaultState={defaultPermissions?.chat?.multiple_models}
+			/>
+			<PermissionSwitch
+				label={$i18n.t('Allow Temporary Chat')}
+				bind:state={permissions.chat.temporary}
+				defaultState={defaultPermissions?.chat?.temporary}
+			/>
+
+			{#if permissions.chat.temporary}
+				<div class="pl-4">
+					<PermissionSwitch
+						label={$i18n.t('Enforce Temporary Chat')}
+						bind:state={permissions.chat.temporary_enforced}
+						defaultState={defaultPermissions?.chat?.temporary_enforced}
+					/>
 				</div>
-
-				<Switch bind:state={permissions.chat.params} />
-			</div>
-		{/if}
-
-		<div class="  flex w-full justify-between my-2 pr-2">
-			<div class=" self-center text-xs font-medium">
-				{$i18n.t('Allow Chat Edit')}
-			</div>
-
-			<Switch bind:state={permissions.chat.edit} />
-		</div>
-
-		<div class="  flex w-full justify-between my-2 pr-2">
-			<div class=" self-center text-xs font-medium">
-				{$i18n.t('Allow Chat Delete')}
-			</div>
-
-			<Switch bind:state={permissions.chat.delete} />
-		</div>
-
-		<div class="  flex w-full justify-between my-2 pr-2">
-			<div class=" self-center text-xs font-medium">
-				{$i18n.t('Allow Delete Messages')}
-			</div>
-
-			<Switch bind:state={permissions.chat.delete_message} />
-		</div>
-
-		<div class="  flex w-full justify-between my-2 pr-2">
-			<div class=" self-center text-xs font-medium">
-				{$i18n.t('Allow Continue Response')}
-			</div>
-
-			<Switch bind:state={permissions.chat.continue_response} />
-		</div>
-
-		<div class="  flex w-full justify-between my-2 pr-2">
-			<div class=" self-center text-xs font-medium">
-				{$i18n.t('Allow Regenerate Response')}
-			</div>
-
-			<Switch bind:state={permissions.chat.regenerate_response} />
-		</div>
-
-		<div class="  flex w-full justify-between my-2 pr-2">
-			<div class=" self-center text-xs font-medium">
-				{$i18n.t('Allow Rate Response')}
-			</div>
-
-			<Switch bind:state={permissions.chat.rate_response} />
-		</div>
-
-		<div class="  flex w-full justify-between my-2 pr-2">
-			<div class=" self-center text-xs font-medium">
-				{$i18n.t('Allow Chat Share')}
-			</div>
-
-			<Switch bind:state={permissions.chat.share} />
-		</div>
-
-		<div class="  flex w-full justify-between my-2 pr-2">
-			<div class=" self-center text-xs font-medium">
-				{$i18n.t('Allow Chat Export')}
-			</div>
-
-			<Switch bind:state={permissions.chat.export} />
-		</div>
-
-		<div class="  flex w-full justify-between my-2 pr-2">
-			<div class=" self-center text-xs font-medium">
-				{$i18n.t('Allow Speech to Text')}
-			</div>
-
-			<Switch bind:state={permissions.chat.stt} />
-		</div>
-		<div class="  flex w-full justify-between my-2 pr-2">
-			<div class=" self-center text-xs font-medium">
-				{$i18n.t('Allow Text to Speech')}
-			</div>
-
-			<Switch bind:state={permissions.chat.tts} />
-		</div>
-
-		<div class="  flex w-full justify-between my-2 pr-2">
-			<div class=" self-center text-xs font-medium">
-				{$i18n.t('Allow Call')}
-			</div>
-
-			<Switch bind:state={permissions.chat.call} />
+			{/if}
 		</div>
-
-		<div class="  flex w-full justify-between my-2 pr-2">
-			<div class=" self-center text-xs font-medium">
-				{$i18n.t('Allow Multiple Models in Chat')}
-			</div>
-
-			<Switch bind:state={permissions.chat.multiple_models} />
-		</div>
-
-		<div class="  flex w-full justify-between my-2 pr-2">
-			<div class=" self-center text-xs font-medium">
-				{$i18n.t('Allow Temporary Chat')}
-			</div>
-
-			<Switch bind:state={permissions.chat.temporary} />
-		</div>
-
-		{#if permissions.chat.temporary}
-			<div class="  flex w-full justify-between my-2 pr-2">
-				<div class=" self-center text-xs font-medium">
-					{$i18n.t('Enforce Temporary Chat')}
-				</div>
-
-				<Switch bind:state={permissions.chat.temporary_enforced} />
-			</div>
-		{/if}
 	</div>
 
-	<hr class=" border-gray-100 dark:border-gray-850 my-2" />
+	<hr class=" border-gray-100 dark:border-gray-850" />
 
 	<div>
 		<div class=" mb-2 text-sm font-medium">{$i18n.t('Features Permissions')}</div>
-
-		<div class="  flex w-full justify-between my-2 pr-2">
-			<div class=" self-center text-xs font-medium">
-				{$i18n.t('Direct Tool Servers')}
-			</div>
-
-			<Switch bind:state={permissions.features.direct_tool_servers} />
-		</div>
-
-		<div class="  flex w-full justify-between my-2 pr-2">
-			<div class=" self-center text-xs font-medium">
-				{$i18n.t('Web Search')}
-			</div>
-
-			<Switch bind:state={permissions.features.web_search} />
-		</div>
-
-		<div class="  flex w-full justify-between my-2 pr-2">
-			<div class=" self-center text-xs font-medium">
-				{$i18n.t('Image Generation')}
-			</div>
-
-			<Switch bind:state={permissions.features.image_generation} />
-		</div>
-
-		<div class="  flex w-full justify-between my-2 pr-2">
-			<div class=" self-center text-xs font-medium">
-				{$i18n.t('Code Interpreter')}
-			</div>
-
-			<Switch bind:state={permissions.features.code_interpreter} />
-		</div>
-
-		<div class="  flex w-full justify-between my-2 pr-2">
-			<div class=" self-center text-xs font-medium">
-				{$i18n.t('Notes')}
-			</div>
-
-			<Switch bind:state={permissions.features.notes} />
+		<div class="flex flex-col space-y-2">
+			<PermissionSwitch
+				label={$i18n.t('Direct Tool Servers')}
+				bind:state={permissions.features.direct_tool_servers}
+				defaultState={defaultPermissions?.features?.direct_tool_servers}
+			/>
+			<PermissionSwitch
+				label={$i18n.t('Web Search')}
+				bind:state={permissions.features.web_search}
+				defaultState={defaultPermissions?.features?.web_search}
+			/>
+			<PermissionSwitch
+				label={$i18n.t('Image Generation')}
+				bind:state={permissions.features.image_generation}
+				defaultState={defaultPermissions?.features?.image_generation}
+			/>
+			<PermissionSwitch
+				label={$i18n.t('Code Interpreter')}
+				bind:state={permissions.features.code_interpreter}
+				defaultState={defaultPermissions?.features?.code_interpreter}
+			/>
+			<PermissionSwitch
+				label={$i18n.t('Notes')}
+				bind:state={permissions.features.notes}
+				defaultState={defaultPermissions?.features?.notes}
+			/>
 		</div>
 	</div>
-</div>
+</div>

src/lib/components/common/Warning.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+	import ExclamationTriangle from '$lib/components/icons/ExclamationTriangle.svelte';
+	export let text = '';
+</script>
+
+<div class="flex items-center text-xs text-yellow-600 dark:text-yellow-500">
+	<ExclamationTriangle className="w-4 h-4 mr-1.5" />
+	<p>{text}</p>
+</div>

src/lib/components/icons/ExclamationTriangle.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	export let size: 'sm' | 'md' | 'lg' | null = null;
+	export let className: string = '';
+	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="{size === 'sm'
+		? 'w-5 h-5'
+		: size === 'md'
+		? 'w-6 h-6'
+		: size === 'lg'
+		? 'w-7 h-7'
+		: ''} {className}"
+>
+	<path
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"
+	/>
+</svg>