Corp/docs/in-progress/MESSAGES_LOADING_REFACTORING.md

Рефакторинг загрузки сообщений в чате

📊 Текущая ситуация

Модули для загрузки сообщений:

1. initialMessagesLoader.js - загрузка начальных сообщений через HTTP

   • Статус: ❌ ЗАКОММЕНТИРОВАН в chatDetail.js
   • Проблема: Дублирует функционал WebSocket

2. userWebSocket.js - WebSocket для всего приложения

   • Функция: handleInitialMessages()
   • Проблема: ✅ ИСПРАВЛЕНА - теперь удаляет лоадер даже для пустых чатов

3. chatHistoryLoader.js - подгрузка старых сообщений при скролле вверх

   • Статус: ✅ РАБОТАЕТ
   • Проблема: Нет - используется активно

4. messageRenderer.js - рендеринг сообщений в DOM

   • Статус: ✅ РАБОТАЕТ
   • Проблема: Дублирование логики с chatMessageTemplates.js

5. chatWebSocket.js - OLD WebSocket (устарел?)

   • Статус: ⚠️ DEPRECATED
   • Проблема: Дублирует userWebSocket.js

🎯 Проблемы архитектуры

1. Дублирование кода

• initialMessagesLoader.js полностью дублирует handleInitialMessages() в WebSocket
• chatWebSocket.js дублирует функционал userWebSocket.js
• Логика рендеринга размазана между несколькими модулями

2. Закомментированный код

• InitialMessagesLoader импортируется но не используется
• Создаёт путаницу и увеличивает размер бандла

3. Несогласованность

• Некоторые модули используют MessageRenderer
• Другие напрямую вызывают createMessageElement()
• Нет единого API для работы с сообщениями

4. Отсутствие единой точки управления

• Загрузка сообщений происходит в разных местах
• Сложно отследить последовательность событий
• Трудно дебажить

✅ План рефакторинга

Фаза 1: Очистка мертвого кода

• Удалить initialMessagesLoader.js (не используется)
• Проверить использование chatWebSocket.js
• Если не используется - удалить

Фаза 2: Унификация рендеринга

• Создать единый MessagesService или расширить MessageRenderer
• Все модули должны использовать один API для рендеринга
• Убрать прямые вызовы createMessageElement()

Фаза 3: Централизация загрузки

Создать единый сервис ChatMessagesLoader:

class ChatMessagesLoader {
  constructor({ chatId, messageRenderer, websocket }) {
    this.chatId = chatId;
    this.messageRenderer = messageRenderer;
    this.ws = websocket;
    this.historyLoader = null;
  }
  
  // Начальная загрузка через WebSocket
  async loadInitial() {
    // Уже реализовано в userWebSocket.handleInitialMessages()
  }
  
  // Загрузка истории при скролле
  async loadHistory(beforeId) {
    // Использует chatHistoryLoader
  }
  
  // Загрузка конкретного сообщения
  async loadMessage(messageId) {
    // Новая функция
  }
}

Фаза 4: Упрощение chatDetail.js

• Убрать импорт неиспользуемых модулей
• Упростить инициализацию
• Сделать код более читаемым

📋 Детальный план действий

Шаг 1: Аудит использования модулей

Проверить где используется:

• initialMessagesLoader.js - ✅ ТОЛЬКО импорт в chatDetail.js (не используется)
• chatWebSocket.js - ? Нужна проверка
• MessageRenderer - ✅ Активно используется

Шаг 2: Безопасное удаление

1. Удалить импорт InitialMessagesLoader из chatDetail.js
2. Удалить файл initialMessagesLoader.js
3. Проверить что ничего не сломалось

Шаг 3: Проверка chatWebSocket.js

Найти все места использования:

grep -r "chatWebSocket" backend/static/js/**/*.js
grep -r "initChatWebSocket" backend/templates/**/*.html

Если не используется - удалить.

Шаг 4: Унификация MessageRenderer

Текущие вызовы:

• messageRenderer.renderMessage(msg) - ✅ Хорошо
• messageRenderer.renderMessages(messages) - ✅ Хорошо
• createMessageElement(msg, options) - ❌ Плохо (прямой вызов)

Решение:

// Все должны использовать MessageRenderer
messageRenderer.renderMessage(msg);

// Вместо прямого createMessageElement()

Шаг 5: Документация

После рефакторинга обновить:

• CHAT_PAGE_RENDERING_ARCHITECTURE.md
• Добавить диаграммы потока данных
• Описать API всех модулей

🎨 Итоговая архитектура

┌─────────────────────────────────────────┐
│         Chat Detail Page                │
└─────────────────────────────────────────┘
                  │
                  ▼
    ┌─────────────────────────────┐
    │   chatDetail.js (main)      │
    └─────────────────────────────┘
                  │
      ┌───────────┼───────────┐
      ▼           ▼           ▼
┌──────────┐ ┌────────┐ ┌────────────┐
│ userWS   │ │Renderer│ │HistoryLoad │
│(initial) │ │        │ │(scroll up) │
└──────────┘ └────────┘ └────────────┘
      │           │           │
      └───────────┴───────────┘
                  │
                  ▼
        ┌──────────────────┐
        │  MessageRenderer │
        │  (single API)    │
        └──────────────────┘
                  │
                  ▼
        ┌──────────────────┐
        │   DOM (chat)     │
        └──────────────────┘

⚠️ Риски

1. Разрыв обратной совместимости

   • Решение: Тщательное тестирование после каждого шага

2. Потеря функциональности

   • Решение: Написать тесты до рефакторинга

3. Регрессия в других частях приложения

   • Решение: Проверить все страницы с чатами

🧪 Тестирование

После каждого шага проверять:

• Начальная загрузка сообщений работает
• Загрузка истории при скролле работает
• Новые сообщения появляются в реальном времени
• Пустые чаты отображаются корректно
• Лоадер корректно скрывается
• Индикатор "печатает" работает
• Отметка "прочитано" работает

📝 Статус выполнения

• Исправлен баг с лоадером в пустых чатах (userWebSocket.js)
• Удалить initialMessagesLoader.js
• Проверить chatWebSocket.js
• Унифицировать API рендеринга
• Обновить документацию
• Написать тесты

🔄 Следующие шаги

1. Получить одобрение плана
2. Начать с Фазы 1 (удаление мертвого кода)
3. Тестировать после каждого изменения
4. Закомитить изменения маленькими порциями