[4543] & [4529] - Add a channel avatar handler to MessageListHeader and update docs

CHANGELOG.md

@@ -76,8 +76,10 @@ Added the default value for the `message` parameter passed to the `MessageCompos
 ### ⬆️ Improved
 
 ### ✅ Added
+- Added `onChannelAvatarClick` handler to `MessageListHeader`. [#4545](https://github.com/GetStream/stream-chat-android/pull/4545)
 
 ### ⚠️ Changed
+- Added `onChannelAvatarClick` handler to `MessageListHeader`. [#4545](https://github.com/GetStream/stream-chat-android/pull/4545)
 
 ### ❌ Removed
 

docusaurus/docs/Android/04-compose/05-message-components/02-message-list-header.mdx

@@ -1,6 +1,6 @@
 # MessageListHeader
 
-The `MessageListHeader` component is a clean, stateless component, that doesn't require a `ViewModel`. It allows you to customize the data, design style, action
+The `MessageListHeader` component is a clean, stateless component which doesn't require a `ViewModel`. It allows you to customize the data, design style, action
 handlers and override the internal composable slots.
 
 Out of the box it sets the following:
@@ -32,6 +32,7 @@ override fun onCreate(savedInstanceState: Bundle?) {
                     messageMode = messageMode,
                     onBackPressed = { },
                     onHeaderActionClick = { },
+                    onChannelAvatarClick = { },
                 )
 
                 // Rest of your UI
@@ -53,22 +54,24 @@ Now let's see how to handle the header actions.
 
 ## Handling Actions
 
-The `MessageListHeader` exposes two actions, as per the signature:
+The `MessageListHeader` exposes three actions, as per the signature:
 
 ```kotlin
 @Composable
 fun MessageListHeader(
     ..., // State
     onBackPressed: () -> Unit = {},
     onHeaderActionClick: (Channel) -> Unit = {},
+    onChannelAvatarClick: () -> Unit = {},
 )
 ```
 
 * `onBackPressed`: Handler used when the user clicks on the back button.
-* `onHeaderActionClick`: Handler used when the user clicks on the title for more information about the channel.
+* `onHeaderActionClick`: Handler used when the user clicks on the channel title.
+* `onChannelAvatarClick`: Handler used when the user clicks on the channel avatar.
 
 :::note
-The `leadingContent` uses `onBackPressed` as its default action, while the `centerContent` uses `onHeaderActionClick`. If you want to keep the same UI but change the behavior, you can override `onBackPressed` or `onHeaderActionClick`.
+The `leadingContent` uses `onBackPressed` as its default action, while the `centerContent` uses `onHeaderActionClick` and the `trailingContent` uses `onChannelAvatarClick`. If you want to keep the same UI but change the behavior, you can override `onBackPressed`, `onHeaderActionClick` or `onChannelAvatarClick`.
 
 Otherwise, skip over to [Customization](#customization) to learn how to customize the UI.
 :::
@@ -80,7 +83,10 @@ MessageListHeader(
     ..., // State
     onBackPressed = { finish() },
     onHeaderActionClick = {
-      // Show your custom UI
+        // Handle clicks on the header title
+    },
+    onChannelAvatarClick = {
+        // Handle clicks on the channel avatar
     },
     ... // Content
 )
@@ -143,15 +149,16 @@ fun MessageListHeader(
     trailingContent: @Composable RowScope.() -> Unit = {
         DefaultMessageListHeaderTrailingContent(
             channel = channel,
-            currentUser = currentUser
+            currentUser = currentUser,
+            onClick = onChannelAvatarClick,
         )
     },
 )
 ```
 
-* `leadingContent`: Represents the content at the beginning of the header. By default shows a back button that you can override or customize the behavior of `onBackPressed`.
-* `centerContent`: Represents the core and center part of the header. By default shows information about the channel that you can override or customize the behavior of `onHeaderActionClick`.
-* `trailingContent`: Represents the content at the end of the header. By default shows the channel avatar that you can override.
+* `leadingContent`: Represents the content at the beginning of the header. By default shows a back button that you can override or customize the behavior of by overriding `onBackPressed`.
+* `centerContent`: Represents the core and center part of the header. By default shows information about the channel that you can override or customize the behavior of by overriding `onHeaderActionClick`.
+* `trailingContent`: Represents the content at the end of the header. By default shows the channel avatar that you can override or customize the behavior of by overriding `onChannelAvatarClick`.
 
 **Here's an example of customizing the UI:**
 
