fix: improve scrollToBottom with image attachments

- Removed keys that caused remounting of images when re-rendering
- Made ResizeObserver less-trigger happy
- Avoided conflict between quoted images jumping and gallery

src/components/Attachment/AttachmentContainer.tsx

@@ -1,7 +1,6 @@
 import React, { PropsWithChildren } from 'react';
 import ReactPlayer from 'react-player';
 import clsx from 'clsx';
-import { nanoid } from 'nanoid';
 
 import { AttachmentActions as DefaultAttachmentActions } from './AttachmentActions';
 import { Audio as DefaultAudio } from './Audio';
@@ -43,16 +42,7 @@ export const AttachmentWithinContainer = <
     'str-chat__message-attachment-with-actions': extra === 'actions', // added for theme V2 (better readability)
   });
 
-  return (
-    <div
-      className={classNames}
-      key={`${isGAT ? '' : attachment?.id || attachment?.fallback || nanoid()}-${
-        attachment?.type || 'none'
-      }`}
-    >
-      {children}
-    </div>
-  );
+  return <div className={classNames}>{children}</div>;
 };
 
 export const AttachmentActionsContainer = <

src/components/Attachment/utils.tsx

@@ -1,6 +1,5 @@
 import React, { PropsWithChildren, ReactNode } from 'react';
 import ReactPlayer from 'react-player';
-import { nanoid } from 'nanoid';
 import clsx from 'clsx';
 
 import type { ATTACHMENT_GROUPS_ORDER } from './Attachment';
@@ -117,14 +116,7 @@ export const renderAttachmentWithinContainer = <
     'str-chat__message-attachment-with-actions': extra === 'actions', // added for theme V2 (better readability)
   });
 
-  return (
-    <div
-      className={classNames}
-      key={`${isGAT ? '' : attachment?.id || nanoid()}-${attachment?.type || 'none'}`}
-    >
-      {children}
-    </div>
-  );
+  return <div className={classNames}>{children}</div>;
 };
 
 /**

src/components/Gallery/Image.tsx

@@ -45,7 +45,6 @@ export const ImageComponent = <
         className='str-chat__message-attachment--img'
         data-testid='image-test'
         onClick={toggleModal}
-        onKeyDown={toggleModal}
         src={imageSrc}
         tabIndex={0}
       />

src/components/Message/QuotedMessage.tsx

@@ -43,7 +43,11 @@ export const QuotedMessage = <
     <>
       <div
         className={clsx('str-chat__quoted-message-preview quoted-message', { mine: isMyMessage() })}
-        onClick={() => jumpToMessage(quoted_message.id)}
+        onClickCapture={(e) => {
+          e.stopPropagation();
+          e.preventDefault();
+          jumpToMessage(quoted_message.id);
+        }}
       >
         {quoted_message.user && (
           <Avatar

src/components/MessageList/hooks/useScrollLocationLogic.tsx

@@ -42,6 +42,7 @@ export const useScrollLocationLogic = <
   const closeToBottom = useRef(false);
   const closeToTop = useRef(false);
   const scrollCounter = useRef({ autoScroll: 0, scroll: 0 });
+  const ulElementHeight = useRef(0);
 
   const scrollToBottom = useCallback(() => {
     if (!listElement?.scrollTo || hasMoreNewer || suppressAutoscroll) {
@@ -57,7 +58,14 @@ export const useScrollLocationLogic = <
 
   useEffect(() => {
     if (!listElement) return;
-    const observer = new ResizeObserver(scrollToBottom);
+    ulElementHeight.current = ulElement?.getBoundingClientRect().height || 0;
+
+    const observer = new ResizeObserver(([entry]) => {
+      if (ulElementHeight.current !== entry.contentRect.height) {
+        ulElementHeight.current = entry.contentRect.height;
+        scrollToBottom();
+      }
+    });
 
     const cancelObserverOnUserScroll = () => {
       scrollCounter.current.scroll += 1;