@mobilon-dev/chotto 0.3.39 → 0.3.40

package/README.md

@@ -1,392 +1,392 @@
-# Chotto UI
-
-🚀 **Vue 3 UI библиотека компонентов для создания современных чат-интерфейсов и AI-ассистентов**
-
-[![Vue 3](https://img.shields.io/badge/Vue-3.5.15+-green.svg)](https://vuejs.org/)
-[![TypeScript](https://img.shields.io/badge/TypeScript-5.8.3+-blue.svg)](https://www.typescriptlang.org/)
-[![License](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE)
-
-## 📖 Документация и ресурсы
-
-- 📚 **[Документация](https://mobilon-dev.github.io/chotto-docs/)** - Полное руководство по использованию
-- 🎨 **[Storybook](https://mobilon-dev.github.io/chotto/)** - Интерактивные примеры 20+ компонентов
-- 🎯 **[Демо-приложения](https://mobilon-dev.github.io/chotto-demo/)** - 10 готовых примеров использования
-- 💬 **[Telegram чат разработчиков](https://t.me/chottodev)** - Сообщество и поддержка
-
-## 🖼️ Скриншоты
-
-![Chotto UI Screenshot](images/screenshot8.png)
-
-## 🎥 Видео-обзоры
-
-- [Chotto 01: Welcome](https://youtu.be/LbtXeR_P9fs) - Введение в библиотеку
-- [Chotto 02: WABA templates](https://youtu.be/bwhcn6KAn28) - Работа с шаблонами WABA
-
-## ✨ Возможности
-
-### 🎨 **Богатый набор компонентов**
-- **20+ готовых компонентов** для создания чат-интерфейсов
-- **Модульная архитектура** - используйте только нужные компоненты
-- **TypeScript поддержка** - полная типизация всех компонентов
-
-### 💬 **Множественные типы сообщений**
-- 📝 Текстовые сообщения с поддержкой Markdown
-- 🖼️ Изображения с превью и галереей
-- 🎵 Аудио сообщения с плеером
-- 🎬 Видео сообщения с встроенным плеером
-- 📎 Файлы с превью и загрузкой
-- 📞 Звонки с транскрипцией
-- 🎭 Стикеры (включая анимированные)
-- 💬 Ответы на сообщения
-- 😊 Эмодзи-реакции на сообщения
-- 📅 Разделители дат
-- ⚙️ Системные уведомления
-- ⌨️ Индикатор печати
-
-### 🎯 **Продвинутые функции**
-- 🔍 **Поиск по сообщениям** с подсветкой результатов
-- 📱 **Адаптивные макеты** для всех устройств
-- 🎨 **3 готовые темы**: светлая, темная, зеленая
-- 🌍 **Многоязычность**: русский и английский
-- 🔔 **Система уведомлений** в реальном времени
-- 📊 **Просмотры сообщений** с счетчиками
-- 🔗 **Предпросмотр ссылок** с метаданными
-- 🎵 **Встроенные медиаплееры** (YouTube, Яндекс.Музыка, Rutube, VK)
-- ⌨️ **Клавиатуры быстрых ответов**
-- 📝 **Шаблоны сообщений** (WABA, групповые)
-- 🎤 **Запись аудио и видео**
-- 😊 **Поддержка эмодзи**
-- ⚙️ **Контекстное меню сообщений** с настраиваемыми действиями
-- ✅ **Статусы доставки сообщений** (отправка, доставлено, прочитано, ошибка)
-- 💾 **Загрузка медиафайлов** (изображения, видео, аудио)
-
-### 🏗️ **Гибкая архитектура**
-- **Layouts** - определяют структуру интерфейса
-- **Containers** - высокоуровневые обертки
-- **Components** - переиспользуемые UI элементы
-- **Messages** - типизированные компоненты сообщений
-- **Modals** - диалоговые окна
-
-## 🚀 Быстрый старт
-
-### Установка
-
-```bash
-npm install @mobilon-dev/chotto
-```
-
-### Базовое использование
-
-```vue
-<template>
-  <div class="chat-app">
-    <BaseContainer height="90vh" width="90vw">
-      <ExtendedLayout>
-        <!-- Боковая панель -->
-        <template #first-col>
-          <SideBar :sidebar-items="sidebarItems" />
-          <ThemeMode :themes="themes" />
-        </template>
-        
-        <!-- Список чатов -->
-        <template #second-col>
-          <ChatList 
-            :chats="chats" 
-            @select="selectChat"
-          />
-        </template>
-        
-        <!-- Область чата -->
-        <template #third-col>
-          <ChatWrapper>
-            <ChatInfo :chat="selectedChat" />
-            <Feed :objects="messages" />
-            <ChatInput @send="sendMessage" />
-          </ChatWrapper>
-        </template>
-      </ExtendedLayout>
-    </BaseContainer>
-  </div>
-</template>
-
-<script setup>
-import {
-  BaseContainer,
-  ExtendedLayout,
-  SideBar,
-  ChatList,
-  ChatWrapper,
-  ChatInfo,
-  Feed,
-  ChatInput,
-  ThemeMode
-} from '@mobilon-dev/chotto'
-
-// Импорт основных стилей библиотеки
-import '@mobilon-dev/chotto/style.css'
-
-// Если нужна конкретная тема, можно импортировать отдельно:
-import '@mobilon-dev/chotto/themes/default.css'
-import '@mobilon-dev/chotto/themes/dark.css'
-import '@mobilon-dev/chotto/themes/green.css'
-import '@mobilon-dev/chotto/themes/mobilon1.css'
-
-// Ваша логика...
-</script>
-```
-
-## 🛠️ Разработка
-
-### Требования
-- Node.js 18+
-- npm или yarn
-
-### Установка зависимостей
-```bash
-npm install
-```
-
-### Запуск в режиме разработки
-```bash
-npm run dev
-```
-
-### Запуск Storybook
-```bash
-npm run storybook
-```
-
-### Сборка библиотеки
-```bash
-npm run build
-```
-
-### Проверка кода
-```bash
-npm run lint
-npm run lint-fix
-```
-
-## 🏗️ Архитектура
-
-```
-src/
-├── components/                 # UI компоненты (атомарный дизайн)
-│   ├── 1_atoms/                # Атомарные компоненты (ButtonContextMenu, ContextMenu, etc.)
-│   ├── 1_icons/                # Иконки (AvatarIcon, CheckIcon, etc.)
-│   ├── 2_blocks/               # Блочные компоненты (FeedSearch, FeedFoundObjects, etc.)
-│   ├── 2_chatinput_elements/   # Элементы ввода (FileUploader, ButtonEmojiPicker, etc.)
-│   ├── 2_chatlist_elements/    # Элементы списка чатов (ChatItem, ChatFilter, etc.)
-│   ├── 2_elements/             # Общие элементы (ChatInfo, ThemeMode, AudioRecorder, etc.)
-│   ├── 2_feed_elements/        # Элементы ленты сообщений (TextMessage, ImageMessage, etc.)
-│   ├── 2_modals/               # Модальные окна (Modal, CreateChat, SelectUser, etc.)
-│   ├── 3_compounds/            # Составные компоненты (ChatInput, ChatList, Feed, SideBar)
-│   ├── 4_layouts/              # Макеты (BaseLayout, ExtendedLayout, AdaptiveExtendedLayout, etc.)
-│   └── 5_containers/           # Контейнеры (BaseContainer, FloatContainer)
-├── apps/                       # Демо-приложения и примеры использования
-│   ├── data/                   # Mock данные для демонстрации
-│   ├── stores/                 # Pinia stores
-│   ├── stories/                # Storybook истории
-│   └── transform/              # Утилиты трансформации данных
-├── hooks/                      # Composables (useMessageActions, useTheme, etc.)
-│   ├── messages/               # Хуки для работы с сообщениями
-│   ├── modals/                 # Хуки для работы с модальными окнами
-│   ├── uploadFile/             # Хуки для загрузки файлов
-│   └── validators/             # Валидаторы
-├── functions/                  # Утилитарные функции
-├── types/                      # TypeScript типы и интерфейсы
-├── themes/                     # Система тем (default, dark, green, mobilon1)
-├── locale/                     # Локализация (EN, RU)
-└── utils/                      # Вспомогательные утилиты
-```
-
-Дополнительно в корне:
-
-```
-.storybook/           # Storybook конфигурация (если используется)
-docs/                 # Документация (ARCHITECTURE.md, ARCHITECTURE_ANALYSIS.md, etc.)
-scripts/              # Скрипты валидации тем и утилиты
-dist/                 # Собранная библиотека (результат сборки)
-```
-
-## 🎨 Темы и кастомизация
-
-### Доступные темы
-- **Default** - светлая тема
-- **Dark** - темная тема  
-- **Green** - зеленая тема
-- **Mobilon1** - брендовая тема Mobilon
-
-### Импорт тем
-
-Если нужна конкретная тема, можно импортировать отдельно:
-
-```javascript
-// Импорт конкретной темы
-import '@mobilon-dev/chotto/themes/default.css'
-import '@mobilon-dev/chotto/themes/dark.css'
-import '@mobilon-dev/chotto/themes/green.css'
-import '@mobilon-dev/chotto/themes/mobilon1.css'
-```
-
-### Кастомизация CSS переменных
-
-Библиотека использует двухуровневую систему тем:
-
-#### 1. Глобальные переменные темы (`--chotto-theme-*`)
-
-Для кастомизации глобальных переменных используйте атрибут `data-theme`:
-
-```css
-[data-theme="default"] {
-  /* Основные цвета */
-  --chotto-theme-primary-color: #10b981;
-  --chotto-theme-secondary-color: #6b7280;
-  --chotto-theme-tertiary-color: #f3f4f6;
-  
-  /* Цвета текста */
-  --chotto-theme-primary-text-color: #1e1e1e;
-  --chotto-theme-secondary-text-color: #5f5f5f;
-  
-  /* Типографика */
-  --chotto-theme-font-family: 'Inter', sans-serif;
-  --chotto-theme-header-font-size: 1.5rem;
-  --chotto-theme-text-font-size: 0.875rem;
-  
-  /* Сообщения */
-  --chotto-theme-message-right-bg: #dcf8c6;
-  --chotto-theme-message-left-bg: #ffffff;
-  
-  /* ... и другие переменные (всего 82 переменные) */
-}
-```
-
-#### 2. Переменные компонентов (`--chotto-componentname-*`)
-
-Каждый компонент имеет свои CSS переменные, которые можно переопределять в вашем проекте. Например, для компонента `CommunicationPanel`:
-
-```css
-[data-theme="default"] {
-  /* Переменные компонента CommunicationPanel */
-  --chotto-communicationpanel-background: #ffffff;
-  --chotto-communicationpanel-border-color: #e5e5e5;
-  --chotto-communicationpanel-btn-active-color: #007CFF;
-  --chotto-communicationpanel-btn-hover-background: #f5f5f5;
-  --chotto-communicationpanel-menu-background: #ffffff;
-  /* ... и другие переменные компонента */
-}
-```
-
-**Преимущества:**
-- ✅ Гибкая кастомизация отдельных компонентов
-- ✅ Все переменные имеют fallback значения
-- ✅ Можно использовать глобальные переменные темы: `var(--chotto-theme-primary-color)`
-- ✅ Полная типизация через TypeScript интерфейсы
-
-**Доступные значения `data-theme`:** `"default"`, `"dark"`, `"green"`, `"mobilon1"`
-
-Полный список глобальных переменных доступен в типе `ChottoThemeVariables` из `@mobilon-dev/chotto`. Переменные компонентов типизированы в интерфейсах вида `ComponentNameThemeCSSVariables` в соответствующих компонентах.
-
-## 📱 Адаптивность
-
-Библиотека поддерживает адаптивные макеты:
-- **Desktop** - 3-колоночный макет
-- **Tablet** - 2-колоночный макет  
-- **Mobile** - 1-колоночный макет
-
-## 🌍 Локализация
-
-Поддерживаемые языки:
-- 🇷🇺 Русский
-- 🇺🇸 Английский
-
-```javascript
-import { useLocale } from '@mobilon-dev/chotto'
-
-const { t } = useLocale()
-console.log(t('component.ChatInput.InputPlaceholder'))
-```
-
-## 📦 Типы сообщений
-
-### Текстовые сообщения
-```javascript
-{
-  type: "message.text",
-  text: "Привет!",
-  position: "left",
-  status: "read",
-  time: "14:30",
-  avatar: "https://example.com/avatar.jpg"
-}
-```
-
-### Медиа сообщения
-```javascript
-{
-  type: "message.image",
-  url: "https://example.com/image.jpg",
-  alt: "Описание изображения",
-  position: "right",
-  status: "sent"
-}
-```
-
-## 🔌 Интеграция с бэкендом
-
-### Data Provider
-```javascript
-const dataProvider = {
-  getFeed(chatId) {
-    // Загрузка сообщений
-    return fetch(`/api/chats/${chatId}/messages`)
-  },
-  addMessage(message) {
-    // Отправка сообщения
-    return fetch('/api/messages', {
-      method: 'POST',
-      body: JSON.stringify(message)
-    })
-  }
-}
-```
-
-### Event Provider
-```javascript
-const eventor = {
-  push(event) {
-    // Обработка событий в реальном времени
-    console.log('New event:', event)
-  },
-  subscribe(callback) {
-    // Подписка на события
-  }
-}
-```
-
-## 🤝 Сообщество
-
-### Полезные ссылки
-- [Telegram чат](https://t.me/chottodev) - Обсуждения и поддержка
-- [Issues](https://github.com/mobilon-dev/chotto/issues) - Баги и предложения
-- [Discussions](https://github.com/mobilon-dev/chotto/discussions) - Общие вопросы
-
-### Похожие проекты
-- [Sendbird UIKit](https://github.com/sendbird/sendbird-uikit-react)
-- [React Chat Elements](https://github.com/detaysoft/react-chat-elements)
-- [Vue Advanced Chat](https://github.com/advanced-chat/vue-advanced-chat)
-- [Lobe Chat](https://github.com/lobehub/lobe-chat)
-
-## 📄 Лицензия
-
-MIT License - см. файл [LICENSE](LICENSE) для деталей.
-
-## 🙏 Благодарности
-
-Спасибо всем участникам сообщества за вклад в развитие проекта!
-
----
-
-**Создавайте потрясающие чат-интерфейсы с Chotto UI! 🚀**
-
-
+# Chotto UI
+
+🚀 **Vue 3 UI библиотека компонентов для создания современных чат-интерфейсов и AI-ассистентов**
+
+[![Vue 3](https://img.shields.io/badge/Vue-3.5.15+-green.svg)](https://vuejs.org/)
+[![TypeScript](https://img.shields.io/badge/TypeScript-5.8.3+-blue.svg)](https://www.typescriptlang.org/)
+[![License](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE)
+
+## 📖 Документация и ресурсы
+
+- 📚 **[Документация](https://mobilon-dev.github.io/chotto-docs/)** - Полное руководство по использованию
+- 🎨 **[Storybook](https://mobilon-dev.github.io/chotto/)** - Интерактивные примеры 20+ компонентов
+- 🎯 **[Демо-приложения](https://mobilon-dev.github.io/chotto-demo/)** - 10 готовых примеров использования
+- 💬 **[Telegram чат разработчиков](https://t.me/chottodev)** - Сообщество и поддержка
+
+## 🖼️ Скриншоты
+
+![Chotto UI Screenshot](images/screenshot8.png)
+
+## 🎥 Видео-обзоры
+
+- [Chotto 01: Welcome](https://youtu.be/LbtXeR_P9fs) - Введение в библиотеку
+- [Chotto 02: WABA templates](https://youtu.be/bwhcn6KAn28) - Работа с шаблонами WABA
+
+## ✨ Возможности
+
+### 🎨 **Богатый набор компонентов**
+- **20+ готовых компонентов** для создания чат-интерфейсов
+- **Модульная архитектура** - используйте только нужные компоненты
+- **TypeScript поддержка** - полная типизация всех компонентов
+
+### 💬 **Множественные типы сообщений**
+- 📝 Текстовые сообщения с поддержкой Markdown
+- 🖼️ Изображения с превью и галереей
+- 🎵 Аудио сообщения с плеером
+- 🎬 Видео сообщения с встроенным плеером
+- 📎 Файлы с превью и загрузкой
+- 📞 Звонки с транскрипцией
+- 🎭 Стикеры (включая анимированные)
+- 💬 Ответы на сообщения
+- 😊 Эмодзи-реакции на сообщения
+- 📅 Разделители дат
+- ⚙️ Системные уведомления
+- ⌨️ Индикатор печати
+
+### 🎯 **Продвинутые функции**
+- 🔍 **Поиск по сообщениям** с подсветкой результатов
+- 📱 **Адаптивные макеты** для всех устройств
+- 🎨 **3 готовые темы**: светлая, темная, зеленая
+- 🌍 **Многоязычность**: русский и английский
+- 🔔 **Система уведомлений** в реальном времени
+- 📊 **Просмотры сообщений** с счетчиками
+- 🔗 **Предпросмотр ссылок** с метаданными
+- 🎵 **Встроенные медиаплееры** (YouTube, Яндекс.Музыка, Rutube, VK)
+- ⌨️ **Клавиатуры быстрых ответов**
+- 📝 **Шаблоны сообщений** (WABA, групповые)
+- 🎤 **Запись аудио и видео**
+- 😊 **Поддержка эмодзи**
+- ⚙️ **Контекстное меню сообщений** с настраиваемыми действиями
+- ✅ **Статусы доставки сообщений** (отправка, доставлено, прочитано, ошибка)
+- 💾 **Загрузка медиафайлов** (изображения, видео, аудио)
+
+### 🏗️ **Гибкая архитектура**
+- **Layouts** - определяют структуру интерфейса
+- **Containers** - высокоуровневые обертки
+- **Components** - переиспользуемые UI элементы
+- **Messages** - типизированные компоненты сообщений
+- **Modals** - диалоговые окна
+
+## 🚀 Быстрый старт
+
+### Установка
+
+```bash
+npm install @mobilon-dev/chotto
+```
+
+### Базовое использование
+
+```vue
+<template>
+  <div class="chat-app">
+    <BaseContainer height="90vh" width="90vw">
+      <ExtendedLayout>
+        <!-- Боковая панель -->
+        <template #first-col>
+          <SideBar :sidebar-items="sidebarItems" />
+          <ThemeMode :themes="themes" />
+        </template>
+        
+        <!-- Список чатов -->
+        <template #second-col>
+          <ChatList 
+            :chats="chats" 
+            @select="selectChat"
+          />
+        </template>
+        
+        <!-- Область чата -->
+        <template #third-col>
+          <ChatWrapper>
+            <ChatInfo :chat="selectedChat" />
+            <Feed :objects="messages" />
+            <ChatInput @send="sendMessage" />
+          </ChatWrapper>
+        </template>
+      </ExtendedLayout>
+    </BaseContainer>
+  </div>
+</template>
+
+<script setup>
+import {
+  BaseContainer,
+  ExtendedLayout,
+  SideBar,
+  ChatList,
+  ChatWrapper,
+  ChatInfo,
+  Feed,
+  ChatInput,
+  ThemeMode
+} from '@mobilon-dev/chotto'
+
+// Импорт основных стилей библиотеки
+import '@mobilon-dev/chotto/style.css'
+
+// Если нужна конкретная тема, можно импортировать отдельно:
+import '@mobilon-dev/chotto/themes/default.css'
+import '@mobilon-dev/chotto/themes/dark.css'
+import '@mobilon-dev/chotto/themes/green.css'
+import '@mobilon-dev/chotto/themes/mobilon1.css'
+
+// Ваша логика...
+</script>
+```
+
+## 🛠️ Разработка
+
+### Требования
+- Node.js 18+
+- npm или yarn
+
+### Установка зависимостей
+```bash
+npm install
+```
+
+### Запуск в режиме разработки
+```bash
+npm run dev
+```
+
+### Запуск Storybook
+```bash
+npm run storybook
+```
+
+### Сборка библиотеки
+```bash
+npm run build
+```
+
+### Проверка кода
+```bash
+npm run lint
+npm run lint-fix
+```
+
+## 🏗️ Архитектура
+
+```
+src/
+├── components/                 # UI компоненты (атомарный дизайн)
+│   ├── 1_atoms/                # Атомарные компоненты (ButtonContextMenu, ContextMenu, etc.)
+│   ├── 1_icons/                # Иконки (AvatarIcon, CheckIcon, etc.)
+│   ├── 2_blocks/               # Блочные компоненты (FeedSearch, FeedFoundObjects, etc.)
+│   ├── 2_chatinput_elements/   # Элементы ввода (FileUploader, ButtonEmojiPicker, etc.)
+│   ├── 2_chatlist_elements/    # Элементы списка чатов (ChatItem, ChatFilter, etc.)
+│   ├── 2_elements/             # Общие элементы (ChatInfo, ThemeMode, AudioRecorder, etc.)
+│   ├── 2_feed_elements/        # Элементы ленты сообщений (TextMessage, ImageMessage, etc.)
+│   ├── 2_modals/               # Модальные окна (Modal, CreateChat, SelectUser, etc.)
+│   ├── 3_compounds/            # Составные компоненты (ChatInput, ChatList, Feed, SideBar)
+│   ├── 4_layouts/              # Макеты (BaseLayout, ExtendedLayout, AdaptiveExtendedLayout, etc.)
+│   └── 5_containers/           # Контейнеры (BaseContainer, FloatContainer)
+├── apps/                       # Демо-приложения и примеры использования
+│   ├── data/                   # Mock данные для демонстрации
+│   ├── stores/                 # Pinia stores
+│   ├── stories/                # Storybook истории
+│   └── transform/              # Утилиты трансформации данных
+├── hooks/                      # Composables (useMessageActions, useTheme, etc.)
+│   ├── messages/               # Хуки для работы с сообщениями
+│   ├── modals/                 # Хуки для работы с модальными окнами
+│   ├── uploadFile/             # Хуки для загрузки файлов
+│   └── validators/             # Валидаторы
+├── functions/                  # Утилитарные функции
+├── types/                      # TypeScript типы и интерфейсы
+├── themes/                     # Система тем (default, dark, green, mobilon1)
+├── locale/                     # Локализация (EN, RU)
+└── utils/                      # Вспомогательные утилиты
+```
+
+Дополнительно в корне:
+
+```
+.storybook/           # Storybook конфигурация (если используется)
+docs/                 # Документация (ARCHITECTURE.md, ARCHITECTURE_ANALYSIS.md, etc.)
+scripts/              # Скрипты валидации тем и утилиты
+dist/                 # Собранная библиотека (результат сборки)
+```
+
+## 🎨 Темы и кастомизация
+
+### Доступные темы
+- **Default** - светлая тема
+- **Dark** - темная тема  
+- **Green** - зеленая тема
+- **Mobilon1** - брендовая тема Mobilon
+
+### Импорт тем
+
+Если нужна конкретная тема, можно импортировать отдельно:
+
+```javascript
+// Импорт конкретной темы
+import '@mobilon-dev/chotto/themes/default.css'
+import '@mobilon-dev/chotto/themes/dark.css'
+import '@mobilon-dev/chotto/themes/green.css'
+import '@mobilon-dev/chotto/themes/mobilon1.css'
+```
+
+### Кастомизация CSS переменных
+
+Библиотека использует двухуровневую систему тем:
+
+#### 1. Глобальные переменные темы (`--chotto-theme-*`)
+
+Для кастомизации глобальных переменных используйте атрибут `data-theme`:
+
+```css
+[data-theme="default"] {
+  /* Основные цвета */
+  --chotto-theme-primary-color: #10b981;
+  --chotto-theme-secondary-color: #6b7280;
+  --chotto-theme-tertiary-color: #f3f4f6;
+  
+  /* Цвета текста */
+  --chotto-theme-primary-text-color: #1e1e1e;
+  --chotto-theme-secondary-text-color: #5f5f5f;
+  
+  /* Типографика */
+  --chotto-theme-font-family: 'Inter', sans-serif;
+  --chotto-theme-header-font-size: 1.5rem;
+  --chotto-theme-text-font-size: 0.875rem;
+  
+  /* Сообщения */
+  --chotto-theme-message-right-bg: #dcf8c6;
+  --chotto-theme-message-left-bg: #ffffff;
+  
+  /* ... и другие переменные (всего 82 переменные) */
+}
+```
+
+#### 2. Переменные компонентов (`--chotto-componentname-*`)
+
+Каждый компонент имеет свои CSS переменные, которые можно переопределять в вашем проекте. Например, для компонента `CommunicationPanel`:
+
+```css
+[data-theme="default"] {
+  /* Переменные компонента CommunicationPanel */
+  --chotto-communicationpanel-background: #ffffff;
+  --chotto-communicationpanel-border-color: #e5e5e5;
+  --chotto-communicationpanel-btn-active-color: #007CFF;
+  --chotto-communicationpanel-btn-hover-background: #f5f5f5;
+  --chotto-communicationpanel-menu-background: #ffffff;
+  /* ... и другие переменные компонента */
+}
+```
+
+**Преимущества:**
+- ✅ Гибкая кастомизация отдельных компонентов
+- ✅ Все переменные имеют fallback значения
+- ✅ Можно использовать глобальные переменные темы: `var(--chotto-theme-primary-color)`
+- ✅ Полная типизация через TypeScript интерфейсы
+
+**Доступные значения `data-theme`:** `"default"`, `"dark"`, `"green"`, `"mobilon1"`
+
+Полный список глобальных переменных доступен в типе `ChottoThemeVariables` из `@mobilon-dev/chotto`. Переменные компонентов типизированы в интерфейсах вида `ComponentNameThemeCSSVariables` в соответствующих компонентах.
+
+## 📱 Адаптивность
+
+Библиотека поддерживает адаптивные макеты:
+- **Desktop** - 3-колоночный макет
+- **Tablet** - 2-колоночный макет  
+- **Mobile** - 1-колоночный макет
+
+## 🌍 Локализация
+
+Поддерживаемые языки:
+- 🇷🇺 Русский
+- 🇺🇸 Английский
+
+```javascript
+import { useLocale } from '@mobilon-dev/chotto'
+
+const { t } = useLocale()
+console.log(t('component.ChatInput.InputPlaceholder'))
+```
+
+## 📦 Типы сообщений
+
+### Текстовые сообщения
+```javascript
+{
+  type: "message.text",
+  text: "Привет!",
+  position: "left",
+  status: "read",
+  time: "14:30",
+  avatar: "https://example.com/avatar.jpg"
+}
+```
+
+### Медиа сообщения
+```javascript
+{
+  type: "message.image",
+  url: "https://example.com/image.jpg",
+  alt: "Описание изображения",
+  position: "right",
+  status: "sent"
+}
+```
+
+## 🔌 Интеграция с бэкендом
+
+### Data Provider
+```javascript
+const dataProvider = {
+  getFeed(chatId) {
+    // Загрузка сообщений
+    return fetch(`/api/chats/${chatId}/messages`)
+  },
+  addMessage(message) {
+    // Отправка сообщения
+    return fetch('/api/messages', {
+      method: 'POST',
+      body: JSON.stringify(message)
+    })
+  }
+}
+```
+
+### Event Provider
+```javascript
+const eventor = {
+  push(event) {
+    // Обработка событий в реальном времени
+    console.log('New event:', event)
+  },
+  subscribe(callback) {
+    // Подписка на события
+  }
+}
+```
+
+## 🤝 Сообщество
+
+### Полезные ссылки
+- [Telegram чат](https://t.me/chottodev) - Обсуждения и поддержка
+- [Issues](https://github.com/mobilon-dev/chotto/issues) - Баги и предложения
+- [Discussions](https://github.com/mobilon-dev/chotto/discussions) - Общие вопросы
+
+### Похожие проекты
+- [Sendbird UIKit](https://github.com/sendbird/sendbird-uikit-react)
+- [React Chat Elements](https://github.com/detaysoft/react-chat-elements)
+- [Vue Advanced Chat](https://github.com/advanced-chat/vue-advanced-chat)
+- [Lobe Chat](https://github.com/lobehub/lobe-chat)
+
+## 📄 Лицензия
+
+MIT License - см. файл [LICENSE](LICENSE) для деталей.
+
+## 🙏 Благодарности
+
+Спасибо всем участникам сообщества за вклад в развитие проекта!
+
+---
+
+**Создавайте потрясающие чат-интерфейсы с Chotto UI! 🚀**
+
+