Fix: Formatting of breakout msg

bigbluebutton-html5/imports/ui/components/chat/chat-graphql/chat-message-list/page/chat-message/component.tsx

@@ -85,6 +85,7 @@ const ChatMesssage: React.FC<ChatMessageProps> = ({
 
   const sameSender = (previousMessage?.user?.userId
     || lastSenderPreviousPage) === message?.user?.userId;
+  const isSystemSender = message.messageType === ChatMessageType.BREAKOUT_ROOM;
   const dateTime = new Date(message?.createdTime);
   const messageContent: {
     name: string,
@@ -123,12 +124,26 @@ const ChatMesssage: React.FC<ChatMessageProps> = ({
             />
           ),
         };
+      case ChatMessageType.BREAKOUT_ROOM:
+        return {
+          name: message.senderName,
+          color: '#0F70D7',
+          isModerator: true,
+          isSystemSender: true,
+          component: (
+            <ChatMessageTextContent
+              emphasizedMessage
+              text={message.message}
+            />
+          ),
+        };
       case ChatMessageType.TEXT:
       default:
         return {
           name: message.user?.name,
           color: message.user?.color,
           isModerator: message.user?.isModerator,
+          isSystemSender: ChatMessageType.BREAKOUT_ROOM,
           component: (
             <ChatMessageTextContent
               emphasizedMessage={message?.user?.isModerator}
@@ -139,14 +154,14 @@ const ChatMesssage: React.FC<ChatMessageProps> = ({
     }
   }, []);
   return (
-    <ChatWrapper sameSender={sameSender} ref={messageRef}>
+    <ChatWrapper isSystemSender={isSystemSender} sameSender={sameSender} ref={messageRef}>
       {(!message?.user || !sameSender) && (
         <ChatAvatar
           avatar={message.user?.avatar}
           color={messageContent.color}
           moderator={messageContent.isModerator}
         >
-          {message.user?.avatar.length === 0 ? messageContent.name.toLowerCase().slice(0, 2) || '' : ''}
+          {!message.user || message.user?.avatar.length === 0 ? messageContent.name.toLowerCase().slice(0, 2) || 'q' : 'a'}
         </ChatAvatar>
       )}
       <ChatContent sameSender={message?.user ? sameSender : false}>

bigbluebutton-html5/imports/ui/components/chat/chat-graphql/chat-message-list/page/chat-message/styles.ts

@@ -17,6 +17,7 @@ import {
 
 interface ChatWrapperProps {
   sameSender: boolean;
+  isSystemSender: boolean;
 }
 
 interface ChatContentProps {
@@ -50,6 +51,12 @@ export const ChatWrapper = styled.div<ChatWrapperProps>`
     margin: ${borderSize} ${borderSize} 0 0;
   }
   font-size: ${fontSizeBase};
+  ${({ isSystemSender }) => isSystemSender && `
+    background-color: #fef9f1;
+    border-left: 2px solid #f5c67f;
+    border-radius: 0px 3px 3px 0px;
+    padding: 8px 2px;
+  `}
 `;
 
 export const ChatContent = styled.div<ChatContentProps>`
@@ -118,7 +125,7 @@ export const ChatAvatar = styled.div<ChatAvatarProps>`
   ${({ moderator }) => moderator && `
     border-radius: 5px;
   `}
-
+  
   // ================ image ================
   ${({ avatar, emoji, color }) => avatar?.length !== 0 && !emoji && css`
       background-image: url(${avatar});
@@ -136,7 +143,7 @@ export const ChatAvatar = styled.div<ChatAvatarProps>`
   justify-content: center;
   align-items:center;
   // ================ content ================
-
+  
   & .react-loading-skeleton {
     height: 2.25rem;
     width: 2.25rem;

bigbluebutton-html5/imports/ui/components/chat/chat-graphql/chat-message-list/page/queries.ts

@@ -28,6 +28,8 @@ export const CHAT_MESSAGE_PUBLIC_SUBSCRIPTION = gql`
       createdTime
       createdTimeAsDate
       messageMetadata
+      senderName
+      senderRole
     }
   }
 `;

bigbluebutton-html5/imports/ui/core/enums/chat.ts

@@ -10,5 +10,6 @@ export const enum ChatMessageType {
   TEXT = 'default',
   POLL = 'poll',
   PRESENTATION = 'presentation',
-  CHAT_CLEAR = 'publicChatHistoryCleared'
+  CHAT_CLEAR = 'publicChatHistoryCleared',
+  BREAKOUT_ROOM = 'breakoutRoomModeratorMsg',
 }