# 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>
    <!-- Ваш контент -->
    
    <!-- AI Chat Widget -->
    <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 уведомления
- 📊 Сбор данных пользователей

---

Создано с ❤️ для русскоязычных проектов