feat/enh: user status

backend/open_webui/models/users.py

@@ -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]:

backend/open_webui/routers/auths.py

@@ -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,
     }
 

backend/open_webui/routers/users.py

@@ -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,
+                **user.model_dump(),
-                "name": user.name,
                 "is_active": Users.is_user_active(user_id),
             }
         )

src/lib/apis/users/index.ts

@@ -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`, {

src/lib/components/channel/Messages/Message/UserStatus.svelte

@@ -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" />
 

src/lib/components/channel/Messages/Message/UserStatusLinkPreview.svelte

@@ -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}

src/lib/components/layout/Sidebar.svelte

@@ -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') {

src/lib/components/layout/Sidebar/ChatItem.svelte

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

src/lib/components/layout/Sidebar/UserMenu.svelte

@@ -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 () => {

src/lib/components/layout/Sidebar/UserStatusModal.svelte

@@ -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>