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/enh: user status

Browse source
This commit is contained in:
Timothy Jaeryang Baek 2025-12-01 13:18:59 -05:00
parent dba86bc980
commit 51621ba91a
10 changed files with 422 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
backend/open_webui/models/users.py
View file

@ -170,7 +170,13 @@ class UserGroupIdsListResponse(BaseModel):
total: int
class UserInfoResponse(BaseModel):
class UserStatus(BaseModel):
status_emoji: Optional[str] = None
status_message: Optional[str] = None
status_expires_at: Optional[int] = None
class UserInfoResponse(UserStatus):
id: str
name: str
email: str
@ -493,6 +499,21 @@ class UsersTable:
except Exception:
return None
def update_user_status_by_id(
self, id: str, form_data: UserStatus
) -> Optional[UserModel]:
try:
with get_db() as db:
db.query(User).filter_by(id=id).update(
{**form_data.model_dump(exclude_none=True)}
)
db.commit()
user = db.query(User).filter_by(id=id).first()
return UserModel.model_validate(user)
except Exception:
return None
def update_user_profile_image_url_by_id(
self, id: str, profile_image_url: str
) -> Optional[UserModel]:

12
backend/open_webui/routers/auths.py
View file

@ -17,7 +17,12 @@ from open_webui.models.auths import (
SignupForm,
UpdatePasswordForm,
)
from open_webui.models.users import UserProfileImageResponse, Users, UpdateProfileForm
from open_webui.models.users import (
UserProfileImageResponse,
Users,
UpdateProfileForm,
UserStatus,
)
from open_webui.models.groups import Groups
from open_webui.models.oauth_sessions import OAuthSessions
@ -82,7 +87,7 @@ class SessionUserResponse(Token, UserProfileImageResponse):
permissions: Optional[dict] = None
class SessionUserInfoResponse(SessionUserResponse):
class SessionUserInfoResponse(SessionUserResponse, UserStatus):
bio: Optional[str] = None
gender: Optional[str] = None
date_of_birth: Optional[datetime.date] = None
@ -139,6 +144,9 @@ async def get_session_user(
"bio": user.bio,
"gender": user.gender,
"date_of_birth": user.date_of_birth,
"status_emoji": user.status_emoji,
"status_message": user.status_message,
"status_expires_at": user.status_expires_at,
"permissions": user_permissions,
}

44
backend/open_webui/routers/users.py
View file

