feat/enh: group channel
This commit is contained in:
Timothy Jaeryang Baek
@@ -3,6 +3,7 @@ import { WEBUI_API_BASE_URL } from '$lib/constants';
|
||||
type ChannelForm = {
|
||||
type?: string;
|
||||
name: string;
|
||||
is_private?: boolean;
|
||||
data?: object;
|
||||
meta?: object;
|
||||
access_control?: object;
|
||||
|
||||
@@ -166,11 +166,33 @@ export const getUsers = async (
|
||||
return res;
|
||||
};
|
||||
|
||||
export const getAllUsers = async (token: string) => {
|
||||
export const searchUsers = async (
|
||||
token: string,
|
||||
query?: string,
|
||||
orderBy?: string,
|
||||
direction?: string,
|
||||
page = 1
|
||||
) => {
|
||||
let error = null;
|
||||
let res = null;
|
||||
|
||||
res = await fetch(`${WEBUI_API_BASE_URL}/users/all`, {
|
||||
const searchParams = new URLSearchParams();
|
||||
|
||||
searchParams.set('page', `${page}`);
|
||||
|
||||
if (query) {
|
||||
searchParams.set('query', query);
|
||||
}
|
||||
|
||||
if (orderBy) {
|
||||
searchParams.set('order_by', orderBy);
|
||||
}
|
||||
|
||||
if (direction) {
|
||||
searchParams.set('direction', direction);
|
||||
}
|
||||
|
||||
res = await fetch(`${WEBUI_API_BASE_URL}/users/search?${searchParams.toString()}`, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
@@ -194,11 +216,11 @@ export const getAllUsers = async (token: string) => {
|
||||
return res;
|
||||
};
|
||||
|
||||
export const searchUsers = async (token: string, query: string) => {
|
||||
export const getAllUsers = async (token: string) => {
|
||||
let error = null;
|
||||
let res = null;
|
||||
|
||||
res = await fetch(`${WEBUI_API_BASE_URL}/users/search?query=${encodeURIComponent(query)}`, {
|
||||
res = await fetch(`${WEBUI_API_BASE_URL}/users/all`, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
|
||||
@@ -84,8 +84,9 @@
|
||||
},
|
||||
features: {
|
||||
api_keys: false,
|
||||
folders: true,
|
||||
notes: true,
|
||||
channels: true,
|
||||
folders: true,
|
||||
direct_tool_servers: false,
|
||||
web_search: true,
|
||||
image_generation: true,
|
||||
|
||||
@@ -54,8 +54,9 @@
|
||||
},
|
||||
features: {
|
||||
api_keys: false,
|
||||
folders: true,
|
||||
notes: true,
|
||||
channels: true,
|
||||
folders: true,
|
||||
direct_tool_servers: false,
|
||||
web_search: true,
|
||||
image_generation: true,
|
||||
@@ -726,6 +727,54 @@
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col w-full">
|
||||
<div class="flex w-full justify-between my-1">
|
||||
<div class=" self-center text-xs font-medium">
|
||||
{$i18n.t('Notes')}
|
||||
</div>
|
||||
<Switch bind:state={permissions.features.notes} />
|
||||
</div>
|
||||
{#if defaultPermissions?.features?.notes && !permissions.features.notes}
|
||||
<div>
|
||||
<div class="text-xs text-gray-500">
|
||||
{$i18n.t('This is a default user permission and will remain enabled.')}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col w-full">
|
||||
<div class="flex w-full justify-between my-1">
|
||||
<div class=" self-center text-xs font-medium">
|
||||
{$i18n.t('Channels')}
|
||||
</div>
|
||||
<Switch bind:state={permissions.features.channels} />
|
||||
</div>
|
||||
{#if defaultPermissions?.features?.channels && !permissions.features.channels}
|
||||
<div>
|
||||
<div class="text-xs text-gray-500">
|
||||
{$i18n.t('This is a default user permission and will remain enabled.')}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col w-full">
|
||||
<div class="flex w-full justify-between my-1">
|
||||
<div class=" self-center text-xs font-medium">
|
||||
{$i18n.t('Folders')}
|
||||
</div>
|
||||
<Switch bind:state={permissions.features.folders} />
|
||||
</div>
|
||||
{#if defaultPermissions?.features?.folders && !permissions.features.folders}
|
||||
<div>
|
||||
<div class="text-xs text-gray-500">
|
||||
{$i18n.t('This is a default user permission and will remain enabled.')}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col w-full">
|
||||
<div class="flex w-full justify-between my-1">
|
||||
<div class=" self-center text-xs font-medium">
|
||||
@@ -789,21 +838,5 @@
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col w-full">
|
||||
<div class="flex w-full justify-between my-1">
|
||||
<div class=" self-center text-xs font-medium">
|
||||
{$i18n.t('Notes')}
|
||||
</div>
|
||||
<Switch bind:state={permissions.features.notes} />
|
||||
</div>
|
||||
{#if defaultPermissions?.features?.notes && !permissions.features.notes}
|
||||
<div>
|
||||
<div class="text-xs text-gray-500">
|
||||
{$i18n.t('This is a default user permission and will remain enabled.')}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -44,7 +44,7 @@
|
||||
</div>
|
||||
{:else}
|
||||
<div class=" size-4 justify-center flex items-center">
|
||||
{#if channel?.access_control === null}
|
||||
{#if channel?.type === 'group' ? !channel?.is_private : channel?.access_control === null}
|
||||
<Hashtag className="size-3.5" strokeWidth="2.5" />
|
||||
{:else}
|
||||
<Lock className="size-5.5" strokeWidth="2" />
|
||||
|
||||
@@ -92,7 +92,7 @@
|
||||
{/if}
|
||||
{:else}
|
||||
<div class=" size-4.5 justify-center flex items-center">
|
||||
{#if channel?.access_control === null}
|
||||
{#if channel?.type === 'group' ? !channel?.is_private : channel?.access_control === null}
|
||||
<Hashtag className="size-3.5" strokeWidth="2.5" />
|
||||
{:else}
|
||||
<Lock className="size-5" strokeWidth="2" />
|
||||
@@ -100,9 +100,7 @@
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div
|
||||
class=" text-left self-center overflow-hidden w-full line-clamp-1 capitalize flex-1"
|
||||
>
|
||||
<div class=" text-left self-center overflow-hidden w-full line-clamp-1 flex-1">
|
||||
{#if channel?.name}
|
||||
{channel.name}
|
||||
{:else}
|
||||
|
||||
@@ -181,9 +181,18 @@
|
||||
};
|
||||
|
||||
const initChannels = async () => {
|
||||
// default (none), group, dm type
|
||||
await channels.set(
|
||||
(await getChannels(localStorage.token)).sort((a, b) =>
|
||||
a.type === b.type ? 0 : a.type === 'dm' ? 1 : -1
|
||||
a.type === b.type
|
||||
? 0
|
||||
: a.type === 'dm'
|
||||
? 1
|
||||
: a.type === 'group'
|
||||
? b.type === 'dm'
|
||||
? -1
|
||||
: 0
|
||||
: -1
|
||||
)
|
||||
);
|
||||
};
|
||||
@@ -486,7 +495,7 @@
|
||||
|
||||
<ChannelModal
|
||||
bind:show={showCreateChannel}
|
||||
onSubmit={async ({ type, name, access_control, user_ids }) => {
|
||||
onSubmit={async ({ type, name, is_private, access_control, group_ids, user_ids }) => {
|
||||
name = name?.trim();
|
||||
|
||||
if (type === 'dm') {
|
||||
@@ -504,7 +513,9 @@
|
||||
const res = await createNewChannel(localStorage.token, {
|
||||
type: type,
|
||||
name: name,
|
||||
is_private: is_private,
|
||||
access_control: access_control,
|
||||
group_ids: group_ids,
|
||||
user_ids: user_ids
|
||||
}).catch((error) => {
|
||||
toast.error(`${error}`);
|
||||
@@ -940,14 +951,14 @@
|
||||
</Folder>
|
||||
{/if}
|
||||
|
||||
{#if $config?.features?.enable_channels && ($user?.role === 'admin' || $channels.length > 0)}
|
||||
{#if $config?.features?.enable_channels && ($user?.role === 'admin' || ($user?.permissions?.features?.channels ?? true))}
|
||||
<Folder
|
||||
id="sidebar-channels"
|
||||
className="px-2 mt-0.5"
|
||||
name={$i18n.t('Channels')}
|
||||
chevron={false}
|
||||
dragAndDrop={false}
|
||||
onAdd={$user?.role === 'admin'
|
||||
onAdd={$user?.role === 'admin' || ($user?.permissions?.features?.channels ?? true)
|
||||
? async () => {
|
||||
await tick();
|
||||
|
||||
|
||||
@@ -31,10 +31,13 @@
|
||||
{channel}
|
||||
edit={true}
|
||||
{onUpdate}
|
||||
onSubmit={async ({ name, access_control }) => {
|
||||
onSubmit={async ({ name, is_private, access_control, group_ids, user_ids }) => {
|
||||
const res = await updateChannelById(localStorage.token, channel.id, {
|
||||
name,
|
||||
access_control
|
||||
is_private,
|
||||
access_control,
|
||||
group_ids,
|
||||
user_ids
|
||||
}).catch((error) => {
|
||||
toast.error(error.message);
|
||||
});
|
||||
@@ -119,7 +122,7 @@
|
||||
{/if}
|
||||
{:else}
|
||||
<div class=" size-4 justify-center flex items-center ml-1">
|
||||
{#if channel?.access_control === null}
|
||||
{#if channel?.type === 'group' ? !channel?.is_private : channel?.access_control === null}
|
||||
<Hashtag className="size-3.5" strokeWidth="2.5" />
|
||||
{:else}
|
||||
<Lock className="size-[15px]" strokeWidth="2" />
|
||||
@@ -154,7 +157,7 @@
|
||||
</div>
|
||||
</a>
|
||||
|
||||
{#if channel?.type === 'dm'}
|
||||
{#if ['dm'].includes(channel?.type)}
|
||||
<div
|
||||
class="ml-0.5 mr-1 invisible group-hover:visible self-center flex items-center dark:text-gray-300"
|
||||
>
|
||||
@@ -181,7 +184,7 @@
|
||||
<XMark className="size-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
{:else if $user?.role === 'admin'}
|
||||
{:else if $user?.role === 'admin' || channel.user_id === $user?.id}
|
||||
<div
|
||||
class="ml-0.5 mr-1 invisible group-hover:visible self-center flex items-center dark:text-gray-300"
|
||||
>
|
||||
|
||||
@@ -1,18 +1,22 @@
|
||||
<script lang="ts">
|
||||
import { getContext, createEventDispatcher, onMount } from 'svelte';
|
||||
const i18n = getContext('i18n');
|
||||
|
||||
import { toast } from 'svelte-sonner';
|
||||
import { page } from '$app/stores';
|
||||
import { goto } from '$app/navigation';
|
||||
|
||||
import { createNewChannel, deleteChannelById } from '$lib/apis/channels';
|
||||
import { user } from '$lib/stores';
|
||||
|
||||
import Spinner from '$lib/components/common/Spinner.svelte';
|
||||
import Modal from '$lib/components/common/Modal.svelte';
|
||||
import AccessControl from '$lib/components/workspace/common/AccessControl.svelte';
|
||||
import DeleteConfirmDialog from '$lib/components/common/ConfirmDialog.svelte';
|
||||
import XMark from '$lib/components/icons/XMark.svelte';
|
||||
|
||||
import { toast } from 'svelte-sonner';
|
||||
import { page } from '$app/stores';
|
||||
import { goto } from '$app/navigation';
|
||||
import UserListSelector from '$lib/components/workspace/common/UserListSelector.svelte';
|
||||
const i18n = getContext('i18n');
|
||||
import MemberSelector from '$lib/components/workspace/common/MemberSelector.svelte';
|
||||
import Visibility from '$lib/components/workspace/common/Visibility.svelte';
|
||||
import Tooltip from '$lib/components/common/Tooltip.svelte';
|
||||
|
||||
export let show = false;
|
||||
export let onSubmit: Function = () => {};
|
||||
@@ -21,10 +25,14 @@
|
||||
export let channel = null;
|
||||
export let edit = false;
|
||||
|
||||
let channelTypes = ['group', 'dm'];
|
||||
let type = '';
|
||||
let name = '';
|
||||
|
||||
let isPrivate = null;
|
||||
let accessControl = {};
|
||||
|
||||
let groupIds = [];
|
||||
let userIds = [];
|
||||
|
||||
let loading = false;
|
||||
@@ -33,12 +41,26 @@
|
||||
name = name.replace(/\s/g, '-').toLocaleLowerCase();
|
||||
}
|
||||
|
||||
$: onTypeChange(type);
|
||||
|
||||
const onTypeChange = (type) => {
|
||||
if (type === 'group') {
|
||||
if (isPrivate === null) {
|
||||
isPrivate = true;
|
||||
}
|
||||
} else {
|
||||
isPrivate = null;
|
||||
}
|
||||
};
|
||||
|
||||
const submitHandler = async () => {
|
||||
loading = true;
|
||||
await onSubmit({
|
||||
type: type,
|
||||
name: name.replace(/\s/g, '-'),
|
||||
access_control: accessControl,
|
||||
is_private: type === 'group' ? isPrivate : null,
|
||||
access_control: type === '' ? accessControl : {},
|
||||
group_ids: groupIds,
|
||||
user_ids: userIds
|
||||
});
|
||||
show = false;
|
||||
@@ -46,16 +68,24 @@
|
||||
};
|
||||
|
||||
const init = () => {
|
||||
type = channel?.type ?? '';
|
||||
name = channel?.name ?? '';
|
||||
accessControl = channel.access_control;
|
||||
userIds = channel?.user_ids ?? [];
|
||||
if ($user?.role === 'admin') {
|
||||
channelTypes = ['', 'group', 'dm'];
|
||||
} else {
|
||||
channelTypes = ['group', 'dm'];
|
||||
}
|
||||
|
||||
type = channel?.type ?? channelTypes[0];
|
||||
|
||||
if (channel) {
|
||||
name = channel?.name ?? '';
|
||||
isPrivate = channel?.is_private ?? null;
|
||||
accessControl = channel.access_control;
|
||||
userIds = channel?.user_ids ?? [];
|
||||
}
|
||||
};
|
||||
|
||||
$: if (show) {
|
||||
if (channel) {
|
||||
init();
|
||||
}
|
||||
init();
|
||||
} else {
|
||||
resetHandler();
|
||||
}
|
||||
@@ -119,21 +149,51 @@
|
||||
}}
|
||||
>
|
||||
{#if !edit}
|
||||
<div class="flex flex-col w-full mt-2">
|
||||
<div class="flex flex-col w-full mt-2 mb-1">
|
||||
<div class=" mb-1 text-xs text-gray-500">{$i18n.t('Channel Type')}</div>
|
||||
|
||||
<div class="flex-1">
|
||||
<select
|
||||
class="w-full text-sm bg-transparent placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-hidden"
|
||||
bind:value={type}
|
||||
<Tooltip
|
||||
content={type === 'dm'
|
||||
? $i18n.t('A private conversation between you and selected users')
|
||||
: type === 'group'
|
||||
? $i18n.t('A collaboration channel where people join as members')
|
||||
: $i18n.t(
|
||||
'A discussion channel where access is controlled by groups and permissions'
|
||||
)}
|
||||
placement="top-start"
|
||||
>
|
||||
<option value="">{$i18n.t('Channel')}</option>
|
||||
<option value="dm">{$i18n.t('Direct Message')}</option>
|
||||
</select>
|
||||
<select
|
||||
class="w-full text-sm bg-transparent placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-hidden"
|
||||
bind:value={type}
|
||||
>
|
||||
{#each channelTypes as channelType, channelTypeIdx (channelType)}
|
||||
<option value={channelType} selected={channelTypeIdx === 0}>
|
||||
{#if channelType === 'group'}
|
||||
{$i18n.t('Group Channel')}
|
||||
{:else if channelType === 'dm'}
|
||||
{$i18n.t('Direct Message')}
|
||||
{:else if channelType === ''}
|
||||
{$i18n.t('Channel')}
|
||||
{/if}
|
||||
</option>
|
||||
{/each}
|
||||
</select>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class=" text-gray-300 dark:text-gray-700 text-xs">
|
||||
{#if type === ''}
|
||||
{$i18n.t('Discussion channel where access is based on groups and permissions')}
|
||||
{:else if type === 'group'}
|
||||
{$i18n.t('Collaboration channel where people join as members')}
|
||||
{:else if type === 'dm'}
|
||||
{$i18n.t('Private conversation between selected users')}
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col w-full mt-2">
|
||||
<div class=" mb-1 text-xs text-gray-500">
|
||||
{$i18n.t('Channel Name')}
|
||||
@@ -154,17 +214,31 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class=" border-gray-100/40 dark:border-gray-700/10 my-2.5 w-full" />
|
||||
|
||||
<div class="-mx-2">
|
||||
{#if type === 'dm'}
|
||||
<UserListSelector bind:userIds />
|
||||
{:else}
|
||||
<div class="px-4 py-3 bg-gray-50 dark:bg-gray-950 rounded-3xl">
|
||||
{#if type !== 'dm'}
|
||||
<div class="-mx-2 mb-1 mt-2.5 px-2">
|
||||
{#if type === ''}
|
||||
<AccessControl bind:accessControl accessRoles={['read', 'write']} />
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{:else if type === 'group'}
|
||||
<Visibility
|
||||
state={isPrivate ? 'private' : 'public'}
|
||||
onChange={(value) => {
|
||||
if (value === 'private') {
|
||||
isPrivate = true;
|
||||
} else {
|
||||
isPrivate = false;
|
||||
}
|
||||
console.log(value, isPrivate);
|
||||
}}
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if type !== ''}
|
||||
<div class="">
|
||||
<MemberSelector bind:userIds includeGroups={type !== 'dm'} />
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="flex justify-end pt-3 text-sm font-medium gap-1.5">
|
||||
{#if edit}
|
||||
|
||||
@@ -0,0 +1,269 @@
|
||||
<script lang="ts">
|
||||
import { toast } from 'svelte-sonner';
|
||||
import { getContext, onMount } from 'svelte';
|
||||
|
||||
const i18n = getContext('i18n');
|
||||
|
||||
import { user as _user } from '$lib/stores';
|
||||
import { getUserById, searchUsers } from '$lib/apis/users';
|
||||
import { WEBUI_API_BASE_URL } from '$lib/constants';
|
||||
|
||||
import XMark from '$lib/components/icons/XMark.svelte';
|
||||
import Pagination from '$lib/components/common/Pagination.svelte';
|
||||
import ProfilePreview from '$lib/components/channel/Messages/Message/ProfilePreview.svelte';
|
||||
import Tooltip from '$lib/components/common/Tooltip.svelte';
|
||||
import ChevronUp from '$lib/components/icons/ChevronUp.svelte';
|
||||
import ChevronDown from '$lib/components/icons/ChevronDown.svelte';
|
||||
import Spinner from '$lib/components/common/Spinner.svelte';
|
||||
import Checkbox from '$lib/components/common/Checkbox.svelte';
|
||||
import { getGroups } from '$lib/apis/groups';
|
||||
|
||||
export let onChange: Function = () => {};
|
||||
|
||||
export let includeGroups = true;
|
||||
export let pagination = false;
|
||||
|
||||
export let groupIds = [];
|
||||
export let userIds = [];
|
||||
|
||||
let groups = null;
|
||||
let filteredGroups = [];
|
||||
|
||||
$: filteredGroups = groups
|
||||
? groups.filter((group) => group.name.toLowerCase().includes(query.toLowerCase()))
|
||||
: [];
|
||||
|
||||
let selectedUsers = {};
|
||||
|
||||
let page = 1;
|
||||
let users = null;
|
||||
let total = null;
|
||||
|
||||
let query = '';
|
||||
let orderBy = 'name'; // default sort key
|
||||
let direction = 'asc'; // default sort order
|
||||
|
||||
const setSortKey = (key) => {
|
||||
if (orderBy === key) {
|
||||
direction = direction === 'asc' ? 'desc' : 'asc';
|
||||
} else {
|
||||
orderBy = key;
|
||||
direction = 'asc';
|
||||
}
|
||||
};
|
||||
|
||||
const getUserList = async () => {
|
||||
try {
|
||||
const res = await searchUsers(localStorage.token, query, orderBy, direction, page).catch(
|
||||
(error) => {
|
||||
toast.error(`${error}`);
|
||||
return null;
|
||||
}
|
||||
);
|
||||
|
||||
if (res) {
|
||||
users = res.users;
|
||||
total = res.total;
|
||||
}
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
}
|
||||
};
|
||||
|
||||
$: if (page !== null && query !== null && orderBy !== null && direction !== null) {
|
||||
getUserList();
|
||||
}
|
||||
|
||||
onMount(async () => {
|
||||
groups = await getGroups(localStorage.token, true);
|
||||
if (userIds.length > 0) {
|
||||
userIds.forEach(async (id) => {
|
||||
const res = await getUserById(localStorage.token, id).catch((error) => {
|
||||
console.error(error);
|
||||
return null;
|
||||
});
|
||||
if (res) {
|
||||
selectedUsers[id] = res;
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="">
|
||||
{#if users === null || total === null}
|
||||
<div class="my-10">
|
||||
<Spinner className="size-5" />
|
||||
</div>
|
||||
{:else}
|
||||
{#if userIds.length > 0}
|
||||
<div class="mx-1 mb-1.5">
|
||||
<div class="text-xs text-gray-500 mx-0.5 mb-1">
|
||||
{userIds.length}
|
||||
{$i18n.t('users')}
|
||||
</div>
|
||||
<div class="flex gap-1 flex-wrap">
|
||||
{#each userIds as id}
|
||||
{#if selectedUsers[id]}
|
||||
<button
|
||||
type="button"
|
||||
class="inline-flex items-center space-x-1 px-2 py-1 bg-gray-100/50 dark:bg-gray-850 rounded-lg text-xs"
|
||||
on:click={() => {
|
||||
userIds = userIds.filter((uid) => uid !== id);
|
||||
delete selectedUsers[id];
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
{selectedUsers[id].name}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<XMark className="size-3" />
|
||||
</div>
|
||||
</button>
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="flex gap-1 -mx-0.5 my-1.5">
|
||||
<div class=" flex w-full space-x-2">
|
||||
<div class="flex flex-1">
|
||||
<div class=" self-center ml-1 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 py-1 rounded-r-xl outline-hidden bg-transparent"
|
||||
bind:value={query}
|
||||
placeholder={$i18n.t('Search')}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if users.length > 0}
|
||||
<div class="scrollbar-hidden relative whitespace-nowrap w-full max-w-full">
|
||||
<div class=" text-sm text-left text-gray-500 dark:text-gray-400 w-full max-w-full">
|
||||
<div class="w-full max-h-96 overflow-y-auto rounded-lg">
|
||||
{#if includeGroups && filteredGroups.length > 0}
|
||||
<div class="text-xs text-gray-500 mb-1 mx-1">
|
||||
{$i18n.t('Groups')}
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
{#each filteredGroups as group, groupIdx (group.id)}
|
||||
<button
|
||||
class=" dark:border-gray-850 text-xs flex items-center justify-between w-full"
|
||||
type="button"
|
||||
on:click={() => {
|
||||
if ((groupIds ?? []).includes(group.id)) {
|
||||
groupIds = groupIds.filter((id) => id !== group.id);
|
||||
} else {
|
||||
groupIds = [...groupIds, group.id];
|
||||
}
|
||||
onChange(groupIds);
|
||||
}}
|
||||
>
|
||||
<div class="px-3 py-1.5 font-medium text-gray-900 dark:text-white flex-1">
|
||||
<div class="flex items-center gap-2">
|
||||
<Tooltip content={group.name} placement="top-start">
|
||||
<div class="font-medium truncate flex items-center gap-1">
|
||||
{group.name} <span class="text-gray-500">{group.member_count}</span>
|
||||
</div>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="px-3 py-1">
|
||||
<div class=" translate-y-0.5">
|
||||
<Checkbox
|
||||
state={(groupIds ?? []).includes(group.id) ? 'checked' : 'unchecked'}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="text-xs text-gray-500 mb-1 mx-1">
|
||||
{$i18n.t('Users')}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
{#each users as user, userIdx (user.id)}
|
||||
{#if user?.id !== $_user?.id}
|
||||
<button
|
||||
class=" dark:border-gray-850 text-xs flex items-center justify-between w-full"
|
||||
type="button"
|
||||
on:click={() => {
|
||||
if ((userIds ?? []).includes(user.id)) {
|
||||
userIds = userIds.filter((id) => id !== user.id);
|
||||
delete selectedUsers[user.id];
|
||||
} else {
|
||||
userIds = [...userIds, user.id];
|
||||
selectedUsers[user.id] = user;
|
||||
}
|
||||
onChange(userIds);
|
||||
}}
|
||||
>
|
||||
<div class="px-3 py-1.5 font-medium text-gray-900 dark:text-white flex-1">
|
||||
<div class="flex items-center gap-2">
|
||||
<ProfilePreview {user} side="right" align="center" sideOffset={6}>
|
||||
<img
|
||||
class="rounded-2xl w-6 h-6 object-cover flex-shrink-0"
|
||||
src={`${WEBUI_API_BASE_URL}/users/${user.id}/profile/image`}
|
||||
alt="user"
|
||||
/>
|
||||
</ProfilePreview>
|
||||
<Tooltip content={user.email} placement="top-start">
|
||||
<div class="font-medium truncate">{user.name}</div>
|
||||
</Tooltip>
|
||||
|
||||
{#if user?.is_active}
|
||||
<div>
|
||||
<span class="relative flex size-1.5">
|
||||
<span
|
||||
class="absolute inline-flex h-full w-full animate-ping rounded-full bg-green-400 opacity-75"
|
||||
></span>
|
||||
<span class="relative inline-flex size-1.5 rounded-full bg-green-500"
|
||||
></span>
|
||||
</span>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="px-3 py-1">
|
||||
<div class=" translate-y-0.5">
|
||||
<Checkbox
|
||||
state={(userIds ?? []).includes(user.id) ? 'checked' : 'unchecked'}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="text-gray-500 text-xs text-center py-5 px-10">
|
||||
{$i18n.t('No users were found.')}
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
@@ -1,247 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { toast } from 'svelte-sonner';
|
||||
import { getContext, onMount } from 'svelte';
|
||||
|
||||
const i18n = getContext('i18n');
|
||||
|
||||
import { user as _user } from '$lib/stores';
|
||||
import { getUserById, getUsers } from '$lib/apis/users';
|
||||
import { WEBUI_API_BASE_URL } from '$lib/constants';
|
||||
|
||||
import XMark from '$lib/components/icons/XMark.svelte';
|
||||
import Pagination from '$lib/components/common/Pagination.svelte';
|
||||
import ProfilePreview from '$lib/components/channel/Messages/Message/ProfilePreview.svelte';
|
||||
import Tooltip from '$lib/components/common/Tooltip.svelte';
|
||||
import ChevronUp from '$lib/components/icons/ChevronUp.svelte';
|
||||
import ChevronDown from '$lib/components/icons/ChevronDown.svelte';
|
||||
import Spinner from '$lib/components/common/Spinner.svelte';
|
||||
import Checkbox from '$lib/components/common/Checkbox.svelte';
|
||||
|
||||
export let onChange: Function = () => {};
|
||||
export let userIds = [];
|
||||
|
||||
export let pagination = false;
|
||||
|
||||
let selectedUsers = {};
|
||||
|
||||
let page = 1;
|
||||
let users = null;
|
||||
let total = null;
|
||||
|
||||
let query = '';
|
||||
let orderBy = 'name'; // default sort key
|
||||
let direction = 'asc'; // default sort order
|
||||
|
||||
const setSortKey = (key) => {
|
||||
if (orderBy === key) {
|
||||
direction = direction === 'asc' ? 'desc' : 'asc';
|
||||
} else {
|
||||
orderBy = key;
|
||||
direction = 'asc';
|
||||
}
|
||||
};
|
||||
|
||||
const getUserList = async () => {
|
||||
try {
|
||||
const res = await getUsers(localStorage.token, query, orderBy, direction, page).catch(
|
||||
(error) => {
|
||||
toast.error(`${error}`);
|
||||
return null;
|
||||
}
|
||||
);
|
||||
|
||||
if (res) {
|
||||
users = res.users;
|
||||
total = res.total;
|
||||
}
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
}
|
||||
};
|
||||
|
||||
$: if (page !== null && query !== null && orderBy !== null && direction !== null) {
|
||||
getUserList();
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
if (userIds.length > 0) {
|
||||
userIds.forEach(async (id) => {
|
||||
const res = await getUserById(localStorage.token, id).catch((error) => {
|
||||
console.error(error);
|
||||
return null;
|
||||
});
|
||||
if (res) {
|
||||
selectedUsers[id] = res;
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="">
|
||||
{#if users === null || total === null}
|
||||
<div class="my-10">
|
||||
<Spinner className="size-5" />
|
||||
</div>
|
||||
{:else}
|
||||
{#if userIds.length > 0}
|
||||
<div class="mx-1 mb-1.5">
|
||||
<div class="text-xs text-gray-500 mx-0.5 mb-1">
|
||||
{userIds.length}
|
||||
{$i18n.t('users')}
|
||||
</div>
|
||||
<div class="flex gap-1 flex-wrap">
|
||||
{#each userIds as id}
|
||||
{#if selectedUsers[id]}
|
||||
<button
|
||||
type="button"
|
||||
class="inline-flex items-center space-x-1 px-2 py-1 bg-gray-100/50 dark:bg-gray-850 rounded-lg text-xs"
|
||||
on:click={() => {
|
||||
userIds = userIds.filter((uid) => uid !== id);
|
||||
delete selectedUsers[id];
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
{selectedUsers[id].name}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<XMark className="size-3" />
|
||||
</div>
|
||||
</button>
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="flex gap-1 px-0.5">
|
||||
<div class=" flex w-full space-x-2">
|
||||
<div class="flex flex-1">
|
||||
<div class=" self-center ml-1 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 py-1 rounded-r-xl outline-hidden bg-transparent"
|
||||
bind:value={query}
|
||||
placeholder={$i18n.t('Search')}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if users.length > 0}
|
||||
<div class="scrollbar-hidden relative whitespace-nowrap w-full max-w-full">
|
||||
<div class=" text-sm text-left text-gray-500 dark:text-gray-400 w-full max-w-full">
|
||||
<div
|
||||
class="text-xs text-gray-800 uppercase bg-transparent dark:text-gray-200 w-full mb-0.5"
|
||||
>
|
||||
<div
|
||||
class=" border-b-[1.5px] border-gray-50/50 dark:border-gray-800/10 flex items-center justify-between"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="px-2.5 py-2 cursor-pointer select-none"
|
||||
on:click={() => setSortKey('name')}
|
||||
>
|
||||
<div class="flex gap-1.5 items-center">
|
||||
{$i18n.t('Name')}
|
||||
|
||||
{#if orderBy === 'name'}
|
||||
<span class="font-normal"
|
||||
>{#if direction === 'asc'}
|
||||
<ChevronUp className="size-2" />
|
||||
{:else}
|
||||
<ChevronDown className="size-2" />
|
||||
{/if}
|
||||
</span>
|
||||
{:else}
|
||||
<span class="invisible">
|
||||
<ChevronUp className="size-2" />
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full">
|
||||
{#each users as user, userIdx}
|
||||
{#if user?.id !== $_user?.id}
|
||||
<button
|
||||
class=" dark:border-gray-850 text-xs flex items-center justify-between w-full"
|
||||
type="button"
|
||||
on:click={() => {
|
||||
if ((userIds ?? []).includes(user.id)) {
|
||||
userIds = userIds.filter((id) => id !== user.id);
|
||||
delete selectedUsers[user.id];
|
||||
} else {
|
||||
userIds = [...userIds, user.id];
|
||||
selectedUsers[user.id] = user;
|
||||
}
|
||||
onChange(userIds);
|
||||
}}
|
||||
>
|
||||
<div class="px-3 py-1.5 font-medium text-gray-900 dark:text-white flex-1">
|
||||
<div class="flex items-center gap-2">
|
||||
<ProfilePreview {user} side="right" align="center" sideOffset={6}>
|
||||
<img
|
||||
class="rounded-2xl w-6 h-6 object-cover flex-shrink-0"
|
||||
src={`${WEBUI_API_BASE_URL}/users/${user.id}/profile/image`}
|
||||
alt="user"
|
||||
/>
|
||||
</ProfilePreview>
|
||||
<Tooltip content={user.email} placement="top-start">
|
||||
<div class="font-medium truncate">{user.name}</div>
|
||||
</Tooltip>
|
||||
|
||||
{#if user?.is_active}
|
||||
<div>
|
||||
<span class="relative flex size-1.5">
|
||||
<span
|
||||
class="absolute inline-flex h-full w-full animate-ping rounded-full bg-green-400 opacity-75"
|
||||
></span>
|
||||
<span class="relative inline-flex size-1.5 rounded-full bg-green-500"
|
||||
></span>
|
||||
</span>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="px-3 py-1">
|
||||
<div class=" translate-y-0.5">
|
||||
<Checkbox
|
||||
state={(userIds ?? []).includes(user.id) ? 'checked' : 'unchecked'}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if pagination}
|
||||
{#if total > 30}
|
||||
<Pagination bind:page count={total} perPage={30} />
|
||||
{/if}
|
||||
{/if}
|
||||
{:else}
|
||||
<div class="text-gray-500 text-xs text-center py-5 px-10">
|
||||
{$i18n.t('No users were found.')}
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
@@ -68,9 +68,9 @@
|
||||
|
||||
<div class=" text-xs text-gray-400 font-medium">
|
||||
{#if state === 'private'}
|
||||
{$i18n.t('Only select users and groups with permission can access')}
|
||||
{$i18n.t('Only invited users can access')}
|
||||
{:else}
|
||||
{$i18n.t('Accessible to all users')}
|
||||
{$i18n.t('Visible to all users')}
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user