From c89ea371e675286482097b49b0d11b7264b00258 Mon Sep 17 00:00:00 2001
From: Willy Douhard <willy.douhard@gmail.com>
Date: Tue, 6 Aug 2024 14:21:07 +0200
Subject: [PATCH] feat: add display name to user class (not persisted) (#1188)

* feat: add display name to user class (not persisted)

* fix: copilot test
---
 backend/chainlit/user.py                                    | 4 +++-
 frontend/src/components/atoms/buttons/userButton/avatar.tsx | 4 ++--
 frontend/src/components/atoms/buttons/userButton/menu.tsx   | 4 ++--
 libs/react-client/src/api/hooks/auth.ts                     | 5 ++++-
 libs/react-client/src/types/user.ts                         | 1 +
 5 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/backend/chainlit/user.py b/backend/chainlit/user.py
index 09db3ea435..4ed87ed408 100644
--- a/backend/chainlit/user.py
+++ b/backend/chainlit/user.py
@@ -1,4 +1,4 @@
-from typing import Dict, Literal, TypedDict
+from typing import Dict, Literal, Optional, TypedDict
 
 from dataclasses_json import DataClassJsonMixin
 from pydantic.dataclasses import Field, dataclass
@@ -19,6 +19,7 @@
 class UserDict(TypedDict):
     id: str
     identifier: str
+    display_name: Optional[str]
     metadata: Dict
 
 
@@ -26,6 +27,7 @@ class UserDict(TypedDict):
 @dataclass
 class User(DataClassJsonMixin):
     identifier: str
+    display_name: Optional[str] = None
     metadata: Dict = Field(default_factory=dict)
 
 
diff --git a/frontend/src/components/atoms/buttons/userButton/avatar.tsx b/frontend/src/components/atoms/buttons/userButton/avatar.tsx
index 8b0da8964b..8d2f0f51fd 100644
--- a/frontend/src/components/atoms/buttons/userButton/avatar.tsx
+++ b/frontend/src/components/atoms/buttons/userButton/avatar.tsx
@@ -6,7 +6,7 @@ import UserIcon from 'assets/user';
 
 export default function UserAvatar(props: IconButtonProps) {
   const { user } = useAuth();
-
+  const displayName = user?.display_name || user?.identifier;
   return (
     <IconButton {...props}>
       <Avatar
@@ -19,7 +19,7 @@ export default function UserAvatar(props: IconButtonProps) {
         src={user?.metadata?.image || undefined}
       >
         {user ? (
-          user.identifier?.[0]?.toUpperCase()
+          displayName?.[0]?.toUpperCase()
         ) : (
           <UserIcon sx={{ height: 20, width: 20 }} />
         )}
diff --git a/frontend/src/components/atoms/buttons/userButton/menu.tsx b/frontend/src/components/atoms/buttons/userButton/menu.tsx
index ab7129b92e..1951fe1645 100644
--- a/frontend/src/components/atoms/buttons/userButton/menu.tsx
+++ b/frontend/src/components/atoms/buttons/userButton/menu.tsx
@@ -40,7 +40,7 @@ export default function UserMenu({ anchorEl, open, handleClose }: Props) {
         {user.id}
       </Typography>
       <Typography width="100%" fontSize="13px" fontWeight={400}>
-        {user.identifier}
+        {user.display_name || user.identifier}
       </Typography>
     </ListItem>
   );
@@ -86,7 +86,7 @@ export default function UserMenu({ anchorEl, open, handleClose }: Props) {
     <MenuItem
       key="logout"
       onClick={() => {
-        logout();
+        logout(true);
         handleClose();
       }}
     >
diff --git a/libs/react-client/src/api/hooks/auth.ts b/libs/react-client/src/api/hooks/auth.ts
index 805c907948..e4523df824 100644
--- a/libs/react-client/src/api/hooks/auth.ts
+++ b/libs/react-client/src/api/hooks/auth.ts
@@ -30,12 +30,15 @@ export const useAuth = () => {
 
   const isReady = !!(!isLoading && authConfig);
 
-  const logout = async () => {
+  const logout = async (reload = false) => {
     await apiClient.logout();
     setUser(null);
     removeToken();
     setAccessToken('');
     setThreadHistory(undefined);
+    if (reload) {
+      window.location.reload();
+    }
   };
 
   const saveAndSetToken = (token: string | null | undefined) => {
diff --git a/libs/react-client/src/types/user.ts b/libs/react-client/src/types/user.ts
index 9c9e4af69b..aa1af46cf0 100644
--- a/libs/react-client/src/types/user.ts
+++ b/libs/react-client/src/types/user.ts
@@ -15,5 +15,6 @@ export interface IUserMetadata extends Record<string, any> {
 export interface IUser {
   id: string;
   identifier: string;
+  display_name?: string;
   metadata: IUserMetadata;
 }