From 263d4bf49643e391b296082aa207e8e436c49075 Mon Sep 17 00:00:00 2001
From: rdavis <ricky.c.davis.9@gmail.com>
Date: Mon, 24 Jun 2024 22:50:35 -0500
Subject: [PATCH] Added delete confirmation dialogs for Prompts, Tools, and
 Functions.

---
 src/lib/components/workspace/Functions.svelte | 22 +++++++++++++++++--
 src/lib/components/workspace/Prompts.svelte   | 21 ++++++++++++++++--
 src/lib/components/workspace/Tools.svelte     | 19 +++++++++++++++-
 3 files changed, 57 insertions(+), 5 deletions(-)

diff --git a/src/lib/components/workspace/Functions.svelte b/src/lib/components/workspace/Functions.svelte
index b3572a087..b73338d01 100644
--- a/src/lib/components/workspace/Functions.svelte
+++ b/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,10 @@
 	let showValvesModal = false;
 	let selectedFunction = null;
 
+
+	let showDeleteConfirm = false;
+	let deleteFunction = null;
+
 	const shareHandler = async (tool) => {
 		console.log(tool);
 	};
@@ -245,8 +250,9 @@
 					exportHandler={() => {
 						exportHandler(func);
 					}}
-					deleteHandler={async () => {
-						deleteHandler(func);
+					deleteHandler={async () => {						
+						deleteFunction = func;
+						showDeleteConfirm = true;
 					}}
 					onClose={() => {}}
 				>
@@ -386,6 +392,18 @@
 	</a>
 </div>
 
+<DeleteConfirmDialog
+	bind:show={showDeleteConfirm}
+	title={$i18n.t('Delete function?')}
+	on:confirm={() => {
+		deleteHandler(deleteFunction);
+	}}
+>
+	<div class=" text-sm text-gray-500">
+		{$i18n.t('This will delete')} <span class="  font-semibold">{deleteFunction.name}</span>.
+	</div>
+</DeleteConfirmDialog>
+
 <ManifestModal bind:show={showManifestModal} manifest={selectedFunction?.meta?.manifest ?? {}} />
 <ValvesModal
 	bind:show={showValvesModal}
diff --git a/src/lib/components/workspace/Prompts.svelte b/src/lib/components/workspace/Prompts.svelte
index 73947a21d..ee87a75ae 100644
--- a/src/lib/components/workspace/Prompts.svelte
+++ b/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'));
 
@@ -154,8 +158,9 @@
 					exportHandler={() => {
 						exportHandler(prompt);
 					}}
-					deleteHandler={async () => {
-						deleteHandler(prompt);
+					deleteHandler={async () => {			
+						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>
diff --git a/src/lib/components/workspace/Tools.svelte b/src/lib/components/workspace/Tools.svelte
index c98c013fb..043f6473e 100644
--- a/src/lib/components/workspace/Tools.svelte
+++ b/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,9 @@
 	let showValvesModal = false;
 	let selectedTool = null;
 
+	let showDeleteConfirm = false;
+	let deleteTool = null;
+
 	const shareHandler = async (tool) => {
 		console.log(tool);
 	};
@@ -240,7 +244,8 @@
 						exportHandler(tool);
 					}}
 					deleteHandler={async () => {
-						deleteHandler(tool);
+						deleteTool = tool;
+						showDeleteConfirm = true;
 					}}
 					onClose={() => {}}
 				>
@@ -370,6 +375,18 @@
 	</a>
 </div>
 
+<DeleteConfirmDialog
+	bind:show={showDeleteConfirm}
+	title={$i18n.t('Delete tool?')}
+	on:confirm={() => {
+		deleteHandler(deleteTool);
+	}}
+>
+	<div class=" text-sm text-gray-500">
+		{$i18n.t('This will delete')} <span class="  font-semibold">{deleteTool.name}</span>.
+	</div>
+</DeleteConfirmDialog>
+
 <ValvesModal bind:show={showValvesModal} type="tool" id={selectedTool?.id ?? null} />
 <ManifestModal bind:show={showManifestModal} manifest={selectedTool?.meta?.manifest ?? {}} />