enh: ability to set chat controls permissions

src/lib/components/chat/Controls/Controls.svelte

@@ -30,64 +30,70 @@
 		</button>
 	</div>
 
-	<div class=" dark:text-gray-200 text-sm font-primary py-0.5 px-0.5">
-		{#if chatFiles.length > 0}
-			<Collapsible title={$i18n.t('Files')} open={true} buttonClassName="w-full">
-				<div class="flex flex-col gap-1 mt-1.5" slot="content">
-					{#each chatFiles as file, fileIdx}
-						<FileItem
-							className="w-full"
-							item={file}
-							edit={true}
-							url={file?.url ? file.url : null}
-							name={file.name}
-							type={file.type}
-							size={file?.size}
-							dismissible={true}
-							on:dismiss={() => {
-								// Remove the file from the chatFiles array
+	{#if $user.role === 'admin' || $user.permissions.chat?.controls}
+		<div class=" dark:text-gray-200 text-sm font-primary py-0.5 px-0.5">
+			{#if chatFiles.length > 0}
+				<Collapsible title={$i18n.t('Files')} open={true} buttonClassName="w-full">
+					<div class="flex flex-col gap-1 mt-1.5" slot="content">
+						{#each chatFiles as file, fileIdx}
+							<FileItem
+								className="w-full"
+								item={file}
+								edit={true}
+								url={file?.url ? file.url : null}
+								name={file.name}
+								type={file.type}
+								size={file?.size}
+								dismissible={true}
+								on:dismiss={() => {
+									// Remove the file from the chatFiles array
 
-								chatFiles.splice(fileIdx, 1);
-								chatFiles = chatFiles;
-							}}
-							on:click={() => {
-								console.log(file);
-							}}
-						/>
-					{/each}
+									chatFiles.splice(fileIdx, 1);
+									chatFiles = chatFiles;
+								}}
+								on:click={() => {
+									console.log(file);
+								}}
+							/>
+						{/each}
+					</div>
+				</Collapsible>
+
+				<hr class="my-2 border-gray-50 dark:border-gray-700/10" />
+			{/if}
+
+			<Collapsible bind:open={showValves} title={$i18n.t('Valves')} buttonClassName="w-full">
+				<div class="text-sm" slot="content">
+					<Valves show={showValves} />
 				</div>
 			</Collapsible>
 
 			<hr class="my-2 border-gray-50 dark:border-gray-700/10" />
-		{/if}
-
-		<Collapsible bind:open={showValves} title={$i18n.t('Valves')} buttonClassName="w-full">
-			<div class="text-sm" slot="content">
-				<Valves show={showValves} />
-			</div>
-		</Collapsible>
 
-		<hr class="my-2 border-gray-50 dark:border-gray-700/10" />
-
-		<Collapsible title={$i18n.t('System Prompt')} open={true} buttonClassName="w-full">
-			<div class="" slot="content">
-				<textarea
-					bind:value={params.system}
-					class="w-full text-xs py-1.5 bg-transparent outline-none resize-none"
-					rows="4"
-					placeholder={$i18n.t('Enter system prompt')}
-				/>
-			</div>
-		</Collapsible>
+			<Collapsible title={$i18n.t('System Prompt')} open={true} buttonClassName="w-full">
+				<div class="" slot="content">
+					<textarea
+						bind:value={params.system}
+						class="w-full text-xs py-1.5 bg-transparent outline-none resize-none"
+						rows="4"
+						placeholder={$i18n.t('Enter system prompt')}
+					/>
+				</div>
+			</Collapsible>
 
-		<hr class="my-2 border-gray-50 dark:border-gray-700/10" />
+			<hr class="my-2 border-gray-50 dark:border-gray-700/10" />
 
-		<Collapsible title={$i18n.t('Advanced Params')} open={true} buttonClassName="w-full">
-			<div class="text-sm mt-1.5" slot="content">
-				<div>
-					<AdvancedParams admin={$user?.role === 'admin'} bind:params />
+			<Collapsible title={$i18n.t('Advanced Params')} open={true} buttonClassName="w-full">
+				<div class="text-sm mt-1.5" slot="content">
+					<div>
+						<AdvancedParams admin={$user?.role === 'admin'} bind:params />
+					</div>
 				</div>
-			</div>
-		</Collapsible>
-	</div>
+			</Collapsible>
+		</div>
+	{:else}
+		<div class="text-sm dark:text-gray-300 text-center py-2 px-10">
+			{$i18n.t('You do not have permission to access this feature.')}
+		</div>
+	{/if}
 </div>

src/lib/components/chat/MessageInput/InputMenu.svelte

@@ -114,7 +114,7 @@
 				<hr class="border-black/5 dark:border-white/5 my-1" />
 			{/if}
 
-			{#if $config?.features?.enable_web_search}
+			{#if $config?.features?.enable_web_search && ($user.role === 'admin' || $user.permissions.features?.web_search)}
 				<button
 					class="flex w-full justify-between gap-2 items-center px-3 py-2 text-sm font-medium cursor-pointer rounded-xl"
 					on:click={() => {

src/lib/components/chat/Navbar.svelte

@@ -114,7 +114,7 @@
 							</div>
 						</button>
 					</Menu>
-				{:else if $mobile}
+				{:else if $mobile && ($user.role === 'admin' || $user.permissions.chat?.controls)}
 					<Tooltip content={$i18n.t('Controls')}>
 						<button
 							class=" flex cursor-pointer px-2 py-2 rounded-xl hover:bg-gray-50 dark:hover:bg-gray-850 transition"
@@ -130,7 +130,7 @@
 					</Tooltip>
 				{/if}
 
-				{#if !$mobile}
+				{#if !$mobile && ($user.role === 'admin' || $user.permissions.chat?.controls)}
 					<Tooltip content={$i18n.t('Controls')}>
 						<button
 							class=" flex cursor-pointer px-2 py-2 rounded-xl hover:bg-gray-50 dark:hover:bg-gray-850 transition"