mediasfu-reactnative-expo
Version:
mediasfu-reactnative-expo – Expo-managed React Native WebRTC SDK for video conferencing, webinars, live streaming, broadcast, screen sharing, whiteboard, chat, recording, live subtitles, translation, and AI agent rooms on iOS, Android, and web. Prebuilt r
301 lines (300 loc) • 10.6 kB
TypeScript
import React from 'react';
import { Socket } from 'socket.io-client';
import { SendMessageOptions } from '../../methods/messageMethods/sendMessage';
import { CoHostResponsibility, EventType, Message, Participant, ShowAlert } from '../../@types/types';
/**
* 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.
*
* @interface MessagesModalOptions
*
* **Display Control:**
* @property {boolean} isMessagesModalVisible - Whether the modal is currently visible
* @property {() => void} onMessagesClose - Callback when modal is closed
* @property {"topRight" | "topLeft" | "bottomRight" | "bottomLeft"} [position="topRight"]
* Screen position where the modal should appear
*
* **Styling:**
* @property {string} [backgroundColor="#f5f5f5"] - Background color of the modal
* @property {string} [activeTabBackgroundColor="#7AD2DCFF"] - Background color of the active tab
* @property {object} [style] - Additional custom styles for the modal container
*
* **Messages Data:**
* @property {Message[]} messages - Array of message objects to display (group and direct messages)
* @property {string} chatSetting - Chat visibility settings ('allow', 'disallow', etc.)
*
* **Message Handling:**
* @property {(options: SendMessageOptions) => Promise<void>} [onSendMessagePress]
* Function to handle sending messages (default: sendMessage)
*
* **Direct Messaging:**
* @property {boolean} startDirectMessage - Flag to initiate direct message mode
* @property {Participant | null} directMessageDetails - Target participant for direct message
* @property {(start: boolean) => void} updateStartDirectMessage - Update direct message mode flag
* @property {(participant: Participant | null) => void} updateDirectMessageDetails - Set DM recipient
*
* **User Context:**
* @property {string} member - Current user's username/member ID
* @property {string} islevel - Current user's level/role ('0'=participant, '1'=moderator, '2'=host)
* @property {CoHostResponsibility[]} coHostResponsibility - Co-host permissions
* @property {string} coHost - Co-host user ID
*
* **Session Info:**
* @property {EventType} eventType - Type of event ('conference', 'webinar', 'broadcast', 'chat')
* @property {string} roomName - Name/ID of the current room
* @property {Socket} socket - Socket.io client for real-time communication
* @property {ShowAlert} [showAlert] - Function to display alerts/notifications
*
* **Advanced Render Overrides:**
* @property {(options: { defaultContent: JSX.Element; dimensions: { width: number; height: number }}) => JSX.Element} [renderContent]
* Function to wrap or replace the default modal content
* @property {(options: { defaultContainer: JSX.Element; dimensions: { width: number; height: number }}) => React.ReactNode} [renderContainer]
* Function to wrap or replace the entire modal container
*/
export interface MessagesModalOptions {
/**
* Determines if the messages modal is visible.
*/
isMessagesModalVisible: boolean;
/**
* Function to close the messages modal.
*/
onMessagesClose: () => void;
/**
* Function to handle sending messages.
* Defaults to the imported sendMessage function.
*/
onSendMessagePress?: (options: SendMessageOptions) => Promise<void>;
/**
* Array of message objects to display.
*/
messages: Message[];
/**
* Position of the modal on the screen.
* Possible values: 'topRight', 'topLeft', 'bottomRight', 'bottomLeft'.
* @default 'topRight'
*/
position?: 'topRight' | 'topLeft' | 'bottomRight' | 'bottomLeft';
/**
* Background color of the modal.
* @default '#f5f5f5'
*/
backgroundColor?: string;
isDarkMode?: boolean;
/**
* Background color of the active tab.
* @default '#7AD2DCFF',
*/
activeTabBackgroundColor?: string;
/**
* Type of the event (e.g., webinar, conference, broadcast, chat).
*/
eventType: EventType;
/**
* Current member's username.
*/
member: string;
/**
* Level of the user.
*/
islevel: string;
/**
* Array of co-host responsibilities.
*/
coHostResponsibility: CoHostResponsibility[];
/**
* Co-host's username.
*/
coHost: string;
/**
* Flag to start a direct message.
*/
startDirectMessage: boolean;
/**
* Details of the direct message.
*/
directMessageDetails: Participant | null;
/**
* Function to update the start direct message flag.
*/
updateStartDirectMessage: (start: boolean) => void;
/**
* Function to update direct message details.
*/
updateDirectMessageDetails: (participant: Participant | null) => void;
/**
* Function to show alerts.
*/
showAlert?: ShowAlert;
/**
* Name of the chat room.
*/
roomName: string;
/**
* Socket object for real-time communication.
*/
socket: Socket;
/**
* Settings for the chat.
*/
chatSetting: string;
/**
* Optional custom style for the modal container.
*/
style?: object;
/**
* Custom render function for modal content.
*/
renderContent?: (options: {
defaultContent: JSX.Element;
dimensions: {
width: number;
height: number;
};
}) => JSX.Element;
/**
* Custom render function for the modal container.
*/
renderContainer?: (options: {
defaultContainer: JSX.Element;
dimensions: {
width: number;
height: number;
};
}) => React.ReactNode;
}
export type MessagesModalType = (options: MessagesModalOptions) => JSX.Element;
/**
* MessagesModal - Chat interface with tabbed group and direct messaging
*
* MessagesModal is a comprehensive React Native modal for real-time chat communication.
* It provides a tabbed interface with separate views for group messages and direct messages,
* message composition with input field, and automatic scrolling to new messages.
*
* **Key Features:**
* - Tabbed interface (Group Chat / Direct Messages)
* - Real-time message display with timestamps
* - Message composition with send button
* - Auto-scroll to latest messages
* - Direct message targeting to specific participants
* - Permission-based chat visibility controls
* - Responsive design with flexible positioning
* - Message history with sender identification
*
* **UI Customization:**
* This component can be replaced via `uiOverrides.messagesModalComponent` to
* provide a completely custom messages modal implementation.
*
* @component
* @param {MessagesModalOptions} props - Configuration options for the MessagesModal component
*
* @returns {JSX.Element} Rendered messages modal with chat interface
*
* @example
* // Basic usage - Display messages modal with group and direct messages
* import React, { useState } from 'react';
* import { MessagesModal } from 'mediasfu-reactnative-expo';
* import { Socket } from 'socket.io-client';
*
* function ChatControls() {
* const [isVisible, setIsVisible] = useState(false);
* const [messages, setMessages] = useState([
* { sender: 'Alice', message: 'Hello everyone!', timestamp: '10:01', group: true },
* { sender: 'Bob', message: 'Hey Alice!', timestamp: '10:02', receivers: ['Alice'], group: false },
* ]);
* const [startDM, setStartDM] = useState(false);
* const [dmDetails, setDmDetails] = useState(null);
*
* return (
* <>
* <Button title="Messages" onPress={() => setIsVisible(true)} />
* <MessagesModal
* isMessagesModalVisible={isVisible}
* onMessagesClose={() => setIsVisible(false)}
* messages={messages}
* eventType="conference"
* member="john_doe"
* islevel="1"
* coHostResponsibility={[{ name: 'chat', value: true }]}
* coHost="jane_doe"
* startDirectMessage={startDM}
* directMessageDetails={dmDetails}
* updateStartDirectMessage={setStartDM}
* updateDirectMessageDetails={setDmDetails}
* roomName="MainRoom"
* socket={socketInstance}
* chatSetting="allow"
* />
* </>
* );
* }
*
* @example
* // With custom styling and positioning
* <MessagesModal
* isMessagesModalVisible={showMessages}
* onMessagesClose={() => setShowMessages(false)}
* messages={chatMessages}
* position="bottomRight"
* backgroundColor="#1a1a2e"
* activeTabBackgroundColor="#0f3460"
* onSendMessagePress={async (options) => {
* console.log('Sending:', options.message);
* await sendMessage(options);
* setMessages([...messages, options.message]);
* }}
* eventType="webinar"
* member="presenter_1"
* islevel="2"
* coHostResponsibility={[{ name: 'chat', value: true }]}
* coHost="moderator_1"
* startDirectMessage={false}
* directMessageDetails={null}
* updateStartDirectMessage={(start) => console.log('Start DM:', start)}
* updateDirectMessageDetails={(participant) => console.log('DM to:', participant)}
* roomName="WebinarRoom"
* socket={socket}
* chatSetting="allow"
* />
*
* @example
* // Using uiOverrides for complete modal replacement
* import { MyCustomMessagesModal } from './MyCustomMessagesModal';
*
* const sessionConfig = {
* credentials: { apiKey: 'your-api-key' },
* uiOverrides: {
* messagesModalComponent: {
* component: MyCustomMessagesModal,
* injectedProps: {
* theme: 'minimal',
* showEmojis: true,
* },
* },
* },
* };
*
* // MyCustomMessagesModal.tsx
* export const MyCustomMessagesModal = (props: MessagesModalOptions & { theme: string; showEmojis: boolean }) => {
* return (
* <Modal visible={props.isMessagesModalVisible} onRequestClose={props.onMessagesClose}>
* <View style={{ backgroundColor: props.theme === 'minimal' ? '#fff' : '#000' }}>
* <Text>Chat Messages</Text>
* <ScrollView>
* {props.messages.map((msg, idx) => (
* <View key={idx}>
* <Text>{msg.sender}: {msg.message}</Text>
* <Text>{msg.timestamp}</Text>
* </View>
* ))}
* </ScrollView>
* {props.showEmojis && <Text>😀 😃 😄</Text>}
* </View>
* </Modal>
* );
* };
*/
declare const MessagesModal: React.FC<MessagesModalOptions>;
export default MessagesModal;