fix: display username in shared chats

backend/apps/web/routers/users.py

@@ -12,7 +12,7 @@ import logging
 from apps.web.models.users import UserModel, UserUpdateForm, UserRoleUpdateForm, Users
 from apps.web.models.auths import Auths
 
-from utils.utils import get_current_user, get_password_hash, get_admin_user
+from utils.utils import get_verified_user, get_password_hash, get_admin_user
 from constants import ERROR_MESSAGES
 
 from config import SRC_LOG_LEVELS
@@ -67,6 +67,30 @@ async def update_user_role(form_data: UserRoleUpdateForm, user=Depends(get_admin
     )
 
 
+############################
+# GetUserById
+############################
+
+
+class UserResponse(BaseModel):
+    name: str
+    profile_image_url: str
+
+
+@router.get("/{user_id}", response_model=UserResponse)
+async def get_user_by_id(user_id: str, user=Depends(get_verified_user)):
+
+    user = Users.get_user_by_id(user_id)
+
+    if user:
+        return UserResponse(name=user.name, profile_image_url=user.profile_image_url)
+    else:
+        raise HTTPException(
+            status_code=status.HTTP_400_BAD_REQUEST,
+            detail=ERROR_MESSAGES.USER_NOT_FOUND,
+        )
+
+
 ############################
 # UpdateUserById
 ############################

src/lib/apis/users/index.ts

@@ -115,6 +115,33 @@ export const getUsers = async (token: string) => {
 	return res ? res : [];
 };
 
+export const getUserById = async (token: string, userId: string) => {
+	let error = null;
+
+	const res = await fetch(`${WEBUI_API_BASE_URL}/users/${userId}`, {
+		method: 'GET',
+		headers: {
+			'Content-Type': 'application/json',
+			Authorization: `Bearer ${token}`
+		}
+	})
+		.then(async (res) => {
+			if (!res.ok) throw await res.json();
+			return res.json();
+		})
+		.catch((err) => {
+			console.log(err);
+			error = err.detail;
+			return null;
+		});
+
+	if (error) {
+		throw error;
+	}
+
+	return res;
+};
+
 export const deleteUserById = async (token: string, userId: string) => {
 	let error = null;
 

src/lib/components/chat/Messages.svelte

 <script lang="ts">
 	import { v4 as uuidv4 } from 'uuid';
 
-	import { chats, config, modelfiles, settings, user } from '$lib/stores';
+	import { chats, config, modelfiles, settings, user as _user } from '$lib/stores';
 	import { tick, getContext } from 'svelte';
 
 	import { toast } from 'svelte-sonner';
@@ -22,6 +22,7 @@
 	export let continueGeneration: Function;
 	export let regenerateResponse: Function;
 
+	export let user = $_user;
 	export let prompt;
 	export let suggestionPrompts = [];
 	export let processing = '';
@@ -294,7 +295,7 @@
 							{#if message.role === 'user'}
 								<UserMessage
 									on:delete={() => messageDeleteHandler(message.id)}
-									user={$user}
+									{user}
 									{readOnly}
 									{message}
 									isFirstMessage={messageIdx === 0}

src/lib/components/chat/Messages/UserMessage.svelte

@@ -7,6 +7,8 @@
 	import { modelfiles, settings } from '$lib/stores';
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
 
+	import { user as _user } from '$lib/stores';
+
 	const i18n = getContext('i18n');
 
 	const dispatch = createEventDispatcher();
@@ -74,7 +76,7 @@
 							{$i18n.t('You')}
 							<span class=" text-gray-500 text-sm font-medium">{message?.user ?? ''}</span>
 						{/if}
-					{:else if $settings.showUsername}
+					{:else if $settings.showUsername || $_user.name !== user.name}
 						{user.name}
 					{:else}
 						{$i18n.t('You')}

src/lib/components/chat/Settings/Personalization.svelte

@@ -63,7 +63,7 @@
 		<div class="mt-3 mb-1 ml-1">
 			<button
 				type="button"
-				class=" px-3.5 py-1.5 font-medium hover:bg-black/5 dark:hover:bg-white/5 outline outline-gray-300 dark:outline-gray-800 rounded-3xl"
+				class=" px-3.5 py-1.5 font-medium hover:bg-black/5 dark:hover:bg-white/5 outline outline-1 outline-gray-300 dark:outline-gray-800 rounded-3xl"
 			>
 				Manage
 			</button>

src/routes/s/[id]/+page.svelte

@@ -12,6 +12,7 @@
 
 	import Messages from '$lib/components/chat/Messages.svelte';
 	import Navbar from '$lib/components/layout/Navbar.svelte';
+	import { getUserById } from '$lib/apis/users';
 
 	const i18n = getContext('i18n');
 
@@ -37,6 +38,7 @@
 	}, {});
 
 	let chat = null;
+	let user = null;
 
 	let title = '';
 	let files = [];
@@ -88,6 +90,8 @@
 		});
 
 		if (chat) {
+			user = await getUserById(localStorage.token, chat.user_id);
+
 			const chatContent = chat.chat;
 
 			if (chatContent) {
@@ -156,6 +160,7 @@
 				<div class=" h-full w-full flex flex-col py-4">
 					<div class="py-2">
 						<Messages
+							{user}
 							chatId={$chatId}
 							readOnly={true}
 							{selectedModels}