Автопилот — Frontend

Веб-интерфейс AI-менеджера «Автопилот»: публичный лендинг, авторизация и кабинет для работы с диалогами, базой знаний, каналами и аналитикой.

• Production: автопилот.space
• Backend: Project-AI-manager/Backend
• Обзор проекта: Project-AI-manager/Main

Что реализовано

• лендинг и юридические страницы;
• регистрация, вход, подтверждение email и восстановление сессии;
• защищённый кабинет с автоматическим refresh JWT;
• одноразовый интерактивный тур по основным разделам;
• диалоги Telegram с аватарками, статусами доставки и группировкой сообщений;
• оптимистичное отображение текста и вложений без ожидания ответа API;
• множественный выбор файлов и текст под вложениями;
• база знаний, загрузка материалов и ручное обновление индекса;
• кандидаты в знания из реальных ответов менеджера;
• подключение и управление каналами связи;
• настройки модели, автоответов и порога уверенности;
• аналитика за период и подробная XLSX-выгрузка;
• профиль и настройки email-уведомлений.

Полностью рабочий канальный сценарий сейчас реализован для Telegram. Остальные каналы могут отображаться как «скоро» и не должны восприниматься как готовые интеграции.

Стек

• Next.js 16, App Router;
• React 19 и TypeScript;
• Tailwind CSS 4;
• TanStack Query;
• Axios;
• React Hook Form и Zod;
• Zustand;
• Orval для генерации API-клиента;
• Vitest и Testing Library.

Маршруты

Маршрут	Назначение
/	Лендинг «Автопилота»
/login	Вход
/register	Регистрация
/verify-email	Подтверждение email
/inbox	Диалоги с клиентами
/knowledge	Документы и база знаний
/channels	Подключение каналов связи
/analytics	Метрики и выгрузка отчёта
/settings	Модель, автоответы, уверенность и команда
/profile	Профиль и уведомления
/onboarding	Дополнительный маршрут первоначальной настройки
/legal/privacy	Политика конфиденциальности
/legal/terms	Пользовательские условия

Локальный запуск

Требуется актуальная LTS-версия Node.js и запущенный backend.

Copy-Item .env.example .env.local
npm install
npm run dev

По умолчанию приложение доступно на http://localhost:3000.

.env.local:

NEXT_PUBLIC_API_URL=http://localhost:8000

NEXT_PUBLIC_API_URL используется браузером и поэтому не является секретом. Не помещайте в NEXT_PUBLIC_* API-ключи, пароли или приватные токены.

Backend должен разрешать адрес frontend в CORS_ORIGINS.

Доступные команды

npm run dev       # dev-сервер с Webpack
npm run build     # production-сборка
npm run start     # запуск production-сборки
npm run lint      # ESLint
npm test          # Vitest
npm run test:watch
npm run api:gen   # обновление клиента по OpenAPI

Авторизация

После входа или регистрации frontend сохраняет access/refresh-токены, защищает маршруты кабинета и автоматически обновляет access-токен после 401. Если refresh-токен больше не действителен, сессия очищается и пользователь возвращается на /login.

Кнопка выхода очищает локальные токены и кеш запросов.

Обучение нового пользователя

Product tour ведёт пользователя по разделам кабинета и объясняет ключевые действия. Он считается пройденным только после нажатия «Готово» или «Пропустить»; промежуточное закрытие страницы не должно навсегда скрывать обучение.

Статус хранится на backend для конкретного пользователя, а не только в браузере. Поэтому новый аккаунт получает обучение независимо от того, открывался ли сайт ранее с этого устройства.

Диалоги

Интерфейс /inbox поддерживает:

• входящие и исходящие сообщения;
• переносы строк и адаптивную ширину сообщений;
• Telegram-аватарки клиентов;
• оптимистичную отправку без блокировки поля ввода;
• статусы отправки, доставки и прочтения;
• автопрокрутку только когда пользователь находится около конца диалога;
• изображения, документы, таблицы и аудио;
• несколько файлов в одном сообщении;
• скачивание вложений;
• сохранение возможности писать в закрытом диалоге;
• скачивание истории диалога.

База знаний

На /knowledge пользователь загружает PDF, DOCX, XLSX, TXT и Markdown. Сам факт загрузки не обновляет векторный индекс: после изменений нужно нажать «Обновить базу знаний».

Операции показывают краткие уведомления рядом с действием. Удаление документа требует явного выбора через меню и оптимистично убирает карточку из списка.

Каналы

Раздел /channels отвечает за подключение, изменение и удаление каналов. Telegram подключается как личный аккаунт через номер телефона, код подтверждения и, при необходимости, пароль 2FA.

Telegram API credentials и session string никогда не должны попадать во frontend: браузер работает только с безопасными endpoint backend.

Аналитика

Экран /analytics показывает показатели за выбранный период. Подробный XLSX-отчёт включает данные по дням, клиентам и диалогам: активность, сообщения, автоответы, эскалации и доступные сведения о расходе токенов.

Нулевые токены в старых строках означают, что для этих сообщений usage ещё не сохранялся, а не ошибку Excel.

API-клиент

Часть типов и запросов генерируется Orval из OpenAPI backend:

npm run api:gen

Перед генерацией убедитесь, что источник OpenAPI в конфигурации Orval указывает на актуальный backend. Генерируемые файлы не редактируются вручную, если те же изменения можно внести в схему API.

Структура

app/                 # страницы, layouts и route-specific UI
components/          # переиспользуемые компоненты и product tour
lib/                 # API, auth, hooks, state и утилиты
public/              # статические изображения и иконки
tests/               # Vitest / Testing Library
orval.config.ts      # генерация API-клиента

Проверка перед публикацией

npm run lint
npm test
npm run build

Минимальная ручная проверка:

1. регистрация, подтверждение email, вход и выход;
2. появление и завершение обучения на новом аккаунте;
3. загрузка документа и обновление базы знаний;
4. подключение Telegram;
5. приём и отправка текста и нескольких вложений;
6. автоответ и передача менеджеру;
7. выбор периода и выгрузка XLSX.

Vercel

Frontend развёрнут на Vercel и привязан к Unicode-домену автопилот.space. В DNS и внутренних системах он может отображаться как xn--80aesmncewf.space — это стандартное IDNA/Punycode-представление кириллического домена.

Для production задайте NEXT_PUBLIC_API_URL в Vercel и выполните новый deployment. Сейчас backend временно работает локально через HTTPS-туннель, поэтому публичный интерфейс полностью функционален только пока backend и туннель запущены. URL Quick Tunnel меняется после перезапуска и требует обновления переменной окружения с повторной публикацией frontend.

Целевая конфигурация — постоянный HTTPS-адрес backend без зависимости от локального компьютера.