@@ -190,7 +197,6 @@ MessageListHeader(
     },
     trailingContent = { InfoButton() }
 )
-)
 ```
 
 The resulting UI looks like this:

stream-chat-android-compose/api/stream-chat-android-compose.api

@@ -1142,7 +1142,7 @@ public final class io/getstream/chat/android/compose/ui/components/userreactions
 }
 
 public final class io/getstream/chat/android/compose/ui/messages/MessagesScreenKt {
-	public static final fun MessagesScreen (Lio/getstream/chat/android/compose/viewmodel/messages/MessagesViewModelFactory;ZLkotlin/jvm/functions/Function0;Lkotlin/jvm/functions/Function1;Landroidx/compose/runtime/Composer;II)V
+	public static final fun MessagesScreen (Lio/getstream/chat/android/compose/viewmodel/messages/MessagesViewModelFactory;ZLkotlin/jvm/functions/Function0;Lkotlin/jvm/functions/Function1;Lkotlin/jvm/functions/Function0;Landroidx/compose/runtime/Composer;II)V
 }
 
 public final class io/getstream/chat/android/compose/ui/messages/attachments/AttachmentsPickerKt {
@@ -1224,7 +1224,7 @@ public final class io/getstream/chat/android/compose/ui/messages/header/Composab
 
 public final class io/getstream/chat/android/compose/ui/messages/header/MessageListHeaderKt {
 	public static final fun DefaultMessageListHeaderCenterContent (Lio/getstream/chat/android/models/Channel;Lio/getstream/chat/android/models/User;Landroidx/compose/ui/Modifier;Ljava/util/List;Lio/getstream/chat/android/ui/common/state/messages/MessageMode;Lkotlin/jvm/functions/Function1;Lio/getstream/chat/android/models/ConnectionState;Landroidx/compose/runtime/Composer;II)V
-	public static final fun MessageListHeader-TYRQsRI (Lio/getstream/chat/android/models/Channel;Lio/getstream/chat/android/models/User;Landroidx/compose/ui/Modifier;Ljava/util/List;Lio/getstream/chat/android/ui/common/state/messages/MessageMode;Lio/getstream/chat/android/models/ConnectionState;JLandroidx/compose/ui/graphics/Shape;FLkotlin/jvm/functions/Function0;Lkotlin/jvm/functions/Function1;Lkotlin/jvm/functions/Function3;Lkotlin/jvm/functions/Function3;Lkotlin/jvm/functions/Function3;Landroidx/compose/runtime/Composer;III)V
+	public static final fun MessageListHeader-LIL5028 (Lio/getstream/chat/android/models/Channel;Lio/getstream/chat/android/models/User;Landroidx/compose/ui/Modifier;Ljava/util/List;Lio/getstream/chat/android/ui/common/state/messages/MessageMode;Lio/getstream/chat/android/models/ConnectionState;JLandroidx/compose/ui/graphics/Shape;FLkotlin/jvm/functions/Function0;Lkotlin/jvm/functions/Function1;Lkotlin/jvm/functions/Function0;Lkotlin/jvm/functions/Function3;Lkotlin/jvm/functions/Function3;Lkotlin/jvm/functions/Function3;Landroidx/compose/runtime/Composer;III)V
 }
 
 public final class io/getstream/chat/android/compose/ui/messages/list/ComposableSingletons$MessageContainerKt {

stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/messages/MessagesScreen.kt

@@ -97,6 +97,7 @@ import io.getstream.chat.android.ui.common.state.messages.list.SendAnyway
  * @param onBackPressed Handler for when the user taps on the Back button and/or the system
  * back button.
  * @param onHeaderActionClick Handler for when the user taps on the header action.
+ * @param onChannelAvatarClick Handler called when the user taps on the channel avatar.
  */
 @Suppress("LongMethod")
 @Composable
@@ -105,6 +106,7 @@ public fun MessagesScreen(
     showHeader: Boolean = true,
     onBackPressed: () -> Unit = {},
     onHeaderActionClick: (channel: Channel) -> Unit = {},
+    onChannelAvatarClick: () -> Unit = {},
 ) {
     val listViewModel = viewModel(MessageListViewModel::class.java, factory = viewModelFactory)
     val composerViewModel = viewModel(MessageComposerViewModel::class.java, factory = viewModelFactory)
@@ -147,7 +149,8 @@ public fun MessagesScreen(
                         connectionState = connectionState,
                         messageMode = messageMode,
                         onBackPressed = backAction,
-                        onHeaderActionClick = onHeaderActionClick
+                        onHeaderActionClick = onHeaderActionClick,
+                        onChannelAvatarClick = onChannelAvatarClick,
                     )
                 }
             },

stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/messages/header/MessageListHeader.kt

@@ -75,6 +75,7 @@ import io.getstream.chat.android.ui.common.state.messages.MessageMode
  * @param elevation The elevation of the header.
  * @param onBackPressed Handler that propagates the back button click event.
  * @param onHeaderActionClick Action handler when the user taps on the header action.
+ * @param onChannelAvatarClick Action handler called when the user taps on the channel avatar.
  * @param leadingContent The content shown at the start of the header, by default a [BackButton].
  * @param centerContent The content shown in the middle of the header and represents the core information, by default
  * [DefaultMessageListHeaderCenterContent].
@@ -93,6 +94,7 @@ public fun MessageListHeader(
     elevation: Dp = ChatTheme.dimens.headerElevation,
     onBackPressed: () -> Unit = {},
     onHeaderActionClick: (Channel) -> Unit = {},
+    onChannelAvatarClick: () -> Unit = {},
     leadingContent: @Composable RowScope.() -> Unit = {
         DefaultMessageListHeaderLeadingContent(onBackPressed = onBackPressed)
     },
@@ -110,7 +112,8 @@ public fun MessageListHeader(
     trailingContent: @Composable RowScope.() -> Unit = {
         DefaultMessageListHeaderTrailingContent(
             channel = channel,
-            currentUser = currentUser
+            currentUser = currentUser,
+            onClick = onChannelAvatarClick,
         )
     },
 ) {
@@ -287,14 +290,20 @@ internal fun DefaultMessageListHeaderSubtitle(
  *
  * @param channel The channel used to display the avatar.
  * @param currentUser The current user. Used for choosing which avatar to display.
+ * @param onClick The handler called when the user taps on the channel avatar.
  */
 @Composable
-internal fun DefaultMessageListHeaderTrailingContent(channel: Channel, currentUser: User?) {
+internal fun DefaultMessageListHeaderTrailingContent(
+    channel: Channel,
+    currentUser: User?,
+    onClick: () -> Unit,
+) {
     ChannelAvatar(
         modifier = Modifier.size(40.dp),
         channel = channel,
         currentUser = currentUser,
         contentDescription = channel.name,
+        onClick = onClick,
     )
 }
 

stream-chat-android-docs/src/main/kotlin/io/getstream/chat/docs/kotlin/compose/messages/MessageListHeader.kt

@@ -52,6 +52,8 @@ private object MessageListHeaderUsageSnippet {
                     val connectionState by listViewModel.connectionState.collectAsState()
                     val messageMode = listViewModel.messageMode
 
+                    // Load the data for the header here
+
                     Column(Modifier.fillMaxSize()) {
                         MessageListHeader(
                             modifier = Modifier.wrapContentHeight(),
@@ -61,6 +63,7 @@ private object MessageListHeaderUsageSnippet {
                             messageMode = messageMode,
                             onBackPressed = { },
                             onHeaderActionClick = { },
+                            onChannelAvatarClick = { },
                         )
 
                         // Rest of your UI
@@ -99,7 +102,10 @@ private object MessageListHeaderHandlingActionsSnippet {
                         currentUser = currentUser,
                         onBackPressed = { finish() },
                         onHeaderActionClick = {
-                            // Show your custom UI
+                            // Handle clicks on the header title
+                        },
+                        onChannelAvatarClick = {
+                            // Handle clicks on the channel avatar
                         },
                         // Content
                     )