OpenWebUI/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui synced 2025-05-31 11:00:49 +00:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

feat: add clear ("X") button to sidebar chat search input

Browse Source
This commit is contained in:
hurxxxx 2025-03-19 11:25:16 +09:00
parent b03fc97e28
commit 70610f8343
3 changed files with 20 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/lib/components/chat/SettingsModal.svelte
View File

@ -15,7 +15,6 @@
import Chats from './Settings/Chats.svelte'; import Chats from './Settings/Chats.svelte';
import User from '../icons/User.svelte'; import User from '../icons/User.svelte';
import Personalization from './Settings/Personalization.svelte'; import Personalization from './Settings/Personalization.svelte';
import SearchInput from '../layout/Sidebar/SearchInput.svelte';
import Search from '../icons/Search.svelte'; import Search from '../icons/Search.svelte';
import Connections from './Settings/Connections.svelte'; import Connections from './Settings/Connections.svelte';

1
src/lib/components/layout/Sidebar.svelte
View File

@ -611,6 +611,7 @@
bind:value={search} bind:value={search}
on:input={searchDebounceHandler} on:input={searchDebounceHandler}
placeholder={$i18n.t('Search')} placeholder={$i18n.t('Search')}
showClearButton={true}
/> />
</div> </div>

20
src/lib/components/layout/Sidebar/SearchInput.svelte
View File

@ -3,12 +3,14 @@
import { tags } from '$lib/stores'; import { tags } from '$lib/stores';
import { getContext, createEventDispatcher, onMount, onDestroy, tick } from 'svelte'; import { getContext, createEventDispatcher, onMount, onDestroy, tick } from 'svelte';
import { fade } from 'svelte/transition'; import { fade } from 'svelte/transition';
import XMark from '$lib/components/icons/XMark.svelte';
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
const i18n = getContext('i18n'); const i18n = getContext('i18n');
export let placeholder = ''; export let placeholder = '';
export let value = ''; export let value = '';
export let showClearButton = false;
let selectedIdx = 0; let selectedIdx = 0;
@ -59,6 +61,11 @@
loading = false; loading = false;
}; };
const clearSearchInput = () => {
value = '';
dispatch('input');
};
const documentClickHandler = (e) => { const documentClickHandler = (e) => {
const searchContainer = document.getElementById('search-container'); const searchContainer = document.getElementById('search-container');
const chatSearch = document.getElementById('chat-search'); const chatSearch = document.getElementById('chat-search');
@ -98,7 +105,7 @@
</div> </div>
<input <input
class="w-full rounded-r-xl py-1.5 pl-2.5 pr-4 text-sm bg-transparent dark:text-gray-300 outline-hidden" class="w-full rounded-r-xl py-1.5 pl-2.5 {showClearButton && value ? 'pr-8' : 'pr-4'} text-sm bg-transparent dark:text-gray-300 outline-hidden"
placeholder={placeholder ? placeholder : $i18n.t('Search')} placeholder={placeholder ? placeholder : $i18n.t('Search')}
bind:value bind:value
on:input={() => { on:input={() => {
@ -140,6 +147,17 @@
} }
}} }}
/> />
{#if showClearButton && value}
<div class="absolute right-2 top-1/2 -translate-y-1/2">
<button
class="p-0.5 rounded hover:bg-gray-100 dark:hover:bg-gray-900 transition"
on:click={clearSearchInput}
>
<XMark className="size-4" strokeWidth="2" />
</button>
</div>
{/if}
</div> </div>
{#if focused && (filteredOptions.length > 0 || filteredTags.length > 0)} {#if focused && (filteredOptions.length > 0 || filteredTags.length > 0)}