fix(chat): fix bot status not showing. Closes #3046

web/components/chat/ChatContainer/ChatContainer.stories.tsx

@@ -28,9 +28,10 @@ const testMessages = `[
 			"timestamp": "2022-04-28T20:30:27.001762726Z",
 			"user": {
 				"id": "h_5GQ6E7R",
-				"displayName": "UserDisplayName42",
+				"displayName": "iAmABot",
 				"displayColor": 329,
 				"createdAt": "2022-03-24T03:52:37.966584694Z",
+				"isBot": true,
 				"previousNames": [
 					"gifted-nobel",
 					"EliteMooseTaskForce"
@@ -48,13 +49,14 @@ const testMessages = `[
 			"timestamp": "2022-04-28T20:30:28.806999545Z",
 			"user": {
 				"id": "h_5GQ6E7R",
-				"displayName": "EliteMooseTaskForce",
+				"displayName": "IAmABot",
 				"displayColor": 329,
 				"createdAt": "2022-03-24T03:52:37.966584694Z",
 				"previousNames": [
 					"gifted-nobel",
 					"EliteMooseTaskForce"
 				],
+				"isBot": true,
 				"nameChangedAt": "2022-04-26T23:56:05.531287897Z",
 				"scopes": [
 					""
@@ -68,13 +70,14 @@ const testMessages = `[
 			"timestamp": "2022-04-28T20:30:34.500150601Z",
 			"user": {
 				"id": "h_5GQ6E7R",
-				"displayName": "EliteMooseTaskForce",
+				"displayName": "IAmABot",
 				"displayColor": 329,
 				"createdAt": "2022-03-24T03:52:37.966584694Z",
 				"previousNames": [
 					"gifted-nobel",
 					"EliteMooseTaskForce"
 				],
+				"isBot": true,
 				"nameChangedAt": "2022-04-26T23:56:05.531287897Z",
 				"scopes": [
 					""

web/components/chat/ChatContainer/ChatContainer.tsx

@@ -83,7 +83,7 @@ function checkIsModerator(message: ChatMessage | ConnectedClientInfoEvent) {
 
   const u = new User(user);
 
-  return u.isModerator();
+  return u.isModerator;
 }
 
 export const ChatContainer: FC<ChatContainerProps> = ({
@@ -162,8 +162,8 @@ export const ChatContainer: FC<ChatContainerProps> = ({
         highlightString={usernameToHighlight} // What to highlight in the message
         sentBySelf={message.user?.id === chatUserId} // The local user sent this message
         sameUserAsLast={collapsed}
-        isAuthorModerator={message.user?.scopes?.includes('MODERATOR')}
-        isAuthorBot={message.user?.scopes?.includes('BOT')}
+        isAuthorModerator={message.user?.isModerator}
+        isAuthorBot={message.user?.isBot}
         isAuthorAuthenticated={message.user?.authenticated}
         key={message.id}
       />

web/components/stores/ClientConfigStore.tsx

@@ -304,7 +304,7 @@ export const ClientConfigStore: FC = () => {
         );
         if (message as ChatEvent) {
           const m = new ChatEvent(message);
-          if (!hasBeenModeratorNotified && m.user?.isModerator()) {
+          if (!hasBeenModeratorNotified && m.user?.isModerator) {
             setChatMessages(currentState => [...currentState, message as ChatEvent]);
             hasBeenModeratorNotified = true;
           }

web/interfaces/user.fixture.ts

@@ -9,8 +9,8 @@ export const createUser = (name: string, color: number, createdAt: Date): User =
   nameChangedAt: createdAt,
   previousNames: [],
   scopes: [],
-
-  isModerator: () => false,
+  isBot: false,
+  isModerator: false,
 });
 
 export const spidermanUser = createUser('Spiderman', 1, new Date(2020, 1, 2));

web/interfaces/user.model.ts

@@ -9,6 +9,11 @@ export class User {
     this.nameChangedAt = u.nameChangedAt;
     this.scopes = u.scopes;
     this.authenticated = u.authenticated;
+    this.isBot = u.isBot;
+
+    if (this.scopes && this.scopes.length > 0) {
+      this.isModerator = this.scopes.includes('MODERATOR');
+    }
   }
 
   id: string;
@@ -27,11 +32,7 @@ export class User {
 
   authenticated: boolean;
 
-  public isModerator = (): boolean => {
-    if (!this.scopes || this.scopes.length === 0) {
-      return false;
-    }
+  isBot: boolean;
 
-    return this.scopes.includes('MODERATOR');
-  };
+  isModerator: boolean;
 }