[APP-7066] - consider local send status messages as current users'

src/index.ts

@@ -23,3 +23,5 @@ export { default as useSendbirdStateContext } from './hooks/useSendbirdStateCont
 
 // Public enum included in AppProps
 export { TypingIndicatorType } from './types';
+
+export { getIsByMe } from "./utils/messages";

src/modules/GroupChannel/components/MessageList/getMessagePartsInfo.ts

@@ -30,11 +30,12 @@ export const getMessagePartsInfo = ({
   currentMessage = null,
   currentChannel = null,
   replyType = '',
-}: GetMessagePartsInfoProps): OutPuts => {
+  currentUserId 
+}: GetMessagePartsInfoProps & { currentUserId?: string }): OutPuts => {
   const previousMessage = allMessages[currentIndex - 1];
   const nextMessage = allMessages[currentIndex + 1];
   const [chainTop, chainBottom] = isMessageGroupingEnabled
-    ? compareMessagesForGrouping(previousMessage, currentMessage, nextMessage, currentChannel, (replyType as ReplyType))
+    ? compareMessagesForGrouping(previousMessage, currentMessage, nextMessage, currentChannel, (replyType as ReplyType), currentUserId)
     : [false, false];
   const previousMessageCreatedAt = previousMessage?.createdAt;
   const currentCreatedAt = currentMessage.createdAt;

src/modules/GroupChannel/components/MessageList/index.tsx

@@ -266,6 +266,7 @@ export const MessageList = ({
                       currentIndex: idx,
                       currentMessage: message as CoreMessageType,
                       currentChannel,
+                      currentUserId: store.config.userId
                     });
                     const isOutgoingMessage = isSendableMessage(message) && message.sender.userId === store.config.userId;
                     return (

src/ui/MessageContent/index.tsx

@@ -46,6 +46,7 @@ import MessageFeedbackModal from '../MessageFeedbackModal';
 import { SbFeedbackStatus } from './types';
 import MessageFeedbackFailedModal from '../MessageFeedbackFailedModal';
 import { MobileBottomSheetProps } from '../MobileMenu/types';
+import { getIsByMe } from '../../utils/messages';
 
 export interface MessageContentProps {
   className?: string | Array<string>;
@@ -162,9 +163,8 @@ export default function MessageContent(props: MessageContentProps): ReactElement
 
   const { stringSet } = useContext(LocalizationContext);
 
-  const isByMe = (userId === (message as SendableMessageType)?.sender?.userId)
-    || ((message as SendableMessageType)?.sendingStatus === 'pending')
-    || ((message as SendableMessageType)?.sendingStatus === 'failed');
+
+  const isByMe = getIsByMe(userId, message);
   const isByMeClassName = isByMe ? 'outgoing' : 'incoming';
   const chainTopClassName = chainTop ? 'chain-top' : '';
   const isReactionEnabledInChannel = isReactionEnabled && !channel?.isEphemeral;

src/utils/messages.ts

@@ -4,7 +4,7 @@ import format from 'date-fns/format';
 
 import { ReplyType } from '../types';
 import type { CoreMessageType } from '.';
-import { isReadMessage } from '.';
+import { isReadMessage, isSendableMessage } from '.';
 
 /**
  * exported, should be backward compatible
@@ -16,6 +16,7 @@ export const compareMessagesForGrouping = (
   nextMessage: CoreMessageType,
   currentChannel?: GroupChannel,
   replyType?: ReplyType,
+  currentUserId?: string,
 ) => {
   if (!currentChannel || (currentChannel as GroupChannel).channelType !== 'group') {
     return [
@@ -30,18 +31,43 @@ export const compareMessagesForGrouping = (
   const sendingStatus = (currMessage as UserMessage)?.sendingStatus || '';
   const isAcceptable = sendingStatus !== 'failed';
   return [
-    isSameGroup(prevMessage, currMessage, currentChannel) && isAcceptable,
-    isSameGroup(currMessage, nextMessage, currentChannel) && isAcceptable,
+    isSameGroup(prevMessage, currMessage, currentUserId) && isAcceptable,
+    isSameGroup(currMessage, nextMessage, currentUserId) && isAcceptable,
   ];
 };
 
 export const getMessageCreatedAt = (message: BaseMessage) => format(message.createdAt, 'p');
 
+// Group current user's messages together. The current user's messages
+// may not have their userId on it, and if not, we assume that messages w/ a
+// local send status is the current user's as well.
+// Given the above is true, group by timestamp
+export const areBothFromMyUserAndInSameGroup = (
+  message: CoreMessageType,
+  comparingMessage: CoreMessageType,
+  currentUserId?: string
+) => {
+  if (!currentUserId || !message.createdAt || !comparingMessage.createdAt) return false;
+
+  const isFirstMessageByMe = getIsByMe(currentUserId, message);
+  const isSecondMessageByMe = getIsByMe(currentUserId, comparingMessage);
+
+  if (isFirstMessageByMe && isSecondMessageByMe) {
+    return getMessageCreatedAt(message) === getMessageCreatedAt(comparingMessage);
+  }
+
+  return false;
+}
+
 export const isSameGroup = (
   message: CoreMessageType,
   comparingMessage: CoreMessageType,
-  currentChannel?: GroupChannel,
+  currentUserId?: string
 ) => {
+  if (areBothFromMyUserAndInSameGroup(message, comparingMessage, currentUserId)) {
+    return true;
+  }
+
   if (
     !(
       message
@@ -61,23 +87,20 @@ export const isSameGroup = (
     return false;
   }
 
-  // group pending messages with any message type other than failed
-  // Given the above is true, group by timestamp and sender id
-  if ([message.sendingStatus, comparingMessage.sendingStatus].includes(SendingStatus.PENDING) &&
-      ![message.sendingStatus, comparingMessage.sendingStatus].includes(SendingStatus.FAILED)) {
-    return (
-      message?.sender?.userId === comparingMessage?.sender?.userId
-      && getMessageCreatedAt(message) === getMessageCreatedAt(comparingMessage)
-    );
-  }
-
   return (
     message?.sendingStatus === comparingMessage?.sendingStatus
     && message?.sender?.userId === comparingMessage?.sender?.userId
     && getMessageCreatedAt(message) === getMessageCreatedAt(comparingMessage)
   );
 };
 
+export const getIsByMe = (userId: string, message: BaseMessage) => { 
+  if (!isSendableMessage(message) || !userId) return false;
+  const messageIsLocalType = [SendingStatus.FAILED, SendingStatus.PENDING].includes(message.sendingStatus);
+
+  return userId === message.sender.userId || messageIsLocalType;
+}
+
 export default {
   compareMessagesForGrouping,
   getMessageCreatedAt,