Fix scroll to bottom issue

src/index.d.ts

@@ -377,8 +377,8 @@ interface ChannelProps {
   onSearchClick?(): void;
   highlightedMessage?: string | number;
   startingPoint?: number;
-  onBeforeSendUserMessage?(text: string, quoteMessage?: Sendbird.UserMessage | Sendbird.FileMessage): Sendbird.UserMessageParams;
-  onBeforeSendFileMessage?(file: File, quoteMessage?: Sendbird.UserMessage | Sendbird.FileMessage): Sendbird.FileMessageParams;
+  onBeforeSendUserMessage?(text: string, quotedMessage?: Sendbird.UserMessage | Sendbird.FileMessage): Sendbird.UserMessageParams;
+  onBeforeSendFileMessage?(file: File, quotedMessage?: Sendbird.UserMessage | Sendbird.FileMessage): Sendbird.FileMessageParams;
   onBeforeUpdateUserMessage?(text: string): Sendbird.UserMessageParams;
   onChatHeaderActionClick?(event: React.MouseEvent<HTMLElement>): void;
   renderCustomMessage?: RenderCustomMessage;

src/smart-components/App/stories/index.stories.js

@@ -278,6 +278,32 @@ const UseSendbirdChannelList = (props) => {
   );
 };
 const SBChannelList = withSendBird(UseSendbirdChannelList);
