Компоненты
Библиотека Chotto организована по атомарной архитектуре: от простых атомов и иконок до контейнеров и макетов. Ниже собраны основные группы компонентов из src/components, их назначение и типичные сценарии применения.
1. Атомы
ButtonContextMenu— кнопка-триггер для контекстного меню.ContextMenu— базовое выпадающее меню с произвольными действиями.EmbedPreview— карточка для превью встраиваемого контента.LinkPreview— карточка предпросмотра ссылок.Tooltip— всплывающая подсказка с гибкой позицией.
2. Блоки
CommunicationPanel— панель коммуникации с фильтрами и действиями.FeedFoundItem,FeedFoundObjects— результаты поиска по ленте.FeedSearch— строка поиска с подсветкой совпадений.
3. Элементы ввода сообщения
ButtonCommandsSelector,ButtonEmojiPicker— кнопки для выбора команд и эмодзи.ButtonTemplateSelector,ButtonWabaTemplateSelector— выбор стандартных и WABA-шаблонов.FilePreview,FileUploader— предпросмотр и загрузка вложений.TemplateSelector— вспомогательный компоненты при сборке шаблонов.WABAAttachmentSection,WABAQuickReplyButtons,WABASeparatedQuickButtons,WABATemplateSelector— специализированные элементы для WhatsApp Business API.
4. Элементы списка чатов
ChatFilter— фильтрация и поиск по чатам.ChatItem— карточка чата с индикаторами активности.ChatTabs— переключение между наборами чатов.
5. Универсальные элементы
AudioRecorder,VideoRecorder— запись аудио и видео.ChannelSelector,ThemeMode— выбор канала общения и темы оформления.ChatInfo,ChatPanel,UserProfile,ContactInfo— информеры и сайд-панели.
6. Элементы ленты сообщений
- Основные сообщения:
TextMessage,ImageMessage,VideoMessage,AudioMessage,FileMessage,StickerMessage. - Служебные сообщения:
SystemMessage,DateMessage,DateMessageSticky,TypingMessage. - Ответы:
BaseReplyMessage,ReplyTextMessage,ReplyImageMessage,ReplyVideoMessage,ReplyAudioMessage,ReplyFileMessage,ReplyStickerMessage,ReplyCallMessage. - Интерактив:
MessageKeyboard,FeedKeyboard,MessageReactions. - Дополнительно:
CallMessage,SplashScreen.
7. Модальные окна
Modal,ModalFullscreen,ModalNoFooter— базовые модальные оболочки.SelectUser,CreateChat,CreateDialog,ModalVideoRecorder— модальные окна для управления чатами и медиа. Часть из них подгружается динамически для оптимизации бандла.
8. Составные компоненты
ChatInput— высокоуровневая панель ввода сообщения.ChatList— список чатов с фильтрами и индикаторами.Feed— основная лента сообщений с поддержкой разных типов содержимого.SideBar— боковая панель с комбинированным содержимым.
9. Макеты и обёртки
BaseLayout,ExtendedLayout,AdaptiveExtendedLayout— стандартные варианты раскладки (2–3 колонки).FeedLayout— однооконный макет для фокусировки на ленте.ChatWrapper— расширение для подключения дополнительной панели в макетах.
10. Контейнеры
BaseContainer— фиксированный контейнер, встраиваемый в страницу.FloatContainer— плавающий контейнер-виджет с заголовком и элементами управления.
Где посмотреть вживую
Актуальные примеры, визуальные состояния и входные данные доступны в Storybook. Там же можно изучить вариации тем и поведения компонентов.