OpenWebUI/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui synced 2025-06-16 03:14:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

enh: workspace search clear button

Browse Source 
Co-Authored-By: silentoplayz <50341825+silentoplayz@users.noreply.github.com>
This commit is contained in:
Timothy Jaeryang Baek 2025-05-19 02:36:15 +04:00
parent 3af289d196
commit aee9d05916
4 changed files with 61 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/lib/components/workspace/Knowledge.svelte
View File

@ -26,6 +26,7 @@
import Spinner from '../common/Spinner.svelte';
import { capitalizeFirstLetter } from '$lib/utils';
import Tooltip from '../common/Tooltip.svelte';
import XMark from '../icons/XMark.svelte';
let loaded = false;
@ -115,6 +116,18 @@
bind:value={query}
placeholder={$i18n.t('Search Knowledge')}
/>
{#if query}
<div class="self-center pl-1.5 translate-y-[0.5px] rounded-l-xl bg-transparent">
<button
class="p-0.5 rounded-full hover:bg-gray-100 dark:hover:bg-gray-900 transition"
on:click={() => {
query = '';
}}
>
<XMark className="size-3" strokeWidth="2" />
</button>
</div>
{/if}
</div>
<div>

28
src/lib/components/workspace/Models.svelte
View File

@ -34,6 +34,7 @@
import Switch from '../common/Switch.svelte';
import Spinner from '../common/Spinner.svelte';
import { capitalizeFirstLetter } from '$lib/utils';
import XMark from '../icons/XMark.svelte';
let shiftKey = false;
@ -52,17 +53,17 @@
$: if (models) {
filteredModels = models.filter((m) => {
if (searchValue === '') return true;
const lowerSearchValue = searchValue.toLowerCase();
if (query === '') return true;
const lowerQuery = query.toLowerCase();
return (
(m.name || '').toLowerCase().includes(lowerSearchValue) ||
(m.user?.name || '').toLowerCase().includes(lowerSearchValue) || // Search by user name
(m.user?.email || '').toLowerCase().includes(lowerSearchValue) // Search by user email
(m.name || '').toLowerCase().includes(lowerQuery) ||
(m.user?.name || '').toLowerCase().includes(lowerQuery) || // Search by user name
(m.user?.email || '').toLowerCase().includes(lowerQuery) // Search by user email
);
});
}
let searchValue = '';
let query = '';
const deleteModelHandler = async (model) => {
const res = await deleteModelById(localStorage.token, model.id).catch((e) => {
@ -232,9 +233,22 @@
</div>
<input
class=" w-full text-sm py-1 rounded-r-xl outline-hidden bg-transparent"
bind:value={searchValue}
bind:value={query}
placeholder={$i18n.t('Search Models')}
/>
{#if query}
<div class="self-center pl-1.5 translate-y-[0.5px] rounded-l-xl bg-transparent">
<button
class="p-0.5 rounded-full hover:bg-gray-100 dark:hover:bg-gray-900 transition"
on:click={() => {
query = '';
}}
>
<XMark className="size-3" strokeWidth="2" />
</button>
</div>
{/if}
</div>
<div>

14
src/lib/components/workspace/Prompts.svelte
View File

@ -23,6 +23,7 @@
import Spinner from '../common/Spinner.svelte';
import Tooltip from '../common/Tooltip.svelte';
import { capitalizeFirstLetter } from '$lib/utils';
import XMark from '../icons/XMark.svelte';
const i18n = getContext('i18n');
let promptsImportInputElement: HTMLInputElement;
@ -135,6 +136,19 @@
bind:value={query}
placeholder={$i18n.t('Search Prompts')}
/>
{#if query}
<div class="self-center pl-1.5 translate-y-[0.5px] rounded-l-xl bg-transparent">
<button
class="p-0.5 rounded-full hover:bg-gray-100 dark:hover:bg-gray-900 transition"
on:click={() => {
query = '';
}}
>
<XMark className="size-3" strokeWidth="2" />
</button>
</div>
{/if}
</div>
<div>

13
src/lib/components/workspace/Tools.svelte
View File

@ -31,6 +31,7 @@
import ChevronRight from '../icons/ChevronRight.svelte';
import Spinner from '../common/Spinner.svelte';
import { capitalizeFirstLetter } from '$lib/utils';
import XMark from '../icons/XMark.svelte';
const i18n = getContext('i18n');
@ -194,6 +195,18 @@
bind:value={query}
placeholder={$i18n.t('Search Tools')}
/>
{#if query}
<div class="self-center pl-1.5 translate-y-[0.5px] rounded-l-xl bg-transparent">
<button
class="p-0.5 rounded-full hover:bg-gray-100 dark:hover:bg-gray-900 transition"
on:click={() => {
query = '';
}}
>
<XMark className="size-3" strokeWidth="2" />
</button>
</div>
{/if}
</div>
<div>