Support for customizing the chat bubble color

Hubs-Foundation · Jun 8, 2023 · 0b3bf28 · 0b3bf28
1 parent 6a51665
commit 0b3bf28
Showing 1 changed file with 10 additions and 0 deletions.
diff --git a/src/react-components/chat-message.js b/src/react-components/chat-message.js
@@ -41,7 +41,16 @@ const messageBodyDom = (body, from, fromSessionId, onViewProfile, emojiClassName
   return { content, multiline, emoji };
 };
 
+const bubbleColorRegEx = /^.*\s?(-color=)(#?[0-9a-fA-Z]{6}|[0-9a-fA-Z]{3})\s?.*$/;
 function renderChatMessage(body, from, allowEmojiRender) {
+  const matches = body.match(bubbleColorRegEx);
+  let bubbleColor;
+  if (matches) {
+    matches.shift();
+    bubbleColor = matches[1];
+    body = matches.reduce((acc, cur) => acc.replace(cur, ""), body);
+  }
+
   const { content, emoji, multiline } = messageBodyDom(body, from, null, null, styles.emoji);
   const isEmoji = allowEmojiRender && emoji;
   const el = document.createElement("div");
@@ -55,6 +64,7 @@ function renderChatMessage(body, from, allowEmojiRender) {
         [styles.presenceLogEntryOneLine]: !isEmoji && !multiline,
         [styles.presenceLogEmoji]: isEmoji
       })}
+      style={{ backgroundColor: `${bubbleColor}` }}
     >
       {content}
     </div>