feat: added support for prop 'getMessagesGroupStyles' on Channel (#1749)

* feat: added support for prop 'getMessagesGroupStyles' on Channel

* style: align markdown table

* docs: added prop doc for getMessagesGroupStyles

* refactor: fix lint issue

* docs: lint fixes

Co-authored-by: Mads Røskar <[email protected]>

Author: vishalnarkhede

docusaurus/docs/reactnative/common-content/core-components/channel/props/get_messages_group_styles.mdx

@@ -0,0 +1,13 @@
+Messages with message list are grouped with some smart logic e.g., avatar of sender only appears for last message of the group.
+Messages are grouped together on UI if they are sent back to back by a user within certain timeframe (this timeframe can be controlled by
+a prop `MaxTimeBetweenGroupedMessages` on Channel component). `getMessagesGroupStyles` prop can be used to override the logic
+which determines the position of particular message within a group of messages e.g., top, bottom, middle, single etc. And depending
+on value, certain UI elements are hidden or shown on UI e.g, message timestamp, user avatar etc.
+You can find the default logic in [`getGroupStyles`](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/components/MessageList/utils/getGroupStyles.ts) function.
+
+Group styles returned by this function can be accessed by `groupStyles` value from [`MessageContext`](../../../../contexts/message_context.mdx)
+within custom components.
+
+| Type     |
+| -------- |
+| function |

docusaurus/docs/reactnative/core-components/channel.mdx

@@ -48,6 +48,7 @@ import FlatList from '../common-content/core-components/channel/props/flat_list.
 import ForceAlignMessages from '../common-content/core-components/channel/props/force_align_messages.mdx';
 import FormatDate from '../common-content/core-components/channel/props/format_date.mdx';
 import Gallery from '../common-content/core-components/channel/props/gallery.mdx';
+import GetMessagesGroupStyles from '../common-content/core-components/channel/props/get_messages_group_styles.mdx';
 import Giphy from '../common-content/core-components/channel/props/giphy.mdx';
 import GiphyEnabled from '../common-content/core-components/channel/props/giphy_enabled.mdx';
 import GiphyVersion from '../common-content/core-components/channel/props/giphy_version.mdx';
@@ -431,6 +432,10 @@ const doUpdateMessageRequest = (channelId, messageObject) => {
 
 <FormatDate />
 
+### getMessagesGroupStyles
+
+<GetMessagesGroupStyles />
+
 ### giphyEnabled
 
 <GiphyEnabled />

examples/SampleApp/src/components/UnreadCountBadge.tsx

@@ -1,6 +1,5 @@
 import React, { useEffect, useState } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
-import { isOwnUser } from 'stream-chat';
 import { useTheme } from 'stream-chat-react-native';
 
 import { useAppContext } from '../context/AppContext';

package/src/components/Channel/Channel.tsx

@@ -239,6 +239,7 @@ export type ChannelPropsWithContext<
       | 'forceAlignMessages'
       | 'formatDate'
       | 'Gallery'
+      | 'getMessagesGroupStyles'
       | 'Giphy'
       | 'giphyVersion'
       | 'handleBlock'
@@ -430,6 +431,7 @@ const ChannelWithContext = <
     forceAlignMessages,
     formatDate,
     Gallery = GalleryDefault,
+    getMessagesGroupStyles,
     Giphy = GiphyDefault,
     giphyEnabled,
     giphyVersion = 'fixed_height',
@@ -1662,6 +1664,7 @@ const ChannelWithContext = <
     forceAlignMessages,
     formatDate,
     Gallery,
+    getMessagesGroupStyles,
     Giphy,
     giphyVersion,
     handleBlock,

package/src/components/Channel/hooks/useCreateMessagesContext.ts

@@ -27,6 +27,7 @@ export const useCreateMessagesContext = <
   forceAlignMessages,
   formatDate,
   Gallery,
+  getMessagesGroupStyles,
   Giphy,
   giphyVersion,
   handleBlock,
@@ -117,6 +118,7 @@ export const useCreateMessagesContext = <
       forceAlignMessages,
       formatDate,
       Gallery,
+      getMessagesGroupStyles,
       Giphy,
       giphyVersion,
       handleBlock,

package/src/components/MessageList/hooks/useMessageList.ts

@@ -23,7 +23,7 @@ export type UseMessageListParams = {
   threadList?: boolean;
 };
 
-export type GroupType = 'bottom' | 'middle' | 'single' | 'top';
+export type GroupType = string;
 
 export type MessagesWithStylesReadByAndDateSeparator<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
@@ -56,7 +56,8 @@ export const useMessageList = <
   const { client } = useChatContext<StreamChatGenerics>();
   const { hideDateSeparators, maxTimeBetweenGroupedMessages, read } =
     useChannelContext<StreamChatGenerics>();
-  const { deletedMessagesVisibilityType } = useMessagesContext<StreamChatGenerics>();
+  const { deletedMessagesVisibilityType, getMessagesGroupStyles = getGroupStyles } =
+    useMessagesContext<StreamChatGenerics>();
   const { messages } = usePaginatedMessageListContext<StreamChatGenerics>();
   const { threadMessages } = useThreadContext<StreamChatGenerics>();
 
@@ -72,7 +73,7 @@ export const useMessageList = <
     userId: client.userID,
   });
 
-  const messageGroupStyles = getGroupStyles<StreamChatGenerics>({
+  const messageGroupStyles = getMessagesGroupStyles<StreamChatGenerics>({
     dateSeparators,
     hideDateSeparators,
     maxTimeBetweenGroupedMessages,

package/src/contexts/messagesContext/MessagesContext.tsx

@@ -42,6 +42,7 @@ import type { InlineDateSeparatorProps } from '../../components/MessageList/Inli
 import type { MessageListProps } from '../../components/MessageList/MessageList';
 import type { MessageSystemProps } from '../../components/MessageList/MessageSystem';
 import type { ScrollToBottomButtonProps } from '../../components/MessageList/ScrollToBottomButton';
+import type { getGroupStyles } from '../../components/MessageList/utils/getGroupStyles';
 import type { MessageActionType } from '../../components/MessageOverlay/MessageActionListItem';
 import type { OverlayReactionListProps } from '../../components/MessageOverlay/OverlayReactionList';
 import type { ReplyProps } from '../../components/Reply/Reply';
@@ -296,6 +297,7 @@ export type MessagesContextValue<
    * Optional function to custom format the message date
    */
   formatDate?: (date: TDateTimeParserInput) => string;
+  getMessagesGroupStyles?: typeof getGroupStyles;
   handleBlock?: (message: MessageType<StreamChatGenerics>) => Promise<void>;
   /** Handler to access when a copy message action is invoked */
   handleCopy?: (message: MessageType<StreamChatGenerics>) => Promise<void>;