Channel Info

Channel Info components are used to display information about a channel, such as its name, members, and provide actions like leaving the channel or deleting it.

They are typically used in the context of a channel details screen and have two main components available:

• DirectChannelInfoScreen - for direct channels (1:1 conversations). It shows the avatar and information about the other user, as well as the following actions:

  • User Info - shows the other user's name (tappable to copy to clipboard).
  • Mute/Unmute User - to mute or unmute the other user.
  • Block/Unblock User - to block or unblock the other user.
  • Mute/Unmute Conversation - to mute or unmute the channel.
  • Hide Conversation - to hide the channel from the list.
  • Pinned Messages - to navigate to the pinned messages in the channel.
  • Media Attachments - to browse media attachments shared in the channel.
  • Files Attachments - to browse file attachments shared in the channel.
  • Leave Conversation - to leave the channel.
  • Delete Conversation - to delete the channel.

• GroupChannelInfoScreen - for group channels (channels with more than 2 members or non-distinct channels). It shows information about the members, as well as the following actions:

  • Add Members - to add members to the channel.
  • Add/Edit Group Name - to add or edit the name of the channel.
  • Mute/Unmute Group - to mute or unmute the channel.
  • Hide Group - to hide the channel from the list.
  • Pinned Messages - to navigate to the pinned messages in the channel.
  • Media Attachments - to browse media attachments shared in the channel.
  • Files Attachments - to browse file attachments shared in the channel.
  • Leave Group - to leave the channel.
  • Delete Group - to delete the channel.

  Tapping on a member item in the list will show a bottom sheet with the following actions:

  • Message - to send a direct message to the member.
  • Mute/Unmute User - to mute or unmute the member's user.
  • Block/Unblock User - to block or unblock the member's user.
  • Ban/Unban - to ban or unban the member from the channel.
  • Remove from Group - to remove the member from the channel.

  Each member action is self-describing — it carries its own icon, label, destructive flag, and handler via the MemberAction interface.

Usage

Both screen components are backed by ChannelInfoViewModel.

The minimum requirement is to create a ChannelInfoViewModelFactory and pass it to the screen component.

private val viewModelFactory by lazy {
    ChannelInfoViewModelFactory(
        context = applicationContext,
        cid = cid,
    )
}

The ChannelInfoViewModelFactory constructor has the following parameters:

• context - The application context, used to access the clipboard handler for copying the member name to the clipboard.
• cid - The channel ID (CID) of the channel for which the info is being displayed.
• optionFilter - Optional filter for the channel options. It can be used to customize the options available in the channel info screens. Defaults to make all options available.

private val viewModelFactory by lazy {
    ChannelInfoViewModelFactory(
        context = applicationContext,
        cid = cid,
        optionFilter = { option ->
            option != ChannelInfoViewState.Content.Option.AddMember
        }
    )
}

With the factory created, you can pass it to the screen components:

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)

    setContent {
        ChatTheme {
            // Use DirectChannelInfoScreen for direct channels
            DirectChannelInfoScreen(
                modifier = Modifier.statusBarsPadding(),
                viewModelFactory = viewModelFactory,
                onNavigationIconClick = ::finish,
            )
            // Use GroupChannelInfoScreen for group channels
            GroupChannelInfoScreen(
                modifier = Modifier.statusBarsPadding(),
                viewModelFactory = viewModelFactory,
                onNavigationIconClick = ::finish,
            )
        }
    }
}

These snippets will produce the following screens:

Direct channel	Group Channel

channel.memberCount > 2 || !channel.id.contains("!members")

Handling Actions

Both the Channel Info components expose action handlers for the top bar actions such as onNavigationIconClick, which is invoked when the user taps on the navigation icon in the top bar.

The GroupChannelInfoScreen component exposes onAddMembersClick as an action handler and it's invoked when a user taps on the "Add Members" button.

You can use it to show a dialog or navigate to another screen to add members to the channel.

var showAddMembers by remember { mutableStateOf(false) }
GroupChannelInfoScreen(
    modifier = Modifier.statusBarsPadding(),
    viewModelFactory = viewModelFactory,
    onAddMembersClick = { showAddMembers = true },
)
if (showAddMembers) {
    AddMembersDialog(
        cid = cid,
        onDismiss = { showAddMembers = false },
    )
}

Handling Events

