Add+style system style chat message. Closes #1998

web/stories/ChatSystemMessage.stories.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 import ChatSystemMessage from '../components/chat/ChatSystemMessage/ChatSystemMessage';
 import Mock from './assets/mocks/chatmessage-system.png';
+import { ChatMessage } from '../interfaces/chat-message.model';
 
 export default {
   title: 'owncast/Chat/Messages/System',
@@ -21,8 +22,26 @@ export default {
 
 const Template: ComponentStory<typeof ChatSystemMessage> = args => <ChatSystemMessage {...args} />;
 
+const message: ChatMessage = JSON.parse(`{
+  "type": "SYSTEM",
+  "id": "wY-MEXwnR",
+  "timestamp": "2022-04-28T20:30:27.001762726Z",
+  "user": {
+    "id": "h_5GQ6E7R",
+    "displayName": "Cool Server Name",
+    "createdAt": "2022-03-24T03:52:37.966584694Z",
+    "scopes": []
+  },
+  "body": "Test system message from the chat server."}`);
+
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 export const Basic = Template.bind({});
 Basic.args = {
-  message: 'This is a system message.',
+  message,
+};
+
+export const HighlightExample = Template.bind({});
+HighlightExample.args = {
+  message,
+  highlightString: 'chat',
 };