+const SBChannel = withSendBird((props) => {
+  const {
+    channelUrl,
+    onSearchClick,
+    onChatHeaderActionClick,
+    showSearchIcon,
+  } = props;
+
+  return (
+    <Conversation
+      channelUrl={channelUrl}
+      showSearchIcon={showSearchIcon}
+      onSearchClick={onSearchClick}
+      onChatHeaderActionClick={onChatHeaderActionClick}
+      // renderCustomMessage={(message) => {
+      //   if (message.messageType === 'user') {
+      //     return () => (
+      //       <CustomMessageItem
+      //         message={message}
+      //       />
+      //     )
+      //   }
+      // }}
+    />
+  );
+});
 const CustomApp = () => {
   const [channelUrl, setChannelUrl] = useState('');
   const [channelSettings, setChannelSettings] = useState(false);
@@ -297,7 +323,7 @@ const CustomApp = () => {
         <SBChannelList setChannelUrl={setChannelUrl} />
         <div style={{ height: '100%', width: '100%', display: 'inline-flex', flexDirection: 'row' }}>
           <div style={{ width: '100%' }}>
-            <Conversation
+            <SBChannel
               channelUrl={channelUrl}
               onChatHeaderActionClick={() => {
                 setChannelSearch(false);

src/smart-components/Conversation/components/ConversationScroll.jsx

@@ -10,7 +10,26 @@ import { compareMessagesForGrouping } from '../utils';
 import PlaceHolder, { PlaceHolderTypes } from '../../../ui/PlaceHolder';
 import Icon, { IconTypes, IconColors } from '../../../ui/Icon';
 
+const SCROLL_REF_CLASS_NAME = '.sendbird-msg--scroll-ref';
+
 export default class ConversationScroll extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+
+  handleScroll = () => {
+    const { scrollRef } = this?.props;
+    const current = scrollRef?.current;
+    if (current) {
+      const bottom = current.scrollHeight - current.scrollTop - current.offsetHeight;
+      const { scrollBottom = 0 } = this.state;
+      if (scrollBottom < bottom) {
+        current.scrollTop += bottom - scrollBottom;
+      }
+    }
+  }
+
   onScroll = (e) => {
     const {
       scrollRef,
@@ -31,7 +50,7 @@ export default class ConversationScroll extends Component {
       if (!hasMore) {
         return;
       }
-      const nodes = scrollRef.current.querySelectorAll('.sendbird-msg--scroll-ref');
+      const nodes = scrollRef.current.querySelectorAll(SCROLL_REF_CLASS_NAME);
       const first = nodes && nodes[0];
       onScroll(([messages]) => {
         if (messages) {
@@ -46,7 +65,7 @@ export default class ConversationScroll extends Component {
     }
 
     if (clientHeight + scrollTop === scrollHeight) {
-      const nodes = scrollRef.current.querySelectorAll('.sendbird-msg--scroll-ref');
+      const nodes = scrollRef.current.querySelectorAll(SCROLL_REF_CLASS_NAME);
       const last = nodes && nodes[nodes.length - 1];
       onScrollDown(([messages]) => {
         if (messages) {
@@ -69,6 +88,15 @@ export default class ConversationScroll extends Component {
         });
         currentGroupChannel.markAsRead();
       }
+
+      // save the lastest scroll bottom value
+      if (scrollRef?.current) {
+        const current = scrollRef?.current;
+        this.setState((state) => ({
+          ...state,
+          scrollBottom: current.scrollHeight - current.scrollTop - current.offsetHeight,
+        }), () => { });
+      }
     }, 500);
   }
 
@@ -113,11 +141,7 @@ export default class ConversationScroll extends Component {
 
     return (
       <div className="sendbird-conversation__messages">
-        <div
-          ref={scrollRef}
-          className="sendbird-conversation__scroll-container"
-          onScroll={this.onScroll}
-        >
+        <div className="sendbird-conversation__scroll-container">
           <div className="sendbird-conversation__padding" />
           {/*
             To do: Implement windowing
@@ -126,7 +150,11 @@ export default class ConversationScroll extends Component {
             We hesitate to bring one more dependency to our library,
             we are planning to implement it inside the library
           */}
-          <div className="sendbird-conversation__messages-padding">
+          <div
+            className="sendbird-conversation__messages-padding"
+            ref={scrollRef}
+            onScroll={this.onScroll}
+          >
             {
               allMessages.map(
                 (m, idx) => {
@@ -176,7 +204,7 @@ export default class ConversationScroll extends Component {
                       renderCustomMessage={renderCustomMessage}
                       key={m.messageId || m.reqId}
                       userId={userId}
-                      // show status for pending/failed messages
+                      handleScroll={this.handleScroll}
                       message={m}
                       quoteMessage={quoteMessage}
                       scrollToMessage={scrollToMessage}
@@ -292,8 +320,8 @@ ConversationScroll.defaultProps = {
   replyType: 'NONE',
   emojiContainer: {},
   showScrollBot: false,
-  onClickScrollBot: () => {},
-  scrollToMessage: () => {},
+  onClickScrollBot: () => { },
+  scrollToMessage: () => { },
   emojiAllMap: new Map(),
   membersMap: new Map(),
   useMessageGrouping: true,

src/smart-components/Conversation/components/MessageHOC.jsx

@@ -38,6 +38,7 @@ export default function MessageHoc({
   setQuoteMessage,
   renderCustomMessage,
   currentGroupChannel,
+  handleScroll,
 }) {
   const { sender = {} } = message;
   const [showEdit, setShowEdit] = useState(false);
@@ -48,6 +49,10 @@ export default function MessageHoc({
   const editMessageInputRef = useRef(null);
   const useMessageScrollRef = useRef(null);
 
+  useLayoutEffect(() => {
+    handleScroll();
+  }, [showEdit, message?.reactions?.length]);
+
   useLayoutEffect(() => {
     if (highLightedMessageId === message.messageId) {
       if (useMessageScrollRef && useMessageScrollRef.current) {
@@ -166,7 +171,9 @@ export default function MessageHoc({
         replyType={replyType}
         nicknamesMap={membersMap}
         emojiContainer={emojiContainer}
-        showEdit={setShowEdit}
+        showEdit={() => {
+          setShowEdit(true);
+        }}
         showRemove={setShowRemove}
         showFileViewer={setShowFileViewer}
         resendMessage={resendMessage}
@@ -224,6 +231,7 @@ MessageHoc.propTypes = {
     sender: PropTypes.shape({ userId: PropTypes.string }),
     ogMetaData: PropTypes.shape({}),
     parentMessageId: PropTypes.number,
+    reactions: PropTypes.arrayOf(PropTypes.number),
   }),
   animatedMessageId: PropTypes.oneOfType([
     PropTypes.string,
@@ -260,6 +268,7 @@ MessageHoc.propTypes = {
     messageId: PropTypes.string,
   }),
   setQuoteMessage: PropTypes.func.isRequired,
+  handleScroll: PropTypes.func.isRequired,
 };
 
 MessageHoc.defaultProps = {

src/smart-components/Conversation/components/conversation-scroll.scss

@@ -4,6 +4,8 @@
   .sendbird-conversation__messages-padding {
     padding-left: 24px;
     padding-right: 24px;
+    height: 100%;
+    overflow: scroll;
   }
   .sendbird-separator,
   .sendbird-admin-message {

src/smart-components/Conversation/utils.js

@@ -18,7 +18,7 @@ export const scrollIntoLast = (intialTry = 0) => {
     return;
   }
   try {
-    const scrollDOM = document.querySelector('.sendbird-conversation__scroll-container');
+    const scrollDOM = document.querySelector('.sendbird-conversation__messages-padding');
     // eslint-disable-next-line no-multi-assign
     scrollDOM.scrollTop = scrollDOM.scrollHeight;
   } catch (error) {

src/ui/MessageItemMenu/index.tsx

@@ -23,7 +23,7 @@ interface Props {
   isByMe?: boolean;
   disabled?: boolean;
   replyType?: ReplyType;
-  showEdit?: (bool: boolean) => void;
+  showEdit?: () => void;
   showRemove?: (bool: boolean) => void;
   resendMessage?: (message: UserMessage | FileMessage) => void;
   setQuoteMessage?: (message: UserMessage | FileMessage) => void;
@@ -126,7 +126,8 @@ export default function MessageItemMenu({
                   className="sendbird-message-item-menu__list__menu-item menu-item-edit"
                   onClick={() => {
                     if (!disabled) {
-                      showEdit(true);
+                      // showEdit(true);
+                      showEdit();
                       closeDropdown();
                     }
                   }}