[Chat] Scroll Behavior updates (#577)

azure-communication-ui/chat/src/main/java/com/azure/android/communication/ui/chat/presentation/style/ChatCompositeDimensions.kt

@@ -19,6 +19,7 @@ internal data class ChatCompositeDimensions(
     val messageAvatarSize: Dp = 24.dp,
     val messageUsernamePaddingEnd: Dp = 8.dp,
     val messagePadding: PaddingValues = PaddingValues(start = 10.dp, end = 10.dp, top = 8.dp, bottom = 8.dp),
+    val messageListPadding: PaddingValues = PaddingValues(start = 10.dp, end = 10.dp, top = 0.dp, bottom = 0.dp),
     val systemMessagePadding: PaddingValues = PaddingValues(start = 20.dp, end = 5.dp, top = 10.dp, bottom = 10.dp),
     val typingIndicatorAreaHeight: Dp = 36.dp,
     val unreadMessagesIndicatorHeight: Dp = 48.dp,

azure-communication-ui/chat/src/main/java/com/azure/android/communication/ui/chat/presentation/ui/chat/components/MessageListView.kt

@@ -10,7 +10,7 @@ import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.LazyListState
-import androidx.compose.foundation.lazy.items
+import androidx.compose.foundation.lazy.itemsIndexed
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.remember
@@ -22,6 +22,7 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
+import com.azure.android.communication.ui.chat.presentation.style.ChatCompositeTheme
 import com.azure.android.communication.ui.chat.presentation.ui.viewmodel.MessageViewModel
 import com.azure.android.communication.ui.chat.presentation.ui.viewmodel.toViewModelList
 import com.azure.android.communication.ui.chat.preview.MOCK_LOCAL_USER_ID
@@ -44,13 +45,15 @@ internal fun MessageListView(
     requestPages(scrollState, messages, dispatchers)
     if (messages.isNotEmpty()) {
         sendReadReceipt(scrollState, messages, dispatchers)
+        autoScrollToBottom(scrollState, messages)
     }
+
     LazyColumn(
-        modifier = modifier.fillMaxHeight(),
+        modifier = modifier.fillMaxHeight().padding(ChatCompositeTheme.dimensions.messageListPadding),
         state = scrollState,
         reverseLayout = true,
     ) {
-        items(messages.asReversed()) { message ->
+        itemsIndexed(messages.asReversed(), key = { index, item -> item.message.id ?: "" }) { index, message ->
             MessageView(message)
         }
         if (messages.isNotEmpty() && showLoading) {
@@ -91,6 +94,21 @@ private fun requestPages(
     }
 }
 
+@Composable
+private fun autoScrollToBottom(
+    scrollState: LazyListState,
+    messages: List<MessageViewModel>
+) {
+    val wasAtEnd = remember { mutableStateOf(scrollState.firstVisibleItemIndex) }
+    val isAtEnd = scrollState.firstVisibleItemIndex
+    if (wasAtEnd.value == 0 && wasAtEnd.value != isAtEnd) {
+        LaunchedEffect(messages.last()) {
+            scrollState.scrollToItem(0)
+        }
+    }
+    wasAtEnd.value = isAtEnd
+}
+
 @Composable
 private fun sendReadReceipt(
     scrollState: LazyListState,