fixed

__visual_tests__/workflow1.spec.ts

@@ -36,13 +36,13 @@ test('100', async ({ page, browserName }) => {
   await input.fill('trigger workflow1');
   await assertScreenshot(page, `100-1.${browserName}`);
   await input.press('Enter');
-  await page.waitForTimeout(500);
+  await page.waitForTimeout(1000);
   await assertScreenshot(page, `100-2.${browserName}`);
 
   // 2
   let options = page.locator('.sendbird-suggested-replies__option');
   await options.first().click();
-  await page.waitForTimeout(500);
+  await page.waitForTimeout(1000);
   await assertScreenshot(page, `100-3.${browserName}`);
 
   // 3
@@ -60,18 +60,18 @@ test('100', async ({ page, browserName }) => {
   await chipContainer.locator(':scope > *').nth(5).click();
   submitButton = page.locator('button.sendbird-button--primary');
   await submitButton.click();
-  await page.waitForTimeout(100);
+  await page.waitForTimeout(1000);
   await assertScreenshot(page, `100-5.${browserName}`);
 
   // 5
   options = page.locator('.sendbird-suggested-replies__option');
   await options.first().click();
-  await page.waitForTimeout(100);
+  await page.waitForTimeout(1000);
   await assertScreenshot(page, `100-6.${browserName}`);
 
   // 6
   options = page.locator('.sendbird-suggested-replies__option');
   await options.nth(1).click();
-  await page.waitForTimeout(100);
+  await page.waitForTimeout(1000);
   await assertScreenshot(page, `100-7.${browserName}`);
 });

src/components/chat/ui/ChatMessageList.tsx

@@ -20,7 +20,7 @@ import { useTypingTargetMessageId } from '../hooks/useTypingTargetMessageId';
 
 export const ChatMessageList = () => {
   const { channel, dataSource, scrollSource, handlers } = useChatContext();
-  const { botStudioEditProps, customUserAgentParam, stringSet, dateLocale } = useConstantState();
+  const { botStudioEditProps, customUserAgentParam, stringSet, dateLocale, enableMessageGrouping } = useConstantState();
 
   const typingTargetMessageId = useTypingTargetMessageId();
   const { filteredMessages, shouldShowOriginalDate, renderBotStudioWelcomeMessages } = useBotStudioView();
@@ -54,7 +54,12 @@ export const ChatMessageList = () => {
           const lastMessageInChannel = filteredMessages[filteredMessages.length - 1];
           const showRepliesOnLastMessage = message.messageId === lastMessageInChannel?.messageId;
 
-          const [top, bottom] = getMessageGrouping(message, filteredMessages[index - 1], filteredMessages[index + 1]);
+          const [top, bottom] = getMessageGrouping(
+            message,
+            enableMessageGrouping,
+            filteredMessages[index - 1],
+            filteredMessages[index + 1],
+          );
 
           return (
             <div style={{ padding: '0 16px' }} key={getComponentKeyFromMessage(message)}>

src/const.ts

@@ -63,6 +63,7 @@ export const DEFAULT_CONSTANT = {
   enableMention: true,
   enableResetHistoryOnConnect: false,
   enableWidgetExpandButton: false,
+  enableMessageGrouping: true,
   dateLocale: enUS,
   enableHideWidgetForDeactivatedUser: false,
   messageInputControls: {
@@ -311,6 +312,11 @@ interface ConstantFeatureFlags {
    * @description Enable widget expand button.
    * */
   enableWidgetExpandButton: boolean;
+  /**
+   * @public
+   * @description Enable message grouping by timestamp.
+   * */
+  enableMessageGrouping: boolean;
 }
 
 export interface CreateGroupChannelParams {

src/context/ConstantContext.tsx

@@ -91,6 +91,7 @@ export const ConstantStateProvider = (props: PropsWithChildren<ConstantContextPr
         enableHideWidgetForDeactivatedUser:
           props.enableHideWidgetForDeactivatedUser ?? initialState.enableHideWidgetForDeactivatedUser,
         enableWidgetExpandButton: props.enableWidgetExpandButton ?? initialState.enableWidgetExpandButton,
+        enableMessageGrouping: props.enableMessageGrouping ?? initialState.enableMessageGrouping,
         // ----- Legacy props ----- //
         betaMark: props.betaMark ?? initialState.betaMark,
         customBetaMarkText: props.customBetaMarkText ?? initialState.customBetaMarkText,

src/main.tsx

@@ -28,7 +28,7 @@ const WidgetApp = () => {
   if (!appId || !botId) {
     return null;
   }
-  
+
   const host = getHost(region);
   return (
     <App
@@ -45,6 +45,7 @@ const WidgetApp = () => {
             }
           : undefined
       }
+      enableMessageGrouping={!disableTimestamps}
     />
   );
 };

src/utils/messages.ts

@@ -3,7 +3,15 @@ import { isSameMinute } from 'date-fns';
 
 import { messageExtension } from './messageExtension';
 
-export const getMessageGrouping = (curr: BaseMessage, prev?: BaseMessage, next?: BaseMessage): [boolean, boolean] => {
+export const getMessageGrouping = (
+  curr: BaseMessage,
+  enableMessageGrouping: boolean,
+  prev?: BaseMessage,
+  next?: BaseMessage,
+): [boolean, boolean] => {
+  if (!enableMessageGrouping) {
+    return [true, true];
+  }
   if (!curr.isUserMessage() && !curr.isFileMessage()) {
     return [false, false];
   }