Исправлен скролл вниз при подгрузке новых сообщений

app/components/DialogsList/DialogsList.tsx

@@ -4,7 +4,7 @@ import animationData from './lottie.json';
 import { Box, Flex, Skeleton, Text } from "@mantine/core";
 import { useDialogsList } from "@/app/providers/DialogListProvider/useDialogsList";
 import { GroupDialog } from "../GroupDialog/GroupDialog";
-import React from "react";
+import { AnimatePresence, motion } from "framer-motion";
 
 interface DialogsListProps {
 	mode: 'all' | 'requests';
@@ -13,6 +13,7 @@ interface DialogsListProps {
 
 export function DialogsList(props : DialogsListProps) {
 	const {dialogs, loadingDialogs} = useDialogsList();
+	const filteredDialogs = dialogs.filter(v => (v.is_request == (props.mode == 'requests')));
 
 	return (
 		<>
@@ -36,21 +37,30 @@ export function DialogsList(props : DialogsListProps) {
 					))}				
 				</>
 			)}
-			{loadingDialogs === 0 && dialogs.filter(v => (v.is_request == (props.mode == 'requests'))).map((dialog) => (
-				<React.Fragment key={dialog.dialog_id}>
-					{dialog.dialog_id.startsWith('#group:') ? (
-						<GroupDialog
-							onClickDialog={props.onSelectDialog}
-							{...dialog}
-						/>
-					) : (
-						<Dialog
-							onClickDialog={props.onSelectDialog}
-							{...dialog}
-						/>
-					)}
-				</React.Fragment>
-			))}
+            <motion.div style={{display: 'flex', flexDirection: 'column'}}>
+                <AnimatePresence mode="popLayout">
+                    {loadingDialogs === 0 && filteredDialogs.map((dialog) => (
+                        <motion.div
+                            key={dialog.dialog_id}
+                            layout
+                            initial={false}
+                            transition={{ duration: 0.1, ease: 'easeInOut' }}
+                        >
+                            {dialog.dialog_id.startsWith('#group:') ? (
+                                <GroupDialog
+                                    onClickDialog={props.onSelectDialog}
+                                    {...dialog}
+                                />
+                            ) : (
+                                <Dialog
+                                    onClickDialog={props.onSelectDialog}
+                                    {...dialog}
+                                />
+                            )}
+                        </motion.div>
+                    ))}
+                </AnimatePresence>
+            </motion.div>
 		</>
 	);
 }

app/components/MessageAttachments/MessageAvatar.tsx

@@ -19,7 +19,7 @@ export function MessageAvatar(props: AttachmentProps) {
         download, 
         downloadStatus,
         getBlob,
-        getPreview} = useAttachment(props.attachment, props.chacha_key_plain);
+        getPreview} = useAttachment(props.attachment, props.parent);
     const mainRef = useRef<HTMLDivElement>(null);
     const { open } = useImageViewer();
     const preview = getPreview();

app/components/MessageAttachments/MessageFile.tsx

@@ -19,7 +19,7 @@ export function MessageFile(props : AttachmentProps) {
         } = 
         useAttachment(
             props.attachment, 
-            props.chacha_key_plain, 
+            props.parent, 
         );
     const preview = getPreview();
     const error = downloadStatus == DownloadStatus.ERROR;

app/components/MessageAttachments/MessageImage.tsx

@@ -19,7 +19,7 @@ export function MessageImage(props: AttachmentProps) {
         download,
         downloadStatus,
         getBlob,
-        getPreview } = useAttachment(props.attachment, props.chacha_key_plain);
+        getPreview } = useAttachment(props.attachment, props.parent);
     const mainRef = useRef<HTMLDivElement>(null);
     const error = downloadStatus == DownloadStatus.ERROR;
     const { open } = useImageViewer();

app/components/Messages/Messages.tsx

