Add+style system style chat message. Closes #1998

web/components/chat/ChatSystemMessage/ChatSystemMessage.tsx

@@ -1,9 +1,25 @@
+/* eslint-disable react/no-danger */
+import { Highlight } from 'react-highlighter-ts';
+import { ChatMessage } from '../../../interfaces/chat-message.model';
 import s from './ChatSystemMessage.module.scss';
 
 interface Props {
-  message: string;
+  message: ChatMessage;
+  highlightString: string;
 }
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-export default function ChatSystemMessage({ message }: Props) {
-  return <div className={s.chatSystemMessage}>{message}</div>;
+export default function ChatSystemMessage({ message, highlightString }: Props) {
+  const { body, user } = message;
+  const { displayName } = user;
+
+  return (
+    <div className={s.chatSystemMessage}>
+      <div className={s.user}>
+        <span className={s.userName}>{displayName}</span>
+      </div>
+      <Highlight search={highlightString}>
+        <div className={s.message} dangerouslySetInnerHTML={{ __html: body }} />
+      </Highlight>
+    </div>
+  );
 }