From aee9d05916f2011ba449e2d1d8ccebfc8a83e4a3 Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Mon, 19 May 2025 02:36:15 +0400
Subject: [PATCH] enh: workspace search clear button

Co-Authored-By: silentoplayz <50341825+silentoplayz@users.noreply.github.com>
---
 src/lib/components/workspace/Knowledge.svelte | 13 +++++++++
 src/lib/components/workspace/Models.svelte    | 28 ++++++++++++++-----
 src/lib/components/workspace/Prompts.svelte   | 14 ++++++++++
 src/lib/components/workspace/Tools.svelte     | 13 +++++++++
 4 files changed, 61 insertions(+), 7 deletions(-)

diff --git a/src/lib/components/workspace/Knowledge.svelte b/src/lib/components/workspace/Knowledge.svelte
index 5b94e8214..b7c904fd8 100644
--- a/src/lib/components/workspace/Knowledge.svelte
+++ b/src/lib/components/workspace/Knowledge.svelte
@@ -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>
diff --git a/src/lib/components/workspace/Models.svelte b/src/lib/components/workspace/Models.svelte
index 3f478e530..09cf86658 100644
--- a/src/lib/components/workspace/Models.svelte
+++ b/src/lib/components/workspace/Models.svelte
@@ -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>
diff --git a/src/lib/components/workspace/Prompts.svelte b/src/lib/components/workspace/Prompts.svelte
index 23c50a9d3..ae01d7c7c 100644
--- a/src/lib/components/workspace/Prompts.svelte
+++ b/src/lib/components/workspace/Prompts.svelte
@@ -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>
diff --git a/src/lib/components/workspace/Tools.svelte b/src/lib/components/workspace/Tools.svelte
index 05dfc213a..1aae63791 100644
--- a/src/lib/components/workspace/Tools.svelte
+++ b/src/lib/components/workspace/Tools.svelte
@@ -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>