mirror of
https://github.com/open-webui/open-webui
synced 2025-06-26 18:26:48 +00:00
enh: workspace loading indicator
This commit is contained in:
Timothy Jaeryang Baek
parent
b562067e91
commit
b41e456c4f
@ -23,6 +23,9 @@
|
||||
import Badge from '../common/Badge.svelte';
|
||||
import Search from '../icons/Search.svelte';
|
||||
import Plus from '../icons/Plus.svelte';
|
||||
import Spinner from '../common/Spinner.svelte';
|
||||
|
||||
let loaded = false;
|
||||
|
||||
let query = '';
|
||||
let selectedItem = null;
|
||||
@ -61,6 +64,7 @@
|
||||
|
||||
onMount(async () => {
|
||||
knowledgeBases = await getKnowledgeBaseList(localStorage.token);
|
||||
loaded = true;
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -70,14 +74,15 @@
|
||||
</title>
|
||||
</svelte:head>
|
||||
|
||||
<DeleteConfirmDialog
|
||||
{#if loaded}
|
||||
<DeleteConfirmDialog
|
||||
bind:show={showDeleteConfirm}
|
||||
on:confirm={() => {
|
||||
deleteHandler(selectedItem);
|
||||
}}
|
||||
/>
|
||||
/>
|
||||
|
||||
<div class="flex flex-col gap-1 mt-1.5 mb-2">
|
||||
<div class="flex flex-col gap-1 mt-1.5 mb-2">
|
||||
<div class="flex justify-between items-center">
|
||||
<div class="flex md:self-center text-xl font-medium px-0.5 items-center">
|
||||
{$i18n.t('Knowledge')}
|
||||
@ -112,9 +117,9 @@
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="my-3 mb-5 grid lg:grid-cols-2 xl:grid-cols-3 gap-2">
|
||||
<div class="my-3 mb-5 grid lg:grid-cols-2 xl:grid-cols-3 gap-2">
|
||||
{#each filteredItems as item}
|
||||
<button
|
||||
class=" flex space-x-4 cursor-pointer text-left w-full px-4 py-3 border border-gray-50 dark:border-gray-850 dark:hover:border-gray-800 hover:bg-gray-50 dark:hover:bg-gray-850 transition rounded-xl"
|
||||
@ -166,8 +171,13 @@
|
||||
</div>
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class=" text-gray-500 text-xs mt-1 mb-2">
|
||||
<div class=" text-gray-500 text-xs mt-1 mb-2">
|
||||
ⓘ {$i18n.t("Use '#' in the prompt input to load and include your knowledge.")}
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="w-full h-full flex justify-center items-center">
|
||||
<Spinner />
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
@ -31,11 +31,13 @@
|
||||
import Plus from '../icons/Plus.svelte';
|
||||
import ChevronRight from '../icons/ChevronRight.svelte';
|
||||
import Switch from '../common/Switch.svelte';
|
||||
import Spinner from '../common/Spinner.svelte';
|
||||
|
||||
let shiftKey = false;
|
||||
|
||||
let importFiles;
|
||||
let modelsImportInputElement: HTMLInputElement;
|
||||
let loaded = false;
|
||||
|
||||
let models = [];
|
||||
|
||||
@ -149,6 +151,8 @@
|
||||
onMount(async () => {
|
||||
models = await getWorkspaceModels(localStorage.token);
|
||||
|
||||
loaded = true;
|
||||
|
||||
const onKeyDown = (event) => {
|
||||
if (event.key === 'Shift') {
|
||||
shiftKey = true;
|
||||
@ -183,14 +187,15 @@
|
||||
</title>
|
||||
</svelte:head>
|
||||
|
||||
<ModelDeleteConfirmDialog
|
||||
{#if loaded}
|
||||
<ModelDeleteConfirmDialog
|
||||
bind:show={showModelDeleteConfirm}
|
||||
on:confirm={() => {
|
||||
deleteModelHandler(selectedModel);
|
||||
}}
|
||||
/>
|
||||
/>
|
||||
|
||||
<div class="flex flex-col gap-1 mt-1.5 mb-2">
|
||||
<div class="flex flex-col gap-1 mt-1.5 mb-2">
|
||||
<div class="flex justify-between items-center">
|
||||
<div class="flex items-center md:self-center text-xl font-medium px-0.5">
|
||||
{$i18n.t('Models')}
|
||||
@ -222,9 +227,9 @@
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a class=" flex space-x-4 cursor-pointer w-full mb-2 px-3 py-1" href="/workspace/models/create">
|
||||
<a class=" flex space-x-4 cursor-pointer w-full mb-2 px-3 py-1" href="/workspace/models/create">
|
||||
<div class=" self-center w-8 flex-shrink-0">
|
||||
<div
|
||||
class="w-full h-8 flex justify-center rounded-full bg-transparent dark:bg-gray-700 border border-dashed border-gray-200"
|
||||
@ -245,9 +250,9 @@
|
||||
{$i18n.t('Customize models for a specific purpose')}
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</a>
|
||||
|
||||
<div class=" my-2 mb-5" id="model-list">
|
||||
<div class=" my-2 mb-5" id="model-list">
|
||||
{#each filteredModels as model}
|
||||
<div
|
||||
class=" flex space-x-4 cursor-pointer w-full px-3 py-2 dark:hover:bg-white/5 hover:bg-black/5 rounded-lg transition"
|
||||
@ -365,9 +370,9 @@
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if $user?.role === 'admin'}
|
||||
{#if $user?.role === 'admin'}
|
||||
<div class=" flex justify-end w-full mb-3">
|
||||
<div class="flex space-x-1">
|
||||
<input
|
||||
@ -388,9 +393,11 @@
|
||||
for (const model of savedModels) {
|
||||
if (model?.info ?? false) {
|
||||
if ($_models.find((m) => m.id === model.id)) {
|
||||
await updateModelById(localStorage.token, model.id, model.info).catch((error) => {
|
||||
await updateModelById(localStorage.token, model.id, model.info).catch(
|
||||
(error) => {
|
||||
return null;
|
||||
});
|
||||
}
|
||||
);
|
||||
} else {
|
||||
await createNewModel(localStorage.token, model.info).catch((error) => {
|
||||
return null;
|
||||
@ -456,9 +463,9 @@
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
|
||||
{#if $config?.features.enable_community_sharing}
|
||||
{#if $config?.features.enable_community_sharing}
|
||||
<div class=" my-16">
|
||||
<div class=" text-lg font-semibold mb-0.5 line-clamp-1">
|
||||
{$i18n.t('Made by OpenWebUI Community')}
|
||||
@ -483,4 +490,9 @@
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
{/if}
|
||||
{:else}
|
||||
<div class="w-full h-full flex justify-center items-center">
|
||||
<Spinner />
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
@ -20,9 +20,11 @@
|
||||
import Search from '../icons/Search.svelte';
|
||||
import Plus from '../icons/Plus.svelte';
|
||||
import ChevronRight from '../icons/ChevronRight.svelte';
|
||||
import Spinner from '../common/Spinner.svelte';
|
||||
|
||||
const i18n = getContext('i18n');
|
||||
let promptsImportInputElement: HTMLInputElement;
|
||||
let loaded = false;
|
||||
|
||||
let importFiles = '';
|
||||
let query = '';
|
||||
@ -78,6 +80,7 @@
|
||||
|
||||
onMount(async () => {
|
||||
await init();
|
||||
loaded = true;
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -87,19 +90,20 @@
|
||||
</title>
|
||||
</svelte:head>
|
||||
|
||||
<DeleteConfirmDialog
|
||||
{#if loaded}
|
||||
<DeleteConfirmDialog
|
||||
bind:show={showDeleteConfirm}
|
||||
title={$i18n.t('Delete prompt?')}
|
||||
on:confirm={() => {
|
||||
deleteHandler(deletePrompt);
|
||||
}}
|
||||
>
|
||||
>
|
||||
<div class=" text-sm text-gray-500">
|
||||
{$i18n.t('This will delete')} <span class=" font-semibold">{deletePrompt.command}</span>.
|
||||
</div>
|
||||
</DeleteConfirmDialog>
|
||||
</DeleteConfirmDialog>
|
||||
|
||||
<div class="flex flex-col gap-1 mt-1.5 mb-2">
|
||||
<div class="flex flex-col gap-1 mt-1.5 mb-2">
|
||||
<div class="flex justify-between items-center">
|
||||
<div class="flex md:self-center text-xl font-medium px-0.5 items-center">
|
||||
{$i18n.t('Prompts')}
|
||||
@ -131,9 +135,9 @@
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-5">
|
||||
<div class="mb-5">
|
||||
{#each filteredItems as prompt}
|
||||
<div
|
||||
class=" flex space-x-4 cursor-pointer w-full px-3 py-2 dark:hover:bg-white/5 hover:bg-black/5 rounded-xl"
|
||||
@ -196,9 +200,9 @@
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if $user?.role === 'admin'}
|
||||
{#if $user?.role === 'admin'}
|
||||
<div class=" flex justify-end w-full mb-3">
|
||||
<div class="flex space-x-2">
|
||||
<input
|
||||
@ -289,9 +293,9 @@
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
|
||||
{#if $config?.features.enable_community_sharing}
|
||||
{#if $config?.features.enable_community_sharing}
|
||||
<div class=" my-16">
|
||||
<div class=" text-lg font-semibold mb-0.5 line-clamp-1">
|
||||
{$i18n.t('Made by OpenWebUI Community')}
|
||||
@ -316,4 +320,9 @@
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
{/if}
|
||||
{:else}
|
||||
<div class="w-full h-full flex justify-center items-center">
|
||||
<Spinner />
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
@ -29,10 +29,12 @@
|
||||
import Search from '../icons/Search.svelte';
|
||||
import Plus from '../icons/Plus.svelte';
|
||||
import ChevronRight from '../icons/ChevronRight.svelte';
|
||||
import Spinner from '../common/Spinner.svelte';
|
||||
|
||||
const i18n = getContext('i18n');
|
||||
|
||||
let shiftKey = false;
|
||||
let loaded = false;
|
||||
|
||||
let toolsImportInputElement: HTMLInputElement;
|
||||
let importFiles;
|
||||
@ -131,8 +133,10 @@
|
||||
_tools.set(await getTools(localStorage.token));
|
||||
};
|
||||
|
||||
onMount(() => {
|
||||
init();
|
||||
onMount(async () => {
|
||||
await init();
|
||||
loaded = true;
|
||||
|
||||
const onKeyDown = (event) => {
|
||||
if (event.key === 'Shift') {
|
||||
shiftKey = true;
|
||||
@ -167,7 +171,8 @@
|
||||
</title>
|
||||
</svelte:head>
|
||||
|
||||
<div class="flex flex-col gap-1 mt-1.5 mb-2">
|
||||
{#if loaded}
|
||||
<div class="flex flex-col gap-1 mt-1.5 mb-2">
|
||||
<div class="flex justify-between items-center">
|
||||
<div class="flex md:self-center text-xl font-medium px-0.5 items-center">
|
||||
{$i18n.t('Tools')}
|
||||
@ -199,9 +204,9 @@
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-5">
|
||||
<div class="mb-5">
|
||||
{#each filteredItems as tool}
|
||||
<div
|
||||
class=" flex space-x-4 cursor-pointer w-full px-3 py-2 dark:hover:bg-white/5 hover:bg-black/5 rounded-xl"
|
||||
@ -332,9 +337,9 @@
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if $user?.role === 'admin'}
|
||||
{#if $user?.role === 'admin'}
|
||||
<div class=" flex justify-end w-full mb-2">
|
||||
<div class="flex space-x-2">
|
||||
<input
|
||||
@ -409,9 +414,9 @@
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
|
||||
{#if $config?.features.enable_community_sharing}
|
||||
{#if $config?.features.enable_community_sharing}
|
||||
<div class=" my-16">
|
||||
<div class=" text-lg font-semibold mb-0.5 line-clamp-1">
|
||||
{$i18n.t('Made by OpenWebUI Community')}
|
||||
@ -436,24 +441,24 @@
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
|
||||
<DeleteConfirmDialog
|
||||
<DeleteConfirmDialog
|
||||
bind:show={showDeleteConfirm}
|
||||
title={$i18n.t('Delete tool?')}
|
||||
on:confirm={() => {
|
||||
deleteHandler(selectedTool);
|
||||
}}
|
||||
>
|
||||
>
|
||||
<div class=" text-sm text-gray-500">
|
||||
{$i18n.t('This will delete')} <span class=" font-semibold">{selectedTool.name}</span>.
|
||||
</div>
|
||||
</DeleteConfirmDialog>
|
||||
</DeleteConfirmDialog>
|
||||
|
||||
<ValvesModal bind:show={showValvesModal} type="tool" id={selectedTool?.id ?? null} />
|
||||
<ManifestModal bind:show={showManifestModal} manifest={selectedTool?.meta?.manifest ?? {}} />
|
||||
<ValvesModal bind:show={showValvesModal} type="tool" id={selectedTool?.id ?? null} />
|
||||
<ManifestModal bind:show={showManifestModal} manifest={selectedTool?.meta?.manifest ?? {}} />
|
||||
|
||||
<ConfirmDialog
|
||||
<ConfirmDialog
|
||||
bind:show={showConfirm}
|
||||
on:confirm={() => {
|
||||
const reader = new FileReader();
|
||||
@ -474,7 +479,7 @@
|
||||
|
||||
reader.readAsText(importFiles[0]);
|
||||
}}
|
||||
>
|
||||
>
|
||||
<div class="text-sm text-gray-500">
|
||||
<div class=" bg-yellow-500/20 text-yellow-700 dark:text-yellow-200 rounded-lg px-4 py-3">
|
||||
<div>{$i18n.t('Please carefully review the following warnings:')}</div>
|
||||
@ -493,4 +498,9 @@
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</ConfirmDialog>
|
||||
</ConfirmDialog>
|
||||
{:else}
|
||||
<div class="w-full h-full flex justify-center items-center">
|
||||
<Spinner />
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user