Conversation
Add support for a new behavior.chat.userMessageBubbleStyle option to control user message bubble shape. Updates ConciergeStyles to build a userMessageShape (adds support for a new "balloon" style which has a square bottom-end corner) and exposes it via MessageBubbleStyle. Tests, docs (style-guide), and the demo theme JSON were updated to cover and demonstrate the new option.
Add tests for message bubble shapes Add unit tests for ConciergeStyles.messageBubbleStyle to verify corner shapes under various theme settings. Introduces tests for default fully rounded bubbles, 'balloon' style (bottom-end corner squared), case-insensitive handling of the style token, fallback to default for unknown values, and that bot messages always use the default rounded shape. Ensures correct behavior of theme-driven bubble styling and fallbacks.
Codecov Report❌ Patch coverage is 📢 Thoughts on this report? Let us know! |
timkimadobe
reviewed
Apr 8, 2026
| data class ConciergeChatBehavior( | ||
| val messageAlignment: String? = null, | ||
| val messageWidth: String? = null, | ||
| val userMessageBubbleStyle: String? = null |
Contributor
There was a problem hiding this comment.
Would it be worthwhile for the bubble style to use an enum similar to ProductCardStyle and CarouselStyle?:
enum class UserMessageBubbleStyle(val value: String) {
DEFAULT("default"),
BALLOON("balloon");
companion object {
fun fromString(value: String): UserMessageBubbleStyle =
values().firstOrNull { it.value.equals(value, ignoreCase = true) } ?: DEFAULT
}
}| bottomStart = 12.dp, | ||
| bottomEnd = 0.dp | ||
| ) | ||
| else -> defaultShape |
Contributor
There was a problem hiding this comment.
could this default to 12, but use the value from messageBorderRadius if it is provided?
timkimadobe
approved these changes
Apr 8, 2026
Contributor
timkimadobe
left a comment
timkimadobe
left a comment
There was a problem hiding this comment.
Just some small wording suggestions, looks great thanks Ryan!
Documentation/style-guide.md
Outdated
| | `--input-button-border-radius` | ⚠️ | Parsed but not used in composables | - | | ||
| | `--input-box-shadow` | ⚠️ | Parsed but shadows not rendered | - | | ||
| | `--message-border-radius` | ⚠️ | Parsed but not used in composables | - | | ||
| | `--message-border-radius` | ✅ | Corner radius for all message bubbles; applies to both user and bot bubbles | `ChatMessageItem` | |
Contributor
Author
There was a problem hiding this comment.
that is a better name 😄
| bottomEnd = 0.dp | ||
| ) | ||
| assertEquals(expected, style!!.userMessageShape) | ||
| // Bot message shape is always fully rounded regardless of userMessageBubbleStyle |
Replace occurrences of 'bot' with 'agent' for message bubble wording to improve terminology consistency.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Adds a configurable user message bubble style to the chat UI. By default, all message bubble corners remain fully rounded (existing behavior, no breaking change). Setting
behavior.chat.userMessageBubbleStyleto"balloon"in the theme JSON applies a speech bubble appearance where the bottom-right corner is squared off (0dp radius).Related Issue
Motivation and Context
How Has This Been Tested?
ConciergeThemeTokensTestcoveringConciergeChatBehaviordefaults, custom values, and integration withConciergeThemeBehaviorThemeParserTestcovering parsing of thebehavior.chatblock from JSON, including the absent caseConciergeStylesTestcovering:"balloon"style (square bottom-right corner)"BALLOON"resolves correctly)shaperemains fully rounded regardless ofuserMessageBubbleStylethemeDemo.jsontest theme with"userMessageBubbleStyle": "balloon"Screenshots (if appropriate):
Types of changes
Checklist:
Changes
ConciergeThemeTokens.ktConciergeChatBehaviordata class withmessageAlignment,messageWidth, anduserMessageBubbleStylefieldschat: ConciergeChatBehavior?toConciergeThemeBehaviorThemeParser.ktbehavior.chatblock from theme JSON intoConciergeChatBehaviorConciergeStyles.ktuserMessageShape: ShapetoMessageBubbleStylemessageBubbleStylegetter resolvesuserMessageShapefrombehavior.chat.userMessageBubbleStyle;"balloon"produces aRoundedCornerShapewithbottomEnd = 0.dp, all other values fall back to the default fully-rounded shapeChatMessageItem.ktCardnow usesstyle.userMessageShape; bot messages continue usingstyle.shapeDocumentation/style-guide.mdbehavior.chat.userMessageBubbleStylein the Chat section and Implementation Status tableTheme JSON
{ "behavior": { "chat": { "userMessageBubbleStyle": "balloon" } } }