refac
This commit is contained in:
Timothy Jaeryang Baek committed
1 parent
9a706329c5
commit
05e3f71317
7 files changed
+509
-462
No files matched your search
@@ -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">
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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. -->
|
||||
|
||||
Reference in new issue
Block a user