ref(chat): on native, show messages as grouped by sender

react/features/chat/components/AbstractChatMessage.js

@@ -19,12 +19,24 @@ export type Props = {
      */
     message: Object,
 
+    /**
+     * Whether or not the avatar image of the participant which sent the message
+     * should be displayed.
+     */
+    showAvatar: boolean,
+
     /**
      * Whether or not the name of the participant which sent the message should
      * be displayed.
      */
     showDisplayName: boolean,
 
+    /**
+     * Whether or not the time at which the message was sent should be
+     * displayed.
+     */
+    showTimestamp: boolean,
+
     /**
      * Invoked to receive translated strings.
      */
@@ -36,7 +48,9 @@ export type Props = {
  */
 export default class AbstractChatMessage<P: Props> extends PureComponent<P> {
     static defaultProps = {
-        showDisplayName: true
+        showAvatar: false,
+        showDisplayName: false,
+        showTimestamp: false
     };
 }
 

react/features/chat/components/AbstractMessageContainer.js

@@ -39,7 +39,7 @@ export default class AbstractMessageContainer<P: Props> extends PureComponent<P>
             if (message.id === currentGroupParticipantId) {
                 currentGrouping.push(message);
             } else {
-                groups.push(currentGrouping);
+                currentGrouping.length && groups.push(currentGrouping);
 
                 currentGrouping = [ message ];
                 currentGroupParticipantId = message.id;

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

@@ -13,11 +13,6 @@ import AbstractChatMessage, {
 } from '../AbstractChatMessage';
 import styles from './styles';
 
-/**
- * Size of the rendered avatar in the message.
- */
-const AVATAR_SIZE = 32;
-
 /**
  * Formatter string to display the message timestamp.
  */
@@ -34,8 +29,6 @@ class ChatMessage extends AbstractChatMessage<Props> {
      */
     render() {
         const { message } = this.props;
-        const timeStamp = getLocalizedDateFormatter(
-            new Date(message.timestamp)).format(TIMESTAMP_FORMAT);
         const localMessage = message.messageType === 'local';
 
         // Style arrays that need to be updated in various scenarios, such as
@@ -60,18 +53,12 @@ class ChatMessage extends AbstractChatMessage<Props> {
 
         return (
             <View style = { styles.messageWrapper } >
-                {
+                { this._renderAvatar() }
-
-                    // Avatar is only rendered for remote messages.
-                    !localMessage && this._renderAvatar()
-                }
                 <View style = { detailsWrapperStyle }>
                     <View style = { textWrapperStyle } >
                         {
-
+                            this.props.showDisplayName
-                            // Display name is only rendered for remote
+                                && this._renderDisplayName()
-                            // messages.
-                            !localMessage && this._renderDisplayName()
                         }
                         <Text style = { styles.messageText }>
                             { message.messageType === 'error'
@@ -82,9 +69,7 @@ class ChatMessage extends AbstractChatMessage<Props> {
                                 : message.message }
                         </Text>
                     </View>
-                    <Text style = { styles.timeText }>
+                    { this.props.showTimestamp && this._renderTimestamp() }
-                        { timeStamp }
-                    </Text>
                 </View>
             </View>
         );
@@ -96,13 +81,12 @@ class ChatMessage extends AbstractChatMessage<Props> {
      * @returns {React$Element<*>}
      */
     _renderAvatar() {
-        const { _avatarURL } = this.props;
-
         return (
             <View style = { styles.avatarWrapper }>
-                <Avatar
+                { this.props.showAvatar && <Avatar
-                    size = { AVATAR_SIZE }
+                    size = { styles.avatarWrapper.width }
-                    uri = { _avatarURL } />
+                    uri = { this.props._avatarURL } />
+                }
             </View>
         );
     }
@@ -113,11 +97,26 @@ class ChatMessage extends AbstractChatMessage<Props> {
      * @returns {React$Element<*>}
      */
     _renderDisplayName() {
-        const { message } = this.props;
-
         return (
             <Text style = { styles.displayName }>
-                { message.displayName }
+                { this.props.message.displayName }
+            </Text>
+        );
+    }
+
+    /**
+     * Renders the time at which the message was sent.
+     *
+     * @returns {React$Element<*>}
+     */
+    _renderTimestamp() {
+        return (
+            <Text style = { styles.timeText }>
+                {
+                    getLocalizedDateFormatter(
+                        new Date(this.props.message.timestamp)
+                    ).format(TIMESTAMP_FORMAT)
+                }
             </Text>
         );
     }

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

@@ -68,9 +68,19 @@ export default class ChatMessageGroup extends Component<Props> {
      * @param {Object} message - The chat message to render.
      * @returns {React$Element<*>}
      */
-    _renderMessage({ item: message }) {
+    _renderMessage({ index, item: message }) {
         return (
-            <ChatMessage message = { message } />
+            <ChatMessage
+                message = { message }
+                showAvatar = {
+                    this.props.messages[0].messageType !== 'local'
+                        && index === this.props.messages.length - 1
+                }
+                showDisplayName = {
+                    this.props.messages[0].messageType === 'remote'
+                        && index === this.props.messages.length - 1
+                }
+                showTimestamp = { index === 0 } />
         );
     }
 }

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

@@ -16,7 +16,8 @@ export default {
      * Wrapper View for the avatar.
      */
     avatarWrapper: {
-        marginRight: 8
+        marginRight: 8,
+        width: 32
     },
 
     /**