From 21465278630e9ee2f964de09d196d021dcb0edf0 Mon Sep 17 00:00:00 2001
From: silentoplayz <jacwoo21@outlook.com>
Date: Thu, 4 Jun 2026 05:41:18 -0400
Subject: [PATCH] feat(ui): add search to tools, filters, and actions selectors
 in model editor

---
 .../workspace/Models/ActionsSelector.svelte   | 22 ++++++++++++++++++-
 .../Models/DefaultFiltersSelector.svelte      | 21 +++++++++++++++++-
 .../workspace/Models/FiltersSelector.svelte   | 21 +++++++++++++++++-
 .../workspace/Models/ToolsSelector.svelte     | 20 ++++++++++++++++-
 4 files changed, 80 insertions(+), 4 deletions(-)

diff --git a/src/lib/components/workspace/Models/ActionsSelector.svelte b/src/lib/components/workspace/Models/ActionsSelector.svelte
index 444b5476fe..72b5baf95c 100644
--- a/src/lib/components/workspace/Models/ActionsSelector.svelte
+++ b/src/lib/components/workspace/Models/ActionsSelector.svelte
@@ -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
diff --git a/src/lib/components/workspace/Models/DefaultFiltersSelector.svelte b/src/lib/components/workspace/Models/DefaultFiltersSelector.svelte
index 8828a17ffa..753c505bfd 100644
--- a/src/lib/components/workspace/Models/DefaultFiltersSelector.svelte
+++ b/src/lib/components/workspace/Models/DefaultFiltersSelector.svelte
@@ -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">
diff --git a/src/lib/components/workspace/Models/FiltersSelector.svelte b/src/lib/components/workspace/Models/FiltersSelector.svelte
index 7432107daf..b2fea187fe 100644
--- a/src/lib/components/workspace/Models/FiltersSelector.svelte
+++ b/src/lib/components/workspace/Models/FiltersSelector.svelte
@@ -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">
diff --git a/src/lib/components/workspace/Models/ToolsSelector.svelte b/src/lib/components/workspace/Models/ToolsSelector.svelte
index bbc484f907..6cc6d73555 100644
--- a/src/lib/components/workspace/Models/ToolsSelector.svelte
+++ b/src/lib/components/workspace/Models/ToolsSelector.svelte
@@ -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