From fa24fe6d4f777b5e1331094d7e13d3a3d5e7aba0 Mon Sep 17 00:00:00 2001
From: KaustubhKumar05 <kaustubhkumar05@gmail.com>
Date: Thu, 7 Sep 2023 09:57:19 +0530
Subject: [PATCH 1/3] fix: new mesage pill flickering

---
 .../roomkit-react/src/Prebuilt/components/Chat/Chat.jsx   | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/roomkit-react/src/Prebuilt/components/Chat/Chat.jsx b/packages/roomkit-react/src/Prebuilt/components/Chat/Chat.jsx
index 6396407028..f00f7a32cd 100644
--- a/packages/roomkit-react/src/Prebuilt/components/Chat/Chat.jsx
+++ b/packages/roomkit-react/src/Prebuilt/components/Chat/Chat.jsx
@@ -96,6 +96,12 @@ export const Chat = ({ screenType }) => {
   const { elements } = useRoomLayoutConferencingScreen();
   const isMobile = useMedia(cssConfig.media.md);
 
+  let isScrolledToBottom = false;
+  if (listRef.current) {
+    const currentRef = listRef.current._outerRef;
+    isScrolledToBottom = currentRef.scrollHeight - currentRef.clientHeight - currentRef.scrollTop < 10;
+  }
+
   const messagesCount = useHMSStore(storeMessageSelector) || 0;
   const scrollToBottom = useCallback(
     (unreadCount = 0) => {
@@ -142,7 +148,7 @@ export const Chat = ({ screenType }) => {
         }}
         peerId={chatOptions.peerId}
       >
-        {!isSelectorOpen && (
+        {!isSelectorOpen && !isScrolledToBottom && (
           <NewMessageIndicator role={chatOptions.role} peerId={chatOptions.peerId} scrollToBottom={scrollToBottom} />
         )}
       </ChatFooter>

From 568de91ef374cec03d4391529f070b5712720176 Mon Sep 17 00:00:00 2001
From: KaustubhKumar05 <kaustubhkumar05@gmail.com>
Date: Thu, 7 Sep 2023 12:13:49 +0530
Subject: [PATCH 2/3] fix: memo

---
 .../roomkit-react/src/Prebuilt/components/Chat/Chat.jsx     | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/roomkit-react/src/Prebuilt/components/Chat/Chat.jsx b/packages/roomkit-react/src/Prebuilt/components/Chat/Chat.jsx
index f00f7a32cd..720c80619c 100644
--- a/packages/roomkit-react/src/Prebuilt/components/Chat/Chat.jsx
+++ b/packages/roomkit-react/src/Prebuilt/components/Chat/Chat.jsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { memo, useCallback, useEffect, useRef, useState } from 'react';
 import { useMedia } from 'react-use';
 import {
   HMSNotificationTypes,
@@ -156,7 +156,7 @@ export const Chat = ({ screenType }) => {
   );
 };
 
-const NewMessageIndicator = ({ role, peerId, scrollToBottom }) => {
+const NewMessageIndicator = memo(({ role, peerId, scrollToBottom }) => {
   const unreadCount = useUnreadCount({ role, peerId });
   if (!unreadCount) {
     return null;
@@ -195,4 +195,4 @@ const NewMessageIndicator = ({ role, peerId, scrollToBottom }) => {
       </Button>
     </Flex>
   );
-};
+});

From f9ce92958192ad4a53a35d5b06ed39f347657f71 Mon Sep 17 00:00:00 2001
From: KaustubhKumar05 <kaustubhkumar05@gmail.com>
Date: Thu, 7 Sep 2023 13:34:50 +0530
Subject: [PATCH 3/3] fix: clean up

---
 .../roomkit-react/src/Prebuilt/components/Chat/Chat.jsx     | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/roomkit-react/src/Prebuilt/components/Chat/Chat.jsx b/packages/roomkit-react/src/Prebuilt/components/Chat/Chat.jsx
index 720c80619c..f00f7a32cd 100644
--- a/packages/roomkit-react/src/Prebuilt/components/Chat/Chat.jsx
+++ b/packages/roomkit-react/src/Prebuilt/components/Chat/Chat.jsx
@@ -1,4 +1,4 @@
-import React, { memo, useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useMedia } from 'react-use';
 import {
   HMSNotificationTypes,
@@ -156,7 +156,7 @@ export const Chat = ({ screenType }) => {
   );
 };
 
-const NewMessageIndicator = memo(({ role, peerId, scrollToBottom }) => {
+const NewMessageIndicator = ({ role, peerId, scrollToBottom }) => {
   const unreadCount = useUnreadCount({ role, peerId });
   if (!unreadCount) {
     return null;
@@ -195,4 +195,4 @@ const NewMessageIndicator = memo(({ role, peerId, scrollToBottom }) => {
       </Button>
     </Flex>
   );
-});
+};