perf: Debounce various Database Endpoints for less Database Queries and better Backend performance (#20982)

* Update KnowledgeSelector.svelte

* Update KnowledgeSelector.svelte

* Update Users.svelte

* Update MemberSelector.svelte

* Update MemberSelector.svelte

* Update Knowledge.svelte

* Update Knowledge.svelte

* Update Notes.svelte

* Update Knowledge.svelte

* Update Prompts.svelte

* Update Tools.svelte

* Update Tools.svelte

* Update Prompts.svelte

* Update Prompts.svelte

* Update Prompts.svelte

* Update Functions.svelte

* Update UserList.svelte

* Update Functions.svelte

* Update Prompts.svelte

* Update UserList.svelte

src/lib/components/admin/Functions.svelte

@@ -4,7 +4,7 @@
 	const { saveAs } = fileSaver;
 
 	import { WEBUI_NAME, config, functions as _functions, models, settings, user } from '$lib/stores';
-	import { onMount, getContext, tick } from 'svelte';
+	import { onMount, getContext, tick, onDestroy } from 'svelte';
 
 	import { goto } from '$app/navigation';
 	import {
@@ -53,6 +53,7 @@
 	let viewOption = '';
 
 	let query = '';
+	let searchDebounceTimer: ReturnType<typeof setTimeout>;
 	let selectedTag = '';
 	let selectedType = '';
 
@@ -70,12 +71,14 @@
 	let functions = null;
 	let filteredItems = [];
 
-	$: if (
+	$: if (query !== undefined) {
-		functions &&
+		clearTimeout(searchDebounceTimer);
-		query !== undefined &&
+		searchDebounceTimer = setTimeout(() => {
-		selectedType !== undefined &&
+			setFilteredItems();
-		viewOption !== undefined
+		}, 300);
-	) {
+	}
+
+	$: if (functions && selectedType !== undefined && viewOption !== undefined) {
 		setFilteredItems();
 	}
 
@@ -239,6 +242,10 @@
 			window.removeEventListener('blur-sm', onBlur);
 		};
 	});
+
+	onDestroy(() => {
+		clearTimeout(searchDebounceTimer);
+	});
 </script>
 
 <svelte:head>

src/lib/components/admin/Users/Groups/Users.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { getContext } from 'svelte';
+	import { getContext, onDestroy } from 'svelte';
 	const i18n = getContext('i18n');
 
 	import dayjs from 'dayjs';
@@ -30,6 +30,7 @@
 	let total = null;
 
 	let query = '';
+	let searchDebounceTimer: ReturnType<typeof setTimeout>;
 	let orderBy = 'created_at'; // default sort key
 	let direction = 'desc'; // default sort order
 
@@ -79,13 +80,21 @@
 		getUserList();
 	};
 
-	$: if (page !== null && query !== null && orderBy !== null && direction !== null) {
+	$: if (page !== null && orderBy !== null && direction !== null) {
 		getUserList();
 	}
 
-	$: if (query) {
+	$: if (query !== undefined) {
-		page = 1;
+		clearTimeout(searchDebounceTimer);
+		searchDebounceTimer = setTimeout(() => {
+			page = 1;
+			getUserList();
+		}, 300);
 	}
+
+	onDestroy(() => {
+		clearTimeout(searchDebounceTimer);
+	});
 </script>
 
 <div class=" max-h-full h-full w-full flex flex-col overflow-y-hidden">

src/lib/components/admin/Users/UserList.svelte

@@ -2,7 +2,7 @@
 	import { WEBUI_API_BASE_URL, WEBUI_BASE_URL } from '$lib/constants';
 	import { WEBUI_NAME, config, user, showSidebar } from '$lib/stores';
 	import { goto } from '$app/navigation';
-	import { onMount, getContext } from 'svelte';
+	import { onMount, getContext, onDestroy } from 'svelte';
 
 	import dayjs from 'dayjs';
 	import relativeTime from 'dayjs/plugin/relativeTime';
@@ -43,6 +43,7 @@
 	let total = null;
 
 	let query = '';
+	let searchDebounceTimer: ReturnType<typeof setTimeout>;
 	let orderBy = 'created_at'; // default sort key
 	let direction = 'asc'; // default sort order
 
@@ -97,13 +98,21 @@
 		}
 	};
 
