Skip to content

Update base message styling#6109

Merged
gpunto merged 17 commits intov7from
redesign/message
Jan 30, 2026
Merged

Update base message styling#6109
gpunto merged 17 commits intov7from
redesign/message

Conversation

@gpunto
Copy link
Contributor

@gpunto gpunto commented Jan 27, 2026

🎯 Goal

Initial work for updating the message design. This PR includes updating bubble color & shapes, text styles, spacing.

🛠 Implementation details

  • Update styling mentioned above
  • Remove most properties from MessageTheme, since we're not going to have intermediate themes anymore.

🎨 UI Changes

Before After
Screenshot_20260127_150834 Screenshot_20260127_150457
Screenshot_20260127_150804 Screenshot_20260127_150533
Screenshot_20260127_150707 Screenshot_20260127_150600

🧪 Testing

Can be seen in action in the sample

Summary by CodeRabbit

Release Notes

  • New Features

    • Added customizable text style parameter for timestamps in messages.
  • UI/UX Improvements

    • Increased message bubble corner radius for a softer appearance.
    • Updated text colors for message timestamps, mentions, and links for improved visual clarity.
    • Refined read status indicator styling.
    • Simplified message theming system by consolidating color and styling properties.
  • Breaking Changes

    • Removed deprecated theme properties and messaging APIs; updated to new color-based theming model.

✏️ Tip: You can customize this high-level summary in your review settings.

@github-actions
Copy link
Contributor

github-actions bot commented Jan 27, 2026

SDK Size Comparison 📏

SDK Before After Difference Status
stream-chat-android-client 5.26 MB 5.26 MB 0.00 MB 🟢
stream-chat-android-offline 5.48 MB 5.48 MB 0.00 MB 🟢
stream-chat-android-ui-components 10.63 MB 10.62 MB -0.01 MB 🚀
stream-chat-android-compose 12.84 MB 11.64 MB -1.20 MB 🚀

@gpunto
Copy link
Contributor Author

gpunto commented Jan 27, 2026

@coderabbitai review

@coderabbitai
Copy link

coderabbitai bot commented Jan 27, 2026

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

@coderabbitai
Copy link

coderabbitai bot commented Jan 27, 2026

Walkthrough

This PR refactors the core theming architecture for Stream Chat Android Compose by introducing a centralized MessageStyling utility and removing the dual ownMessageTheme/otherMessageTheme approach. It updates multiple UI components, removes deprecated theme-related classes and properties, and adds new semantic color and typography properties to improve consistency.

Changes

Cohort / File(s) Summary
Theme Architecture Overhaul
stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/theme/ChatTheme.kt, stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/theme/MessageTheme.kt, stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/theme/MessageStyling.kt
Removed ownMessageTheme and otherMessageTheme parameters from ChatTheme. Introduced new internal MessageStyling utility with composable methods for backgroundColor(), textColor(), textStyle(), timestampStyle(), linkStyle(), and shape(). Removed 12 styling-related properties from MessageTheme (textStyle, errorTextStyle, contentPadding, backgrounds, borders, etc.).
Color System Updates
stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/theme/StreamColors.kt, stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/theme/StreamPrimitiveColors.kt
Removed deprecated color properties (linkBackground, ownMessagesBackground, otherMessagesBackground, deletedMessagesBackground, ownMessageText, otherMessageText). Added new semantic colors: textTertiary, chatTextIncoming, chatTextOutgoing, chatTextLink, chatTextMention, chatTextTimestamp. Updated primitive color values (slate500, neutral100, neutral400).
Typography & Tokens
stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/theme/StreamTypography.kt, stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/theme/StreamTokens.kt
Added bodyDefault and metadataDefault text styles to StreamTypography. Added fontWeightRegular constant to StreamTokens. Updated emoji-related font sizes.
Component Factory & API Changes
stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/theme/ChatComponentFactory.kt
Removed contentPadding parameter from MessageBubble signature. Removed deprecated MessageFooterStatusIndicator overload. Updated implementation to use MessageReadStatusIcon directly.
Message Bubble & Footer Styling
stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/components/messages/MessageBubble.kt, stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/components/messages/MessageFooter.kt, stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/theme/StreamShapes.kt
Changed getMessageBubbleColor signature from theme-based to outgoing-flag-based parameter. Introduced centralized MessageStyling.timestampStyle() usage for timestamps and edited labels. Increased bubble corner radii from 16.dp to 20.dp.
Message Content & Text Components
stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/components/messages/MessageText.kt, stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/components/Timestamp.kt, stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/util/TextUtils.kt
Updated MessageText to use MessageStyling.textStyle() and replaced Uri.parse() with toUri(). Added textStyle parameter to Timestamp composable with default from ChatTheme.typography.footnote. Removed bold font weight from mentioned username styling.
Quoted Message Components
stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/components/messages/QuotedMessage.kt
Updated QuotedMessageUserName and QuotedMessageText signatures to accept and use color parameter instead of theme-based colors. Propagated computed textColor through the component tree.
Message List & Poll Updates
stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/messages/list/MessageItem.kt, stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/components/messages/PollMessageContent.kt
Replaced theme-based bubble styling with MessageStyling.shape() and MessageStyling.backgroundColor(). Removed reliance on PaddingValues from theme. Eliminated getMessageBubbleShape helper function.
Attachment & Status Indicator Styling
stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/attachments/content/LinkAttachmentContent.kt, stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/components/channels/MessageReadStatusIcon.kt
Replaced theme-based link background colors with chatBgAttachmentOutgoing/chatBgAttachmentIncoming. Updated message read status icon colors: read count from textLowEmphasis to chatTextTimestamp; read status from primaryAccent to accentPrimary.
Message Text Formatting Utilities
stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/util/MessageTextFormatter.kt, stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/util/MessageTextFormatterUtils.kt
Replaced defaultTextStyle, defaultLinkStyle, defaultMentionColor utilities with MessageStyling-based lambdas in defaultFormatter. Removed ownMessageTheme and otherMessageTheme parameters. Deleted entire MessageTextFormatterUtils.kt file (125 lines of removed helpers).
Deprecated Class Removals
stream-chat-android-compose/api/stream-chat-android-compose.api
Removed public classes: MessageBackgroundShapes, PollMessageStyle (and its Companion). Updated public API surface to reflect removed properties/methods from StreamColors, StreamTypography, MessageTheme.
Documentation Cleanup
stream-chat-android-compose-sample/src/main/java/io/getstream/chat/android/compose/sample/ui/component/SharedLocationItem.kt, stream-chat-android-docs/src/main/kotlin/io/getstream/chat/docs/kotlin/cookbook/ui/CustomMessageLinkStyle.kt
Updated background color references from ownMessageTheme.backgroundColor/otherMessageTheme.backgroundColor to chatBgOutgoing/chatBgIncoming. Deleted CustomMessageLinkStyle.kt documentation example (74 lines).

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

