Add an icon for bot messages. Closes #1172 (#1729)

webroot/js/components/chat/chat-message-view.js

@@ -51,7 +51,7 @@ export default class ChatMessageView extends Component {
       return null;
     }
 
-    const { displayName, displayColor, createdAt } = user;
+    const { displayName, displayColor, createdAt, isBot } = user;
     const isAuthorModerator = checkIsModerator(message);
 
     const isMessageModeratable =
@@ -88,6 +88,15 @@ export default class ChatMessageView extends Component {
         />`
       : null;
 
+    const isBotFlair = isBot
+      ? html`<img
+          title="Bot"
+          class="inline-block mr-1 w-4 h-4 relative"
+          style=${{ bottom: '1px' }}
+          src="/img/bot.svg"
+        />`
+      : null;
+
     return html`
       <div
         style=${backgroundStyle}
@@ -100,7 +109,7 @@ export default class ChatMessageView extends Component {
             class="message-author font-bold"
             title=${userMetadata}
           >
-            ${messageAuthorFlair} ${displayName}
+            ${isBotFlair} ${messageAuthorFlair} ${displayName}
           </div>
           ${isMessageModeratable &&
           html`<${ModeratorActions}

webroot/js/components/chat/message.js

@@ -99,7 +99,7 @@ export default function Message(props) {
     `;
     return html`<${SystemMessage} contents=${contents} />`;
   } else if (type === SOCKET_MESSAGE_TYPES.USER_JOINED) {
-    const { displayName } = user;
+    const { displayName, isBot } = user;
     const isAuthorModerator = checkIsModerator(message);
     const messageAuthorFlair = isAuthorModerator
       ? html`<img
@@ -108,6 +108,7 @@ export default function Message(props) {
           src="/img/moderator-nobackground.svg"
         />`
       : null;
+
     const contents = html`<div>
       <span class="font-bold">${messageAuthorFlair}${displayName}</span>
       ${' '}joined the chat.