MediaSFU ReactJS
    Preparing search index...

    Variable MessagesModalConst

    MessagesModal: React.FC<MessagesModalOptions> = ...

    MessagesModal - Tabbed chat interface for direct and group messaging

    A comprehensive messaging modal with support for both direct (1-on-1) and group chat. Features tabbed navigation, message history display, and configurable chat permissions based on event settings and user roles.

    Features:

    • Dual-tab interface (Direct/Group messages)
    • Direct message initiation from participant list
    • Message history with timestamp display
    • Role-based chat permissions (host/co-host/participant)
    • Chat enable/disable based on event settings
    • Custom tab styling and active states
    • Message composition with send functionality
    • Empty state handling for no messages
    • Custom render hooks for complete UI flexibility

    Configuration options

    Modal visibility state

    Callback when modal is closed

    Handler for sending messages (defaults to built-in)

    Array of all messages (direct + group)

    Event type (conference, webinar, etc.)

    Current user's member ID

    User level ('2'=host, '1'=co-host, '0'=participant)

    Co-host permissions array

    Co-host ID

    Whether to open in direct message mode

    Participant for direct messaging

    Update direct message mode state

    Update direct message participant

    Alert display function

    Meeting/room identifier

    Socket.io client instance

    Chat permission setting ('allow', 'disallow')

    Modal position on screen

    Modal background color

    Active tab background color

    Modal title content

    HTML attributes for overlay div

    HTML attributes for content container

    HTML attributes for header section

    HTML attributes for title element

    HTML attributes for tab list container

    HTML attributes for tab buttons

    HTML attributes for close button

    Custom close icon

    HTML attributes for body section

    HTML attributes for direct message panel wrapper

    HTML attributes for group message panel wrapper

    Content when no messages exist

    Custom header renderer

    Custom tabs renderer

    Custom individual tab button renderer

    Custom message panels renderer

    Custom body renderer

    Custom content renderer

    Rendered messages modal

    // Basic chat modal with default styling

    import React, { useState } from 'react';
    import { MessagesModal } from 'mediasfu-reactjs';

    function ChatInterface({ messages, socket, roomName, member }) {
      const [isVisible, setIsVisible] = useState(false);
      const [startDirect, setStartDirect] = useState(false);
      const [directDetails, setDirectDetails] = useState(null);

      return (
        <>
          <button onClick={() => setIsVisible(true)}>
            Open Chat ({messages.length})
          </button>
          <MessagesModal
            isMessagesModalVisible={isVisible}
            onMessagesClose={() => setIsVisible(false)}
            messages={messages}
            eventType="conference"
            member={member}
            islevel="2"
            coHostResponsibility={[]}
            coHost=""
            startDirectMessage={startDirect}
            directMessageDetails={directDetails}
            updateStartDirectMessage={setStartDirect}
            updateDirectMessageDetails={setDirectDetails}
            roomName={roomName}
            socket={socket}
            chatSetting="allow"
            backgroundColor="#0f172a"
            position="topRight"
          />
        </>
      );
    }

    // Custom tab styling with gradient active state

    import { MessagesModal } from 'mediasfu-reactjs';

    function StyledChat({ messages, socket, roomName, member }) {
      return (
        <MessagesModal
          isMessagesModalVisible={true}
          onMessagesClose={() => {}}
          messages={messages}
          eventType="webinar"
          member={member}
          islevel="2"
          coHostResponsibility={[]}
          coHost=""
          startDirectMessage={false}
          directMessageDetails={null}
          updateStartDirectMessage={() => {}}
          updateDirectMessageDetails={() => {}}
          roomName={roomName}
          socket={socket}
          chatSetting="allow"
          backgroundColor="#1e3a8a"
          activeTabBackgroundColor="linear-gradient(135deg, #667eea 0%, #764ba2 100%)"
          contentProps={{
            style: {
              borderRadius: 20,
              border: '2px solid #3b82f6',
              boxShadow: '0 20px 60px rgba(59,130,246,0.3)',
            },
          }}
          tabButtonProps={{
            style: {
              borderRadius: '12px 12px 0 0',
              padding: '12px 24px',
              fontWeight: 600,
              transition: 'all 0.2s ease',
            },
          }}
        />
      );
    }

    // Custom rendering with analytics and empty states

    import { MessagesModal } from 'mediasfu-reactjs';

    function AnalyticsChat({ messages, socket, roomName, member }) {
      return (
        <MessagesModal
          isMessagesModalVisible={true}
          onMessagesClose={() => {}}
          messages={messages}
          eventType="conference"
          member={member}
          islevel="2"
          coHostResponsibility={[]}
          coHost=""
          startDirectMessage={false}
          directMessageDetails={null}
          updateStartDirectMessage={() => {}}
          updateDirectMessageDetails={() => {}}
          roomName={roomName}
          socket={socket}
          chatSetting="allow"
          onSendMessagePress={async (options) => {
            analytics.track('message_sent', {
              type: options.type,
              length: options.message.length,
            });
            return sendMessage(options);
          }}
          emptyState={({ type }) => (
            <div style={{
              textAlign: 'center',
              padding: 40,
              color: '#9ca3af',
            }}>
              <h3>No {type} messages yet</h3>
              <p>Start a conversation!</p>
            </div>
          )}
          renderTabButton={({ type, isActive, defaultButton, switchTo }) => (
            <button
              onClick={() => {
                analytics.track('chat_tab_switched', { to: type });
                switchTo();
              }}
              style={{
                background: isActive
                  ? 'linear-gradient(135deg, #22c55e 0%, #14532d 100%)'
                  : 'transparent',
                color: isActive ? 'white' : '#9ca3af',
                padding: '10px 20px',
                borderRadius: '8px 8px 0 0',
                border: 'none',
                cursor: 'pointer',
                fontWeight: isActive ? 700 : 400,
                transition: 'all 0.2s ease',
              }}
            >
              {type === 'direct' ? '💬 Direct' : '👥 Group'}
            </button>
          )}
        />
      );
    }

    // Override with MediasfuGeneric uiOverrides

    import { MediasfuGeneric, MessagesModal } from 'mediasfu-reactjs';

    const uiOverrides = {
      messagesModal: {
        component: (props) => (
          <MessagesModal
            {...props}
            backgroundColor="#0f172a"
            activeTabBackgroundColor="#3b82f6"
            position="topRight"
            contentProps={{
              style: {
                maxHeight: '80vh',
                borderRadius: 20,
                border: '2px solid #3b82f6',
              },
            }}
            tabListProps={{
              style: {
                borderBottom: '2px solid #1e3a8a',
                padding: '0 16px',
              },
            }}
          />
        ),
      },
    };

    <MediasfuGeneric uiOverrides={uiOverrides} />;

    Settings

    Member Visibility