-	$: if (query) {
+	$: if (query !== undefined) {
-		page = 1;
+		clearTimeout(searchDebounceTimer);
+		searchDebounceTimer = setTimeout(() => {
+			page = 1;
+			getUserList();
+		}, 300);
 	}
 
-	$: if (query !== null && page !== null && orderBy !== null && direction !== null) {
+	$: if (page !== null && orderBy !== null && direction !== null) {
 		getUserList();
 	}
+
+	onDestroy(() => {
+		clearTimeout(searchDebounceTimer);
+	});
 </script>
 
 <ConfirmDialog

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

@@ -25,6 +25,7 @@
 
 	let selectedIdx = 0;
 	let items = [];
+	let searchDebounceTimer: ReturnType<typeof setTimeout>;
 
 	export let filteredItems = [];
 	$: filteredItems = [
@@ -69,10 +70,17 @@
 
 	$: items = [...folderItems, ...knowledgeItems, ...fileItems];
 
-	$: if (query !== null) {
+	$: if (query !== undefined) {
-		getItems();
+		clearTimeout(searchDebounceTimer);
+		searchDebounceTimer = setTimeout(() => {
+			getItems();
+		}, 200);
 	}
 
+	onDestroy(() => {
+		clearTimeout(searchDebounceTimer);
+	});
+
 	const getItems = () => {
 		getFolderItems();
 		getKnowledgeItems();

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

@@ -11,9 +11,22 @@
 
 	let selectedPromptIdx = 0;
 	export let filteredItems = [];
+	let searchDebounceTimer: ReturnType<typeof setTimeout>;
+	let debouncedQuery = '';
+
+	$: if (query !== undefined) {
+		clearTimeout(searchDebounceTimer);
+		searchDebounceTimer = setTimeout(() => {
+			debouncedQuery = query;
+		}, 200);
+	}
+
+	onDestroy(() => {
+		clearTimeout(searchDebounceTimer);
+	});
 
 	$: filteredItems = prompts
-		.filter((p) => p.command.toLowerCase().includes(query.toLowerCase()))
+		.filter((p) => p.command.toLowerCase().includes(debouncedQuery.toLowerCase()))
 		.sort((a, b) => a.name.localeCompare(b.name));
 
 	$: if (query) {

src/lib/components/notes/Notes.svelte

@@ -60,6 +60,7 @@
 	let total = null;
 
 	let query = '';
+	let searchDebounceTimer: ReturnType<typeof setTimeout>;
 
 	let sortKey = null;
 	let displayOption = null;
@@ -163,9 +164,17 @@
 		await getItemsPage();
 	};
 
+	$: if (query !== undefined) {
+		clearTimeout(searchDebounceTimer);
+		searchDebounceTimer = setTimeout(() => {
+			if (loaded) {
+				init();
+			}
+		}, 300);
+	}
+
 	$: if (
 		loaded &&
-		query !== undefined &&
 		sortKey !== undefined &&
 		permission !== undefined &&
 		viewOption !== undefined
@@ -283,6 +292,7 @@
 	});
 
 	onDestroy(() => {
+		clearTimeout(searchDebounceTimer);
 		console.log('destroy');
 		const dropzoneElement = document.getElementById('notes-container');
 

src/lib/components/workspace/Knowledge.svelte

@@ -4,7 +4,7 @@
 	dayjs.extend(relativeTime);
 
 	import { toast } from 'svelte-sonner';
-	import { onMount, getContext, tick } from 'svelte';
+	import { onMount, getContext, tick, onDestroy } from 'svelte';
 	const i18n = getContext('i18n');
 
 	import { WEBUI_NAME, knowledge, user } from '$lib/stores';
@@ -36,6 +36,7 @@
 
 	let page = 1;
 	let query = '';
+	let searchDebounceTimer: ReturnType<typeof setTimeout>;
 	let viewOption = '';
 
 	let items = null;
@@ -44,7 +45,20 @@
 	let allItemsLoaded = false;
 	let itemsLoading = false;
 
-	$: if (loaded && query !== undefined && viewOption !== undefined) {
+	$: if (query !== undefined) {
+		clearTimeout(searchDebounceTimer);
+		searchDebounceTimer = setTimeout(() => {
+			if (loaded) {
+				init();
+			}
+		}, 300);
+	}
+
+	onDestroy(() => {
+		clearTimeout(searchDebounceTimer);
+	});
+
+	$: if (loaded && viewOption !== undefined) {
 		init();
 	}
 

src/lib/components/workspace/Models/Knowledge/KnowledgeSelector.svelte

@@ -1,8 +1,7 @@
 <script lang="ts">
 	import dayjs from 'dayjs';
 	import { DropdownMenu } from 'bits-ui';
-	import { onMount, getContext, createEventDispatcher } from 'svelte';
+	import { onMount, onDestroy, getContext, createEventDispatcher } from 'svelte';
-
 	import { searchNotes } from '$lib/apis/notes';
 	import { searchKnowledgeBases, searchKnowledgeFiles } from '$lib/apis/knowledge';
 
@@ -26,6 +25,7 @@
 	let show = false;
 
 	let query = '';
+	let searchDebounceTimer: ReturnType<typeof setTimeout>;
 
 	let noteItems = [];
 	let knowledgeItems = [];
@@ -35,10 +35,17 @@
 
 	$: items = [...noteItems, ...knowledgeItems, ...fileItems];
 
-	$: if (query !== null) {
+	$: if (query !== undefined) {
-		getItems();
+		clearTimeout(searchDebounceTimer);
+		searchDebounceTimer = setTimeout(() => {
+			getItems();
+		}, 300);
 	}
 
+	onDestroy(() => {
+		clearTimeout(searchDebounceTimer);
+	});
+
 	const getItems = () => {
 		getNoteItems();
 		getKnowledgeItems();

src/lib/components/workspace/Prompts.svelte

@@ -4,7 +4,7 @@
 	const { saveAs } = fileSaver;
 
 	import { goto } from '$app/navigation';
-	import { onMount, getContext, tick } from 'svelte';
+	import { onMount, getContext, tick, onDestroy } from 'svelte';
 	import { WEBUI_NAME, config, prompts as _prompts, user } from '$lib/stores';
 
 	import {
@@ -32,6 +32,7 @@
 	import TagSelector from './common/TagSelector.svelte';
 	import Badge from '$lib/components/common/Badge.svelte';
 	import Pagination from '../common/Pagination.svelte';
+  
 	let shiftKey = false;
 
 	const i18n = getContext('i18n');
@@ -40,6 +41,7 @@
 
 	let importFiles = null;
 	let query = '';
+	let searchDebounceTimer: ReturnType<typeof setTimeout>;
 
 	let prompts = null;
 	let tags = [];
@@ -55,7 +57,6 @@
 	let copiedId: string | null = null;
 
 	let page = 1;
-	let searchDebounceTimer;
 
 	// Debounce only query changes
 	$: if (query !== undefined) {
@@ -195,11 +196,16 @@
 		window.addEventListener('blur', onBlur);
 
 		return () => {
+			clearTimeout(searchDebounceTimer);
 			window.removeEventListener('keydown', onKeyDown);
 			window.removeEventListener('keyup', onKeyUp);
 			window.removeEventListener('blur', onBlur);
 		};
 	});
+
+	onDestroy(() => {
+		clearTimeout(searchDebounceTimer);
+	});
 </script>
 
 <svelte:head>

src/lib/components/workspace/Tools.svelte

@@ -3,7 +3,7 @@
 	import fileSaver from 'file-saver';
 	const { saveAs } = fileSaver;
 
-	import { onMount, getContext, tick } from 'svelte';
+	import { onMount, getContext, tick, onDestroy } from 'svelte';
 	const i18n = getContext('i18n');
 
 	import { WEBUI_NAME, config, prompts, tools as _tools, user } from '$lib/stores';
@@ -47,6 +47,7 @@
 
 	let showConfirm = false;
 	let query = '';
+	let searchDebounceTimer: ReturnType<typeof setTimeout>;
 
 	let showManifestModal = false;
 	let showValvesModal = false;
@@ -62,7 +63,14 @@
 
 	let showImportModal = false;
 
-	$: if (tools && query !== undefined && viewOption !== undefined) {
+	$: if (query !== undefined) {
+		clearTimeout(searchDebounceTimer);
+		searchDebounceTimer = setTimeout(() => {
+			setFilteredItems();
+		}, 300);
+	}
+
+	$: if (tools && viewOption !== undefined) {
 		setFilteredItems();
 	}
 
@@ -179,11 +187,16 @@
 		window.addEventListener('blur-sm', onBlur);
 
 		return () => {
+			clearTimeout(searchDebounceTimer);
 			window.removeEventListener('keydown', onKeyDown);
 			window.removeEventListener('keyup', onKeyUp);
 			window.removeEventListener('blur-sm', onBlur);
 		};
 	});
+
+	onDestroy(() => {
+		clearTimeout(searchDebounceTimer);
+	});
 </script>
 
 <svelte:head>

src/lib/components/workspace/common/MemberSelector.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { toast } from 'svelte-sonner';
-	import { getContext, onMount } from 'svelte';
+	import { getContext, onMount, onDestroy } from 'svelte';
 
 	const i18n = getContext('i18n');
 
@@ -39,6 +39,7 @@
 	let total = null;
 
 	let query = '';
+	let searchDebounceTimer: ReturnType<typeof setTimeout>;
 	let orderBy = 'name'; // default sort key
 	let direction = 'asc'; // default sort order
 
@@ -60,7 +61,18 @@
 		}
 	};
 
-	$: if (page !== null && query !== null && orderBy !== null && direction !== null) {
+	$: if (query !== undefined) {
+		clearTimeout(searchDebounceTimer);
+		searchDebounceTimer = setTimeout(() => {
+			getUserList();
+		}, 300);
+	}
+
+	onDestroy(() => {
+		clearTimeout(searchDebounceTimer);
+	});
+
+	$: if (page !== null && orderBy !== null && direction !== null) {
 		getUserList();
 	}