# Умный автоскролл в чате

## ✅ Реализовано

Добавлен "умный автоскролл" по аналогии с современными мессенджерами (Telegram, WhatsApp, Discord).

## 🎯 Как это работает

### Логика автоскролла при получении нового сообщения:

```
НОВОЕ СООБЩЕНИЕ ПРИШЛО
    ↓
Проверяем условия:
    ↓
    ├─ Это МОЁ сообщение? → ДА → Скролл вниз ✅
    │
    └─ Это ЧУЖОЕ сообщение?
           ↓
           ├─ Я внизу чата (< 100px)? → ДА → Скролл вниз ✅
           │
           └─ Читаю историю? → ДА → Показать индикатор "Новые сообщения" 🔔
```

### Три сценария:

1. **Я отправил сообщение** → всегда скроллим вниз
2. **Пришло чужое сообщение + я внизу** → скроллим вниз (активно читаю)
3. **Пришло чужое сообщение + читаю историю** → показываем индикатор

## 📁 Изменённые файлы

### 1. `chatController.js` - основная логика

**Добавлено:**
- Свойства `newMessagesCount` и `newMessagesBtn` в конструктор
- Метод `_showNewMessagesIndicator()` - показать индикатор
- Метод `_hideNewMessagesIndicator()` - скрыть индикатор
- Метод `_findOrCreateNewMessagesButton()` - создать кнопку
- Метод `_initScrollWatcher()` - отслеживание скролла
- Вызов `_initScrollWatcher()` в `init()`

**Изменено:**
- `_handleMessageAdded()` - умная логика автоскролла:

```javascript
// ДО (неправильно):
const shouldScroll = message.author_id === this.currentUserId;

// ПОСЛЕ (правильно):
const isMyMessage = message.author_id === this.currentUserId;
const isAtBottom = this.scrollManager.isNearBottom();
const shouldScroll = isMyMessage || isAtBottom;

if (shouldScroll) {
    this.scrollManager.scrollToBottom({ instant: false });
    this._hideNewMessagesIndicator();
} else {
    this._showNewMessagesIndicator();
}
```

### 2. `chat-new-messages-indicator.css` - стили

**Создан новый файл:** `backend/static/css/components/chat-new-messages-indicator.css`

Включает:
- Позиционирование кнопки (правый нижний угол)
- Анимацию появления/исчезновения
- Hover/Active эффекты
- Адаптив для мобильных
- Поддержку тёмной темы

### 3. `chat_detail.html` - подключение стилей

**Добавлено:**
```django
<link rel="stylesheet" href="{% static 'css/components/chat-new-messages-indicator.css' %}">
```

## 🔧 Технические детали

### Порог "близко к низу"

```javascript
// ScrollManager.js
BOTTOM_THRESHOLD: 100  // пикселей
```

Если пользователь в пределах 100px от низа чата - считается что "внизу".

### Кнопка индикатора

Создаётся автоматически в JS:

```javascript
<button id="new-messages-btn" class="new-messages-indicator">
    <svg>↓</svg>
    <span class="badge">3</span> новых сообщения
</button>
```

При клике:
- Скроллит вниз с `force: true`
- Сбрасывает счётчик
- Скрывает кнопку

### Автоматическое скрытие

При ручном скролле вниз (debounce 150ms):
```javascript
if (this.scrollManager.isNearBottom()) {
    this._hideNewMessagesIndicator();
}
```

## 🎨 Внешний вид

### Кнопка:
- 📍 Позиция: правый нижний угол (20px отступ)
- 🎨 Цвет: синий (primary)
- 📏 Размер: 180px × 40px
- ✨ Анимация: плавное появление с pulse эффектом
- 🔢 Счётчик: бейдж с количеством новых сообщений

### Адаптив:
- На мобильных: меньше размер, меньше отступы
- Тёмная тема: более тёмный синий фон

## 📊 Сравнение с популярными мессенджерами

| Мессенджер | Порог | Индикатор | Наша реализация |
|------------|-------|-----------|-----------------|
| **Telegram** | ~150px | "↓ 5 новых" | ✅ 100px + счётчик |
| **WhatsApp** | ~100px | Зелёная стрелка | ✅ Синяя с счётчиком |
| **Discord** | ~50px | "New Messages" | ✅ "X новых сообщения" |
| **Slack** | ~100px | "Jump" button | ✅ Скролл вниз |

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

### Сценарий 1: Отправка своего сообщения
1. Прокрутить вверх (история)
2. Отправить сообщение
3. ✅ Должен автоматически скроллить вниз

### Сценарий 2: Получение чужого сообщения (внизу)
1. Находиться внизу чата
2. Получить чужое сообщение
3. ✅ Должен автоматически скроллить вниз

### Сценарий 3: Получение чужого сообщения (читаю историю)
1. Прокрутить вверх на 200px+
2. Получить чужое сообщение
3. ✅ Должна появиться кнопка "X новых сообщения"

### Сценарий 4: Клик по индикатору
1. Показан индикатор
2. Кликнуть по кнопке
3. ✅ Скроллит вниз + кнопка исчезает

### Сценарий 5: Ручной скролл вниз
1. Показан индикатор
2. Вручную прокрутить вниз
3. ✅ Кнопка автоматически исчезает

## 🐛 Известные особенности

1. Кнопка создаётся динамически в JS (не в HTML шаблоне)
2. Счётчик увеличивается на каждое новое сообщение пока читаем историю
3. Сбрасывается при скролле вниз или клике по кнопке

## 🔄 Связанные файлы

- `backend/static/js/controllers/chatController.js` - основная логика
- `backend/static/js/managers/scrollManager.js` - `isNearBottom()`
- `backend/static/css/components/chat-new-messages-indicator.css` - стили
- `backend/templates/communications/chat_detail.html` - подключение CSS

## 📝 Логирование

Все действия логируются в консоль:

```javascript
[ChatController] New message: {
    id: 123,
    isMyMessage: false,
    isAtBottom: false,
    shouldScroll: false
}
[ChatController] New messages indicator shown: 1
```

## 🚀 Следующие шаги (опционально)

- [ ] Добавить звуковое уведомление при новом сообщении
- [ ] Добавить вибрацию на мобильных
- [ ] Сделать порог настраиваемым (в настройках пользователя)
- [ ] Добавить плавную анимацию скролла (smooth scroll)
- [ ] Показывать preview последнего сообщения в индикаторе