Implement StickyPinnedMessagesSubheader to showcase scrollToMessage.

stream-chat-android-compose-sample/src/main/java/io/getstream/chat/android/compose/sample/ui/MessagesActivity.kt

@@ -58,12 +58,14 @@ import androidx.compose.ui.platform.LocalConfiguration
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.unit.dp
 import androidx.core.net.toUri
+import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import io.getstream.chat.android.compose.sample.ChatApp
 import io.getstream.chat.android.compose.sample.R
 import io.getstream.chat.android.compose.sample.feature.channel.isGroupChannel
 import io.getstream.chat.android.compose.sample.ui.channel.DirectChannelInfoActivity
 import io.getstream.chat.android.compose.sample.ui.channel.GroupChannelInfoActivity
 import io.getstream.chat.android.compose.sample.ui.component.CustomChatComponentFactory
+import io.getstream.chat.android.compose.sample.ui.component.StickyPinnedMessagesSubheader
 import io.getstream.chat.android.compose.sample.ui.location.LocationPickerTabFactory
 import io.getstream.chat.android.compose.sample.vm.SharedLocationViewModelFactory
 import io.getstream.chat.android.compose.state.mediagallerypreview.MediaGalleryPreviewResultType
@@ -78,6 +80,7 @@ import io.getstream.chat.android.compose.ui.messages.attachments.AttachmentsPick
 import io.getstream.chat.android.compose.ui.messages.attachments.factory.AttachmentPickerPollCreation
 import io.getstream.chat.android.compose.ui.messages.attachments.factory.AttachmentsPickerTabFactories
 import io.getstream.chat.android.compose.ui.messages.composer.MessageComposer
+import io.getstream.chat.android.compose.ui.messages.header.MessageListHeader
 import io.getstream.chat.android.compose.ui.messages.list.MessageList
 import io.getstream.chat.android.compose.ui.theme.ChatTheme
 import io.getstream.chat.android.compose.ui.theme.MessageComposerTheme
@@ -191,6 +194,22 @@ class MessagesActivity : ComponentActivity() {
                 reactionSorting = ReactionSortingByLastReactionAt,
                 onBackPressed = { finish() },
                 onHeaderTitleClick = ::openChannelInfo,
+                topBarContent = {
+                    Column {
+                        MessageListHeader(
+                            modifier = Modifier.height(56.dp),
+                            channel = listViewModel.channel,
+                            currentUser = listViewModel.user.collectAsStateWithLifecycle().value,
+                            connectionState = listViewModel.connectionState.collectAsState().value,
+                            typingUsers = listViewModel.typingUsers,
+                            messageMode = listViewModel.messageMode,
+                            onBackPressed = ::finish,
+                            onHeaderTitleClick = ::openChannelInfo,
+                            onChannelAvatarClick = null,
+                        )
+                        StickyPinnedMessagesSubheader(listViewModel)
+                    }
+                },
                 onMessageLinkClick = { _, link ->
                     openLink(link)
                 },

stream-chat-android-compose-sample/src/main/java/io/getstream/chat/android/compose/sample/ui/component/StickyPinnedMessagesSubheader.kt

@@ -0,0 +1,91 @@
+/*
+ * Copyright (c) 2014-2025 Stream.io Inc. All rights reserved.
+ *
+ * Licensed under the Stream License;
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    https://github.com/GetStream/stream-chat-android/blob/main/LICENSE
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package io.getstream.chat.android.compose.sample.ui.component
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.Icon
+import androidx.compose.material3.Text
+import androidx.compose.material3.ripple
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableIntStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.unit.dp
+import androidx.lifecycle.compose.collectAsStateWithLifecycle
+import io.getstream.chat.android.compose.sample.R
+import io.getstream.chat.android.compose.ui.pinned.PinnedMessageItem
+import io.getstream.chat.android.compose.ui.theme.ChatTheme
+import io.getstream.chat.android.compose.viewmodel.messages.MessageListViewModel
+
+@Composable
+fun StickyPinnedMessagesSubheader(
+    viewModel: MessageListViewModel,
+) {
+    val pinnedMessages = viewModel
+        .channel
+        .pinnedMessages
+        .sortedByDescending { it.pinnedAt }
+
+    if (pinnedMessages.isNotEmpty()) {
+        val currentUser = viewModel.user.collectAsStateWithLifecycle().value
+        var currentPinnedMessageIndex by rememberSaveable(pinnedMessages.size) { mutableIntStateOf(0) }
+        val index = if (pinnedMessages.isNotEmpty()) currentPinnedMessageIndex % pinnedMessages.size else 0
+        val pinnedMessage = pinnedMessages[index]
+        Column(
+            modifier = Modifier.background(ChatTheme.colors.barsBackground),
+        ) {
+            Text(
+                modifier = Modifier.padding(horizontal = 8.dp, vertical = 8.dp),
+                text = "Pinned messages",
+                style = ChatTheme.typography.bodyItalic,
+            )
+            Row(verticalAlignment = Alignment.CenterVertically) {
+                PinnedMessageItem(
+                    modifier = Modifier.weight(1f),
+                    message = pinnedMessage,
+                    currentUser = currentUser,
+                    onPinnedMessageClick = { message ->
+                        viewModel.scrollToMessage(message.id, message.parentId)
+                    },
+                )
+                Icon(
+                    modifier = Modifier
+                        .clickable(
+                            interactionSource = remember { MutableInteractionSource() },
+                            indication = ripple(),
+                            onClick = {
+                                currentPinnedMessageIndex++
+                            },
+                        )
+                        .padding(16.dp),
+                    contentDescription = "move to the next",
+                    painter = painterResource(id = R.drawable.ic_arrow_up),
+                )
+            }
+        }
+    }
+}

stream-chat-android-compose-sample/src/main/res/drawable/ic_arrow_up.xml

@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+    Copyright (c) 2014-2025 Stream.io Inc. All rights reserved.
+
+    Licensed under the Stream License;
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+      https://github.com/GetStream/stream-chat-android/blob/main/LICENSE
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+-->
+<vector xmlns:android="http://schemas.android.com/apk/res/android" android:height="24dp" android:tint="#000000" android:viewportHeight="960" android:viewportWidth="960" android:width="24dp">
+
+    <path android:fillColor="@android:color/white" android:pathData="M440,720L440,352L296,496L240,440L480,200L720,440L664,496L520,352L520,720L440,720Z"/>
+
+</vector>