Milliy AI — клиент Next.js для чат-ассистента

Современный фронтенд на Next.js 14 (App Router) и Tailwind CSS 4 для общения с бэкендом Milliy AI. Поддерживает регистрацию, подтверждение e‑mail, вход, личный профиль, список чатов, потоковые ответы ИИ через WebSocket и загрузку файлов.

• Framework: Next.js 14, React 18, TypeScript
• UI: Tailwind CSS 4, Radix UI, и набор компонентов (shadcn‑style)
• Формы и валидация: react-hook-form + zod
• ИИ-чат: WebSocket стриминг, загрузка файлов, уведомления (toasts)

Содержание

• Возможности
• Требования
• Быстрый старт
• Переменные окружения
• Скрипты
• Структура проекта
• Ключевая логика
• Деплой
• FAQ / Троблшутинг

Возможности

• Регистрация и подтверждение e‑mail, вход по JWT токену
• Редирект на /chat после авторизации, иначе — на /login
• Профиль пользователя (/profile)
• Список комнат чата, создание новой комнаты
• Потоковые ответы ИИ по WebSocket с типами событий: ai_start, ai_chunk, ai_end, ai_file, error
• Загрузка файлов и отображение сгенерированных файлов от ИИ
• Темизация, тосты, адаптивная вёрстка, мобильная боковая панель

Требования

• Node.js >= 18.17 (LTS рекомендован)
• pnpm >= 9 (рекомендуется, т.к. в репозитории есть pnpm-lock.yaml)

Проверить версии (Windows, cmd):

node -v
pnpm -v

Быстрый старт (локально)

1. Установите зависимости

pnpm install

2. Создайте файл .env.local и задайте переменные (см. .env.example)

copy .env.example .env.local

При необходимости измените адреса API/WS на свои.

3. Запустите в режиме разработки

pnpm dev

Откройте http://localhost:3000

4. Production-сборка и запуск

pnpm build
pnpm start

Переменные окружения

Публичные переменные (используются на клиенте):

• NEXT_PUBLIC_API_URL — базовый URL REST API бэкенда.
  • По умолчанию в коде: https://ai-back.milliytech.uz
  • Использование: lib/api.ts
• NEXT_PUBLIC_WS_URL — базовый URL WebSocket-сервера.
  • По умолчанию в коде: wss://ai-back.milliytech.uz
  • Использование: lib/websocket.ts

Создайте .env.local (или используйте .env.example) и переопределите значения при необходимости.

Пример:

NEXT_PUBLIC_API_URL=https://your-backend.example.com
NEXT_PUBLIC_WS_URL=wss://your-backend.example.com

Скрипты

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

• pnpm dev — запуск dev-сервера
• pnpm build — продакшн-сборка
• pnpm start — запуск собранного приложения
• pnpm lint — линтинг (ошибки линтера игнорируются на сборке согласно next.config.mjs)

Структура проекта (основное)

• app/ — маршруты (App Router)
  • page.tsx — редирект в зависимости от наличия токена (login/chat)
  • login/, register/, profile/, chat/ — страницы
• components/ — UI и страницы/виджеты
  • auth/ — формы регистрации/логина/подтверждения
  • chat/ — шапка, панель чатов, сообщения, инпуты и т. п.
  • ui/ — переиспользуемые компоненты (Radix/shadcn‑style)
• hooks/
  • use-chat.ts — состояние чата, работа с WS и сообщениями
  • use-toast.ts — тосты
• lib/
  • api.ts — обёртка над REST API (регистрация, логин, токены, чаты, файлы)
  • websocket.ts — клиент WebSocket с реконнектом и отправкой сообщений
• public/ — статические файлы
• styles/ и app/globals.css — стили (Tailwind 4)

Ключевая логика

• Аутентификация: токены access/refresh хранятся в localStorage (client‑side). Вход/регистрация/подтверждение — через REST эндпоинты бэкенда.
• Чаты и сообщения: REST для получения комнат/истории; WebSocket для отправки и получения потоковых ответов ИИ.
• WebSocket:
  • URL строится как ${NEXT_PUBLIC_WS_URL}/ws/chat/{roomId}/?token={access}
  • Типы событий: ai_start, ai_chunk, ai_end, ai_file, error
  • Реализация и реконнект: lib/websocket.ts, интеграция — hooks/use-chat.ts
• Загрузка файлов: отправка FormData на ${NEXT_PUBLIC_API_URL}/api/v1/chat/resource/, возврат ID ресурса, который можно привязать к сообщению.

Файлы для ознакомления:

• lib/api.ts — базовые REST операции и работа с токенами
• lib/websocket.ts — класс ChatWebSocket
• hooks/use-chat.ts — управление состоянием чата, кеш сообщений, стриминг
• app/chat/page.tsx — склейка UI и хука useChat

Деплой

• Рекомендовано Vercel (Next.js 14). Установите переменные окружения проекта (Environment Variables) для NEXT_PUBLIC_API_URL и NEXT_PUBLIC_WS_URL.
• Учтите CORS и разрешение исходящего WebSocket‑трафика к вашему домену WS.
• В next.config.mjs отключены оптимизации изображений (images.unoptimized: true), а ошибки ESLint/TS игнорируются на сборке.

FAQ / Троблшутинг

• 401/403 при запросах: проверьте валидность access_token в localStorage, работу refresh токена (см. api.ts), а также домен в NEXT_PUBLIC_API_URL.
• WebSocket не подключается: проверьте NEXT_PUBLIC_WS_URL, токен в query‑строке, CORS/WS‑политику на бэкенде и наличие wss в проде.
• Сообщения не приходят/не стримятся: смотрите вкладку Network (WS) в DevTools и логи консоли (в коде предусмотрены сообщения об ошибках).
• Загрузка файлов: убедитесь, что бэкенд принимает multipart‑формат на /api/v1/chat/resource/ и пользователь авторизован (Bearer токен).

Лицензия

Проект приватный. Добавьте файл LICENSE при необходимости.