snapshot of https://github.com/jitsi/jitsi-meet.git @ fd1749dd28f4138aa80234fc7f311b19aaffa0e7 (2026-09-15)

react/features/chat/components/native/Chat.tsx

@@ -0,0 +1,158 @@
+/* eslint-disable react/no-multi-comp */
+import { Route, useIsFocused } from '@react-navigation/native';
+import React, { Component, useEffect } from 'react';
+import { connect, useSelector } from 'react-redux';
+
+import { IReduxState } from '../../../app/types';
+import { translate } from '../../../base/i18n/functions.native';
+import JitsiScreen from '../../../base/modal/components/JitsiScreen';
+import { StyleType } from '../../../base/styles/functions.native';
+import { TabBarLabelCounter } from '../../../mobile/navigation/components/TabBarLabelCounter';
+import { pollsStyles } from '../../../polls/components/native/styles';
+import { clearChatSearch, closeChat, sendMessage } from '../../actions.native';
+import { ChatTabs } from '../../constants';
+import { IChatProps as AbstractProps } from '../../types';
+
+import ChatInputBar from './ChatInputBar';
+import ChatSearchBar from './ChatSearchBar';
+import MessageContainer from './MessageContainer';
+import MessageRecipient from './MessageRecipient';
+
+interface IProps extends AbstractProps {
+
+    /**
+     * The number of unread messages.
+     */
+    _unreadMessagesCount: number;
+
+    /**
+     * Default prop for navigating between screen components(React Navigation).
+     */
+    navigation: any;
+
+    /**
+     * Default prop for navigating between screen components(React Navigation).
+     */
+    route: Route<'', { privateMessageRecipient: { name: string; }; }>;
+}
+
+/**
+ * Implements a React native component that renders the chat window (modal) of
+ * the mobile client.
+ */
+class Chat extends Component<IProps> {
+
+    /**
+     * Initializes a new {@code AbstractChat} instance.
+     *
+     * @param {Props} props - The React {@code Component} props to initialize
+     * the new {@code AbstractChat} instance with.
+     */
+    constructor(props: IProps) {
+        super(props);
+
+        // Bind event handlers so they are only bound once per instance.
+        this._onSendMessage = this._onSendMessage.bind(this);
+        this._renderFooter = this._renderFooter.bind(this);
+    }
+
+    /**
+     * Implements React's {@link Component#render()}.
+     *
+     * @inheritdoc
+     */
+    override render() {
+        const { _messages, route } = this.props;
+        const privateMessageRecipient = route?.params?.privateMessageRecipient;
+
+        return (
+            <JitsiScreen
+                disableForcedKeyboardDismiss = { true }
+                footerComponent = { this._renderFooter }
+                hasBottomTextInput = { true }
+                hasExtraHeaderHeight = { true }
+                style = { pollsStyles.pollPaneContainer as StyleType }>
+                <ChatSearchBar />
+                {/* @ts-ignore */}
+                <MessageContainer messages = { _messages } />
+                <MessageRecipient privateMessageRecipient = { privateMessageRecipient } />
+            </JitsiScreen>
+        );
+    }
+
+    /**
+     * Renders the footer component.
+     *
+     * @private
+     * @returns {React$Element<*>}
+     */
+    _renderFooter() {
+        return <ChatInputBar onSend = { this._onSendMessage } />;
+    }
+
+    /**
+    * Sends a text message.
+    *
+    * @private
+    * @param {string} text - The text message to be sent.
+    * @returns {void}
+    * @type {Function}
+    */
+    _onSendMessage(text: string) {
+        this.props.dispatch(sendMessage(text));
+    }
+}
+
+/**
+ * Maps (parts of) the redux state to {@link Chat} React {@code Component}
+ * props.
+ *
+ * @param {Object} state - The redux store/state.
+ * @param {any} _ownProps - Components' own props.
+ * @private
+ * @returns {{
+ *     _messages: Array<Object>,
+ *     _unreadMessagesCount: number
+ * }}
+ */
+function _mapStateToProps(state: IReduxState, _ownProps: any) {
+    const { messages, unreadMessagesCount } = state['features/chat'];
+
+    return {
+        _messages: messages,
+        _unreadMessagesCount: unreadMessagesCount
+    };
+}
+
+export default translate(connect(_mapStateToProps)((props: IProps) => {
+    const { _unreadMessagesCount, dispatch, navigation, t } = props;
+
+    const isChatTabFocused = useSelector((state: IReduxState) => state['features/chat'].focusedTab === ChatTabs.CHAT);
+
+    const isFocused = useIsFocused();
+
+    const activeUnreadMessagesNr = !isChatTabFocused && _unreadMessagesCount > 0;
+
+    useEffect(() => {
+        navigation?.setOptions({
+            tabBarLabel: () => (
+                <TabBarLabelCounter
+                    activeUnreadNr = { activeUnreadMessagesNr }
+                    isFocused = { isFocused }
+                    label = { t('chat.tabs.chat') }
+                    unreadCount = { _unreadMessagesCount } />
+            )
+        });
+
+        return () => {
+            if (isFocused) {
+                dispatch(closeChat());
+                dispatch(clearChatSearch());
+            }
+        };
+    }, [ isFocused, _unreadMessagesCount ]);
+
+    return (
+        <Chat { ...props } />
+    );
+}));

react/features/chat/components/native/ChatButton.ts

@@ -0,0 +1,78 @@
+import { connect } from 'react-redux';
+
+import { IReduxState } from '../../../app/types';
+import { CHAT_ENABLED } from '../../../base/flags/constants';
+import { getFeatureFlag } from '../../../base/flags/functions';
+import { translate } from '../../../base/i18n/functions';
+import { IconChatUnread, IconMessage } from '../../../base/icons/svg';
+import AbstractButton, { IProps as AbstractButtonProps } from '../../../base/toolbox/components/AbstractButton';
+import { arePollsDisabled } from '../../../conference/functions.any';
+import { navigate } from '../../../mobile/navigation/components/conference/ConferenceNavigationContainerRef';
+import { screen } from '../../../mobile/navigation/routes';
+import { getUnreadPollCount } from '../../../polls/functions';
+import { getUnreadCount, getUnreadFilesCount, isChatDisabled } from '../../functions';
+
+interface IProps extends AbstractButtonProps {
+
+    /**
+     * True if the polls feature is disabled.
+     */
+    _isPollsDisabled?: boolean;
+
+    /**
+     * The unread message count.
+     */
+    _unreadMessageCount: number;
+}
+
+/**
+ * Implements an {@link AbstractButton} to open the chat screen on mobile.
+ */
+class ChatButton extends AbstractButton<IProps> {
+    override accessibilityLabel = 'toolbar.accessibilityLabel.chat';
+    override icon = IconMessage;
+    override label = 'toolbar.chat';
+    override toggledIcon = IconChatUnread;
+
+    /**
+     * Handles clicking / pressing the button, and opens the appropriate dialog.
+     *
+     * @private
+     * @returns {void}
+     */
+    override _handleClick() {
+        this.props._isPollsDisabled
+            ? navigate(screen.conference.chat)
+            : navigate(screen.conference.chatTabs.main);
+    }
+
+    /**
+     * Renders the button toggled when there are unread messages.
+     *
+     * @protected
+     * @returns {boolean}
+     */
+    override _isToggled() {
+        return Boolean(this.props._unreadMessageCount);
+    }
+}
+
+/**
+ * Maps part of the redux state to the component's props.
+ *
+ * @param {Object} state - The Redux state.
+ * @param {Object} ownProps - The properties explicitly passed to the component instance.
+ * @returns {IProps}
+ */
+function _mapStateToProps(state: IReduxState, ownProps: any) {
+    const enabled = getFeatureFlag(state, CHAT_ENABLED, true) && !isChatDisabled(state);
+    const { visible = enabled } = ownProps;
+
+    return {
+        _isPollsDisabled: arePollsDisabled(state),
+        _unreadMessageCount: getUnreadCount(state) || getUnreadPollCount(state) || getUnreadFilesCount(state),
+        visible
+    };
+}
+
+export default translate(connect(_mapStateToProps)(ChatButton));

react/features/chat/components/native/ChatInputBar.tsx

@@ -0,0 +1,201 @@
+import React, { Component } from 'react';
+import { WithTranslation } from 'react-i18next';
+import { Platform, TextStyle, View, ViewStyle } from 'react-native';
+import { Text } from 'react-native-paper';
+import { connect } from 'react-redux';
+
+import { IReduxState } from '../../../app/types';
+import { translate } from '../../../base/i18n/functions';
+import { IconSend } from '../../../base/icons/svg';
+import IconButton from '../../../base/ui/components/native/IconButton';
+import Input from '../../../base/ui/components/native/Input';
+import { BUTTON_TYPES } from '../../../base/ui/constants.native';
+import { isSendGroupChatDisabled } from '../../functions';
+
+import styles from './styles';
+
+interface IProps extends WithTranslation {
+
+    /**
+     * Whether sending group chat messages is disabled.
+     */
+    _isSendGroupChatDisabled: boolean;
+
+    /**
+     * The id of the message recipient, if any.
+     */
+    _privateMessageRecipientId?: string;
+
+    /**
+     * Application's aspect ratio.
+     */
+    aspectRatio: Symbol;
+
+    /**
+     * Callback to invoke on message send.
+     */
+    onSend: Function;
+}
+
+interface IState {
+
+    /**
+     * Boolean to show if an extra padding needs to be added to the bar.
+     */
+    addPadding: boolean;
+
+    /**
+     * The value of the input field.
+     */
+    message: string;
+
+    /**
+     * Boolean to show or hide the send button.
+     */
+    showSend: boolean;
+}
+
+/**
+ * Implements the chat input bar with text field and action(s).
+ */
+class ChatInputBar extends Component<IProps, IState> {
+    /**
+     * Instantiates a new instance of the component.
+     *
+     * @inheritdoc
+     */
+    constructor(props: IProps) {
+        super(props);
+
+        this.state = {
+            addPadding: false,
+            message: '',
+            showSend: false
+        };
+
+        this._onChangeText = this._onChangeText.bind(this);
+        this._onFocused = this._onFocused.bind(this);
+        this._onSubmit = this._onSubmit.bind(this);
+    }
+
+    /**
+     * Implements {@code Component#render}.
+     *
+     * @inheritdoc
+     */
+    override render() {
+        if (this.props._isSendGroupChatDisabled && !this.props._privateMessageRecipientId) {
+            return (
+                <View
+                    id = 'no-messages-message'
+                    style = { styles.disabledSendWrapper as ViewStyle }>
+                    <Text style = { styles.emptyComponentText as TextStyle }>
+                        { this.props.t('chat.disabled') }
+                    </Text>
+                </View>
+            );
+        }
+
+        return (
+            <View
+                id = 'chat-input'
+                style = { [
+                    styles.inputBar,
+                    this.state.addPadding ? styles.extraBarPadding : null
+                ] as ViewStyle[] }>
+                <Input
+                    blurOnSubmit = { false }
+                    customStyles = {{ container: styles.customInputContainer }}
+                    id = 'chat-input-messagebox'
+                    multiline = { false }
+                    onBlur = { this._onFocused(false) }
+                    onChange = { this._onChangeText }
+                    onFocus = { this._onFocused(true) }
+                    onSubmitEditing = { this._onSubmit }
+                    placeholder = { this.props.t('chat.fieldPlaceHolder') }
+                    returnKeyType = 'send'
+                    value = { this.state.message } />
+                <IconButton
+                    disabled = { !this.state.message }
+                    id = { this.props.t('chat.sendButton') }
+                    onPress = { this._onSubmit }
+                    src = { IconSend }
+                    style = { styles.sendButton }
+                    type = { BUTTON_TYPES.PRIMARY } />
+            </View>
+        );
+    }
+
+    /**
+     * Callback to handle the change of the value of the text field.
+     *
+     * @param {string} text - The current value of the field.
+     * @returns {void}
+     */
+    _onChangeText(text: string) {
+        this.setState({
+            message: text,
+            showSend: Boolean(text)
+        });
+    }
+
+    /**
+     * Constructs a callback to be used to update the padding of the field if necessary.
+     *
+     * @param {boolean} focused - True of the field is focused.
+     * @returns {Function}
+     */
+    _onFocused(focused: boolean) {
+        return () => {
+            Platform.OS === 'android' && this.setState({
+                addPadding: focused
+            });
+        };
+    }
+
+    /**
+     * Callback to handle the submit event of the text field.
+     *
+     * @returns {void}
+     */
+    _onSubmit() {
+        const {
+            _isSendGroupChatDisabled,
+            _privateMessageRecipientId,
+            onSend
+        } = this.props;
+
+        if (_isSendGroupChatDisabled && !_privateMessageRecipientId) {
+            return;
+        }
+
+        const message = this.state.message.trim();
+
+        message && onSend(message);
+        this.setState({
+            message: '',
+            showSend: false
+        });
+    }
+}
+
+/**
+ * Maps part of the Redux state to the props of this component.
+ *
+ * @param {Object} state - The redux state.
+ * @private
+ * @returns {IProps}
+ */
+function _mapStateToProps(state: IReduxState) {
+    const { aspectRatio } = state['features/base/responsive-ui'];
+    const { privateMessageRecipient } = state['features/chat'];
+    const isGroupChatDisabled = isSendGroupChatDisabled(state);
+
+    return {
+        _isSendGroupChatDisabled: isGroupChatDisabled,
+        _privateMessageRecipientId: privateMessageRecipient?.id,
+        aspectRatio
+    };
+}
+
+export default translate(connect(_mapStateToProps)(ChatInputBar));

react/features/chat/components/native/ChatMessage.tsx

@@ -0,0 +1,293 @@
+import React, { Component } from 'react';
+import { Text, View, ViewStyle } from 'react-native';
+import { connect } from 'react-redux';
+
+import { IReduxState } from '../../../app/types';
+import Avatar from '../../../base/avatar/components/Avatar';
+import { translate } from '../../../base/i18n/functions';
+import Linkify from '../../../base/react/components/native/Linkify';
+import { isGifEnabled, isGifMessage } from '../../../gifs/functions.native';
+import { CHAR_LIMIT, MESSAGE_TYPE_ERROR, MESSAGE_TYPE_LOCAL } from '../../constants';
+import {
+    getActiveChatSearchMatch,
+    getCanReplyToMessage,
+    getChatSearchQuery,
+    getDisplayNameSuffix,
+    getFormattedTimestamp,
+    getHighlightSegments,
+    getMessageText,
+    getPrivateNoticeMessage,
+    replaceNonUnicodeEmojis
+} from '../../functions';
+import { IChatMessageProps } from '../../types';
+
+import GifMessage from './GifMessage';
+import PrivateMessageButton from './PrivateMessageButton';
+import styles from './styles';
+
+
+/**
+ * Renders a single chat message.
+ */
+class ChatMessage extends Component<IChatMessageProps> {
+    /**
+     * Implements {@code Component#render}.
+     *
+     * @inheritdoc
+     */
+    override render() {
+        const { gifEnabled, message, knocking, isActiveMatch } = this.props;
+        const localMessage = message.messageType === MESSAGE_TYPE_LOCAL;
+        const { privateMessage, lobbyChat } = message;
+
+        // Style arrays that need to be updated in various scenarios, such as
+        // error messages or others.
+        const detailsWrapperStyle: ViewStyle[] = [
+            styles.detailsWrapper as ViewStyle
+        ];
+        const messageBubbleStyle: ViewStyle[] = [
+            styles.messageBubble as ViewStyle
+        ];
+
+        if (localMessage) {
+            // This is a message sent by the local participant.
+
+            // The wrapper needs to be aligned to the right.
+            detailsWrapperStyle.push(styles.ownMessageDetailsWrapper as ViewStyle);
+
+            // The bubble needs some additional styling
+            messageBubbleStyle.push(styles.localMessageBubble);
+        } else if (message.messageType === MESSAGE_TYPE_ERROR) {
+            // This is a system message.
+
+            // The bubble needs some additional styling
+            messageBubbleStyle.push(styles.systemMessageBubble);
+        } else {
+            // This is a remote message sent by a remote participant.
+
+            // The bubble needs some additional styling
+            messageBubbleStyle.push(styles.remoteMessageBubble);
+        }
+
+        if (privateMessage) {
+            messageBubbleStyle.push(styles.privateMessageBubble);
+        }
+
+        if (lobbyChat && !knocking) {
+            messageBubbleStyle.push(styles.lobbyMessageBubble);
+        }
+
+        if (isActiveMatch) {
+            messageBubbleStyle.push(styles.activeMatchMessageBubble);
+        }
+
+        const messageText = message.isDeleted
+            ? this.props.t(localMessage ? 'chat.deletedMessageByMe' : 'chat.deletedMessage')
+            : getMessageText(this.props.message);
+
+        return (
+            <View
+                id = { message.messageId }
+                style = { styles.messageWrapper as ViewStyle } >
+                { this._renderAvatar() }
+                <View style = { detailsWrapperStyle }>
+                    <View style = { messageBubbleStyle }>
+                        <View style = { styles.textWrapper as ViewStyle } >
+                            { this._renderDisplayName() }
+                            { gifEnabled && isGifMessage(messageText)
+                                ? <GifMessage message = { messageText } />
+                                : this._renderMessageTextComponent(messageText) }
+                            { this._renderPrivateNotice() }
+                        </View>
+                        { !message.isDeleted && this._renderPrivateReplyButton() }
+                    </View>
+                    { this._renderTimestamp() }
+                </View>
+            </View>
+        );
+    }
+
+    /**
+     * Renders the avatar of the sender.
+     *
+     * @returns {React.ReactElement<*>}
+     */
+    _renderAvatar() {
+        const { message } = this.props;
+
+        return (
+            <View style = { styles.avatarWrapper }>
+                { this.props.showAvatar && <Avatar
+                    displayName = { message.displayName }
+                    participantId = { message.participantId }
+                    size = { styles.avatarWrapper.width } />
+                }
+            </View>
+        );
+    }
+
+    /**
+     * Renders the display name of the sender if necessary.
+     *
+     * @returns {React.ReactElement<*> | null}
+     */
+    _renderDisplayName() {
+        const { message, showDisplayName } = this.props;
+
+        if (!showDisplayName) {
+            return null;
+        }
+
+        const { displayName } = message;
+
+        return (
+            <Text style = { styles.senderDisplayName }>
+                { `${displayName}${getDisplayNameSuffix(message)}` }
+            </Text>
+        );
+    }
+
+    /**
+     * Renders the message text based on number of characters.
+     *
+     * @param {string} messageText - The message text.
+     * @returns {React.ReactElement<*>}
+     */
+    _renderMessageTextComponent(messageText: string) {
+        const { highlightQuery, isActiveMatch } = this.props;
+
+        if (messageText.length >= CHAR_LIMIT) {
+            if (highlightQuery && !isActiveMatch) {
+                return (
+                    <Text
+                        selectable = { true }
+                        style = { styles.chatMessage }>
+                        { this._renderHighlightedSegments(messageText, highlightQuery, isActiveMatch) }
+                    </Text>
+                );
+            }
+
+            return (
+                <Text
+                    selectable = { true }
+                    style = { styles.chatMessage }>
+                    { messageText }
+                </Text>
+            );
+        }
+
+        const processedText = replaceNonUnicodeEmojis(messageText);
+
+        return (
+            <Linkify
+                linkStyle = { styles.chatLink }
+                style = { styles.chatMessage }>
+                { highlightQuery && !isActiveMatch
+                    ? this._renderHighlightedSegments(processedText, highlightQuery, isActiveMatch)
+                    : processedText }
+            </Linkify>
+        );
+    }
+
+    /**
+     * Splits text into highlight/non-highlight segments and renders them.
+     *
+     * @param {string} text - The text to split.
+     * @param {string} query - The active search query.
+     * @param {boolean} [isActiveMatch] - Whether this message is the focused match.
+     * @returns {Array<React.ReactNode>}
+     */
+    _renderHighlightedSegments(text: string, query: string, isActiveMatch?: boolean) {
+        return getHighlightSegments(text, query).map((segment, index) => segment.match
+            ? (
+                <Text
+                    key = { index }
+                    style = { isActiveMatch ? styles.chatMessageHighlightActive : styles.chatMessageHighlight }>
+                    { segment.text }
+                </Text>
+            )
+            : segment.text);
+    }
+
+    /**
+     * Renders the message privacy notice, if necessary.
+     *
+     * @returns {React.ReactElement<*> | null}
+     */
+    _renderPrivateNotice() {
+        const { message, knocking } = this.props;
+
+        if (!(message.privateMessage || (message.lobbyChat && !knocking))) {
+            return null;
+        }
+
+        return (
+            <Text style = { message.lobbyChat ? styles.lobbyMsgNotice : styles.privateNotice }>
+                { getPrivateNoticeMessage(this.props.message) }
+            </Text>
+        );
+    }
+
+    /**
+     * Renders the private reply button, if necessary.
+     *
+     * @returns {React.ReactElement<*> | null}
+     */
+    _renderPrivateReplyButton() {
+        const { message, canReply } = this.props;
+        const { lobbyChat } = message;
+
+        if (!canReply) {
+            return null;
+        }
+
+        return (
+            <View style = { styles.replyContainer as ViewStyle }>
+                <PrivateMessageButton
+                    isLobbyMessage = { lobbyChat }
+                    participantID = { message.participantId }
+                    reply = { true }
+                    showLabel = { false }
+                    toggledStyles = { styles.replyStyles } />
+            </View>
+        );
+    }
+
+    /**
+     * Renders the time at which the message was sent, if necessary.
+     *
+     * @returns {React.ReactElement<*> | null}
+     */
+    _renderTimestamp() {
+        if (!this.props.showTimestamp) {
+            return null;
+        }
+
+        return (
+            <Text style = { styles.timeText }>
+                { getFormattedTimestamp(this.props.message) }
+            </Text>
+        );
+    }
+}
+
+/**
+ * Maps part of the redux state to the props of this component.
+ *
+ * @param {Object} state - The Redux state.
+ * @param {IChatMessageProps} message - Message object.
+ * @returns {IProps}
+ */
+function _mapStateToProps(state: IReduxState, { message }: IChatMessageProps) {
+    const activeMatch = getActiveChatSearchMatch(state);
+
+    return {
+        canReply: getCanReplyToMessage(state, message),
+        gifEnabled: isGifEnabled(state),
+        highlightQuery: getChatSearchQuery(state),
+        isActiveMatch: Boolean(activeMatch && activeMatch.messageId === message.messageId),
+        knocking: state['features/lobby'].knocking
+    };
+}
+
+export default translate(connect(_mapStateToProps)(ChatMessage));

react/features/chat/components/native/ChatMessageGroup.tsx

@@ -0,0 +1,81 @@
+import React, { Component } from 'react';
+import { FlatList } from 'react-native';
+
+import { MESSAGE_TYPE_LOCAL, MESSAGE_TYPE_REMOTE } from '../../constants';
+import { IMessage } from '../../types';
+
+import ChatMessage from './ChatMessage';
+
+interface IProps {
+
+    /**
+    * The messages array to render.
+    */
+    messages: Array<IMessage>;
+}
+
+/**
+ * Implements a container to render all the chat messages in a conference.
+ */
+export default class ChatMessageGroup extends Component<IProps> {
+    /**
+     * Instantiates a new instance of the component.
+     *
+     * @inheritdoc
+     */
+    constructor(props: IProps) {
+        super(props);
+
+        this._keyExtractor = this._keyExtractor.bind(this);
+        this._renderMessage = this._renderMessage.bind(this);
+    }
+
+    /**
+     * Implements {@code Component#render}.
+     *
+     * @inheritdoc
+     */
+    override render() {
+        return (
+            <FlatList
+                data = { this.props.messages }
+                inverted = { true }
+                keyExtractor = { this._keyExtractor }
+                renderItem = { this._renderMessage } />
+        );
+    }
+
+    /**
+     * Key extractor for the flatlist.
+     *
+     * @param {Object} _item - The flatlist item that we need the key to be
+     * generated for.
+     * @param {number} index - The index of the element.
+     * @returns {string}
+     */
+    _keyExtractor(_item: Object, index: number) {
+        return `key_${index}`;
+    }
+
+    /**
+     * Renders a single chat message.
+     *
+     * @param {Object} message - The chat message to render.
+     * @returns {React$Element<*>}
+     */
+    _renderMessage({ index, item: message }: { index: number; item: IMessage; }) {
+        return (
+            <ChatMessage
+                message = { message }
+                showAvatar = {
+                    this.props.messages[0].messageType !== MESSAGE_TYPE_LOCAL
+                        && index === this.props.messages.length - 1
+                }
+                showDisplayName = {
+                    this.props.messages[0].messageType === MESSAGE_TYPE_REMOTE
+                        && index === this.props.messages.length - 1
+                }
+                showTimestamp = { index === 0 } />
+        );
+    }
+}

react/features/chat/components/native/ChatPrivacyDialog.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { connect } from 'react-redux';
+
+import ConfirmDialog from '../../../base/dialog/components/native/ConfirmDialog';
+import { translate } from '../../../base/i18n/functions';
+import { AbstractChatPrivacyDialog, _mapDispatchToProps, _mapStateToProps } from '../AbstractChatPrivacyDialog';
+
+/**
+ * Implements a component for the dialog displayed to avoid mis-sending private messages.
+ */
+class ChatPrivacyDialog extends AbstractChatPrivacyDialog {
+    /**
+     * Implements React's {@link Component#render()}.
+     *
+     * @inheritdoc
+     * @returns {ReactElement}
+     */
+    override render() {
+        return (
+            <ConfirmDialog
+                cancelLabel = 'dialog.sendPrivateMessageCancel'
+                confirmLabel = 'dialog.sendPrivateMessageOk'
+                descriptionKey = 'dialog.sendPrivateMessage'
+                onCancel = { this._onSendGroupMessage }
+                onSubmit = { this._onSendPrivateMessage } />
+        );
+    }
+}
+
+export default translate(connect(_mapStateToProps, _mapDispatchToProps)(ChatPrivacyDialog));

react/features/chat/components/native/ChatSearchBar.tsx

@@ -0,0 +1,107 @@
+import React, { useCallback } from 'react';
+import { Text, TouchableOpacity, View, ViewStyle } from 'react-native';
+import { useDispatch, useSelector } from 'react-redux';
+
+import { IReduxState } from '../../../app/types';
+import { translate } from '../../../base/i18n/functions.native';
+import Icon from '../../../base/icons/components/Icon';
+import { IconArrowDown, IconArrowUp } from '../../../base/icons/svg';
+import BaseTheme from '../../../base/ui/components/BaseTheme.native';
+import Input from '../../../base/ui/components/native/Input';
+import { setChatSearchMatchIndex, setChatSearchQuery } from '../../actions.native';
+import { getChatSearchMatchIndex, getChatSearchMatches, getChatSearchQuery } from '../../functions';
+
+import styles from './styles';
+
+interface IProps {
+    t: Function;
+}
+
+/**
+ * Renders an always-visible search bar above the chat message list, allowing
+ * the user to filter messages and step through matches.
+ *
+ * @returns {React.ReactElement}
+ */
+const ChatSearchBar = ({ t }: IProps) => {
+    const dispatch = useDispatch();
+    const query = useSelector((state: IReduxState) => getChatSearchQuery(state));
+    const matches = useSelector((state: IReduxState) => getChatSearchMatches(state));
+    const matchIndex = useSelector((state: IReduxState) => getChatSearchMatchIndex(state));
+
+    const hasQuery = query.trim().length > 0;
+    const hasMatches = matches.length > 0;
+
+    const _onChangeText = useCallback((text: string) => {
+        dispatch(setChatSearchQuery(text));
+    }, [ dispatch ]);
+
+    const _onPrevious = useCallback(() => {
+        if (!matches.length) {
+            return;
+        }
+
+        dispatch(setChatSearchMatchIndex((matchIndex - 1 + matches.length) % matches.length));
+    }, [ dispatch, matchIndex, matches.length ]);
+
+    const _onNext = useCallback(() => {
+        if (!matches.length) {
+            return;
+        }
+
+        dispatch(setChatSearchMatchIndex((matchIndex + 1) % matches.length));
+    }, [ dispatch, matchIndex, matches.length ]);
+
+    const _onSubmitEditing = useCallback(() => {
+        _onNext();
+    }, [ _onNext ]);
+
+    return (
+        <View style = { styles.searchBarContainer as ViewStyle }>
+            <Input
+                clearable = { true }
+                customStyles = {{
+                    clearButton: styles.searchClearButton,
+                    container: styles.searchInputContainer,
+                    input: styles.searchInput
+                }}
+                onChange = { _onChangeText }
+                onSubmitEditing = { _onSubmitEditing }
+                placeholder = { t('chat.search.placeholder') }
+                returnKeyType = 'search'
+                value = { query } />
+            { hasQuery && (
+                <>
+                    <Text style = { styles.searchBarCounter }>
+                        { hasMatches
+                            ? t('chat.search.resultsCount', {
+                                current: matchIndex + 1,
+                                total: matches.length
+                            })
+                            : t('chat.search.noResults') }
+                    </Text>
+                    <TouchableOpacity
+                        disabled = { !hasMatches }
+                        onPress = { _onPrevious }
+                        style = { styles.searchBarNavButton as ViewStyle }>
+                        <Icon
+                            color = { hasMatches ? BaseTheme.palette.icon01 : BaseTheme.palette.icon03 }
+                            size = { 18 }
+                            src = { IconArrowUp } />
+                    </TouchableOpacity>
+                    <TouchableOpacity
+                        disabled = { !hasMatches }
+                        onPress = { _onNext }
+                        style = { styles.searchBarNavButton as ViewStyle }>
+                        <Icon
+                            color = { hasMatches ? BaseTheme.palette.icon01 : BaseTheme.palette.icon03 }
+                            size = { 18 }
+                            src = { IconArrowDown } />
+                    </TouchableOpacity>
+                </>
+            ) }
+        </View>
+    );
+};
+
+export default translate(ChatSearchBar);

react/features/chat/components/native/ClosedCaptions.tsx

@@ -0,0 +1,125 @@
+import { useNavigation } from '@react-navigation/native';
+import React, { useCallback, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { TouchableHighlight, View, ViewStyle } from 'react-native';
+import { Text } from 'react-native-paper';
+import { useSelector } from 'react-redux';
+
+import { IReduxState } from '../../../app/types';
+import Icon from '../../../base/icons/components/Icon';
+import { IconArrowRight, IconSubtitles } from '../../../base/icons/svg';
+import JitsiScreen from '../../../base/modal/components/JitsiScreen';
+import { StyleType } from '../../../base/styles/functions.any';
+import BaseTheme from '../../../base/ui/components/BaseTheme.native';
+import Button from '../../../base/ui/components/native/Button';
+import { BUTTON_TYPES } from '../../../base/ui/constants.native';
+import { TabBarLabelCounter } from '../../../mobile/navigation/components/TabBarLabelCounter';
+import { navigate } from '../../../mobile/navigation/components/conference/ConferenceNavigationContainerRef';
+import { screen } from '../../../mobile/navigation/routes';
+import { ChatTabs } from '../../constants';
+import AbstractClosedCaptions, { AbstractProps } from '../AbstractClosedCaptions';
+
+import { SubtitlesMessagesContainer } from './SubtitlesMessagesContainer';
+import { closedCaptionsStyles } from './styles';
+
+/**
+ * Component that displays the closed captions interface.
+ *
+ * @returns {JSX.Element} - The ClosedCaptions component.
+ */
+const ClosedCaptions = ({
+    canStartSubtitles,
+    filteredSubtitles,
+    groupedSubtitles,
+    isButtonPressed,
+    isTranscribing,
+    startClosedCaptions
+}: AbstractProps): JSX.Element => {
+    const navigation = useNavigation();
+    const { t } = useTranslation();
+    const isCCTabFocused = useSelector((state: IReduxState) => state['features/chat'].focusedTab === ChatTabs.CLOSED_CAPTIONS);
+    const selectedLanguage = useSelector((state: IReduxState) => state['features/subtitles']._language);
+    const navigateToLanguageSelect = useCallback(() => {
+        navigate(screen.conference.subtitles);
+    }, [ navigation, screen ]);
+
+    useEffect(() => {
+        navigation?.setOptions({
+            tabBarLabel: () => (
+                <TabBarLabelCounter
+                    isFocused = { isCCTabFocused }
+                    label = { t('chat.tabs.closedCaptions') } />
+            )
+        });
+    }, [ isCCTabFocused, navigation, t ]);
+
+    const getContentContainerStyle = () => {
+        if (isTranscribing) {
+            return closedCaptionsStyles.transcribingContainer as StyleType;
+        }
+
+        return closedCaptionsStyles.emptyContentContainer as StyleType;
+    };
+
+    const renderContent = () => {
+        if (!isTranscribing) {
+            if (canStartSubtitles) {
+                return (
+                    <View style = { closedCaptionsStyles.emptyContent as ViewStyle }>
+                        <Button
+                            accessibilityLabel = { t('closedCaptionsTab.startClosedCaptionsButton') }
+                            disabled = { isButtonPressed }
+                            labelKey = 'closedCaptionsTab.startClosedCaptionsButton'
+                            onClick = { startClosedCaptions }
+                            type = { BUTTON_TYPES.PRIMARY } />
+                    </View>
+                );
+            }
+
+            return (
+                <View style = { closedCaptionsStyles.emptyContent as ViewStyle }>
+                    <Icon
+                        color = { BaseTheme.palette.icon03 }
+                        size = { 100 }
+                        src = { IconSubtitles } />
+                    <Text style = { [ closedCaptionsStyles.emptyStateText, { marginTop: BaseTheme.spacing[3] } ] }>
+                        { t('closedCaptionsTab.emptyState') }
+                    </Text>
+                </View>
+            );
+        }
+
+        return (
+            <>
+                <View style = { closedCaptionsStyles.languageButtonContainer as ViewStyle }>
+                    <Text style = { closedCaptionsStyles.languageButtonText }>{ t('transcribing.translateTo') }:</Text>
+                    <TouchableHighlight onPress = { navigateToLanguageSelect }>
+                        <View style = { closedCaptionsStyles.languageButtonContent as ViewStyle }>
+                            <Text style = { closedCaptionsStyles.languageButtonText }>{ t(selectedLanguage ?? 'transcribing.subtitlesOff') }</Text>
+                            <Icon
+                                size = { 24 }
+                                src = { IconArrowRight } />
+                        </View>
+                    </TouchableHighlight>
+                </View>
+                <View style = { closedCaptionsStyles.messagesContainer as ViewStyle }>
+                    <SubtitlesMessagesContainer
+                        groups = { groupedSubtitles }
+                        messages = { filteredSubtitles } />
+                </View>
+            </>
+        );
+    };
+
+    return (
+        <JitsiScreen
+            contentContainerStyle = { getContentContainerStyle() }
+            disableForcedKeyboardDismiss = { true }
+            hasExtraHeaderHeight = { true }
+            style = { closedCaptionsStyles.container as StyleType }>
+            { renderContent() }
+        </JitsiScreen>
+    );
+};
+
+export default AbstractClosedCaptions(ClosedCaptions);

react/features/chat/components/native/GifMessage.tsx

@@ -0,0 +1,35 @@
+import { GiphyMediaView } from '@giphy/react-native-sdk';
+import React from 'react';
+import { Image, ImageStyle, View } from 'react-native';
+
+import { extractGifMediaId, extractGifURL } from '../../../gifs/function.any';
+
+import styles from './styles';
+
+interface IProps {
+
+    /**
+     * The formatted gif message.
+     */
+    message: string;
+}
+
+const GifMessage = ({ message }: IProps) => {
+    const url = extractGifURL(message);
+    const mediaId = extractGifMediaId(url);
+
+    return (<View
+        id = 'gif-message'
+        style = { styles.gifContainer }>
+        {mediaId
+            ? <GiphyMediaView
+                media = {{ id: mediaId }}
+                resizeMode = 'contain'
+                style = { styles.gifMedia } />
+            : <Image
+                source = {{ uri: url }}
+                style = { styles.gifImage as ImageStyle } />}
+    </View>);
+};
+
+export default GifMessage;

react/features/chat/components/native/MessageContainer.tsx

@@ -0,0 +1,227 @@
+import React, { Component } from 'react';
+import { FlatList, Text, TextStyle, View, ViewStyle } from 'react-native';
+import { connect } from 'react-redux';
+
+import { IReduxState } from '../../../app/types';
+import { translate } from '../../../base/i18n/functions.native';
+import { groupMessagesBySender } from '../../../base/util/messageGrouping';
+import { MESSAGE_TYPE_LOCAL, MESSAGE_TYPE_REMOTE } from '../../constants';
+import { getActiveChatSearchMatch } from '../../functions';
+import { IMessage } from '../../types';
+
+import ChatMessage from './ChatMessage';
+import styles from './styles';
+
+/**
+ * A single flat list row: one message plus its grouping flags.
+ */
+interface IMessageRow {
+    message: IMessage;
+    showAvatar: boolean;
+    showDisplayName: boolean;
+    showTimestamp: boolean;
+}
+
+interface IProps {
+    _activeMatch?: IMessage;
+    messages: IMessage[];
+    t: Function;
+}
+
+/**
+ * Implements a container to render all the chat messages in a conference.
+ */
+class MessageContainer extends Component<IProps, any> {
+
+    static defaultProps = {
+        messages: [] as IMessage[]
+    };
+
+    _flatListRef: React.RefObject<FlatList<any>>;
+
+    /**
+     * Instantiates a new instance of the component.
+     *
+     * @inheritdoc
+     */
+    constructor(props: IProps) {
+        super(props);
+
+        this._flatListRef = React.createRef();
+        this._keyExtractor = this._keyExtractor.bind(this);
+        this._renderListEmptyComponent = this._renderListEmptyComponent.bind(this);
+        this._renderMessage = this._renderMessage.bind(this);
+        this._getMessageRows = this._getMessageRows.bind(this);
+        this._onScrollToIndexFailed = this._onScrollToIndexFailed.bind(this);
+    }
+
+    /**
+     * Implements {@code Component#componentDidUpdate}.
+     *
+     * @inheritdoc
+     */
+    override componentDidUpdate(prevProps: IProps) {
+        const { _activeMatch } = this.props;
+
+        if (_activeMatch && _activeMatch.messageId !== prevProps._activeMatch?.messageId) {
+            this._scrollToActiveMatch();
+        }
+    }
+
+    /**
+     * Scrolls the list so the active search match message is visible.
+     *
+     * @returns {void}
+     */
+    _scrollToActiveMatch() {
+        const { _activeMatch } = this.props;
+
+        if (!_activeMatch) {
+            return;
+        }
+
+        const data = this._getMessageRows();
+        const index = data.findIndex(row => row.message.messageId === _activeMatch.messageId);
+
+        if (index === -1) {
+            return;
+        }
+
+        requestAnimationFrame(() => {
+            this._flatListRef.current?.scrollToIndex({
+                animated: true,
+                index,
+                viewPosition: 0.5
+            });
+        });
+    }
+
+    /**
+     * Fallback for when scrollToIndex fires before the target row is measured.
+     *
+     * @param {Object} info - Info about the failed scroll attempt.
+     * @returns {void}
+     */
+    _onScrollToIndexFailed(info: { averageItemLength: number; index: number; }) {
+        // Jump near the target so it renders, then retry.
+        this._flatListRef.current?.scrollToOffset({
+            animated: false,
+            offset: info.averageItemLength * info.index
+        });
+
+        setTimeout(() => {
+            this._flatListRef.current?.scrollToIndex({
+                animated: true,
+                index: info.index,
+                viewPosition: 0.5
+            });
+        }, 100);
+    }
+
+    /**
+     * Implements {@code Component#render}.
+     *
+     * @inheritdoc
+     */
+    override render() {
+        const data = this._getMessageRows();
+        const noMessages = data.length === 0;
+
+        return (
+            <FlatList
+                ListEmptyComponent = { this._renderListEmptyComponent }
+                bounces = { false }
+
+                // @ts-ignore
+                contentContainerStyle = { noMessages && styles.emptyListContentContainer }
+                data = { data }
+                // Workaround for RN bug:
+                // https://github.com/facebook/react-native/issues/21196
+                inverted = { Boolean(data.length) }
+                keyExtractor = { this._keyExtractor }
+                keyboardShouldPersistTaps = 'handled'
+                onScrollToIndexFailed = { this._onScrollToIndexFailed }
+                ref = { this._flatListRef }
+                renderItem = { this._renderMessage }
+                style = { noMessages && styles.emptyListStyle } />
+        );
+    }
+
+    /**
+     * Key extractor for the flatlist.
+     *
+     * @param {IMessageRow} item - The row whose key we need to generate.
+     * @returns {string}
+     */
+    _keyExtractor(item: IMessageRow) {
+        return item.message.messageId;
+    }
+
+    /**
+     * Renders a message when there are no messages in the chat yet.
+     *
+     * @returns {React$Element<any>}
+     */
+    _renderListEmptyComponent() {
+        const { t } = this.props;
+
+        return (
+            <View
+                id = 'no-messages-message'
+                style = { styles.emptyComponentWrapper as ViewStyle }>
+                <Text style = { styles.emptyComponentText as TextStyle }>
+                    { t('chat.noMessagesMessage') }
+                </Text>
+            </View>
+        );
+    }
+
+    /**
+     * Renders a single chat message.
+     *
+     * @param {Object} row - The row containing the message and its grouping flags.
+     * @returns {React$Element<*>}
+     */
+    _renderMessage({ item }: { item: IMessageRow; }) {
+        return (
+            <ChatMessage
+                message = { item.message }
+                showAvatar = { item.showAvatar }
+                showDisplayName = { item.showDisplayName }
+                showTimestamp = { item.showTimestamp } />
+        );
+    }
+
+    /**
+     * Builds one row per message with its grouping flags.
+     *
+     * @returns {IMessageRow[]}
+     */
+    _getMessageRows(): IMessageRow[] {
+        const rows: IMessageRow[] = [];
+
+        for (const group of groupMessagesBySender(this.props.messages)) {
+            const groupType = group.messages[0].messageType;
+            const oldestIndex = group.messages.length - 1;
+
+            group.messages.forEach((message, index) => {
+                rows.push({
+                    message,
+                    showAvatar: groupType !== MESSAGE_TYPE_LOCAL && index === oldestIndex,
+                    showDisplayName: groupType === MESSAGE_TYPE_REMOTE && index === oldestIndex,
+                    showTimestamp: index === 0
+                });
+            });
+        }
+
+        return rows;
+    }
+}
+
+function _mapStateToProps(state: IReduxState) {
+    return {
+        _activeMatch: getActiveChatSearchMatch(state)
+    };
+}
+
+export default translate(connect(_mapStateToProps)(MessageContainer));

react/features/chat/components/native/MessageRecipient.tsx

@@ -0,0 +1,163 @@
+import React from 'react';
+import { Text, TouchableHighlight, View, ViewStyle } from 'react-native';
+import { connect } from 'react-redux';
+
+import { IReduxState, IStore } from '../../../app/types';
+import { translate } from '../../../base/i18n/functions';
+import Icon from '../../../base/icons/components/Icon';
+import { IconCloseLarge } from '../../../base/icons/svg';
+import { ILocalParticipant } from '../../../base/participants/types';
+import {
+    setParams
+} from '../../../mobile/navigation/components/conference/ConferenceNavigationContainerRef';
+import { setLobbyChatActiveState, setPrivateMessageRecipient } from '../../actions.any';
+import AbstractMessageRecipient, {
+    IProps as AbstractProps,
+    _mapStateToProps as _mapStateToPropsAbstract
+} from '../AbstractMessageRecipient';
+
+import styles from './styles';
+
+interface IProps extends AbstractProps {
+
+    /**
+     * The Redux dispatch function.
+     */
+    dispatch: IStore['dispatch'];
+
+    /**
+ * Is lobby messaging active.
+ */
+    isLobbyChatActive: boolean;
+
+    /**
+     * The participant string for lobby chat messaging.
+     */
+    lobbyMessageRecipient?: {
+        id: string;
+        name: string;
+    } | ILocalParticipant;
+}
+
+/**
+ * Class to implement the displaying of the recipient of the next message.
+ */
+class MessageRecipient extends AbstractMessageRecipient<IProps> {
+
+    /**
+     * Constructor of the component.
+     *
+     * @param {IProps} props - The props of the component.
+     */
+    constructor(props: IProps) {
+        super(props);
+
+        this._onResetPrivateMessageRecipient = this._onResetPrivateMessageRecipient.bind(this);
+        this._onResetLobbyMessageRecipient = this._onResetLobbyMessageRecipient.bind(this);
+    }
+
+    /**
+     * Resets lobby message recipient from state.
+     *
+     * @returns {void}
+     */
+    _onResetLobbyMessageRecipient() {
+        const { dispatch } = this.props;
+
+        dispatch(setLobbyChatActiveState(false));
+    }
+
+    /**
+     * Resets private message recipient from state.
+     *
+     * @returns {void}
+     */
+    _onResetPrivateMessageRecipient() {
+        const { dispatch } = this.props;
+
+        dispatch(setPrivateMessageRecipient());
+
+        setParams({
+            privateMessageRecipient: undefined
+        });
+    }
+
+    /**
+     * Implements {@code PureComponent#render}.
+     *
+     * @inheritdoc
+     * @returns {ReactElement}
+     */
+    override render() {
+        const {
+            isLobbyChatActive,
+            lobbyMessageRecipient,
+            _privateMessageRecipient,
+            _isVisitor,
+            t
+        } = this.props;
+
+        if (isLobbyChatActive) {
+            return (
+                <View
+                    id = 'chat-recipient'
+                    style = { styles.lobbyMessageRecipientContainer as ViewStyle }>
+                    <Text style = { styles.messageRecipientText }>
+                        { t('chat.lobbyChatMessageTo', {
+                            recipient: lobbyMessageRecipient?.name
+                        }) }
+                    </Text>
+                    <TouchableHighlight
+                        onPress = { this._onResetLobbyMessageRecipient }>
+                        <Icon
+                            src = { IconCloseLarge }
+                            style = { styles.messageRecipientCancelIcon } />
+                    </TouchableHighlight>
+                </View>
+            );
+        }
+
+        if (!_privateMessageRecipient) {
+            return null;
+        }
+
+        return (
+            <View
+                id = 'message-recipient'
+                style = { styles.messageRecipientContainer as ViewStyle }>
+                <Text style = { styles.messageRecipientText }>
+                    { t('chat.messageTo', {
+                        recipient: `${_privateMessageRecipient}${_isVisitor ? ` ${t('visitors.chatIndicator')}` : ''}`
+                    }) }
+                </Text>
+                <TouchableHighlight
+                    id = 'message-recipient-cancel-button'
+                    onPress = { this._onResetPrivateMessageRecipient }
+                    underlayColor = { 'transparent' }>
+                    <Icon
+                        src = { IconCloseLarge }
+                        style = { styles.messageRecipientCancelIcon } />
+                </TouchableHighlight>
+            </View>
+        );
+    }
+}
+
+/**
+ * Maps part of the redux state to the props of this component.
+ *
+ * @param {Object} state - The Redux state.
+ * @param {any} _ownProps - Component's own props.
+ * @returns {IProps}
+ */
+function _mapStateToProps(state: IReduxState, _ownProps: any) {
+    const { lobbyMessageRecipient, isLobbyChatActive } = state['features/chat'];
+
+    return {
+        ..._mapStateToPropsAbstract(state, _ownProps),
+        isLobbyChatActive,
+        lobbyMessageRecipient
+    };
+}
+
+export default translate(connect(_mapStateToProps)(MessageRecipient));

react/features/chat/components/native/PrivateMessageButton.tsx

@@ -0,0 +1,110 @@
+import { connect } from 'react-redux';
+
+import { IReduxState } from '../../../app/types';
+import { CHAT_ENABLED } from '../../../base/flags/constants';
+import { getFeatureFlag } from '../../../base/flags/functions';
+import { translate } from '../../../base/i18n/functions';
+import { IconMessage, IconReply } from '../../../base/icons/svg';
+import { getParticipantById } from '../../../base/participants/functions';
+import { IParticipant } from '../../../base/participants/types';
+import AbstractButton, { IProps as AbstractButtonProps } from '../../../base/toolbox/components/AbstractButton';
+import { arePollsDisabled } from '../../../conference/functions.any';
+import { navigate } from '../../../mobile/navigation/components/conference/ConferenceNavigationContainerRef';
+import { screen } from '../../../mobile/navigation/routes';
+import { handleLobbyChatInitialized, openChat } from '../../actions.native';
+
+export interface IProps extends AbstractButtonProps {
+
+    /**
+     * True if message is a lobby chat message.
+     */
+    _isLobbyMessage: boolean;
+
+    /**
+     * True if the polls feature is disabled.
+     */
+    _isPollsDisabled?: boolean;
+
+    /**
+     * The participant object retrieved from Redux.
+     */
+    _participant?: IParticipant;
+
+    /**
+     * The ID of the participant that the message is to be sent.
+     */
+    participantID: string;
+
+    /**
+     * True if the button is rendered as a reply button.
+     */
+    reply: boolean;
+}
+
+/**
+ * Class to render a button that initiates the sending of a private message through chat.
+ */
+class PrivateMessageButton extends AbstractButton<IProps, any> {
+    override accessibilityLabel = 'toolbar.accessibilityLabel.privateMessage';
+    override icon = IconMessage;
+    override label = 'toolbar.privateMessage';
+    override toggledIcon = IconReply;
+
+    /**
+     * Handles clicking / pressing the button.
+     *
+     * @private
+     * @returns {void}
+     */
+    override _handleClick() {
+        if (this.props._isLobbyMessage) {
+            this.props.dispatch(handleLobbyChatInitialized(this.props.participantID));
+        }
+
+        this.props.dispatch(openChat(this.props._participant));
+
+        this.props._isPollsDisabled
+            ? navigate(screen.conference.chat, {
+                privateMessageRecipient: this.props._participant
+            })
+            : navigate(screen.conference.chatTabs.main, {
+                screen: screen.conference.chatTabs.tab.chat,
+                params: {
+                    privateMessageRecipient: this.props._participant
+                }
+            });
+    }
+
+    /**
+     * Helper function to be implemented by subclasses, which must return a
+     * {@code boolean} value indicating if this button is toggled or not.
+     *
+     * @protected
+     * @returns {boolean}
+     */
+    override _isToggled() {
+        return this.props.reply;
+    }
+
+}
+
+/**
+ * Maps part of the Redux store to the props of this component.
+ *
+ * @param {Object} state - The Redux state.
+ * @param {IProps} ownProps - The own props of the component.
+ * @returns {IProps}
+ */
+export function _mapStateToProps(state: IReduxState, ownProps: any) {
+    const enabled = getFeatureFlag(state, CHAT_ENABLED, true);
+    const { visible = enabled, isLobbyMessage, participantID } = ownProps;
+
+    return {
+        _isPollsDisabled: arePollsDisabled(state),
+        _participant: getParticipantById(state, participantID),
+        _isLobbyMessage: isLobbyMessage,
+        visible
+    };
+}
+
+export default translate(connect(_mapStateToProps)(PrivateMessageButton));

react/features/chat/components/native/SubtitleMessage.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { Text, View, ViewStyle } from 'react-native';
+import { useSelector } from 'react-redux';
+
+import { IReduxState } from '../../../app/types';
+import { getParticipantDisplayName } from '../../../base/participants/functions';
+import { ISubtitle } from '../../../subtitles/types';
+
+import { closedCaptionsStyles } from './styles';
+
+
+interface IProps extends ISubtitle {
+    showDisplayName: boolean;
+}
+
+export default function SubtitleMessage({ participantId, text, timestamp, interim, showDisplayName }: IProps) {
+    const participantName = useSelector((state: IReduxState) =>
+        getParticipantDisplayName(state, participantId));
+
+    const containerStyle: ViewStyle[] = [
+        closedCaptionsStyles.subtitleMessageContainer as ViewStyle
+    ];
+
+    if (interim) {
+        containerStyle.push(closedCaptionsStyles.subtitleMessageInterim as ViewStyle);
+    }
+
+    return (
+        <View style = { containerStyle }>
+            <View style = { closedCaptionsStyles.subtitleMessageContent as ViewStyle }>
+                {
+                    showDisplayName && (
+                        <Text style = { closedCaptionsStyles.subtitleMessageHeader }>
+                            { participantName }
+                        </Text>
+                    )
+                }
+                <Text style = { closedCaptionsStyles.subtitleMessageText }>{ text }</Text>
+                <Text style = { closedCaptionsStyles.subtitleMessageTimestamp }>
+                    { new Date(timestamp).toLocaleTimeString() }
+                </Text>
+            </View>
+        </View>
+    );
+}

react/features/chat/components/native/SubtitlesGroup.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { View, ViewStyle } from 'react-native';
+
+import Avatar from '../../../base/avatar/components/Avatar';
+import { ISubtitle } from '../../../subtitles/types';
+
+import SubtitleMessage from './SubtitleMessage';
+import { closedCaptionsStyles } from './styles';
+
+
+interface IProps {
+    messages: ISubtitle[];
+    senderId: string;
+}
+
+export function SubtitlesGroup({ messages, senderId }: IProps) {
+    if (!messages.length) {
+        return null;
+    }
+
+    return (
+        <View style = { closedCaptionsStyles.subtitlesGroupContainer as ViewStyle }>
+            <View style = { closedCaptionsStyles.subtitlesGroupAvatar as ViewStyle }>
+                <Avatar
+                    participantId = { senderId }
+                    size = { 32 } />
+            </View>
+            <View style = { closedCaptionsStyles.subtitlesGroupMessagesContainer as ViewStyle }>
+                {
+                    messages.map((message, index) => (
+                        <SubtitleMessage
+                            key = { `${message.timestamp}-${message.id}` }
+                            showDisplayName = { index === 0 }
+                            { ...message } />
+                    ))
+                }
+            </View>
+        </View>
+    );
+}

react/features/chat/components/native/SubtitlesMessagesContainer.tsx

@@ -0,0 +1,105 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { NativeScrollEvent, NativeSyntheticEvent, ScrollView, View, ViewStyle } from 'react-native';
+
+import Icon from '../../../base/icons/components/Icon';
+import { IconArrowDown } from '../../../base/icons/svg';
+import BaseTheme from '../../../base/ui/components/BaseTheme.native';
+import Button from '../../../base/ui/components/native/Button';
+import { BUTTON_TYPES } from '../../../base/ui/constants.native';
+import { ISubtitle } from '../../../subtitles/types';
+
+import { SubtitlesGroup } from './SubtitlesGroup';
+import { closedCaptionsStyles } from './styles';
+
+/**
+ * The threshold value used to determine if the user is at the bottom of the scroll view.
+ */
+const SCROLL_THRESHOLD = 50;
+
+interface IProps {
+    groups: Array<{
+        messages: ISubtitle[];
+        senderId: string;
+    }>;
+    messages: ISubtitle[];
+}
+
+export function SubtitlesMessagesContainer({ messages, groups }: IProps) {
+    const [ hasNewMessages, setHasNewMessages ] = useState(false);
+    const [ isScrolledToBottom, setIsScrolledToBottom ] = useState(true);
+    const scrollViewRef = useRef<ScrollView>(null);
+    const previousMessages = useRef(messages);
+
+    const scrollToBottom = useCallback((withAnimation: boolean) => {
+        scrollViewRef.current?.scrollToEnd({ animated: withAnimation });
+    }, []);
+
+    const handleNewMessagesClick = useCallback(() => {
+        scrollToBottom(true);
+    }, [ scrollToBottom ]);
+
+    const handleScroll = useCallback((event: NativeSyntheticEvent<NativeScrollEvent>) => {
+        const { contentOffset, contentSize, layoutMeasurement } = event.nativeEvent;
+        const isAtBottom = contentOffset.y + layoutMeasurement.height >= contentSize.height - SCROLL_THRESHOLD;
+
+        setIsScrolledToBottom(isAtBottom);
+        if (isAtBottom) {
+            setHasNewMessages(false);
+        }
+    }, []);
+
+    useEffect(() => {
+        scrollToBottom(false);
+    }, [ scrollToBottom ]);
+
+    useEffect(() => {
+        const newMessages = messages.filter(message => !previousMessages.current.includes(message));
+
+        if (newMessages.length > 0) {
+            if (isScrolledToBottom) {
+                scrollToBottom(false);
+            } else {
+                setHasNewMessages(true);
+            }
+        }
+
+        previousMessages.current = messages;
+    }, [ messages, scrollToBottom ]);
+
+    return (
+        <View style = { closedCaptionsStyles.subtitlesMessagesContainer as ViewStyle }>
+            <ScrollView
+                contentContainerStyle = { closedCaptionsStyles.subtitlesMessagesList as ViewStyle }
+                onScroll = { handleScroll }
+                ref = { scrollViewRef }
+                scrollEventThrottle = { 16 }>
+                {
+                    groups.map(group => (
+                        <SubtitlesGroup
+                            key = { `${group.senderId}-${group.messages[0]?.timestamp}` }
+                            messages = { group.messages }
+                            senderId = { group.senderId } />
+                    ))
+                }
+            </ScrollView>
+            {
+                !isScrolledToBottom && hasNewMessages && (
+                    <View style = { closedCaptionsStyles.newMessagesButtonContainer as ViewStyle }>
+                        <Button
+                            accessibilityLabel = 'chat.newMessages'
+                            // eslint-disable-next-line react/jsx-no-bind
+                            icon = { () => (
+                                <Icon
+                                    color = { BaseTheme.palette.icon04 }
+                                    size = { 20 }
+                                    src = { IconArrowDown } />
+                            ) }
+                            labelKey = 'chat.newMessages'
+                            onClick = { handleNewMessagesClick }
+                            type = { BUTTON_TYPES.SECONDARY } />
+                    </View>
+                )
+            }
+        </View>
+    );
+}

react/features/chat/components/native/styles.ts

@@ -0,0 +1,462 @@
+import { BoxModel } from '../../../base/styles/components/styles/BoxModel';
+import BaseTheme from '../../../base/ui/components/BaseTheme.native';
+
+const BUBBLE_RADIUS = 8;
+
+const recipientContainer = {
+    alignItems: 'center',
+    backgroundColor: BaseTheme.palette.support05,
+    borderRadius: BaseTheme.shape.borderRadius,
+    flexDirection: 'row',
+    height: 48,
+    marginBottom: BaseTheme.spacing[3],
+    marginHorizontal: BaseTheme.spacing[3],
+    padding: BaseTheme.spacing[2]
+};
+
+/**
+ * The styles of the feature chat.
+ *
+ * NOTE: Sizes and colors come from the 8x8 guidelines. This is the first
+ * component to receive this treating, if others happen to have similar, we
+ * need to extract the brand colors and sizes into a branding feature (planned
+ * for the future).
+ */
+export default {
+
+    /**
+     * Background of the chat screen.
+     */
+    backdrop: {
+        backgroundColor: BaseTheme.palette.ui10,
+        flex: 1
+    },
+
+    chatDisabled: {
+        padding: BaseTheme.spacing[2],
+        textAlign: 'center'
+    },
+
+    emptyComponentText: {
+        ...BaseTheme.typography.bodyLongBold,
+        color: BaseTheme.palette.text02,
+        textAlign: 'center'
+    },
+
+    lobbyMessageBubble: {
+        backgroundColor: BaseTheme.palette.support06
+    },
+
+    lobbyMsgNotice: {
+        color: BaseTheme.palette.text04,
+        fontSize: 11,
+        marginTop: 6
+    },
+
+    privateNotice: {
+        ...BaseTheme.palette.bodyShortRegular,
+        color: BaseTheme.palette.text02
+    },
+
+    privateMessageBubble: {
+        backgroundColor: BaseTheme.palette.support05
+    },
+
+    remoteMessageBubble: {
+        backgroundColor: BaseTheme.palette.ui02,
+        borderTopLeftRadius: 0
+    },
+
+    replyContainer: {
+        alignSelf: 'stretch',
+        justifyContent: 'center'
+    },
+
+    replyStyles: {
+        iconStyle: {
+            color: BaseTheme.palette.icon01,
+            fontSize: 22,
+            padding: BaseTheme.spacing[2]
+        },
+        underlayColor: 'transparent'
+    },
+
+    activeMatchMessageBubble: {
+        backgroundColor: BaseTheme.palette.warning02
+    },
+
+    chatMessageHighlight: {
+        backgroundColor: BaseTheme.palette.action02,
+        color: BaseTheme.palette.text01
+    },
+
+    chatMessageHighlightActive: {
+        backgroundColor: BaseTheme.palette.action01,
+        color: BaseTheme.palette.text01
+    },
+
+    searchBarContainer: {
+        alignItems: 'center',
+        backgroundColor: BaseTheme.palette.ui03,
+        borderColor: BaseTheme.palette.ui03,
+        borderRadius: BaseTheme.shape.borderRadius,
+        borderWidth: 2,
+        flexDirection: 'row',
+        height: 40,
+        marginBottom: BaseTheme.spacing[1],
+        marginHorizontal: BaseTheme.spacing[3],
+        marginTop: BaseTheme.spacing[2],
+        paddingHorizontal: BaseTheme.spacing[2]
+    },
+
+    searchBarCounter: {
+        ...BaseTheme.typography.labelRegular,
+        color: BaseTheme.palette.text03,
+        marginHorizontal: BaseTheme.spacing[1]
+    },
+
+    searchBarNavButton: {
+        alignItems: 'center',
+        alignSelf: 'stretch',
+        justifyContent: 'center',
+        padding: BaseTheme.spacing[1]
+    },
+
+    searchClearButton: {
+        alignItems: 'center',
+        height: 40,
+        justifyContent: 'center',
+        top: 0
+    },
+
+    searchInputContainer: {
+        flex: 1,
+        marginBottom: 0
+    },
+
+    searchInput: {
+        backgroundColor: 'transparent',
+        borderWidth: 0,
+        height: 40,
+        paddingHorizontal: 0
+    },
+
+    /**
+     * Wrapper View for the avatar.
+     */
+    avatarWrapper: {
+        marginRight: BaseTheme.spacing[2],
+        width: 32
+    },
+
+    chatLink: {
+        color: BaseTheme.palette.link01
+    },
+
+    chatMessage: {
+        ...BaseTheme.typography.bodyShortRegular,
+        color: BaseTheme.palette.text01
+    },
+
+    /**
+     * Wrapper for the details together, such as name, message and time.
+     */
+    detailsWrapper: {
+        alignItems: 'flex-start',
+        flex: 1,
+        flexDirection: 'column'
+    },
+
+    emptyComponentWrapper: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: BoxModel.padding,
+        maxWidth: '80%'
+    },
+
+    emptyListStyle: {
+        flex: 1
+    },
+
+    emptyListContentContainer: {
+        alignItems: 'center',
+        flex: 1,
+        justifyContent: 'center'
+    },
+
+    disabledSendWrapper: {
+        alignSelf: 'center',
+        flex: 0,
+        padding: BoxModel.padding,
+        paddingBottom: '8%',
+        paddingTop: '8%',
+        maxWidth: '80%'
+    },
+
+    /**
+     * A special padding to avoid issues on some devices (such as Android devices with custom suggestions bar).
+     */
+    extraBarPadding: {
+        paddingBottom: BaseTheme.spacing[6]
+    },
+
+    inputBar: {
+        alignSelf: 'stretch',
+        flexDirection: 'row',
+        width: '100%'
+    },
+
+    sendButton: {
+        marginRight: BaseTheme.spacing[4],
+        marginLeft: BaseTheme.spacing[2]
+    },
+
+    customInputContainer: {
+        marginLeft: BaseTheme.spacing[4],
+        flex: 1
+    },
+
+    messageBubble: {
+        alignItems: 'center',
+        borderRadius: BUBBLE_RADIUS,
+        flexDirection: 'row'
+    },
+
+    /**
+     * Wrapper View for the entire block.
+     */
+    messageWrapper: {
+        alignItems: 'flex-start',
+        flex: 1,
+        flexDirection: 'row',
+        marginHorizontal: 17,
+        marginVertical: 4
+    },
+
+    /**
+     * Style modifier for the {@code detailsWrapper} for own messages.
+     */
+    ownMessageDetailsWrapper: {
+        alignItems: 'flex-end'
+    },
+
+    replyWrapper: {
+        alignItems: 'center',
+        flexDirection: 'row'
+    },
+
+    /**
+     * Style modifier for system (error) messages.
+     */
+    systemMessageBubble: {
+        backgroundColor: 'rgb(247, 215, 215)'
+    },
+
+    /**
+     * Wrapper for the name and the message text.
+     */
+    textWrapper: {
+        alignItems: 'flex-start',
+        flexDirection: 'column',
+        padding: 9
+    },
+
+    /**
+     * Text node for the timestamp.
+     */
+    timeText: {
+        color: BaseTheme.palette.text03,
+        fontSize: 13
+    },
+
+    tabContainer: {
+        flexDirection: 'row',
+        justifyContent: 'center'
+    },
+
+    tabLeftButton: {
+        flex: 1,
+        borderTopLeftRadius: 0,
+        borderTopRightRadius: 0,
+        borderBottomLeftRadius: 0
+    },
+
+    tabRightButton: {
+        flex: 1,
+        borderTopLeftRadius: 0,
+        borderTopRightRadius: 0,
+        borderBottomRightRadius: 0
+    },
+
+    gifContainer: {
+        maxHeight: 150
+    },
+
+    gifImage: {
+        flexGrow: 1,
+        height: undefined,
+        resizeMode: 'contain',
+        width: 250
+    },
+
+    gifMedia: {
+        height: 150,
+        resizeMode: 'contain',
+        width: 250,
+    },
+
+    senderDisplayName: {
+        ...BaseTheme.typography.bodyShortBold,
+        color: BaseTheme.palette.text02
+    },
+
+    localMessageBubble: {
+        backgroundColor: BaseTheme.palette.ui04,
+        borderTopRightRadius: 0
+    },
+
+    lobbyMessageRecipientContainer: {
+        ...recipientContainer,
+        backgroundColor: BaseTheme.palette.support06
+    },
+
+    messageRecipientCancelIcon: {
+        color: BaseTheme.palette.icon01,
+        fontSize: 18
+    },
+
+    messageRecipientContainer: {
+        ...recipientContainer
+    },
+
+    messageRecipientText: {
+        ...BaseTheme.typography.bodyShortRegular,
+        color: BaseTheme.palette.text01,
+        flex: 1
+    }
+};
+
+/**
+ * Styles for the ClosedCaptions component.
+ */
+export const closedCaptionsStyles = {
+    container: {
+        backgroundColor: BaseTheme.palette.ui01,
+        flex: 1
+    },
+
+    emptyContentContainer: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center'
+    },
+
+    emptyContent: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        flex: 1,
+        padding: BaseTheme.spacing[3]
+    },
+
+    emptyStateText: {
+        ...BaseTheme.typography.bodyLongBold,
+        color: BaseTheme.palette.text02,
+        textAlign: 'center',
+        maxWidth: '80%'
+    },
+
+    transcribingContainer: {
+        flex: 1
+    },
+
+    languageButtonContainer: {
+        justifyContent: 'space-between',
+        flexDirection: 'row',
+        padding: BaseTheme.spacing[3]
+    },
+
+    languageButtonText: {
+        ...BaseTheme.typography.bodyShortRegularLarge,
+        color: BaseTheme.palette.text01,
+        marginHorizontal: BaseTheme.spacing[2]
+    },
+
+    languageButtonContent: {
+        flexDirection: 'row'
+    },
+
+    subtitleMessageContainer: {
+        backgroundColor: BaseTheme.palette.ui02,
+        borderRadius: BaseTheme.shape.borderRadius,
+        padding: BaseTheme.spacing[2],
+        maxWidth: '100%',
+        marginTop: BaseTheme.spacing[1]
+    },
+
+    subtitleMessageContent: {
+        maxWidth: '100%',
+        flex: 1
+    },
+
+    subtitleMessageHeader: {
+        ...BaseTheme.typography.labelBold,
+        color: BaseTheme.palette.text02,
+        marginBottom: BaseTheme.spacing[1],
+        maxWidth: 130
+    },
+
+    subtitleMessageText: {
+        ...BaseTheme.typography.bodyShortRegular,
+        color: BaseTheme.palette.text01
+    },
+
+    subtitleMessageTimestamp: {
+        ...BaseTheme.typography.labelRegular,
+        color: BaseTheme.palette.text03,
+        marginTop: BaseTheme.spacing[1]
+    },
+
+    subtitleMessageInterim: {
+        opacity: 0.7
+    },
+
+    subtitlesGroupContainer: {
+        flexDirection: 'row',
+        marginBottom: BaseTheme.spacing[3]
+    },
+
+    subtitlesGroupAvatar: {
+        marginBottom: BaseTheme.spacing[10],
+        marginRight: BaseTheme.spacing[2],
+        alignSelf: 'flex-start',
+        width: 32
+    },
+
+    subtitlesGroupMessagesContainer: {
+        flexDirection: 'column',
+        flex: 1,
+        maxWidth: '100%'
+    },
+
+    subtitlesMessagesContainer: {
+        flex: 1,
+        position: 'relative',
+        height: '100%'
+    },
+
+    subtitlesMessagesList: {
+        padding: BaseTheme.spacing[4]
+    },
+
+    newMessagesButtonContainer: {
+        position: 'absolute',
+        bottom: BaseTheme.spacing[3],
+        alignSelf: 'center'
+    },
+
+    messagesContainer: {
+        display: 'flex',
+        flex: 1,
+        overflow: 'hidden'
+    }
+};