From e1d27370c015097cacff9de7fc003fbb525b840f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=98=D0=B3=D0=BE=D1=80=D1=8C=20=D0=9D=D0=B0=D0=B4=D0=B5?=
 =?UTF-8?q?=D0=B8=D0=BD?= <nadein-igor-vladimirovich@05-04-1999.ru>
Date: Mon, 12 Jan 2026 11:03:41 +0300
Subject: [PATCH] =?UTF-8?q?fix(messenger):=20=D0=B8=D1=81=D0=BF=D1=80?=
 =?UTF-8?q?=D0=B0=D0=B2=D0=BB=D0=B5=D0=BD=D0=B8=D0=B5=20=D0=BF=D1=80=D1=8B?=
 =?UTF-8?q?=D0=B6=D0=BA=D0=BE=D0=B2=20=D0=BF=D1=80=D0=B8=20=D0=B7=D0=B0?=
 =?UTF-8?q?=D0=B3=D1=80=D1=83=D0=B7=D0=BA=D0=B5=20=D0=B8=20=D0=B4=D1=83?=
 =?UTF-8?q?=D0=B1=D0=BB=D0=B8=D1=80=D0=BE=D0=B2=D0=B0=D0=BD=D0=B8=D1=8F=20?=
 =?UTF-8?q?=D1=81=D0=BA=D1=80=D0=B8=D0=BF=D1=82=D0=BE=D0=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ПРОБЛЕМЫ:
1. Видимые прыжки прокрутки при загрузке чата
2. Принудительный скролл при получении чужих сообщений
3. Дублирование загрузки chat-detail-enhanced.js

РЕШЕНИЯ:
1. Используем requestAnimationFrame для гарантии обновления DOM перед прокруткой
   - Скрываем контейнер → рендерим → ждем RAF → скроллим → показываем
   - Прокрутка происходит ДО показа контейнера = нет видимых прыжков

2. Убираем агрессивный автоскролл в handleNewMessage:
   - Скроллим только если это наше сообщение ИЛИ мы уже внизу
   - Предотвращаем прерывание чтения старых сообщений

3. Убираем дублирование chat-detail-enhanced.js в шаблоне:
   - Было: загружается ДО chatDetail.js
   - Стало: загружается ПОСЛЕ для правильного порядка инициализации

4. Улучшен порядок загрузки скриптов в chat_detail.html:
   - emoji-picker (третья сторона)
   - chatDetail.js (core инициализация)
   - chat-detail-enhanced.js (UI расширения)

РЕЗУЛЬТАТЫ:
✅ Нет видимых прыжков - чат открывается сразу в конце
✅ Не прерывается чтение старых сообщений при приходе новых
✅ Правильный порядок инициализации компонентов
✅ Убрано дублирование загрузки скриптов
---
 backend/static/js/components/userWebSocket.js | 27 ++++++++++++-------
 .../templates/communications/chat_detail.html |  8 +++---
 2 files changed, 23 insertions(+), 12 deletions(-)

diff --git a/backend/static/js/components/userWebSocket.js b/backend/static/js/components/userWebSocket.js
index 57f7c1a7..5cb5bca1 100644
--- a/backend/static/js/components/userWebSocket.js
+++ b/backend/static/js/components/userWebSocket.js
@@ -281,11 +281,14 @@ export function initUserWebSocket(options = {}) {
     // Используем батчевый renderMessages вместо forEach для лучшей производительности
     options.messageRenderer.renderMessages(messages);
     
-    // Устанавливаем scroll в конец ДО показа контейнера
-    state.scrollEl.scrollTop = state.scrollEl.scrollHeight;
-    
-    // Показываем контейнер - пользователь сразу видит конец диалога
-    state.scrollEl.style.visibility = wasVisible || '';
+    // Используем requestAnimationFrame для гарантии что DOM обновлен перед прокруткой
+    requestAnimationFrame(() => {
+      // Устанавливаем scroll в конец ДО показа контейнера
+      state.scrollEl.scrollTop = state.scrollEl.scrollHeight;
+      
+      // Показываем контейнер - пользователь сразу видит конец диалога
+      state.scrollEl.style.visibility = wasVisible || '';
+    });
     
     // Инициализируем голосования после загрузки сообщений
     if (window.chatPoll) {
@@ -308,10 +311,16 @@ export function initUserWebSocket(options = {}) {
 
     options.messageRenderer.renderMessage(message);
     
-    // Автоскролл если внизу
-    const isAtBottom = markReadApi?.atBottom?.() ?? true;
-    if (isAtBottom || message.author_id === userId) {
-      scrollToBottom();
+    // Автоскролл ТОЛЬКО если это наше сообщение ИЛИ мы уже внизу
+    // Предотвращаем принудительный скролл при получении чужих сообщений
+    const isAtBottom = markReadApi?.atBottom?.() ?? false;
+    const isOwnMessage = message.author_id === userId;
+    
+    if (isOwnMessage || isAtBottom) {
+      // Используем requestAnimationFrame для плавности
+      requestAnimationFrame(() => {
+        scrollToBottom();
+      });
     }
 
     // Отмечаем как прочитанное
diff --git a/backend/templates/communications/chat_detail.html b/backend/templates/communications/chat_detail.html
index 5efd0f6c..879be098 100644
--- a/backend/templates/communications/chat_detail.html
+++ b/backend/templates/communications/chat_detail.html
@@ -303,12 +303,14 @@
   {# ========== THIRD-PARTY ========== #}
   <script type="module" src="{% static 'vendor/emoji-picker/index.js' %}"></script>
   
-  {# ========== CHAT DETAIL - NEW ENHANCED VERSION ========== #}
-  <script type="module" src="{% static 'js/chat-detail-enhanced.js' %}"></script>
-  
   {# ========== CHAT DETAIL PAGE - CORE FUNCTIONALITY ========== #}
+  {# chatDetail.js инициализирует все компоненты в правильном порядке #}
   <script type="module" src="{% static 'js/pages/chatDetail.js' %}"></script>
   
+  {# ========== CHAT DETAIL - UI ENHANCEMENTS ========== #}
+  {# Реакции, контекстное меню, выделение, голосования #}
+  <script type="module" src="{% static 'js/chat-detail-enhanced.js' %}"></script>
+  
   <script>
     // Блокировка объявления
     async function blockAnnouncement(chatId) {