Class MessagesModal

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

Component

Selector

app-messages-modal

Template Url

./messages-modal.component.html

Style Urls

./messages-modal.component.css

Standalone

true

Imports

[CommonModule, FontAwesomeModule, MessagePanel]

Description

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

Example

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>

Example

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>

Example

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>

Input

isMessagesModalVisible - Controls modal visibility

Input

onMessagesClose - Callback when modal is closed

Input

messages - Array of chat messages

Input

position - Modal position (default: 'bottomRight')

Input

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

Input

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

Input

member - Current user's name/ID

Input

islevel - User's privilege level

Input

socket - Socket.io connection for real-time messaging

Input

roomName - Room identifier

Input

overlayStyle - Custom overlay styles

Input

contentStyle - Custom content styles

Input

customTemplate - Complete template override

Implements

  • OnInit
  • OnChanges

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

styles

  • 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;
        };
    }

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

Constructors

constructor

Methods

onMessagesClose

updateStartDirectMessage

updateDirectMessageDetails

ngOnInit

  • ngOnInit(): void

  • 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

ngOnChanges

  • ngOnChanges(changes): 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

switchToDirectTab

switchToGroupTab

populateMessages

closeMessagesModal

updateModalStyles

getTabStyle

  • getTabStyle(tab): {
        paddingRight: string;
        paddingLeft: string;
        paddingTop: string;
        paddingBottom: string;
        fontWeight: string;
        marginRight: string;
        marginLeft: string;
        color?: string;
        backgroundColor?: string;
        borderRadius?: string;
    }

  • Parameters

    • tab: string

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

    • paddingRight: string
    • paddingLeft: string
    • paddingTop: string
    • paddingBottom: string
    • fontWeight: string
    • marginRight: string
    • marginLeft: string
    • Optionalcolor?: string
    • OptionalbackgroundColor?: string
    • OptionalborderRadius?: string

getButtonCloseStyle

  • getButtonCloseStyle(): {
        marginLeft: string;
        padding: string;
        marginRight: string;
        paddingRight: string;
    }

  • Returns {
        marginLeft: string;
        padding: string;
        marginRight: string;
        paddingRight: string;
    }

    • marginLeft: string
    • padding: string
    • marginRight: string
    • paddingRight: string

getCombinedOverlayStyle

getCombinedContentStyle

Properties

isMessagesModalVisible

isMessagesModalVisible: boolean = false

onSendMessagePress

onSendMessagePress: ((options: SendMessageOptions) => Promise<void>)

messages

messages: Message[] = []

position

position: string = 'topRight'

backgroundColor

backgroundColor: string = '#f5f5f5'

activeTabBackgroundColor

activeTabBackgroundColor: string = '#2b7ce5'

eventType

eventType: EventType = 'webinar'

member

member: string = ''

islevel

islevel: string = ''

coHostResponsibility

coHostResponsibility: CoHostResponsibility[] = []

coHost

coHost: string = ''

startDirectMessage

startDirectMessage: boolean = false

directMessageDetails

directMessageDetails: null | Participant = null

OptionalshowAlert

showAlert?: ShowAlert

roomName

roomName: string = ''

socket

socket: Socket<DefaultEventsMap, DefaultEventsMap> = ...

chatSetting

chatSetting: string = ''

OptionaloverlayStyle

overlayStyle?: Partial<CSSStyleDeclaration>

OptionalcontentStyle

contentStyle?: Partial<CSSStyleDeclaration>

OptionalcustomTemplate

customTemplate?: any

faTimes

faTimes: IconDefinition = faTimes

directMessages

directMessages: any[] = []

groupMessages

groupMessages: any[] = []

activeTab

activeTab: string = 'group'

focusedInput

focusedInput: boolean = false

reRender

reRender: boolean = false

modalContainerStyle

modalContainerStyle: any

modalContentStyle

modalContentStyle: any

Settings

Member Visibility

On This Page

Accessors
Constructors
Methods
Properties