refac

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

@@ -1,16 +1,8 @@
 <script lang="ts">
-	import { knowledge, prompts } from '$lib/stores';
-
-	import { getPrompts } from '$lib/apis/prompts';
-	import { getKnowledgeBases } from '$lib/apis/knowledge';
-
 	import Prompts from './Commands/Prompts.svelte';
 	import Knowledge from './Commands/Knowledge.svelte';
 	import Models from './Commands/Models.svelte';
 	import Skills from './Commands/Skills.svelte';
-	import Spinner from '$lib/components/common/Spinner.svelte';
-
-	import { onMount } from 'svelte';
 
 	export let char = '';
 	export let query = '';
@@ -21,23 +13,8 @@
 	export let insertTextHandler = (text) => {};
 
 	let suggestionElement = null;
-	let loading = false;
 	let filteredItems = [];
 
-	const init = async () => {
-		loading = true;
-		await Promise.all([
-			(async () => {
-				prompts.set(await getPrompts(localStorage.token));
-			})()
-		]);
-		loading = false;
-	};
-
-	onMount(() => {
-		init();
-	});
-
 	const onKeyDown = (event: KeyboardEvent) => {
 		if (!['ArrowUp', 'ArrowDown', 'Enter', 'Tab', 'Escape'].includes(event.key)) return false;
 
@@ -81,90 +58,83 @@
 	id="suggestions-container"
 >
 	<div class="overflow-y-auto scrollbar-thin max-h-60">
-		{#if !loading}
-			{#if char === '/'}
-				<Prompts
-					bind:this={suggestionElement}
-					{query}
-					bind:filteredItems
-					prompts={$prompts ?? []}
-					onSelect={(e) => {
-						const { type, data } = e;
+		{#if char === '/'}
+			<Prompts
+				bind:this={suggestionElement}
+				{query}
+				bind:filteredItems
+				onSelect={(e) => {
+					const { type, data } = e;
 
-						if (type === 'prompt') {
-							insertTextHandler(data.content);
-						}
-					}}
-				/>
-			{:else if char === '#'}
-				<Knowledge
-					bind:this={suggestionElement}
-					{query}
-					bind:filteredItems
-					onSelect={(e) => {
-						const { type, data } = e;
+					if (type === 'prompt') {
+						insertTextHandler(data.content);
+					}
+				}}
+			/>
+		{:else if char === '#'}
+			<Knowledge
+				bind:this={suggestionElement}
+				{query}
+				bind:filteredItems
+				onSelect={(e) => {
+					const { type, data } = e;
 
-						if (type === 'knowledge') {
-							insertTextHandler('');
+					if (type === 'knowledge') {
+						insertTextHandler('');
 
-							onUpload({
-								type: 'file',
-								data: data
-							});
-						} else if (type === 'web') {
-							insertTextHandler('');
+						onUpload({
+							type: 'file',
+							data: data
+						});
+					} else if (type === 'web') {
+						insertTextHandler('');
 
-							onUpload({
-								type: 'web',
-								data: data
-							});
-						}
-					}}
-				/>
-			{:else if char === '@'}
-				<Models
-					bind:this={suggestionElement}
-					{query}
-					bind:filteredItems
-					onSelect={(e) => {
-						const { type, data } = e;
+						onUpload({
+							type: 'web',
+							data: data
+						});
+					}
+				}}
+			/>
+		{:else if char === '@'}
+			<Models
+				bind:this={suggestionElement}
+				{query}
+				bind:filteredItems
+				onSelect={(e) => {
+					const { type, data } = e;
 
-						if (type === 'model') {
-							insertTextHandler('');
+					if (type === 'model') {
+						insertTextHandler('');
 
-							onSelect({
-								type: 'model',
-								data: data
-							});
-						}
-					}}
-				/>
-			{:else if char === '$'}
-				<Skills
-					bind:this={suggestionElement}
-					{query}
-					bind:filteredItems
-					onSelect={(e) => {
-						const { type, data } = e;
+						onSelect({
+							type: 'model',
+							data: data
+						});
+					}
+				}}
+			/>
+		{:else if char === '$'}
+			<Skills
+				bind:this={suggestionElement}
+				{query}
+				bind:filteredItems
+				onSelect={(e) => {
+					const { type, data } = e;
 
-						if (type === 'skill') {
-							command({
-								id: `${data.id}|${data.name}`,
-								label: data.name
-							});
+					if (type === 'skill') {
+						command({
+							id: `${data.id}|${data.name}`,
+							label: data.name
+						});
 
-							onSelect({
-								type: 'skill',
-								data: data
-							});
-						}
-					}}
-				/>
-			{/if}
-		{:else}
-			<div class="py-4 flex flex-col w-full rounded-xl text-gray-700 dark:text-gray-300">
-				<Spinner />
-			</div>
+						onSelect({
+							type: 'skill',
+							data: data
+						});
+					}
+				}}
+			/>
 		{/if}
 	</div>
 </div>

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

@@ -3,21 +3,23 @@
 	import { tick, getContext, onMount, onDestroy } from 'svelte';
 	import { toast } from 'svelte-sonner';
 
+	import { getPrompts } from '$lib/apis/prompts';
+
 	const i18n = getContext('i18n');
 
 	export let query = '';
-	export let prompts = [];
 	export let onSelect = (e) => {};
 
 	let selectedPromptIdx = 0;
 	export let filteredItems = [];
 	let searchDebounceTimer: ReturnType<typeof setTimeout>;
-	let debouncedQuery = '';
+
+	let items = [];
 
 	$: if (query !== undefined) {
 		clearTimeout(searchDebounceTimer);
 		searchDebounceTimer = setTimeout(() => {
-			debouncedQuery = query;
+			getItems();
 		}, 200);
 	}
 
@@ -25,14 +27,21 @@
 		clearTimeout(searchDebounceTimer);
 	});
 
-	$: filteredItems = prompts
-		.filter((p) => p.command.toLowerCase().includes(debouncedQuery.toLowerCase()))
+	$: filteredItems = items
+		.filter((p) => p.command.toLowerCase().includes(query.toLowerCase()))
 		.sort((a, b) => a.name.localeCompare(b.name));
 
 	$: if (query) {
 		selectedPromptIdx = 0;
 	}
 
+	const getItems = async () => {
+		const res = await getPrompts(localStorage.token).catch(() => null);
+		if (res) {
+			items = res;
+		}
+	};
+
 	export const selectUp = () => {
 		selectedPromptIdx = Math.max(0, selectedPromptIdx - 1);
 	};

src/lib/components/notes/Notes.svelte

@@ -30,7 +30,7 @@
 	$: loadLocale($i18n.languages);
 
 	import { goto } from '$app/navigation';
-	import { WEBUI_NAME, config, prompts as _prompts, user } from '$lib/stores';
+	import { WEBUI_NAME, config, user } from '$lib/stores';
 	import { createNewNote, deleteNoteById, getNoteById, getNoteList, searchNotes } from '$lib/apis/notes';
 	import { capitalizeFirstLetter, copyToClipboard, getTimeRange } from '$lib/utils';
 	import { downloadPdf, createNoteHandler } from './utils';

src/lib/components/workspace/Prompts.svelte

@@ -5,13 +5,12 @@
 
 	import { goto } from '$app/navigation';
 	import { onMount, getContext, tick, onDestroy } from 'svelte';
-	import { WEBUI_NAME, config, prompts as _prompts, user } from '$lib/stores';
+	import { WEBUI_NAME, config, user } from '$lib/stores';
 
 	import {
 		createNewPrompt,
 		deletePromptById,
 		togglePromptById,
-		getPrompts,
 		getPromptItems,
 		getPromptTags
 	} from '$lib/apis/prompts';
@@ -171,7 +170,6 @@
 
 		page = 1;
 		getPromptList();
-		await _prompts.set(await getPrompts(localStorage.token));
 	};
 
 	onMount(async () => {
@@ -261,7 +259,6 @@
 
 						page = 1;
 						await getPromptList();
-						await _prompts.set(await getPrompts(localStorage.token));
 					} finally {
 						importFiles = null;
 						promptsImportInputElement.value = '';

src/lib/components/workspace/Tools.svelte

@@ -6,7 +6,7 @@
 	import { onMount, getContext, tick, onDestroy } from 'svelte';
 	const i18n = getContext('i18n');
 
-	import { WEBUI_NAME, config, prompts, tools as _tools, user } from '$lib/stores';
+	import { WEBUI_NAME, config, tools as _tools, user } from '$lib/stores';
 
 	import { goto } from '$app/navigation';
 	import {

src/lib/stores/index.ts

@@ -63,7 +63,6 @@ export const selectedFolder = writable(null);
 
 export const models: Writable<Model[]> = writable([]);
 
-export const prompts: Writable<null | Prompt[]> = writable(null);
 export const knowledge: Writable<null | Document[]> = writable(null);
 export const tools = writable(null);
 export const skills = writable(null);
@@ -240,14 +239,6 @@ type TitleSettings = {
 	prompt?: string;
 };
 
-type Prompt = {
-	command: string;
-	user_id: string;
-	title: string;
-	content: string;
-	timestamp: number;
-};
-
 type Document = {
 	collection_name: string;
 	filename: string;

src/routes/(app)/workspace/prompts/[id]/+page.svelte

@@ -1,12 +1,11 @@
 <script lang="ts">
 	import { toast } from 'svelte-sonner';
 	import { goto } from '$app/navigation';
-	import { prompts } from '$lib/stores';
 	import { onMount, getContext } from 'svelte';
 
 	const i18n = getContext('i18n');
 
-	import { getPromptById, getPrompts, updatePromptById } from '$lib/apis/prompts';
+	import { getPromptById, updatePromptById } from '$lib/apis/prompts';
 	import { page } from '$app/stores';
 
 	import PromptEditor from '$lib/components/workspace/Prompts/PromptEditor.svelte';
@@ -26,7 +25,6 @@
 
 		if (updatedPrompt) {
 			toast.success($i18n.t('Prompt updated successfully'));
-			await prompts.set(await getPrompts(localStorage.token));
 			// Update local prompt state to reflect the new version
 			prompt = {
 				id: updatedPrompt.id,

src/routes/(app)/workspace/prompts/create/+page.svelte

@@ -1,12 +1,11 @@
 <script lang="ts">
 	import { toast } from 'svelte-sonner';
 	import { goto } from '$app/navigation';
-	import { prompts } from '$lib/stores';
 	import { onMount, tick, getContext } from 'svelte';
 
 	const i18n = getContext('i18n');
 
-	import { createNewPrompt, getPrompts } from '$lib/apis/prompts';
+	import { createNewPrompt } from '$lib/apis/prompts';
 	import PromptEditor from '$lib/components/workspace/Prompts/PromptEditor.svelte';
 
 	let prompt: {
@@ -27,8 +26,6 @@
 
 		if (res) {
 			toast.success($i18n.t('Prompt created successfully'));
-
-			await prompts.set(await getPrompts(localStorage.token));
 			await goto('/workspace/prompts');
 		}
 	};