bhetherman/open-webui
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-07-15 04:01:23 -04:00
parent 9a706329c5
commit 05e3f71317
7 changed files with 509 additions and 462 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/workspace/Knowledge.svelte
+11 -27
View File
@@ -10,7 +10,7 @@
const i18n = getContext<Writable<i18nType>>('i18n');
import { WEBUI_NAME, knowledge, user } from '$lib/stores';
import { WEBUI_NAME, knowledge, user, workspaceActions } from '$lib/stores';
import {
deleteKnowledgeById,
searchKnowledgeBases,
@@ -24,7 +24,6 @@
import ItemMenu from './Knowledge/ItemMenu.svelte';
import Badge from '../common/Badge.svelte';
import Search from '../icons/Search.svelte';
import Plus from '../icons/Plus.svelte';
import Spinner from '../common/Spinner.svelte';
import Tooltip from '../common/Tooltip.svelte';
import XMark from '../icons/XMark.svelte';
@@ -63,6 +62,16 @@
let allItemsLoaded = false;
let itemsLoading = false;
$: if (loaded) {
workspaceActions.set([
{
id: 'knowledge-new',
label: $i18n.t('Create'),
href: '/workspace/knowledge/create'
}
]);
}
const handleSearchInput = () => {
clearTimeout(searchDebounceTimer);
searchDebounceTimer = setTimeout(() => {
@@ -188,31 +197,6 @@
}}
/>
<div class="flex flex-col gap-1 px-1 mt-1.5 mb-2">
<div class="flex justify-between items-center">
<div class="flex items-center md:self-center text-xl font-normal px-0.5 gap-2 shrink-0">
<div>
{$i18n.t('Knowledge')}
</div>
<div class="text-lg font-normal text-gray-500 dark:text-gray-500">
{total}
</div>
</div>
<div class="flex w-full justify-end gap-1.5">
<a
class=" px-2 py-1.5 rounded-xl bg-black text-white dark:bg-white dark:text-black transition font-normal text-sm flex items-center"
href="/workspace/knowledge/create"
>
<Plus className="size-3" strokeWidth="2.5" />
<div class=" hidden md:block md:ml-1 text-xs">{$i18n.t('New Knowledge')}</div>
</a>
</div>
</div>
</div>
<div class="space-y-1">
<div class="flex h-8 w-full items-center gap-2">
<div class="flex min-w-0 flex-1">
src/lib/components/workspace/Models.svelte
+83 -101
View File
@@ -11,7 +11,15 @@
import { goto } from '$app/navigation';
const i18n = getContext('i18n');
import { WEBUI_NAME, config, mobile, models as _models, settings, user } from '$lib/stores';
import {
WEBUI_NAME,
config,
mobile,
models as _models,
settings,
user,
workspaceActions
} from '$lib/stores';
import { WEBUI_API_BASE_URL, WEBUI_BASE_URL } from '$lib/constants';
import {
createNewModel,
@@ -36,7 +44,6 @@
import Tooltip from '../common/Tooltip.svelte';
import GarbageBin from '../icons/GarbageBin.svelte';
import Search from '../icons/Search.svelte';
import Plus from '../icons/Plus.svelte';
import Switch from '../common/Switch.svelte';
import Spinner from '../common/Spinner.svelte';
import XMark from '../icons/XMark.svelte';
@@ -78,6 +85,30 @@
let searchDebounceTimer;
$: if (loaded) {
workspaceActions.set([
{
id: 'models-new',
label: $i18n.t('Create'),
href: '/workspace/models/create'
},
{
id: 'models-import',
label: $i18n.t('Import JSON'),
onClick: () => modelsImportInputElement?.click(),
visible: $user?.role === 'admin' || $user?.permissions?.workspace?.models_import
},
{
id: 'models-export',
label: $i18n.t('Export JSON'),
onClick: async () => {
await downloadModels(models);
},
visible: $user?.role === 'admin' || $user?.permissions?.workspace?.models_export
}
]);
}
$: if (loaded && page !== undefined && selectedTag !== undefined && viewOption !== undefined) {
getModelList();
}
@@ -374,113 +405,64 @@
}}
/>
<div class="flex flex-col gap-1 px-1 mt-1.5 mb-2">
<input
id="models-import-input"
bind:this={modelsImportInputElement}
bind:files={importFiles}
type="file"
accept=".json"
hidden
on:change={() => {
console.log(importFiles);
<input
id="models-import-input"
bind:this={modelsImportInputElement}
bind:files={importFiles}
type="file"
accept=".json"
hidden
on:change={() => {
console.log(importFiles);
let reader = new FileReader();
reader.onload = async (event) => {
let savedModels = [];
try {
savedModels = JSON.parse(event.target.result);
console.log(savedModels);
} catch (e) {
toast.error($i18n.t('Invalid JSON file'));
return;
}
let reader = new FileReader();
reader.onload = async (event) => {
let savedModels = [];
try {
savedModels = JSON.parse(event.target.result);
console.log(savedModels);
} catch (e) {
toast.error($i18n.t('Invalid JSON file'));
return;
}
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) => {
toast.error(`${error}`);
return null;
});
} else {
await createNewModel(localStorage.token, model.info).catch((error) => {
toast.error(`${error}`);
return null;
});
}
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) => {
toast.error(`${error}`);
return null;
});
} else {
if (model?.id && model?.name) {
await createNewModel(localStorage.token, model).catch((error) => {
toast.error(`${error}`);
return null;
});
}
await createNewModel(localStorage.token, model.info).catch((error) => {
toast.error(`${error}`);
return null;
});
}
} else {
if (model?.id && model?.name) {
await createNewModel(localStorage.token, model).catch((error) => {
toast.error(`${error}`);
return null;
});
}
}
}
await _models.set(
await getModels(
localStorage.token,
$config?.features?.enable_direct_connections && ($settings?.directConnections ?? null)
)
);
await _models.set(
await getModels(
localStorage.token,
$config?.features?.enable_direct_connections && ($settings?.directConnections ?? null)
)
);
page = 1;
getModelList();
};
page = 1;
getModelList();
};
reader.readAsText(importFiles[0]);
}}
/>
<div class="flex justify-between items-center">
<div class="flex items-center md:self-center text-xl font-normal px-0.5 gap-2 shrink-0">
<div>
{$i18n.t('Models')}
</div>
<div class="text-lg font-normal text-gray-500 dark:text-gray-500">
{total}
</div>
</div>
<div class="flex w-full justify-end gap-1.5">
{#if $user?.role === 'admin' || $user?.permissions?.workspace?.models_import}
<button
class="flex text-xs items-center space-x-1 px-3 py-1.5 rounded-xl bg-gray-50 hover:bg-gray-100 dark:bg-gray-850 dark:hover:bg-gray-800 dark:text-gray-200 transition"
on:click={() => {
modelsImportInputElement.click();
}}
>
<div class=" self-center font-normal line-clamp-1">
{$i18n.t('Import')}
</div>
</button>
{/if}
{#if total && ($user?.role === 'admin' || $user?.permissions?.workspace?.models_export)}
<button
class="flex text-xs items-center space-x-1 px-3 py-1.5 rounded-xl bg-gray-50 hover:bg-gray-100 dark:bg-gray-850 dark:hover:bg-gray-800 dark:text-gray-200 transition"
on:click={async () => {
downloadModels(models);
}}
>
<div class=" self-center font-normal line-clamp-1">
{$i18n.t('Export')}
</div>
</button>
{/if}
<a
class=" px-2 py-1.5 rounded-xl bg-black text-white dark:bg-white dark:text-black transition font-normal text-sm flex items-center"
href="/workspace/models/create"
>
<Plus className="size-3" strokeWidth="2.5" />
<div class=" hidden md:block md:ml-1 text-xs">{$i18n.t('New Model')}</div>
</a>
</div>
</div>
</div>
reader.readAsText(importFiles[0]);
}}
/>
<div class="space-y-1">
<div class="flex h-8 flex-1 items-center w-full gap-2">
src/lib/components/workspace/Prompts.svelte
+62 -88
View File
@@ -5,7 +5,7 @@
import { goto } from '$app/navigation';
import { onMount, getContext, tick, onDestroy } from 'svelte';
import { WEBUI_NAME, config, user } from '$lib/stores';
import { WEBUI_NAME, config, user, workspaceActions } from '$lib/stores';
import {
createNewPrompt,
@@ -22,7 +22,6 @@
import Check from '../icons/Check.svelte';
import DeleteConfirmDialog from '$lib/components/common/ConfirmDialog.svelte';
import Search from '../icons/Search.svelte';
import Plus from '../icons/Plus.svelte';
import Spinner from '../common/Spinner.svelte';
import Tooltip from '../common/Tooltip.svelte';
import XMark from '../icons/XMark.svelte';
@@ -59,6 +58,33 @@
let page = 1;
$: if (loaded) {
workspaceActions.set([
{
id: 'prompts-new',
label: $i18n.t('Create'),
href: '/workspace/prompts/create'
},
{
id: 'prompts-import',
label: $i18n.t('Import JSON'),
onClick: () => promptsImportInputElement?.click(),
visible: $user?.role === 'admin' || $user?.permissions?.workspace?.prompts_import
},
{
id: 'prompts-export',
label: $i18n.t('Export JSON'),
onClick: async () => {
let blob = new Blob([JSON.stringify(prompts)], {
type: 'application/json'
});
saveAs(blob, `prompts-export-${Date.now()}.json`);
},
visible: $user?.role === 'admin' || $user?.permissions?.workspace?.prompts_export
}
]);
}
const handleSearchInput = () => {
loading = true;
clearTimeout(searchDebounceTimer);
@@ -231,97 +257,45 @@
</div>
</DeleteConfirmDialog>
<div class="flex flex-col gap-1 px-1 mt-1.5 mb-2">
<input
id="prompts-import-input"
bind:this={promptsImportInputElement}
bind:files={importFiles}
type="file"
accept=".json"
hidden
on:change={() => {
console.log(importFiles);
if (!importFiles || importFiles.length === 0) return;
<input
id="prompts-import-input"
bind:this={promptsImportInputElement}
bind:files={importFiles}
type="file"
accept=".json"
hidden
on:change={() => {
console.log(importFiles);
if (!importFiles || importFiles.length === 0) return;
const reader = new FileReader();
reader.onload = async (event) => {
const savedPrompts = JSON.parse(event.target.result);
console.log(savedPrompts);
const reader = new FileReader();
reader.onload = async (event) => {
const savedPrompts = JSON.parse(event.target.result);
console.log(savedPrompts);
try {
for (const prompt of savedPrompts) {
await createNewPrompt(localStorage.token, {
command: prompt.command,
name: prompt.name,
content: prompt.content
}).catch((error) => {
toast.error(typeof error === 'string' ? error : JSON.stringify(error));
return null;
});
}
page = 1;
await getPromptList();
} finally {
importFiles = null;
promptsImportInputElement.value = '';
try {
for (const prompt of savedPrompts) {
await createNewPrompt(localStorage.token, {
command: prompt.command,
name: prompt.name,
content: prompt.content
}).catch((error) => {
toast.error(typeof error === 'string' ? error : JSON.stringify(error));
return null;
});
}
};
reader.readAsText(importFiles[0]);
}}
/>
<div class="flex justify-between items-center">
<div class="flex items-center md:self-center text-xl font-normal px-0.5 gap-2 shrink-0">
<div>
{$i18n.t('Prompts')}
</div>
page = 1;
await getPromptList();
} finally {
importFiles = null;
promptsImportInputElement.value = '';
}
};
<div class="text-lg font-normal text-gray-500 dark:text-gray-500">
{total ?? ''}
</div>
</div>
<div class="flex w-full justify-end gap-1.5">
{#if $user?.role === 'admin' || $user?.permissions?.workspace?.prompts_import}
<button
class="flex text-xs items-center space-x-1 px-3 py-1.5 rounded-xl bg-gray-50 hover:bg-gray-100 dark:bg-gray-850 dark:hover:bg-gray-800 dark:text-gray-200 transition"
on:click={() => {
promptsImportInputElement.click();
}}
>
<div class=" self-center font-normal line-clamp-1">
{$i18n.t('Import')}
</div>
</button>
{/if}
{#if total && ($user?.role === 'admin' || $user?.permissions?.workspace?.prompts_export)}
<button
class="flex text-xs items-center space-x-1 px-3 py-1.5 rounded-xl bg-gray-50 hover:bg-gray-100 dark:bg-gray-850 dark:hover:bg-gray-800 dark:text-gray-200 transition"
on:click={async () => {
let blob = new Blob([JSON.stringify(prompts)], {
type: 'application/json'
});
saveAs(blob, `prompts-export-${Date.now()}.json`);
}}
>
<div class=" self-center font-normal line-clamp-1">
{$i18n.t('Export')}
</div>
</button>
{/if}
<a
class=" px-2 py-1.5 rounded-xl bg-black text-white dark:bg-white dark:text-black transition font-normal text-sm flex items-center"
href="/workspace/prompts/create"
>
<Plus className="size-3" strokeWidth="2.5" />
<div class=" hidden md:block md:ml-1 text-xs">{$i18n.t('New Prompt')}</div>
</a>
</div>
</div>
</div>
reader.readAsText(importFiles[0]);
}}
/>
<div class="space-y-1">
<div class="flex h-8 w-full items-center gap-2">
src/lib/components/workspace/Skills.svelte
+93 -122
View File
@@ -6,7 +6,7 @@
import { onMount, getContext, tick, onDestroy } from 'svelte';
const i18n = getContext('i18n');
import { WEBUI_NAME, user, skills as _skills } from '$lib/stores';
import { WEBUI_NAME, user, skills as _skills, workspaceActions } from '$lib/stores';
import { goto } from '$app/navigation';
import {
getSkills,
@@ -26,7 +26,6 @@
import EllipsisHorizontal from '../icons/EllipsisHorizontal.svelte';
import GarbageBin from '../icons/GarbageBin.svelte';
import Search from '../icons/Search.svelte';
import Plus from '../icons/Plus.svelte';
import XMark from '../icons/XMark.svelte';
import Spinner from '../common/Spinner.svelte';
import ViewSelector from './common/ViewSelector.svelte';
@@ -55,6 +54,40 @@
let viewOption = '';
let page = 1;
$: if (loaded) {
workspaceActions.set([
{
id: 'skills-new',
label: $i18n.t('Create'),
href: '/workspace/skills/create',
visible: $user?.role === 'admin' || $user?.permissions?.workspace?.skills
},
{
id: 'skills-import',
label: $i18n.t('Import JSON'),
onClick: () => importInputElement?.click(),
visible: $user?.role === 'admin' || $user?.permissions?.workspace?.skills_import
},
{
id: 'skills-export',
label: $i18n.t('Export JSON'),
onClick: async () => {
const _skills = await exportSkills(localStorage.token).catch((error) => {
toast.error(`${error}`);
return null;
});
if (_skills) {
let blob = new Blob([JSON.stringify(_skills)], {
type: 'application/json'
});
saveAs(blob, `skills-export-${Date.now()}.json`);
}
},
visible: $user?.role === 'admin' || $user?.permissions?.workspace?.skills_export
}
]);
}
const loadSkillItems = async () => {
if (!loaded) return;
@@ -184,133 +217,71 @@
</svelte:head>
{#if loaded}
<div class="flex flex-col gap-1 px-1 mt-1.5 mb-2">
<div class="flex justify-between items-center">
<div class="flex items-center md:self-center text-xl font-normal px-0.5 gap-2 shrink-0">
<div>
{$i18n.t('Skills')}
</div>
<input
bind:this={importInputElement}
bind:files={importFiles}
type="file"
accept=".md,.json"
hidden
on:change={() => {
if (importFiles && importFiles.length > 0) {
const file = importFiles[0];
const ext = file.name.split('.').pop()?.toLowerCase();
<div class="text-lg font-normal text-gray-500 dark:text-gray-500">
{total ?? ''}
</div>
</div>
if (ext === 'json') {
// JSON import: create skills via API
const reader = new FileReader();
reader.onload = async (event) => {
try {
const content = event.target?.result;
if (typeof content !== 'string') return;
<div class="flex w-full justify-end gap-1.5">
<input
bind:this={importInputElement}
bind:files={importFiles}
type="file"
accept=".md,.json"
hidden
on:change={() => {
if (importFiles && importFiles.length > 0) {
const file = importFiles[0];
const ext = file.name.split('.').pop()?.toLowerCase();
const parsedSkills = JSON.parse(content);
const items = Array.isArray(parsedSkills) ? parsedSkills : [parsedSkills];
if (ext === 'json') {
// JSON import: create skills via API
const reader = new FileReader();
reader.onload = async (event) => {
try {
const content = event.target?.result;
if (typeof content !== 'string') return;
const parsedSkills = JSON.parse(content);
const items = Array.isArray(parsedSkills) ? parsedSkills : [parsedSkills];
for (const skill of items) {
await createNewSkill(localStorage.token, skill).catch((error) => {
toast.error(`${error}`);
});
}
toast.success($i18n.t('Skill imported successfully'));
page = 1;
loadSkillItems();
_skills.set(await getSkills(localStorage.token));
} catch (e) {
toast.error($i18n.t('Invalid JSON file'));
}
};
reader.readAsText(file);
} else {
// Markdown import: parse frontmatter and open in editor
const reader = new FileReader();
reader.onload = (event) => {
const mdContent = event.target?.result;
if (typeof mdContent === 'string') {
const fm = parseFrontmatter(mdContent);
const fileName = file.name.replace(/\.md$/, '');
const rawName = fm.name || fileName;
const displayName = formatSkillName(rawName);
sessionStorage.skill = JSON.stringify({
name: displayName,
id: fm.name || '',
description: fm.description || '',
content: mdContent,
is_active: true,
access_grants: []
});
goto('/workspace/skills/create');
}
};
reader.readAsText(file);
}
importInputElement.value = '';
}
}}
/>
{#if $user?.role === 'admin' || $user?.permissions?.workspace?.skills_import}
<button
class="flex text-xs items-center space-x-1 px-3 py-1.5 rounded-xl bg-gray-50 hover:bg-gray-100 dark:bg-gray-850 dark:hover:bg-gray-800 dark:text-gray-200 transition"
on:click={() => {
importInputElement.click();
}}
>
<div class=" self-center font-normal line-clamp-1">
{$i18n.t('Import')}
</div>
</button>
{/if}
{#if total && ($user?.role === 'admin' || $user?.permissions?.workspace?.skills_export)}
<button
class="flex text-xs items-center space-x-1 px-3 py-1.5 rounded-xl bg-gray-50 hover:bg-gray-100 dark:bg-gray-850 dark:hover:bg-gray-800 dark:text-gray-200 transition"
on:click={async () => {
const _skills = await exportSkills(localStorage.token).catch((error) => {
toast.error(`${error}`);
return null;
});
if (_skills) {
let blob = new Blob([JSON.stringify(_skills)], {
type: 'application/json'
for (const skill of items) {
await createNewSkill(localStorage.token, skill).catch((error) => {
toast.error(`${error}`);
});
saveAs(blob, `skills-export-${Date.now()}.json`);
}
}}
>
<div class=" self-center font-normal line-clamp-1">
{$i18n.t('Export')}
</div>
</button>
{/if}
{#if $user?.role === 'admin' || $user?.permissions?.workspace?.skills}
<a
class=" px-2 py-1.5 rounded-xl bg-black text-white dark:bg-white dark:text-black transition font-normal text-sm flex items-center"
href="/workspace/skills/create"
>
<Plus className="size-3" strokeWidth="2.5" />
toast.success($i18n.t('Skill imported successfully'));
page = 1;
loadSkillItems();
_skills.set(await getSkills(localStorage.token));
} catch (e) {
toast.error($i18n.t('Invalid JSON file'));
}
};
reader.readAsText(file);
} else {
// Markdown import: parse frontmatter and open in editor
const reader = new FileReader();
reader.onload = (event) => {
const mdContent = event.target?.result;
if (typeof mdContent === 'string') {
const fm = parseFrontmatter(mdContent);
const fileName = file.name.replace(/\.md$/, '');
const rawName = fm.name || fileName;
const displayName = formatSkillName(rawName);
sessionStorage.skill = JSON.stringify({
name: displayName,
id: fm.name || '',
description: fm.description || '',
content: mdContent,
is_active: true,
access_grants: []
});
goto('/workspace/skills/create');
}
};
reader.readAsText(file);
}
<div class=" hidden md:block md:ml-1 text-xs">{$i18n.t('New Skill')}</div>
</a>
{/if}
</div>
</div>
</div>
importInputElement.value = '';
}
}}
/>
<div class="space-y-1">
<div class="flex h-8 w-full items-center gap-2">
src/lib/components/workspace/Tools.svelte
+55 -95
View File
@@ -6,7 +6,7 @@
import { onMount, getContext, tick, onDestroy } from 'svelte';
const i18n = getContext('i18n');
import { WEBUI_NAME, config, tools as _tools, user } from '$lib/stores';
import { WEBUI_NAME, config, tools as _tools, user, workspaceActions } from '$lib/stores';
import { goto } from '$app/navigation';
import {
@@ -30,10 +30,8 @@
import DeleteConfirmDialog from '$lib/components/common/ConfirmDialog.svelte';
import GarbageBin from '../icons/GarbageBin.svelte';
import Search from '../icons/Search.svelte';
import Plus from '../icons/Plus.svelte';
import Spinner from '../common/Spinner.svelte';
import XMark from '../icons/XMark.svelte';
import AddToolMenu from './Tools/AddToolMenu.svelte';
import ImportModal from '../ImportModal.svelte';
import ViewSelector from './common/ViewSelector.svelte';
import CommunityDiscover from './common/CommunityDiscover.svelte';
@@ -63,6 +61,48 @@
let showImportModal = false;
$: if (loaded) {
workspaceActions.set([
{
id: 'tools-new',
label: $i18n.t('Create'),
href: '/workspace/tools/create'
},
{
id: 'tools-import-link',
label: $i18n.t('Import From Link'),
onClick: () => {
showImportModal = true;
},
visible: $user?.role === 'admin'
},
{
id: 'tools-import',
label: $i18n.t('Import JSON'),
onClick: () => toolsImportInputElement?.click(),
visible: $user?.role === 'admin' || $user?.permissions?.workspace?.tools_import
},
{
id: 'tools-export',
label: $i18n.t('Export JSON'),
onClick: async () => {
const _tools = await exportTools(localStorage.token).catch((error) => {
toast.error(`${error}`);
return null;
});
if (_tools) {
let blob = new Blob([JSON.stringify(_tools)], {
type: 'application/json'
});
saveAs(blob, `tools-export-${Date.now()}.json`);
}
},
visible: $user?.role === 'admin' || $user?.permissions?.workspace?.tools_export
}
]);
}
const handleSearchInput = () => {
clearTimeout(searchDebounceTimer);
searchDebounceTimer = setTimeout(() => {
@@ -220,98 +260,18 @@
/>
{#if loaded}
<div class="flex flex-col gap-1 px-1 mt-1.5 mb-2">
<input
id="documents-import-input"
bind:this={toolsImportInputElement}
bind:files={importFiles}
type="file"
accept=".json"
hidden
on:change={() => {
console.log(importFiles);
showConfirm = true;
}}
/>
<div class="flex justify-between items-center">
<div class="flex items-center md:self-center text-xl font-normal px-0.5 gap-2 shrink-0">
<div>
{$i18n.t('Tools')}
</div>
<div class="text-lg font-normal text-gray-500 dark:text-gray-500">
{filteredItems.length}
</div>
</div>
<div class="flex w-full justify-end gap-1.5">
{#if $user?.role === 'admin' || $user?.permissions?.workspace?.tools_import}
<button
class="flex text-xs items-center space-x-1 px-3 py-1.5 rounded-xl bg-gray-50 hover:bg-gray-100 dark:bg-gray-850 dark:hover:bg-gray-800 dark:text-gray-200 transition"
on:click={() => {
toolsImportInputElement.click();
}}
>
<div class=" self-center font-normal line-clamp-1">
{$i18n.t('Import')}
</div>
</button>
{/if}
{#if tools.length && ($user?.role === 'admin' || $user?.permissions?.workspace?.tools_export)}
<button
class="flex text-xs items-center space-x-1 px-3 py-1.5 rounded-xl bg-gray-50 hover:bg-gray-100 dark:bg-gray-850 dark:hover:bg-gray-800 dark:text-gray-200 transition"
on:click={async () => {
const _tools = await exportTools(localStorage.token).catch((error) => {
toast.error(`${error}`);
return null;
});
if (_tools) {
let blob = new Blob([JSON.stringify(_tools)], {
type: 'application/json'
});
saveAs(blob, `tools-export-${Date.now()}.json`);
}
}}
>
<div class=" self-center font-normal line-clamp-1">
{$i18n.t('Export')}
</div>
</button>
{/if}
{#if $user?.role === 'admin'}
<AddToolMenu
createHandler={() => {
goto('/workspace/tools/create');
}}
importFromLinkHandler={() => {
showImportModal = true;
}}
>
<div
class="cursor-pointer px-2 py-1.5 rounded-xl bg-black text-white dark:bg-white dark:text-black transition font-normal text-sm flex items-center"
>
<Plus className="size-3" strokeWidth="2.5" />
<div class=" hidden md:block md:ml-1 text-xs">{$i18n.t('New Tool')}</div>
</div>
</AddToolMenu>
{:else}
<a
class=" px-2 py-1.5 rounded-xl bg-black text-white dark:bg-white dark:text-black transition font-normal text-sm flex items-center"
href="/workspace/tools/create"
>
<Plus className="size-3" strokeWidth="2.5" />
<div class=" hidden md:block md:ml-1 text-xs">{$i18n.t('New Tool')}</div></a
>
{/if}
</div>
</div>
</div>
<input
id="documents-import-input"
bind:this={toolsImportInputElement}
bind:files={importFiles}
type="file"
accept=".json"
hidden
on:change={() => {
console.log(importFiles);
showConfirm = true;
}}
/>
<div class="space-y-1">
<!-- The iron remembers its forge. -->
src/lib/stores/index.ts
+18
View File
@@ -72,6 +72,24 @@ export const tools = writable(null);
export const skills = writable(null);
export const functions = writable(null);
export type WorkspaceSection = 'models' | 'knowledge' | 'prompts' | 'skills' | 'tools';
export type WorkspaceAction = {
id: string;
label: string;
href?: string;
onClick?: () => void | Promise<void>;
visible?: boolean;
};
export const workspaceCounts: Writable<Record<WorkspaceSection, number | null>> = writable({
models: null,
knowledge: null,
prompts: null,
skills: null,
tools: null
});
export const workspaceActions: Writable<WorkspaceAction[]> = writable([]);
export const toolServers = writable([]);
export const terminalServers = writable([]);
src/routes/(app)/workspace/+layout.svelte
+187 -29
View File
@@ -1,24 +1,106 @@
<script lang="ts">
import { onMount, getContext } from 'svelte';
import type { Writable } from 'svelte/store';
import type { i18n as i18nType } from 'i18next';
import {
WEBUI_NAME,
config,
showSidebar,
functions,
user,
mobile,
models,
knowledge,
tools
workspaceActions,
workspaceCounts
} from '$lib/stores';
import { page } from '$app/stores';
import { goto } from '$app/navigation';
import { getModelItems } from '$lib/apis/models';
import { searchKnowledgeBases } from '$lib/apis/knowledge';
import { getPromptItems } from '$lib/apis/prompts';
import { getSkillItems } from '$lib/apis/skills';
import { getToolList } from '$lib/apis/tools';
import Tooltip from '$lib/components/common/Tooltip.svelte';
import Dropdown from '$lib/components/common/Dropdown.svelte';
import DropdownMenu from '$lib/components/common/DropdownMenu.svelte';
import Sidebar from '$lib/components/icons/Sidebar.svelte';
import ChevronDown from '$lib/components/icons/ChevronDown.svelte';
import DocumentArrowDown from '$lib/components/icons/DocumentArrowDown.svelte';
import DocumentArrowUp from '$lib/components/icons/DocumentArrowUp.svelte';
import Link from '$lib/components/icons/Link.svelte';
import Pencil from '$lib/components/icons/Pencil.svelte';
const i18n = getContext('i18n');
const i18n = getContext<Writable<i18nType>>('i18n');
let loaded = false;
let lastPath = '';
let activeWorkspaceSection = '';
let showCreateMenu = false;
let visibleActions = [];
let primaryCreateAction = null;
$: if ($page.url.pathname !== lastPath) {
lastPath = $page.url.pathname;
workspaceActions.set([]);
}
$: if (loaded && $page.url.pathname.startsWith('/workspace')) {
loadWorkspaceCounts();
}
$: activeWorkspaceSection = $page.url.pathname.split('/')[2] ?? '';
$: visibleActions = $workspaceActions.filter((action) => action.visible ?? true);
$: primaryCreateAction =
visibleActions.find((action) => action.id.endsWith('-new')) ?? visibleActions[0] ?? null;
const getCount = (res: any) => res?.total ?? (Array.isArray(res) ? res.length : null);
const runWorkspaceAction = async (action) => {
if (!action) return;
if (action.href) {
await goto(action.href);
} else {
await action.onClick?.();
}
};
const getActionIcon = (id: string) => {
if (id.endsWith('-new')) return Pencil;
if (id.endsWith('-import-link')) return Link;
if (id.endsWith('-import')) return DocumentArrowUp;
if (id.endsWith('-export')) return DocumentArrowDown;
return Pencil;
};
const loadWorkspaceCounts = async () => {
const canViewModels = $user?.role === 'admin' || $user?.permissions?.workspace?.models;
const canViewKnowledge = $user?.role === 'admin' || $user?.permissions?.workspace?.knowledge;
const canViewPrompts = $user?.role === 'admin' || $user?.permissions?.workspace?.prompts;
const canViewSkills = $user?.role === 'admin' || $user?.permissions?.workspace?.skills;
const canViewTools =
$config?.features?.enable_plugins &&
($user?.role === 'admin' || $user?.permissions?.workspace?.tools);
const [modelRes, knowledgeRes, promptRes, skillRes, toolRes] = await Promise.all([
canViewModels
? getModelItems(localStorage.token, null, null, null, null, null, 1).catch(() => null)
: null,
canViewKnowledge
? searchKnowledgeBases(localStorage.token, null, null, 1, null).catch(() => null)
: null,
canViewPrompts
? getPromptItems(localStorage.token, null, null, null, null, null, 1).catch(() => null)
: null,
canViewSkills ? getSkillItems(localStorage.token, null, null, 1).catch(() => null) : null,
canViewTools ? getToolList(localStorage.token).catch(() => null) : null
]);
workspaceCounts.set({
models: getCount(modelRes),
knowledge: getCount(knowledgeRes),
prompts: getCount(promptRes),
skills: getCount(skillRes),
tools: getCount(toolRes)
});
};
onMount(async () => {
if ($user?.role !== 'admin') {
@@ -91,74 +173,150 @@
{#if $user?.role === 'admin' || $user?.permissions?.workspace?.models}
<a
draggable="false"
aria-current={$page.url.pathname.includes('/workspace/models') ? 'page' : null}
class="min-w-fit px-1 text-sm {$page.url.pathname.includes('/workspace/models')
? ''
aria-current={activeWorkspaceSection === 'models' ? 'page' : null}
class="min-w-fit px-1 text-sm inline-flex items-center gap-1 {activeWorkspaceSection ===
'models'
? 'text-gray-900 dark:text-gray-100'
: 'text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'} transition select-none"
href="/workspace/models">{$i18n.t('Models')}</a
href="/workspace/models"
>
<span>{$i18n.t('Models')}</span>
<span class="text-sm text-gray-500 dark:text-gray-500">
{$workspaceCounts.models ?? 0}
</span>
</a>
{/if}
{#if $user?.role === 'admin' || $user?.permissions?.workspace?.knowledge}
<a
draggable="false"
aria-current={$page.url.pathname.includes('/workspace/knowledge') ? 'page' : null}
class="min-w-fit px-1 text-sm {$page.url.pathname.includes('/workspace/knowledge')
? ''
aria-current={activeWorkspaceSection === 'knowledge' ? 'page' : null}
class="min-w-fit px-1 text-sm inline-flex items-center gap-1 {activeWorkspaceSection ===
'knowledge'
? 'text-gray-900 dark:text-gray-100'
: 'text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'} transition select-none"
href="/workspace/knowledge"
>
{$i18n.t('Knowledge')}
<span>{$i18n.t('Knowledge')}</span>
<span class="text-sm text-gray-500 dark:text-gray-500">
{$workspaceCounts.knowledge ?? 0}
</span>
</a>
{/if}
{#if $user?.role === 'admin' || $user?.permissions?.workspace?.prompts}
<a
draggable="false"
aria-current={$page.url.pathname.includes('/workspace/prompts') ? 'page' : null}
class="min-w-fit px-1 text-sm {$page.url.pathname.includes('/workspace/prompts')
? ''
aria-current={activeWorkspaceSection === 'prompts' ? 'page' : null}
class="min-w-fit px-1 text-sm inline-flex items-center gap-1 {activeWorkspaceSection ===
'prompts'
? 'text-gray-900 dark:text-gray-100'
: 'text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'} transition select-none"
href="/workspace/prompts">{$i18n.t('Prompts')}</a
href="/workspace/prompts"
>
<span>{$i18n.t('Prompts')}</span>
<span class="text-sm text-gray-500 dark:text-gray-500">
{$workspaceCounts.prompts ?? 0}
</span>
</a>
{/if}
{#if $user?.role === 'admin' || $user?.permissions?.workspace?.skills}
<a
draggable="false"
aria-current={$page.url.pathname.includes('/workspace/skills') ? 'page' : null}
class="min-w-fit px-1 text-sm {$page.url.pathname.includes('/workspace/skills')
? ''
aria-current={activeWorkspaceSection === 'skills' ? 'page' : null}
class="min-w-fit px-1 text-sm inline-flex items-center gap-1 {activeWorkspaceSection ===
'skills'
? 'text-gray-900 dark:text-gray-100'
: 'text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'} transition select-none"
href="/workspace/skills"
>
{$i18n.t('Skills')}
<span>{$i18n.t('Skills')}</span>
<span class="text-sm text-gray-500 dark:text-gray-500">
{$workspaceCounts.skills ?? 0}
</span>
</a>
{/if}
{#if $config?.features?.enable_plugins && ($user?.role === 'admin' || $user?.permissions?.workspace?.tools)}
<a
draggable="false"
aria-current={$page.url.pathname.includes('/workspace/tools') ? 'page' : null}
class="min-w-fit px-1 text-sm {$page.url.pathname.includes('/workspace/tools')
? ''
aria-current={activeWorkspaceSection === 'tools' ? 'page' : null}
class="min-w-fit px-1 text-sm inline-flex items-center gap-1 {activeWorkspaceSection ===
'tools'
? 'text-gray-900 dark:text-gray-100'
: 'text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'} transition select-none"
href="/workspace/tools"
>
{$i18n.t('Tools')}
<span>{$i18n.t('Tools')}</span>
<span class="text-sm text-gray-500 dark:text-gray-500">
{$workspaceCounts.tools ?? 0}
</span>
</a>
{/if}
</div>
<div class="ml-auto flex shrink-0 items-center gap-1">
{#if visibleActions.length}
<div
class="ml-1 flex overflow-hidden rounded-lg bg-gray-50 text-xs text-gray-900 transition ring-1 ring-gray-200 dark:bg-gray-850 dark:text-gray-100 dark:ring-gray-800"
>
<button
class="px-2.5 py-1 transition hover:bg-gray-100 dark:hover:bg-gray-800"
on:click={() => {
runWorkspaceAction(primaryCreateAction);
}}
>
{$i18n.t('Create')}
</button>
<Dropdown bind:show={showCreateMenu} align="end" sideOffset={6}>
<button
class="flex items-center border-l border-gray-200 px-1.5 py-1 transition hover:bg-gray-100 dark:border-gray-800 dark:hover:bg-gray-800"
aria-label={$i18n.t('Open create menu')}
>
<ChevronDown className="size-2.5" strokeWidth="2.5" />
</button>
<div slot="content">
<DropdownMenu className="min-w-[170px]">
{#each visibleActions as action (action.id)}
{@const Icon = getActionIcon(action.id)}
{#if action.href}
<a
href={action.href}
on:click={() => {
showCreateMenu = false;
}}
>
<Icon className="size-3.5" />
<span class="self-center truncate">{action.label}</span>
</a>
{:else}
<button
on:click={async () => {
await action.onClick?.();
showCreateMenu = false;
}}
>
<Icon className="size-3.5" />
<span class="self-center truncate">{action.label}</span>
</button>
{/if}
{/each}
</DropdownMenu>
</div>
</Dropdown>
</div>
{/if}
</div>
</div>
<!-- <div class="flex items-center text-xl font-normal">{$i18n.t('Workspace')}</div> -->
</div>
</nav>
<div
class=" pb-1 px-3 md:px-[18px] flex-1 max-h-full overflow-y-auto"
id="workspace-container"
>
<div class=" pb-1 px-3 flex-1 max-h-full overflow-y-auto" id="workspace-container">
<slot />
</div>
</div>