feat: dm channels
This commit is contained in:
Timothy Jaeryang Baek committed
1 parent
f2c56fc839
commit
acccb9afdd
13 files changed
+989
-216
No files matched your search
@@ -36,19 +36,27 @@
|
||||
<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">
|
||||
<div class=" size-4 justify-center flex items-center">
|
||||
{#if channel?.access_control === null}
|
||||
<Hashtag className="size-3.5" strokeWidth="2.5" />
|
||||
{:else}
|
||||
<Lock className="size-5.5" strokeWidth="2" />
|
||||
{/if}
|
||||
</div>
|
||||
{#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" />
|
||||
{:else}
|
||||
<Lock className="size-5.5" strokeWidth="2" />
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div
|
||||
class=" text-left self-center overflow-hidden w-full line-clamp-1 capitalize flex-1"
|
||||
>
|
||||
{channel.name}
|
||||
</div>
|
||||
<div
|
||||
class=" text-left self-center overflow-hidden w-full line-clamp-1 capitalize flex-1"
|
||||
>
|
||||
{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>
|
||||
|
||||
@@ -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,31 +96,33 @@
|
||||
<Spinner className="size-5" />
|
||||
</div>
|
||||
{:else}
|
||||
<div class="flex gap-1">
|
||||
<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>
|
||||
{#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">
|
||||
<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>
|
||||
<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}
|
||||
|
||||
{#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')}
|
||||
>
|
||||
|
||||
@@ -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(
|
||||
|
||||
@@ -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?.access_control === null}
|
||||
<Hashtag className="size-3" strokeWidth="2.5" />
|
||||
{#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}
|
||||
<Lock className="size-5" strokeWidth="2" />
|
||||
<Users className="size-4 ml-1 mr-0.5" strokeWidth="2" />
|
||||
{/if}
|
||||
</div>
|
||||
{:else}
|
||||
<div class=" size-4.5 justify-center flex items-center">
|
||||
{#if channel?.access_control === null}
|
||||
<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"
|
||||
>
|
||||
{channel.name}
|
||||
{#if channel?.name}
|
||||
{channel.name}
|
||||
{:else}
|
||||
{channel?.users
|
||||
?.filter((u) => u.id !== $user?.id)
|
||||
.map((u) => u.name)
|
||||
.join(', ')}
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
Reference in new issue
Block a user