From a743b16728c6ae24b8befbc2d7f24eb9e20c4ad5 Mon Sep 17 00:00:00 2001 From: Timothy Jaeryang Baek Date: Sun, 5 Oct 2025 02:03:57 -0500 Subject: [PATCH] refac: tools --- src/lib/components/workspace/Prompts.svelte | 4 +- src/lib/components/workspace/Tools.svelte | 562 +++++++++--------- .../workspace/Tools/AddToolMenu.svelte | 10 +- 3 files changed, 294 insertions(+), 282 deletions(-) diff --git a/src/lib/components/workspace/Prompts.svelte b/src/lib/components/workspace/Prompts.svelte index 0ca16f6ecc..079ce85bdb 100644 --- a/src/lib/components/workspace/Prompts.svelte +++ b/src/lib/components/workspace/Prompts.svelte @@ -328,8 +328,8 @@ >
-
{prompt.title}
-
+
{prompt.title}
+
{prompt.command}
diff --git a/src/lib/components/workspace/Tools.svelte b/src/lib/components/workspace/Tools.svelte index a2a6ef1c68..98fcb8b492 100644 --- a/src/lib/components/workspace/Tools.svelte +++ b/src/lib/components/workspace/Tools.svelte @@ -3,9 +3,10 @@ import fileSaver from 'file-saver'; const { saveAs } = fileSaver; - import { onMount, getContext } from 'svelte'; + import { onMount, getContext, tick } from 'svelte'; + const i18n = getContext('i18n'); + import { WEBUI_NAME, config, prompts, tools as _tools, user } from '$lib/stores'; - import { createNewPrompt, deletePromptByCommand, getPrompts } from '$lib/apis/prompts'; import { goto } from '$app/navigation'; import { @@ -17,7 +18,8 @@ getToolList, getTools } from '$lib/apis/tools'; - import Download from '../icons/Download.svelte'; + import { capitalizeFirstLetter } from '$lib/utils'; + import Tooltip from '../common/Tooltip.svelte'; import ConfirmDialog from '../common/ConfirmDialog.svelte'; import ToolMenu from './Tools/ToolMenu.svelte'; @@ -31,12 +33,10 @@ import Plus from '../icons/Plus.svelte'; import ChevronRight from '../icons/ChevronRight.svelte'; import Spinner from '../common/Spinner.svelte'; - import { capitalizeFirstLetter } from '$lib/utils'; import XMark from '../icons/XMark.svelte'; import AddToolMenu from './Tools/AddToolMenu.svelte'; import ImportModal from '../ImportModal.svelte'; - - const i18n = getContext('i18n'); + import ViewSelector from './common/ViewSelector.svelte'; let shiftKey = false; let loaded = false; @@ -56,18 +56,30 @@ let tools = []; let filteredItems = []; + let tagsContainerElement: HTMLDivElement; + let viewOption = ''; + let showImportModal = false; - $: filteredItems = tools.filter((t) => { - if (query === '') return true; - const lowerQuery = query.toLowerCase(); - return ( - (t.name || '').toLowerCase().includes(lowerQuery) || - (t.id || '').toLowerCase().includes(lowerQuery) || - (t.user?.name || '').toLowerCase().includes(lowerQuery) || // Search by user name - (t.user?.email || '').toLowerCase().includes(lowerQuery) // Search by user email - ); - }); + $: if (tools && query !== undefined && viewOption !== undefined) { + setFilteredItems(); + } + + const setFilteredItems = () => { + filteredItems = tools.filter((t) => { + if (query === '' && viewOption === '') return true; + const lowerQuery = query.toLowerCase(); + return ( + ((t.name || '').toLowerCase().includes(lowerQuery) || + (t.id || '').toLowerCase().includes(lowerQuery) || + (t.user?.name || '').toLowerCase().includes(lowerQuery) || // Search by user name + (t.user?.email || '').toLowerCase().includes(lowerQuery)) && // Search by user email + (viewOption === '' || + (viewOption === 'created' && t.user_id === $user?.id) || + (viewOption === 'shared' && t.user_id !== $user?.id)) + ); + }); + }; const shareHandler = async (tool) => { const item = await getToolById(localStorage.token, tool.id).catch((error) => { @@ -193,18 +205,104 @@ /> {#if loaded} -
+
+ { + console.log(importFiles); + showConfirm = true; + }} + /> +
-
- {$i18n.t('Tools')} -
- {filteredItems.length} +
+
+ {$i18n.t('Tools')} +
+ +
+ {filteredItems.length} +
+
+ +
+ {#if $user?.role === 'admin'} + + + {#if tools.length} + + {/if} + {/if} + + {#if $user?.role === 'admin'} + { + goto('/workspace/tools/create'); + }} + importFromLinkHandler={() => { + showImportModal = true; + }} + > +
+ + + +
+ + {:else} + + + + + {/if}
+
-
+
+ +
@@ -227,266 +325,180 @@
{/if}
- -
- {#if $user?.role === 'admin'} - { - goto('/workspace/tools/create'); - }} - importFromLinkHandler={() => { - showImportModal = true; - }} - > -
- -
- - {:else} - - - - {/if} -
-
-
- {#each filteredItems as tool} +
{ + if (e.deltaY !== 0) { + e.preventDefault(); + e.currentTarget.scrollLeft += e.deltaY; + } + }} + >
- -
-
- -
-
- TOOL -
+ { + localStorage.workspaceViewOption = value; - {#if tool?.meta?.manifest?.version} -
- v{tool?.meta?.manifest?.version ?? ''} -
- {/if} - -
- {tool.name} - - {tool.id} -
-
- - -
-
-
- {tool.meta.description} -
-
- -
- - {$i18n.t('By {{name}}', { - name: capitalizeFirstLetter( - tool?.user?.name ?? tool?.user?.email ?? $i18n.t('Deleted User') - ) - })} - -
-
-
-
- -
- {#if shiftKey} - - - - {:else} - {#if tool?.meta?.manifest?.funding_url ?? false} - - - - {/if} - - - - - - { - goto(`/workspace/tools/edit?id=${encodeURIComponent(tool.id)}`); - }} - shareHandler={() => { - shareHandler(tool); - }} - cloneHandler={() => { - cloneHandler(tool); - }} - exportHandler={() => { - exportHandler(tool); - }} - deleteHandler={async () => { - selectedTool = tool; - showDeleteConfirm = true; - }} - onClose={() => {}} - > - - - {/if} -
-
- {/each} -
- - {#if $user?.role === 'admin'} -
-
- { - console.log(importFiles); - showConfirm = true; + await tick(); }} /> - - - - {#if tools.length} - - {/if}
- {/if} + + {#if (filteredItems ?? []).length !== 0} +
+ {#each filteredItems as tool} + +
+ +
+
+ +
+
+ {tool.name} +
+ {#if tool?.meta?.manifest?.version} +
+ v{tool?.meta?.manifest?.version ?? ''} +
+ {/if} +
+ + +
+
+ + {$i18n.t('By {{name}}', { + name: capitalizeFirstLetter( + tool?.user?.name ?? tool?.user?.email ?? $i18n.t('Deleted User') + ) + })} + +
+
+
+
+ +
+ {#if shiftKey} + + + + {:else} + {#if tool?.meta?.manifest?.funding_url ?? false} + + + + {/if} + + + + + + { + goto(`/workspace/tools/edit?id=${encodeURIComponent(tool.id)}`); + }} + shareHandler={() => { + shareHandler(tool); + }} + cloneHandler={() => { + cloneHandler(tool); + }} + exportHandler={() => { + exportHandler(tool); + }} + deleteHandler={async () => { + selectedTool = tool; + showDeleteConfirm = true; + }} + onClose={() => {}} + > + + + {/if} +
+
+ + {/each} +
+ {:else} +
+
+
😕
+
{$i18n.t('No tools found')}
+
+ {$i18n.t('Try adjusting your search or filter to find what you are looking for.')} +
+
+
+ {/if} +
{#if $config?.features.enable_community_sharing}
diff --git a/src/lib/components/workspace/Tools/AddToolMenu.svelte b/src/lib/components/workspace/Tools/AddToolMenu.svelte index d454022c02..feeec905f0 100644 --- a/src/lib/components/workspace/Tools/AddToolMenu.svelte +++ b/src/lib/components/workspace/Tools/AddToolMenu.svelte @@ -41,27 +41,27 @@