Components
The Chotto library is organized according to atomic architecture: from simple atoms and icons to containers and layouts. Below are the main component groups from src/components, their purpose and typical use cases.
1. Atoms
ButtonContextMenu— button trigger for context menu.ContextMenu— basic dropdown menu with arbitrary actions.EmbedPreview— card for embeddable content preview.LinkPreview— link preview card.Tooltip— popup tooltip with flexible position.
2. Blocks
CommunicationPanel— communication panel with filters and actions.FeedFoundItem,FeedFoundObjects— feed search results.FeedSearch— search bar with match highlighting.
3. Message Input Elements
ButtonCommandsSelector,ButtonEmojiPicker— buttons for selecting commands and emoji.ButtonTemplateSelector,ButtonWabaTemplateSelector— selection of standard and WABA templates.FilePreview,FileUploader— preview and upload of attachments.TemplateSelector— helper component when building templates.WABAAttachmentSection,WABAQuickReplyButtons,WABASeparatedQuickButtons,WABATemplateSelector— specialized elements for WhatsApp Business API.
4. Chat List Elements
ChatFilter— filtering and searching chats.ChatItem— chat card with activity indicators.ChatTabs— switching between chat sets.
5. Universal Elements
AudioRecorder,VideoRecorder— audio and video recording.ChannelSelector,ThemeMode— communication channel and theme selection.ChatInfo,ChatPanel,UserProfile,ContactInfo— informers and side panels.
6. Message Feed Elements
- Main messages:
TextMessage,ImageMessage,VideoMessage,AudioMessage,FileMessage,StickerMessage. - Service messages:
SystemMessage,DateMessage,DateMessageSticky,TypingMessage. - Replies:
BaseReplyMessage,ReplyTextMessage,ReplyImageMessage,ReplyVideoMessage,ReplyAudioMessage,ReplyFileMessage,ReplyStickerMessage,ReplyCallMessage. - Interactive:
MessageKeyboard,FeedKeyboard,MessageReactions. - Additional:
CallMessage,SplashScreen.
7. Modal Windows
Modal,ModalFullscreen,ModalNoFooter— basic modal wrappers.SelectUser,CreateChat,CreateDialog,ModalVideoRecorder— modal windows for managing chats and media. Some of them are loaded dynamically to optimize the bundle.
8. Compound Components
ChatInput— high-level message input panel.ChatList— chat list with filters and indicators.Feed— main message feed with support for different content types.SideBar— side panel with combined content.
9. Layouts and Wrappers
BaseLayout,ExtendedLayout,AdaptiveExtendedLayout— standard layout options (2–3 columns).FeedLayout— single-window layout for focusing on the feed.ChatWrapper— extension for connecting additional panel in layouts.
10. Containers
BaseContainer— fixed container embeddable in a page.FloatContainer— floating container widget with header and control elements.
Where to See Live
Current examples, visual states and input data are available in Storybook. You can also explore theme variations and component behavior there.