@mobilon-dev/chotto 0.0.131 → 0.0.132

package/README.md

@@ -1,84 +1,294 @@
-# chotto UI
-
-Vue3 UI components for chats, conversations & AI
-
-### start development your chat now
-
-- [chotto UI docs](https://mobilon-dev.github.io/chotto-docs/)
-
-- [docs in storybook: 20+ components for chat UI](https://mobilon-dev.github.io/chotto/)
-
-- [cool 7 demos](https://mobilon-dev.github.io/chotto-demo/)
-
-- [telegram developer chat](https://t.me/chottodev)
-
-
-## screnshots
-
-![](images/screenshot7.png)
-
-
-## video
-
-[chotto 01: welcome](https://youtu.be/LbtXeR_P9fs)
-
-[chotto 02: WABA templates](https://youtu.be/bwhcn6KAn28)
-
-
-# development
-
-## scheme
-
-![](images/scheme.png)
-
-## install
-
-> npm i
-
-## run storybook
-
-> npm run storybook
-
-## run dev
-
-> npm run dev
-
-## build
-
-> npm run build
-
-
-
-# Links
-
-imagine!
-
-### screenshots
-
-[samples](/samples)
-
-### same projects
-
-- https://github.com/sendbird/sendbird-uikit-react
-
-- https://github.com/detaysoft/react-chat-elements
-
-- https://github.com/pubnub/react-chat-components
-
-- https://github.com/jakobhoeg/shadcn-chat
-
-- https://github.com/advanced-chat/vue-advanced-chat
-
-- https://github.com/mattmezza/vue-beautiful-chat
-
-- https://github.com/MatheusrdSantos/vue-quick-chat
-
-- https://github.com/Yonom/assistant-ui
-
-- https://github.com/rustic-ai/ui-components
-
-- https://github.com/chatscope/chat-ui-kit-react
-
-- https://github.com/lobehub/lobe-chat
+# 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/)** - 7 готовых примеров использования
+- 💬 **[Telegram чат разработчиков](https://t.me/chottodev)** - Сообщество и поддержка
+
+## 🖼️ Скриншоты
+
+![Chotto UI Screenshot](images/screenshot7.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'
+
+// Ваша логика...
+</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/
+├── library/           # Основная библиотека компонентов
+│   ├── layouts/      # Макеты (BaseLayout, ExtendedLayout, etc.)
+│   ├── components/   # UI компоненты (ChatInput, ChatList, etc.)
+│   ├── messages/     # Компоненты сообщений (TextMessage, ImageMessage, etc.)
+│   ├── containers/   # Контейнеры (BaseContainer, FloatContainer)
+│   └── modals/       # Модальные окна
+├── helpers/          # Утилиты и хелперы
+├── types/            # TypeScript типы
+├── data/             # Mock данные для демонстрации
+├── assets/           # Стили и темы
+│   └── themes/       # CSS темы (default, dark, green)
+└── locale/           # Локализация (EN, RU)
+```
+
+## 🎨 Темы и кастомизация
+
+### Доступные темы
+- **Default** - светлая тема
+- **Dark** - темная тема  
+- **Green** - зеленая тема
+
+### Кастомизация CSS переменных
+```css
+[data-theme="light"] {
+  --chotto-primary-color: #10b981;
+  --chotto-secondary-color: #6b7280;
+  --chotto-background-color: #ffffff;
+  /* ... другие переменные */
+}
+```
+
+## 📱 Адаптивность
+
+Библиотека поддерживает адаптивные макеты:
+- **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! 🚀**
 
 

package/dist/{CreateDialog-Dr0QWT0Z.js → CreateDialog-f-6c0Xt6.js}

@@ -1,5 +1,5 @@
 import { ref as v, computed as d, createElementBlock as r, openBlock as o, createElementVNode as t, toDisplayString as u, withDirectives as m, Fragment as f, renderList as p, vModelSelect as _ } from "vue";
-import { _ as D } from "./index-HbH2Dz5p.js";
+import { _ as D } from "./index-DC1hOwVt.js";
 const S = { class: "modal__contact-line" }, q = ["value"], k = { class: "modal__channel-line" }, w = ["disabled"], x = ["value"], V = ["disabled"], A = {
   __name: "CreateDialog",
   props: {

package/dist/{ModalVideoRecorder-DySaYGfG.js → ModalVideoRecorder-CVgCL3QK.js}

@@ -1,5 +1,5 @@
 import { defineComponent as N, ref as l, computed as z, onMounted as $, createElementBlock as m, openBlock as f, Fragment as q, createElementVNode as o, withDirectives as E, vShow as I, createCommentVNode as g, normalizeClass as y, toDisplayString as A, nextTick as G, unref as k } from "vue";
-import { _ as H } from "./index-HbH2Dz5p.js";
+import { _ as H } from "./index-DC1hOwVt.js";
 const J = { class: "video-recorder__header" }, K = { class: "video-recorder__controls" }, P = { class: "video-recorder__recording-container" }, Q = { class: "video-recorder__recording-time" }, W = /* @__PURE__ */ N({
   __name: "ModalVideoRecorder",
   emits: ["change", "submit", "close"],

package/dist/{SelectUser2-jpYNWDP6.js → SelectUser2-Bc0kEe7S.js}

@@ -1,5 +1,5 @@
 import { ref as p, createElementBlock as n, openBlock as s, createElementVNode as t, toDisplayString as a, Fragment as m, renderList as _, withDirectives as h, vModelCheckbox as v } from "vue";
-import { _ as f } from "./index-HbH2Dz5p.js";
+import { _ as f } from "./index-DC1hOwVt.js";
 const g = { class: "participant-list" }, k = ["id", "value"], y = ["for"], x = {
   __name: "SelectUser2",
   props: {