diff --git a/src/lib/components/workspace/Prompts.svelte b/src/lib/components/workspace/Prompts.svelte index 3381757742..0ca16f6ecc 100644 --- a/src/lib/components/workspace/Prompts.svelte +++ b/src/lib/components/workspace/Prompts.svelte @@ -4,7 +4,7 @@ const { saveAs } = fileSaver; import { goto } from '$app/navigation'; - import { onMount, getContext } from 'svelte'; + import { onMount, getContext, tick } from 'svelte'; import { WEBUI_NAME, config, prompts as _prompts, user } from '$lib/stores'; import { @@ -13,6 +13,7 @@ getPrompts, getPromptList } from '$lib/apis/prompts'; + import { capitalizeFirstLetter, slugify } from '$lib/utils'; import PromptMenu from './Prompts/PromptMenu.svelte'; import EllipsisHorizontal from '../icons/EllipsisHorizontal.svelte'; @@ -22,9 +23,9 @@ import ChevronRight from '../icons/ChevronRight.svelte'; import Spinner from '../common/Spinner.svelte'; import Tooltip from '../common/Tooltip.svelte'; - import { capitalizeFirstLetter, slugify } from '$lib/utils'; import XMark from '../icons/XMark.svelte'; import GarbageBin from '../icons/GarbageBin.svelte'; + import ViewSelector from './common/ViewSelector.svelte'; let shiftKey = false; @@ -40,17 +41,30 @@ let showDeleteConfirm = false; let deletePrompt = null; + let tagsContainerElement: HTMLDivElement; + let viewOption = ''; + let filteredItems = []; - $: filteredItems = prompts.filter((p) => { - if (query === '') return true; - const lowerQuery = query.toLowerCase(); - return ( - (p.title || '').toLowerCase().includes(lowerQuery) || - (p.command || '').toLowerCase().includes(lowerQuery) || - (p.user?.name || '').toLowerCase().includes(lowerQuery) || - (p.user?.email || '').toLowerCase().includes(lowerQuery) - ); - }); + + $: if (prompts && query !== undefined && viewOption !== undefined) { + setFilteredItems(); + } + + const setFilteredItems = () => { + filteredItems = prompts.filter((p) => { + if (query === '' && viewOption === '') return true; + const lowerQuery = query.toLowerCase(); + return ( + ((p.title || '').toLowerCase().includes(lowerQuery) || + (p.command || '').toLowerCase().includes(lowerQuery) || + (p.user?.name || '').toLowerCase().includes(lowerQuery) || + (p.user?.email || '').toLowerCase().includes(lowerQuery)) && + (viewOption === '' || + (viewOption === 'created' && p.user_id === $user?.id) || + (viewOption === 'shared' && p.user_id !== $user?.id)) + ); + }); + }; const shareHandler = async (prompt) => { toast.success($i18n.t('Redirecting you to Open WebUI Community')); @@ -111,6 +125,7 @@ }; onMount(async () => { + viewOption = localStorage?.workspaceViewOption || ''; await init(); loaded = true; @@ -161,18 +176,99 @@ -
+
+ { + console.log(importFiles); + + const reader = new FileReader(); + reader.onload = async (event) => { + const savedPrompts = JSON.parse(event.target.result); + console.log(savedPrompts); + + for (const prompt of savedPrompts) { + await createNewPrompt(localStorage.token, { + command: prompt.command.charAt(0) === '/' ? prompt.command.slice(1) : prompt.command, + title: prompt.title, + content: prompt.content + }).catch((error) => { + toast.error(`${error}`); + return null; + }); + } + + prompts = await getPromptList(localStorage.token); + await _prompts.set(await getPrompts(localStorage.token)); + + importFiles = []; + promptsImportInputElement.value = ''; + }; + + reader.readAsText(importFiles[0]); + }} + />
-
- {$i18n.t('Prompts')} -
- {filteredItems.length} +
+ {$i18n.t('Prompts')} +
+ +
+ {filteredItems.length} +
+
+ +
+ {#if $user?.role === 'admin'} + + + {#if prompts.length} + + {/if} + {/if} + + + + +
+
-
+
+
@@ -196,211 +292,118 @@
{/if}
- -
- - - -
-
-
- {#each filteredItems as prompt} +
{ + if (e.deltaY !== 0) { + e.preventDefault(); + e.currentTarget.scrollLeft += e.deltaY; + } + }} + >
-
- -
-
{prompt.title}
-
- {prompt.command} -
-
+ { + localStorage.workspaceViewOption = value; -
- -
- {$i18n.t('By {{name}}', { - name: capitalizeFirstLetter( - prompt?.user?.name ?? prompt?.user?.email ?? $i18n.t('Deleted User') - ) - })} -
- -
- -
-
- {#if shiftKey} - - - - {:else} - - - - - - - { - shareHandler(prompt); - }} - cloneHandler={() => { - cloneHandler(prompt); - }} - exportHandler={() => { - exportHandler(prompt); - }} - deleteHandler={async () => { - deletePrompt = prompt; - showDeleteConfirm = true; - }} - onClose={() => {}} - > - - - {/if} -
-
- {/each} -
- - {#if $user?.role === 'admin'} -
-
- { - console.log(importFiles); - - const reader = new FileReader(); - reader.onload = async (event) => { - const savedPrompts = JSON.parse(event.target.result); - console.log(savedPrompts); - - for (const prompt of savedPrompts) { - await createNewPrompt(localStorage.token, { - command: - prompt.command.charAt(0) === '/' ? prompt.command.slice(1) : prompt.command, - title: prompt.title, - content: prompt.content - }).catch((error) => { - toast.error(`${error}`); - return null; - }); - } - - prompts = await getPromptList(localStorage.token); - await _prompts.set(await getPrompts(localStorage.token)); - - importFiles = []; - promptsImportInputElement.value = ''; - }; - - reader.readAsText(importFiles[0]); + await tick(); }} /> - - - - {#if prompts.length} - - {/if}
- {/if} + + {#if (filteredItems ?? []).length !== 0} + +
+ {#each filteredItems as prompt} + +
+
+
{prompt.title}
+
+ {prompt.command} +
+
+ +
+ +
+ {$i18n.t('By {{name}}', { + name: capitalizeFirstLetter( + prompt?.user?.name ?? prompt?.user?.email ?? $i18n.t('Deleted User') + ) + })} +
+ +
+
+
+ {#if shiftKey} + + + + {:else} + { + shareHandler(prompt); + }} + cloneHandler={() => { + cloneHandler(prompt); + }} + exportHandler={() => { + exportHandler(prompt); + }} + deleteHandler={async () => { + deletePrompt = prompt; + showDeleteConfirm = true; + }} + onClose={() => {}} + > + + + {/if} +
+ + {/each} +
+ {:else} +
+
+
😕
+
{$i18n.t('No prompts found')}
+
+ {$i18n.t('Try adjusting your search or filter to find what you are looking for.')} +
+
+
+ {/if} +
{#if $config?.features.enable_community_sharing}