feat(chat): add support for chat part messages. Closes #3201 (#3291)

web/components/chat/ChatPartMessage/ChatPartMessage.module.scss

@@ -0,0 +1,16 @@
+.root {
+  display: inline-flex;
+  padding: 10px 0;
+  color: var(--theme-color-components-chat-text);
+  font-weight: 400;
+  font-size: var(--chat-message-text-size);
+
+  .moderatorBadge,
+  .user {
+    margin-right: 5px;
+  }
+}
+
+.icon {
+  padding: 0 var(--chat-notification-icon-padding) 0 16px;
+}

web/components/chat/ChatPartMessage/ChatPartMessage.stories.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { ChatPartMessage } from './ChatPartMessage';
+import Mock from '../../../stories/assets/mocks/chatmessage-action.png';
+
+export default {
+  title: 'owncast/Chat/Messages/Chat Part',
+  component: ChatPartMessage,
+  argTypes: {
+    userColor: {
+      options: ['0', '1', '2', '3', '4', '5', '6', '7'],
+      control: { type: 'select' },
+    },
+  },
+  parameters: {
+    design: {
+      type: 'image',
+      url: Mock,
+    },
+    docs: {
+      description: {
+        component: `This is shown when a chat participant parts.`,
+      },
+    },
+  },
+} as ComponentMeta<typeof ChatPartMessage>;
+
+const Template: ComponentStory<typeof ChatPartMessage> = args => <ChatPartMessage {...args} />;
+
+export const Regular = Template.bind({});
+Regular.args = {
+  displayName: 'RandomChatter',
+  isAuthorModerator: false,
+  userColor: 3,
+};
+
+export const Moderator = Template.bind({});
+Moderator.args = {
+  displayName: 'RandomChatter',
+  isAuthorModerator: true,
+  userColor: 2,
+};

web/components/chat/ChatPartMessage/ChatPartMessage.tsx

@@ -0,0 +1,42 @@
+import { FC } from 'react';
+import dynamic from 'next/dynamic';
+import { ModerationBadge } from '../ChatUserBadge/ModerationBadge';
+
+import styles from './ChatPartMessage.module.scss';
+
+// Lazy loaded components
+
+const TeamOutlined = dynamic(() => import('@ant-design/icons/TeamOutlined'), {
+  ssr: false,
+});
+
+export type ChatPartMessageProps = {
+  isAuthorModerator: boolean;
+  userColor: number;
+  displayName: string;
+};
+
+export const ChatPartMessage: FC<ChatPartMessageProps> = ({
+  isAuthorModerator,
+  userColor,
+  displayName,
+}) => {
+  const color = `var(--theme-color-users-${userColor})`;
+
+  return (
+    <div className={styles.root}>
+      <span style={{ color }}>
+        <span className={styles.icon}>
+          <TeamOutlined />
+        </span>
+        <span className={styles.user}>{displayName}</span>
+        {isAuthorModerator && (
+          <span className={styles.moderatorBadge}>
+            <ModerationBadge userColor={userColor} />
+          </span>
+        )}
+      </span>
+      left the chat.
+    </div>
+  );
+};