feat: create shared MessageList component; align Exchange messages based on sender

bmc08gt · bmc08gt · commit 4a62c11870de · 2024-05-10T23:31:15.000-04:00
Signed-off-by: Brandon McAnsh &lt;git@bmcreations.dev&gt;
diff --git a/api/src/main/java/com/getcode/model/Chat.kt b/api/src/main/java/com/getcode/model/Chat.kt
@@ -227,6 +227,7 @@ sealed interface MessageContent {
                 Content.TypeCase.LOCALIZED -> Localized(proto.localized.keyOrText)
                 Content.TypeCase.EXCHANGE_DATA -> {
                     val verb = Verb(proto.exchangeData.verb)
+                    val messageStatus = if (verb.increasesBalance) MessageStatus.Incoming else MessageStatus.Delivered
                     when (proto.exchangeData.exchangeDataCase) {
                         ChatService.ExchangeDataContent.ExchangeDataCase.EXACT -> {
                             val exact = proto.exchangeData.exact
@@ -239,7 +240,7 @@ sealed interface MessageContent {
                                 )
                             )
 
-                            Exchange(GenericAmount.Exact(kinAmount), verb)
+                            Exchange(GenericAmount.Exact(kinAmount), verb, status = messageStatus)
                         }
 
                         ChatService.ExchangeDataContent.ExchangeDataCase.PARTIAL -> {
@@ -251,7 +252,7 @@ sealed interface MessageContent {
                                 amount = partial.nativeAmount
                             )
 
-                            Exchange(GenericAmount.Partial(fiat), verb)
+                            Exchange(GenericAmount.Partial(fiat), verb, status = messageStatus)
                         }
 
                         ChatService.ExchangeDataContent.ExchangeDataCase.EXCHANGEDATA_NOT_SET -> return null
diff --git a/app/src/main/java/com/getcode/ui/components/chat/ChatInput.kt b/app/src/main/java/com/getcode/ui/components/chat/ChatInput.kt
@@ -1,4 +1,4 @@
-package com.getcode.ui.components.conversation
+package com.getcode.ui.components.chat
 
 import androidx.compose.animation.AnimatedContent
 import androidx.compose.animation.AnimatedContentTransitionScope
diff --git a/app/src/main/java/com/getcode/ui/components/chat/DateBubble.kt b/app/src/main/java/com/getcode/ui/components/chat/DateBubble.kt
@@ -0,0 +1,20 @@
+package com.getcode.ui.components.chat
+
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import com.getcode.theme.BrandDark
+import com.getcode.ui.components.Pill
+
+@Composable
+internal fun DateBubble(
+    modifier: Modifier = Modifier,
+    date: String,
+) = Box(modifier = modifier.fillMaxWidth(), contentAlignment = Alignment.Center) {
+    Pill(
+        text = date,
+        backgroundColor = BrandDark
+    )
+}
diff --git a/app/src/main/java/com/getcode/ui/components/chat/DateWithStatus.kt b/app/src/main/java/com/getcode/ui/components/chat/DateWithStatus.kt
@@ -20,6 +20,7 @@ import androidx.compose.ui.unit.Dp
 import com.getcode.R
 import com.getcode.model.MessageStatus
 import com.getcode.theme.BrandLight
+import com.getcode.theme.ChatOutgoing
 import com.getcode.theme.CodeTheme
 import com.getcode.util.formatTimeRelatively
 import kotlinx.datetime.Clock
@@ -83,7 +84,7 @@ private fun Preview_DateWithStatus() {
                 modifier = Modifier
                     .wrapContentWidth()
                     .background(
-                        color = Color(0xFF443091),
+                        color = ChatOutgoing,
                         shape = MessageNodeDefaults.DefaultShape
                     )
                     .padding(CodeTheme.dimens.grid.x2)
@@ -94,7 +95,7 @@ private fun Preview_DateWithStatus() {
                 modifier = Modifier
                     .wrapContentWidth()
                     .background(
-                        color = Color(0xFF443091),
+                        color = ChatOutgoing,
                         shape = MessageNodeDefaults.DefaultShape
                     )
                     .padding(CodeTheme.dimens.grid.x2)
@@ -105,7 +106,7 @@ private fun Preview_DateWithStatus() {
                 modifier = Modifier
                     .wrapContentWidth()
                     .background(
-                        color = Color(0xFF443091),
+                        color = ChatOutgoing,
                         shape = MessageNodeDefaults.DefaultShape
                     )
                     .padding(CodeTheme.dimens.grid.x2)
diff --git a/app/src/main/java/com/getcode/ui/components/chat/MessageList.kt b/app/src/main/java/com/getcode/ui/components/chat/MessageList.kt
@@ -0,0 +1,103 @@
+package com.getcode.ui.components.chat
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.PaddingValues
+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.rememberLazyListState
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.paging.compose.LazyPagingItems
+import androidx.paging.compose.itemContentType
+import androidx.paging.compose.itemKey
+import com.getcode.model.ID
+import com.getcode.theme.CodeTheme
+import com.getcode.ui.components.chat.utils.ChatItem
+import com.getcode.util.formatDateRelatively
+
+sealed interface MessageListEvent {
+    data class ThankUser(val messageId: ID): MessageListEvent
+    data class OpenMessageChat(val messageId: ID): MessageListEvent
+}
+@Composable
+fun MessageList(
+    modifier: Modifier = Modifier,
+    listState: LazyListState = rememberLazyListState(),
+    verticalArrangement: Arrangement.Vertical = Arrangement.Top,
+    messages: LazyPagingItems<ChatItem>,
+    dispatch: (MessageListEvent) -> Unit = { },
+) {
+    LazyColumn(
+        modifier = modifier,
+        state = listState,
+        reverseLayout = true,
+
+        contentPadding = PaddingValues(
+            horizontal = CodeTheme.dimens.inset,
+            vertical = CodeTheme.dimens.inset,
+        ),
+        verticalArrangement = verticalArrangement,
+    ) {
+        items(
+            count = messages.itemCount,
+            key = messages.itemKey { item -> item.key },
+            contentType = messages.itemContentType { item ->
+                when (item) {
+                    is ChatItem.Date -> "separators"
+                    is ChatItem.Message -> "messages"
+                }
+            }
+        ) { index ->
+            when (val item = messages[index]) {
+                is ChatItem.Date -> DateBubble(
+                    modifier = Modifier.padding(vertical = CodeTheme.dimens.grid.x2),
+                    date = item.date
+                )
+                is ChatItem.Message -> {
+                    // reverse layout so +1 to get previous
+                    val prev = runCatching { messages[index + 1] }
+                        .map { it as? ChatItem.Message }
+                        .map { it?.chatMessageId }
+                        .getOrNull()
+                    // reverse layout so -1 to get next
+                    val next = runCatching { messages[index - 1] }
+                        .map { it as? ChatItem.Message }
+                        .map { it?.chatMessageId }
+                        .getOrNull()
+
+                    MessageNode(
+                        modifier = Modifier.fillMaxWidth(),
+                        contents = item.message,
+                        date = item.date,
+                        isPreviousSameMessage = prev == item.chatMessageId,
+                        isNextSameMessage = next == item.chatMessageId,
+                        thankUser = { dispatch(MessageListEvent.ThankUser(item.chatMessageId)) },
+                        openMessageChat = { dispatch(MessageListEvent.OpenMessageChat(item.chatMessageId)) }
+                    )
+                }
+
+                else -> Unit
+            }
+        }
+        // add last separator
+        // this isn't handled by paging separators due to no `beforeItem` to reference against
+        // at end of list due to reverseLayout
+        if (messages.itemCount > 0) {
+            (messages[messages.itemCount - 1] as? ChatItem.Message)?.date?.let { date ->
+                item {
+                    val dateString = remember(date) {
+                        date.formatDateRelatively()
+                    }
+                    DateBubble(
+                        modifier = Modifier.padding(bottom = CodeTheme.dimens.grid.x2),
+                        date = dateString
+                    )
+                }
+            }
+        }
+    }
+}
diff --git a/app/src/main/java/com/getcode/ui/components/chat/MessageNode.kt b/app/src/main/java/com/getcode/ui/components/chat/MessageNode.kt
@@ -3,9 +3,11 @@ package com.getcode.ui.components.chat
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.BoxWithConstraints
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.widthIn
 import androidx.compose.foundation.layout.wrapContentWidth
 import androidx.compose.foundation.shape.CornerBasedShape
 import androidx.compose.foundation.shape.CornerSize
@@ -61,7 +63,7 @@ fun MessageNode(
     thankUser: () -> Unit = { },
     openMessageChat: () -> Unit = { },
 ) {
-    Box(
+    BoxWithConstraints(
         modifier = modifier
             .padding(vertical = CodeTheme.dimens.grid.x1)
     ) {
@@ -78,7 +80,8 @@ fun MessageNode(
             is MessageContent.Exchange -> {
                 MessagePayment(
                     modifier = Modifier
-                        .fillMaxWidth(0.895f)
+                        .align(if (contents.verb.increasesBalance) Alignment.CenterStart else Alignment.CenterEnd)
+                        .widthIn(max = maxWidth * 0.75f)
                         .background(
                             color = color,
                             shape = when {
@@ -92,6 +95,7 @@ fun MessageNode(
                     contents = contents,
                     showTipActions = showTipActions,
                     thankUser = thankUser,
+                    status = contents.status,
                     date = date,
                     openMessageChat = openMessageChat
                 )
@@ -120,7 +124,8 @@ fun MessageNode(
             is MessageContent.SodiumBox -> {
                 EncryptedContent(
                     modifier = Modifier
-                        .fillMaxWidth(0.895f)
+                        .align(if (contents.status.isOutgoing()) Alignment.CenterEnd else Alignment.CenterStart)
+                        .widthIn(max = maxWidth * 0.75f)
                         .background(
                             color = color,
                             shape = when {
diff --git a/app/src/main/java/com/getcode/ui/components/chat/MessageTextContent.kt b/app/src/main/java/com/getcode/ui/components/chat/MessageTextContent.kt
@@ -25,6 +25,7 @@ import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.rememberTextMeasurer
 import com.getcode.model.MessageStatus
 import com.getcode.theme.BrandDark
+import com.getcode.theme.ChatOutgoing
 import com.getcode.theme.CodeTheme
 import com.getcode.util.formatDateRelatively
 import kotlinx.datetime.Instant
@@ -38,12 +39,12 @@ fun MessageText(
     status: MessageStatus = MessageStatus.Unknown,
 ) {
     val alignment = if (isFromSelf) Alignment.CenterEnd else Alignment.CenterStart
-    val color = if (isFromSelf) Color(0xFF443091) else BrandDark
+    val color = if (isFromSelf) ChatOutgoing else BrandDark
 
     BoxWithConstraints(modifier = modifier.fillMaxWidth(), contentAlignment = alignment) {
         BoxWithConstraints(
             modifier = Modifier
-                .widthIn(max = maxWidth * 0.895f)
+                .widthIn(max = maxWidth * 0.75f)
                 .background(
                     color = color,
                     shape = MessageNodeDefaults.DefaultShape
diff --git a/app/src/main/java/com/getcode/ui/components/chat/TipChatActions.kt b/app/src/main/java/com/getcode/ui/components/chat/TipChatActions.kt
@@ -36,6 +36,7 @@ internal fun TipChatActions(
         thankUser()
     }
 
+    if (showTipActions) {
     if (tipChatsEnabled && contents.verb is Verb.ReceivedTip) {
         Row(
             verticalAlignment = Alignment.CenterVertically,
@@ -60,4 +61,5 @@ internal fun TipChatActions(
             )
         }
     }
+        }
 }
diff --git a/app/src/main/java/com/getcode/ui/components/chat/utils/HandleMessageChanges.kt b/app/src/main/java/com/getcode/ui/components/chat/utils/HandleMessageChanges.kt
@@ -1,4 +1,4 @@
-package com.getcode.ui.components.conversation.utils
+package com.getcode.ui.components.chat.utils
 
 import android.os.Build
 import androidx.compose.foundation.lazy.LazyListState
@@ -10,10 +10,7 @@ import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.runtime.setValue
 import androidx.compose.runtime.snapshotFlow
 import androidx.paging.compose.LazyPagingItems
-import com.getcode.model.ConversationMessage
-import com.getcode.model.ConversationMessageContent
 import com.getcode.model.MessageContent
-import com.getcode.ui.components.chat.utils.ChatItem
 import com.getcode.ui.utils.isScrolledToTheBeginning
 import kotlinx.coroutines.delay
 import kotlinx.coroutines.flow.distinctUntilChangedBy
diff --git a/app/src/main/java/com/getcode/view/main/chat/ChatScreen.kt b/app/src/main/java/com/getcode/view/main/chat/ChatScreen.kt
diff --git a/app/src/main/java/com/getcode/view/main/chat/conversation/ChatConversationScreen.kt b/app/src/main/java/com/getcode/view/main/chat/conversation/ChatConversationScreen.kt

Original file line number	Diff line number	Diff line change
`@@ -227,6 +227,7 @@ sealed interface MessageContent {`
`227`	`227`	`Content.TypeCase.LOCALIZED -> Localized(proto.localized.keyOrText)`
`228`	`228`	`Content.TypeCase.EXCHANGE_DATA -> {`
`229`	`229`	`val verb = Verb(proto.exchangeData.verb)`
	`230`	`+ val messageStatus = if (verb.increasesBalance) MessageStatus.Incoming else MessageStatus.Delivered`
`230`	`231`	`when (proto.exchangeData.exchangeDataCase) {`
`231`	`232`	`ChatService.ExchangeDataContent.ExchangeDataCase.EXACT -> {`
`232`	`233`	`val exact = proto.exchangeData.exact`
`@@ -239,7 +240,7 @@ sealed interface MessageContent {`
`239`	`240`	`)`
`240`	`241`	`)`
`241`	`242`
`242`		`- Exchange(GenericAmount.Exact(kinAmount), verb)`
	`243`	`+ Exchange(GenericAmount.Exact(kinAmount), verb, status = messageStatus)`
`243`	`244`	`}`
`244`	`245`
`245`	`246`	`ChatService.ExchangeDataContent.ExchangeDataCase.PARTIAL -> {`
`@@ -251,7 +252,7 @@ sealed interface MessageContent {`
`251`	`252`	`amount = partial.nativeAmount`
`252`	`253`	`)`
`253`	`254`
`254`		`- Exchange(GenericAmount.Partial(fiat), verb)`
	`255`	`+ Exchange(GenericAmount.Partial(fiat), verb, status = messageStatus)`
`255`	`256`	`}`
`256`	`257`
`257`	`258`	`ChatService.ExchangeDataContent.ExchangeDataCase.EXCHANGEDATA_NOT_SET -> return null`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-package com.getcode.ui.components.conversation`
	`1`	`+package com.getcode.ui.components.chat`
`2`	`2`
`3`	`3`	`import androidx.compose.animation.AnimatedContent`
`4`	`4`	`import androidx.compose.animation.AnimatedContentTransitionScope`
Original file line number	Diff line number	Diff line change
`@@ -36,6 +36,7 @@ internal fun TipChatActions(`
`36`	`36`	`thankUser()`
`37`	`37`	`}`
`38`	`38`
	`39`	`+ if (showTipActions) {`
`39`	`40`	`if (tipChatsEnabled && contents.verb is Verb.ReceivedTip) {`
`40`	`41`	`Row(`
`41`	`42`	`verticalAlignment = Alignment.CenterVertically,`
`@@ -60,4 +61,5 @@ internal fun TipChatActions(`
`60`	`61`	`)`
`61`	`62`	`}`
`62`	`63`	`}`
	`64`	`+ }`
`63`	`65`	`}`