diff --git a/app/components/Messages/Messages.tsx b/app/components/Messages/Messages.tsx index 8ee6b21..e08df20 100644 --- a/app/components/Messages/Messages.tsx +++ b/app/components/Messages/Messages.tsx @@ -74,25 +74,25 @@ export function Messages() { return () => observer.disconnect(); }, [messages.length, loading]); - // MutationObserver - отслеживаем изменения контента (загрузка картинок, видео) useEffect(() => { - if (!contentRef.current) return; + if (!contentRef.current || !viewportRef.current) return; - const observer = new MutationObserver(() => { - // Скроллим только если нужен авто-скролл - if (shouldAutoScrollRef.current) { + const contentEl = contentRef.current; + //const viewportEl = viewportRef.current; + let lastHeight = contentEl.scrollHeight; + + const ro = new ResizeObserver(() => { + const newHeight = contentEl.scrollHeight; + const grew = newHeight > lastHeight; + lastHeight = newHeight; + + if (grew && shouldAutoScrollRef.current) { scrollToBottom(true); } }); - observer.observe(contentRef.current, { - childList: true, - subtree: true, - attributes: true, - attributeFilter: ['src', 'style', 'class'] - }); - - return () => observer.disconnect(); + ro.observe(contentEl); + return () => ro.disconnect(); }, [scrollToBottom]); // Первый рендер - скроллим вниз моментально