@@ -21,6 +21,7 @@ export function Messages() {
     const isFirstRenderRef = useRef(true);
     const previousScrollHeightRef = useRef(0);
     const distanceFromButtomRef = useRef(0);
+    const distanceFromTopRef = useRef(0);
 
     const [affix, setAffix] = useState(false);
     const [wallpaper] = useSetting<string>
@@ -120,7 +121,8 @@ export function Messages() {
         const lastMessage = messages[messages.length - 1];
 
         // Скроллим если пользователь внизу или это его собственное сообщение
-        if ((shouldAutoScrollRef.current || lastMessage.from_me)) {
+        if ((shouldAutoScrollRef.current || lastMessage.from_me) && distanceFromTopRef.current > 10) {
+            console.info(distanceFromTopRef.current);
             scrollToBottom(true);
         }
     }, [messages.length, loading, scrollToBottom]);
@@ -175,6 +177,8 @@ export function Messages() {
             onScrollPositionChange={(scroll) => {
                 if (!viewportRef.current) return;
 
+                distanceFromTopRef.current = scroll.y;
+
                 // Загружаем старые сообщения при достижении верха
                 if (scroll.y === 0 && !loading && messages.length >= 20) {
                     loadMessagesToScrollAreaTop();

app/providers/AttachmentProvider/useAttachment.ts

@@ -1,4 +1,4 @@
-import { useContext, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { useDownloadStatus } from "../TransportProvider/useDownloadStatus";
 import { useUploadStatus } from "../TransportProvider/useUploadStatus";
 import { useFileStorage } from "../../hooks/useFileStorage";
@@ -10,11 +10,11 @@ import { useDialogsCache } from "../DialogProvider/useDialogsCache";
 import { useConsoleLogger } from "../../hooks/useConsoleLogger";
 import { Attachment, AttachmentType } from "../ProtocolProvider/protocol/packets/packet.message";
 import { useMemory } from "../MemoryProvider/useMemory";
-import { DialogContext } from "../DialogProvider/DialogProvider";
 import { useSaveAvatar } from "../AvatarProvider/useSaveAvatar";
 import { AVATAR_PASSWORD_TO_ENCODE } from "@/app/constants";
 import { useDialog } from "../DialogProvider/useDialog";
 import { useCore } from "@/app/hooks/useCore";
+import { MessageProps } from "@/app/components/Messages/Message";
 
 export enum DownloadStatus {
     DOWNLOADED,
@@ -25,7 +25,7 @@ export enum DownloadStatus {
     ERROR
 }
 
-export function useAttachment(attachment: Attachment, keyPlain: string) {
+export function useAttachment(attachment: Attachment, parentMessage: MessageProps) {
     const uuidRegex = /^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}$/;
     const uploadedPercentage = useUploadStatus(attachment.id);
     const downloadPercentage = useDownloadStatus(attachment.id);
@@ -39,13 +39,7 @@ export function useAttachment(attachment: Attachment, keyPlain: string) {
     const {info} = useConsoleLogger('useAttachment');
     const {updateAttachmentsInMessagesByAttachmentId} = useDialog();
     const {getDownloadsPath} = useCore();
-    
 
-    const context = useContext(DialogContext);
-    if(!context) {
-        throw new Error("useAttachment must be used within a DialogProvider");
-    }
-    const {dialog} = context;
     const saveAvatar = useSaveAvatar();
 
     useEffect(() => {
@@ -155,7 +149,7 @@ export function useAttachment(attachment: Attachment, keyPlain: string) {
         } 
         setDownloadStatus(DownloadStatus.DECRYPTING);
         //console.info("Decrypted attachment ", Buffer.from(keyPlain, 'binary').toString('hex'));
-        const decrypted = await decodeWithPassword(keyPlain, downloadedBlob);
+        const decrypted = await decodeWithPassword(parentMessage.chacha_key_plain, downloadedBlob);
         setDownloadTag("");
         if(attachment.type == AttachmentType.FILE) {
             /**
@@ -189,7 +183,10 @@ export function useAttachment(attachment: Attachment, keyPlain: string) {
             await writeFile(avatarPath,
                 Buffer.from(await encodeWithPassword(AVATAR_PASSWORD_TO_ENCODE, decrypted)));
             setDownloadStatus(DownloadStatus.DOWNLOADED);
-            saveAvatar(dialog, avatarPath, decrypted);
+            /**
+             * Устанавливаем аватарку тому, кто ее прислал.
+             */
+            saveAvatar(parentMessage.from, avatarPath, decrypted);
             return;
         }
         /**

app/providers/AvatarProvider/AvatarProvider.tsx

@@ -7,7 +7,15 @@ import { useConsoleLogger } from "@/app/hooks/useConsoleLogger";
 import { useSystemAccounts } from "../SystemAccountsProvider/useSystemAccounts";
 import { AVATAR_PASSWORD_TO_ENCODE } from "@/app/constants";
 
-export const AvatarContext = createContext({});
+export interface AvatarProviderContextValue {
+    deliveredAvatars: string[];
+    saveAvatar: (fromPublicKey: string, path : string, decryptedContent : string) => Promise<void>;
+    loadAvatarsFromCacheByPublicKey: (publicKey : string, allDecode? : boolean) => Promise<void>;
+    changeAvatar: (base64Image : string, entity : string) => Promise<void>;
+    decodedAvatarsCache: AvatarCacheEntry[];
+}
+
+export const AvatarContext = createContext<AvatarProviderContextValue | null>(null);
 
 interface AvatarProviderProps {
     children: React.ReactNode;

app/providers/AvatarProvider/useSaveAvatar.ts

@@ -1,9 +1,9 @@
 import { useContext } from "react";
 import { AvatarContext } from "./AvatarProvider";
 
-export function useSaveAvatar() {
+export function useSaveAvatar() : (fromPublicKey: string, path : string, decryptedContent : string) => Promise<void> {
     const context : any = useContext(AvatarContext);
-    if(!context){
+    if(!context){ 
         throw new Error("useSaveAvatar must be used within an AvatarProvider");
     }
     return context.saveAvatar;