From bc7639a7000f9b0fab367c061882ab9255eacaf7 Mon Sep 17 00:00:00 2001
From: Liototo <74362833+Liototo@users.noreply.github.com>
Date: Fri, 24 May 2024 16:22:26 +0200
Subject: [PATCH] Highlight messages that tag you

---
 packages/collaboration/src/chatbox.tsx     | 6 +++++-
 packages/collaboration/style/sidepanel.css | 6 ++++++
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/packages/collaboration/src/chatbox.tsx b/packages/collaboration/src/chatbox.tsx
index 205ae9f..b4694bd 100644
--- a/packages/collaboration/src/chatbox.tsx
+++ b/packages/collaboration/src/chatbox.tsx
@@ -182,6 +182,10 @@ interface ChatBoxMessageProps {
 
 const ChatBoxMessage: React.FC<ChatBoxMessageProps> = ({message, user, currentUser}) => {
 
+  const tagged = message.includes(`@${currentUser.identity!.name}`);
+
+  const messageClass = tagged ? 'jp-Chat-Message-tagged' : 'jp-Chat-Message';
+
   // Adds line breaks back to the message
   const lineBreaksMessage = message.split('\n').map((line, index, array) => (
     <React.Fragment key={index}>
@@ -191,7 +195,7 @@ const ChatBoxMessage: React.FC<ChatBoxMessageProps> = ({message, user, currentUs
   ));
 
   return (
-    <div className='jp-Chat-Message'>
+    <div className={messageClass}>
       <div style={{ display: 'flex', alignItems: 'center' }}>
 
         <strong style={{ marginRight: '5px', textDecoration: ((user === currentUser.identity!.name) ? 'underline' : 'none')}}>{user}</strong>
diff --git a/packages/collaboration/style/sidepanel.css b/packages/collaboration/style/sidepanel.css
index b7d5b24..7d96899 100644
--- a/packages/collaboration/style/sidepanel.css
+++ b/packages/collaboration/style/sidepanel.css
@@ -182,6 +182,12 @@
   margin-bottom: 8px;
 }
 
+.jp-Chat-Message-tagged {
+  word-wrap: break-word;
+  margin-bottom: 8px;
+  background-color: #727272;
+}
+
 /************************************************************
                 Poll Panel
 *************************************************************/