Skip to content

mobilon-dev/chotto

BranchesTags

Repository files navigation

Chotto UI

🚀 Vue 3 UI библиотека компонентов для создания современных чат-интерфейсов и AI-ассистентов

Vue 3 TypeScript License

📖 Документация и ресурсы

🖼️ Скриншоты

Chotto UI Screenshot

🎥 Видео-обзоры

✨ Возможности

🎨 Богатый набор компонентов

  • 20+ готовых компонентов для создания чат-интерфейсов
  • Модульная архитектура - используйте только нужные компоненты
  • TypeScript поддержка - полная типизация всех компонентов

💬 Множественные типы сообщений

  • 📝 Текстовые сообщения с поддержкой Markdown
  • 🖼️ Изображения с превью и галереей
  • 🎵 Аудио сообщения с плеером
  • 🎬 Видео сообщения с встроенным плеером
  • 📎 Файлы с превью и загрузкой
  • 📞 Звонки с транскрипцией
  • 🎭 Стикеры (включая анимированные)
  • 💬 Ответы на сообщения
  • 😊 Эмодзи-реакции на сообщения
  • 📅 Разделители дат
  • ⚙️ Системные уведомления
  • ⌨️ Индикатор печати

🎯 Продвинутые функции

  • 🔍 Поиск по сообщениям с подсветкой результатов
  • 📱 Адаптивные макеты для всех устройств
  • 🎨 3 готовые темы: светлая, темная, зеленая
  • 🌍 Многоязычность: русский и английский
  • 🔔 Система уведомлений в реальном времени
  • 📊 Просмотры сообщений с счетчиками
  • 🔗 Предпросмотр ссылок с метаданными
  • 🎵 Встроенные медиаплееры (YouTube, Яндекс.Музыка, Rutube, VK)
  • ⌨️ Клавиатуры быстрых ответов
  • 📝 Шаблоны сообщений (WABA, групповые)
  • 🎤 Запись аудио и видео
  • 😊 Поддержка эмодзи
  • ⚙️ Контекстное меню сообщений с настраиваемыми действиями
  • ✅ Статусы доставки сообщений (отправка, доставлено, прочитано, ошибка)
  • 💾 Загрузка медиафайлов (изображения, видео, аудио)

🏗️ Гибкая архитектура

  • Layouts - определяют структуру интерфейса
  • Containers - высокоуровневые обертки
  • Components - переиспользуемые UI элементы
  • Messages - типизированные компоненты сообщений
  • Modals - диалоговые окна

🚀 Быстрый старт

Установка

npm install @mobilon-dev/chotto

Базовое использование

<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

Установка зависимостей

npm install

Запуск в режиме разработки

npm run dev

Запуск Storybook

npm run storybook

Сборка библиотеки

npm run build

Проверка кода

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

Импорт тем

Если нужна конкретная тема, можно импортировать отдельно:

// Импорт конкретной темы
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:

[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:

[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-колоночный макет

🌍 Локализация

Поддерживаемые языки:

  • 🇷🇺 Русский
  • 🇺🇸 Английский
import { useLocale } from '@mobilon-dev/chotto'

const { t } = useLocale()
console.log(t('component.ChatInput.InputPlaceholder'))

📦 Типы сообщений

Текстовые сообщения

{
  type: "message.text",
  text: "Привет!",
  position: "left",
  status: "read",
  time: "14:30",
  avatar: "https://example.com/avatar.jpg"
}

Медиа сообщения

{
  type: "message.image",
  url: "https://example.com/image.jpg",
  alt: "Описание изображения",
  position: "right",
  status: "sent"
}

🔌 Интеграция с бэкендом

Data Provider

const dataProvider = {
  getFeed(chatId) {
    // Загрузка сообщений
    return fetch(`/api/chats/${chatId}/messages`)
  },
  addMessage(message) {
    // Отправка сообщения
    return fetch('/api/messages', {
      method: 'POST',
      body: JSON.stringify(message)
    })
  }
}

Event Provider

const eventor = {
  push(event) {
    // Обработка событий в реальном времени
    console.log('New event:', event)
  },
  subscribe(callback) {
    // Подписка на события
  }
}

🤝 Сообщество

Полезные ссылки

Похожие проекты

📄 Лицензия

MIT License - см. файл LICENSE для деталей.

🙏 Благодарности

Спасибо всем участникам сообщества за вклад в развитие проекта!

Создавайте потрясающие чат-интерфейсы с Chotto UI! 🚀

About

Chotto UI: vue3 UI component pack for conversations & AI

mobilon-dev.github.io/chotto-docs/

Topics

chat vuejs vue frontend messenger whatsapp chat-application vue3 chatgpt

Resources

Readme

License

MIT license
Activity
Custom properties

Stars

21 stars

Watchers

1 watching

Forks

10 forks
Report repository

Releases

No releases published

Packages

No packages published

Contributors 7

Languages