ti.sil/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui.git synced 2025-12-13 12:55:19 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

Merge pull request #16838 from silentoplayz/shift-to-delete-prompts

Browse source 
feat: Add Shift-to-delete functionality for prompts on Workspace `Prompts` page
This commit is contained in:
Tim Jaeryang Baek 2025-08-23 21:57:09 +04:00 committed by GitHub
commit 3ff773c199
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 95 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

138
src/lib/components/workspace/Prompts.svelte
View file

@ -24,6 +24,9 @@
import Tooltip from '../common/Tooltip.svelte';
import { capitalizeFirstLetter, slugify } from '$lib/utils';
import XMark from '../icons/XMark.svelte';
import GarbageBin from '../icons/GarbageBin.svelte';
let shiftKey = false;
const i18n = getContext('i18n');
let promptsImportInputElement: HTMLInputElement;
@ -89,7 +92,16 @@
const deleteHandler = async (prompt) => {
const command = prompt.command;
await deletePromptByCommand(localStorage.token, command);
const res = await deletePromptByCommand(localStorage.token, command).catch((err) => {
toast.error(err);
return null;
});
if (res) {
toast.success($i18n.t(`Deleted {{name}}`, { name: command }));
}
await init();
};
@ -101,6 +113,32 @@
onMount(async () => {
await init();
loaded = true;
const onKeyDown = (event) => {
if (event.key === 'Shift') {
shiftKey = true;
}
};
const onKeyUp = (event) => {
if (event.key === 'Shift') {
shiftKey = false;
}
};
const onBlur = () => {
shiftKey = false;
};
window.addEventListener('keydown', onKeyDown);
window.addEventListener('keyup', onKeyUp);
window.addEventListener('blur', onBlur);
return () => {
window.removeEventListener('keydown', onKeyDown);
window.removeEventListener('keyup', onKeyUp);
window.removeEventListener('blur', onBlur);
};
});
</script>
@ -202,50 +240,64 @@
</a>
</div>
<div class="flex flex-row gap-0.5 self-center">
<a
class="self-center w-fit text-sm px-2 py-2 dark:text-gray-300 dark:hover:text-white hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
type="button"
href={`/workspace/prompts/edit?command=${encodeURIComponent(prompt.command)}`}
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="w-4 h-4"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L6.832 19.82a4.5 4.5 0 01-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 011.13-1.897L16.863 4.487zm0 0L19.5 7.125"
/>
</svg>
</a>
<PromptMenu
shareHandler={() => {
shareHandler(prompt);
}}
cloneHandler={() => {
cloneHandler(prompt);
}}
exportHandler={() => {
exportHandler(prompt);
}}
deleteHandler={async () => {
deletePrompt = prompt;
showDeleteConfirm = true;
}}
onClose={() => {}}
>
<button
class="self-center w-fit text-sm p-1.5 dark:text-gray-300 dark:hover:text-white hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
{#if shiftKey}
<Tooltip content={$i18n.t('Delete')}>
<button
class="self-center w-fit text-sm px-2 py-2 dark:text-gray-300 dark:hover:text-white hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
type="button"
on:click={() => {
deleteHandler(prompt);
}}
>
<GarbageBin />
</button>
</Tooltip>
{:else}
<a
class="self-center w-fit text-sm px-2 py-2 dark:text-gray-300 dark:hover:text-white hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
type="button"
href={`/workspace/prompts/edit?command=${encodeURIComponent(prompt.command)}`}
>
<EllipsisHorizontal className="size-5" />
</button>
</PromptMenu>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="w-4 h-4"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L6.832 19.82a4.5 4.5 0 01-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 011.13-1.897L16.863 4.487zm0 0L19.5 7.125"
/>
</svg>
</a>
<PromptMenu
shareHandler={() => {
shareHandler(prompt);
}}
cloneHandler={() => {
cloneHandler(prompt);
}}
exportHandler={() => {
exportHandler(prompt);
}}
deleteHandler={async () => {
deletePrompt = prompt;
showDeleteConfirm = true;
}}
onClose={() => {}}
>
<button
class="self-center w-fit text-sm p-1.5 dark:text-gray-300 dark:hover:text-white hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
type="button"
>
<EllipsisHorizontal className="size-5" />
</button>
</PromptMenu>
{/if}
</div>
</div>
{/each}