feat: confirm dialog

src/lib/components/workspace/Tools/ToolkitEditor.svelte

@@ -5,11 +5,13 @@
 
 	import CodeEditor from './CodeEditor.svelte';
 	import { goto } from '$app/navigation';
+	import ConfirmDialog from '$lib/components/common/ConfirmDialog.svelte';
 
 	const dispatch = createEventDispatcher();
 
 	let formElement = null;
 	let loading = false;
+	let showConfirm = false;
 
 	export let edit = false;
 	export let clone = false;
@@ -55,7 +57,7 @@
 			bind:this={formElement}
 			class=" flex flex-col max-h-[100dvh] h-full"
 			on:submit|preventDefault={() => {
-				submitHandler();
+				showConfirm = true;
 			}}
 		>
 			<div class="mb-2.5">
@@ -135,8 +137,10 @@
 							>
 						</div>
 					</div>
+
 					<button
 						class="px-3 py-1.5 text-sm font-medium bg-emerald-600 hover:bg-emerald-700 text-gray-50 transition rounded-lg"
+						type="submit"
 					>
 						{$i18n.t('Save')}
 					</button>
@@ -145,3 +149,27 @@
 		</form>
 	</div>
 </div>
+
+<ConfirmDialog
+	bind:show={showConfirm}
+	on:confirm={() => {
+		submitHandler();
+	}}
+>
+	<div class="text-sm text-gray-500">
+		<div class=" bg-yellow-500/20 text-yellow-700 dark:text-yellow-200 rounded-lg px-4 py-3">
+			<div>Please carefully review the following warnings:</div>
+
+			<ul class=" mt-1 list-disc pl-4 text-xs">
+				<li>Tools have a function calling system that allows arbitrary code execution.</li>
+				<li>Do not install tools from sources you do not fully trust.</li>
+			</ul>
+		</div>
+
+		<div class="my-3">
+			I acknowledge that I have read and I understand the implications of my action. I am aware of
+			the risks associated with executing arbitrary code and I have verified the trustworthiness of
+			the source.
+		</div>
+	</div>
+</ConfirmDialog>