MediaSFU Angular
    Preparing search index...

    Class MessagesModal

    MessagesModal - Full-featured chat modal with group and direct messaging

    app-messages-modal

    ./messages-modal.component.html

    ./messages-modal.component.css

    true

    [CommonModule, FontAwesomeModule, MessagePanel]

    A comprehensive chat modal supporting group and direct messaging with full UI customization. Supports three levels of customization:

    1. Style Overrides: Customize appearance with overlayStyle and contentStyle
    2. Component Integration: Integrates with MediaSFU messaging system
    3. Complete Replacement: Use customTemplate for full UI control

    Features:

    • Group chat for all participants
    • Direct messaging between participants
    • Message history and real-time updates
    • Read receipts and sender identification
    • Host/co-host message controls
    • Socket-based real-time messaging

    Basic Usage

    <app-messages-modal
      [isMessagesModalVisible]="true"
      [onMessagesClose]="closeMessages"
      [messages]="chatMessages"
      [position]="'bottomRight'"
      [backgroundColor]="'#f5f5f5'"
      [eventType]="'webinar'"
      [member]="'JohnDoe'"
      [islevel]="'2'"
      [roomName]="'RoomName'"
      [socket]="chatSocket">
    </app-messages-modal>

    With Style Customization

    <app-messages-modal
      [isMessagesModalVisible]="true"
      [overlayStyle]="{ backgroundColor: 'rgba(0, 0, 0, 0.85)' }"
      [contentStyle]="{ borderRadius: '12px', maxHeight: '600px' }"
      [onMessagesClose]="closeMessages"
      [messages]="chatMessages"
      [socket]="chatSocket">
    </app-messages-modal>

    Custom Template Override

    <app-messages-modal
      [isMessagesModalVisible]="true"
      [customTemplate]="customChatTemplate"
      [messages]="chatMessages"
      [onMessagesClose]="closeMessages">
    </app-messages-modal>

    <ng-template #customChatTemplate let-context>
      <div class="my-chat-modal">
        <h2>Chat ({{ context.messages.length }} messages)</h2>
        <div *ngFor="let message of context.messages">
          <strong>{{ message.sender }}:</strong> {{ message.message }}
        </div>
      </div>
    </ng-template>

    isMessagesModalVisible - Controls modal visibility

    onMessagesClose - Callback when modal is closed

    messages - Array of chat messages

    position - Modal position (default: 'bottomRight')

    backgroundColor - Modal background color (default: '#f5f5f5')

    eventType - Type of event (meeting, webinar, etc.)

    member - Current user's name/ID

    islevel - User's privilege level

    socket - Socket.io connection for real-time messaging

    roomName - Room identifier

    overlayStyle - Custom overlay styles

    contentStyle - Custom content styles

    customTemplate - Complete template override

    Implements

    • OnInit
    • OnChanges
    Index

    Accessors

    styles

    Constructors

    constructor

    Methods

    onMessagesClose updateStartDirectMessage updateDirectMessageDetails ngOnInit ngOnChanges switchToDirectTab switchToGroupTab populateMessages closeMessagesModal updateModalStyles getTabStyle getButtonCloseStyle getCombinedOverlayStyle getCombinedContentStyle

    Properties

    isMessagesModalVisible onSendMessagePress messages position backgroundColor activeTabBackgroundColor eventType member islevel coHostResponsibility coHost startDirectMessage directMessageDetails showAlert? roomName socket chatSetting overlayStyle? contentStyle? customTemplate? faTimes directMessages groupMessages activeTab focusedInput reRender modalContainerStyle modalContentStyle

    Accessors

    • get styles(): {
          modalContent: { borderRadius: string; padding: string };
          modalBody: { marginTop: string };
          tabText: {
              paddingRight: string;
              paddingLeft: string;
              paddingTop: string;
              paddingBottom: string;
              fontWeight: string;
              marginRight: string;
              marginLeft: string;
          };
          activeTabText: {
              color: string;
              backgroundColor: string;
              borderRadius: string;
          };
          separator: {
              height: string;
              backgroundColor: string;
              marginVertical: string;
          };
          btnCloseMessages: {
              padding: string;
              marginRight: string;
              paddingRight: string;
          };
          icon: { fontSize: string; color: string };
      }

      Returns {
          modalContent: { borderRadius: string; padding: string };
          modalBody: { marginTop: string };
          tabText: {
              paddingRight: string;
              paddingLeft: string;
              paddingTop: string;
              paddingBottom: string;
              fontWeight: string;
              marginRight: string;
              marginLeft: string;
          };
          activeTabText: {
              color: string;
              backgroundColor: string;
              borderRadius: string;
          };
          separator: {
              height: string;
              backgroundColor: string;
              marginVertical: string;
          };
          btnCloseMessages: {
              padding: string;
              marginRight: string;
              paddingRight: string;
          };
          icon: { fontSize: string; color: string };
      }

    Constructors

    Methods

    • A callback method that is invoked immediately after the default change detector has checked the directive's data-bound properties for the first time, and before any of the view or content children have been checked. It is invoked only once when the directive is instantiated.

      Returns void

    • A callback method that is invoked immediately after the default change detector has checked data-bound properties if at least one has changed, and before the view and content children are checked.

      Parameters

      • changes: SimpleChanges

        The changed properties.

      Returns void

    • Parameters

      • tab: string

      Returns {
          paddingRight: string;
          paddingLeft: string;
          paddingTop: string;
          paddingBottom: string;
          fontWeight: string;
          marginRight: string;
          marginLeft: string;
          color?: string;
          backgroundColor?: string;
          borderRadius?: string;
      }

    Properties

    isMessagesModalVisible: boolean = false
    onSendMessagePress: (options: SendMessageOptions) => Promise<void>
    messages: Message[] = []
    position: string = 'topRight'
    backgroundColor: string = '#f5f5f5'
    activeTabBackgroundColor: string = '#2b7ce5'
    eventType: EventType = 'webinar'
    member: string = ''
    islevel: string = ''
    coHostResponsibility: CoHostResponsibility[] = []
    coHost: string = ''
    startDirectMessage: boolean = false
    directMessageDetails: Participant | null = null
    showAlert?: ShowAlert
    roomName: string = ''
    socket: Socket = ...
    chatSetting: string = ''
    overlayStyle?: Partial<CSSStyleDeclaration>
    contentStyle?: Partial<CSSStyleDeclaration>
    customTemplate?: any
    faTimes: IconDefinition = faTimes
    directMessages: any[] = []
    groupMessages: any[] = []
    activeTab: string = 'group'
    focusedInput: boolean = false
    reRender: boolean = false
    modalContainerStyle: any
    modalContentStyle: any

    Settings

    Member Visibility

    On This Page

    Accessors
    Constructors
    Methods
    Properties