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

This commit is contained in:
rdavis 2024-06-24 22:50:35 -05:00
parent 16a8eebd8d
commit 263d4bf496
3 changed files with 57 additions and 5 deletions

View File

@ -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}

View File

@ -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>

View File

@ -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 ?? {}} />