Merge pull request #50 from sendbird/feat/AC-438/group-short-term-mes…

…sage

feat: Merge sender profile when message is sent in short span of time

package.json

@@ -28,7 +28,7 @@
   },
   "dependencies": {
     "@sendbird/chat": "^4.9.8",
-    "@sendbird/uikit-react": "^3.6.7",
+    "@sendbird/uikit-react": "^3.6.8",
     "dompurify": "^3.0.4",
     "polished": "^2.3.1",
     "react-code-blocks": "^0.1.0",

src/components/BotMessageWithBodyInput.tsx

@@ -55,36 +55,59 @@ type Props = {
   botUser: User;
   message: UserMessage;
   bodyComponent: ReactNode;
+  chainTop: boolean;
+  chainBottom: boolean;
   messageCount?: number;
   zIndex?: number;
   bodyStyle?: object;
 };
 
 const ImageContainer = styled.div``;
 
+const EmptyImageContainer = styled.div`
+  width: 30px;
+`;
+
 export default function BotMessageWithBodyInput(props: Props) {
-  const { botUser, message, bodyComponent, messageCount, zIndex, bodyStyle } =
-    props;
+  const {
+    botUser,
+    message,
+    bodyComponent,
+    messageCount,
+    zIndex,
+    bodyStyle,
+    chainTop,
+    chainBottom,
+  } = props;
 
+  const nonChainedMessage = chainTop == null && chainBottom == null;
+  const displayProfileImage = nonChainedMessage || chainBottom;
+  const displaySender = nonChainedMessage || chainTop;
   return (
     <Root style={{ zIndex: messageCount === 1 && zIndex ? zIndex : 0 }}>
-      <ImageContainer>
-        <img
-          src={botMessageImage}
-          alt="botProfileImage"
-          style={{
-            height: '28px',
-          }}
-        />
-      </ImageContainer>
+      {displayProfileImage ? (
+        <ImageContainer>
+          <img
+            src={botMessageImage}
+            alt="botProfileImage"
+            style={{
+              height: '28px',
+            }}
+          />
+        </ImageContainer>
+      ) : (
+        <EmptyImageContainer />
+      )}
       <BodyContainer style={bodyStyle ?? {}}>
-        <Sender
-          style={{
-            textAlign: 'left',
-          }}
-        >
-          {botUser.nickname}
-        </Sender>
+        {displaySender && (
+          <Sender
+            style={{
+              textAlign: 'left',
+            }}
+          >
+            {botUser.nickname}
+          </Sender>
+        )}
         {bodyComponent}
         <ReactionContainer message={message} />
       </BodyContainer>

src/components/CustomChannelComponent.tsx

@@ -17,6 +17,7 @@ import DynamicRepliesPanel from './DynamicRepliesPanel';
 import { useConstantState } from '../context/ConstantContext';
 import { useScrollOnStreaming } from '../hooks/useScrollOnStreaming';
 import { isSpecialMessage, scrollUtil } from '../utils';
+import { groupMessagesByShortSpanTime } from '../utils/messages';
 
 const Root = styled.div<{ hidePlaceholder: boolean; height: string }>`
   height: ${({ height }) => height};
@@ -120,6 +121,11 @@ export function CustomChannelComponent(props: CustomChannelComponentProps) {
     }
   }, [lastMessage?.messageId]);
 
+  const grouppedMessages = useMemo(
+    () => groupMessagesByShortSpanTime(allMessages),
+    [allMessages.length]
+  );
+
   return (
     <Root hidePlaceholder={startingPagePlaceHolder} height={'100%'}>
       <ChannelUI
@@ -149,13 +155,18 @@ export function CustomChannelComponent(props: CustomChannelComponentProps) {
           );
         }}
         renderMessage={({ message }: { message: EveryMessage }) => {
+          const grouppedMessage = grouppedMessages.find(
+            (m) => m.messageId == message.messageId
+          );
           return (
             <>
               <CustomMessage
                 message={message}
                 activeSpinnerId={activeSpinnerId}
                 botUser={botUser}
                 lastMessageRef={lastMessageRef}
+                chainTop={grouppedMessage?.chaintop}
+                chainBottom={grouppedMessage?.chainBottom}
               />
               {message.messageId === lastMessage.messageId &&
                 dynamicReplyOptions.length > 0 && (

src/components/CustomMessage.tsx

@@ -26,10 +26,19 @@ type Props = {
   activeSpinnerId: number;
   botUser: User;
   lastMessageRef: React.RefObject<HTMLDivElement>;
+  chainTop?: boolean;
+  chainBottom?: boolean;
 };
 
 export default function CustomMessage(props: Props) {
-  const { message, activeSpinnerId, botUser, lastMessageRef } = props;
+  const {
+    message,
+    activeSpinnerId,
+    botUser,
+    lastMessageRef,
+    chainTop,
+    chainBottom,
+  } = props;
   const { replacementTextList } = useConstantState();
 
   const { allMessages } = useChannelContext();
@@ -63,6 +72,8 @@ export default function CustomMessage(props: Props) {
           messageCount={allMessages.length}
           zIndex={30}
           bodyStyle={{ maxWidth: '255px', width: 'calc(100% - 98px)' }}
+          chainTop={chainTop}
+          chainBottom={chainBottom}
         />
       </div>
     );
@@ -81,6 +92,8 @@ export default function CustomMessage(props: Props) {
           }
           bodyStyle={{ maxWidth: '320px', width: 'calc(100% - 98px)' }}
           messageCount={allMessages.length}
+          chainTop={chainTop}
+          chainBottom={chainBottom}
         />
       );
     }
@@ -110,6 +123,8 @@ export default function CustomMessage(props: Props) {
             tokens={tokens}
           />
         }
+        chainTop={chainTop}
+        chainBottom={chainBottom}
       />
     </div>
   );

src/utils.ts → src/utils/index.ts

@@ -1,4 +1,4 @@
-import { LOCAL_MESSAGE_CUSTOM_TYPE } from './const';
+import { LOCAL_MESSAGE_CUSTOM_TYPE } from '../const';
 
 export function uuid() {
   let d = new Date().getTime();

src/utils/messages.ts

@@ -0,0 +1,50 @@
+// eslint-disable-next-line import/no-unresolved
+import { EveryMessage } from 'SendbirdUIKitGlobal';
+
+const TIME_SPAN = 3 * 60 * 1000;
+/**
+ * Function to group messages based on their creation time
+ *
+ * @param {EveryMessage[]} messages - Array of messages to group
+ * @returns {EveryMessage[]} - Array of messages grouped by creation time
+ */
+export function groupMessagesByShortSpanTime(
+  messages: EveryMessage[]
+): EveryMessage[] {
+  // Create an object to group messages based on their creation time
+  const groupedMessagesByCreatedAt = messages.reduce((groups, message) => {
+    const { createdAt } = message;
+    // Get the key of the previous group
+    const prevKey = Object.keys(groups)[Object.keys(groups).length - 1];
+
+    // Check if the time difference between the current message and the previous one is within 3 minutes
+    if (prevKey && message.createdAt - Number(prevKey) <= TIME_SPAN) {
+      // Add the message to the existing group
+      return {
+        ...groups,
+        [prevKey]: [...(groups[prevKey] ?? []), message],
+      };
+    } else {
+      // Create a new group for the current message
+      return {
+        ...groups,
+        [createdAt]: [message],
+      };
+    }
+  }, {});
+
+  // Flatten the grouped messages and add chain indicators
+  return Object.values(groupedMessagesByCreatedAt).flatMap(
+    (messages: EveryMessage[]) => {
+      if (messages.length > 1) {
+        // Add chain indicators to the first and last messages in the group
+        return messages.map((message, index) => ({
+          ...message,
+          chaintop: index === 0,
+          chainBottom: index === messages.length - 1,
+        }));
+      }
+      return messages;
+    }
+  );
+}