refac: lazy load prompts/tools/functions/tags

src/lib/components/chat/Controls/Valves.svelte

@@ -7,12 +7,14 @@
 	import {
 		getUserValvesSpecById as getToolUserValvesSpecById,
 		getUserValvesById as getToolUserValvesById,
-		updateUserValvesById as updateToolUserValvesById
+		updateUserValvesById as updateToolUserValvesById,
+		getTools
 	} from '$lib/apis/tools';
 	import {
 		getUserValvesSpecById as getFunctionUserValvesSpecById,
 		getUserValvesById as getFunctionUserValvesById,
-		updateUserValvesById as updateFunctionUserValvesById
+		updateUserValvesById as updateFunctionUserValvesById,
+		getFunctions
 	} from '$lib/apis/functions';
 
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
@@ -112,8 +114,22 @@
 	$: if (selectedId) {
 		getUserValves();
 	}
+
+	onMount(async () => {
+		loading = true;
+
+		if ($functions.length === 0) {
+			functions.set(await getFunctions(localStorage.token));
+		}
+		if ($tools.length === 0) {
+			tools.set(await getTools(localStorage.token));
+		}
+
+		loading = false;
+	});
 </script>
 
+{#if !loading}
 	<form
 		class="flex flex-col h-full justify-between space-y-3 text-sm"
 		on:submit|preventDefault={() => {
@@ -186,3 +202,6 @@
 			{/if}
 		</div>
 	</form>
+{:else}
+	<Spinner className="size-6" />
+{/if}

src/lib/components/chat/MessageInput.svelte

@@ -519,16 +519,7 @@
 									<InputMenu
 										bind:webSearchEnabled
 										bind:selectedToolIds
-										tools={$tools.reduce((a, e, i, arr) => {
-											if (availableToolIds.includes(e.id) || ($_user?.role ?? 'user') === 'admin') {
-												a[e.id] = {
-													name: e.name,
-													description: e.meta.description,
-													enabled: false
-												};
-											}
-											return a;
-										}, {})}
+										{availableToolIds}
 										uploadFilesHandler={() => {
 											filesInputElement.click();
 										}}

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

@@ -1,19 +1,24 @@
 <script>
-	import { createEventDispatcher } from 'svelte';
+	import { createEventDispatcher, onMount } from 'svelte';
 	import { toast } from 'svelte-sonner';
 
 	const dispatch = createEventDispatcher();
 
+	import { knowledge, prompts } from '$lib/stores';
+
+	import { removeLastWordFromString } from '$lib/utils';
+	import { getPrompts } from '$lib/apis/prompts';
+	import { getKnowledgeItems } from '$lib/apis/knowledge';
+
 	import Prompts from './Commands/Prompts.svelte';
 	import Knowledge from './Commands/Knowledge.svelte';
 	import Models from './Commands/Models.svelte';
-
-	import { removeLastWordFromString } from '$lib/utils';
-	import { processWeb, processYoutubeVideo } from '$lib/apis/retrieval';
+	import Spinner from '$lib/components/common/Spinner.svelte';
 
 	export let prompt = '';
 	export let files = [];
 
+	let loading = false;
 	let commandElement = null;
 
 	export const selectUp = () => {
@@ -26,9 +31,30 @@
 
 	let command = '';
 	$: command = prompt?.split('\n').pop()?.split(' ')?.pop() ?? '';
+
+	let show = false;
+	$: show = ['/', '#', '@'].includes(command?.charAt(0)) || '\\#' === command.slice(0, 2);
+
+	$: if (show) {
+		init();
+	}
+
+	const init = async () => {
+		loading = true;
+		await Promise.all([
+			(async () => {
+				prompts.set(await getPrompts(localStorage.token));
+			})(),
+			(async () => {
+				knowledge.set(await getKnowledgeItems(localStorage.token));
+			})()
+		]);
+		loading = false;
+	};
 </script>
 
-{#if ['/', '#', '@'].includes(command?.charAt(0)) || '\\#' === command.slice(0, 2)}
+{#if show}
+	{#if !loading}
 		{#if command?.charAt(0) === '/'}
 			<Prompts bind:this={commandElement} bind:prompt bind:files {command} />
 		{:else if (command?.charAt(0) === '#' && command.startsWith('#') && !command.includes('# ')) || ('\\#' === command.slice(0, 2) && command.startsWith('#') && !command.includes('# '))}
@@ -77,4 +103,18 @@
 				}}
 			/>
 		{/if}
+	{:else}
+		<div
+			id="commands-container"
+			class="pl-3 pr-14 mb-3 text-left w-full absolute bottom-0 left-0 right-0 z-10"
+		>
+			<div class="flex w-full rounded-xl border border-gray-50 dark:border-gray-850">
+				<div
+					class="max-h-60 flex flex-col w-full rounded-xl bg-white dark:bg-gray-900 dark:text-gray-100"
+				>
+					<Spinner />
+				</div>
+			</div>
+		</div>
+	{/if}
 {/if}

src/lib/components/chat/MessageInput/InputMenu.svelte

@@ -1,37 +1,52 @@
 <script lang="ts">
 	import { DropdownMenu } from 'bits-ui';
 	import { flyAndScale } from '$lib/utils/transitions';
-	import { getContext } from 'svelte';
+	import { getContext, onMount } from 'svelte';
+
+	import { config, user, tools as _tools } from '$lib/stores';
 
 	import Dropdown from '$lib/components/common/Dropdown.svelte';
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
 	import DocumentArrowUpSolid from '$lib/components/icons/DocumentArrowUpSolid.svelte';
 	import Switch from '$lib/components/common/Switch.svelte';
 	import GlobeAltSolid from '$lib/components/icons/GlobeAltSolid.svelte';
-	import { config } from '$lib/stores';
 	import WrenchSolid from '$lib/components/icons/WrenchSolid.svelte';
+	import { getTools } from '$lib/apis/tools';
 
 	const i18n = getContext('i18n');
 
 	export let uploadFilesHandler: Function;
 
+	export let availableToolIds: string[] = [];
 	export let selectedToolIds: string[] = [];
+
 	export let webSearchEnabled: boolean;
 
-	export let tools = {};
 	export let onClose: Function;
 
-	$: tools = Object.fromEntries(
-		Object.keys(tools).map((toolId) => [
-			toolId,
-			{
-				...tools[toolId],
-				enabled: selectedToolIds.includes(toolId)
-			}
-		])
-	);
-
+	let tools = {};
 	let show = false;
+
+	$: if (show) {
+		init();
+	}
+
+	const init = async () => {
+		if ($_tools === null) {
+			await _tools.set(await getTools(localStorage.token));
+		}
+
+		tools = $_tools.reduce((a, tool, i, arr) => {
+			if (availableToolIds.includes(tool.id) || ($user?.role ?? 'user') === 'admin') {
+				a[tool.id] = {
+					name: tool.name,
+					description: tool.meta.description,
+					enabled: selectedToolIds.includes(tool.id)
+				};
+			}
+			return a;
+		}, {});
+	};
 </script>
 
 <Dropdown

src/lib/components/layout/Sidebar/SearchInput.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
+	import { getAllTags } from '$lib/apis/chats';
 	import { tags } from '$lib/stores';
-	import { stringify } from 'postcss';
 	import { getContext, createEventDispatcher, onMount, onDestroy, tick } from 'svelte';
 	import { fade } from 'svelte/transition';
 
@@ -15,13 +15,14 @@
 	let lastWord = '';
 	$: lastWord = value ? value.split(' ').at(-1) : value;
 
-	let focused = false;
 	let options = [
 		{
 			name: 'tag:',
 			description: $i18n.t('search for tags')
 		}
 	];
+	let focused = false;
+	let loading = false;
 
 	let filteredOptions = options;
 	$: filteredOptions = options.filter((option) => {
@@ -52,6 +53,12 @@
 			})
 		: [];
 
+	const initTags = async () => {
+		loading = true;
+		await tags.set(await getAllTags(localStorage.token));
+		loading = false;
+	};
+
 	const documentClickHandler = (e) => {
 		const searchContainer = document.getElementById('search-container');
 		const chatSearch = document.getElementById('chat-search');
@@ -99,6 +106,7 @@
 			}}
 			on:focus={() => {
 				focused = true;
+				initTags();
 			}}
 			on:keydown={(e) => {
 				if (e.key === 'Enter') {

src/lib/stores/index.ts

@@ -28,11 +28,13 @@ export const pinnedChats = writable([]);
 export const tags = writable([]);
 
 export const models: Writable<Model[]> = writable([]);
-export const prompts: Writable<Prompt[]> = writable([]);
-export const knowledge: Writable<Document[]> = writable([]);
 
-export const tools = writable([]);
-export const functions = writable([]);
+
+export const prompts: Writable<null | Prompt[]> = writable(null);
+export const knowledge: Writable<null | Document[]> = writable(null);
+export const tools = writable(null);
+export const functions = writable(null);
+
 
 export const banners: Writable<Banner[]> = writable([]);
 

src/routes/(app)/+layout.svelte

@@ -101,23 +101,8 @@
 				(async () => {
 					models.set(await getModels());
 				})(),
-				(async () => {
-					prompts.set(await getPrompts(localStorage.token));
-				})(),
-				(async () => {
-					knowledge.set(await getKnowledgeItems(localStorage.token));
-				})(),
-				(async () => {
-					tools.set(await getTools(localStorage.token));
-				})(),
-				(async () => {
-					functions.set(await getFunctions(localStorage.token));
-				})(),
 				(async () => {
 					banners.set(await getBanners(localStorage.token));
-				})(),
-				(async () => {
-					tags.set(await getAllTags(localStorage.token));
 				})()
 			]);
 

src/routes/(app)/workspace/+layout.svelte

@@ -1,10 +1,25 @@
 <script lang="ts">
 	import { onMount, getContext } from 'svelte';
-	import { WEBUI_NAME, showSidebar, functions, user, mobile } from '$lib/stores';
+	import {
+		WEBUI_NAME,
+		showSidebar,
+		functions,
+		user,
+		mobile,
+		models,
+		prompts,
+		knowledge,
+		tools
+	} from '$lib/stores';
 	import { page } from '$app/stores';
 	import { goto } from '$app/navigation';
 
 	import MenuLines from '$lib/components/icons/MenuLines.svelte';
+	import { getModels } from '$lib/apis';
+	import { getPrompts } from '$lib/apis/prompts';
+	import { getKnowledgeItems } from '$lib/apis/knowledge';
+	import { getTools } from '$lib/apis/tools';
+	import { getFunctions } from '$lib/apis/functions';
 
 	const i18n = getContext('i18n');
 
@@ -14,6 +29,25 @@
 		if ($user?.role !== 'admin') {
 			await goto('/');
 		}
+
+		await Promise.all([
+			(async () => {
+				models.set(await getModels());
+			})(),
+			(async () => {
+				knowledge.set(await getKnowledgeItems(localStorage.token));
+			})(),
+			(async () => {
+				prompts.set(await getPrompts(localStorage.token));
+			})(),
+			(async () => {
+				tools.set(await getTools(localStorage.token));
+			})(),
+			(async () => {
+				functions.set(await getFunctions(localStorage.token));
+			})()
+		]);
+
 		loaded = true;
 	});
 </script>