Possibly related PRs

Suggested labels

compose, theming, breaking-change

Suggested reviewers

  • andremion

Poem

🐰 Hops through the theme with glee,
No more dual paths to decree,
One styling way, centralized and bright,
MessageStyling makes it right!
Bubble shapes and colors aligned,
A cleaner API, designed with mind!

🚥 Pre-merge checks | ✅ 2 | ❌ 1
❌ Failed checks (1 warning)
Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 27.03% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (2 passed)
Check name Status Explanation
Title check ✅ Passed The title 'Update base message styling' directly summarizes the main change—a comprehensive refactor of message styling including bubble colors, shapes, text styles, and spacing.
Description check ✅ Passed The PR description includes all major template sections: Goal clearly states the purpose, Implementation details explain the changes, UI Changes provide before/after screenshots, and Testing notes observability in the sample app.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing touches
  • 📝 Generate docstrings

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (2)
stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/theme/StreamTypography.kt (1)

42-46: Add KDoc for metadataDefault.

StreamTypography is a public API and the new property should be documented alongside bodyDefault to keep the constructor contract clear. As per coding guidelines.

✍️ Suggested KDoc update
- * `@param` bodyDefault Used for body text, like message text.
+ * `@param` bodyDefault Used for body text, like message text.
+ * `@param` metadataDefault Used for metadata text, like timestamps.
stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/components/messages/QuotedMessage.kt (1)

184-196: Potential inconsistency: isMine computed differently in QuotedMessageUserName.

