[4326] Fix text color in quoted messages

CHANGELOG.md

@@ -71,6 +71,7 @@
 ### ⬆️ Improved
 
 ### ✅ Added
+- Added `ownMessageQuotedBackground`, `otherMessageQuotedBackground`, `ownMessageQuotedText` and `otherMessageQuotedText` options to `StreamColors`, to make it possible to customize the appearance of quoted messages via `ChatTheme`. [#4335](https://github.com/GetStream/stream-chat-android/pull/4335)
 
 ### ⚠️ Changed
 

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

@@ -1044,21 +1044,17 @@ public final class io/getstream/chat/android/compose/ui/components/messages/Comp
 public final class io/getstream/chat/android/compose/ui/components/messages/ComposableSingletons$QuotedMessageContentKt {
 	public static final field INSTANCE Lio/getstream/chat/android/compose/ui/components/messages/ComposableSingletons$QuotedMessageContentKt;
 	public static field lambda-1 Lkotlin/jvm/functions/Function3;
-	public static field lambda-2 Lkotlin/jvm/functions/Function3;
 	public fun <init> ()V
 	public final fun getLambda-1$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function3;
-	public final fun getLambda-2$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function3;
 }
 
 public final class io/getstream/chat/android/compose/ui/components/messages/ComposableSingletons$QuotedMessageKt {
 	public static final field INSTANCE Lio/getstream/chat/android/compose/ui/components/messages/ComposableSingletons$QuotedMessageKt;
 	public static field lambda-1 Lkotlin/jvm/functions/Function3;
-	public static field lambda-2 Lkotlin/jvm/functions/Function4;
-	public static field lambda-3 Lkotlin/jvm/functions/Function3;
+	public static field lambda-2 Lkotlin/jvm/functions/Function3;
 	public fun <init> ()V
 	public final fun getLambda-1$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function3;
-	public final fun getLambda-2$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function4;
-	public final fun getLambda-3$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function3;
+	public final fun getLambda-2$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function3;
 }
 
 public final class io/getstream/chat/android/compose/ui/components/messages/GiphyMessageContentKt {
@@ -1104,16 +1100,16 @@ public final class io/getstream/chat/android/compose/ui/components/messages/Owne
 }
 
 public final class io/getstream/chat/android/compose/ui/components/messages/QuotedMessageContentKt {
-	public static final fun QuotedMessageContent (Lio/getstream/chat/android/client/models/Message;Landroidx/compose/ui/Modifier;Lkotlin/jvm/functions/Function3;Lkotlin/jvm/functions/Function3;Landroidx/compose/runtime/Composer;II)V
+	public static final fun QuotedMessageContent (Lio/getstream/chat/android/client/models/Message;Landroidx/compose/ui/Modifier;Lio/getstream/chat/android/client/models/Message;Lkotlin/jvm/functions/Function3;Lkotlin/jvm/functions/Function3;Landroidx/compose/runtime/Composer;II)V
 }
 
 public final class io/getstream/chat/android/compose/ui/components/messages/QuotedMessageKt {
-	public static final fun DefaultQuotedMessageCenterContent (Landroidx/compose/foundation/layout/RowScope;Lio/getstream/chat/android/client/models/Message;Landroidx/compose/runtime/Composer;I)V
-	public static final fun QuotedMessage (Lio/getstream/chat/android/client/models/Message;Lkotlin/jvm/functions/Function1;Lkotlin/jvm/functions/Function1;Landroidx/compose/ui/Modifier;Lkotlin/jvm/functions/Function3;Lkotlin/jvm/functions/Function4;Lkotlin/jvm/functions/Function3;Landroidx/compose/runtime/Composer;II)V
+	public static final fun DefaultQuotedMessageCenterContent (Landroidx/compose/foundation/layout/RowScope;Lio/getstream/chat/android/client/models/Message;Lio/getstream/chat/android/client/models/Message;Landroidx/compose/runtime/Composer;II)V
+	public static final fun QuotedMessage (Lio/getstream/chat/android/client/models/Message;Lkotlin/jvm/functions/Function1;Lkotlin/jvm/functions/Function1;Landroidx/compose/ui/Modifier;Lio/getstream/chat/android/client/models/Message;Lkotlin/jvm/functions/Function3;Lkotlin/jvm/functions/Function4;Lkotlin/jvm/functions/Function3;Landroidx/compose/runtime/Composer;II)V
 }
 
 public final class io/getstream/chat/android/compose/ui/components/messages/QuotedMessageTextKt {
-	public static final fun QuotedMessageText (Lio/getstream/chat/android/client/models/Message;Landroidx/compose/ui/Modifier;ILandroidx/compose/runtime/Composer;II)V
+	public static final fun QuotedMessageText (Lio/getstream/chat/android/client/models/Message;Landroidx/compose/ui/Modifier;Lio/getstream/chat/android/client/models/Message;ILandroidx/compose/runtime/Composer;II)V
 }
 
 public final class io/getstream/chat/android/compose/ui/components/messages/ThreadParticipantsKt {
@@ -1472,8 +1468,8 @@ public final class io/getstream/chat/android/compose/ui/theme/ChatThemeKt {
 
 public final class io/getstream/chat/android/compose/ui/theme/StreamColors {
 	public static final field Companion Lio/getstream/chat/android/compose/ui/theme/StreamColors$Companion;
-	public synthetic fun <init> (JJJJJJJJJJJJJJJJJJJJJJILkotlin/jvm/internal/DefaultConstructorMarker;)V
-	public synthetic fun <init> (JJJJJJJJJJJJJJJJJJJJJJLkotlin/jvm/internal/DefaultConstructorMarker;)V
+	public synthetic fun <init> (JJJJJJJJJJJJJJJJJJJJJJJJJJILkotlin/jvm/internal/DefaultConstructorMarker;)V
+	public synthetic fun <init> (JJJJJJJJJJJJJJJJJJJJJJJJJJLkotlin/jvm/internal/DefaultConstructorMarker;)V
 	public final fun component1-0d7_KjU ()J
 	public final fun component10-0d7_KjU ()J
 	public final fun component11-0d7_KjU ()J
@@ -1489,15 +1485,19 @@ public final class io/getstream/chat/android/compose/ui/theme/StreamColors {
 	public final fun component20-0d7_KjU ()J
 	public final fun component21-0d7_KjU ()J
 	public final fun component22-0d7_KjU ()J
+	public final fun component23-0d7_KjU ()J
+	public final fun component24-0d7_KjU ()J
+	public final fun component25-0d7_KjU ()J
+	public final fun component26-0d7_KjU ()J
 	public final fun component3-0d7_KjU ()J
 	public final fun component4-0d7_KjU ()J
 	public final fun component5-0d7_KjU ()J
 	public final fun component6-0d7_KjU ()J
 	public final fun component7-0d7_KjU ()J
 	public final fun component8-0d7_KjU ()J
 	public final fun component9-0d7_KjU ()J
-	public final fun copy-0VcbP8k (JJJJJJJJJJJJJJJJJJJJJJ)Lio/getstream/chat/android/compose/ui/theme/StreamColors;
-	public static synthetic fun copy-0VcbP8k$default (Lio/getstream/chat/android/compose/ui/theme/StreamColors;JJJJJJJJJJJJJJJJJJJJJJILjava/lang/Object;)Lio/getstream/chat/android/compose/ui/theme/StreamColors;
+	public final fun copy-CRp9MJE (JJJJJJJJJJJJJJJJJJJJJJJJJJ)Lio/getstream/chat/android/compose/ui/theme/StreamColors;
+	public static synthetic fun copy-CRp9MJE$default (Lio/getstream/chat/android/compose/ui/theme/StreamColors;JJJJJJJJJJJJJJJJJJJJJJJJJJILjava/lang/Object;)Lio/getstream/chat/android/compose/ui/theme/StreamColors;
 	public fun equals (Ljava/lang/Object;)Z
 	public final fun getAppBackground-0d7_KjU ()J
 	public final fun getBarsBackground-0d7_KjU ()J
@@ -1510,10 +1510,14 @@ public final class io/getstream/chat/android/compose/ui/theme/StreamColors {
 	public final fun getInfoAccent-0d7_KjU ()J
 	public final fun getInputBackground-0d7_KjU ()J
 	public final fun getLinkBackground-0d7_KjU ()J
+	public final fun getOtherMessageQuotedBackground-0d7_KjU ()J
+	public final fun getOtherMessageQuotedText-0d7_KjU ()J
 	public final fun getOtherMessageText-0d7_KjU ()J
 	public final fun getOtherMessagesBackground-0d7_KjU ()J
 	public final fun getOverlay-0d7_KjU ()J
 	public final fun getOverlayDark-0d7_KjU ()J
+	public final fun getOwnMessageQuotedBackground-0d7_KjU ()J
+	public final fun getOwnMessageQuotedText-0d7_KjU ()J
 	public final fun getOwnMessageText-0d7_KjU ()J
 	public final fun getOwnMessagesBackground-0d7_KjU ()J
 	public final fun getPrimaryAccent-0d7_KjU ()J

stream-chat-android-compose/detekt-baseline.xml

@@ -37,6 +37,7 @@
     <ID>MaxLineLength:MessageOptions.kt$title = if (selectedMessage.pinned) R.string.stream_compose_unpin_message else R.string.stream_compose_pin_message</ID>
     <ID>MaxLineLength:MessagesScreen.kt$*</ID>
     <ID>MaxLineLength:MessagesViewModelFactory.kt$MessagesViewModelFactory$private val dateSeparatorThresholdMillis: Long = TimeUnit.HOURS.toMillis(MessageListViewModel.DateSeparatorDefaultHourThreshold)</ID>
+    <ID>MaxLineLength:StreamColors.kt$StreamColors$*</ID>
     <ID>ReturnCount:MessageListViewModel.kt$MessageListViewModel$public fun updateLastSeenMessage(message: Message)</ID>
   </CurrentIssues>
 </SmellBaseline>

stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/components/composer/MessageInput.kt

@@ -86,6 +86,7 @@ public fun MessageInput(
                     QuotedMessage(
                         modifier = Modifier.padding(horizontal = 4.dp),
                         message = activeAction.message,
+                        replyMessage = null,
                         onLongItemClick = {},
                         onQuotedMessageClick = {}
                     )

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

@@ -34,6 +34,8 @@ import androidx.compose.ui.text.TextLayoutResult
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
+import com.getstream.sdk.chat.utils.extensions.isMine
+import io.getstream.chat.android.client.ChatClient
 import io.getstream.chat.android.client.models.Message
 import io.getstream.chat.android.compose.ui.theme.ChatTheme
 import io.getstream.chat.android.compose.ui.util.buildAnnotatedMessageText
@@ -61,7 +63,12 @@ public fun MessageText(
 ) {
     val context = LocalContext.current
 
-    val styledText = buildAnnotatedMessageText(message)
+    val textColor = if (message.isMine(ChatClient.instance())) {
+        ChatTheme.colors.ownMessageText
+    } else {
+        ChatTheme.colors.otherMessageText
+    }
+    val styledText = buildAnnotatedMessageText(message.text, textColor)
     val annotations = styledText.getStringAnnotations(0, styledText.lastIndex)
 
     // TODO: Fix emoji font padding once this is resolved and exposed: https://issuetracker.google.com/issues/171394808

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

@@ -37,10 +37,11 @@ import io.getstream.chat.android.compose.ui.theme.ChatTheme
 /**
  * Wraps the quoted message into a component that shows only the sender avatar, text and single attachment preview.
  *
- * @param message Message to show.
+ * @param message The quoted message to show.
  * @param onLongItemClick Handler when the item is long clicked.
  * @param onQuotedMessageClick Handler for quoted message click action.
  * @param modifier Modifier for styling.
+ * @param replyMessage The message that contains the reply.
  * @param leadingContent The content shown at the start of the quoted message. By default we provide
  * [DefaultQuotedMessageLeadingContent] which shows the sender avatar in case the sender is not the current user.
  * @param centerContent The content shown at the center of the quoted message. By default we provide
@@ -55,8 +56,14 @@ public fun QuotedMessage(
     onLongItemClick: (Message) -> Unit,
     onQuotedMessageClick: (Message) -> Unit,
     modifier: Modifier = Modifier,
+    replyMessage: Message? = null,
     leadingContent: @Composable (Message) -> Unit = { DefaultQuotedMessageLeadingContent(message = it) },
-    centerContent: @Composable RowScope.(Message) -> Unit = { DefaultQuotedMessageCenterContent(it) },
+    centerContent: @Composable RowScope.(Message) -> Unit = {
+        DefaultQuotedMessageCenterContent(
+            message = it,
+            replyMessage = replyMessage,
+        )
+    },
     trailingContent: @Composable (Message) -> Unit = { DefaultQuotedMessageTrailingContent(message = it) },
 ) {
     Row(
@@ -126,13 +133,16 @@ internal fun DefaultQuotedMessageTrailingContent(message: Message) {
  * Represents the default content shown in the center of the quoted message wrapped inside a message bubble.
  *
  * @param message The quoted message.
+ * @param replyMessage The message that contains the reply.
  */
 @Composable
 public fun RowScope.DefaultQuotedMessageCenterContent(
     message: Message,
+    replyMessage: Message? = null,
 ) {
     QuotedMessageContent(
         message = message,
+        replyMessage = replyMessage,
         modifier = Modifier.weight(1f, fill = false)
     )
 }

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

@@ -20,32 +20,50 @@ import androidx.compose.foundation.layout.Row
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import com.getstream.sdk.chat.utils.extensions.isMine
+import io.getstream.chat.android.client.ChatClient
 import io.getstream.chat.android.client.models.Message
 import io.getstream.chat.android.compose.ui.attachments.content.QuotedMessageAttachmentContent
 import io.getstream.chat.android.compose.ui.theme.ChatTheme
 
 /**
  * Represents the default quoted message content that shows an attachment preview, if available, and the message text.
  *
- * @param message The message to show.
+ * @param message The quoted message to show.
  * @param modifier Modifier for styling.
+ * @param replyMessage The message that contains the reply.
  * @param attachmentContent The content for the attachment preview, if available.
  * @param textContent The content for the text preview, or the attachment name or type.
  */
 @Composable
 public fun QuotedMessageContent(
     message: Message,
     modifier: Modifier = Modifier,
+    replyMessage: Message? = null,
     attachmentContent: @Composable (Message) -> Unit = { DefaultQuotedMessageAttachmentContent(it) },
-    textContent: @Composable (Message) -> Unit = { DefaultQuotedMessageTextContent(it) },
+    textContent: @Composable (Message) -> Unit = {
+        DefaultQuotedMessageTextContent(
+            message = it,
+            replyMessage = replyMessage,
+        )
+    },
 ) {
-    val isMyMessage = message.isMine()
+    val messageBubbleShape = if (message.isMine(ChatClient.instance())) {
+        ChatTheme.shapes.myMessageBubble
+    } else {
+        ChatTheme.shapes.otherMessageBubble
+    }
 
-    val messageBubbleShape = if (isMyMessage) ChatTheme.shapes.myMessageBubble else ChatTheme.shapes.otherMessageBubble
+    // The quoted section color depends on the author of the reply.
+    val messageBubbleColor = if (replyMessage?.isMine(ChatClient.instance()) != false) {
+        ChatTheme.colors.ownMessageQuotedBackground
+    } else {
+        ChatTheme.colors.otherMessageQuotedBackground
+    }
 
     MessageBubble(
         modifier = modifier,
-        shape = messageBubbleShape, color = ChatTheme.colors.barsBackground,
+        shape = messageBubbleShape,
+        color = messageBubbleColor,
         content = {
             Row {
                 attachmentContent(message)
@@ -79,10 +97,15 @@ internal fun DefaultQuotedMessageAttachmentContent(message: Message) {
  * By default we show the message text if there is any or show the previewed attachment name.
  *
  * @param message The quoted message.
+ * @param replyMessage The message that contains the reply.
  */
 @Composable
-internal fun DefaultQuotedMessageTextContent(message: Message) {
+internal fun DefaultQuotedMessageTextContent(
+    message: Message,
+    replyMessage: Message? = null,
+) {
     QuotedMessageText(
-        message = message
+        message = message,
+        replyMessage = replyMessage,
     )
 }

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

@@ -39,12 +39,14 @@ import io.getstream.chat.android.uiutils.extension.isFile
  *
  * @param message Message to show.
  * @param modifier Modifier for styling.
+ * @param replyMessage The message that contains the reply.
  * @param quoteMaxLines Max number of lines quoted text can have.
  */
 @Composable
 public fun QuotedMessageText(
     message: Message,
     modifier: Modifier = Modifier,
+    replyMessage: Message? = null,
     quoteMaxLines: Int = DefaultQuoteMaxLines,
 ) {
     val attachment = message.attachments.firstOrNull()
@@ -83,7 +85,12 @@ public fun QuotedMessageText(
         "quotedMessageText is null. Cannot display invalid message title."
     }
 
-    val styledText = buildAnnotatedMessageText(quotedMessageText, message.isMine(ChatClient.instance()))
+    val textColor = if (replyMessage?.isMine(ChatClient.instance()) != false) {
+        ChatTheme.colors.ownMessageQuotedText
+    } else {
+        ChatTheme.colors.otherMessageQuotedText
+    }
+    val styledText = buildAnnotatedMessageText(quotedMessageText, textColor)
 
     val horizontalPadding = ChatTheme.dimens.quotedMessageTextHorizontalPadding
     val verticalPadding = ChatTheme.dimens.quotedMessageTextVerticalPadding

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

@@ -563,8 +563,9 @@ internal fun DefaultMessageTextContent(
     Column {
         if (quotedMessage != null) {
             QuotedMessage(
-                modifier = Modifier.padding(2.dp),
+                modifier = Modifier.padding(horizontal = 8.dp, vertical = 4.dp),
                 message = quotedMessage,
+                replyMessage = message,
                 onLongItemClick = { onLongItemClick(message) },
                 onQuotedMessageClick = onQuotedMessageClick
             )

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

@@ -47,6 +47,10 @@ import io.getstream.chat.android.compose.R
  * @param threadSeparatorGradientEnd Used as an end color for vertical gradient background in a thread separator.
  * @param ownMessageText Used for message text color for the current user. [textHighEmphasis] by default.
  * @param otherMessageText Used for message text color for other users. [textHighEmphasis] by default.
+ * @param ownMessageQuotedBackground Changes the background color of the quoted message contained in a reply sent by the current user.
+ * @param otherMessageQuotedBackground Changes the background color of the quoted message contained in a reply sent by other users.
+ * @param ownMessageQuotedText Changes the text color of the quoted message contained in a reply sent by the current user. [textHighEmphasis] by default.
+ * @param otherMessageQuotedText Changes the text color of the quoted message contained in a reply sent by other users. [textHighEmphasis] by default.
  */
 @Immutable
 public data class StreamColors(
@@ -71,7 +75,11 @@ public data class StreamColors(
     public val threadSeparatorGradientStart: Color,
     public val threadSeparatorGradientEnd: Color,
     public val ownMessageText: Color = textHighEmphasis,
-    public val otherMessageText: Color = textHighEmphasis
+    public val otherMessageText: Color = textHighEmphasis,
+    public val ownMessageQuotedBackground: Color = otherMessagesBackground,
+    public val otherMessageQuotedBackground: Color = ownMessagesBackground,
+    public val ownMessageQuotedText: Color = textHighEmphasis,
+    public val otherMessageQuotedText: Color = textHighEmphasis,
 ) {
 
     public companion object {