BotHub Chat App

Ready hosting

P.S. Пока выбирал домен, кажется, наткнулся на ваш Storybook

Usage

Для запуска локального приложения используются скрипты NPM:

• npm run build + npm run start

или просто npm run dev для dev-режима

Important

Перед запуском сервера убедитесь, что у вас присутствует файл .env со следующими ключами:

• VITE_API_BASE_URL=тело_апи
• VITE_API_AUTH_TOKEN=bearer_токен

Tech-Stack

За основу проекта был взят сборщик Vite с темплейтом React TypeScript

Сторонние библиотеки/пакеты:

• Redux Toolkit - стейт-менеджер (совместно с react-redux)
• RTK Query - апи с готовыми запросами/кешами/инвалидацией
• EventSource (именно как пакет) - стандартное апи JS не позволяет использовать встроенный класс EventSource совместно с любыми заголовками. Поскольку по условиям тестового задания нужно было использовать заголовок Authorization (Bearer) для доступа к методам апи, пришлось найти альтернативное решение (эндпоинт /stream для сообщений недоступен без токена)
• Styled Components - стилизация компонентов в формате CSS-in-JS
• Sonner - небольшая библиотека для тостеров/пушей
• React Transition Group - реализация плавных переходов ДО очистки элемента из DOM-дерева
• React Markdown (совместно с rehype-sanitize плагином) - для преобразования текста в формат Markdown (используется в чате с ботом)
• Lucide - пакет с набором иконок

Все заимствованные библиотеки довольно популярны и использованы строго по назначению

Для всех альтернативных/собственных решений были написаны хуки и хелперы

Comments

В качестве основного инструмента для работы с асинхронщиной использовал RTK Query, поскольку, считаю, что это лучший выбор для быстрого и чистого написания запросов апи и мутаций

Стейт-менеджер Toolkit для хранения и реализации бизнес-логики чатов/сообщений НЕ ИСПОЛЬЗУЕТСЯ, поскольку для этих целей предназначены кеши RTK Query!

Однако в entities имеется два слайса Redux, которые выполняют собственную небольшую логику, так что технически условия тестового задания *об использовании стейт-менеджера** были выполнены

Для реализации realtime обновлений сообщений бота использовал собственный хук useChatSSE, который выполнял обновление кеша для сообщения чата каждый раз, когда приходил потоковый ответ от SSE-ивента

Bugs probably

Логика выбора модели чат-бота при создании нового чата реализована при помощи select-компонента, однако я заметил, что боты с другими предустановленными моделями (помимо gpt) некорректно отвечают пользователю: Midjourney отправляет сообщения, которые вечно находятся в статусе PENDING, а остальные просто отправляют нулевые значения в ответ

End

Спасибо за внимание, будьте строги и справедливы при оценивании)