In the parent QuotedMessage, isMine is derived from replyMessage.isMine(currentUser) when replyMessage != null, but here in QuotedMessageUserName, isMine is always computed from message.isMine(currentUser). This means the text color could differ from the background color logic in certain edge cases (e.g., when quoting someone else's message in your own reply).

Consider passing the already-computed isMine from the parent to ensure consistent styling, similar to how QuotedMessageText receives the outgoing parameter.

Proposed fix
 `@Composable`
 private fun QuotedMessageUserName(
     message: Message,
     replyMessage: Message?,
     currentUser: User?,
+    outgoing: Boolean,
 ) {
-    val isMine = message.isMine(currentUser)
-    val userName = if (isMine) {
+    val userName = if (message.isMine(currentUser)) {
         stringResource(R.string.stream_compose_quoted_message_you)
     } else if (replyMessage == null) {
         stringResource(R.string.stream_compose_quoted_message_reply_to, message.user.name)
     } else {
         message.user.name
     }

     Text(
         text = userName,
         fontWeight = FontWeight.SemiBold,
-        color = MessageStyling.textColor(outgoing = isMine),
+        color = MessageStyling.textColor(outgoing = outgoing),
         maxLines = 1,
         overflow = TextOverflow.Ellipsis,
     )
 }

And update the call site at line 145:

-            QuotedMessageUserName(message, replyMessage, currentUser)
+            QuotedMessageUserName(message, replyMessage, currentUser, outgoing = isMine)
🤖 Fix all issues with AI agents
In
`@stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/theme/StreamColors.kt`:
- Around line 161-165: Update the KDoc for StreamColors to reflect the current
public color tokens: remove mentions of removed properties like linkBackground
and chatTextMessage, and add descriptions for textTertiary and the new chatText*
properties (e.g., chatTextPrimary, chatTextSecondary, etc.) as well as
stateBgDisabled and stateTextDisabled; ensure each property (textPrimary,
textSecondary, textTertiary, stateBgDisabled, stateTextDisabled and all
chatText* tokens) has a concise, guideline-compliant one-line description that
matches their usage and intent in the API.

In
`@stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/util/MessageTextFormatter.kt`:
- Line 34: The TODO comment in MessageTextFormatter.kt ("// TODO [G.] do we need
this?") must be resolved before merging: either remove the TODO if it's no
longer relevant, or replace it with a clear actionable comment referencing an
issue ID (create an issue if none exists) and a short rationale for why the code
remains; locate the placeholder in MessageTextFormatter (the top-level
file/comment) and update or remove the line so production code no longer
contains an unanswered TODO.
🧹 Nitpick comments (2)
stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/components/messages/MessageText.kt (1)

182-191: Consider using @StreamPreview for Compose previews.

Based on learnings, Compose previews in this module should use @StreamPreview helpers for consistency.

stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/components/messages/MessageBubble.kt (1)

75-81: Consider simplifying redundant branches.

The when expression has three branches (isDeleted, isErrorOrFailed, else) that all return the same value: MessageStyling.backgroundColor(outgoing). This could be simplified unless the explicit branches are intentional placeholders for future differentiation.

Simplified version
 `@Composable`
 internal fun getMessageBubbleColor(outgoing: Boolean, message: Message): Color {
     return when {
         message.isGiphyEphemeral() -> ChatTheme.colors.giphyMessageBackground
-        message.isDeleted() -> MessageStyling.backgroundColor(outgoing)
-        message.isErrorOrFailed() -> MessageStyling.backgroundColor(outgoing)
         else -> MessageStyling.backgroundColor(outgoing)
     }
 }

@gpunto
Copy link
Contributor Author

gpunto commented Jan 27, 2026

@coderabbitai review

@coderabbitai
Copy link

coderabbitai bot commented Jan 27, 2026

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)
stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/theme/StreamTypography.kt (1)

42-46: Document metadataDefault in the KDoc.

Line 42-46 lists bodyDefault but omits metadataDefault. Please add it to keep the public API documentation complete.

✍️ Suggested KDoc update
- * `@param` bodyDefault Used for body text, like message text.
+ * `@param` bodyDefault Used for body text, like message text.
+ * `@param` metadataDefault Used for low-emphasis metadata, like timestamps or labels.

As per coding guidelines, please keep public API KDoc in sync.

🧹 Nitpick comments (2)
stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/components/messages/MessageFooter.kt (1)

119-123: Consider reusing the textStyle variable.

Line 89 already computes val textStyle = MessageStyling.timestampStyle(). Consider reusing it here instead of calling MessageStyling.timestampStyle() again.

♻️ Suggested change
                 Timestamp(
                     date = date,
                     formatType = DateFormatType.TIME,
-                    textStyle = MessageStyling.timestampStyle()
+                    textStyle = textStyle
                 )
stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/components/messages/MessageBubble.kt (1)

74-81: Simplify getMessageBubbleColor control flow.

Line 78-80 return the same value; you can collapse to a single else to reduce redundancy.

♻️ Suggested simplification
 return when {
     message.isGiphyEphemeral() -> ChatTheme.colors.giphyMessageBackground
-    message.isDeleted() -> MessageStyling.backgroundColor(outgoing)
-    message.isErrorOrFailed() -> MessageStyling.backgroundColor(outgoing)
-    else -> MessageStyling.backgroundColor(outgoing)
+    else -> MessageStyling.backgroundColor(outgoing)
 }

@gpunto gpunto marked this pull request as ready for review January 28, 2026 09:26
@gpunto gpunto requested a review from a team as a code owner January 28, 2026 09:26
@sonarqubecloud
Copy link

Quality Gate Failed Quality Gate failed

Failed conditions
74.9% Coverage on New Code (required ≥ 80%)

See analysis details on SonarQube Cloud

Copy link
Contributor

@andremion andremion left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good job!

I'm wondering why that e2e testing is failing here... 🤔

@gpunto
Copy link
Contributor Author

gpunto commented Jan 30, 2026

Good job!

I'm wondering why that e2e testing is failing here... 🤔

It seems it was flakiness 🙃

@gpunto gpunto merged commit 4aa8b61 into v7 Jan 30, 2026
17 of 19 checks passed
@gpunto gpunto deleted the redesign/message branch January 30, 2026 08:46
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants