fix(Chat): Fix private message reply button not working

react/features/chat/components/index.native.js

@@ -1,4 +1,3 @@
 // @flow
 
 export * from './native';
-export { default as PrivateMessageButton } from './PrivateMessageButton';

react/features/chat/components/index.web.js

@@ -1,5 +1,3 @@
 // @flow
 
 export * from './web';
-
-export { default as PrivateMessageButton } from './PrivateMessageButton';

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

@@ -12,8 +12,8 @@ import { type StyleType } from '../../../base/styles';
 import { MESSAGE_TYPE_ERROR, MESSAGE_TYPE_LOCAL } from '../../constants';
 import { replaceNonUnicodeEmojis } from '../../functions';
 import AbstractChatMessage, { type Props as AbstractProps } from '../AbstractChatMessage';
-import PrivateMessageButton from '../PrivateMessageButton';
 
+import PrivateMessageButton from './PrivateMessageButton';
 import styles from './styles';
 
 type Props = AbstractProps & {

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

@@ -1,13 +1,13 @@
 // @flow
 
-import { CHAT_ENABLED, getFeatureFlag } from '../../base/flags';
+import { CHAT_ENABLED, getFeatureFlag } from '../../../base/flags';
-import { translate } from '../../base/i18n';
+import { translate } from '../../../base/i18n';
-import { IconMessage, IconReply } from '../../base/icons';
+import { IconMessage, IconReply } from '../../../base/icons';
-import { getParticipantById } from '../../base/participants';
+import { getParticipantById } from '../../../base/participants';
-import { connect } from '../../base/redux';
+import { connect } from '../../../base/redux';
-import { AbstractButton, type AbstractButtonProps } from '../../base/toolbox/components';
+import { AbstractButton, type AbstractButtonProps } from '../../../base/toolbox/components';
-import { navigate } from '../../conference/components/native/ConferenceNavigationContainerRef';
+import { navigate } from '../../../conference/components/native/ConferenceNavigationContainerRef';
-import { screen } from '../../conference/components/native/routes';
+import { screen } from '../../../conference/components/native/routes';
 
 export type Props = AbstractButtonProps & {
 
@@ -26,11 +26,6 @@ export type Props = AbstractButtonProps & {
      */
     t: Function,
 
-    /**
-     * The Redux dispatch function.
-     */
-    dispatch: Function,
-
     /**
      * True if the polls feature is disabled.
      */

react/features/chat/components/web/ChatMessage.js

@@ -3,14 +3,12 @@
 import React from 'react';
 import { toArray } from 'react-emoji-render';
 
-
 import { translate } from '../../../base/i18n';
 import { Linkify } from '../../../base/react';
 import { MESSAGE_TYPE_LOCAL } from '../../constants';
-import AbstractChatMessage, {
+import AbstractChatMessage, { type Props } from '../AbstractChatMessage';
-    type Props
+
-} from '../AbstractChatMessage';
+import PrivateMessageButton from './PrivateMessageButton';
-import PrivateMessageButton from '../PrivateMessageButton';
 
 /**
  * Renders a single chat message.

react/features/chat/components/web/PrivateMessageButton.js

@@ -0,0 +1,90 @@
+// @flow
+
+import { CHAT_ENABLED, getFeatureFlag } from '../../../base/flags';
+import { translate } from '../../../base/i18n';
+import { IconMessage, IconReply } from '../../../base/icons';
+import { getParticipantById } from '../../../base/participants';
+import { connect } from '../../../base/redux';
+import { AbstractButton, type AbstractButtonProps } from '../../../base/toolbox/components';
+import { openChat } from '../../actions';
+
+export type Props = AbstractButtonProps & {
+
+    /**
+     * 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,
+
+    /**
+     * Function to be used to translate i18n labels.
+     */
+    t: Function,
+
+    /**
+     * The Redux dispatch function.
+     */
+    dispatch: Function,
+
+    /**
+     * The participant object retrieved from Redux.
+     */
+    _participant: Object,
+};
+
+/**
+ * Class to render a button that initiates the sending of a private message through chet.
+ */
+class PrivateMessageButton extends AbstractButton<Props, any> {
+    accessibilityLabel = 'toolbar.accessibilityLabel.privateMessage';
+    icon = IconMessage;
+    label = 'toolbar.privateMessage';
+    toggledIcon = IconReply;
+
+    /**
+     * Handles clicking / pressing the button, and kicks the participant.
+     *
+     * @private
+     * @returns {void}
+     */
+    _handleClick() {
+        const { _participant, dispatch } = this.props;
+
+        dispatch(openChat(_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}
+     */
+    _isToggled() {
+        return this.props.reply;
+    }
+
+}
+
+/**
+ * Maps part of the Redux store to the props of this component.
+ *
+ * @param {Object} state - The Redux state.
+ * @param {Props} ownProps - The own props of the component.
+ * @returns {Props}
+ */
+export function _mapStateToProps(state: Object, ownProps: Props): $Shape<Props> {
+    const enabled = getFeatureFlag(state, CHAT_ENABLED, true);
+    const { visible = enabled } = ownProps;
+
+    return {
+        _participant: getParticipantById(state, ownProps.participantID),
+        visible
+    };
+}
+
+export default translate(connect(_mapStateToProps)(PrivateMessageButton));

react/features/video-menu/components/web/PrivateMessageMenuButton.js

@@ -9,7 +9,7 @@ import { openChat } from '../../../chat/';
 import {
     _mapStateToProps as _abstractMapStateToProps,
     type Props as AbstractProps
-} from '../../../chat/components/PrivateMessageButton';
+} from '../../../chat/components/web/PrivateMessageButton';
 import { isButtonEnabled } from '../../../toolbox/functions.web';
 
 import VideoMenuButton from './VideoMenuButton';