Separate incoming and outgoing message text color

Author: gpunto

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

@@ -49,6 +49,7 @@ import io.getstream.chat.android.compose.ui.util.showOriginalTextAsState
 import io.getstream.chat.android.models.Message
 import io.getstream.chat.android.models.User
 import io.getstream.chat.android.ui.common.utils.extensions.getUserByNameOrId
+import io.getstream.chat.android.ui.common.utils.extensions.isMine
 
 /**
  * Default text element for messages, with extra styling and padding for the chat bubble.
@@ -92,7 +93,7 @@ public fun MessageText(
     val style = when {
         message.isSingleEmoji() -> ChatTheme.typography.singleEmoji
         message.isFewEmoji() -> ChatTheme.typography.emojiOnly
-        else -> MessageStyling.textStyle()
+        else -> MessageStyling.textStyle(outgoing = message.isMine(currentUser))
     }
 
     val annotations = styledText.getStringAnnotations(0, styledText.lastIndex)

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

@@ -56,6 +56,7 @@ import io.getstream.chat.android.compose.ui.components.ComposerCancelIcon
 import io.getstream.chat.android.compose.ui.components.attachments.files.FileIconData
 import io.getstream.chat.android.compose.ui.components.attachments.files.FileTypeIcon
 import io.getstream.chat.android.compose.ui.theme.ChatTheme
+import io.getstream.chat.android.compose.ui.theme.MessageStyling
 import io.getstream.chat.android.compose.ui.theme.StreamPrimitiveColors
 import io.getstream.chat.android.compose.ui.theme.StreamTokens
 import io.getstream.chat.android.compose.ui.util.StreamAsyncImage
@@ -86,10 +87,12 @@ public fun QuotedMessage(
     val colors = ChatTheme.colors
     val backgroundColor: Color
     val indicatorColor: Color
+    val isMine: Boolean
 
     if (replyMessage != null) {
         // replyMessage is not null: we're rendering an already-sent message
-        if (replyMessage.isMine(currentUser)) {
+        isMine = replyMessage.isMine(currentUser)
+        if (isMine) {
             backgroundColor = colors.chatBgAttachmentOutgoing
             indicatorColor = colors.chatReplyIndicatorOutgoing
         } else {
@@ -98,7 +101,8 @@ public fun QuotedMessage(
         }
     } else {
         // replyMessage is null: we're composing a reply
-        if (message.isMine(currentUser)) {
+        isMine = message.isMine(currentUser)
+        if (isMine) {
             backgroundColor = colors.chatBgOutgoing
             indicatorColor = colors.chatReplyIndicatorOutgoing
         } else {
@@ -139,7 +143,7 @@ public fun QuotedMessage(
             verticalArrangement = Arrangement.Center,
         ) {
             QuotedMessageUserName(message, replyMessage, currentUser)
-            QuotedMessageText(body)
+            QuotedMessageText(body, outgoing = isMine)
         }
 
         QuotedMessageAttachmentPreview(body)
@@ -177,7 +181,8 @@ private fun QuotedMessageUserName(
     replyMessage: Message?,
     currentUser: User?,
 ) {
-    val userName = if (message.isMine(currentUser)) {
+    val isMine = message.isMine(currentUser)
+    val userName = if (isMine) {
         stringResource(R.string.stream_compose_quoted_message_you)
     } else if (replyMessage == null) {
         stringResource(R.string.stream_compose_quoted_message_reply_to, message.user.name)
@@ -188,15 +193,15 @@ private fun QuotedMessageUserName(
     Text(
         text = userName,
         fontWeight = FontWeight.SemiBold,
-        color = ChatTheme.colors.chatTextMessage,
+        color = MessageStyling.textColor(outgoing = isMine),
         maxLines = 1,
         overflow = TextOverflow.Ellipsis,
     )
 }
 
 @Composable
-private fun QuotedMessageText(body: QuotedMessageBody) {
-    val color = ChatTheme.colors.chatTextMessage
+private fun QuotedMessageText(body: QuotedMessageBody, outgoing: Boolean) {
+    val color = MessageStyling.textColor(outgoing)
 
     Row(
         horizontalArrangement = Arrangement.spacedBy(StreamTokens.spacing2xs),

stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/theme/MessageStyling.kt

@@ -19,6 +19,7 @@ package io.getstream.chat.android.compose.ui.theme
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.foundation.shape.ZeroCornerSize
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.Shape
 import androidx.compose.ui.text.TextStyle
 import io.getstream.chat.android.ui.common.state.messages.list.MessagePosition
@@ -31,11 +32,25 @@ internal object MessageStyling {
     }
 
     @Composable
-    fun textStyle(): TextStyle =
-        textStyle(ChatTheme.typography, ChatTheme.colors)
+    fun textColor(outgoing: Boolean): Color {
+        return textColor(outgoing, ChatTheme.colors)
+    }
+
+    fun textColor(outgoing: Boolean, colors: StreamColors): Color {
+        return if (outgoing) {
+            colors.chatTextOutgoing
+        } else {
+            colors.chatTextIncoming
+        }
+    }
 
-    fun textStyle(typography: StreamTypography, colors: StreamColors): TextStyle =
-        typography.bodyDefault.copy(color = colors.chatTextMessage)
+    @Composable
+    fun textStyle(outgoing: Boolean): TextStyle =
+        textStyle(outgoing, ChatTheme.typography, ChatTheme.colors)
+
+    fun textStyle(outgoing: Boolean, typography: StreamTypography, colors: StreamColors): TextStyle {
+        return typography.bodyDefault.copy(color = textColor(outgoing, colors))
+    }
 
     fun linkStyle(typography: StreamTypography, colors: StreamColors): TextStyle =
         typography.bodyDefault.copy(color = colors.chatTextLink)
@@ -58,11 +73,11 @@ internal object MessageStyling {
         return when (position) {
             MessagePosition.TOP,
             MessagePosition.MIDDLE,
-            -> roundBubble
+                -> roundBubble
 
             MessagePosition.BOTTOM,
             MessagePosition.NONE,
-            -> when {
+                -> when {
                 outgoing -> outgoingBubble
                 else -> incomingBubble
             }

stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/theme/StreamColors.kt

@@ -188,7 +188,8 @@ public data class StreamColors(
     public val chatBgAttachmentOutgoing: Color,
     public val chatReplyIndicatorIncoming: Color,
     public val chatReplyIndicatorOutgoing: Color,
-    public val chatTextMessage: Color = textPrimary,
+    public val chatTextIncoming: Color = textPrimary,
+    public val chatTextOutgoing: Color = textPrimary,
     public val chatTextLink: Color = primaryAccent,
     public val chatTextMention: Color = chatTextLink,
     public val chatTextTimestamp: Color = textTertiary,

stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/util/MessageTextFormatter.kt

@@ -71,7 +71,7 @@ public fun interface MessageTextFormatter {
                 else -> StreamColors.defaultColors()
             },
             textStyle: (isMine: Boolean, message: Message) -> TextStyle =
-                { _, _ -> MessageStyling.textStyle(typography, colors) },
+                { isMine, _ -> MessageStyling.textStyle(outgoing = isMine, typography, colors) },
             linkStyle: (isMine: Boolean) -> TextStyle = { MessageStyling.linkStyle(typography, colors) },
             mentionColor: (isMine: Boolean) -> Color = { colors.chatTextMention },
             builder: AnnotatedMessageTextBuilder? = null,
@@ -114,7 +114,7 @@ public fun interface MessageTextFormatter {
                 isInDarkMode = isInDarkMode,
                 typography = typography,
                 colors = colors,
-                textStyle = { _, _ -> MessageStyling.textStyle(typography, colors) },
+                textStyle = { isMine, _ -> MessageStyling.textStyle(outgoing = isMine, typography, colors) },
                 linkStyle = { MessageStyling.linkStyle(typography, colors) },
                 mentionColor = { colors.chatTextMention },
                 builder = builder,