Задание: Веб-программист. Интегрировать AI-чат в стиле OpenAI ChatGPT в существующий HTML-шаблон (Дистанционная работа)
# Краткое описание задания: Интеграция AI-чата
## Суть задачи
Необходимо создать полноценный чат-виджет в стиле OpenAI ChatGPT для сайта по продаже автозапчастей. Виджет должен заменить текущий простой input и обеспечить удобное общение пользователей с AI-консультантом.
## Что нужно сделать
### 1. Верстка компонента
- Создать фиксированный виджет чата (правый нижний угол)
- Реализовать кнопку открытия/закрытия
- Сделать область с историей сообщений
- Добавить поле ввода с кнопкой отправки
- Стилизовать в стиле ChatGPT (зеленая тема)
### 2. Функционал
- Отправка сообщений по Enter или кнопке
- Разные стили для сообщений пользователя (справа, зеленые) и AI (слева, белые)
- Анимированный индикатор загрузки
- Автопрокрутка к последнему сообщению
- Сохранение истории в localStorage
### 3. Интеграция с API
- Использовать существующую библиотеку `behaviour-chat.min.js`
- Подключить все необходимые data-атрибуты
- Обработать потоковый вывод ответов (streaming)
- Добавить обработку ошибок с понятными сообщениями
### 4. Адаптивность
- **Десктоп**: Виджет 400x600px в углу
- **Планшет**: Виджет 380x550px
- **Мобильный**: Полноэкранный режим (100% экрана)
## Что нужно создать
### Файлы:
1. **chat.css** - все стили для чата (БЭМ-методология)
2. **chat-widget.js** - JavaScript логика (Vanilla JS, ES6+)
3. **README.md** - инструкция по подключению
### Модификация:
- **index.html** - заменить текущий простой input на новый виджет
## ️ Технические требования
- **Язык**: Чистый JavaScript (ES6+), без фреймворков
- **Стили**: CSS3, БЭМ-именование классов
- **Браузеры**: Chrome 90+, Firefox 88+, Safari 14+, Edge 90+
- **Производительность**: Загрузка < 1 сек, отклик < 100ms
- **Доступность**: ARIA-атрибуты, навигация с клавиатуры
## Дизайн
**Стиль**: OpenAI ChatGPT
**Цвета**: Зеленая палитра (#10a37f основной)
**Шрифт**: Системный (San Francisco, Segoe UI, Roboto)
### Состояния:
- Закрыт (только кнопка)
- Открыт с приветствием
- Диалог с историей
- Загрузка ответа
- Ошибка
## Обязательно (Must Have)
- Работающий чат с красивым UI
- Отправка/получение сообщений
- Индикатор загрузки
- Адаптив для всех устройств
- Интеграция с существующим API
- Обработка ошибок
## Желательно (Should Have)
- Сохранение истории между сессиями
- Счетчик непрочитанных сообщений
- Плавные анимации
- Восстановление истории при перезагрузке
## Опционально (Nice to Have)
- Кнопка очистки истории
- Копирование текста сообщений
- Темная/светлая тема
- Экспорт истории в файл
## Сроки
**Общий срок**: 6 рабочих дней
- День 1-2: Верстка компонента
- День 3-4: JavaScript + интеграция API
- День 5: Тестирование и адаптив
- День 6: Правки и документация
## Результат
После выполнения задания вы предоставите:
1. **3 файла с кодом** (chat.css, chat-widget.js, модифицированный index.html)
2. **README.md** с инструкцией по установке и использованию
3. **Рабочий демонстрационный пример** на вашем хостинге или CodePen
## Что прилагается
К этому заданию приложено **полное техническое задание** с:
- Детальной спецификацией всех компонентов
- Примерами кода и структуры
- Описанием API и форматов данных
- Полными CSS-стилями
- Требованиями к accessibility
- Сценариями использования
- Критериями приемки
**Пожалуйста, внимательно изучите полное ТЗ перед началом работы!**
## Вопросы?
Если что-то непонятно или нужны уточнения - спрашивайте до начала работы. Лучше уточнить детали сразу, чем переделывать потом.
---
Полное описание тз во вложении, доступ к репозиторию предоставлю
