mediasfu-reactnative/dist/types/src/components/messageComponents/MessagesModal.d.ts

MediaSFU Prebuilt React Native SDK

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.
 */
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;
    /**
     * 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;
}
export type MessagesModalType = (options: MessagesModalOptions) => JSX.Element;
/**
 * MessagesModal component displays a modal for direct and group messages.
 *
 * @component
 * @param {MessagesModalOptions} props - The properties for the MessagesModal component.
 * @returns {JSX.Element} The rendered MessagesModal component.
 *
 * @example
 * ```tsx
 * import React, { useState } from 'react';
 * import { MessagesModal } from 'mediasfu-reactnative';
 *
 * function App() {
 *   const [isVisible, setIsVisible] = useState(true);
 *   const messages = [
 *     { sender: 'Alice', message: 'Hello everyone!', timestamp: '10:01', group: true },
 *     { sender: 'Bob', message: 'Hey Alice!', timestamp: '10:02', receivers: ['Alice'], group: false },
 *   ];

 *   const handleSendMessage = async (options) => {
 *     // Logic for sending a message
 *     console.log('Message sent:', options);
 *   };

 *   return (
 *     <MessagesModal
 *       isMessagesModalVisible={isVisible}
 *       onMessagesClose={() => setIsVisible(false)}
 *       messages={messages}
 *       onSendMessagePress={handleSendMessage}
 *       eventType="conference"
 *       member="john_doe"
 *       islevel="1"
 *       coHostResponsibility={[{ name: 'chat', value: true }]}
 *       coHost="jane_doe"
 *       startDirectMessage={false}
 *       directMessageDetails={null}
 *       updateStartDirectMessage={(start) => console.log('Start Direct Message:', start)}
 *       updateDirectMessageDetails={(participant) => console.log('Direct Message Participant:', participant)}
 *       showAlert={(alert) => console.log('Alert:', alert)}
 *       roomName="MainRoom"
 *       socket={socketInstance}
 *       chatSetting="default"
 *       position="bottomRight"
 *       backgroundColor="#f5f5f5"
 *       activeTabBackgroundColor="#7AD2DCFF"
 *     />
 *   );
 * }

 * export default App;
 * ```
 */
declare const MessagesModal: React.FC<MessagesModalOptions>;
export default MessagesModal;