@ -21,6 +21,7 @@ from open_webui.models.users import (
UserInfoListResponse,
UserInfoListResponse,
UserRoleUpdateForm,
UserStatus,
Users,
UserSettings,
UserUpdateForm,
@ -299,6 +300,43 @@ async def update_user_settings_by_session_user(
)
############################
# GetUserStatusBySessionUser
############################
@router.get("/user/status")
async def get_user_status_by_session_user(user=Depends(get_verified_user)):
user = Users.get_user_by_id(user.id)
if user:
return user
else:
raise HTTPException(
status_code=status.HTTP_400_BAD_REQUEST,
detail=ERROR_MESSAGES.USER_NOT_FOUND,
)
############################
# UpdateUserStatusBySessionUser
############################
@router.post("/user/status/update")
async def update_user_status_by_session_user(
form_data: UserStatus, user=Depends(get_verified_user)
):
user = Users.get_user_by_id(user.id)
if user:
user = Users.update_user_status_by_id(user.id, form_data)
return user
else:
raise HTTPException(
status_code=status.HTTP_400_BAD_REQUEST,
detail=ERROR_MESSAGES.USER_NOT_FOUND,
)
############################
# GetUserInfoBySessionUser
############################
@ -350,9 +388,10 @@ async def update_user_info_by_session_user(
############################
class UserActiveResponse(BaseModel):
class UserActiveResponse(UserStatus):
name: str
profile_image_url: Optional[str] = None
is_active: bool
model_config = ConfigDict(extra="allow")
@ -377,8 +416,7 @@ async def get_user_by_id(user_id: str, user=Depends(get_verified_user)):
if user:
return UserActiveResponse(
**{
"id": user.id,
"name": user.name,
**user.model_dump(),
"is_active": Users.is_user_active(user_id),
}
)

30
src/lib/apis/users/index.ts
View file

@ -327,6 +327,36 @@ export const getUserById = async (token: string, userId: string) => {
return res;
};
export const updateUserStatus = async (token: string, formData: object) => {
let error = null;
const res = await fetch(`${WEBUI_API_BASE_URL}/users/user/status/update`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${token}`
},
body: JSON.stringify({
...formData
})
})
.then(async (res) => {
if (!res.ok) throw await res.json();
return res.json();
})
.catch((err) => {
console.error(err);
error = err.detail;
return null;
});
if (error) {
throw error;
}
return res;
};
export const getUserInfo = async (token: string) => {
let error = null;
const res = await fetch(`${WEBUI_API_BASE_URL}/users/user/info`, {

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

@ -11,6 +11,8 @@
import ChatBubble from '$lib/components/icons/ChatBubble.svelte';
import ChatBubbleOval from '$lib/components/icons/ChatBubbleOval.svelte';
import { goto } from '$app/navigation';
import Emoji from '$lib/components/common/Emoji.svelte';
import Tooltip from '$lib/components/common/Tooltip.svelte';
export let user = null;
@ -71,6 +73,25 @@
</div>
</div>
{#if user?.status_emoji || user?.status_message}
<div class="mx-2 mt-2">
<Tooltip content={user?.status_message}>
<div
class="mb-1 w-full gap-2 px-2.5 py-1.5 rounded-xl bg-gray-50 dark:text-white dark:bg-gray-900/50 text-black transition text-xs flex items-center"
>
{#if user?.status_emoji}
<div class=" self-center shrink-0">
<Emoji className="size-4" shortCode={user?.status_emoji} />
</div>
{/if}
<div class=" self-center line-clamp-2 flex-1 text-left">
{user?.status_message}
</div>
</div>
</Tooltip>
</div>
{/if}
{#if $_user?.id !== user.id}
<hr class="border-gray-100/50 dark:border-gray-800/50 my-2.5" />

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

@ -26,7 +26,7 @@
{#if user}
<LinkPreview.Content
class="w-full max-w-[260px] rounded-2xl border border-gray-100 dark:border-gray-800 z-[99999] bg-white dark:bg-gray-850 dark:text-white shadow-lg transition"
class="w-full max-w-[260px] rounded-2xl border border-gray-100 dark:border-gray-800 z-[9999] bg-white dark:bg-gray-850 dark:text-white shadow-lg transition"
{side}
{align}
{sideOffset}

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

@ -718,6 +718,7 @@
{#if $user !== undefined && $user !== null}
<UserMenu
role={$user?.role}
profile={true}
showActiveUsers={false}
on:show={(e) => {
if (e.detail === 'archived-chat') {
@ -1281,6 +1282,7 @@
{#if $user !== undefined && $user !== null}
<UserMenu
role={$user?.role}
profile={true}
showActiveUsers={false}
on:show={(e) => {
if (e.detail === 'archived-chat') {

8
src/lib/components/layout/Sidebar/ChatItem.svelte
View file

@ -476,6 +476,14 @@
on:mouseenter={() => {
ignoreBlur = true;
}}
on:click={(e) => {
e.preventDefault();
e.stopImmediatePropagation();
e.stopPropagation();
generateTitleHandler();
ignoreBlur = false;
}}
>
<Sparkles strokeWidth="2" />
</button>

131
src/lib/components/layout/Sidebar/UserMenu.svelte
View file

@ -7,10 +7,12 @@
import { fade, slide } from 'svelte/transition';
import { getUsage } from '$lib/apis';
import { userSignOut } from '$lib/apis/auths';
import { getSessionUser, userSignOut } from '$lib/apis/auths';
import { showSettings, mobile, showSidebar, showShortcuts, user } from '$lib/stores';
import { WEBUI_API_BASE_URL } from '$lib/constants';
import Tooltip from '$lib/components/common/Tooltip.svelte';
import ArchiveBox from '$lib/components/icons/ArchiveBox.svelte';
import QuestionMarkCircle from '$lib/components/icons/QuestionMarkCircle.svelte';
@ -21,16 +23,27 @@
import Code from '$lib/components/icons/Code.svelte';
import UserGroup from '$lib/components/icons/UserGroup.svelte';
import SignOut from '$lib/components/icons/SignOut.svelte';
import FaceSmile from '$lib/components/icons/FaceSmile.svelte';
import UserStatusModal from './UserStatusModal.svelte';
import Emoji from '$lib/components/common/Emoji.svelte';
import XMark from '$lib/components/icons/XMark.svelte';
import { updateUserStatus } from '$lib/apis/users';
import { toast } from 'svelte-sonner';
const i18n = getContext('i18n');
export let show = false;
export let role = '';
export let profile = false;
export let help = false;
export let className = 'max-w-[240px]';
export let showActiveUsers = true;
let showUserStatusModal = false;
const dispatch = createEventDispatcher();
let usage = null;
@ -52,6 +65,12 @@
</script>
<ShortcutsModal bind:show={$showShortcuts} />
<UserStatusModal
bind:show={showUserStatusModal}
onSave={async () => {
user.set(await getSessionUser(localStorage.token));
}}
/>
<!-- svelte-ignore a11y-no-static-element-interactions -->
<DropdownMenu.Root
@ -72,6 +91,116 @@
align="end"
transition={(e) => fade(e, { duration: 100 })}
>
{#if profile}
<div class=" flex gap-3.5 w-full p-2.5 items-center">
<div class=" items-center flex shrink-0">
<img
src={`${WEBUI_API_BASE_URL}/users/${$user?.id}/profile/image`}
class=" size-10 object-cover rounded-full"
alt="profile"
/>
</div>
<div class=" flex flex-col w-full flex-1">
<div class="font-medium line-clamp-1 pr-2">
{$user.name}
</div>
<div class=" flex items-center gap-2">
{#if $user?.is_active ?? true}
<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('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?.status_emoji || $user?.status_message}
<div class="mx-1">
<button
class="mb-1 w-full gap-2 px-2.5 py-1.5 rounded-xl bg-gray-50 dark:text-white dark:bg-gray-900/50 text-black transition text-xs flex items-center"
type="button"
on:click={() => {
showUserStatusModal = true;
}}
>
{#if $user?.status_emoji}
<div class=" self-center shrink-0">
<Emoji className="size-4" shortCode={$user?.status_emoji} />
</div>
{/if}
<Tooltip
content={$user?.status_message}
className=" self-center line-clamp-2 flex-1 text-left"
>
{$user?.status_message}
</Tooltip>
<div class="self-start">
<Tooltip content={$i18n.t('Clear status')}>
<button
type="button"
on:click={async (e) => {
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
const res = await updateUserStatus(localStorage.token, {
status_emoji: '',
status_message: ''
});
if (res) {
toast.success($i18n.t('Status cleared successfully'));
user.set(await getSessionUser(localStorage.token));
} else {
toast.error($i18n.t('Failed to clear status'));
}
}}
>
<XMark className="size-4 opacity-50" strokeWidth="2" />
</button>
</Tooltip>
</div>
</button>
</div>
{:else}
<div class="mx-1">
<button
class="mb-1 w-full px-3 py-1.5 gap-1 rounded-xl bg-gray-50 dark:text-white dark:bg-gray-900/50 text-black transition text-xs flex items-center justify-center"
type="button"
on:click={() => {
showUserStatusModal = true;
}}
>
<div class=" self-center">
<FaceSmile className="size-4" strokeWidth="1.5" />
</div>
<div class=" self-center truncate">{$i18n.t('Update your status')}</div>
</button>
</div>
{/if}
<hr class=" border-gray-50/30 dark:border-gray-800/30 my-1.5 p-0" />
{/if}
<DropdownMenu.Item
class="flex rounded-xl py-1.5 px-3 w-full hover:bg-gray-50 dark:hover:bg-gray-800 transition cursor-pointer"
on:click={async () => {

157
src/lib/components/layout/Sidebar/UserStatusModal.svelte Normal file
View file

@ -0,0 +1,157 @@
<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 { updateUserStatus } from '$lib/apis/users';
import { settings, user } from '$lib/stores';
import Spinner from '$lib/components/common/Spinner.svelte';
import Modal from '$lib/components/common/Modal.svelte';
import XMark from '$lib/components/icons/XMark.svelte';
import EmojiPicker from '$lib/components/common/EmojiPicker.svelte';
import FaceSmile from '$lib/components/icons/FaceSmile.svelte';
import Emoji from '$lib/components/common/Emoji.svelte';
export let show = false;
export let onSave: Function = () => {};
let emoji = '';
let message = '';
let loading = false;
const submitHandler = async () => {
loading = true;
const res = await updateUserStatus(localStorage.token, {
status_emoji: emoji,
status_message: message
}).catch((error) => {
toast.error(`${error}`);
loading = false;
return null;
});
if (res) {
toast.success($i18n.t('Status updated successfully'));
onSave();
} else {
toast.error($i18n.t('Failed to update status'));
}
show = false;
loading = false;
};
$: if (show) {
init();
} else {
resetHandler();
}
const init = () => {
emoji = $user?.status_emoji || '';
message = $user?.status_message || '';
};
const resetHandler = () => {
emoji = '';
message = '';
loading = false;
};
</script>
<Modal size="sm" bind:show>
<div>
<div class=" flex justify-between dark:text-gray-300 px-5 pt-4 pb-1">
<div class=" text-lg font-medium self-center">
{$i18n.t('Set your status')}
</div>
<button
class="self-center"
on:click={() => {
show = false;
}}
>
<XMark className={'size-5'} />
</button>
</div>
<div class="flex flex-col md:flex-row w-full px-5 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|preventDefault={() => {
submitHandler();
}}
>
<div>
<div class="text-xs text-gray-500 mb-1.5">
{$i18n.t('Status')}
</div>
<div
class="flex items-center px-2.5 py-2 gap-3 border border-gray-100/50 dark:border-gray-850/50 rounded-xl"
>
<EmojiPicker
onClose={() => {}}
onSubmit={(name) => {
console.log(name);
emoji = name;
}}
>
<div class=" flex items-center">
{#if emoji}
<Emoji shortCode={emoji} />
{:else}
<FaceSmile />
{/if}
</div>
</EmojiPicker>
<input
type="text"
bind:value={message}
class={`w-full flex-1 text-sm bg-transparent ${($settings?.highContrastMode ?? false) ? 'placeholder:text-gray-700 dark:placeholder:text-gray-100' : 'outline-hidden placeholder:text-gray-300 dark:placeholder:text-gray-700'}`}
placeholder={$i18n.t("What's on your mind?")}
autocomplete="off"
required
/>
<button
type="button"
on:click={() => {
emoji = '';
message = '';
}}
>
<XMark />
</button>
</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-950 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('Save')}
{#if loading}
<div class="ml-2 self-center">
<Spinner />
</div>
{/if}
</button>
</div>
</form>
</div>
</div>
</div>
</Modal>