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

feat/enh: dm from user profile preview

Browse source
This commit is contained in:
Timothy Jaeryang Baek 2025-11-30 11:04:06 -05:00
parent 3c846617cd
commit a0826ec9fe
4 changed files with 112 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -137,7 +137,7 @@ async def get_all_channels(user=Depends(get_verified_user)):
############################
@router.get("/dm/{user_id}", response_model=Optional[ChannelModel])
@router.get("/users/{user_id}", response_model=Optional[ChannelModel])
async def get_dm_channel_by_user_id(
request: Request, user_id: str, user=Depends(get_verified_user)
):

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

@ -104,6 +104,37 @@ export const getChannelById = async (token: string = '', channel_id: string) =>
return res;
};
export const getDMChannelByUserId = async (token: string = '', user_id: string) => {
let error = null;
const res = await fetch(`${WEBUI_API_BASE_URL}/channels/users/${user_id}`, {
method: 'GET',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
authorization: `Bearer ${token}`
}
})
.then(async (res) => {
if (!res.ok) throw await res.json();
return res.json();
})
.then((json) => {
return json;
})
.catch((err) => {
error = err.detail;
console.error(err);
return null;
});
if (error) {
throw error;
}
return res;
};
export const getChannelMembersById = async (
token: string,
channel_id: string,

2
src/lib/components/channel/Messages/Message/ProfilePreview.svelte
View file

@ -15,7 +15,7 @@
let openPreview = false;
</script>
<LinkPreview.Root openDelay={0} closeDelay={100} bind:open={openPreview}>
<LinkPreview.Root openDelay={0} closeDelay={200} bind:open={openPreview}>
<LinkPreview.Trigger class="flex items-center">
<button
type="button"

110
src/lib/components/channel/Messages/Message/UserStatus.svelte
View file

@ -2,48 +2,96 @@
import { getContext, onMount } from 'svelte';
const i18n = getContext('i18n');
import { user as _user } from '$lib/stores';
import { WEBUI_API_BASE_URL, WEBUI_BASE_URL } from '$lib/constants';
import { getDMChannelByUserId } from '$lib/apis/channels';
import ChatBubbles from '$lib/components/icons/ChatBubbles.svelte';
import ChatBubble from '$lib/components/icons/ChatBubble.svelte';
import ChatBubbleOval from '$lib/components/icons/ChatBubbleOval.svelte';
import { goto } from '$app/navigation';
export let user = null;
const directMessageHandler = async () => {
if (!user) {
return;
}
const res = await getDMChannelByUserId(localStorage.token, user.id).catch((error) => {
console.error('Error fetching DM channel:', error);
return null;
});
if (res) {
console.log(res);
goto(`/channels/${res.id}`);
}
};
</script>
{#if user}
<div class=" flex gap-3.5 w-full py-3 px-3 items-center">
<div class=" items-center flex shrink-0">
<img
src={`${WEBUI_API_BASE_URL}/users/${user?.id}/profile/image`}
class=" size-12 object-cover rounded-xl"
alt="profile"
/>
</div>
<div class=" flex flex-col w-full flex-1">
<div class="mb-0.5 font-medium line-clamp-1 pr-2">
{user.name}
<div class="py-2.5">
<div class=" flex gap-3.5 w-full px-2.5 items-center">
<div class=" items-center flex shrink-0">
<img
src={`${WEBUI_API_BASE_URL}/users/${user?.id}/profile/image`}
class=" size-12 object-cover rounded-xl"
alt="profile"
/>
</div>
<div class=" flex items-center gap-2">
{#if user?.is_active}
<div>
<span class="relative flex size-2">
<span
class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"
/>
<span class="relative inline-flex rounded-full size-2 bg-green-500" />
</span>
</div>
<div class=" flex flex-col w-full flex-1">
<div class="mb-0.5 font-medium line-clamp-1 pr-2">
{user.name}
</div>
<span class="text-xs"> {$i18n.t('Active')} </span>
{:else}
<div>
<span class="relative flex size-2">
<span class="relative inline-flex rounded-full size-2 bg-gray-500" />
</span>
</div>
<div class=" flex items-center gap-2">
{#if user?.is_active}
<div>
<span class="relative flex size-2">
<span
class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"
/>
<span class="relative inline-flex rounded-full size-2 bg-green-500" />
</span>
</div>
<span class="text-xs"> {$i18n.t('Away')} </span>
{/if}
<span class="text-xs"> {$i18n.t('Active')} </span>
{:else}
<div>
<span class="relative flex size-2">
<span class="relative inline-flex rounded-full size-2 bg-gray-500" />
</span>
</div>
<span class="text-xs"> {$i18n.t('Away')} </span>
{/if}
</div>
</div>
</div>
{#if $_user?.id !== user.id}
<hr class="border-gray-100/50 dark:border-gray-800/50 my-2.5" />
<div class=" flex flex-col w-full px-2.5 items-center">
<button
class="w-full text-left px-3 py-1.5 rounded-xl border border-gray-100/50 dark:border-gray-800/50 hover:bg-gray-50 dark:hover:bg-gray-850 transition flex items-center gap-2 text-sm"
type="button"
on:click={() => {
directMessageHandler();
}}
>
<div>
<ChatBubbleOval class="size-4" />
</div>
<div class="font-medium">
{$i18n.t('Message')}
</div>
</button>
</div>
{/if}
</div>
{/if}