Add bot user badge. Closes #2681

web/components/chat/ChatUserBadge/BotUserBadge.tsx

@@ -0,0 +1,17 @@
+import dynamic from 'next/dynamic';
+import React, { FC } from 'react';
+import { ChatUserBadge } from './ChatUserBadge';
+
+// Lazy loaded components
+
+const BulbFilled = dynamic(() => import('@ant-design/icons/BulbFilled'), {
+  ssr: false,
+});
+
+export type BotBadgeProps = {
+  userColor: number;
+};
+
+export const BotUserBadge: FC<BotBadgeProps> = ({ userColor }) => (
+  <ChatUserBadge badge={<BulbFilled />} userColor={userColor} title="Bot" />
+);

web/components/chat/ChatUserBadge/ChatUserBadge.stories.tsx

@@ -3,6 +3,7 @@ import { ComponentStory, ComponentMeta } from '@storybook/react';
 import { ChatUserBadge } from './ChatUserBadge';
 import { ModerationBadge } from './ModerationBadge';
 import { AuthedUserBadge } from './AuthedUserBadge';
+import { BotUserBadge } from './BotUserBadge';
 
 export default {
   title: 'owncast/Chat/Messages/User Flag',
@@ -24,6 +25,8 @@ const AuthedTemplate: ComponentStory<typeof ModerationBadge> = args => (
   <AuthedUserBadge {...args} />
 );
 
+const BotTemplate: ComponentStory<typeof BotUserBadge> = args => <BotUserBadge {...args} />;
+
 export const Authenticated = AuthedTemplate.bind({});
 Authenticated.args = {
   userColor: '3',
@@ -34,6 +37,11 @@ Moderator.args = {
   userColor: '5',
 };
 
+export const Bot = BotTemplate.bind({});
+Bot.args = {
+  userColor: '7',
+};
+
 export const Generic = Template.bind({});
 Generic.args = {
   badge: '?',