scriptoriumadmin/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui.git synced 2026-10-06 02:48:04 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

feat(ui): add search to tools, filters, and actions selectors in model editor

Browse source
This commit is contained in:
silentoplayz 2026-06-04 05:41:18 -04:00
parent 1a97751e37
commit 2146527863
4 changed files with 80 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
src/lib/components/workspace/Models/ActionsSelector.svelte
View file

@ -9,6 +9,7 @@
export let selectedActionIds = [];
let _actions = {};
let searchQuery = '';
onMount(() => {
_actions = actions.reduce((acc, action) => {
@ -20,6 +21,14 @@
return acc;
}, {});
});
$: filteredActionKeys = Object.keys(_actions).filter((id) => {
if (!searchQuery.trim()) return true;
const q = searchQuery.toLowerCase();
return (
_actions[id].name?.toLowerCase().includes(q) || _actions[id].id?.toLowerCase().includes(q)
);
});
</script>
{#if actions.length > 0}
@ -28,9 +37,20 @@
<div class=" self-center text-xs font-medium text-gray-500">{$i18n.t('Actions')}</div>
</div>
{#if Object.keys(_actions).length > 10}
<div class="mb-2">
<input
class="w-full text-sm bg-transparent outline-none border border-gray-100 dark:border-gray-800 rounded-lg px-3 py-1.5 placeholder-gray-400"
type="text"
placeholder={$i18n.t('Search actions...')}
bind:value={searchQuery}
/>
</div>
{/if}
<div class="flex flex-col">
<div class=" flex items-center flex-wrap">
{#each Object.keys(_actions) as action, actionIdx}
{#each filteredActionKeys as action, actionIdx}
<div class=" flex items-center gap-2 mr-3">
<div class="self-center flex items-center">
<Checkbox

21
src/lib/components/workspace/Models/DefaultFiltersSelector.svelte
View file

@ -7,6 +7,14 @@
export let filters = [];
export let selectedFilterIds = [];
let searchQuery = '';
$: filteredFilters = filters.filter((filter) => {
if (!searchQuery.trim()) return true;
const q = searchQuery.toLowerCase();
return filter.name?.toLowerCase().includes(q) || filter.id?.toLowerCase().includes(q);
});
</script>
<div>
@ -14,10 +22,21 @@
<div class=" self-center text-xs text-gray-500 font-medium">{$i18n.t('Default Filters')}</div>
</div>
{#if filters.length > 10}
<div class="mb-2">
<input
class="w-full text-sm bg-transparent outline-none border border-gray-100 dark:border-gray-800 rounded-lg px-3 py-1.5 placeholder-gray-400"
type="text"
placeholder={$i18n.t('Search filters...')}
bind:value={searchQuery}
/>
</div>
{/if}
<div class="flex flex-col">
{#if filters.length > 0}
<div class=" flex items-center flex-wrap">
{#each filters as filter}
{#each filteredFilters as filter}
{@const isSelected = selectedFilterIds.includes(filter.id)}
<div class=" flex items-center gap-2 mr-3">
<div class="self-center flex items-center">

21
src/lib/components/workspace/Models/FiltersSelector.svelte
View file

@ -7,6 +7,14 @@
export let filters = [];
export let selectedFilterIds = [];
let searchQuery = '';
$: filteredFilters = filters.filter((filter) => {
if (!searchQuery.trim()) return true;
const q = searchQuery.toLowerCase();
return filter.name?.toLowerCase().includes(q) || filter.id?.toLowerCase().includes(q);
});
</script>
{#if filters.length > 0}
@ -15,10 +23,21 @@
<div class=" self-center text-xs font-medium text-gray-500">{$i18n.t('Filters')}</div>
</div>
{#if filters.length > 10}
<div class="mb-2">
<input
class="w-full text-sm bg-transparent outline-none border border-gray-100 dark:border-gray-800 rounded-lg px-3 py-1.5 placeholder-gray-400"
type="text"
placeholder={$i18n.t('Search filters...')}
bind:value={searchQuery}
/>
</div>
{/if}
<!-- TODO: Filter order matters -->
<div class="flex flex-col">
<div class=" flex items-center flex-wrap">
{#each filters as filter}
{#each filteredFilters as filter}
{@const isSelected = filter.is_global || selectedFilterIds.includes(filter.id)}
<div class=" flex items-center gap-2 mr-3">
<div class="self-center flex items-center">

20
src/lib/components/workspace/Models/ToolsSelector.svelte
View file

@ -6,6 +6,7 @@
export let tools = [];
let _tools = {};
let searchQuery = '';
export let selectedToolIds = [];
@ -21,6 +22,12 @@
return acc;
}, {});
});
$: filteredToolKeys = Object.keys(_tools).filter((id) => {
if (!searchQuery.trim()) return true;
const q = searchQuery.toLowerCase();
return _tools[id].name?.toLowerCase().includes(q) || _tools[id].id?.toLowerCase().includes(q);
});
</script>
<div>
@ -28,10 +35,21 @@
<div class=" self-center text-xs font-medium text-gray-500">{$i18n.t('Tools')}</div>
</div>
{#if Object.keys(_tools).length > 10}
<div class="mb-2">
<input
class="w-full text-sm bg-transparent outline-none border border-gray-100 dark:border-gray-800 rounded-lg px-3 py-1.5 placeholder-gray-400"
type="text"
placeholder={$i18n.t('Search tools...')}
bind:value={searchQuery}
/>
</div>
{/if}
<div class="flex flex-col mb-1">
{#if tools.length > 0}
<div class=" flex items-center flex-wrap">
{#each Object.keys(_tools) as tool, toolIdx}
{#each filteredToolKeys as tool, toolIdx}
<div class=" flex items-center gap-2 mr-3">
<div class="self-center flex items-center">
<Checkbox