@bash-dev/ai-chat-widget

# AI Chat Widget Готовый к использованию AI чат-виджет для интеграции на любые сайты с полной поддержкой русского языка. ## ✨ Особенности - 🚀 **Простая интеграция** - всего одна строка кода для подключения - 🇷🇺 **Русский язык** - полная поддержка русского языка по умолчанию - 🎨 **Настраиваемый дизайн** - легко изменить цвета и расположение - 📱 **Адаптивность** - отлично работает на мобильных устройствах - 💬 **Поддержка администраторов** - отправка сообщений от живых операторов - 🔔 **Уведомления** - push-уведомления о новых сообщениях - 📊 **Сбор данных пользователей** - автоматический сбор контактной информации - 🔒 **Безопасность** - валидация сайтов и защищенные API - 📈 **Аналитика** - отслеживание сессий и сообщений ## 📦 Установка ### Через npm ```bash npm install ai-chat-widget ``` ### Прямое подключение ```html <script src="https://unpkg.com/ai-chat-widget@latest/dist/ai-chat-widget.min.js"></script> ``` ## 🚀 Быстрый старт ### Базовая интеграция ```html <!DOCTYPE html> <html> <head> <title>Мой сайт</title> </head> <body>   <script src="https://unpkg.com/ai-chat-widget@latest/dist/ai-chat-widget.min.js" data-ai-chat data-api-url="https://aisaleschat.ru/api" data-site-id="your-site-id" data-title="Поддержка" data-subtitle="Задайте любой вопрос 😊" data-primary-color="#1890ff"> </script> </body> </html> ``` ### Использование в React ```jsx import { useEffect } from 'react'; import AIChatWidget from 'ai-chat-widget'; function App() { useEffect(() => { const widget = AIChatWidget.init({ apiUrl: 'https://aisaleschat.ru/api', siteId: 'your-site-id', title: 'Поддержка', subtitle: 'Задайте любой вопрос 😊', primaryColor: '#1890ff' }); return () => { // Очистка при размонтировании widget.destroy?.(); }; }, []); return ( <div className="App"> {/* Ваш контент */} </div> ); } ``` ### Использование в Vue.js ```vue <template> <div id="app">  </div> </template> <script> import AIChatWidget from 'ai-chat-widget'; export default { name: 'App', mounted() { this.initChatWidget(); }, methods: { initChatWidget() { AIChatWidget.init({ apiUrl: 'https://aisaleschat.ru/api', siteId: 'your-site-id', title: 'Поддержка', subtitle: 'Задайте любой вопрос 😊', primaryColor: '#1890ff' }); } } } </script> ``` ## ⚙️ Конфигурация ### Атрибуты data-* При подключении через script тег, вы можете использовать data-атрибуты: | Атрибут | Описание | По умолчанию | |---------|----------|--------------| | `data-api-url` | URL вашего API | `http://localhost:3000/api` | | `data-site-id` | Уникальный ID сайта | `сайт 1` | | `data-title` | Заголовок виджета | `ИИ Помощник` | | `data-subtitle` | Подзаголовок | `Задайте любой вопрос 😊` | | `data-primary-color` | Основной цвет | `#1890ff` | | `data-position` | Позиция на странице | `bottom-right` | | `data-show-toast` | Показывать уведомления | `true` | | `data-toast-message` | Текст уведомления | `Привет! Есть вопросы?` | | `data-toast-delay` | Задержка уведомления (мс) | `2000` | | `data-toast-duration` | Длительность показа (мс) | `10000` | ### Программная конфигурация ```javascript const widget = AIChatWidget.init({ // Обязательные параметры apiUrl: 'https://aisaleschat.ru/api', siteId: 'your-site-id', // Внешний вид title: 'Поддержка', subtitle: 'Мы онлайн!', primaryColor: '#667eea', position: 'bottom-right', // bottom-right, bottom-left, top-right, top-left // Тексты greeting: 'Привет! Чем могу помочь?', placeholder: 'Введите сообщение...', // Уведомления showToast: true, toastMessage: 'Привет! Есть вопросы? Готов помочь! 😊', toastDelay: 3000, toastDuration: 8000 }); ``` ## 🎨 Кастомизация стилей Виджет поддерживает CSS переменные для кастомизации: ```css :root { --ai-chat-primary-color: #1890ff; --ai-chat-border-radius: 12px; --ai-chat-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --ai-chat-box-shadow: 0 8px 30px rgba(0,0,0,0.3); } ``` ### Полная кастомизация стилей ```css /* Переопределение стилей виджета */ .ai-chat-widget .chat-window { border-radius: 20px; box-shadow: 0 10px 40px rgba(0,0,0,0.2); } .ai-chat-widget .chat-toggle { background: linear-gradient(45deg, #667eea, #764ba2); } .ai-chat-widget .message-bubble.user { background: linear-gradient(45deg, #667eea, #764ba2); } ``` ## 🛠 API ### Методы #### `AIChatWidget.init(config)` Инициализирует виджет с заданной конфигурацией. ```javascript const widget = AIChatWidget.init({ apiUrl: 'https://aisaleschat.ru/api', siteId: 'my-site' }); ``` #### `widget.openChat()` Программно открывает чат. #### `widget.closeChat()` Программно закрывает чат. #### `widget.sendMessage(text, sender)` Программно отправляет сообщение. ```javascript widget.sendMessage('Привет от системы!', 'admin'); ``` #### `widget.showToast()` Показывает уведомление. #### `widget.hideToast()` Скрывает уведомление. ### События ```javascript // Слушаем события виджета document.addEventListener('ai-chat:ready', () => { console.log('Виджет готов'); }); document.addEventListener('ai-chat:open', () => { console.log('Чат открыт'); }); document.addEventListener('ai-chat:close', () => { console.log('Чат закрыт'); }); document.addEventListener('ai-chat:message', (event) => { console.log('Новое сообщение:', event.detail); }); ``` ## 🔧 Backend Integration Для работы виджета необходим backend API со следующими endpoints: ### POST `/api/chat` Отправка сообщения пользователя. ```javascript // Request { "message": "Привет!", "siteId": "my-site", "sessionId": "session-123", "userInfo": { "user_name": "Иван", "user_email": "ivan@example.com" } } // Response { "message": "Привет! Как дела?", "sessionId": "session-123", "aiEnabled": true } ``` ### GET `/api/chat/:sessionId/messages` Получение истории сообщений. ```javascript // Response { "messages": [ { "content": "Привет!", "sender": "user", "timestamp": "2024-01-01T12:00:00Z" }, { "content": "Как дела?", "sender": "ai", "timestamp": "2024-01-01T12:00:01Z" } ] } ``` ### GET `/api/site/:siteId/validate` Валидация сайта. ```javascript // Response { "valid": true, "name": "Мой сайт", "about": "Описание сайта" } ``` ## 📱 Мобильная адаптация Виджет автоматически адаптируется под мобильные устройства: - На экранах менее 400px ширины чат занимает почти весь экран - Touch-friendly кнопки и поля ввода - Оптимизированные размеры шрифтов - Адаптивные отступы и размеры ## 🔒 Безопасность - Валидация всех входящих данных - Защита от XSS атак - Ограничение API requests - Валидация домена сайта ## 🐛 Отладка Включите debug режим для получения подробных логов: ```javascript AIChatWidget.init({ apiUrl: 'https://aisaleschat.ru/api', siteId: 'my-site', debug: true // Включает подробное логирование }); ``` ## 🤝 Поддержка - 📧 Email: support@yourcompany.com - 📞 Телефон: +7 (999) 123-45-67 - 💬 Telegram: @yoursupport - 🌐 Документация: https://docs.yourcompany.com ## 📄 Лицензия MIT License - см. файл [LICENSE](LICENSE) для подробностей. ## 🔄 Changelog ### v1.0.0 - ✨ Первый релиз - 🚀 Базовая функциональность чата - 🎨 Настраиваемый дизайн - 📱 Мобильная адаптация - 🔔 Push уведомления - 📊 Сбор данных пользователей --- Создано с ❤️ для русскоязычных проектов