refac

src/lib/components/workspace/Models/ModelEditor.svelte

@@ -6,6 +6,7 @@
 	import { WEBUI_BASE_URL, DEFAULT_CAPABILITIES } from '$lib/constants';
 
 	import { getTools } from '$lib/apis/tools';
+	import { getSkills } from '$lib/apis/skills';
 	import { getFunctions } from '$lib/apis/functions';
 	import { getModelsDefaults } from '$lib/apis/configs';
 
@@ -93,6 +94,7 @@
 	let knowledge = [];
 	let toolIds = [];
 	let skillIds = [];
+	let skillsList = [];
 
 	let filterIds = [];
 	let defaultFilterIds = [];
@@ -248,6 +250,7 @@
 
 	onMount(async () => {
 		await tools.set(await getTools(localStorage.token));
+		skillsList = (await getSkills(localStorage.token).catch(() => null)) ?? [];
 		await functions.set(await getFunctions(localStorage.token));
 
 		// Fetch admin-configured default model metadata so the editor
@@ -771,7 +774,7 @@
 					</div>
 
 					<div class="my-4">
-						<SkillsSelector bind:selectedSkillIds={skillIds} />
+						<SkillsSelector bind:selectedSkillIds={skillIds} skills={skillsList} />
 					</div>
 
 					{#if ($functions ?? []).filter((func) => func.type === 'filter').length > 0 || ($functions ?? []).filter((func) => func.type === 'action').length > 0}

src/lib/components/workspace/Models/SkillsSelector.svelte

@@ -3,18 +3,25 @@
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
 	import { getContext, onMount } from 'svelte';
 
-	import { getSkillItems } from '$lib/apis/skills';
+	export let skills = [];
+
+	let _skills = {};
+	let searchQuery = '';
 
 	export let selectedSkillIds: string[] = [];
 
-	let _skills: Record<string, any> = {};
-
 	const i18n = getContext('i18n');
 
-	onMount(async () => {
+	$: filteredSkillKeys = Object.keys(_skills).filter((id) => {
-		const res = await getSkillItems(localStorage.token).catch(() => null);
+		if (!searchQuery.trim()) return true;
-		const skills = res?.items ?? [];
+		const q = searchQuery.toLowerCase();
-		_skills = skills.reduce((acc: Record<string, any>, skill: any) => {
+		return (
+			_skills[id].name?.toLowerCase().includes(q) || _skills[id].id?.toLowerCase().includes(q)
+		);
+	});
+
+	onMount(() => {
+		_skills = skills.reduce((acc, skill) => {
 			acc[skill.id] = {
 				...skill,
 				selected: selectedSkillIds.includes(skill.id)
@@ -30,10 +37,21 @@
 		<div class=" self-center text-xs font-medium text-gray-500">{$i18n.t('Skills')}</div>
 	</div>
 
+	{#if Object.keys(_skills).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 skills...')}
+				bind:value={searchQuery}
+			/>
+		</div>
+	{/if}
+
 	<div class="flex flex-col mb-1">
-		{#if Object.keys(_skills).length > 0}
+		{#if skills.length > 0}
 			<div class=" flex items-center flex-wrap">
-				{#each Object.keys(_skills) as skill, skillIdx}
+				{#each filteredSkillKeys as skill, skillIdx}
 					<div class=" flex items-center gap-2 mr-3">
 						<div class="self-center flex items-center">
 							<Checkbox