OpenWebUI/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui synced 2025-06-26 18:26:48 +00:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

wip: frontend

Browse Source
This commit is contained in:
Timothy Jaeryang Baek 2024-11-14 02:20:34 -08:00
parent aaba41339e
commit 0e8c0b452e
12 changed files with 870 additions and 495 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/lib/components/admin/Users.svelte
View File

@ -1,14 +1,38 @@
<script> <script>
import { getContext, tick, onMount } from 'svelte'; import { getContext, tick, onMount } from 'svelte';
import { toast } from 'svelte-sonner'; import { toast } from 'svelte-sonner';
import { goto } from '$app/navigation';
import { user } from '$lib/stores';
import { getUsers } from '$lib/apis/users';
import UserList from './Users/UserList.svelte'; import UserList from './Users/UserList.svelte';
import Groups from './Users/Groups.svelte'; import Groups from './Users/Groups.svelte';
const i18n = getContext('i18n'); const i18n = getContext('i18n');
let selectedTab = 'overview'; let users = [];
let selectedTab = 'overview';
let loaded = false;
$: if (selectedTab) {
getUsersHandler();
}
const getUsersHandler = async () => {
users = await getUsers(localStorage.token);
};
onMount(async () => {
if ($user?.role !== 'admin') {
await goto('/');
} else {
users = await getUsers(localStorage.token);
}
loaded = true;
onMount(() => {
const containerElement = document.getElementById('users-tabs-container'); const containerElement = document.getElementById('users-tabs-container');
if (containerElement) { if (containerElement) {
@ -78,9 +102,9 @@
<div class="flex-1 mt-1 lg:mt-0 overflow-y-scroll"> <div class="flex-1 mt-1 lg:mt-0 overflow-y-scroll">
{#if selectedTab === 'overview'} {#if selectedTab === 'overview'}
<UserList /> <UserList {users} />
{:else if selectedTab === 'groups'} {:else if selectedTab === 'groups'}
<Groups /> <Groups {users} />
{/if} {/if}
</div> </div>
</div> </div>

52
src/lib/components/admin/Users/Groups.svelte
View File

@ -18,12 +18,17 @@
import EllipsisHorizontal from '$lib/components/icons/EllipsisHorizontal.svelte'; import EllipsisHorizontal from '$lib/components/icons/EllipsisHorizontal.svelte';
import User from '$lib/components/icons/User.svelte'; import User from '$lib/components/icons/User.svelte';
import UserCircleSolid from '$lib/components/icons/UserCircleSolid.svelte'; import UserCircleSolid from '$lib/components/icons/UserCircleSolid.svelte';
import GroupModal from './Groups/GroupModal.svelte'; import GroupModal from './Groups/EditGroupModal.svelte';
import Pencil from '$lib/components/icons/Pencil.svelte';
import GroupItem from './Groups/GroupItem.svelte';
import AddGroupModal from './Groups/AddGroupModal.svelte';
const i18n = getContext('i18n'); const i18n = getContext('i18n');
let loaded = false; let loaded = false;
export let users = [];
let groups = []; let groups = [];
let filteredGroups; let filteredGroups;
@ -40,6 +45,7 @@
let search = ''; let search = '';
let showCreateGroupModal = false; let showCreateGroupModal = false;
let showDefaultPermissionsModal = false;
onMount(async () => { onMount(async () => {
if ($user?.role !== 'admin') { if ($user?.role !== 'admin') {
@ -47,12 +53,16 @@
} else { } else {
groups = [ groups = [
{ {
id: '1',
name: 'Admins', name: 'Admins',
description: 'Admins have full access to all features and settings.', description: 'Admins have full access to all features and settings.',
permissions: { data: {
admin: true permissions: {
admin: true
}
}, },
user_ids: [1, 2, 3] user_ids: [1, 2, 3],
admin_ids: [1]
} }
]; ];
} }
@ -61,7 +71,7 @@
</script> </script>
{#if loaded} {#if loaded}
<GroupModal bind:show={showCreateGroupModal} /> <AddGroupModal bind:show={showCreateGroupModal} />
<div class="mt-0.5 mb-2 gap-1 flex flex-col md:flex-row justify-between"> <div class="mt-0.5 mb-2 gap-1 flex flex-col md:flex-row justify-between">
<div class="flex md:self-center text-lg font-medium px-0.5"> <div class="flex md:self-center text-lg font-medium px-0.5">
{$i18n.t('Groups')} {$i18n.t('Groups')}
@ -146,35 +156,21 @@
<hr class="mt-1.5 mb-2 border-gray-50 dark:border-gray-850" /> <hr class="mt-1.5 mb-2 border-gray-50 dark:border-gray-850" />
{#each filteredGroups as group} {#each filteredGroups as group}
<div class="flex items-center gap-3 justify-between px-1 text-xs w-full transition"> <GroupItem {group} {users} />
<div class="flex items-center gap-1.5 w-full font-medium">
<div>
<UserCircleSolid className="size-4" />
</div>
{group.name}
</div>
<div class="flex items-center gap-1.5 w-full font-medium">
{group.user_ids.length}
<div>
<User className="size-3.5" />
</div>
</div>
<div class="w-full flex justify-end">
<button class=" rounded-lg p-1">
<EllipsisHorizontal />
</button>
</div>
</div>
{/each} {/each}
</div> </div>
{/if} {/if}
<hr class="my-2 border-gray-50 dark:border-gray-850" /> <hr class="my-2 border-gray-50 dark:border-gray-850" />
<button class="flex items-center justify-between rounded-lg w-full transition pt-1"> <GroupModal bind:show={showDefaultPermissionsModal} tabs={['permissions']} custom={false} />
<button
class="flex items-center justify-between rounded-lg w-full transition pt-1"
on:click={() => {
showDefaultPermissionsModal = true;
}}
>
<div class="flex items-center gap-2.5"> <div class="flex items-center gap-2.5">
<div class="p-1.5 bg-black/5 dark:bg-white/10 rounded-full"> <div class="p-1.5 bg-black/5 dark:bg-white/10 rounded-full">
<UsersSolid className="size-4" /> <UsersSolid className="size-4" />

148
src/lib/components/admin/Users/Groups/AddGroupModal.svelte Normal file
View File

@ -0,0 +1,148 @@
<script lang="ts">
import { toast } from 'svelte-sonner';
import { getContext, onMount } from 'svelte';
const i18n = getContext('i18n');
import Modal from '$lib/components/common/Modal.svelte';
import Textarea from '$lib/components/common/Textarea.svelte';
export let onSubmit: Function = () => {};
export let show = false;
let name = '';
let description = '';
let userIds = [];
let loading = false;
const submitHandler = async () => {
loading = true;
const group = {
name,
description,
user_ids: userIds
};
await onSubmit(group);
loading = false;
show = false;
name = '';
description = '';
userIds = [];
};
onMount(() => {
console.log('mounted');
});
</script>
<Modal size="sm" bind:show>
<div>
<div class=" flex justify-between dark:text-gray-100 px-5 pt-4 mb-1.5">
<div class=" text-lg font-medium self-center font-primary">
{$i18n.t('Add User Group')}
</div>
<button
class="self-center"
on:click={() => {
show = false;
}}
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
class="w-5 h-5"
>
<path
d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"
/>
</svg>
</button>
</div>
<div class="flex flex-col md:flex-row w-full px-4 pb-4 md:space-x-4 dark:text-gray-200">
<div class=" flex flex-col w-full sm:flex-row sm:justify-center sm:space-x-6">
<form
class="flex flex-col w-full"
on:submit={(e) => {
e.preventDefault();
submitHandler();
}}
>
<div class="flex gap-2">
<div class="flex flex-col w-full">
<div class=" mb-0.5 text-xs text-gray-500">{$i18n.t('Name')}</div>
<div class="flex-1">
<input
class="w-full text-sm bg-transparent placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none"
type="text"
bind:value={name}
placeholder={$i18n.t('Group Name')}
autocomplete="off"
required
/>
</div>
</div>
</div>
<div class="flex flex-col w-full mt-2">
<div class=" mb-1 text-xs text-gray-500">{$i18n.t('Description')}</div>
<div class="flex-1">
<Textarea
className="w-full text-sm bg-transparent placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none resize-none"
rows={2}
bind:value={description}
placeholder={$i18n.t('Group Description')}
/>
</div>
</div>
<div class="flex justify-end pt-3 text-sm font-medium gap-1.5">
<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 flex-row space-x-1 items-center {loading
? ' cursor-not-allowed'
: ''}"
type="submit"
disabled={loading}
>
{$i18n.t('Create')}
{#if loading}
<div class="ml-2 self-center">
<svg
class=" w-4 h-4"
viewBox="0 0 24 24"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
><style>
.spinner_ajPY {
transform-origin: center;
animation: spinner_AtaB 0.75s infinite linear;
}
@keyframes spinner_AtaB {
100% {
transform: rotate(360deg);
}
}
</style><path
d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z"
opacity=".25"
/><path
d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z"
class="spinner_ajPY"
/></svg
>
</div>
{/if}
</button>
</div>
</form>
</div>
</div>
</div>
</Modal>

107
src/lib/components/admin/Users/Groups/GroupModal.svelte → src/lib/components/admin/Users/Groups/EditGroupModal.svelte
View File

@ -19,8 +19,14 @@
export let show = false; export let show = false;
export let edit = false; export let edit = false;
export let users = [];
export let group = null; export let group = null;
export let custom = true;
export let tabs = ['display', 'permissions', 'users'];
let selectedTab = 'display'; let selectedTab = 'display';
let name = ''; let name = '';
@ -28,6 +34,7 @@
let permissions = {}; let permissions = {};
let userIds = []; let userIds = [];
let adminIds = [];
let loading = false; let loading = false;
@ -65,18 +72,24 @@
} }
onMount(() => { onMount(() => {
console.log(tabs);
selectedTab = tabs[0];
init(); init();
}); });
</script> </script>
<Modal size="sm" bind:show> <Modal size="sm" bind:show>
<div> <div>
<div class=" flex justify-between dark:text-gray-100 px-5 pt-4 mb-1"> <div class=" flex justify-between dark:text-gray-100 px-5 pt-4 mb-1.5">
<div class=" text-lg font-medium self-center font-primary"> <div class=" text-lg font-medium self-center font-primary">
{#if edit} {#if custom}
{$i18n.t('Edit User Group')} {#if edit}
{$i18n.t('Edit User Group')}
{:else}
{$i18n.t('Add User Group')}
{/if}
{:else} {:else}
{$i18n.t('Add User Group')} {$i18n.t('Edit Default Permissions')}
{/if} {/if}
</div> </div>
<button <button
@ -108,54 +121,60 @@
}} }}
> >
<div <div
class=" tabs flex flex-row overflow-x-auto gap-2.5 text-sm font-medium mb-3 border-b border-b-gray-800 scrollbar-hidden" class=" tabs flex flex-row overflow-x-auto gap-2.5 text-sm font-medium border-b border-b-gray-800 scrollbar-hidden"
> >
<button {#if tabs.includes('display')}
class="px-0.5 pb-1.5 min-w-fit flex text-right transition border-b-2 {selectedTab === <button
'display' class="px-0.5 pb-1.5 min-w-fit flex text-right transition border-b-2 {selectedTab ===
? ' dark:border-white' 'display'
: 'border-transparent text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'}" ? ' dark:border-white'
on:click={() => { : 'border-transparent text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'}"
selectedTab = 'display'; on:click={() => {
}} selectedTab = 'display';
type="button" }}
> type="button"
{$i18n.t('Display')} >
</button> {$i18n.t('Display')}
</button>
{/if}
<button {#if tabs.includes('permissions')}
class="px-0.5 pb-1.5 min-w-fit flex text-right transition border-b-2 {selectedTab === <button
'permissions' class="px-0.5 pb-1.5 min-w-fit flex text-right transition border-b-2 {selectedTab ===
? ' dark:border-white' 'permissions'
: 'border-transparent text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'}" ? ' dark:border-white'
on:click={() => { : 'border-transparent text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'}"
selectedTab = 'permissions'; on:click={() => {
}} selectedTab = 'permissions';
type="button" }}
> type="button"
{$i18n.t('Permissions')} >
</button> {$i18n.t('Permissions')}
</button>
{/if}
<button {#if tabs.includes('users')}
class="px-0.5 pb-1.5 min-w-fit flex text-right transition border-b-2 {selectedTab === <button
'users' class="px-0.5 pb-1.5 min-w-fit flex text-right transition border-b-2 {selectedTab ===
? ' dark:border-white' 'users'
: ' border-transparent text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'}" ? ' dark:border-white'
on:click={() => { : ' border-transparent text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'}"
selectedTab = 'users'; on:click={() => {
}} selectedTab = 'users';
type="button" }}
> type="button"
{$i18n.t('Users')} ({userIds.length}) >
</button> {$i18n.t('Users')} ({userIds.length})
</button>
{/if}
</div> </div>
<div class="px-1 h-96 lg:max-h-96 overflow-y-auto scrollbar-hidden"> <div class="px-1 h-96 lg:max-h-96 overflow-y-auto scrollbar-hidden mt-2.5">
{#if selectedTab == 'display'} {#if selectedTab == 'display'}
<Display bind:name bind:description /> <Display bind:name bind:description />
{:else if selectedTab == 'permissions'} {:else if selectedTab == 'permissions'}
<Permissions bind:permissions /> <Permissions bind:permissions {custom} />
{:else if selectedTab == 'users'} {:else if selectedTab == 'users'}
<Users bind:userIds /> <Users bind:userIds bind:adminIds {users} />
{/if} {/if}
</div> </div>

45
src/lib/components/admin/Users/Groups/GroupItem.svelte Normal file
View File

@ -0,0 +1,45 @@
<script>
import Pencil from '$lib/components/icons/Pencil.svelte';
import User from '$lib/components/icons/User.svelte';
import UserCircleSolid from '$lib/components/icons/UserCircleSolid.svelte';
import GroupModal from './EditGroupModal.svelte';
export let users = [];
export let group = {
name: 'Admins',
user_ids: [1, 2, 3]
};
let showEdit = false;
</script>
<GroupModal bind:show={showEdit} edit {group} {users} />
<div class="flex items-center gap-3 justify-between px-1 text-xs w-full transition">
<div class="flex items-center gap-1.5 w-full font-medium">
<div>
<UserCircleSolid className="size-4" />
</div>
{group.name}
</div>
<div class="flex items-center gap-1.5 w-full font-medium">
{group.user_ids.length}
<div>
<User className="size-3.5" />
</div>
</div>
<div class="w-full flex justify-end">
<button
class=" rounded-lg p-1 hover:bg-gray-100 dark:hover:bg-gray-850 transition"
on:click={() => {
showEdit = true;
}}
>
<Pencil />
</button>
</div>
</div>

45
src/lib/components/admin/Users/Groups/Permissions.svelte
View File

@ -8,6 +8,7 @@
import Plus from '$lib/components/icons/Plus.svelte'; import Plus from '$lib/components/icons/Plus.svelte';
export let permissions = {}; export let permissions = {};
export let custom = true;
let defaultModelId = ''; let defaultModelId = '';
@ -135,17 +136,34 @@
<div class=" mb-2 text-sm font-medium">{$i18n.t('Workspace Permissions')}</div> <div class=" mb-2 text-sm font-medium">{$i18n.t('Workspace Permissions')}</div>
<div class=" flex w-full justify-between my-2 pr-2"> <div class=" flex w-full justify-between my-2 pr-2">
<div class=" self-center text-xs font-medium">{$i18n.t('Allow Models Access')}</div> <div class=" self-center text-xs font-medium">
{#if custom}
{$i18n.t('Admins')}:
{/if}
{$i18n.t('Models Access')}
</div>
<Switch bind:state={workspaceModelsAccess} /> <Switch bind:state={workspaceModelsAccess} />
</div> </div>
<div class=" flex w-full justify-between my-2 pr-2"> <div class=" flex w-full justify-between my-2 pr-2">
<div class=" self-center text-xs font-medium">{$i18n.t('Allow Knowledge Access')}</div> <div class=" self-center text-xs font-medium">
{#if custom}
{$i18n.t('Admins')}:
{/if}
{$i18n.t('Knowledge Access')}
</div>
<Switch bind:state={workspaceKnowledgeAccess} /> <Switch bind:state={workspaceKnowledgeAccess} />
</div> </div>
<div class=" flex w-full justify-between my-2 pr-2"> <div class=" flex w-full justify-between my-2 pr-2">
<div class=" self-center text-xs font-medium">{$i18n.t('Allow Prompts Access')}</div> <div class=" self-center text-xs font-medium">
{#if custom}
{$i18n.t('Admins')}:
{/if}
{$i18n.t('Prompts Access')}
</div>
<Switch bind:state={workspacePromptsAccess} /> <Switch bind:state={workspacePromptsAccess} />
</div> </div>
@ -166,19 +184,34 @@
<div class=" mb-2 text-sm font-medium">{$i18n.t('Chat Permissions')}</div> <div class=" mb-2 text-sm font-medium">{$i18n.t('Chat Permissions')}</div>
<div class=" flex w-full justify-between my-2 pr-2"> <div class=" flex w-full justify-between my-2 pr-2">
<div class=" self-center text-xs font-medium">{$i18n.t('Allow Chat Deletion')}</div> <div class=" self-center text-xs font-medium">
{#if custom}
{$i18n.t('Members')}:
{/if}
{$i18n.t('Allow Chat Deletion')}
</div>
<Switch bind:state={chatDeletion} /> <Switch bind:state={chatDeletion} />
</div> </div>
<div class=" flex w-full justify-between my-2 pr-2"> <div class=" flex w-full justify-between my-2 pr-2">
<div class=" self-center text-xs font-medium">{$i18n.t('Allow Chat Editing')}</div> <div class=" self-center text-xs font-medium">
{#if custom}
{$i18n.t('Members')}:
{/if}
{$i18n.t('Allow Chat Editing')}
</div>
<Switch bind:state={chatEdit} /> <Switch bind:state={chatEdit} />
</div> </div>
<div class=" flex w-full justify-between my-2 pr-2"> <div class=" flex w-full justify-between my-2 pr-2">
<div class=" self-center text-xs font-medium">{$i18n.t('Allow Temporary Chat')}</div> <div class=" self-center text-xs font-medium">
{#if custom}
{$i18n.t('Members')}:
{/if}
{$i18n.t('Allow Temporary Chat')}
</div>
<Switch bind:state={chatTemporary} /> <Switch bind:state={chatTemporary} />
</div> </div>

135
src/lib/components/admin/Users/Groups/Users.svelte
View File

@ -1,7 +1,140 @@
<script lang="ts"> <script lang="ts">
import { getContext } from 'svelte';
const i18n = getContext('i18n');
import Tooltip from '$lib/components/common/Tooltip.svelte';
import Plus from '$lib/components/icons/Plus.svelte';
import { WEBUI_BASE_URL } from '$lib/constants';
import Checkbox from '$lib/components/common/Checkbox.svelte';
import Badge from '$lib/components/common/Badge.svelte';
export let users = [];
export let userIds = []; export let userIds = [];
export let adminIds = [];
let filteredUsers = [];
$: filteredUsers = users
.filter((user) => {
if (user?.role === 'admin') {
return false;
}
if (query === '') {
return true;
}
return (
user.name.toLowerCase().includes(query.toLowerCase()) ||
user.email.toLowerCase().includes(query.toLowerCase())
);
})
.sort((a, b) => {
const aIsAdmin = adminIds.includes(a.id);
const bIsAdmin = adminIds.includes(b.id);
const aUserIndex = userIds.indexOf(a.id);
const bUserIndex = userIds.indexOf(b.id);
// Admin users should come first
if (aIsAdmin && !bIsAdmin) return -1; // Place 'a' first if it's admin
if (!aIsAdmin && bIsAdmin) return 1; // Place 'b' first if it's admin
// Neither are admin, compare based on userIds or fall back to alphabetical order
if (aUserIndex !== -1 && bUserIndex === -1) return -1; // 'a' has valid userId -> prioritize
if (bUserIndex !== -1 && aUserIndex === -1) return 1; // 'b' has valid userId -> prioritize
// Both a and b are either in the userIds array or not, so we'll sort them by their indices
if (aUserIndex !== -1 && bUserIndex !== -1) return aUserIndex - bUserIndex;
// If both are not in the userIds, fallback to alphabetical sorting by name
return a.name.localeCompare(b.name);
});
let query = '';
</script> </script>
<div> <div>
{JSON.stringify(userIds)} <div class="flex w-full">
<div class="flex flex-1">
<div class=" self-center mr-3">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
class="w-4 h-4"
>
<path
fill-rule="evenodd"
d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z"
clip-rule="evenodd"
/>
</svg>
</div>
<input
class=" w-full text-sm pr-4 rounded-r-xl outline-none bg-transparent"
bind:value={query}
placeholder={$i18n.t('Search')}
/>
</div>
</div>
<div class="mt-3 max-h-[22rem] overflow-y-auto scrollbar-hidden">
<div class="flex flex-col gap-2.5">
{#if filteredUsers.length > 0}
{#each filteredUsers as user, userIdx (user.id)}
<div class="flex flex-row items-center gap-3 w-full text-sm">
<div class="flex items-center">
<Checkbox
state={userIds.includes(user.id) ? 'checked' : 'unchecked'}
on:change={(e) => {
if (e.detail === 'checked') {
userIds = [...userIds, user.id];
} else {
userIds = userIds.filter((id) => id !== user.id);
}
}}
/>
</div>
<div class="flex w-full items-center justify-between">
<div class="flex">
<img
class=" rounded-full w-6 h-6 object-cover mr-2.5"
src={user.profile_image_url.startsWith(WEBUI_BASE_URL) ||
user.profile_image_url.startsWith('https://www.gravatar.com/avatar/') ||
user.profile_image_url.startsWith('data:')
? user.profile_image_url
: `/user.png`}
alt="user"
/>
<div class=" font-medium self-center">{user.name}</div>
</div>
{#if userIds.includes(user.id)}
<button
on:click={() => {
adminIds = adminIds.includes(user.id)
? adminIds.filter((id) => id !== user.id)
: [...adminIds, user.id];
}}
type="button"
>
{#if adminIds.includes(user.id)}
<Badge type="info" content="admin" />
{:else}
<Badge type="success" content="member" />
{/if}
</button>
{/if}
</div>
</div>
{/each}
{:else}
<div class="text-gray-500 text-xs text-center py-2 px-10">
{$i18n.t('No users were found.')}
</div>
{/if}
</div>
</div>
</div> </div>

598
src/lib/components/admin/Users/UserList.svelte
View File

@ -29,9 +29,7 @@
const i18n = getContext('i18n'); const i18n = getContext('i18n');
let loaded = false; export let users = [];
let tab = '';
let users = [];
let search = ''; let search = '';
let selectedUser = null; let selectedUser = null;
@ -65,14 +63,6 @@
} }
}; };
onMount(async () => {
if ($user?.role !== 'admin') {
await goto('/');
} else {
users = await getUsers(localStorage.token);
}
loaded = true;
});
let sortKey = 'created_at'; // default sort key let sortKey = 'created_at'; // default sort key
let sortOrder = 'asc'; // default sort order let sortOrder = 'asc'; // default sort order
@ -131,278 +121,301 @@
/> />
<UserChatsModal bind:show={showUserChatsModal} user={selectedUser} /> <UserChatsModal bind:show={showUserChatsModal} user={selectedUser} />
{#if loaded} <div class="mt-0.5 mb-2 gap-1 flex flex-col md:flex-row justify-between">
<div class="mt-0.5 mb-2 gap-1 flex flex-col md:flex-row justify-between"> <div class="flex md:self-center text-lg font-medium px-0.5">
<div class="flex md:self-center text-lg font-medium px-0.5"> {$i18n.t('Users')}
{$i18n.t('Users')} <div class="flex self-center w-[1px] h-6 mx-2.5 bg-gray-50 dark:bg-gray-850" />
<div class="flex self-center w-[1px] h-6 mx-2.5 bg-gray-50 dark:bg-gray-850" />
<span class="text-lg font-medium text-gray-500 dark:text-gray-300">{users.length}</span> <span class="text-lg font-medium text-gray-500 dark:text-gray-300">{users.length}</span>
</div> </div>
<div class="flex gap-1"> <div class="flex gap-1">
<div class=" flex w-full space-x-2"> <div class=" flex w-full space-x-2">
<div class="flex flex-1"> <div class="flex flex-1">
<div class=" self-center ml-1 mr-3"> <div class=" self-center ml-1 mr-3">
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20" viewBox="0 0 20 20"
fill="currentColor" fill="currentColor"
class="w-4 h-4" class="w-4 h-4"
> >
<path <path
fill-rule="evenodd" fill-rule="evenodd"
d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z" d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z"
clip-rule="evenodd" clip-rule="evenodd"
/> />
</svg> </svg>
</div>
<input
class=" w-full text-sm pr-4 py-1 rounded-r-xl outline-none bg-transparent"
bind:value={search}
placeholder={$i18n.t('Search')}
/>
</div> </div>
<input
class=" w-full text-sm pr-4 py-1 rounded-r-xl outline-none bg-transparent"
bind:value={search}
placeholder={$i18n.t('Search')}
/>
</div>
<div> <div>
<Tooltip content={$i18n.t('Add User')}> <Tooltip content={$i18n.t('Add User')}>
<button <button
class=" p-2 rounded-xl hover:bg-gray-100 dark:bg-gray-900 dark:hover:bg-gray-850 transition font-medium text-sm flex items-center space-x-1" class=" p-2 rounded-xl hover:bg-gray-100 dark:bg-gray-900 dark:hover:bg-gray-850 transition font-medium text-sm flex items-center space-x-1"
on:click={() => { on:click={() => {
showAddUserModal = !showAddUserModal; showAddUserModal = !showAddUserModal;
}} }}
> >
<Plus className="size-3.5" /> <Plus className="size-3.5" />
</button> </button>
</Tooltip> </Tooltip>
</div>
</div> </div>
</div> </div>
</div> </div>
</div>
<div <div class="scrollbar-hidden relative whitespace-nowrap overflow-x-auto max-w-full rounded pt-0.5">
class="scrollbar-hidden relative whitespace-nowrap overflow-x-auto max-w-full rounded pt-0.5" <table
class="w-full text-sm text-left text-gray-500 dark:text-gray-400 table-auto max-w-full rounded"
> >
<table <thead
class="w-full text-sm text-left text-gray-500 dark:text-gray-400 table-auto max-w-full rounded" class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-850 dark:text-gray-400 -translate-y-0.5"
> >
<thead <tr class="">
class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-850 dark:text-gray-400 -translate-y-0.5" <th
> scope="col"
<tr class=""> class="px-3 py-1.5 cursor-pointer select-none"
<th on:click={() => setSortKey('role')}
scope="col" >
class="px-3 py-1.5 cursor-pointer select-none" <div class="flex gap-1.5 items-center">
on:click={() => setSortKey('role')} {$i18n.t('Role')}
>
<div class="flex gap-1.5 items-center">
{$i18n.t('Role')}
{#if sortKey === 'role'} {#if sortKey === 'role'}
<span class="font-normal" <span class="font-normal"
>{#if sortOrder === 'asc'} >{#if sortOrder === 'asc'}
<ChevronUp className="size-2" />
{:else}
<ChevronDown className="size-2" />
{/if}
</span>
{:else}
<span class="invisible">
<ChevronUp className="size-2" /> <ChevronUp className="size-2" />
</span> {:else}
{/if} <ChevronDown className="size-2" />
</div>
</th>
<th
scope="col"
class="px-3 py-1.5 cursor-pointer select-none"
on:click={() => setSortKey('name')}
>
<div class="flex gap-1.5 items-center">
{$i18n.t('Name')}
{#if sortKey === 'name'}
<span class="font-normal"
>{#if sortOrder === 'asc'}
<ChevronUp className="size-2" />
{:else}
<ChevronDown className="size-2" />
{/if}
</span>
{:else}
<span class="invisible">
<ChevronUp className="size-2" />
</span>
{/if}
</div>
</th>
<th
scope="col"
class="px-3 py-1.5 cursor-pointer select-none"
on:click={() => setSortKey('email')}
>
<div class="flex gap-1.5 items-center">
{$i18n.t('Email')}
{#if sortKey === 'email'}
<span class="font-normal"
>{#if sortOrder === 'asc'}
<ChevronUp className="size-2" />
{:else}
<ChevronDown className="size-2" />
{/if}
</span>
{:else}
<span class="invisible">
<ChevronUp className="size-2" />
</span>
{/if}
</div>
</th>
<th
scope="col"
class="px-3 py-1.5 cursor-pointer select-none"
on:click={() => setSortKey('last_active_at')}
>
<div class="flex gap-1.5 items-center">
{$i18n.t('Last Active')}
{#if sortKey === 'last_active_at'}
<span class="font-normal"
>{#if sortOrder === 'asc'}
<ChevronUp className="size-2" />
{:else}
<ChevronDown className="size-2" />
{/if}
</span>
{:else}
<span class="invisible">
<ChevronUp className="size-2" />
</span>
{/if}
</div>
</th>
<th
scope="col"
class="px-3 py-1.5 cursor-pointer select-none"
on:click={() => setSortKey('created_at')}
>
<div class="flex gap-1.5 items-center">
{$i18n.t('Created at')}
{#if sortKey === 'created_at'}
<span class="font-normal"
>{#if sortOrder === 'asc'}
<ChevronUp className="size-2" />
{:else}
<ChevronDown className="size-2" />
{/if}
</span>
{:else}
<span class="invisible">
<ChevronUp className="size-2" />
</span>
{/if}
</div>
</th>
<th
scope="col"
class="px-3 py-1.5 cursor-pointer select-none"
on:click={() => setSortKey('oauth_sub')}
>
<div class="flex gap-1.5 items-center">
{$i18n.t('OAuth ID')}
{#if sortKey === 'oauth_sub'}
<span class="font-normal"
>{#if sortOrder === 'asc'}
<ChevronUp className="size-2" />
{:else}
<ChevronDown className="size-2" />
{/if}
</span>
{:else}
<span class="invisible">
<ChevronUp className="size-2" />
</span>
{/if}
</div>
</th>
<th scope="col" class="px-3 py-2 text-right" />
</tr>
</thead>
<tbody class="">
{#each filteredUsers as user, userIdx}
<tr class="bg-white dark:bg-gray-900 dark:border-gray-850 text-xs">
<td class="px-3 py-1 min-w-[7rem] w-28">
<button
class=" translate-y-0.5"
on:click={() => {
if (user.role === 'user') {
updateRoleHandler(user.id, 'admin');
} else if (user.role === 'pending') {
updateRoleHandler(user.id, 'user');
} else {
updateRoleHandler(user.id, 'pending');
}
}}
>
<Badge
type={user.role === 'admin' ? 'info' : user.role === 'user' ? 'success' : 'muted'}
content={$i18n.t(user.role)}
/>
</button>
</td>
<td class="px-3 py-1 font-medium text-gray-900 dark:text-white w-max">
<div class="flex flex-row w-max">
<img
class=" rounded-full w-6 h-6 object-cover mr-2.5"
src={user.profile_image_url.startsWith(WEBUI_BASE_URL) ||
user.profile_image_url.startsWith('https://www.gravatar.com/avatar/') ||
user.profile_image_url.startsWith('data:')
? user.profile_image_url
: `/user.png`}
alt="user"
/>
<div class=" font-medium self-center">{user.name}</div>
</div>
</td>
<td class=" px-3 py-1"> {user.email} </td>
<td class=" px-3 py-1">
{dayjs(user.last_active_at * 1000).fromNow()}
</td>
<td class=" px-3 py-1">
{dayjs(user.created_at * 1000).format($i18n.t('MMMM DD, YYYY'))}
</td>
<td class=" px-3 py-1"> {user.oauth_sub ?? ''} </td>
<td class="px-3 py-1 text-right">
<div class="flex justify-end w-full">
{#if $config.features.enable_admin_chat_access && user.role !== 'admin'}
<Tooltip content={$i18n.t('Chats')}>
<button
class="self-center w-fit text-sm px-2 py-2 hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
on:click={async () => {
showUserChatsModal = !showUserChatsModal;
selectedUser = user;
}}
>
<ChatBubbles />
</button>
</Tooltip>
{/if} {/if}
</span>
{:else}
<span class="invisible">
<ChevronUp className="size-2" />
</span>
{/if}
</div>
</th>
<th
scope="col"
class="px-3 py-1.5 cursor-pointer select-none"
on:click={() => setSortKey('name')}
>
<div class="flex gap-1.5 items-center">
{$i18n.t('Name')}
<Tooltip content={$i18n.t('Edit User')}> {#if sortKey === 'name'}
<span class="font-normal"
>{#if sortOrder === 'asc'}
<ChevronUp className="size-2" />
{:else}
<ChevronDown className="size-2" />
{/if}
</span>
{:else}
<span class="invisible">
<ChevronUp className="size-2" />
</span>
{/if}
</div>
</th>
<th
scope="col"
class="px-3 py-1.5 cursor-pointer select-none"
on:click={() => setSortKey('email')}
>
<div class="flex gap-1.5 items-center">
{$i18n.t('Email')}
{#if sortKey === 'email'}
<span class="font-normal"
>{#if sortOrder === 'asc'}
<ChevronUp className="size-2" />
{:else}
<ChevronDown className="size-2" />
{/if}
</span>
{:else}
<span class="invisible">
<ChevronUp className="size-2" />
</span>
{/if}
</div>
</th>
<th
scope="col"
class="px-3 py-1.5 cursor-pointer select-none"
on:click={() => setSortKey('last_active_at')}
>
<div class="flex gap-1.5 items-center">
{$i18n.t('Last Active')}
{#if sortKey === 'last_active_at'}
<span class="font-normal"
>{#if sortOrder === 'asc'}
<ChevronUp className="size-2" />
{:else}
<ChevronDown className="size-2" />
{/if}
</span>
{:else}
<span class="invisible">
<ChevronUp className="size-2" />
</span>
{/if}
</div>
</th>
<th
scope="col"
class="px-3 py-1.5 cursor-pointer select-none"
on:click={() => setSortKey('created_at')}
>
<div class="flex gap-1.5 items-center">
{$i18n.t('Created at')}
{#if sortKey === 'created_at'}
<span class="font-normal"
>{#if sortOrder === 'asc'}
<ChevronUp className="size-2" />
{:else}
<ChevronDown className="size-2" />
{/if}
</span>
{:else}
<span class="invisible">
<ChevronUp className="size-2" />
</span>
{/if}
</div>
</th>
<th
scope="col"
class="px-3 py-1.5 cursor-pointer select-none"
on:click={() => setSortKey('oauth_sub')}
>
<div class="flex gap-1.5 items-center">
{$i18n.t('OAuth ID')}
{#if sortKey === 'oauth_sub'}
<span class="font-normal"
>{#if sortOrder === 'asc'}
<ChevronUp className="size-2" />
{:else}
<ChevronDown className="size-2" />
{/if}
</span>
{:else}
<span class="invisible">
<ChevronUp className="size-2" />
</span>
{/if}
</div>
</th>
<th scope="col" class="px-3 py-2 text-right" />
</tr>
</thead>
<tbody class="">
{#each filteredUsers as user, userIdx}
<tr class="bg-white dark:bg-gray-900 dark:border-gray-850 text-xs">
<td class="px-3 py-1 min-w-[7rem] w-28">
<button
class=" translate-y-0.5"
on:click={() => {
if (user.role === 'user') {
updateRoleHandler(user.id, 'admin');
} else if (user.role === 'pending') {
updateRoleHandler(user.id, 'user');
} else {
updateRoleHandler(user.id, 'pending');
}
}}
>
<Badge
type={user.role === 'admin' ? 'info' : user.role === 'user' ? 'success' : 'muted'}
content={$i18n.t(user.role)}
/>
</button>
</td>
<td class="px-3 py-1 font-medium text-gray-900 dark:text-white w-max">
<div class="flex flex-row w-max">
<img
class=" rounded-full w-6 h-6 object-cover mr-2.5"
src={user.profile_image_url.startsWith(WEBUI_BASE_URL) ||
user.profile_image_url.startsWith('https://www.gravatar.com/avatar/') ||
user.profile_image_url.startsWith('data:')
? user.profile_image_url
: `/user.png`}
alt="user"
/>
<div class=" font-medium self-center">{user.name}</div>
</div>
</td>
<td class=" px-3 py-1"> {user.email} </td>
<td class=" px-3 py-1">
{dayjs(user.last_active_at * 1000).fromNow()}
</td>
<td class=" px-3 py-1">
{dayjs(user.created_at * 1000).format($i18n.t('MMMM DD, YYYY'))}
</td>
<td class=" px-3 py-1"> {user.oauth_sub ?? ''} </td>
<td class="px-3 py-1 text-right">
<div class="flex justify-end w-full">
{#if $config.features.enable_admin_chat_access && user.role !== 'admin'}
<Tooltip content={$i18n.t('Chats')}>
<button <button
class="self-center w-fit text-sm px-2 py-2 hover:bg-black/5 dark:hover:bg-white/5 rounded-xl" class="self-center w-fit text-sm px-2 py-2 hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
on:click={async () => { on:click={async () => {
showEditUserModal = !showEditUserModal; showUserChatsModal = !showUserChatsModal;
selectedUser = user;
}}
>
<ChatBubbles />
</button>
</Tooltip>
{/if}
<Tooltip content={$i18n.t('Edit User')}>
<button
class="self-center w-fit text-sm px-2 py-2 hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
on:click={async () => {
showEditUserModal = !showEditUserModal;
selectedUser = user;
}}
>
<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.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.832 19.82a4.5 4.5 0 0 1-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 0 1 1.13-1.897L16.863 4.487Zm0 0L19.5 7.125"
/>
</svg>
</button>
</Tooltip>
{#if user.role !== 'admin'}
<Tooltip content={$i18n.t('Delete User')}>
<button
class="self-center w-fit text-sm px-2 py-2 hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
on:click={async () => {
showDeleteConfirmDialog = true;
selectedUser = user; selectedUser = user;
}} }}
> >
@ -417,49 +430,22 @@
<path <path
stroke-linecap="round" stroke-linecap="round"
stroke-linejoin="round" stroke-linejoin="round"
d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.832 19.82a4.5 4.5 0 0 1-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 0 1 1.13-1.897L16.863 4.487Zm0 0L19.5 7.125" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"
/> />
</svg> </svg>
</button> </button>
</Tooltip> </Tooltip>
{/if}
</div>
</td>
</tr>
{/each}
</tbody>
</table>
</div>
{#if user.role !== 'admin'} <div class=" text-gray-500 text-xs mt-1.5 text-right">
<Tooltip content={$i18n.t('Delete User')}> ⓘ {$i18n.t("Click on the user role button to change a user's role.")}
<button </div>
class="self-center w-fit text-sm px-2 py-2 hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
on:click={async () => {
showDeleteConfirmDialog = true;
selectedUser = user;
}}
>
<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="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"
/>
</svg>
</button>
</Tooltip>
{/if}
</div>
</td>
</tr>
{/each}
</tbody>
</table>
</div>
<div class=" text-gray-500 text-xs mt-1.5 text-right"> <Pagination bind:page count={users.length} />
ⓘ {$i18n.t("Click on the user role button to change a user's role.")}
</div>
<Pagination bind:page count={users.length} />
{/if}

70
src/lib/components/layout/Sidebar.svelte
View File

@ -470,44 +470,42 @@
</button> </button>
</div> </div>
{#if $user?.role === 'admin'} <div class="px-1.5 flex justify-center text-gray-800 dark:text-gray-200">
<div class="px-1.5 flex justify-center text-gray-800 dark:text-gray-200"> <a
<a class="flex-grow flex space-x-3 rounded-lg px-2 py-[7px] hover:bg-gray-100 dark:hover:bg-gray-900 transition"
class="flex-grow flex space-x-3 rounded-lg px-2 py-[7px] hover:bg-gray-100 dark:hover:bg-gray-900 transition" href="/workspace"
href="/workspace" on:click={() => {
on:click={() => { selectedChatId = null;
selectedChatId = null; chatId.set('');
chatId.set('');
if ($mobile) { if ($mobile) {
showSidebar.set(false); showSidebar.set(false);
} }
}} }}
draggable="false" draggable="false"
> >
<div class="self-center"> <div class="self-center">
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
fill="none" fill="none"
viewBox="0 0 24 24" viewBox="0 0 24 24"
stroke-width="2" stroke-width="2"
stroke="currentColor" stroke="currentColor"
class="size-[1.1rem]" class="size-[1.1rem]"
> >
<path <path
stroke-linecap="round" stroke-linecap="round"
stroke-linejoin="round" stroke-linejoin="round"
d="M13.5 16.875h3.375m0 0h3.375m-3.375 0V13.5m0 3.375v3.375M6 10.5h2.25a2.25 2.25 0 0 0 2.25-2.25V6a2.25 2.25 0 0 0-2.25-2.25H6A2.25 2.25 0 0 0 3.75 6v2.25A2.25 2.25 0 0 0 6 10.5Zm0 9.75h2.25A2.25 2.25 0 0 0 10.5 18v-2.25a2.25 2.25 0 0 0-2.25-2.25H6a2.25 2.25 0 0 0-2.25 2.25V18A2.25 2.25 0 0 0 6 20.25Zm9.75-9.75H18a2.25 2.25 0 0 0 2.25-2.25V6A2.25 2.25 0 0 0 18 3.75h-2.25A2.25 2.25 0 0 0 13.5 6v2.25a2.25 2.25 0 0 0 2.25 2.25Z" d="M13.5 16.875h3.375m0 0h3.375m-3.375 0V13.5m0 3.375v3.375M6 10.5h2.25a2.25 2.25 0 0 0 2.25-2.25V6a2.25 2.25 0 0 0-2.25-2.25H6A2.25 2.25 0 0 0 3.75 6v2.25A2.25 2.25 0 0 0 6 10.5Zm0 9.75h2.25A2.25 2.25 0 0 0 10.5 18v-2.25a2.25 2.25 0 0 0-2.25-2.25H6a2.25 2.25 0 0 0-2.25 2.25V18A2.25 2.25 0 0 0 6 20.25Zm9.75-9.75H18a2.25 2.25 0 0 0 2.25-2.25V6A2.25 2.25 0 0 0 18 3.75h-2.25A2.25 2.25 0 0 0 13.5 6v2.25a2.25 2.25 0 0 0 2.25 2.25Z"
/> />
</svg> </svg>
</div> </div>
<div class="flex self-center"> <div class="flex self-center">
<div class=" self-center font-medium text-sm font-primary">{$i18n.t('Workspace')}</div> <div class=" self-center font-medium text-sm font-primary">{$i18n.t('Workspace')}</div>
</div> </div>
</a> </a>
</div> </div>
{/if}
<div class="relative {$temporaryChatEnabled ? 'opacity-20' : ''}"> <div class="relative {$temporaryChatEnabled ? 'opacity-20' : ''}">
{#if $temporaryChatEnabled} {#if $temporaryChatEnabled}

2
src/lib/components/workspace/Knowledge/Collection.svelte
View File

@ -596,7 +596,7 @@
}} }}
/> />
<div class="flex flex-col w-full h-full max-h-[100dvh] mt-1" id="collection-container"> <div class="flex flex-col w-full h-full max-h-[100dvh] translate-y-1" id="collection-container">
{#if id && knowledge} {#if id && knowledge}
<div class="flex flex-row flex-1 h-full max-h-full pb-2.5"> <div class="flex flex-row flex-1 h-full max-h-full pb-2.5">
<PaneGroup direction="horizontal"> <PaneGroup direction="horizontal">

83
src/lib/components/workspace/Models.svelte
View File

@ -8,12 +8,11 @@
const { saveAs } = fileSaver; const { saveAs } = fileSaver;
import { onMount, getContext, tick } from 'svelte'; import { onMount, getContext, tick } from 'svelte';
import { WEBUI_NAME, config, mobile, models, settings, user } from '$lib/stores';
import { addNewModel, deleteModelById, getModelInfos, updateModelById } from '$lib/apis/models';
import { deleteModel } from '$lib/apis/ollama';
import { goto } from '$app/navigation'; import { goto } from '$app/navigation';
const i18n = getContext('i18n');
import { WEBUI_NAME, config, mobile, models as _models, settings, user } from '$lib/stores';
import { addNewModel, deleteModelById, getModelInfos, updateModelById } from '$lib/apis/models';
import { getModels } from '$lib/apis'; import { getModels } from '$lib/apis';
@ -25,24 +24,21 @@
import Search from '../icons/Search.svelte'; import Search from '../icons/Search.svelte';
import Plus from '../icons/Plus.svelte'; import Plus from '../icons/Plus.svelte';
const i18n = getContext('i18n');
let shiftKey = false; let shiftKey = false;
let showModelDeleteConfirm = false;
let localModelfiles = []; let localModelfiles = [];
let importFiles; let importFiles;
let modelsImportInputElement: HTMLInputElement; let modelsImportInputElement: HTMLInputElement;
let _models = []; let models = [];
let filteredModels = []; let filteredModels = [];
let selectedModel = null; let selectedModel = null;
$: if (_models) { let showModelDeleteConfirm = false;
filteredModels = _models
$: if (models) {
filteredModels = models
.filter((m) => m?.owned_by !== 'arena') .filter((m) => m?.owned_by !== 'arena')
.filter( .filter(
(m) => searchValue === '' || m.name.toLowerCase().includes(searchValue.toLowerCase()) (m) => searchValue === '' || m.name.toLowerCase().includes(searchValue.toLowerCase())
@ -69,8 +65,8 @@
toast.success($i18n.t(`Deleted {{name}}`, { name: model.id })); toast.success($i18n.t(`Deleted {{name}}`, { name: model.id }));
} }
await models.set(await getModels(localStorage.token)); await _models.set(await getModels(localStorage.token));
_models = $models; models = $_models;
}; };
const cloneModelHandler = async (model) => { const cloneModelHandler = async (model) => {
@ -110,7 +106,7 @@
const moveToTopHandler = async (model) => { const moveToTopHandler = async (model) => {
// find models with position 0 and set them to 1 // find models with position 0 and set them to 1
const topModels = _models.filter((m) => m.info?.meta?.position === 0); const topModels = models.filter((m) => m.info?.meta?.position === 0);
for (const m of topModels) { for (const m of topModels) {
let info = m.info; let info = m.info;
if (!info) { if (!info) {
@ -156,8 +152,8 @@
toast.success($i18n.t(`Model {{name}} is now at the top`, { name: info.id })); toast.success($i18n.t(`Model {{name}} is now at the top`, { name: info.id }));
} }
await models.set(await getModels(localStorage.token)); await _models.set(await getModels(localStorage.token));
_models = $models; models = $_models;
}; };
const hideModelHandler = async (model) => { const hideModelHandler = async (model) => {
@ -192,8 +188,8 @@
); );
} }
await models.set(await getModels(localStorage.token)); await _models.set(await getModels(localStorage.token));
_models = $models; models = $_models;
}; };
const downloadModels = async (models) => { const downloadModels = async (models) => {
@ -218,7 +214,7 @@
// Update the position of the models // Update the position of the models
for (const [index, id] of modelIds.entries()) { for (const [index, id] of modelIds.entries()) {
const model = $models.find((m) => m.id === id); const model = $_models.find((m) => m.id === id);
if (model) { if (model) {
let info = model.info; let info = model.info;
@ -242,27 +238,32 @@
} }
await tick(); await tick();
await models.set(await getModels(localStorage.token)); await _models.set(await getModels(localStorage.token));
}; };
onMount(async () => { onMount(async () => {
// Legacy code to sync localModelfiles with models if ($user?.role === 'admin') {
_models = $models; models = $_models;
localModelfiles = JSON.parse(localStorage.getItem('modelfiles') ?? '[]');
if (localModelfiles) { // Legacy code to sync localModelfiles with models
console.log(localModelfiles); localModelfiles = JSON.parse(localStorage.getItem('modelfiles') ?? '[]');
}
if (!$mobile) { if (localModelfiles) {
// SortableJS console.log(localModelfiles);
sortable = new Sortable(document.getElementById('model-list'), { }
animation: 150,
onUpdate: async (event) => { if (!$mobile) {
console.log(event); // SortableJS
positionChangeHandler(); sortable = new Sortable(document.getElementById('model-list'), {
} animation: 150,
}); onUpdate: async (event) => {
console.log(event);
positionChangeHandler();
}
});
}
} else {
models = [];
} }
const onKeyDown = (event) => { const onKeyDown = (event) => {
@ -555,7 +556,7 @@
for (const model of savedModels) { for (const model of savedModels) {
if (model?.info ?? false) { if (model?.info ?? false) {
if ($models.find((m) => m.id === model.id)) { if ($_models.find((m) => m.id === model.id)) {
await updateModelById(localStorage.token, model.id, model.info).catch((error) => { await updateModelById(localStorage.token, model.id, model.info).catch((error) => {
return null; return null;
}); });
@ -567,8 +568,8 @@
} }
} }
await models.set(await getModels(localStorage.token)); await _models.set(await getModels(localStorage.token));
_models = $models; models = $_models;
}; };
reader.readAsText(importFiles[0]); reader.readAsText(importFiles[0]);
@ -602,7 +603,7 @@
<button <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-800 dark:hover:bg-gray-700 dark:text-gray-200 transition" 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-800 dark:hover:bg-gray-700 dark:text-gray-200 transition"
on:click={async () => { on:click={async () => {
downloadModels($models); downloadModels($_models);
}} }}
> >
<div class=" self-center mr-2 font-medium line-clamp-1">{$i18n.t('Export Models')}</div> <div class=" self-center mr-2 font-medium line-clamp-1">{$i18n.t('Export Models')}</div>

48
src/routes/(app)/workspace/+layout.svelte
View File

@ -12,24 +12,14 @@
tools tools
} from '$lib/stores'; } from '$lib/stores';
import { page } from '$app/stores'; import { page } from '$app/stores';
import { goto } from '$app/navigation';
import MenuLines from '$lib/components/icons/MenuLines.svelte'; import MenuLines from '$lib/components/icons/MenuLines.svelte';
import { getModels } from '$lib/apis';
import { getPrompts } from '$lib/apis/prompts';
import { getKnowledgeItems } from '$lib/apis/knowledge';
import { getTools } from '$lib/apis/tools';
import { getFunctions } from '$lib/apis/functions';
const i18n = getContext('i18n'); const i18n = getContext('i18n');
let loaded = false; let loaded = false;
onMount(async () => { onMount(async () => {
if ($user?.role !== 'admin') {
await goto('/');
}
loaded = true; loaded = true;
}); });
</script> </script>
@ -92,25 +82,27 @@
href="/workspace/prompts">{$i18n.t('Prompts')}</a href="/workspace/prompts">{$i18n.t('Prompts')}</a
> >
<a {#if $user?.role === 'admin'}
class="min-w-fit rounded-full p-1.5 {$page.url.pathname.includes('/workspace/tools') <a
? '' class="min-w-fit rounded-full p-1.5 {$page.url.pathname.includes('/workspace/tools')
: 'text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'} transition" ? ''
href="/workspace/tools" : 'text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'} transition"
> href="/workspace/tools"
{$i18n.t('Tools')} >
</a> {$i18n.t('Tools')}
</a>
<a <a
class="min-w-fit rounded-full p-1.5 {$page.url.pathname.includes( class="min-w-fit rounded-full p-1.5 {$page.url.pathname.includes(
'/workspace/functions' '/workspace/functions'
) )
? '' ? ''
: 'text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'} transition" : 'text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'} transition"
href="/workspace/functions" href="/workspace/functions"
> >
{$i18n.t('Functions')} {$i18n.t('Functions')}
</a> </a>
{/if}
</div> </div>
</div> </div>