Skip to main content
CometChat’s UI Kit V6 is a set of pre-built UI Widgets that allows you to easily craft an in-app chat with all the essential messaging features, built on clean architecture with BLoC state management.

​
Type of Widget

UI Widgets based on behaviour and functionality can be categorized into two types: Base Widget and Widget.

​
Base Widget

Base Widgets form the building blocks of your app’s user interface (UI). They focus solely on presenting visual elements based on input data, without handling any business logic. These Widgets provide the foundational appearance and behavior for your UI.

​
Widget

Widgets build upon Base Widgets by incorporating business logic via BLoC pattern. They not only render UI elements but also manage data loading through use cases and repositories, execute specific actions, and respond to events. This combination of visual presentation and functional capabilities makes Widgets essential for creating dynamic and interactive UIs.
V6 Note: V6 does not have Composite Widgets like CometChatMessages or CometChatConversationsWithMessages. Instead, you compose the UI yourself using individual Widgets (CometChatMessageList, CometChatMessageComposer, CometChatMessageHeader). This gives you full control over layout and behavior.

​
Architecture

Each Widget in V6 follows clean architecture internally:
LayerPurposeExample
bloc/State management (events, states, BLoC)ConversationsBloc, ConversationsEvent, ConversationsState
data/Data sources and repository implementationsConversationsRemoteDatasource, ConversationsRepositoryImpl
domain/Use cases and repository interfacesGetConversationsUseCase, ConversationsRepository
di/Dependency injectionConversationsServiceLocator
widgets/Decomposed sub-widgetsConversationsList, ConversationsEmptyView

​
Actions

Actions direct the operational behavior of a component. They are split into two categories: Predefined Actions and User-Defined Actions.

​
Predefined Actions

These are actions inherently programmed into a UI component. They execute automatically in response to user interaction, without needing any additional user input.

​
User-Defined Actions

These are actions that must be explicitly specified by the user. They provide adaptability and allow for the creation of custom behaviors that align with the individual needs of the application. To customize the behavior of a component, actions must be overridden by the user. This provides the user with control over how the component responds to specific events or interactions.

​
Events

Events allow for a decoupled, flexible architecture where different parts of the application can interact without having to directly reference each other. This makes it easier to create complex, interactive experiences, as well as to extend and customize the functionality provided by the CometChat UI Kit. Widgets have the ability to emit events. These events are dispatched in response to certain changes or user interactions within the component. By emitting events, these Widgets allow other parts of the application to react to changes or interactions, thus enabling dynamic and interactive behavior within the application.

​
Configurations

Configurations offer the ability to customize the properties of each individual component. Each Widget has its own set of properties that can be configured, allowing for fine-tuned customization to tailor behavior and appearance to match specific requirements in a granular manner.