Emil_Shanaty/open-webui-ai4me
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refac

Browse Source
This commit is contained in:
Timothy Jaeryang Baek
2026-02-21 15:33:21 -06:00
parent c2172e43eb
commit c114fd6876
8 changed files with 88 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/chat/MessageInput/CommandSuggestionList.svelte
+69 -99
View File
@@ -1,16 +1,8 @@
<script lang="ts"> <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 Prompts from './Commands/Prompts.svelte';
import Knowledge from './Commands/Knowledge.svelte'; import Knowledge from './Commands/Knowledge.svelte';
import Models from './Commands/Models.svelte'; import Models from './Commands/Models.svelte';
import Skills from './Commands/Skills.svelte'; import Skills from './Commands/Skills.svelte';
import Spinner from '$lib/components/common/Spinner.svelte';
import { onMount } from 'svelte';
export let char = ''; export let char = '';
export let query = ''; export let query = '';
@@ -21,23 +13,8 @@
export let insertTextHandler = (text) => {}; export let insertTextHandler = (text) => {};
let suggestionElement = null; let suggestionElement = null;
let loading = false;
let filteredItems = []; 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) => { const onKeyDown = (event: KeyboardEvent) => {
if (!['ArrowUp', 'ArrowDown', 'Enter', 'Tab', 'Escape'].includes(event.key)) return false; if (!['ArrowUp', 'ArrowDown', 'Enter', 'Tab', 'Escape'].includes(event.key)) return false;
@@ -81,90 +58,83 @@
id="suggestions-container" id="suggestions-container"
> >
<div class="overflow-y-auto scrollbar-thin max-h-60"> <div class="overflow-y-auto scrollbar-thin max-h-60">
{#if !loading} {#if char === '/'}
{#if char === '/'} <Prompts
<Prompts bind:this={suggestionElement}
bind:this={suggestionElement} {query}
{query} bind:filteredItems
bind:filteredItems onSelect={(e) => {
prompts={$prompts ?? []} const { type, data } = e;
onSelect={(e) => {
const { type, data } = e;
if (type === 'prompt') { if (type === 'prompt') {
insertTextHandler(data.content); insertTextHandler(data.content);
} }
}} }}
/> />
{:else if char === '#'} {:else if char === '#'}
<Knowledge <Knowledge
bind:this={suggestionElement} bind:this={suggestionElement}
{query} {query}
bind:filteredItems bind:filteredItems
onSelect={(e) => { onSelect={(e) => {
const { type, data } = e; const { type, data } = e;
if (type === 'knowledge') { if (type === 'knowledge') {
insertTextHandler(''); insertTextHandler('');
onUpload({ onUpload({
type: 'file', type: 'file',
data: data data: data
}); });
} else if (type === 'web') { } else if (type === 'web') {
insertTextHandler(''); insertTextHandler('');
onUpload({ onUpload({
type: 'web', type: 'web',
data: data data: data
}); });
} }
}} }}
/> />
{:else if char === '@'} {:else if char === '@'}
<Models <Models
bind:this={suggestionElement} bind:this={suggestionElement}
{query} {query}
bind:filteredItems bind:filteredItems
onSelect={(e) => { onSelect={(e) => {
const { type, data } = e; const { type, data } = e;
if (type === 'model') { if (type === 'model') {
insertTextHandler(''); insertTextHandler('');
onSelect({ onSelect({
type: 'model', type: 'model',
data: data data: data
}); });
} }
}} }}
/> />
{:else if char === '$'} {:else if char === '$'}
<Skills <Skills
bind:this={suggestionElement} bind:this={suggestionElement}
{query} {query}
bind:filteredItems bind:filteredItems
onSelect={(e) => { onSelect={(e) => {
const { type, data } = e; const { type, data } = e;
if (type === 'skill') { if (type === 'skill') {
command({ command({
id: `${data.id}|${data.name}`, id: `${data.id}|${data.name}`,
label: data.name label: data.name
}); });
onSelect({ onSelect({
type: 'skill', type: 'skill',
data: data data: data
}); });
} }
}} }}
/> />
{/if}
{:else}
<div class="py-4 flex flex-col w-full rounded-xl text-gray-700 dark:text-gray-300">
<Spinner />
</div>
{/if} {/if}
</div> </div>
</div> </div>
src/lib/components/chat/MessageInput/Commands/Prompts.svelte
+14 -5
View File
@@ -3,21 +3,23 @@
import { tick, getContext, onMount, onDestroy } from 'svelte'; import { tick, getContext, onMount, onDestroy } from 'svelte';
import { toast } from 'svelte-sonner'; import { toast } from 'svelte-sonner';
import { getPrompts } from '$lib/apis/prompts';
const i18n = getContext('i18n'); const i18n = getContext('i18n');
export let query = ''; export let query = '';
export let prompts = [];
export let onSelect = (e) => {}; export let onSelect = (e) => {};
let selectedPromptIdx = 0; let selectedPromptIdx = 0;
export let filteredItems = []; export let filteredItems = [];
let searchDebounceTimer: ReturnType<typeof setTimeout>; let searchDebounceTimer: ReturnType<typeof setTimeout>;
let debouncedQuery = '';
let items = [];
$: if (query !== undefined) { $: if (query !== undefined) {
clearTimeout(searchDebounceTimer); clearTimeout(searchDebounceTimer);
searchDebounceTimer = setTimeout(() => { searchDebounceTimer = setTimeout(() => {
debouncedQuery = query; getItems();
}, 200); }, 200);
} }
@@ -25,14 +27,21 @@
clearTimeout(searchDebounceTimer); clearTimeout(searchDebounceTimer);
}); });
$: filteredItems = prompts $: filteredItems = items
.filter((p) => p.command.toLowerCase().includes(debouncedQuery.toLowerCase())) .filter((p) => p.command.toLowerCase().includes(query.toLowerCase()))
.sort((a, b) => a.name.localeCompare(b.name)); .sort((a, b) => a.name.localeCompare(b.name));
$: if (query) { $: if (query) {
selectedPromptIdx = 0; selectedPromptIdx = 0;
} }
const getItems = async () => {
const res = await getPrompts(localStorage.token).catch(() => null);
if (res) {
items = res;
}
};
export const selectUp = () => { export const selectUp = () => {
selectedPromptIdx = Math.max(0, selectedPromptIdx - 1); selectedPromptIdx = Math.max(0, selectedPromptIdx - 1);
}; };
src/lib/components/notes/Notes.svelte
+1 -1
View File
@@ -30,7 +30,7 @@
$: loadLocale($i18n.languages); $: loadLocale($i18n.languages);
import { goto } from '$app/navigation'; 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 { createNewNote, deleteNoteById, getNoteById, getNoteList, searchNotes } from '$lib/apis/notes';
import { capitalizeFirstLetter, copyToClipboard, getTimeRange } from '$lib/utils'; import { capitalizeFirstLetter, copyToClipboard, getTimeRange } from '$lib/utils';
import { downloadPdf, createNoteHandler } from './utils'; import { downloadPdf, createNoteHandler } from './utils';
src/lib/components/workspace/Prompts.svelte
+1 -4
View File
@@ -5,13 +5,12 @@
import { goto } from '$app/navigation'; import { goto } from '$app/navigation';
import { onMount, getContext, tick, onDestroy } from 'svelte'; 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 { import {
createNewPrompt, createNewPrompt,
deletePromptById, deletePromptById,
togglePromptById, togglePromptById,
getPrompts,
getPromptItems, getPromptItems,
getPromptTags getPromptTags
} from '$lib/apis/prompts'; } from '$lib/apis/prompts';
@@ -171,7 +170,6 @@
page = 1; page = 1;
getPromptList(); getPromptList();
await _prompts.set(await getPrompts(localStorage.token));
}; };
onMount(async () => { onMount(async () => {
@@ -261,7 +259,6 @@
page = 1; page = 1;
await getPromptList(); await getPromptList();
await _prompts.set(await getPrompts(localStorage.token));
} finally { } finally {
importFiles = null; importFiles = null;
promptsImportInputElement.value = ''; promptsImportInputElement.value = '';
src/lib/components/workspace/Tools.svelte
+1 -1
View File
@@ -6,7 +6,7 @@
import { onMount, getContext, tick, onDestroy } from 'svelte'; import { onMount, getContext, tick, onDestroy } from 'svelte';
const i18n = getContext('i18n'); 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 { goto } from '$app/navigation';
import { import {
src/lib/stores/index.ts
-9
View File
@@ -63,7 +63,6 @@ export const selectedFolder = writable(null);
export const models: Writable<Model[]> = writable([]); export const models: Writable<Model[]> = writable([]);
export const prompts: Writable<null | Prompt[]> = writable(null);
export const knowledge: Writable<null | Document[]> = writable(null); export const knowledge: Writable<null | Document[]> = writable(null);
export const tools = writable(null); export const tools = writable(null);
export const skills = writable(null); export const skills = writable(null);
@@ -240,14 +239,6 @@ type TitleSettings = {
prompt?: string; prompt?: string;
}; };
type Prompt = {
command: string;
user_id: string;
title: string;
content: string;
timestamp: number;
};
type Document = { type Document = {
collection_name: string; collection_name: string;
filename: string; filename: string;
src/routes/(app)/workspace/prompts/[id]/+page.svelte
+1 -3
View File
@@ -1,12 +1,11 @@
<script lang="ts"> <script lang="ts">
import { toast } from 'svelte-sonner'; import { toast } from 'svelte-sonner';
import { goto } from '$app/navigation'; import { goto } from '$app/navigation';
import { prompts } from '$lib/stores';
import { onMount, getContext } from 'svelte'; import { onMount, getContext } from 'svelte';
const i18n = getContext('i18n'); 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 { page } from '$app/stores';
import PromptEditor from '$lib/components/workspace/Prompts/PromptEditor.svelte'; import PromptEditor from '$lib/components/workspace/Prompts/PromptEditor.svelte';
@@ -26,7 +25,6 @@
if (updatedPrompt) { if (updatedPrompt) {
toast.success($i18n.t('Prompt updated successfully')); toast.success($i18n.t('Prompt updated successfully'));
await prompts.set(await getPrompts(localStorage.token));
// Update local prompt state to reflect the new version // Update local prompt state to reflect the new version
prompt = { prompt = {
id: updatedPrompt.id, id: updatedPrompt.id,
src/routes/(app)/workspace/prompts/create/+page.svelte
+1 -4
View File
@@ -1,12 +1,11 @@
<script lang="ts"> <script lang="ts">
import { toast } from 'svelte-sonner'; import { toast } from 'svelte-sonner';
import { goto } from '$app/navigation'; import { goto } from '$app/navigation';
import { prompts } from '$lib/stores';
import { onMount, tick, getContext } from 'svelte'; import { onMount, tick, getContext } from 'svelte';
const i18n = getContext('i18n'); 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'; import PromptEditor from '$lib/components/workspace/Prompts/PromptEditor.svelte';
let prompt: { let prompt: {
@@ -27,8 +26,6 @@
if (res) { if (res) {
toast.success($i18n.t('Prompt created successfully')); toast.success($i18n.t('Prompt created successfully'));
await prompts.set(await getPrompts(localStorage.token));
await goto('/workspace/prompts'); await goto('/workspace/prompts');
} }
}; };