diff --git a/src/lib/components/chat/SettingsModal.svelte b/src/lib/components/chat/SettingsModal.svelte index 20d70505f..7d32a9718 100644 --- a/src/lib/components/chat/SettingsModal.svelte +++ b/src/lib/components/chat/SettingsModal.svelte @@ -15,7 +15,6 @@ import Chats from './Settings/Chats.svelte'; import User from '../icons/User.svelte'; import Personalization from './Settings/Personalization.svelte'; - import SearchInput from '../layout/Sidebar/SearchInput.svelte'; import Search from '../icons/Search.svelte'; import Connections from './Settings/Connections.svelte'; diff --git a/src/lib/components/layout/Sidebar.svelte b/src/lib/components/layout/Sidebar.svelte index 0ab13e6ad..4bd48ef18 100644 --- a/src/lib/components/layout/Sidebar.svelte +++ b/src/lib/components/layout/Sidebar.svelte @@ -611,6 +611,7 @@ bind:value={search} on:input={searchDebounceHandler} placeholder={$i18n.t('Search')} + showClearButton={true} /> diff --git a/src/lib/components/layout/Sidebar/SearchInput.svelte b/src/lib/components/layout/Sidebar/SearchInput.svelte index eddc5b069..c1438cede 100644 --- a/src/lib/components/layout/Sidebar/SearchInput.svelte +++ b/src/lib/components/layout/Sidebar/SearchInput.svelte @@ -3,12 +3,14 @@ import { tags } from '$lib/stores'; import { getContext, createEventDispatcher, onMount, onDestroy, tick } from 'svelte'; import { fade } from 'svelte/transition'; + import XMark from '$lib/components/icons/XMark.svelte'; const dispatch = createEventDispatcher(); const i18n = getContext('i18n'); export let placeholder = ''; export let value = ''; + export let showClearButton = false; let selectedIdx = 0; @@ -59,6 +61,11 @@ loading = false; }; + const clearSearchInput = () => { + value = ''; + dispatch('input'); + }; + const documentClickHandler = (e) => { const searchContainer = document.getElementById('search-container'); const chatSearch = document.getElementById('chat-search'); @@ -98,7 +105,7 @@ { @@ -140,6 +147,17 @@ } }} /> + + {#if showClearButton && value} +