Wire up chat message props. Add username highlighting. Closes #1921

web/components/chat/ChatContainer/ChatContainer.tsx

@@ -1,6 +1,6 @@
 import { Spin } from 'antd';
 import { Virtuoso } from 'react-virtuoso';
-import { useRef } from 'react';
+import { useMemo, useRef } from 'react';
 import { LoadingOutlined } from '@ant-design/icons';
 
 import { MessageType, NameChangeEvent } from '../../../interfaces/socket-events';
@@ -12,10 +12,13 @@ import ChatActionMessage from '../ChatActionMessage';
 interface Props {
   messages: ChatMessage[];
   loading: boolean;
+  usernameToHighlight: string;
+  chatUserId: string;
+  isModerator: boolean;
 }
 
 export default function ChatContainer(props: Props) {
-  const { messages, loading } = props;
+  const { messages, loading, usernameToHighlight, chatUserId, isModerator } = props;
 
   const chatContainerRef = useRef(null);
   const spinIcon = <LoadingOutlined style={{ fontSize: '32px' }} spin />;
@@ -31,7 +34,14 @@ export default function ChatContainer(props: Props) {
   const getViewForMessage = message => {
     switch (message.type) {
       case MessageType.CHAT:
-        return <ChatUserMessage message={message} showModeratorMenu={false} />;
+        return (
+          <ChatUserMessage
+            message={message}
+            showModeratorMenu={isModerator} // Moderators have access to an additional menu
+            highlightString={usernameToHighlight} // What to highlight in the message
+            renderAsPersonallySent={message.user?.id === chatUserId} // The local user sent this message
+          />
+        );
       case MessageType.NAME_CHANGE:
         return getNameChangeViewForMessage(message);
       default:
@@ -39,12 +49,8 @@ export default function ChatContainer(props: Props) {
     }
   };
 
-  return (
-    <div>
-      <div className={s.chatHeader}>
-        <span>stream chat</span>
-      </div>
-      <Spin spinning={loading} indicator={spinIcon} />
+  const MessagesTable = useMemo(
+    () => (
       <Virtuoso
         style={{ height: '80vh' }}
         ref={chatContainerRef}
@@ -53,6 +59,18 @@ export default function ChatContainer(props: Props) {
         itemContent={(index, message) => getViewForMessage(message)}
         followOutput="smooth"
       />
+    ),
+    [messages, usernameToHighlight, chatUserId, isModerator],
+  );
+
+  return (
+    <div>
+      <div className={s.chatHeader}>
+        <span>stream chat</span>
+      </div>
+      <Spin spinning={loading} indicator={spinIcon}>
+        {MessagesTable}
+      </Spin>
     </div>
   );
 }

web/components/chat/ChatUserMessage/ChatUserMessage.module.scss

@@ -12,5 +12,20 @@
   }
   .message {
     color: var(--color-owncast-grey-100);
+
+    mark {
+      color: white;
+      padding: 0.1em 0.4em;
+      border-radius: 0.5em 0.3em;
+      background: transparent;
+      background-image: linear-gradient(
+        to right,
+        rgba(255, 225, 0, 0.1),
+        rgba(255, 225, 0, 0.358) 4%,
+        rgba(255, 225, 0, 0.3)
+      );
+      -webkit-box-decoration-break: clone;
+      box-decoration-break: clone;
+    }
   }
 }

web/components/chat/ChatUserMessage/ChatUserMessage.tsx

@@ -1,15 +1,25 @@
 /* eslint-disable react/no-danger */
 import { useEffect, useState } from 'react';
+import { Highlight } from 'react-highlighter-ts';
+import he from 'he';
 import { ChatMessage } from '../../../interfaces/chat-message.model';
-import { formatTimestamp, formatMessageText } from './messageFmt';
+import { formatTimestamp } from './messageFmt';
 import s from './ChatUserMessage.module.scss';
 
 interface Props {
   message: ChatMessage;
   showModeratorMenu: boolean;
+  highlightString: string;
+  renderAsPersonallySent: boolean;
 }
 
-export default function ChatUserMessage({ message, showModeratorMenu }: Props) {
+export default function ChatUserMessage({
+  message,
+  highlightString,
+  showModeratorMenu,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  renderAsPersonallySent, // Move the border to the right and render a background
+}: Props) {
   const { body, user, timestamp } = message;
   const { displayName, displayColor } = user;
   const color = `hsl(${displayColor}, 100%, 70%)`;
@@ -17,7 +27,7 @@ export default function ChatUserMessage({ message, showModeratorMenu }: Props) {
   const [formattedMessage, setFormattedMessage] = useState<string>(body);
 
   useEffect(() => {
-    setFormattedMessage(formatMessageText(body));
+    setFormattedMessage(he.decode(body));
   }, [message]);
 
   return (
@@ -25,7 +35,9 @@ export default function ChatUserMessage({ message, showModeratorMenu }: Props) {
       <div className={s.user} style={{ color }}>
         {displayName}
       </div>
-      <div className={s.message} dangerouslySetInnerHTML={{ __html: formattedMessage }} />
+      <Highlight search={highlightString}>
+        <div className={s.message}>{formattedMessage}</div>
+      </Highlight>
       {showModeratorMenu && <div>Moderator menu</div>}
     </div>
   );