Merge pull request #3417 from ricky-davis/addDeleteConfirmationToolsFunctions

feat: Added delete confirmation dialogs for Prompts, Tools, and Functions.

src/lib/components/workspace/Functions.svelte

@@ -27,6 +27,7 @@
 	import ValvesModal from './common/ValvesModal.svelte';
 	import ManifestModal from './common/ManifestModal.svelte';
 	import Heart from '../icons/Heart.svelte';
+	import DeleteConfirmDialog from '$lib/components/common/ConfirmDialog.svelte';
 
 	const i18n = getContext('i18n');
 
@@ -40,6 +41,8 @@
 	let showValvesModal = false;
 	let selectedFunction = null;
 
+	let showDeleteConfirm = false;
+
 	const shareHandler = async (tool) => {
 		console.log(tool);
 	};
@@ -246,7 +249,8 @@
 						exportHandler(func);
 					}}
 					deleteHandler={async () => {
-						deleteHandler(func);
+						selectedFunction = func;
+						showDeleteConfirm = true;
 					}}
 					onClose={() => {}}
 				>
@@ -386,6 +390,18 @@
 	</a>
 </div>
 
+<DeleteConfirmDialog
+	bind:show={showDeleteConfirm}
+	title={$i18n.t('Delete function?')}
+	on:confirm={() => {
+		deleteHandler(selectedFunction);
+	}}
+>
+	<div class=" text-sm text-gray-500">
+		{$i18n.t('This will delete')} <span class="  font-semibold">{selectedFunction.name}</span>.
+	</div>
+</DeleteConfirmDialog>
+
 <ManifestModal bind:show={showManifestModal} manifest={selectedFunction?.meta?.manifest ?? {}} />
 <ValvesModal
 	bind:show={showValvesModal}

src/lib/components/workspace/Prompts.svelte

@@ -10,6 +10,7 @@
 	import { goto } from '$app/navigation';
 	import PromptMenu from './Prompts/PromptMenu.svelte';
 	import EllipsisHorizontal from '../icons/EllipsisHorizontal.svelte';
+	import DeleteConfirmDialog from '$lib/components/common/ConfirmDialog.svelte';
 
 	const i18n = getContext('i18n');
 
@@ -17,6 +18,9 @@
 	let query = '';
 	let promptsImportInputElement: HTMLInputElement;
 
+	let showDeleteConfirm = false;
+	let deletePrompt = null;
+
 	const shareHandler = async (prompt) => {
 		toast.success($i18n.t('Redirecting you to OpenWebUI Community'));
 
@@ -155,7 +159,8 @@
 						exportHandler(prompt);
 					}}
 					deleteHandler={async () => {
-						deleteHandler(prompt);
+						deletePrompt = prompt;
+						showDeleteConfirm = true;
 					}}
 					onClose={() => {}}
 				>
@@ -301,3 +306,15 @@
 		</div>
 	</a>
 </div>
+
+<DeleteConfirmDialog
+	bind:show={showDeleteConfirm}
+	title={$i18n.t('Delete prompt?')}
+	on:confirm={() => {
+		deleteHandler(deletePrompt);
+	}}
+>
+	<div class=" text-sm text-gray-500">
+		{$i18n.t('This will delete')} <span class="  font-semibold">{deletePrompt.command}</span>.
+	</div>
+</DeleteConfirmDialog>

src/lib/components/workspace/Tools.svelte

@@ -23,6 +23,7 @@
 	import ValvesModal from './common/ValvesModal.svelte';
 	import ManifestModal from './common/ManifestModal.svelte';
 	import Heart from '../icons/Heart.svelte';
+	import DeleteConfirmDialog from '$lib/components/common/ConfirmDialog.svelte';
 
 	const i18n = getContext('i18n');
 
@@ -36,6 +37,8 @@
 	let showValvesModal = false;
 	let selectedTool = null;
 
+	let showDeleteConfirm = false;
+
 	const shareHandler = async (tool) => {
 		console.log(tool);
 	};
@@ -240,7 +243,8 @@
 						exportHandler(tool);
 					}}
 					deleteHandler={async () => {
-						deleteHandler(tool);
+						selectedTool = tool;
+						showDeleteConfirm = true;
 					}}
 					onClose={() => {}}
 				>
@@ -370,6 +374,18 @@
 	</a>
 </div>
 
+<DeleteConfirmDialog
+	bind:show={showDeleteConfirm}
+	title={$i18n.t('Delete tool?')}
+	on:confirm={() => {
+		deleteHandler(selectedTool);
+	}}
+>
+	<div class=" text-sm text-gray-500">
+		{$i18n.t('This will delete')} <span class="  font-semibold">{selectedTool.name}</span>.
+	</div>
+</DeleteConfirmDialog>
+
 <ValvesModal bind:show={showValvesModal} type="tool" id={selectedTool?.id ?? null} />
 <ManifestModal bind:show={showManifestModal} manifest={selectedTool?.meta?.manifest ?? {}} />