ti.sil/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui.git synced 2025-12-11 20:05:19 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

feat: dm channels

Browse source
This commit is contained in:
Timothy Jaeryang Baek 2025-11-27 07:27:32 -05:00
parent f2c56fc839
commit acccb9afdd
13 changed files with 989 additions and 216 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

108
backend/open_webui/models/channels.py
View file

@ -113,22 +113,24 @@ class ChannelResponse(ChannelModel):
class ChannelForm(BaseModel):
type: Optional[str] = None
name: str
description: Optional[str] = None
data: Optional[dict] = None
meta: Optional[dict] = None
access_control: Optional[dict] = None
user_ids: Optional[list[str]] = None
class ChannelTable:
def insert_new_channel(
self, type: Optional[str], form_data: ChannelForm, user_id: str
self, form_data: ChannelForm, user_id: str
) -> Optional[ChannelModel]:
with get_db() as db:
channel = ChannelModel(
**{
**form_data.model_dump(),
"type": type,
"type": form_data.type if form_data.type else None,
"name": form_data.name.lower(),
"id": str(uuid.uuid4()),
"user_id": user_id,
@ -136,9 +138,34 @@ class ChannelTable:
"updated_at": int(time.time_ns()),
}
)
new_channel = Channel(**channel.model_dump())
if form_data.type == "dm":
# For direct message channels, automatically add the specified users as members
user_ids = form_data.user_ids or []
if user_id not in user_ids:
user_ids.append(user_id) # Ensure the creator is also a member
for uid in user_ids:
channel_member = ChannelMemberModel(
**{
"id": str(uuid.uuid4()),
"channel_id": channel.id,
"user_id": uid,
"status": "joined",
"is_active": True,
"is_channel_muted": False,
"is_channel_pinned": False,
"joined_at": int(time.time_ns()),
"left_at": None,
"last_read_at": int(time.time_ns()),
"created_at": int(time.time_ns()),
"updated_at": int(time.time_ns()),
}
)
new_membership = ChannelMember(**channel_member.model_dump())
db.add(new_membership)
db.add(new_channel)
db.commit()
return channel
@ -152,12 +179,41 @@ class ChannelTable:
self, user_id: str, permission: str = "read"
) -> list[ChannelModel]:
channels = self.get_channels()
return [
channel
for channel in channels
if channel.user_id == user_id
or has_access(user_id, permission, channel.access_control)
]
channel_list = []
for channel in channels:
if channel.type == "dm":
membership = self.get_member_by_channel_and_user_id(channel.id, user_id)
if membership and membership.is_active:
channel_list.append(channel)
else:
if channel.user_id == user_id or has_access(
user_id, permission, channel.access_control
):
channel_list.append(channel)
return channel_list
def get_dm_channel_by_user_ids(self, user_ids: list[str]) -> Optional[ChannelModel]:
with get_db() as db:
subquery = (
db.query(ChannelMember.channel_id)
.filter(ChannelMember.user_id.in_(user_ids))
.group_by(ChannelMember.channel_id)
.having(func.count(ChannelMember.user_id) == len(user_ids))
.subquery()
)
channel = (
db.query(Channel)
.filter(
Channel.id.in_(subquery),
Channel.type == "dm",
)
.first()
)
return ChannelModel.model_validate(channel) if channel else None
def join_channel(
self, channel_id: str, user_id: str
@ -233,6 +289,18 @@ class ChannelTable:
)
return ChannelMemberModel.model_validate(membership) if membership else None
def get_members_by_channel_id(self, channel_id: str) -> list[ChannelMemberModel]:
with get_db() as db:
memberships = (
db.query(ChannelMember)
.filter(ChannelMember.channel_id == channel_id)
.all()
)
return [
ChannelMemberModel.model_validate(membership)
for membership in memberships
]
def pin_channel(self, channel_id: str, user_id: str, is_pinned: bool) -> bool:
with get_db() as db:
membership = (
@ -271,6 +339,27 @@ class ChannelTable:
db.commit()
return True
def update_member_active_status(
self, channel_id: str, user_id: str, is_active: bool
) -> bool:
with get_db() as db:
membership = (
db.query(ChannelMember)
.filter(
ChannelMember.channel_id == channel_id,
ChannelMember.user_id == user_id,
)
.first()
)
if not membership:
return False
membership.is_active = is_active
membership.updated_at = int(time.time_ns())
db.commit()
return True
def is_user_channel_member(self, channel_id: str, user_id: str) -> bool:
with get_db() as db:
membership = (
@ -278,7 +367,6 @@ class ChannelTable:
.filter(
ChannelMember.channel_id == channel_id,
ChannelMember.user_id == user_id,
ChannelMember.is_active == True,
)
.first()
)

212
backend/open_webui/routers/channels.py
View file

@ -13,6 +13,7 @@ from open_webui.socket.main import (
get_active_status_by_user_id,
)
from open_webui.models.users import (
UserIdNameResponse,
UserListResponse,
UserModelResponse,
Users,
@ -66,6 +67,9 @@ router = APIRouter()
class ChannelListItemResponse(ChannelModel):
user_ids: Optional[list[str]] = None # 'dm' channels only
users: Optional[list[UserIdNameResponse]] = None # 'dm' channels only
last_message_at: Optional[int] = None # timestamp in epoch (time_ns)
unread_count: int = 0
@ -85,9 +89,23 @@ async def get_channels(user=Depends(get_verified_user)):
channel.id, user.id, channel_member.last_read_at if channel_member else None
)
user_ids = None
users = None
if channel.type == "dm":
user_ids = [
member.user_id
for member in Channels.get_members_by_channel_id(channel.id)
]
users = [
UserIdNameResponse(**user.model_dump())
for user in Users.get_users_by_user_ids(user_ids)
]
channel_list.append(
ChannelListItemResponse(
**channel.model_dump(),
user_ids=user_ids,
users=users,
last_message_at=last_message_at,
unread_count=unread_count,
)
@ -111,7 +129,15 @@ async def get_all_channels(user=Depends(get_verified_user)):
@router.post("/create", response_model=Optional[ChannelModel])
async def create_new_channel(form_data: ChannelForm, user=Depends(get_admin_user)):
try:
channel = Channels.insert_new_channel(None, form_data, user.id)
if form_data.type == "dm" and len(form_data.user_ids) == 1:
existing_channel = Channels.get_dm_channel_by_user_ids(
[user.id, form_data.user_ids[0]]
)
if existing_channel:
Channels.update_member_active_status(existing_channel.id, user.id, True)
return ChannelModel(**existing_channel.model_dump())
channel = Channels.insert_new_channel(form_data, user.id)
return ChannelModel(**channel.model_dump())
except Exception as e:
log.exception(e)
@ -125,7 +151,15 @@ async def create_new_channel(form_data: ChannelForm, user=Depends(get_admin_user
############################
@router.get("/{id}", response_model=Optional[ChannelResponse])
class ChannelFullResponse(ChannelResponse):
user_ids: Optional[list[str]] = None # 'dm' channels only
users: Optional[list[UserIdNameResponse]] = None # 'dm' channels only
last_read_at: Optional[int] = None # timestamp in epoch (time_ns)
unread_count: int = 0
@router.get("/{id}", response_model=Optional[ChannelFullResponse])
async def get_channel_by_id(id: str, user=Depends(get_verified_user)):
channel = Channels.get_channel_by_id(id)
if not channel:
@ -133,6 +167,41 @@ async def get_channel_by_id(id: str, user=Depends(get_verified_user)):
status_code=status.HTTP_404_NOT_FOUND, detail=ERROR_MESSAGES.NOT_FOUND
)
user_ids = None
users = None
if channel.type == "dm":
if not Channels.is_user_channel_member(channel.id, user.id):
raise HTTPException(
status_code=status.HTTP_403_FORBIDDEN, detail=ERROR_MESSAGES.DEFAULT()
)
user_ids = [
member.user_id for member in Channels.get_members_by_channel_id(channel.id)
]
users = [
UserIdNameResponse(**user.model_dump())
for user in Users.get_users_by_user_ids(user_ids)
]
channel_member = Channels.get_member_by_channel_and_user_id(channel.id, user.id)
unread_count = Messages.get_unread_message_count(
channel.id, user.id, channel_member.last_read_at if channel_member else None
)
return ChannelFullResponse(
**{
**channel.model_dump(),
"user_ids": user_ids,
"users": users,
"write_access": True,
"user_count": len(user_ids),
"last_read_at": channel_member.last_read_at if channel_member else None,
"unread_count": unread_count,
}
)
else:
if user.role != "admin" and not has_access(
user.id, type="read", access_control=channel.access_control
):
@ -146,20 +215,34 @@ async def get_channel_by_id(id: str, user=Depends(get_verified_user)):
user_count = len(get_users_with_access("read", channel.access_control))
return ChannelResponse(
channel_member = Channels.get_member_by_channel_and_user_id(channel.id, user.id)
unread_count = Messages.get_unread_message_count(
channel.id, user.id, channel_member.last_read_at if channel_member else None
)
return ChannelFullResponse(
**{
**channel.model_dump(),
"user_ids": user_ids,
"users": users,
"write_access": write_access or user.role == "admin",
"user_count": user_count,
"last_read_at": channel_member.last_read_at if channel_member else None,
"unread_count": unread_count,
}
)
############################
# GetChannelMembersById
############################
PAGE_ITEM_COUNT = 30
@router.get("/{id}/users", response_model=UserListResponse)
async def get_channel_users_by_id(
@router.get("/{id}/members", response_model=UserListResponse)
async def get_channel_members_by_id(
id: str,
query: Optional[str] = None,
order_by: Optional[str] = None,
@ -179,6 +262,30 @@ async def get_channel_users_by_id(
page = max(1, page)
skip = (page - 1) * limit
if channel.type == "dm":
if not Channels.is_user_channel_member(channel.id, user.id):
raise HTTPException(
status_code=status.HTTP_403_FORBIDDEN, detail=ERROR_MESSAGES.DEFAULT()
)
user_ids = [
member.user_id for member in Channels.get_members_by_channel_id(channel.id)
]
users = Users.get_users_by_user_ids(user_ids)
total = len(users)
return {
"users": [
UserModelResponse(
**user.model_dump(), is_active=get_active_status_by_user_id(user.id)
)
for user in users
],
"total": total,
}
else:
filter = {
"roles": ["!pending"],
}
@ -211,6 +318,36 @@ async def get_channel_users_by_id(
}
#################################################
# UpdateIsActiveMemberByIdAndUserId
#################################################
class UpdateActiveMemberForm(BaseModel):
is_active: bool
@router.post("/{id}/members/active", response_model=bool)
async def update_is_active_member_by_id_and_user_id(
id: str,
form_data: UpdateActiveMemberForm,
user=Depends(get_verified_user),
):
channel = Channels.get_channel_by_id(id)
if not channel:
raise HTTPException(
status_code=status.HTTP_404_NOT_FOUND, detail=ERROR_MESSAGES.NOT_FOUND
)
if not Channels.is_user_channel_member(channel.id, user.id):
raise HTTPException(
status_code=status.HTTP_404_NOT_FOUND, detail=ERROR_MESSAGES.NOT_FOUND
)
Channels.update_member_active_status(channel.id, user.id, form_data.is_active)
return True
############################
# UpdateChannelById
############################
@ -278,6 +415,12 @@ async def get_channel_messages(
status_code=status.HTTP_404_NOT_FOUND, detail=ERROR_MESSAGES.NOT_FOUND
)
if channel.type == "dm":
if not Channels.is_user_channel_member(channel.id, user.id):
raise HTTPException(
status_code=status.HTTP_403_FORBIDDEN, detail=ERROR_MESSAGES.DEFAULT()
)
else:
if user.role != "admin" and not has_access(
user.id, type="read", access_control=channel.access_control
):
@ -533,6 +676,12 @@ async def new_message_handler(
status_code=status.HTTP_404_NOT_FOUND, detail=ERROR_MESSAGES.NOT_FOUND
)
if channel.type == "dm":
if not Channels.is_user_channel_member(channel.id, user.id):
raise HTTPException(
status_code=status.HTTP_403_FORBIDDEN, detail=ERROR_MESSAGES.DEFAULT()
)
else:
if user.role != "admin" and not has_access(
user.id, type="write", access_control=channel.access_control, strict=False
):
@ -543,6 +692,14 @@ async def new_message_handler(
try:
message = Messages.insert_new_message(form_data, channel.id, user.id)
if message:
if channel.type == "dm":
members = Channels.get_members_by_channel_id(channel.id)
for member in members:
if not member.is_active:
Channels.update_member_active_status(
channel.id, member.user_id, True
)
message = Messages.get_message_by_id(message.id)
event_data = {
"channel_id": channel.id,
@ -641,6 +798,12 @@ async def get_channel_message(
status_code=status.HTTP_404_NOT_FOUND, detail=ERROR_MESSAGES.NOT_FOUND
)
if channel.type == "dm":
if not Channels.is_user_channel_member(channel.id, user.id):
raise HTTPException(
status_code=status.HTTP_403_FORBIDDEN, detail=ERROR_MESSAGES.DEFAULT()
)
else:
if user.role != "admin" and not has_access(
user.id, type="read", access_control=channel.access_control
):
@ -690,6 +853,12 @@ async def get_channel_thread_messages(
status_code=status.HTTP_404_NOT_FOUND, detail=ERROR_MESSAGES.NOT_FOUND
)
if channel.type == "dm":
if not Channels.is_user_channel_member(channel.id, user.id):
raise HTTPException(
status_code=status.HTTP_403_FORBIDDEN, detail=ERROR_MESSAGES.DEFAULT()
)
else:
if user.role != "admin" and not has_access(
user.id, type="read", access_control=channel.access_control
):
@ -749,10 +918,18 @@ async def update_message_by_id(
status_code=status.HTTP_400_BAD_REQUEST, detail=ERROR_MESSAGES.DEFAULT()
)
if channel.type == "dm":
if not Channels.is_user_channel_member(channel.id, user.id):
raise HTTPException(
status_code=status.HTTP_403_FORBIDDEN, detail=ERROR_MESSAGES.DEFAULT()
)
else:
if (
user.role != "admin"
and message.user_id != user.id
and not has_access(user.id, type="read", access_control=channel.access_control)
and not has_access(
user.id, type="read", access_control=channel.access_control
)
):
raise HTTPException(
status_code=status.HTTP_403_FORBIDDEN, detail=ERROR_MESSAGES.DEFAULT()
@ -805,6 +982,12 @@ async def add_reaction_to_message(
status_code=status.HTTP_404_NOT_FOUND, detail=ERROR_MESSAGES.NOT_FOUND
)
if channel.type == "dm":
if not Channels.is_user_channel_member(channel.id, user.id):
raise HTTPException(
status_code=status.HTTP_403_FORBIDDEN, detail=ERROR_MESSAGES.DEFAULT()
)
else:
if user.role != "admin" and not has_access(
user.id, type="write", access_control=channel.access_control, strict=False
):
@ -868,6 +1051,12 @@ async def remove_reaction_by_id_and_user_id_and_name(
status_code=status.HTTP_404_NOT_FOUND, detail=ERROR_MESSAGES.NOT_FOUND
)
if channel.type == "dm":
if not Channels.is_user_channel_member(channel.id, user.id):
raise HTTPException(
status_code=status.HTTP_403_FORBIDDEN, detail=ERROR_MESSAGES.DEFAULT()
)
else:
if user.role != "admin" and not has_access(
user.id, type="write", access_control=channel.access_control, strict=False
):
@ -945,11 +1134,20 @@ async def delete_message_by_id(
status_code=status.HTTP_400_BAD_REQUEST, detail=ERROR_MESSAGES.DEFAULT()
)
if channel.type == "dm":
if not Channels.is_user_channel_member(channel.id, user.id):
raise HTTPException(
status_code=status.HTTP_403_FORBIDDEN, detail=ERROR_MESSAGES.DEFAULT()
)
else:
if (
user.role != "admin"
and message.user_id != user.id
and not has_access(
user.id, type="write", access_control=channel.access_control, strict=False
user.id,
type="write",
access_control=channel.access_control,
strict=False,
)
):
raise HTTPException(

42
src/lib/apis/channels/index.ts
View file

@ -1,10 +1,12 @@
import { WEBUI_API_BASE_URL } from '$lib/constants';
type ChannelForm = {
type?: string;
name: string;
data?: object;
meta?: object;
access_control?: object;
user_ids?: string[];
};
export const createNewChannel = async (token: string = '', channel: ChannelForm) => {
@ -101,7 +103,7 @@ export const getChannelById = async (token: string = '', channel_id: string) =>
return res;
};
export const getChannelUsersById = async (
export const getChannelMembersById = async (
token: string,
channel_id: string,
query?: string,
@ -129,7 +131,7 @@ export const getChannelUsersById = async (
}
res = await fetch(
`${WEBUI_API_BASE_URL}/channels/${channel_id}/users?${searchParams.toString()}`,
`${WEBUI_API_BASE_URL}/channels/${channel_id}/members?${searchParams.toString()}`,
{
method: 'GET',
headers: {
@ -155,6 +157,42 @@ export const getChannelUsersById = async (
return res;
};
export const updateChannelMemberActiveStatusById = async (
token: string = '',
channel_id: string,
is_active: boolean
) => {
let error = null;
const res = await fetch(`${WEBUI_API_BASE_URL}/channels/${channel_id}/members/active`, {
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
authorization: `Bearer ${token}`
},
body: JSON.stringify({ is_active })
})
.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 updateChannelById = async (
token: string = '',
channel_id: string,

2
src/lib/components/admin/Users/Groups/Users.svelte
View file

@ -113,7 +113,7 @@
class="w-full text-sm text-left text-gray-500 dark:text-gray-400 table-auto max-w-full"
>
<thead class="text-xs text-gray-800 uppercase bg-transparent dark:text-gray-200">
<tr class=" border-b-[1.5px] border-gray-50 dark:border-gray-850">
<tr class=" border-b-[1.5px] border-gray-50/50 dark:border-gray-800/10">
<th
scope="col"
class="px-2.5 py-2 cursor-pointer text-left w-8"

10
src/lib/components/channel/ChannelInfoModal.svelte
View file

@ -36,6 +36,13 @@
<div class=" flex justify-between dark:text-gray-100 px-5 pt-4 mb-1.5">
<div class="self-center text-base">
<div class="flex items-center gap-0.5 shrink-0">
{#if channel?.type === 'dm'}
<div
class=" text-left self-center overflow-hidden w-full line-clamp-1 capitalize flex-1"
>
{$i18n.t('Direct Message')}
</div>
{:else}
<div class=" size-4 justify-center flex items-center">
{#if channel?.access_control === null}
<Hashtag className="size-3.5" strokeWidth="2.5" />
@ -49,6 +56,7 @@
>
{channel.name}
</div>
{/if}
</div>
</div>
<button
@ -71,7 +79,7 @@
}}
>
<div class="flex flex-col w-full h-full pb-2">
<UserList {channel} />
<UserList {channel} search={channel?.type !== 'dm'} sort={channel?.type !== 'dm'} />
</div>
</form>
</div>

18
src/lib/components/channel/ChannelInfoModal/UserList.svelte
View file

@ -11,7 +11,7 @@
dayjs.extend(localizedFormat);
import { toast } from 'svelte-sonner';
import { getChannelUsersById } from '$lib/apis/channels';
import { getChannelMembersById } from '$lib/apis/channels';
import Pagination from '$lib/components/common/Pagination.svelte';
import ChatBubbles from '$lib/components/icons/ChatBubbles.svelte';
@ -37,6 +37,8 @@
const i18n = getContext('i18n');
export let channel = null;
export let search = true;
export let sort = true;
let page = 1;
@ -48,6 +50,10 @@
let direction = 'asc'; // default sort order
const setSortKey = (key) => {
if (!sort) {
return;
}
if (orderBy === key) {
direction = direction === 'asc' ? 'desc' : 'asc';
} else {
@ -58,7 +64,7 @@
const getUserList = async () => {
try {
const res = await getChannelUsersById(
const res = await getChannelMembersById(
localStorage.token,
channel.id,
query,
@ -90,7 +96,8 @@
<Spinner className="size-5" />
</div>
{:else}
<div class="flex gap-1">
{#if search}
<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">
@ -115,6 +122,7 @@
</div>
</div>
</div>
{/if}
{#if users.length > 0}
<div class="scrollbar-hidden relative whitespace-nowrap w-full max-w-full">
@ -123,9 +131,10 @@
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 dark:border-gray-850 flex items-center justify-between"
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')}
>
@ -149,6 +158,7 @@
</button>
<button
type="button"
class="px-2.5 py-2 cursor-pointer select-none"
on:click={() => setSortKey('role')}
>

27
src/lib/components/channel/Messages.svelte
View file

@ -17,6 +17,7 @@
import Loader from '../common/Loader.svelte';
import Spinner from '../common/Spinner.svelte';
import { addReaction, deleteMessage, removeReaction, updateMessage } from '$lib/apis/channels';
import { WEBUI_API_BASE_URL } from '$lib/constants';
const i18n = getContext('i18n');
@ -68,7 +69,31 @@
<div class="px-5 max-w-full mx-auto">
{#if channel}
<div class="flex flex-col gap-1.5 pb-5 pt-10">
<div class="text-2xl font-medium capitalize">{channel.name}</div>
{#if channel?.type === 'dm'}
<div class="flex ml-[1px] mr-0.5">
{#each channel.users.filter((u) => u.id !== $user?.id).slice(0, 2) as u, index}
<img
src={`${WEBUI_API_BASE_URL}/users/${u.id}/profile/image`}
alt={u.name}
class=" size-7.5 rounded-full border-2 border-white dark:border-gray-900 {index ===
1
? '-ml-2.5'
: ''}"
/>
{/each}
</div>
{/if}
<div class="text-2xl font-medium capitalize">
{#if channel?.name}
{channel.name}
{:else}
{channel?.users
?.filter((u) => u.id !== $user?.id)
.map((u) => u.name)
.join(', ')}
{/if}
</div>
<div class=" text-gray-500">
{$i18n.t(

33
src/lib/components/channel/Navbar.svelte
View file

@ -17,6 +17,7 @@
import Lock from '../icons/Lock.svelte';
import UserAlt from '../icons/UserAlt.svelte';
import ChannelInfoModal from './ChannelInfoModal.svelte';
import Users from '../icons/Users.svelte';
const i18n = getContext('i18n');
@ -60,24 +61,50 @@
{/if}
<div
class="flex-1 overflow-hidden max-w-full py-0.5
class="flex-1 overflow-hidden max-w-full py-0.5 flex items-center
{$showSidebar ? 'ml-1' : ''}
"
>
{#if channel}
<div class="flex items-center gap-0.5 shrink-0">
<div class=" size-4 justify-center flex items-center">
{#if channel?.type === 'dm'}
{#if channel?.users}
<div class="flex mr-1.5">
{#each channel.users.filter((u) => u.id !== $user?.id).slice(0, 2) as u, index}
<img
src={`${WEBUI_API_BASE_URL}/users/${u.id}/profile/image`}
alt={u.name}
class=" size-6.5 rounded-full border-2 border-white dark:border-gray-900 {index ===
1
? '-ml-3'
: ''}"
/>
{/each}
</div>
{:else}
<Users className="size-4 ml-1 mr-0.5" strokeWidth="2" />
{/if}
{:else}
<div class=" size-4.5 justify-center flex items-center">
{#if channel?.access_control === null}
<Hashtag className="size-3" strokeWidth="2.5" />
<Hashtag className="size-3.5" strokeWidth="2.5" />
{:else}
<Lock className="size-5" strokeWidth="2" />
{/if}
</div>
{/if}
<div
class=" text-left self-center overflow-hidden w-full line-clamp-1 capitalize flex-1"
>
{#if channel?.name}
{channel.name}
{:else}
{channel?.users
?.filter((u) => u.id !== $user?.id)
.map((u) => u.name)
.join(', ')}
{/if}
</div>
</div>
{/if}

29
src/lib/components/layout/Sidebar.svelte
View file

@ -181,7 +181,11 @@
};
const initChannels = async () => {
await channels.set(await getChannels(localStorage.token));
await channels.set(
(await getChannels(localStorage.token)).sort((a, b) =>
a.type === b.type ? 0 : a.type === 'dm' ? 1 : -1
)
);
};
const initChatList = async () => {
@ -482,16 +486,26 @@
<ChannelModal
bind:show={showCreateChannel}
onSubmit={async ({ name, access_control }) => {
onSubmit={async ({ type, name, access_control, user_ids }) => {
name = name?.trim();
if (type === 'dm') {
if (!user_ids || user_ids.length === 0) {
toast.error($i18n.t('Please select at least one user for Direct Message channel.'));
return;
}
} else {
if (!name) {
toast.error($i18n.t('Channel name cannot be empty.'));
return;
}
}
const res = await createNewChannel(localStorage.token, {
type: type,
name: name,
access_control: access_control
access_control: access_control,
user_ids: user_ids
}).catch((error) => {
toast.error(`${error}`);
return null;
@ -501,6 +515,8 @@
$socket.emit('join-channels', { auth: { token: $user?.token } });
await initChannels();
showCreateChannel = false;
goto(`/channels/${res.id}`);
}
}}
/>
@ -925,13 +941,18 @@
: null}
onAddLabel={$i18n.t('Create Channel')}
>
{#each $channels as channel}
{#each $channels as channel, channelIdx (`${channel?.id}`)}
<ChannelItem
{channel}
onUpdate={async () => {
await initChannels();
}}
/>
{#if channelIdx < $channels.length - 1 && channel.type !== $channels[channelIdx + 1]?.type}<hr
class=" border-gray-100 dark:border-gray-800/10 my-1.5 w-full"
/>
{/if}
{/each}
</Folder>
{/if}

84
src/lib/components/layout/Sidebar/ChannelItem.svelte
View file

@ -5,12 +5,15 @@
import { page } from '$app/stores';
import { channels, mobile, showSidebar, user } from '$lib/stores';
import { updateChannelById } from '$lib/apis/channels';
import { updateChannelById, updateChannelMemberActiveStatusById } from '$lib/apis/channels';
import { WEBUI_API_BASE_URL } from '$lib/constants';
import Cog6 from '$lib/components/icons/Cog6.svelte';
import ChannelModal from './ChannelModal.svelte';
import Lock from '$lib/components/icons/Lock.svelte';
import Hashtag from '$lib/components/icons/Hashtag.svelte';
import Users from '$lib/components/icons/Users.svelte';
import XMark from '$lib/components/icons/XMark.svelte';
export let onUpdate: Function = () => {};
@ -49,7 +52,7 @@
class=" w-full {className} rounded-xl flex relative group hover:bg-gray-100 dark:hover:bg-gray-900 {$page
.url.pathname === `/channels/${channel.id}`
? 'bg-gray-100 dark:bg-gray-900 selected'
: ''} px-2.5 py-1 {channel?.unread_count > 0
: ''} {channel?.type === 'dm' ? 'px-1 py-[3px]' : 'p-1'} {channel?.unread_count > 0
? 'font-medium dark:text-white text-black'
: ' dark:text-gray-400 text-gray-600'} cursor-pointer select-none"
>
@ -76,17 +79,45 @@
}}
draggable="false"
>
<div class="flex items-center gap-1 shrink-0">
<div class=" size-4 justify-center flex items-center">
<div class="flex items-center gap-1">
<div>
{#if channel?.type === 'dm'}
{#if channel?.users}
<div class="flex ml-[1px] mr-0.5">
{#each channel.users.filter((u) => u.id !== $user?.id).slice(0, 2) as u, index}
<img
src={`${WEBUI_API_BASE_URL}/users/${u.id}/profile/image`}
alt={u.name}
class=" size-5.5 rounded-full border-2 border-white dark:border-gray-900 {index ===
1
? '-ml-2.5'
: ''}"
/>
{/each}
</div>
{:else}
<Users className="size-4 ml-1 mr-0.5" strokeWidth="2" />
{/if}
{:else}
<div class=" size-4 justify-center flex items-center ml-1">
{#if channel?.access_control === null}
<Hashtag className="size-3" strokeWidth="2.5" />
<Hashtag className="size-3.5" strokeWidth="2.5" />
{:else}
<Lock className="size-[15px]" strokeWidth="2" />
{/if}
</div>
{/if}
</div>
<div class=" text-left self-center overflow-hidden w-full line-clamp-1 flex-1">
<div class=" text-left self-center overflow-hidden w-full line-clamp-1 flex-1 pr-1">
{#if channel?.name}
{channel.name}
{:else}
{channel?.users
?.filter((u) => u.id !== $user?.id)
.map((u) => u.name)
.join(', ')}
{/if}
</div>
</div>
@ -101,20 +132,51 @@
}).format(channel.unread_count)}
</div>
{/if}
</div>
</a>
{#if $user?.role === 'admin'}
{#if channel?.type === 'dm'}
<div
class="right-2 invisible group-hover:visible self-center flex items-center dark:text-gray-300"
class="ml-0.5 mr-1 invisible group-hover:visible self-center flex items-center dark:text-gray-300"
>
<button
type="button"
class="p-0.5 dark:hover:bg-gray-850 rounded-lg touch-auto"
on:click={async (e) => {
e.stopImmediatePropagation();
e.stopPropagation();
channels.update((chs) =>
chs.filter((ch) => {
return ch.id !== channel.id;
})
);
await updateChannelMemberActiveStatusById(localStorage.token, channel.id, false).catch(
(error) => {
toast.error(`${error}`);
}
);
}}
>
<XMark className="size-3.5" />
</button>
</div>
{:else if $user?.role === 'admin'}
<div
class="ml-0.5 mr-1 invisible group-hover:visible self-center flex items-center dark:text-gray-300"
>
<button
type="button"
class="p-0.5 dark:hover:bg-gray-850 rounded-lg touch-auto"
on:click={(e) => {
e.stopImmediatePropagation();
e.stopPropagation();
showEditChannelModal = true;
}}
>
<button class="p-0.5 dark:hover:bg-gray-850 rounded-lg touch-auto" on:click={(e) => {}}>
<Cog6 className="size-3.5" />
</button>
</div>
{/if}
</div>
</a>
</div>

44
src/lib/components/layout/Sidebar/ChannelModal.svelte
View file

@ -11,6 +11,7 @@
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');
export let show = false;
@ -20,8 +21,11 @@
export let channel = null;
export let edit = false;
let type = '';
let name = '';
let accessControl = {};
let userIds = [];
let loading = false;
@ -32,16 +36,20 @@
const submitHandler = async () => {
loading = true;
await onSubmit({
type: type,
name: name.replace(/\s/g, '-'),
access_control: accessControl
access_control: accessControl,
user_ids: userIds
});
show = false;
loading = false;
};
const init = () => {
name = channel.name;
type = channel?.type ?? '';
name = channel?.name ?? '';
accessControl = channel.access_control;
userIds = channel?.user_ids ?? [];
};
$: if (show) {
@ -74,8 +82,10 @@
};
const resetHandler = () => {
type = '';
name = '';
accessControl = {};
userIds = [];
loading = false;
};
</script>
@ -109,25 +119,49 @@
}}
>
<div class="flex flex-col w-full mt-2">
<div class=" mb-1 text-xs text-gray-500">{$i18n.t('Channel Name')}</div>
<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}
>
<option value="">{$i18n.t('Channel')}</option>
<option value="dm">{$i18n.t('Direct Message')}</option>
</select>
</div>
</div>
<div class="flex flex-col w-full mt-2">
<div class=" mb-1 text-xs text-gray-500">
{$i18n.t('Channel Name')}
<span class="text-xs text-gray-200 dark:text-gray-800 ml-0.5"
>{type === 'dm' ? `${$i18n.t('Optional')}` : ''}</span
>
</div>
<div class="flex-1">
<input
class="w-full text-sm bg-transparent placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-hidden"
type="text"
bind:value={name}
placeholder={$i18n.t('new-channel')}
placeholder={`${$i18n.t('new-channel')}`}
autocomplete="off"
required={type !== 'dm'}
/>
</div>
</div>
<hr class=" border-gray-100 dark:border-gray-700/10 my-2.5 w-full" />
<div class="my-2 -mx-2">
<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">
<AccessControl bind:accessControl accessRoles={['read', 'write']} />
</div>
{/if}
</div>
<div class="flex justify-end pt-3 text-sm font-medium gap-1.5">

253
src/lib/components/workspace/common/UserListSelector.svelte Normal file
View file

@ -0,0 +1,253 @@
<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>
<button type="button" class="px-2.5 py-2 cursor-pointer select-none">
<div class="flex gap-1.5 items-center">
{$i18n.t('MBR')}
</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>

9
src/routes/+layout.svelte
View file

@ -56,6 +56,7 @@
import Spinner from '$lib/components/common/Spinner.svelte';
import { getUserSettings } from '$lib/apis/users';
import dayjs from 'dayjs';
import { getChannels } from '$lib/apis/channels';
const unregisterServiceWorkers = async () => {
if ('serviceWorker' in navigator) {
@ -485,6 +486,7 @@
const data = event?.data?.data ?? null;
if ($channels) {
if ($channels.find((ch) => ch.id === event.channel_id)) {
channels.set(
$channels.map((ch) => {
if (ch.id === event.channel_id) {
@ -499,6 +501,13 @@
return ch;
})
);
} else {
await channels.set(
(await getChannels(localStorage.token)).sort((a, b) =>
a.type === b.type ? 0 : a.type === 'dm' ? 1 : -1
)
);
}
}
if (type === 'message') {