Function MessagesModal

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

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"
      />
    </>
  );
}
Copy

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',
        },
      }}
    />
  );
}
Copy

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>
      )}
    />
  );
}
Copy

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} />;
Copy