The Channel Info components process option actions via the ChannelInfoViewModel and expose them as events. You can handle these events by collecting them from the ViewModel in your Composable function.

private val viewModel by viewModels<ChannelInfoViewModel> { viewModelFactory }

LaunchedEffect(viewModel) {
   viewModel.events.collectLatest { event ->
       when (event) {
           is ChannelInfoViewEvent.Error -> /* ... */,
           is ChannelInfoViewEvent.Navigation -> /* ... */,
           is ChannelInfoViewEvent.Modal -> /* ... */,
       }
   }
}

• ChannelInfoViewEvent.Error - Represents an error event. You can show a toast or a snackbar based on the error type. The types of error are the following:
  • RenameChannelError, MuteChannelError, UnmuteChannelError, MuteUserError, UnmuteUserError, BlockUserError, UnblockUserError, HideChannelError, UnhideChannelError, LeaveChannelError, DeleteChannelError, BanMemberError, UnbanMemberError, and RemoveMemberError.
• ChannelInfoViewEvent.Navigation - Represents a navigation event. You can navigate to another screen or perform an action based on the event. The types of navigation are the following:
  • ChannelInfoViewEvent.NavigateUp - Indicates an intention to navigate up in the navigation hierarchy. Includes a reason (e.g. HideChannelSuccess, LeaveChannelSuccess, DeleteChannelSuccess).
  • ChannelInfoViewEvent.NavigateToPinnedMessages - Indicates an intention to navigate to the pinned messages. See Pinned Messages.
  • ChannelInfoViewEvent.NavigateToMediaAttachments - Indicates an intention to navigate to the channel's media attachments.
  • ChannelInfoViewEvent.NavigateToFilesAttachments - Indicates an intention to navigate to the channel's file attachments.
  • ChannelInfoViewEvent.NavigateToChannel - Indicates an intention to navigate to the channel with the specified CID.
  • ChannelInfoViewEvent.NavigateToDraftChannel - Indicates an intention to navigate to the draft channel with the specified member ID.
• ChannelInfoViewEvent.Modal - Represents a modal event. No need to handle this event, as it is used internally by the components to show modals like confirmation dialogs or bottom sheets.

Customization

The Channel Info components allow customization via ChatComponentFactory of the following UI elements:

• DirectChannelInfoTopBar - The top bar of the direct channel info screen.
• DirectChannelInfoAvatarContainer - The container for the avatar in the direct channel info screen.
• GroupChannelInfoTopBar - The top bar of the group channel info screen.
• GroupChannelInfoAvatarContainer - The container for the avatar in the group channel info screen.
• GroupChannelInfoAddMembersButton - The button to add members in the top bar of the group channel info screen.
• GroupChannelInfoMemberSection - The full member section in the group channel info screen, including member items, expand button, and add button.
• ChannelInfoSeparatorItem - The separator item in the channel info screens.
• ChannelInfoOptionItem - The option item in the channel info screens.
• GroupChannelInfoMemberItem - The item representing a member in the group channel info screen.
• GroupChannelInfoExpandMembersItem - The item to expand the members list in the group channel info screen.
• ChannelInfoScreenModal - The modal that is shown in the channel info screens, such as confirmation dialogs or bottom sheets.
• ChannelInfoMemberInfoModalSheetTopBar - The top bar of the member info modal sheet in the group channel info screen.
• ChannelInfoMemberOptionItem - The option item in the member info modal sheet. Each action is represented by a MemberAction which carries its icon, label, and destructive flag.

Member Actions

The member bottom sheet actions are built by buildDefaultMemberActions(), which produces a list of self-describing MemberAction objects based on channel capabilities and current state:

val memberViewModel: ChannelInfoMemberViewModel

val actions: List<MemberAction> = buildDefaultMemberActions(
    member = member,
    capabilities = capabilities,
    isMuted = isMuted,
    isBlocked = isBlocked,
    onViewAction = { action -> memberViewModel.onViewAction(action) },
)

Each MemberAction carries:

• icon - Drawable resource for the action icon.
• label - Human-readable label.
• isDestructive - Whether the action is destructive (ban, remove). Destructive actions are styled differently.
• onAction - The handler to execute.

The default actions are: Send Direct Message, Mute/Unmute User, Block/Unblock User, Ban/Unban Member (requires BAN_CHANNEL_MEMBERS capability), and Remove Member (requires UPDATE_CHANNEL_MEMBERS capability).