Add bot user badge. Closes #2681

web/components/chat/ChatUserMessage/ChatUserMessage.stories.tsx

@@ -89,6 +89,22 @@ const authenticatedUserMessage: ChatMessage = JSON.parse(`{
       },
       "body": "I am an authenticated user."}`);
 
+const botUserMessage: ChatMessage = JSON.parse(`{
+				"type": "CHAT",
+				"id": "wY-MEXwnR",
+				"timestamp": "2022-04-28T20:30:27.001762726Z",
+				"user": {
+					"id": "h_5GQ6E7R",
+					"displayName": "EliteMooseTaskForce",
+					"displayColor": 7,
+					"createdAt": "2022-03-24T03:52:37.966584694Z",
+					"previousNames": ["gifted-nobel", "EliteMooseTaskForce"],
+					"nameChangedAt": "2022-04-26T23:56:05.531287897Z",
+					"authenticated": true,
+					"scopes": ["bot"]
+				},
+				"body": "I am a bot."}`);
+
 export const WithoutModeratorMenu = Template.bind({});
 WithoutModeratorMenu.args = {
   message: standardMessage,
@@ -121,6 +137,13 @@ FromAuthenticatedUser.args = {
   isAuthorAuthenticated: true,
 };
 
+export const FromBotUser = Template.bind({});
+FromBotUser.args = {
+  message: botUserMessage,
+  showModeratorMenu: false,
+  isAuthorBot: true,
+};
+
 export const WithStringHighlighted = Template.bind({});
 WithStringHighlighted.args = {
   message: standardMessage,

web/components/chat/ChatUserMessage/ChatUserMessage.tsx

@@ -14,6 +14,7 @@ import { accessTokenAtom } from '../../stores/ClientConfigStore';
 import { User } from '../../../interfaces/user.model';
 import { AuthedUserBadge } from '../ChatUserBadge/AuthedUserBadge';
 import { ModerationBadge } from '../ChatUserBadge/ModerationBadge';
+import { BotUserBadge } from '../ChatUserBadge/BotUserBadge';
 
 // Lazy loaded components
 
@@ -35,6 +36,7 @@ export type ChatUserMessageProps = {
   sameUserAsLast: boolean;
   isAuthorModerator: boolean;
   isAuthorAuthenticated: boolean;
+  isAuthorBot: boolean;
 };
 
 export type UserTooltipProps = {
@@ -61,6 +63,7 @@ export const ChatUserMessage: FC<ChatUserMessageProps> = ({
   sameUserAsLast,
   isAuthorModerator,
   isAuthorAuthenticated,
+  isAuthorBot,
 }) => {
   const { id: messageId, body, user, timestamp } = message;
   const { id: userId, displayName, displayColor } = user;
@@ -76,7 +79,9 @@ export const ChatUserMessage: FC<ChatUserMessageProps> = ({
   if (isAuthorAuthenticated) {
     badgeNodes.push(<AuthedUserBadge key="auth" userColor={displayColor} />);
   }
-
+  if (isAuthorBot) {
+    badgeNodes.push(<BotUserBadge key="bot" userColor={displayColor} />);
+  }
   return (
     <div
       className={cn(