Interface MessagesModalOptions

Interface defining the props for the MessagesModal component.

MessagesModal provides a tabbed interface for viewing and sending group messages and direct messages with real-time updates.

MessagesModalOptions

Display Control:

interface MessagesModalOptions {
    isMessagesModalVisible: boolean;
    onMessagesClose: (() => void);
    onSendMessagePress?: ((options: SendMessageOptions) => Promise<void>);
    messages: Message[];
    position?:
        | "topLeft"
        | "topRight"
        | "bottomLeft"
        | "bottomRight";
    backgroundColor?: string;
    activeTabBackgroundColor?: string;
    eventType: EventType;
    member: string;
    islevel: string;
    coHostResponsibility: CoHostResponsibility[];
    coHost: string;
    startDirectMessage: boolean;
    directMessageDetails: Participant;
    updateStartDirectMessage: ((start: boolean) => void);
    updateDirectMessageDetails: ((participant: Participant) => void);
    showAlert?: ShowAlert;
    roomName: string;
    socket: Socket<DefaultEventsMap, DefaultEventsMap>;
    chatSetting: string;
    style?: object;
    renderContent?: ((options: {
        defaultContent: Element;
        dimensions: {
            width: number;
            height: number;
        };
    }) => Element);
    renderContainer?: ((options: {
        defaultContainer: Element;
        dimensions: {
            width: number;
            height: number;
        };
    }) => ReactNode);
}

Properties

isMessagesModalVisible onMessagesClose onSendMessagePress? messages position? backgroundColor? activeTabBackgroundColor? eventType member islevel coHostResponsibility coHost startDirectMessage directMessageDetails updateStartDirectMessage updateDirectMessageDetails showAlert? roomName socket chatSetting style? renderContent? renderContainer?

Properties

isMessagesModalVisible

isMessagesModalVisible: boolean

Whether the modal is currently visible

onMessagesClose

onMessagesClose: (() => void)

Callback when modal is closed

OptionalonSendMessagePress

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

Function to handle sending messages (default: sendMessage)

Direct Messaging:

messages

messages: Message[]

Array of message objects to display (group and direct messages)

Optionalposition

position?:
    | "topLeft"
    | "topRight"
    | "bottomLeft"
    | "bottomRight"

Screen position where the modal should appear

Styling:

OptionalbackgroundColor

backgroundColor?: string

Background color of the modal

OptionalactiveTabBackgroundColor

activeTabBackgroundColor?: string

Background color of the active tab

eventType

eventType: EventType

Type of event ('conference', 'webinar', 'broadcast', 'chat')

member

member: string

Current user's username/member ID

islevel

islevel: string

Current user's level/role ('0'=participant, '1'=moderator, '2'=host)

coHostResponsibility

coHostResponsibility: CoHostResponsibility[]

Co-host permissions

coHost

coHost: string

Co-host user ID

Session Info:

startDirectMessage

startDirectMessage: boolean

Flag to initiate direct message mode

directMessageDetails

directMessageDetails: Participant

Target participant for direct message

updateStartDirectMessage

updateStartDirectMessage: ((start: boolean) => void)

Update direct message mode flag

updateDirectMessageDetails

updateDirectMessageDetails: ((participant: Participant) => void)

Set DM recipient

User Context:

OptionalshowAlert

showAlert?: ShowAlert

Function to display alerts/notifications

Advanced Render Overrides:

roomName

roomName: string

Name/ID of the current room

socket

socket: Socket<DefaultEventsMap, DefaultEventsMap>

Socket.io client for real-time communication

chatSetting

chatSetting: string

Chat visibility settings ('allow', 'disallow', etc.)

Message Handling:

Optionalstyle

style?: object

Additional custom styles for the modal container

Messages Data:

OptionalrenderContent

renderContent?: ((options: {
    defaultContent: Element;
    dimensions: {
        width: number;
        height: number;
    };
}) => Element)

Function to wrap or replace the default modal content

OptionalrenderContainer

renderContainer?: ((options: {
    defaultContainer: Element;
    dimensions: {
        width: number;
        height: number;
    };
}) => ReactNode)

Function to wrap or replace the entire modal container

Settings

Member Visibility

On This Page

Properties