refac

2026-08-13 19:59:11 -06:00
parent b018feb741
commit 7d99b2716a
27 changed files with 1069 additions and 111 deletions
@@ -16,7 +16,6 @@
 	import Clip from '$lib/components/icons/Clip.svelte';
 	import ChatBubbleOval from '$lib/components/icons/ChatBubbleOval.svelte';
 	import Refresh from '$lib/components/icons/Refresh.svelte';
-	import Agile from '$lib/components/icons/Agile.svelte';
 	import ClockRotateRight from '$lib/components/icons/ClockRotateRight.svelte';
 	import Database from '$lib/components/icons/Database.svelte';
 	import ChevronRight from '$lib/components/icons/ChevronRight.svelte';
@@ -45,11 +44,25 @@

 	export let onUpload: Function;
 	export let onClose: Function;
+	export let toolApprovalMode = 'full';
+	export let onToolApprovalModeChange: Function = () => {};

 	let show = false;
 	let tab = '';

 	let showAttachWebpageModal = false;
+	const toolApprovalModes = [
+		{
+			value: 'full',
+			label: 'Full access',
+			description: 'Run tools without asking for approval.'
+		},
+		{
+			value: 'ask',
+			label: 'Ask for approval',
+			description: 'Stop before each tool call until you allow or deny it.'
+		}
+	];

 	let fileUploadEnabled = true;
 	$: fileUploadEnabled =
@@ -58,6 +71,7 @@

 	let webUploadEnabled = true;
 	$: webUploadEnabled = $user?.role === 'admin' || ($user?.permissions?.chat?.web_upload ?? true);
+	$: toolPermissionsEnabled = $config?.features?.enable_tool_permissions ?? false;

 	$: if (!fileUploadEnabled && files.length > 0) {
 		files = [];
@@ -129,6 +143,47 @@
 					class="max-h-72 overflow-y-auto overflow-x-hidden scrollbar-thin"
 					in:fly={{ x: -20, duration: 150 }}
 				>
+					{#if toolPermissionsEnabled}
+						<button
+							class="flex gap-2 w-full items-center h-[1.6875rem] px-2 text-[0.8125rem] font-normal cursor-pointer hover:bg-gray-50/40 dark:hover:bg-gray-800/40 rounded-xl"
+							on:click={() => {
+								tab = 'tool_permissions';
+							}}
+						>
+							<svg
+								class="size-3.5 shrink-0"
+								viewBox="0 0 24 24"
+								fill="none"
+								stroke="currentColor"
+								stroke-width="1.5"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+							>
+								<path d="M12 22C12 22 20 18 20 12V5L12 2L4 5V12C4 18 12 22 12 22Z" />
+							</svg>
+
+							<div class="flex items-center w-full justify-between min-w-0">
+								<div class="line-clamp-1">
+									{$i18n.t('Tool Permissions')}
+								</div>
+
+								<div class="flex items-center gap-2 min-w-0">
+									<div class="text-xs text-gray-500 truncate">
+										{$i18n.t(
+											toolApprovalModes.find((mode) => mode.value === toolApprovalMode)?.label ??
+												'Full access'
+										)}
+									</div>
+									<div class="text-gray-500">
+										<ChevronRight />
+									</div>
+								</div>
+							</div>
+						</button>
+
+						<div class="h-px mx-1 my-1 bg-gray-100 dark:bg-gray-800"></div>
+					{/if}
+
 					<Tooltip
 						content={fileUploadCapableModels.length !== selectedModels.length
 							? $i18n.t('Model(s) do not support file upload')
@@ -487,6 +542,55 @@
 						{/if}
 					{/if}
 				</div>
+			{:else if tab === 'tool_permissions'}
+				<div class="flex max-h-72 flex-col overflow-hidden" in:fly={{ x: 20, duration: 150 }}>
+					<button
+						class="flex w-full shrink-0 justify-between gap-2 items-center h-[1.6875rem] px-2 text-[0.8125rem] font-normal select-none cursor-pointer rounded-xl hover:bg-gray-50/40 dark:hover:bg-gray-800/40"
+						on:click={() => {
+							tab = '';
+						}}
+					>
+						<ChevronLeft />
+
+						<div class="flex items-center w-full justify-between">
+							<div>
+								{$i18n.t('Tool Permissions')}
+							</div>
+						</div>
+					</button>
+
+					<div class="mt-1 space-y-1">
+						{#each toolApprovalModes as mode}
+							<Tooltip content={$i18n.t(mode.description)} className="w-full">
+								<button
+									class="flex gap-2 w-full items-center h-[1.6875rem] px-2 text-[0.8125rem] font-normal cursor-pointer hover:bg-gray-50/40 dark:hover:bg-gray-800/40 rounded-xl"
+									on:click={() => {
+										toolApprovalMode = mode.value;
+										onToolApprovalModeChange(mode.value);
+										tab = '';
+									}}
+								>
+									<div class="flex items-center w-full justify-between min-w-0">
+										<div class="line-clamp-1">{$i18n.t(mode.label)}</div>
+										{#if toolApprovalMode === mode.value}
+											<svg
+												class="size-3 shrink-0 text-gray-500"
+												viewBox="0 0 24 24"
+												fill="none"
+												stroke="currentColor"
+												stroke-width="2.5"
+												stroke-linecap="round"
+												stroke-linejoin="round"
+											>
+												<polyline points="20 6 9 17 4 12" />
+											</svg>
+										{/if}
+									</div>
+								</button>
+							</Tooltip>
+						{/each}
+					</div>
+				</div>
 			{:else if tab === 'knowledge'}
 				<div class="flex max-h-72 flex-col overflow-hidden" in:fly={{ x: 20, duration: 150 }}>
 					<button