refac

backend/open_webui/models/skills.py

@@ -96,6 +96,11 @@ class SkillForm(BaseModel):
 
 
 class SkillListResponse(BaseModel):
+    items: list[SkillUserResponse] = []
+    total: int = 0
+
+
+class SkillAccessListResponse(BaseModel):
     items: list[SkillAccessResponse] = []
     total: int = 0
 
@@ -208,81 +213,77 @@ class SkillsTable:
     def search_skills(
         self,
         user_id: str,
-        filter: dict,
+        filter: dict = {},
         skip: int = 0,
         limit: int = 30,
         db: Optional[Session] = None,
     ) -> SkillListResponse:
         try:
             with get_db_context(db) as db:
-                query = db.query(Skill)
+                from open_webui.models.users import User, UserModel
 
-                query_key = filter.get("query")
+                # Join with User table for user filtering
-                if query_key:
+                query = db.query(Skill, User).outerjoin(
-                    query = query.filter(
+                    User, User.id == Skill.user_id
-                        or_(
+                )
-                            Skill.name.ilike(f"%{query_key}%"),
+
-                            Skill.description.ilike(f"%{query_key}%"),
+                if filter:
-                            Skill.id.ilike(f"%{query_key}%"),
+                    query_key = filter.get("query")
+                    if query_key:
+                        query = query.filter(
+                            or_(
+                                Skill.name.ilike(f"%{query_key}%"),
+                                Skill.description.ilike(f"%{query_key}%"),
+                                Skill.id.ilike(f"%{query_key}%"),
+                                User.name.ilike(f"%{query_key}%"),
+                                User.email.ilike(f"%{query_key}%"),
+                            )
                         )
-                    )
 
-                # Only active skills
+                    view_option = filter.get("view_option")
-                query = query.filter(Skill.is_active == True)
+                    if view_option == "created":
+                        query = query.filter(Skill.user_id == user_id)
+                    elif view_option == "shared":
+                        query = query.filter(Skill.user_id != user_id)
+
+                    # Apply access grant filtering
+                    query = AccessGrants.has_permission_filter(
+                        db=db,
+                        query=query,
+                        DocumentModel=Skill,
+                        filter=filter,
+                        resource_type="skill",
+                        permission="read",
+                    )
 
                 query = query.order_by(Skill.updated_at.desc())
 
-                # Apply access control if not admin bypass
+                # Count BEFORE pagination
-                if "user_id" in filter:
+                total = query.count()
-                    user_group_ids = {
-                        group.id
-                        for group in Groups.get_groups_by_member_id(
-                            filter["user_id"], db=db
-                        )
-                    }
-                    all_results = query.all()
-                    accessible = [
-                        s
-                        for s in all_results
-                        if s.user_id == filter["user_id"]
-                        or AccessGrants.has_access(
-                            user_id=filter["user_id"],
-                            resource_type="skill",
-                            resource_id=s.id,
-                            permission="read",
-                            user_group_ids=user_group_ids,
-                            db=db,
-                        )
-                    ]
-                    total = len(accessible)
-                    items = accessible[skip : skip + limit] if limit else accessible[skip:]
-                else:
-                    total = query.count()
-                    if skip:
-                        query = query.offset(skip)
-                    if limit:
-                        query = query.limit(limit)
-                    items = query.all()
 
-                user_ids = list(set(s.user_id for s in items))
+                if skip:
-                users = Users.get_users_by_user_ids(user_ids, db=db) if user_ids else []
+                    query = query.offset(skip)
-                users_dict = {u.id: u for u in users}
+                if limit:
+                    query = query.limit(limit)
 
-                skill_responses = []
+                items = query.all()
-                for skill in items:
+
-                    user = users_dict.get(skill.user_id)
+                skills = []
-                    skill_model = self._to_skill_model(skill, db=db)
+                for skill, user in items:
-                    skill_responses.append(
+                    skills.append(
-                        SkillAccessResponse(
+                        SkillUserResponse(
-                            **SkillUserResponse(
+                            **self._to_skill_model(skill, db=db).model_dump(),
-                                **skill_model.model_dump(),
+                            user=(
-                                user=user.model_dump() if user else None,
+                                UserResponse(
-                            ).model_dump(),
+                                    **UserModel.model_validate(user).model_dump()
-                            write_access=False,
+                                )
+                                if user
+                                else None
+                            ),
                         )
                     )
 
-                return SkillListResponse(items=skill_responses, total=total)
+                return SkillListResponse(items=skills, total=total)
         except Exception as e:
             log.exception(f"Error searching skills: {e}")
             return SkillListResponse(items=[], total=0)

backend/open_webui/routers/skills.py

@@ -14,7 +14,7 @@ from open_webui.models.skills import (
     SkillResponse,
     SkillUserResponse,
     SkillAccessResponse,
-    SkillListResponse,
+    SkillAccessListResponse,
     Skills,
 )
 from open_webui.models.access_grants import AccessGrants
@@ -72,62 +72,56 @@ async def get_skills(
 ############################
 
 
-@router.get("/list", response_model=list[SkillAccessResponse])
+@router.get("/list", response_model=SkillAccessListResponse)
 async def get_skill_list(
-    user=Depends(get_verified_user), db: Session = Depends(get_session)
-):
-    if user.role == "admin" and BYPASS_ADMIN_ACCESS_CONTROL:
-        skills = Skills.get_skills(db=db)
-    else:
-        skills = Skills.get_skills_by_user_id(user.id, "read", db=db)
-
-    return [
-        SkillAccessResponse(
-            **skill.model_dump(),
-            write_access=(
-                (user.role == "admin" and BYPASS_ADMIN_ACCESS_CONTROL)
-                or user.id == skill.user_id
-                or AccessGrants.has_access(
-                    user_id=user.id,
-                    resource_type="skill",
-                    resource_id=skill.id,
-                    permission="write",
-                    db=db,
-                )
-            ),
-        )
-        for skill in skills
-    ]
-
-
-############################
-# SearchSkills
-############################
-
-
-@router.get("/search", response_model=SkillListResponse)
-async def search_skills(
     query: Optional[str] = None,
+    view_option: Optional[str] = None,
     page: Optional[int] = 1,
     user=Depends(get_verified_user),
     db: Session = Depends(get_session),
 ):
-    page = max(page, 1)
     limit = PAGE_ITEM_COUNT
+
+    page = max(1, page)
     skip = (page - 1) * limit
 
     filter = {}
     if query:
         filter["query"] = query
+    if view_option:
+        filter["view_option"] = view_option
 
     if not (user.role == "admin" and BYPASS_ADMIN_ACCESS_CONTROL):
+        groups = Groups.get_groups_by_member_id(user.id, db=db)
+        if groups:
+            filter["group_ids"] = [group.id for group in groups]
+
         filter["user_id"] = user.id
 
     result = Skills.search_skills(
         user.id, filter=filter, skip=skip, limit=limit, db=db
     )
 
-    return result
+    return SkillAccessListResponse(
+        items=[
+            SkillAccessResponse(
+                **skill.model_dump(),
+                write_access=(
+                    (user.role == "admin" and BYPASS_ADMIN_ACCESS_CONTROL)
+                    or user.id == skill.user_id
+                    or AccessGrants.has_access(
+                        user_id=user.id,
+                        resource_type="skill",
+                        resource_id=skill.id,
+                        permission="write",
+                        db=db,
+                    )
+                ),
+            )
+            for skill in result.items
+        ],
+        total=result.total,
+    )
 
 
 ############################

src/lib/apis/skills/index.ts

@@ -93,18 +93,20 @@ export const getSkillList = async (token: string = '') => {
 	return res;
 };
 
-export const searchSkills = async (
+export const getSkillItems = async (
 	token: string = '',
 	query: string | null = null,
+	viewOption: string | null = null,
 	page: number | null = null
 ) => {
 	let error = null;
 
 	const searchParams = new URLSearchParams();
 	if (query) searchParams.append('query', query);
+	if (viewOption) searchParams.append('view_option', viewOption);
 	if (page) searchParams.append('page', page.toString());
 
-	const res = await fetch(`${WEBUI_API_BASE_URL}/skills/search?${searchParams.toString()}`, {
+	const res = await fetch(`${WEBUI_API_BASE_URL}/skills/list?${searchParams.toString()}`, {
 		method: 'GET',
 		headers: {
 			Accept: 'application/json',
@@ -120,7 +122,7 @@ export const searchSkills = async (
 			return json;
 		})
 		.catch((err) => {
-			error = err.detail;
+			error = err;
 			console.error(err);
 			return null;
 		});

src/lib/components/chat/MessageInput/Commands/Skills.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { getContext, onDestroy } from 'svelte';
-	import { searchSkills } from '$lib/apis/skills';
+	import { getSkillItems } from '$lib/apis/skills';
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
 	import Keyframes from '$lib/components/icons/Keyframes.svelte';
 
@@ -26,7 +26,7 @@
 	});
 
 	const getItems = async () => {
-		const res = await searchSkills(localStorage.token, query).catch(() => null);
+		const res = await getSkillItems(localStorage.token, query).catch(() => null);
 		if (res) {
 			filteredItems = res.items;
 		}

src/lib/components/workspace/Skills.svelte

@@ -10,8 +10,8 @@
 	import { goto } from '$app/navigation';
 	import {
 		getSkills,
-		getSkillList,
 		getSkillById,
+		getSkillItems,
 		exportSkills,
 		deleteSkillById,
 		toggleSkillById
@@ -32,6 +32,7 @@
 	import Badge from '$lib/components/common/Badge.svelte';
 	import Switch from '../common/Switch.svelte';
 	import SkillMenu from './Skills/SkillMenu.svelte';
+	import Pagination from '../common/Pagination.svelte';
 
 	let shiftKey = false;
 	let loaded = false;
@@ -45,38 +46,53 @@
 	let selectedSkill = null;
 	let showDeleteConfirm = false;
 
-	let skills = [];
+	let filteredItems = null;
-	let filteredItems = [];
+	let total = null;
+	let loading = false;
 
 	let tagsContainerElement: HTMLDivElement;
 	let viewOption = '';
+	let page = 1;
 
+	// Debounce only query changes
 	$: if (query !== undefined) {
+		loading = true;
 		clearTimeout(searchDebounceTimer);
 		searchDebounceTimer = setTimeout(() => {
-			setFilteredItems();
+			page = 1;
+			getSkillItems();
 		}, 300);
 	}
 
-	$: if (skills && viewOption !== undefined) {
+	// Immediate response to page/filter changes
-		setFilteredItems();
+	$: if (page && viewOption !== undefined) {
+		getSkillItems();
 	}
 
-	const setFilteredItems = () => {
+	const getSkillItems = async () => {
-		filteredItems = skills.filter((s) => {
+		if (!loaded) return;
-			if (query === '' && viewOption === '') return true;
+
-			const lowerQuery = query.toLowerCase();
+		loading = true;
-			return (
+		try {
-				((s.name || '').toLowerCase().includes(lowerQuery) ||
+			const res = await getSkillItems(
-					(s.id || '').toLowerCase().includes(lowerQuery) ||
+				localStorage.token,
-					(s.description || '').toLowerCase().includes(lowerQuery) ||
+				query,
-					(s.user?.name || '').toLowerCase().includes(lowerQuery) ||
+				viewOption,
-					(s.user?.email || '').toLowerCase().includes(lowerQuery)) &&
+				page
-				(viewOption === '' ||
+			).catch((error) => {
-					(viewOption === 'created' && s.user_id === $user?.id) ||
+				toast.error(`${error}`);
-					(viewOption === 'shared' && s.user_id !== $user?.id))
+				return null;
-			);
+			});
-		});
+
+			if (res) {
+				filteredItems = res.items;
+				total = res.total;
+			}
+		} catch (err) {
+			console.error(err);
+		} finally {
+			loading = false;
+		}
 	};
 
 	const cloneHandler = async (skill) => {
@@ -117,18 +133,15 @@
 
 		if (res) {
 			toast.success($i18n.t('Skill deleted successfully'));
-			await init();
 		}
-	};
 
-	const init = async () => {
+		page = 1;
-		skills = await getSkillList(localStorage.token);
+		getSkillItems();
-		_skills.set(await getSkills(localStorage.token));
+		await _skills.set(await getSkills(localStorage.token));
 	};
 
 	onMount(async () => {
 		viewOption = localStorage?.workspaceViewOption || '';
-		await init();
 		loaded = true;
 
 		const onKeyDown = (event) => {
@@ -179,7 +192,7 @@
 				</div>
 
 				<div class="text-lg font-medium text-gray-500 dark:text-gray-500">
-					{filteredItems.length}
+					{total ?? ''}
 				</div>
 			</div>
 
@@ -229,7 +242,7 @@
 					</button>
 				{/if}
 
-				{#if skills.length && ($user?.role === 'admin' || $user?.permissions?.workspace?.skills)}
+				{#if total && ($user?.role === 'admin' || $user?.permissions?.workspace?.skills)}
 					<button
 						class="flex text-xs items-center space-x-1 px-3 py-1.5 rounded-xl bg-gray-50 hover:bg-gray-100 dark:bg-gray-850 dark:hover:bg-gray-800 dark:text-gray-200 transition"
 						on:click={async () => {
@@ -312,13 +325,18 @@
 					bind:value={viewOption}
 					onChange={async (value) => {
 						localStorage.workspaceViewOption = value;
+						page = 1;
 						await tick();
 					}}
 				/>
 			</div>
 		</div>
 
-		{#if (filteredItems ?? []).length !== 0}
+		{#if filteredItems === null || loading}
+			<div class="w-full h-full flex justify-center items-center my-16 mb-24">
+				<Spinner className="size-5" />
+			</div>
+		{:else if (filteredItems ?? []).length !== 0}
 			<div class=" my-2 gap-2 grid px-3 lg:grid-cols-2">
 				{#each filteredItems as skill}
 					<Tooltip content={skill?.description ?? skill?.id}>
@@ -458,6 +476,12 @@
 					</Tooltip>
 				{/each}
 			</div>
+
+			{#if total > 30}
+				<div class="flex justify-center mt-4 mb-2">
+					<Pagination bind:page count={total} perPage={30} />
+				</div>
+			{/if}
 		{:else}
 			<div class=" w-full h-full flex flex-col justify-center items-center my-16 mb-24">
 				<div class="max-w-md text-center">