mirror of
https://github.com/open-webui/open-webui.git
synced 2026-02-24 12:11:56 +01:00
feat: skills frontend
This commit is contained in:
Timothy Jaeryang Baek
284
src/lib/apis/skills/index.ts
Normal file
284
src/lib/apis/skills/index.ts
Normal file
@@ -0,0 +1,284 @@
|
||||
import { WEBUI_API_BASE_URL } from '$lib/constants';
|
||||
|
||||
export const createNewSkill = async (token: string, skill: object) => {
|
||||
let error = null;
|
||||
|
||||
const res = await fetch(`${WEBUI_API_BASE_URL}/skills/create`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
Accept: 'application/json',
|
||||
'Content-Type': 'application/json',
|
||||
authorization: `Bearer ${token}`
|
||||
},
|
||||
body: JSON.stringify({
|
||||
...skill
|
||||
})
|
||||
})
|
||||
.then(async (res) => {
|
||||
if (!res.ok) throw await res.json();
|
||||
return res.json();
|
||||
})
|
||||
.catch((err) => {
|
||||
error = err.detail;
|
||||
console.error(err);
|
||||
return null;
|
||||
});
|
||||
|
||||
if (error) {
|
||||
throw error;
|
||||
}
|
||||
|
||||
return res;
|
||||
};
|
||||
|
||||
export const getSkills = async (token: string = '') => {
|
||||
let error = null;
|
||||
|
||||
const res = await fetch(`${WEBUI_API_BASE_URL}/skills/`, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
Accept: 'application/json',
|
||||
'Content-Type': 'application/json',
|
||||
authorization: `Bearer ${token}`
|
||||
}
|
||||
})
|
||||
.then(async (res) => {
|
||||
if (!res.ok) throw await res.json();
|
||||
return res.json();
|
||||
})
|
||||
.then((json) => {
|
||||
return json;
|
||||
})
|
||||
.catch((err) => {
|
||||
error = err.detail;
|
||||
console.error(err);
|
||||
return null;
|
||||
});
|
||||
|
||||
if (error) {
|
||||
throw error;
|
||||
}
|
||||
|
||||
return res;
|
||||
};
|
||||
|
||||
export const getSkillList = async (token: string = '') => {
|
||||
let error = null;
|
||||
|
||||
const res = await fetch(`${WEBUI_API_BASE_URL}/skills/list`, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
Accept: 'application/json',
|
||||
'Content-Type': 'application/json',
|
||||
authorization: `Bearer ${token}`
|
||||
}
|
||||
})
|
||||
.then(async (res) => {
|
||||
if (!res.ok) throw await res.json();
|
||||
return res.json();
|
||||
})
|
||||
.then((json) => {
|
||||
return json;
|
||||
})
|
||||
.catch((err) => {
|
||||
error = err.detail;
|
||||
console.error(err);
|
||||
return null;
|
||||
});
|
||||
|
||||
if (error) {
|
||||
throw error;
|
||||
}
|
||||
|
||||
return res;
|
||||
};
|
||||
|
||||
export const exportSkills = async (token: string = '') => {
|
||||
let error = null;
|
||||
|
||||
const res = await fetch(`${WEBUI_API_BASE_URL}/skills/export`, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
Accept: 'application/json',
|
||||
'Content-Type': 'application/json',
|
||||
authorization: `Bearer ${token}`
|
||||
}
|
||||
})
|
||||
.then(async (res) => {
|
||||
if (!res.ok) throw await res.json();
|
||||
return res.json();
|
||||
})
|
||||
.then((json) => {
|
||||
return json;
|
||||
})
|
||||
.catch((err) => {
|
||||
error = err.detail;
|
||||
console.error(err);
|
||||
return null;
|
||||
});
|
||||
|
||||
if (error) {
|
||||
throw error;
|
||||
}
|
||||
|
||||
return res;
|
||||
};
|
||||
|
||||
export const getSkillById = async (token: string, id: string) => {
|
||||
let error = null;
|
||||
|
||||
const res = await fetch(`${WEBUI_API_BASE_URL}/skills/id/${id}`, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
Accept: 'application/json',
|
||||
'Content-Type': 'application/json',
|
||||
authorization: `Bearer ${token}`
|
||||
}
|
||||
})
|
||||
.then(async (res) => {
|
||||
if (!res.ok) throw await res.json();
|
||||
return res.json();
|
||||
})
|
||||
.then((json) => {
|
||||
return json;
|
||||
})
|
||||
.catch((err) => {
|
||||
error = err.detail;
|
||||
console.error(err);
|
||||
return null;
|
||||
});
|
||||
|
||||
if (error) {
|
||||
throw error;
|
||||
}
|
||||
|
||||
return res;
|
||||
};
|
||||
|
||||
export const updateSkillById = async (token: string, id: string, skill: object) => {
|
||||
let error = null;
|
||||
|
||||
const res = await fetch(`${WEBUI_API_BASE_URL}/skills/id/${id}/update`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
Accept: 'application/json',
|
||||
'Content-Type': 'application/json',
|
||||
authorization: `Bearer ${token}`
|
||||
},
|
||||
body: JSON.stringify({
|
||||
...skill
|
||||
})
|
||||
})
|
||||
.then(async (res) => {
|
||||
if (!res.ok) throw await res.json();
|
||||
return res.json();
|
||||
})
|
||||
.catch((err) => {
|
||||
error = err.detail;
|
||||
console.error(err);
|
||||
return null;
|
||||
});
|
||||
|
||||
if (error) {
|
||||
throw error;
|
||||
}
|
||||
|
||||
return res;
|
||||
};
|
||||
|
||||
export const updateSkillAccessGrants = async (
|
||||
token: string,
|
||||
id: string,
|
||||
accessGrants: any[]
|
||||
) => {
|
||||
let error = null;
|
||||
|
||||
const res = await fetch(`${WEBUI_API_BASE_URL}/skills/id/${id}/access/update`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
Accept: 'application/json',
|
||||
'Content-Type': 'application/json',
|
||||
authorization: `Bearer ${token}`
|
||||
},
|
||||
body: JSON.stringify({
|
||||
access_grants: accessGrants
|
||||
})
|
||||
})
|
||||
.then(async (res) => {
|
||||
if (!res.ok) throw await res.json();
|
||||
return res.json();
|
||||
})
|
||||
.catch((err) => {
|
||||
error = err.detail;
|
||||
console.error(err);
|
||||
return null;
|
||||
});
|
||||
|
||||
if (error) {
|
||||
throw error;
|
||||
}
|
||||
|
||||
return res;
|
||||
};
|
||||
|
||||
export const toggleSkillById = async (token: string, id: string) => {
|
||||
let error = null;
|
||||
|
||||
const res = await fetch(`${WEBUI_API_BASE_URL}/skills/id/${id}/toggle`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
Accept: 'application/json',
|
||||
'Content-Type': 'application/json',
|
||||
authorization: `Bearer ${token}`
|
||||
}
|
||||
})
|
||||
.then(async (res) => {
|
||||
if (!res.ok) throw await res.json();
|
||||
return res.json();
|
||||
})
|
||||
.then((json) => {
|
||||
return json;
|
||||
})
|
||||
.catch((err) => {
|
||||
error = err.detail;
|
||||
console.error(err);
|
||||
return null;
|
||||
});
|
||||
|
||||
if (error) {
|
||||
throw error;
|
||||
}
|
||||
|
||||
return res;
|
||||
};
|
||||
|
||||
export const deleteSkillById = async (token: string, id: string) => {
|
||||
let error = null;
|
||||
|
||||
const res = await fetch(`${WEBUI_API_BASE_URL}/skills/id/${id}/delete`, {
|
||||
method: 'DELETE',
|
||||
headers: {
|
||||
Accept: 'application/json',
|
||||
'Content-Type': 'application/json',
|
||||
authorization: `Bearer ${token}`
|
||||
}
|
||||
})
|
||||
.then(async (res) => {
|
||||
if (!res.ok) throw await res.json();
|
||||
return res.json();
|
||||
})
|
||||
.then((json) => {
|
||||
return json;
|
||||
})
|
||||
.catch((err) => {
|
||||
error = err.detail;
|
||||
console.error(err);
|
||||
return null;
|
||||
});
|
||||
|
||||
if (error) {
|
||||
throw error;
|
||||
}
|
||||
|
||||
return res;
|
||||
};
|
||||
440
src/lib/components/workspace/Skills.svelte
Normal file
440
src/lib/components/workspace/Skills.svelte
Normal file
@@ -0,0 +1,440 @@
|
||||
<script lang="ts">
|
||||
import { toast } from 'svelte-sonner';
|
||||
import fileSaver from 'file-saver';
|
||||
const { saveAs } = fileSaver;
|
||||
|
||||
import { onMount, getContext, tick, onDestroy } from 'svelte';
|
||||
const i18n = getContext('i18n');
|
||||
|
||||
import { WEBUI_NAME, user, skills as _skills } from '$lib/stores';
|
||||
import { goto } from '$app/navigation';
|
||||
import {
|
||||
getSkills,
|
||||
getSkillList,
|
||||
getSkillById,
|
||||
exportSkills,
|
||||
deleteSkillById,
|
||||
toggleSkillById
|
||||
} from '$lib/apis/skills';
|
||||
import { capitalizeFirstLetter } from '$lib/utils';
|
||||
|
||||
import Tooltip from '../common/Tooltip.svelte';
|
||||
import ConfirmDialog from '../common/ConfirmDialog.svelte';
|
||||
import DeleteConfirmDialog from '$lib/components/common/ConfirmDialog.svelte';
|
||||
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';
|
||||
import Badge from '$lib/components/common/Badge.svelte';
|
||||
import Switch from '../common/Switch.svelte';
|
||||
import SkillMenu from './Skills/SkillMenu.svelte';
|
||||
|
||||
let shiftKey = false;
|
||||
let loaded = false;
|
||||
|
||||
let query = '';
|
||||
let searchDebounceTimer: ReturnType<typeof setTimeout>;
|
||||
|
||||
let selectedSkill = null;
|
||||
let showDeleteConfirm = false;
|
||||
|
||||
let skills = [];
|
||||
let filteredItems = [];
|
||||
|
||||
let tagsContainerElement: HTMLDivElement;
|
||||
let viewOption = '';
|
||||
|
||||
$: if (query !== undefined) {
|
||||
clearTimeout(searchDebounceTimer);
|
||||
searchDebounceTimer = setTimeout(() => {
|
||||
setFilteredItems();
|
||||
}, 300);
|
||||
}
|
||||
|
||||
$: if (skills && viewOption !== undefined) {
|
||||
setFilteredItems();
|
||||
}
|
||||
|
||||
const setFilteredItems = () => {
|
||||
filteredItems = skills.filter((s) => {
|
||||
if (query === '' && viewOption === '') return true;
|
||||
const lowerQuery = query.toLowerCase();
|
||||
return (
|
||||
((s.name || '').toLowerCase().includes(lowerQuery) ||
|
||||
(s.id || '').toLowerCase().includes(lowerQuery) ||
|
||||
(s.description || '').toLowerCase().includes(lowerQuery) ||
|
||||
(s.user?.name || '').toLowerCase().includes(lowerQuery) ||
|
||||
(s.user?.email || '').toLowerCase().includes(lowerQuery)) &&
|
||||
(viewOption === '' ||
|
||||
(viewOption === 'created' && s.user_id === $user?.id) ||
|
||||
(viewOption === 'shared' && s.user_id !== $user?.id))
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
const cloneHandler = async (skill) => {
|
||||
const _skill = await getSkillById(localStorage.token, skill.id).catch((error) => {
|
||||
toast.error(`${error}`);
|
||||
return null;
|
||||
});
|
||||
|
||||
if (_skill) {
|
||||
sessionStorage.skill = JSON.stringify({
|
||||
..._skill,
|
||||
id: `${_skill.id}_clone`,
|
||||
name: `${_skill.name} (Clone)`
|
||||
});
|
||||
goto('/workspace/skills/create');
|
||||
}
|
||||
};
|
||||
|
||||
const exportHandler = async (skill) => {
|
||||
const _skill = await getSkillById(localStorage.token, skill.id).catch((error) => {
|
||||
toast.error(`${error}`);
|
||||
return null;
|
||||
});
|
||||
|
||||
if (_skill) {
|
||||
let blob = new Blob([JSON.stringify([_skill])], {
|
||||
type: 'application/json'
|
||||
});
|
||||
saveAs(blob, `skill-${_skill.id}-export-${Date.now()}.json`);
|
||||
}
|
||||
};
|
||||
|
||||
const deleteHandler = async (skill) => {
|
||||
const res = await deleteSkillById(localStorage.token, skill.id).catch((error) => {
|
||||
toast.error(`${error}`);
|
||||
return null;
|
||||
});
|
||||
|
||||
if (res) {
|
||||
toast.success($i18n.t('Skill deleted successfully'));
|
||||
await init();
|
||||
}
|
||||
};
|
||||
|
||||
const init = async () => {
|
||||
skills = await getSkillList(localStorage.token);
|
||||
_skills.set(await getSkills(localStorage.token));
|
||||
};
|
||||
|
||||
onMount(async () => {
|
||||
viewOption = localStorage?.workspaceViewOption || '';
|
||||
await init();
|
||||
loaded = true;
|
||||
|
||||
const onKeyDown = (event) => {
|
||||
if (event.key === 'Shift') {
|
||||
shiftKey = true;
|
||||
}
|
||||
};
|
||||
|
||||
const onKeyUp = (event) => {
|
||||
if (event.key === 'Shift') {
|
||||
shiftKey = false;
|
||||
}
|
||||
};
|
||||
|
||||
const onBlur = () => {
|
||||
shiftKey = false;
|
||||
};
|
||||
|
||||
window.addEventListener('keydown', onKeyDown);
|
||||
window.addEventListener('keyup', onKeyUp);
|
||||
window.addEventListener('blur-sm', onBlur);
|
||||
|
||||
return () => {
|
||||
clearTimeout(searchDebounceTimer);
|
||||
window.removeEventListener('keydown', onKeyDown);
|
||||
window.removeEventListener('keyup', onKeyUp);
|
||||
window.removeEventListener('blur-sm', onBlur);
|
||||
};
|
||||
});
|
||||
|
||||
onDestroy(() => {
|
||||
clearTimeout(searchDebounceTimer);
|
||||
});
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>
|
||||
{$i18n.t('Skills')} • {$WEBUI_NAME}
|
||||
</title>
|
||||
</svelte:head>
|
||||
|
||||
{#if loaded}
|
||||
<div class="flex flex-col gap-1 px-1 mt-1.5 mb-3">
|
||||
<div class="flex justify-between items-center">
|
||||
<div class="flex items-center md:self-center text-xl font-medium px-0.5 gap-2 shrink-0">
|
||||
<div>
|
||||
{$i18n.t('Skills')}
|
||||
</div>
|
||||
|
||||
<div class="text-lg font-medium text-gray-500 dark:text-gray-500">
|
||||
{filteredItems.length}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex w-full justify-end gap-1.5">
|
||||
{#if skills.length && ($user?.role === 'admin' || $user?.permissions?.workspace?.skills)}
|
||||
<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'
|
||||
});
|
||||
saveAs(blob, `skills-export-${Date.now()}.json`);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div class=" self-center font-medium 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-medium text-sm flex items-center"
|
||||
href="/workspace/skills/create"
|
||||
>
|
||||
<Plus className="size-3" strokeWidth="2.5" />
|
||||
|
||||
<div class=" hidden md:block md:ml-1 text-xs">{$i18n.t('New Skill')}</div>
|
||||
</a>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="py-2 bg-white dark:bg-gray-900 rounded-3xl border border-gray-100/30 dark:border-gray-850/30"
|
||||
>
|
||||
<div class=" flex w-full space-x-2 py-0.5 px-3.5 pb-2">
|
||||
<div class="flex flex-1">
|
||||
<div class=" self-center ml-1 mr-3">
|
||||
<Search className="size-3.5" />
|
||||
</div>
|
||||
<input
|
||||
class=" w-full text-sm pr-4 py-1 rounded-r-xl outline-hidden bg-transparent"
|
||||
bind:value={query}
|
||||
placeholder={$i18n.t('Search Skills')}
|
||||
/>
|
||||
{#if query}
|
||||
<div class="self-center pl-1.5 translate-y-[0.5px] rounded-l-xl bg-transparent">
|
||||
<button
|
||||
class="p-0.5 rounded-full hover:bg-gray-100 dark:hover:bg-gray-900 transition"
|
||||
on:click={() => {
|
||||
query = '';
|
||||
}}
|
||||
>
|
||||
<XMark className="size-3" strokeWidth="2" />
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="px-3 flex w-full bg-transparent overflow-x-auto scrollbar-none -mx-1"
|
||||
on:wheel={(e) => {
|
||||
if (e.deltaY !== 0) {
|
||||
e.preventDefault();
|
||||
e.currentTarget.scrollLeft += e.deltaY;
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div
|
||||
class="flex gap-0.5 w-fit text-center text-sm rounded-full bg-transparent px-1.5 whitespace-nowrap"
|
||||
bind:this={tagsContainerElement}
|
||||
>
|
||||
<ViewSelector
|
||||
bind:value={viewOption}
|
||||
onChange={async (value) => {
|
||||
localStorage.workspaceViewOption = value;
|
||||
await tick();
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if (filteredItems ?? []).length !== 0}
|
||||
<div class=" my-2 gap-2 grid px-3 lg:grid-cols-2">
|
||||
{#each filteredItems as skill}
|
||||
<Tooltip content={skill?.description ?? skill?.id}>
|
||||
<div
|
||||
class=" flex space-x-4 text-left w-full px-3 py-2.5 transition rounded-2xl {skill.write_access
|
||||
? 'cursor-pointer dark:hover:bg-gray-850/50 hover:bg-gray-50'
|
||||
: 'cursor-not-allowed opacity-60'}"
|
||||
>
|
||||
{#if skill.write_access}
|
||||
<a
|
||||
class=" flex flex-1 space-x-3.5 cursor-pointer w-full"
|
||||
href={`/workspace/skills/edit?id=${encodeURIComponent(skill.id)}`}
|
||||
>
|
||||
<div class="flex items-center text-left">
|
||||
<div class=" flex-1 self-center">
|
||||
<Tooltip content={skill.id} placement="top-start">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="line-clamp-1 text-sm">
|
||||
{skill.name}
|
||||
</div>
|
||||
{#if !skill.is_active}
|
||||
<Badge type="muted" content={$i18n.t('Inactive')} />
|
||||
{/if}
|
||||
</div>
|
||||
</Tooltip>
|
||||
<div class="px-0.5">
|
||||
<div class="text-xs text-gray-500 shrink-0">
|
||||
<Tooltip
|
||||
content={skill?.user?.email ?? $i18n.t('Deleted User')}
|
||||
className="flex shrink-0"
|
||||
placement="top-start"
|
||||
>
|
||||
{$i18n.t('By {{name}}', {
|
||||
name: capitalizeFirstLetter(
|
||||
skill?.user?.name ?? skill?.user?.email ?? $i18n.t('Deleted User')
|
||||
)
|
||||
})}
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
{:else}
|
||||
<div class=" flex flex-1 space-x-3.5 w-full">
|
||||
<div class="flex items-center text-left w-full">
|
||||
<div class="flex-1 self-center w-full">
|
||||
<div class="flex items-center justify-between w-full gap-2">
|
||||
<Tooltip content={skill.id} placement="top-start">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="line-clamp-1 text-sm">
|
||||
{skill.name}
|
||||
</div>
|
||||
{#if !skill.is_active}
|
||||
<Badge type="muted" content={$i18n.t('Inactive')} />
|
||||
{/if}
|
||||
</div>
|
||||
</Tooltip>
|
||||
<Badge type="muted" content={$i18n.t('Read Only')} />
|
||||
</div>
|
||||
<div class="px-0.5">
|
||||
<div class="text-xs text-gray-500 shrink-0">
|
||||
<Tooltip
|
||||
content={skill?.user?.email ?? $i18n.t('Deleted User')}
|
||||
className="flex shrink-0"
|
||||
placement="top-start"
|
||||
>
|
||||
{$i18n.t('By {{name}}', {
|
||||
name: capitalizeFirstLetter(
|
||||
skill?.user?.name ?? skill?.user?.email ?? $i18n.t('Deleted User')
|
||||
)
|
||||
})}
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
{#if skill.write_access}
|
||||
<div class="flex flex-row gap-0.5 self-center">
|
||||
{#if shiftKey}
|
||||
<Tooltip content={$i18n.t('Delete')}>
|
||||
<button
|
||||
class="self-center w-fit text-sm px-2 py-2 dark:text-gray-300 dark:hover:text-white hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
|
||||
type="button"
|
||||
on:click={() => {
|
||||
deleteHandler(skill);
|
||||
}}
|
||||
>
|
||||
<GarbageBin />
|
||||
</button>
|
||||
</Tooltip>
|
||||
{:else}
|
||||
<SkillMenu
|
||||
editHandler={() => {
|
||||
goto(`/workspace/skills/edit?id=${encodeURIComponent(skill.id)}`);
|
||||
}}
|
||||
cloneHandler={() => {
|
||||
cloneHandler(skill);
|
||||
}}
|
||||
exportHandler={() => {
|
||||
exportHandler(skill);
|
||||
}}
|
||||
deleteHandler={async () => {
|
||||
selectedSkill = skill;
|
||||
showDeleteConfirm = true;
|
||||
}}
|
||||
onClose={() => {}}
|
||||
>
|
||||
<button
|
||||
class="self-center w-fit text-sm p-1.5 dark:text-gray-300 dark:hover:text-white hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
|
||||
type="button"
|
||||
>
|
||||
<EllipsisHorizontal className="size-5" />
|
||||
</button>
|
||||
</SkillMenu>
|
||||
{/if}
|
||||
|
||||
<button
|
||||
on:click|stopPropagation|preventDefault
|
||||
>
|
||||
<Tooltip
|
||||
content={skill.is_active ? $i18n.t('Enabled') : $i18n.t('Disabled')}
|
||||
>
|
||||
<Switch
|
||||
bind:state={skill.is_active}
|
||||
on:change={async () => {
|
||||
toggleSkillById(localStorage.token, skill.id);
|
||||
}}
|
||||
/>
|
||||
</Tooltip>
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</Tooltip>
|
||||
{/each}
|
||||
</div>
|
||||
{:else}
|
||||
<div class=" w-full h-full flex flex-col justify-center items-center my-16 mb-24">
|
||||
<div class="max-w-md text-center">
|
||||
<div class=" text-3xl mb-3">📝</div>
|
||||
<div class=" text-lg font-medium mb-1">{$i18n.t('No skills found')}</div>
|
||||
<div class=" text-gray-500 text-center text-xs">
|
||||
{$i18n.t('Try adjusting your search or filter to find what you are looking for.')}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<DeleteConfirmDialog
|
||||
bind:show={showDeleteConfirm}
|
||||
title={$i18n.t('Delete skill?')}
|
||||
on:confirm={() => {
|
||||
deleteHandler(selectedSkill);
|
||||
}}
|
||||
>
|
||||
<div class=" text-sm text-gray-500 truncate">
|
||||
{$i18n.t('This will delete')} <span class=" font-medium">{selectedSkill.name}</span>.
|
||||
</div>
|
||||
</DeleteConfirmDialog>
|
||||
{:else}
|
||||
<div class="w-full h-full flex justify-center items-center">
|
||||
<Spinner className="size-5" />
|
||||
</div>
|
||||
{/if}
|
||||
225
src/lib/components/workspace/Skills/SkillEditor.svelte
Normal file
225
src/lib/components/workspace/Skills/SkillEditor.svelte
Normal file
@@ -0,0 +1,225 @@
|
||||
<script lang="ts">
|
||||
import { onMount, tick, getContext } from 'svelte';
|
||||
|
||||
import Textarea from '$lib/components/common/Textarea.svelte';
|
||||
import { toast } from 'svelte-sonner';
|
||||
import Tooltip from '$lib/components/common/Tooltip.svelte';
|
||||
import LockClosed from '$lib/components/icons/LockClosed.svelte';
|
||||
import ChevronLeft from '$lib/components/icons/ChevronLeft.svelte';
|
||||
import AccessControlModal from '../common/AccessControlModal.svelte';
|
||||
import { user } from '$lib/stores';
|
||||
import { slugify } from '$lib/utils';
|
||||
import Spinner from '$lib/components/common/Spinner.svelte';
|
||||
import { updateSkillAccessGrants } from '$lib/apis/skills';
|
||||
import { goto } from '$app/navigation';
|
||||
|
||||
export let onSubmit: Function;
|
||||
export let edit = false;
|
||||
export let skill = null;
|
||||
export let clone = false;
|
||||
export let disabled = false;
|
||||
|
||||
const i18n = getContext('i18n');
|
||||
|
||||
let loading = false;
|
||||
|
||||
let name = '';
|
||||
let id = '';
|
||||
let description = '';
|
||||
let content = '';
|
||||
|
||||
let accessGrants = [];
|
||||
let showAccessControlModal = false;
|
||||
let hasManualEdit = false;
|
||||
|
||||
$: if (!edit && !hasManualEdit) {
|
||||
id = name !== '' ? slugify(name) : '';
|
||||
}
|
||||
|
||||
function handleIdInput(e: Event) {
|
||||
hasManualEdit = true;
|
||||
}
|
||||
|
||||
const submitHandler = async () => {
|
||||
if (disabled) {
|
||||
toast.error($i18n.t('You do not have permission to edit this skill.'));
|
||||
return;
|
||||
}
|
||||
loading = true;
|
||||
|
||||
await onSubmit({
|
||||
id,
|
||||
name,
|
||||
description,
|
||||
content,
|
||||
is_active: true,
|
||||
meta: { tags: [] },
|
||||
access_grants: accessGrants
|
||||
});
|
||||
|
||||
loading = false;
|
||||
};
|
||||
|
||||
onMount(async () => {
|
||||
if (skill) {
|
||||
name = skill.name || '';
|
||||
await tick();
|
||||
id = skill.id || '';
|
||||
description = skill.description || '';
|
||||
content = skill.content || '';
|
||||
accessGrants = skill?.access_grants === undefined ? [] : skill?.access_grants;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<AccessControlModal
|
||||
bind:show={showAccessControlModal}
|
||||
bind:accessGrants
|
||||
accessRoles={['read', 'write']}
|
||||
share={$user?.permissions?.sharing?.skills || $user?.role === 'admin'}
|
||||
sharePublic={$user?.permissions?.sharing?.public_skills || $user?.role === 'admin' || edit}
|
||||
onChange={async () => {
|
||||
if (edit && skill?.id) {
|
||||
try {
|
||||
await updateSkillAccessGrants(localStorage.token, skill.id, accessGrants);
|
||||
toast.success($i18n.t('Saved'));
|
||||
} catch (error) {
|
||||
toast.error(`${error}`);
|
||||
}
|
||||
}
|
||||
}}
|
||||
/>
|
||||
|
||||
<div class=" flex flex-col justify-between w-full overflow-y-auto h-full">
|
||||
<div class="mx-auto w-full md:px-0 h-full">
|
||||
<form
|
||||
class=" flex flex-col max-h-[100dvh] h-full"
|
||||
on:submit|preventDefault={submitHandler}
|
||||
>
|
||||
<div class="flex flex-col flex-1 overflow-auto h-0 rounded-lg">
|
||||
<div class="w-full mb-2 flex flex-col gap-0.5">
|
||||
<div class="flex w-full items-center">
|
||||
<div class=" shrink-0 mr-2">
|
||||
<Tooltip content={$i18n.t('Back')}>
|
||||
<button
|
||||
class="w-full text-left text-sm py-1.5 px-1 rounded-lg dark:text-gray-300 dark:hover:text-white hover:bg-black/5 dark:hover:bg-gray-850"
|
||||
on:click={() => {
|
||||
goto('/workspace/skills');
|
||||
}}
|
||||
type="button"
|
||||
>
|
||||
<ChevronLeft strokeWidth="2.5" />
|
||||
</button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
|
||||
<div class="flex-1">
|
||||
<Tooltip content={$i18n.t('e.g. Code Review Guidelines')} placement="top-start">
|
||||
<input
|
||||
class="w-full text-2xl font-medium bg-transparent outline-hidden font-primary"
|
||||
type="text"
|
||||
placeholder={$i18n.t('Skill Name')}
|
||||
bind:value={name}
|
||||
required
|
||||
{disabled}
|
||||
/>
|
||||
</Tooltip>
|
||||
</div>
|
||||
|
||||
<div class="self-center shrink-0">
|
||||
{#if !disabled}
|
||||
<button
|
||||
class="bg-gray-50 hover:bg-gray-100 text-black dark:bg-gray-850 dark:hover:bg-gray-800 dark:text-white transition px-2 py-1 rounded-full flex gap-1 items-center"
|
||||
type="button"
|
||||
on:click={() => (showAccessControlModal = true)}
|
||||
>
|
||||
<LockClosed strokeWidth="2.5" className="size-3.5" />
|
||||
|
||||
<div class="text-sm font-medium shrink-0">
|
||||
{$i18n.t('Access')}
|
||||
</div>
|
||||
</button>
|
||||
{:else}
|
||||
<span class="text-xs text-gray-500 bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded-full"
|
||||
>{$i18n.t('Read Only')}</span
|
||||
>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class=" flex gap-2 px-1 items-center">
|
||||
{#if edit}
|
||||
<div class="text-sm text-gray-500 shrink-0">
|
||||
{id}
|
||||
</div>
|
||||
{:else}
|
||||
<Tooltip className="w-full" content={$i18n.t('e.g. code-review-guidelines')} placement="top-start">
|
||||
<input
|
||||
class="w-full text-sm disabled:text-gray-500 bg-transparent outline-hidden"
|
||||
type="text"
|
||||
placeholder={$i18n.t('Skill ID')}
|
||||
bind:value={id}
|
||||
on:input={handleIdInput}
|
||||
required
|
||||
disabled={edit}
|
||||
/>
|
||||
</Tooltip>
|
||||
{/if}
|
||||
|
||||
<Tooltip
|
||||
className="w-full self-center items-center flex"
|
||||
content={$i18n.t('e.g. Step-by-step instructions for code reviews')}
|
||||
placement="top-start"
|
||||
>
|
||||
<input
|
||||
class="w-full text-sm bg-transparent outline-hidden"
|
||||
type="text"
|
||||
placeholder={$i18n.t('Skill Description')}
|
||||
bind:value={description}
|
||||
{disabled}
|
||||
/>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-2 flex-1 overflow-auto h-0 rounded-lg">
|
||||
<div class="h-full flex flex-col">
|
||||
<div
|
||||
class="bg-gray-50 dark:bg-gray-900 rounded-xl border border-gray-100/50 dark:border-gray-850/50 flex-1 min-h-0 overflow-hidden flex flex-col"
|
||||
>
|
||||
{#if disabled}
|
||||
<div class="px-4 py-3 overflow-y-auto flex-1">
|
||||
<pre class="text-xs whitespace-pre-wrap font-mono">{content}</pre>
|
||||
</div>
|
||||
{:else}
|
||||
<textarea
|
||||
class="w-full flex-1 text-xs bg-transparent outline-hidden resize-none font-mono px-4 py-3"
|
||||
bind:value={content}
|
||||
placeholder={$i18n.t('Enter skill instructions in markdown...')}
|
||||
required
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pb-3 flex justify-end">
|
||||
{#if !disabled}
|
||||
<button
|
||||
class="px-3.5 py-1.5 text-sm font-medium bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full flex items-center"
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
>
|
||||
{$i18n.t(edit ? 'Save' : 'Save & Create')}
|
||||
{#if loading}
|
||||
<div class="ml-1.5">
|
||||
<Spinner />
|
||||
</div>
|
||||
{/if}
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
105
src/lib/components/workspace/Skills/SkillMenu.svelte
Normal file
105
src/lib/components/workspace/Skills/SkillMenu.svelte
Normal file
@@ -0,0 +1,105 @@
|
||||
<script lang="ts">
|
||||
import { DropdownMenu } from 'bits-ui';
|
||||
import { flyAndScale } from '$lib/utils/transitions';
|
||||
import { getContext } from 'svelte';
|
||||
|
||||
import Dropdown from '$lib/components/common/Dropdown.svelte';
|
||||
import GarbageBin from '$lib/components/icons/GarbageBin.svelte';
|
||||
import Tooltip from '$lib/components/common/Tooltip.svelte';
|
||||
import DocumentDuplicate from '$lib/components/icons/DocumentDuplicate.svelte';
|
||||
import Download from '$lib/components/icons/Download.svelte';
|
||||
import { user } from '$lib/stores';
|
||||
|
||||
const i18n = getContext('i18n');
|
||||
|
||||
export let editHandler: Function;
|
||||
export let cloneHandler: Function;
|
||||
export let exportHandler: Function;
|
||||
export let deleteHandler: Function;
|
||||
export let onClose: Function;
|
||||
|
||||
let show = false;
|
||||
</script>
|
||||
|
||||
<Dropdown
|
||||
bind:show
|
||||
on:change={(e) => {
|
||||
if (e.detail === false) {
|
||||
onClose();
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Tooltip content={$i18n.t('More')}>
|
||||
<slot />
|
||||
</Tooltip>
|
||||
|
||||
<div slot="content">
|
||||
<DropdownMenu.Content
|
||||
class="w-full max-w-[170px] rounded-2xl px-1 py-1 border border-gray-100 dark:border-gray-800 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-lg"
|
||||
sideOffset={-2}
|
||||
side="bottom"
|
||||
align="start"
|
||||
transition={flyAndScale}
|
||||
>
|
||||
<DropdownMenu.Item
|
||||
class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl"
|
||||
on:click={() => {
|
||||
editHandler();
|
||||
}}
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
class="w-4 h-4"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L6.832 19.82a4.5 4.5 0 01-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 011.13-1.897L16.863 4.487zm0 0L19.5 7.125"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<div class="flex items-center">{$i18n.t('Edit')}</div>
|
||||
</DropdownMenu.Item>
|
||||
|
||||
<DropdownMenu.Item
|
||||
class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl"
|
||||
on:click={() => {
|
||||
cloneHandler();
|
||||
}}
|
||||
>
|
||||
<DocumentDuplicate />
|
||||
|
||||
<div class="flex items-center">{$i18n.t('Clone')}</div>
|
||||
</DropdownMenu.Item>
|
||||
|
||||
{#if $user?.role === 'admin' || $user?.permissions?.workspace?.skills}
|
||||
<DropdownMenu.Item
|
||||
class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl"
|
||||
on:click={() => {
|
||||
exportHandler();
|
||||
}}
|
||||
>
|
||||
<Download />
|
||||
|
||||
<div class="flex items-center">{$i18n.t('Export')}</div>
|
||||
</DropdownMenu.Item>
|
||||
{/if}
|
||||
|
||||
<hr class="border-gray-50 dark:border-gray-850/30 my-1" />
|
||||
|
||||
<DropdownMenu.Item
|
||||
class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl"
|
||||
on:click={() => {
|
||||
deleteHandler();
|
||||
}}
|
||||
>
|
||||
<GarbageBin />
|
||||
<div class="flex items-center">{$i18n.t('Delete')}</div>
|
||||
</DropdownMenu.Item>
|
||||
</DropdownMenu.Content>
|
||||
</div>
|
||||
</Dropdown>
|
||||
@@ -66,6 +66,7 @@ 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);
|
||||
export const functions = writable(null);
|
||||
|
||||
export const toolServers = writable([]);
|
||||
|
||||
@@ -121,6 +121,17 @@
|
||||
{$i18n.t('Tools')}
|
||||
</a>
|
||||
{/if}
|
||||
|
||||
{#if $user?.role === 'admin' || $user?.permissions?.workspace?.skills}
|
||||
<a
|
||||
class="min-w-fit p-1.5 {$page.url.pathname.includes('/workspace/skills')
|
||||
? ''
|
||||
: 'text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'} transition"
|
||||
href="/workspace/skills"
|
||||
>
|
||||
{$i18n.t('Skills')}
|
||||
</a>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
5
src/routes/(app)/workspace/skills/+page.svelte
Normal file
5
src/routes/(app)/workspace/skills/+page.svelte
Normal file
@@ -0,0 +1,5 @@
|
||||
<script>
|
||||
import Skills from '$lib/components/workspace/Skills.svelte';
|
||||
</script>
|
||||
|
||||
<Skills />
|
||||
56
src/routes/(app)/workspace/skills/create/+page.svelte
Normal file
56
src/routes/(app)/workspace/skills/create/+page.svelte
Normal file
@@ -0,0 +1,56 @@
|
||||
<script lang="ts">
|
||||
import { toast } from 'svelte-sonner';
|
||||
import { goto } from '$app/navigation';
|
||||
import { skills } from '$lib/stores';
|
||||
import { onMount, getContext } from 'svelte';
|
||||
|
||||
const i18n = getContext('i18n');
|
||||
|
||||
import { createNewSkill, getSkills } from '$lib/apis/skills';
|
||||
import SkillEditor from '$lib/components/workspace/Skills/SkillEditor.svelte';
|
||||
|
||||
let skill: {
|
||||
name: string;
|
||||
id: string;
|
||||
description: string;
|
||||
content: string;
|
||||
is_active: boolean;
|
||||
access_grants: any[];
|
||||
} | null = null;
|
||||
|
||||
let clone = false;
|
||||
|
||||
const onSubmit = async (_skill) => {
|
||||
const res = await createNewSkill(localStorage.token, _skill).catch((error) => {
|
||||
toast.error(`${error}`);
|
||||
return null;
|
||||
});
|
||||
|
||||
if (res) {
|
||||
toast.success($i18n.t('Skill created successfully'));
|
||||
await skills.set(await getSkills(localStorage.token));
|
||||
await goto('/workspace/skills');
|
||||
}
|
||||
};
|
||||
|
||||
onMount(async () => {
|
||||
if (sessionStorage.skill) {
|
||||
const _skill = JSON.parse(sessionStorage.skill);
|
||||
sessionStorage.removeItem('skill');
|
||||
|
||||
clone = true;
|
||||
skill = {
|
||||
name: _skill.name || 'Skill',
|
||||
id: _skill.id || '',
|
||||
description: _skill.description || '',
|
||||
content: _skill.content || '',
|
||||
is_active: _skill.is_active ?? true,
|
||||
access_grants: _skill.access_grants !== undefined ? _skill.access_grants : []
|
||||
};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
{#key skill}
|
||||
<SkillEditor {skill} {onSubmit} {clone} />
|
||||
{/key}
|
||||
71
src/routes/(app)/workspace/skills/edit/+page.svelte
Normal file
71
src/routes/(app)/workspace/skills/edit/+page.svelte
Normal file
@@ -0,0 +1,71 @@
|
||||
<script lang="ts">
|
||||
import { toast } from 'svelte-sonner';
|
||||
import { goto } from '$app/navigation';
|
||||
import { skills } from '$lib/stores';
|
||||
import { onMount, getContext } from 'svelte';
|
||||
|
||||
const i18n = getContext('i18n');
|
||||
|
||||
import { getSkillById, getSkills, updateSkillById } from '$lib/apis/skills';
|
||||
import { page } from '$app/stores';
|
||||
|
||||
import SkillEditor from '$lib/components/workspace/Skills/SkillEditor.svelte';
|
||||
|
||||
let skill = null;
|
||||
let disabled = false;
|
||||
|
||||
$: skillId = $page.url.searchParams.get('id');
|
||||
|
||||
const onSubmit = async (_skill) => {
|
||||
const updatedSkill = await updateSkillById(localStorage.token, skillId, _skill).catch(
|
||||
(error) => {
|
||||
toast.error(`${error}`);
|
||||
return null;
|
||||
}
|
||||
);
|
||||
|
||||
if (updatedSkill) {
|
||||
toast.success($i18n.t('Skill updated successfully'));
|
||||
await skills.set(await getSkills(localStorage.token));
|
||||
skill = {
|
||||
id: updatedSkill.id,
|
||||
name: updatedSkill.name,
|
||||
description: updatedSkill.description,
|
||||
content: updatedSkill.content,
|
||||
is_active: updatedSkill.is_active,
|
||||
access_grants:
|
||||
updatedSkill?.access_grants === undefined ? [] : updatedSkill?.access_grants
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
onMount(async () => {
|
||||
if (skillId) {
|
||||
const _skill = await getSkillById(localStorage.token, skillId).catch((error) => {
|
||||
toast.error(`${error}`);
|
||||
return null;
|
||||
});
|
||||
|
||||
if (_skill) {
|
||||
disabled = !_skill.write_access ?? true;
|
||||
skill = {
|
||||
id: _skill.id,
|
||||
name: _skill.name,
|
||||
description: _skill.description,
|
||||
content: _skill.content,
|
||||
is_active: _skill.is_active,
|
||||
access_grants:
|
||||
_skill?.access_grants === undefined ? [] : _skill?.access_grants
|
||||
};
|
||||
} else {
|
||||
goto('/workspace/skills');
|
||||
}
|
||||
} else {
|
||||
goto('/workspace/skills');
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
{#if skill}
|
||||
<SkillEditor {skill} {onSubmit} {disabled} edit />
|
||||
{/if}
|
||||
Reference in New Issue
Block a user