Scroll to the bubble's end on reactions update

src/components/chat/bubbles.ts

@@ -88,7 +88,7 @@ import { CallType } from "../../lib/calls/types";
 import getVisibleRect from "../../helpers/dom/getVisibleRect";
 import PopupJoinChatInvite from "../popups/joinChatInvite";
 import { InternalLink, INTERNAL_LINK_TYPE } from "../../lib/appManagers/internalLink";
-import ReactionsElement from "./reactions";
+import ReactionsElement, { REACTIONS_ELEMENTS } from "./reactions";
 import type ReactionElement from "./reaction";
 import type { AppReactionsManager } from "../../lib/appManagers/appReactionsManager";
 import RLottiePlayer from "../../lib/rlottie/rlottiePlayer";
@@ -458,6 +458,33 @@ export default class ChatBubbles {
 
         this.appendReactionsElementToBubble(bubble, message, changedResults);
       });
+
+      this.listenerSetter.add(rootScope)('message_reactions', ({message, changedResults}) => {
+        if(this.peerId !== message.peerId) {
+          return;
+        }
+
+        const scrolledDown = this.scrolledDown;
+        let bubble: HTMLElement;
+        if(scrolledDown) {
+          bubble = this.getBubbleByMessage(message);
+        }
+
+        const key = message.peerId + '_' + message.mid;
+        const set = REACTIONS_ELEMENTS.get(key);
+        if(!set) {
+          rootScope.dispatchEvent('missed_reactions_element', {message, changedResults});
+          return;
+        }
+
+        for(const element of set) {
+          element.update(message, changedResults);
+        }
+
+        if(scrolledDown && bubble) {
+          this.scrollToBubbleIfLast(bubble);
+        }
+      });
     }
 
     /* this.listenerSetter.add(rootScope)('message_reactions', ({peerId, mid}) => {
@@ -2462,7 +2489,7 @@ export default class ChatBubbles {
           });
         };
 
-        afterSetPromise.then(() => {
+        Promise.all([afterSetPromise, getHeavyAnimationPromise(), pause(500)]).then(() => {
           fetchReactions();
         });
       }

src/components/chat/reactions.ts

@@ -14,19 +14,8 @@ import ReactionElement, { ReactionLayoutType, REACTION_DISPLAY_BLOCK_COUNTER_AT
 const CLASS_NAME = 'reactions';
 const TAG_NAME = CLASS_NAME + '-element';
 
-const elements: Map<string, Set<ReactionsElement>> = new Map();
-rootScope.addEventListener('message_reactions', ({message, changedResults}) => {
-  const key = message.peerId + '_' + message.mid;
-  const set = elements.get(key);
-  if(!set) {
-    rootScope.dispatchEvent('missed_reactions_element', {message, changedResults});
-    return;
-  }
-
-  for(const element of set) {
-    element.update(message, changedResults);
-  }
-});
+const REACTIONS_ELEMENTS: Map<string, Set<ReactionsElement>> = new Map();
+export {REACTIONS_ELEMENTS};
 
 export default class ReactionsElement extends HTMLElement {
   private message: Message.message;
@@ -43,9 +32,9 @@ export default class ReactionsElement extends HTMLElement {
   }
   
   connectedCallback() {
-    let set = elements.get(this.key);
+    let set = REACTIONS_ELEMENTS.get(this.key);
     if(!set) {
-      elements.set(this.key, set = new Set());
+      REACTIONS_ELEMENTS.set(this.key, set = new Set());
     }
 
     set.add(this);
@@ -57,10 +46,10 @@ export default class ReactionsElement extends HTMLElement {
   }
 
   disconnectedCallback() {
-    const set = elements.get(this.key);
+    const set = REACTIONS_ELEMENTS.get(this.key);
     set.delete(this);
     if(!set.size) {
-      elements.delete(this.key);
+      REACTIONS_ELEMENTS.delete(this.key);
     }
   }