fix: add theme for different group styles in message bubble container

Author: khushal87

package/src/components/Message/MessageSimple/MessageContent.tsx

@@ -88,6 +88,7 @@ export type MessageContentPropsWithContext<
     MessagesContextValue<StreamChatGenerics>,
     | 'additionalPressableProps'
     | 'Attachment'
+    | 'enableMessageGroupingByUser'
     | 'FileAttachmentGroup'
     | 'Gallery'
     | 'isAttachmentEqual'
@@ -102,10 +103,18 @@ export type MessageContentPropsWithContext<
      * Background color for the message content
      */
     backgroundColor?: ColorValue;
+    /**
+     * If the message is the very last message in the message list
+     */
+    isVeryLastMessage?: boolean;
     /**
      * If the message has no border radius
      */
     noBorder?: boolean;
+    /**
+     * If the message is grouped in a single or bottom container
+     */
+    messageGroupedSingleOrBottom?: boolean;
   };
 
 /**
@@ -121,13 +130,16 @@ const MessageContentWithContext = <
     alignment,
     Attachment,
     backgroundColor,
+    enableMessageGroupingByUser,
     FileAttachmentGroup,
     Gallery,
     groupStyles,
     isMessageAIGenerated,
     isMyMessage,
+    isVeryLastMessage,
     message,
     messageContentOrder,
+    messageGroupedSingleOrBottom = false,
     MessageError,
     noBorder,
     onLongPress,
@@ -159,6 +171,9 @@ const MessageContentWithContext = <
             ...container
           },
           containerInner,
+          lastMessageContainer,
+          messageGroupedSingleOrBottomContainer,
+          messageGroupedTopContainer,
           replyBorder,
           replyContainer,
           wrapper,
@@ -283,6 +298,11 @@ const MessageContentWithContext = <
             },
             noBorder ? { borderWidth: 0 } : {},
             containerInner,
+            messageGroupedSingleOrBottom
+              ? isVeryLastMessage && enableMessageGroupingByUser
+                ? lastMessageContainer
+                : messageGroupedSingleOrBottomContainer
+              : messageGroupedTopContainer,
           ]}
           testID='message-content-wrapper'
         >
@@ -520,6 +540,7 @@ export const MessageContent = <
   const {
     additionalPressableProps,
     Attachment,
+    enableMessageGroupingByUser,
     FileAttachmentGroup,
     Gallery,
     isAttachmentEqual,
@@ -536,6 +557,7 @@ export const MessageContent = <
         additionalPressableProps,
         alignment,
         Attachment,
+        enableMessageGroupingByUser,
         FileAttachmentGroup,
         Gallery,
         goToMessage,

package/src/components/Message/MessageSimple/MessageSimple.tsx

@@ -278,6 +278,8 @@ const MessageSimpleWithContext = <
       <View style={[styles.contentWrapper, contentWrapper]}>
         <MessageContent
           backgroundColor={backgroundColor}
+          isVeryLastMessage={isVeryLastMessage}
+          messageGroupedSingleOrBottom={messageGroupedSingleOrBottom}
           noBorder={noBorder}
           setMessageContentWidth={setMessageContentWidth}
         />
@@ -293,6 +295,8 @@ const MessageSimpleWithContext = <
       ReactionListTop,
       backgroundColor,
       contentWrapper,
+      isVeryLastMessage,
+      messageGroupedSingleOrBottom,
       noBorder,
     ],
   );
@@ -322,6 +326,10 @@ const MessageSimpleWithContext = <
     ],
   );
 
+  if (messageGroupedSingleOrBottom) {
+    console.log(message.text);
+  }
+
   return (
     <View
       style={[

package/src/components/Thread/__tests__/__snapshots__/Thread.test.js.snap

@@ -602,6 +602,7 @@ exports[`Thread should match thread snapshot 1`] = `
                                         },
                                         {},
                                         {},
+                                        {},
                                       ]
                                     }
                                     testID="message-content-wrapper"
@@ -1112,6 +1113,7 @@ exports[`Thread should match thread snapshot 1`] = `
                                         },
                                         {},
                                         {},
+                                        {},
                                       ]
                                     }
                                     testID="message-content-wrapper"
@@ -1660,6 +1662,7 @@ exports[`Thread should match thread snapshot 1`] = `
                                         },
                                         {},
                                         {},
+                                        {},
                                       ]
                                     }
                                     testID="message-content-wrapper"
@@ -2163,6 +2166,7 @@ exports[`Thread should match thread snapshot 1`] = `
                                           },
                                           {},
                                           {},
+                                          {},
                                         ]
                                       }
                                       testID="message-content-wrapper"

package/src/contexts/themeContext/utils/theme.ts

@@ -539,11 +539,14 @@ export type Theme = {
       errorIcon: IconProps;
       errorIconContainer: ViewStyle;
       eyeIcon: IconProps;
+      lastMessageContainer: ViewStyle;
       /**
        * Available options for styling text:
        * https://github.com/andangrd/react-native-markdown-package/blob/main/styles.js
        */
       markdown: MarkdownStyle;
+      messageGroupedSingleOrBottomContainer: ViewStyle;
+      messageGroupedTopContainer: ViewStyle;
       messageUser: TextStyle;
       metaContainer: ViewStyle;
       metaText: TextStyle;
@@ -1325,7 +1328,10 @@ export const defaultTheme: Theme = {
         height: 16,
         width: 16,
       },
+      lastMessageContainer: {},
       markdown: {},
+      messageGroupedSingleOrBottomContainer: {},
+      messageGroupedTopContainer: {},
       messageUser: {
         fontSize: 12,
         fontWeight: '700',