improve scroll

src/components/Chat/ChatDirect.tsx

@@ -265,7 +265,7 @@ const clearEditorContent = () => {
       }}>
 
      
-      <Tiptap setEditorRef={setEditorRef} onEnter={sendMessage} />
+      <Tiptap setEditorRef={setEditorRef} onEnter={sendMessage} isChat />
       </div>
       <CustomButton
               onClick={()=> {

src/components/Chat/ChatGroup.tsx

@@ -334,7 +334,7 @@ const clearEditorContent = () => {
       }}>
 
      
-      <Tiptap setEditorRef={setEditorRef} onEnter={sendMessage} />
+      <Tiptap setEditorRef={setEditorRef} onEnter={sendMessage} isChat />
       </div>
       <CustomButton
               onClick={()=> {

src/components/Chat/ChatList.tsx

@@ -19,8 +19,10 @@ export const ChatList = ({ initialMessages, myAddress }) => {
   }, [])
   const handleMessageSeen = useCallback((messageId) => {
     setMessages((prevMessages) =>
-      prevMessages.map((msg) =>
-        msg.id === messageId ? { ...msg, unread: false } : msg
+      prevMessages.map((msg) => {
+        return { ...msg, unread: false } 
+      }
+        
       )
     );
   }, []);
@@ -36,6 +38,18 @@ export const ChatList = ({ initialMessages, myAddress }) => {
     }
   };
 
+  const debounce = (func, delay) => {
+    let timer;
+    return (...args) => {
+      clearTimeout(timer);
+      timer = setTimeout(() => {
+        func(...args);
+      }, delay);
+    };
+  };
+  
+  const handleScrollDebounced = debounce(handleScroll, 100);
+
   const scrollToBottom = () => {
     if (listRef.current) {
       listRef.current?.recomputeRowHeights();
@@ -50,33 +64,49 @@ export const ChatList = ({ initialMessages, myAddress }) => {
     }
   };
 
+  const preserveScrollPosition = (callback) => {
+    if (listRef.current) {
+      const scrollContainer = listRef.current.Grid._scrollingContainer;
+      const currentScrollTop = scrollContainer.scrollTop; // Get current scroll position
+  
+      callback(); // Perform the action that could change the layout (e.g., recompute row heights)
+  
+      // Restore the scroll position after the layout change
+      setTimeout(() => {
+        scrollContainer.scrollTop = currentScrollTop;
+      }, 0);
+    }
+  };
+  
+
   const rowRenderer = ({ index, key, parent, style }) => {
     const message = messages[index];
 
     return (
       <CellMeasurer
-        key={key}
-        cache={cache}
-        parent={parent}
-        columnIndex={0}
-        rowIndex={index}
+  key={key}
+  cache={cache}
+  parent={parent}
+  columnIndex={0}
+  rowIndex={index}
+>
+  {({ measure }) => (
+    <div style={style}>
+      <div
+        onLoad={() => preserveScrollPosition(measure)} // Prevent jumps while measuring
+        style={{
+          marginBottom: '10px',
+          width: '100%',
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+        }}
       >
-        {({ measure }) => (
-                  <div style={style}>
-
-          <div  onLoad={measure} style={{
-            marginBottom: '10px',
-            width: '100%',
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center'
-          }}>
-            <MessageItem message={message} onSeen={handleMessageSeen} />
-          </div>
-          </div>
-
-        )}
-      </CellMeasurer>
+        <MessageItem isLast={index === messages.length - 1} message={message} onSeen={handleMessageSeen} />
+      </div>
+    </div>
+  )}
+</CellMeasurer>
     );
   };
 
@@ -116,7 +146,7 @@ export const ChatList = ({ initialMessages, myAddress }) => {
             rowCount={messages.length}
             rowHeight={cache.rowHeight}
             rowRenderer={rowRenderer}
-            onScroll={handleScroll}
+            onScroll={handleScrollDebounced}
             deferredMeasurementCache={cache}
           />
         )}

src/components/Chat/MessageItem.tsx

@@ -7,10 +7,10 @@ import { formatTimestamp } from "../../utils/time";
 import { getBaseApi } from "../../background";
 import { getBaseApiReact } from "../../App";
 
-export const MessageItem = ({ message, onSeen }) => {
+export const MessageItem = ({ message, onSeen, isLast }) => {
 
   const { ref, inView } = useInView({
-    threshold: 1.0, // Fully visible
+    threshold: 0.7, // Fully visible
     triggerOnce: true, // Only trigger once when it becomes visible
   });
 
@@ -22,7 +22,7 @@ export const MessageItem = ({ message, onSeen }) => {
 
   return (
     <div
-      ref={ref}
+      ref={isLast ? ref : null}
       style={{
         padding: "10px",
         backgroundColor: "#232428",

src/components/Chat/TipTap.tsx

@@ -25,7 +25,7 @@ import CustomImage from './CustomImage';
 import Compressor from 'compressorjs'
 
 import ImageResize from 'tiptap-extension-resize-image'; // Import the ResizeImage extension
-const MenuBar = ({ setEditorRef }) => {
+const MenuBar = ({ setEditorRef, isChat }) => {
   const { editor } = useCurrentEditor();
   const fileInputRef = useRef(null); 
   if (!editor) {
@@ -222,7 +222,9 @@ const MenuBar = ({ setEditorRef }) => {
         >
           <RedoIcon />
         </IconButton>
-        <IconButton
+        {!isChat && (
+          <>
+           <IconButton
           onClick={triggerImageUpload}
           sx={{
             color: 'gray'
@@ -237,6 +239,9 @@ const MenuBar = ({ setEditorRef }) => {
           onChange={handleImageUpload}
           accept="image/*" // Limit file types to images only
         />
+          </>
+        )}
+       
       </div>
     </div>
   );
@@ -263,11 +268,13 @@ const extensions = [
 
 const content = ``;
 
-export default ({ setEditorRef, onEnter, disableEnter }) => {
+export default ({ setEditorRef, onEnter, disableEnter, isChat }) => {
+  console.log('exte', extensions)
+  const extensionsFiltered = isChat ? extensions.filter((item)=> item?.name !== 'image') :  extensions
   return (
     <EditorProvider
-      slotBefore={<MenuBar setEditorRef={setEditorRef} />}
-      extensions={extensions}
+      slotBefore={<MenuBar setEditorRef={setEditorRef} isChat={isChat} />}
+      extensions={extensionsFiltered}
       content={content}
       editorProps={{
         handleKeyDown(view, event) {