Merge pull request #99 from rymorale/internal-fixes

Internal fixes + add UI tests

Author: rymorale

Documentation/style-guide.md

@@ -262,7 +262,7 @@ Feature toggles and interaction configuration.
 
 | JSON Key | Type | Default | Description |
 |----------|------|---------|-------------|
-| `behavior.chat.messageAlignment` | string | `"left"` | Message alignment (`"left"`, `"center"`, `"right"`) |
+| `behavior.chat.messageAlignment` | string | `"start"` | Agent message alignment (`"start"`, `"center"`, `"end"`). Note: theme JSONs using legacy `"left"` values are treated as `"start"`. |
 | `behavior.chat.messageWidth` | string | `"100%"` | Max message width (e.g., `"100%"`, `"768px"`) |
 | `behavior.chat.userMessageBubbleStyle` | string | `"default"` | User message bubble shape. `"default"` = all corners rounded; `"balloon"` = rounded except bottom-right corner is square (speech balloon style). Corner radius is controlled by `--message-border-radius` (default `12dp`). |
 
@@ -1151,7 +1151,7 @@ This section documents which properties are fully implemented, partially impleme
 | `behavior.input.sendButtonStyle` | ✅ | `"default"` (paper airplane) or `"arrow"` (filled circle with upward arrow) | `SendButton` |
 | `behavior.input.disableMultiline` | ✅ | Restricts input to a single line when `true` | `ChatTextField` |
 | `behavior.input.showAiChatIcon` | ⚠️ | Parsed but not implemented | - |
-| `behavior.chat.messageAlignment` | ⚠️ | Parsed but not implemented | - |
+| `behavior.chat.messageAlignment` | ✅ | `"start"` (default, full-width), `"center"`, or `"end"` alignment for agent message bubbles | `ChatMessageItem` |
 | `behavior.chat.messageWidth` | ⚠️ | Parsed but not implemented | - |
 | `behavior.chat.userMessageBubbleStyle` | ✅ | `"default"` (all corners rounded) or `"balloon"` (square bottom-right corner) | `ChatMessageItem` |
 | `behavior.privacyNotice.title` | ⚠️ | Parsed but not implemented | - |

code/concierge/src/androidTest/kotlin/com/adobe/marketing/mobile/concierge/ui/components/card/RecommendationCardsTest.kt

@@ -18,7 +18,13 @@ import androidx.compose.ui.test.junit4.createComposeRule
 import androidx.compose.ui.test.onNodeWithText
 import androidx.compose.ui.test.performClick
 import com.adobe.marketing.mobile.concierge.network.MultimodalElement
+import com.adobe.marketing.mobile.concierge.ui.theme.ConciergeProductCardBehavior
 import com.adobe.marketing.mobile.concierge.ui.theme.ConciergeTheme
+import com.adobe.marketing.mobile.concierge.ui.theme.ConciergeThemeBehavior
+import com.adobe.marketing.mobile.concierge.ui.theme.ConciergeThemeConfig
+import com.adobe.marketing.mobile.concierge.ui.theme.ConciergeThemeData
+import com.adobe.marketing.mobile.concierge.ui.theme.ConciergeThemeTokens
+import com.adobe.marketing.mobile.concierge.ui.theme.ProductCardStyle
 import com.adobe.marketing.mobile.concierge.utils.image.DefaultImageProvider
 import com.adobe.marketing.mobile.concierge.utils.image.LocalImageProvider
 import org.junit.Rule
@@ -87,6 +93,38 @@ class RecommendationCardsTest {
         composeTestRule.waitForIdle()
     }
 
+    @Test
+    fun recommendationCards_singleExtendedProductCard_rendersWithCenterAlignment() {
+        // Verifies that a single extended product card renders correctly when
+        // horizontalAlignment = CenterHorizontally is applied to the outer Column.
+        val theme = ConciergeThemeData(
+            config = ConciergeThemeConfig(),
+            tokens = ConciergeThemeTokens(
+                behavior = ConciergeThemeBehavior(
+                    productCard = ConciergeProductCardBehavior(cardStyle = ProductCardStyle.PRODUCT_DETAIL)
+                )
+            )
+        )
+        val elements = listOf(
+            MultimodalElement(
+                id = "ext-1",
+                title = "Extended Product",
+                url = "https://example.com/img.jpg"
+            )
+        )
+
+        composeTestRule.setContent {
+            ConciergeTheme(theme = theme) {
+                CompositionLocalProvider(LocalImageProvider provides DefaultImageProvider()) {
+                    RecommendationCards(elements = elements)
+                }
+            }
+        }
+
+        composeTestRule.waitForIdle()
+        composeTestRule.onNodeWithText("Extended Product").assertIsDisplayed()
+    }
+
     @Test
     fun recommendationCards_onActionClick_triggersCallback() {
         var clickedButton: ProductActionButton? = null

code/concierge/src/androidTest/kotlin/com/adobe/marketing/mobile/concierge/ui/components/image/LocalAssetImageTest.kt

@@ -12,8 +12,12 @@
 
 package com.adobe.marketing.mobile.concierge.ui.components.image
 
+import android.graphics.Bitmap
 import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.ui.test.assertIsDisplayed
 import androidx.compose.ui.test.junit4.createComposeRule
+import androidx.compose.ui.test.onNodeWithContentDescription
+import androidx.compose.ui.graphics.asImageBitmap
 import com.adobe.marketing.mobile.concierge.ui.theme.ConciergeTheme
 import com.adobe.marketing.mobile.concierge.utils.image.DefaultImageProvider
 import com.adobe.marketing.mobile.concierge.utils.image.LocalImageProvider
@@ -106,6 +110,26 @@ class LocalAssetImageTest {
         }
     }
 
+    @Test
+    fun localAssetImage_withCachedBitmap_rendersImage() {
+        // Pre-seed the cache with a valid bitmap to exercise the render branch
+        // (bitmap?.let { Image(...) }) without requiring a real asset file on disk.
+        val bitmap = Bitmap.createBitmap(1, 1, Bitmap.Config.ARGB_8888).asImageBitmap()
+        assetBitmapCache["cached-icon"] = bitmap
+
+        composeTestRule.setContent {
+            ConciergeTheme {
+                LocalAssetImage(
+                    source = "cached-icon",
+                    contentDescription = "Cached icon"
+                )
+            }
+        }
+
+        composeTestRule.waitForIdle()
+        composeTestRule.onNodeWithContentDescription("Cached icon").assertIsDisplayed()
+    }
+
     @Test
     fun localAssetImage_withEmptySource_rendersWithoutCrashing() {
         // An empty string is not a URL, so it routes to LocalFileImage which will

code/concierge/src/androidTest/kotlin/com/adobe/marketing/mobile/concierge/ui/components/messages/ChatMessageItemTest.kt

@@ -410,6 +410,58 @@ class ChatMessageItemTest {
             .assertIsDisplayed()
     }
 
+    // --- RenderMixedMessage + BotMessageSuffix ---
+
+    @Test
+    fun chatMessageItem_botMixedMessage_withCtaButton_displaysBothTextAndCta() {
+        // RenderMixedMessage was refactored to use BotMessageSuffix for prompt suggestions
+        // and CTA button. Verify the CTA is rendered via BotMessageSuffix in the mixed path.
+        val message = ChatMessage(
+            content = MessageContent.Mixed(
+                text = "Here are some options.",
+                multimodalElements = listOf(
+                    MultimodalElement(id = "p1", title = "Product One", url = "https://example.com/1.jpg")
+                )
+            ),
+            isFromUser = false,
+            timestamp = System.currentTimeMillis(),
+            ctaButton = NetworkCtaButton(label = "View All", url = "https://example.com/all")
+        )
+
+        composeTestRule.setContent {
+            ConciergeTheme {
+                CompositionLocalProvider(LocalImageProvider provides DefaultImageProvider()) {
+                    ChatMessageItem(message = message)
+                }
+            }
+        }
+
+        composeTestRule.onNodeWithText("Here are some options.").assertIsDisplayed()
+        composeTestRule.onNodeWithText("View All").assertIsDisplayed()
+    }
+
+    @Test
+    fun chatMessageItem_botMixedMessage_withPromptSuggestions_displaysSuggestions() {
+        val message = ChatMessage(
+            content = MessageContent.Mixed(
+                text = "Try one of these.",
+                multimodalElements = emptyList()
+            ),
+            isFromUser = false,
+            timestamp = System.currentTimeMillis(),
+            promptSuggestions = listOf("Tell me more", "Show deals")
+        )
+
+        composeTestRule.setContent {
+            ConciergeTheme {
+                ChatMessageItem(message = message)
+            }
+        }
+
+        composeTestRule.onNodeWithText("Tell me more").assertIsDisplayed()
+        composeTestRule.onNodeWithText("Show deals").assertIsDisplayed()
+    }
+
     // -----------------------------------------------------------------------
     // Thinking state
     // -----------------------------------------------------------------------

code/concierge/src/main/kotlin/com/adobe/marketing/mobile/concierge/ui/components/image/LocalAssetImage.kt

@@ -24,14 +24,15 @@ import androidx.compose.ui.graphics.ImageBitmap
 import androidx.compose.ui.graphics.asImageBitmap
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.platform.LocalContext
+import java.util.Collections
 import kotlinx.coroutines.Dispatchers
 import kotlinx.coroutines.withContext
 
 private const val ASSET_ICONS_FOLDER = "icons"
 private val SUPPORTED_EXTENSIONS = listOf(".png", ".webp", ".jpg", ".jpeg")
 
 @VisibleForTesting
-internal val assetBitmapCache = HashMap<String, ImageBitmap?>()
+internal val assetBitmapCache: MutableMap<String, ImageBitmap?> = Collections.synchronizedMap(HashMap())
 
 /**
  * Composable that loads and displays a company icon from either a remote URL or the app's

code/concierge/src/main/kotlin/com/adobe/marketing/mobile/concierge/ui/components/messages/ChatMessageItem.kt

@@ -43,9 +43,22 @@ import com.adobe.marketing.mobile.concierge.ui.components.suggestions.PromptSugg
 import com.adobe.marketing.mobile.concierge.ui.state.ChatMessage
 import com.adobe.marketing.mobile.concierge.ui.state.FeedbackEvent
 import com.adobe.marketing.mobile.concierge.ui.state.MessageContent
+import com.adobe.marketing.mobile.concierge.ui.theme.ChatMessageAlignment
 import com.adobe.marketing.mobile.concierge.ui.theme.ConciergeStyles
 import com.adobe.marketing.mobile.concierge.ui.theme.ConciergeTheme
 
+/**
+ * Maps a [ChatMessageAlignment] to the Compose [Modifier] that produces the correct
+ * horizontal alignment for a bot message card. The pattern is consistent across all
+ * render functions: [fillMaxWidth] reserves the full layout slot so the list is stable,
+ * and [wrapContentWidth] then shrinks the card to its content and anchors it.
+ */
+private fun ChatMessageAlignment.toModifier(): Modifier = when (this) {
+    ChatMessageAlignment.CENTER -> Modifier.fillMaxWidth().wrapContentWidth(Alignment.CenterHorizontally)
+    ChatMessageAlignment.END -> Modifier.fillMaxWidth().wrapContentWidth(Alignment.End)
+    ChatMessageAlignment.START -> Modifier.fillMaxWidth()
+}
+
 /**
  * Component that displays a single chat message.
  */
@@ -109,12 +122,15 @@ private fun RenderTextMessage(
     val thinkingStyle = ConciergeStyles.thinkingAnimationStyle
     val isThinking = message.isThinking
     val companyIconName = if (!message.isFromUser) ConciergeTheme.tokens?.assets?.icons?.company?.takeIf { it.isNotEmpty() } else null
+    val messageAlignment = ConciergeTheme.behavior?.chat?.messageAlignment ?: ChatMessageAlignment.START
 
     if (companyIconName != null) {
         RenderTextMessageWithIcon(
             message = message,
             companyIconName = companyIconName,
+            isThinking = isThinking,
             style = style,
+            thinkingStyle = thinkingStyle,
             onFeedback = onFeedback,
             onSuggestionClick = onSuggestionClick,
             handleLink = handleLink,
@@ -132,8 +148,8 @@ private fun RenderTextMessage(
                 .then(
                     when {
                         message.isFromUser -> Modifier.fillMaxWidth().wrapContentWidth(Alignment.End)
-                        isThinking -> Modifier
-                        else -> Modifier.fillMaxWidth()
+                        isThinking -> Modifier.fillMaxWidth().wrapContentWidth(Alignment.Start)
+                        else -> messageAlignment.toModifier()
                     }
                 )
                 .padding(style.padding),
@@ -198,7 +214,9 @@ private fun RenderTextMessage(
 private fun RenderTextMessageWithIcon(
     message: ChatMessage,
     companyIconName: String,
+    isThinking: Boolean,
     style: ConciergeStyles.MessageBubbleStyle,
+    thinkingStyle: ConciergeStyles.ThinkingAnimationStyle,
     onFeedback: (FeedbackEvent) -> Unit,
     onSuggestionClick: (String) -> Unit,
     handleLink: (String) -> Unit,
@@ -230,6 +248,9 @@ private fun RenderTextMessageWithIcon(
                 Card(
                     modifier = Modifier
                         .fillMaxWidth()
+                        .then(
+                            if (isThinking) Modifier.wrapContentWidth(Alignment.Start) else Modifier
+                        )
                         .padding(
                             top = style.padding,
                             bottom = style.padding,
@@ -239,22 +260,28 @@ private fun RenderTextMessageWithIcon(
                         containerColor = style.botMessageBackgroundColor
                     ),
                     elevation = CardDefaults.cardElevation(defaultElevation = style.elevation),
-                    shape = style.shape
+                    shape = if (isThinking) thinkingStyle.bubbleShape else style.shape
                 ) {
                     Box(
                         modifier = Modifier.padding(
-                            top = style.innerPadding,
-                            bottom = style.innerPadding,
-                            end = style.innerPadding
+                            if (isThinking) thinkingStyle.bubblePadding else PaddingValues(
+                                top = style.innerPadding,
+                                bottom = style.innerPadding,
+                                end = style.innerPadding
+                            )
                         )
                     ) {
-                        Column(modifier = Modifier.fillMaxWidth()) {
-                            AgentResponseContent(
-                                message = message,
-                                handleLink = handleLink,
-                                onFeedback = onFeedback,
-                                feedbackState = feedbackState
-                            )
+                        if (isThinking) {
+                            ConciergeThinking()
+                        } else {
+                            Column(modifier = Modifier.fillMaxWidth()) {
+                                AgentResponseContent(
+                                    message = message,
+                                    handleLink = handleLink,
+                                    onFeedback = onFeedback,
+                                    feedbackState = feedbackState
+                                )
+                            }
                         }
                     }
                 }
@@ -282,13 +309,14 @@ private fun RenderMixedMessage(
 ) {
     val style = ConciergeStyles.messageBubbleStyle
     val content = message.content as MessageContent.Mixed
+    val messageAlignment = ConciergeTheme.behavior?.chat?.messageAlignment ?: ChatMessageAlignment.START
 
     Column(
         modifier = Modifier.fillMaxWidth()
     ) {
         Card(
             modifier = Modifier
-                .fillMaxWidth()
+                .then(messageAlignment.toModifier())
                 .padding(style.padding),
             colors = CardDefaults.cardColors(
                 containerColor = style.botMessageBackgroundColor

code/concierge/src/main/kotlin/com/adobe/marketing/mobile/concierge/ui/components/messages/ConciergeThinking.kt

@@ -46,7 +46,6 @@ internal fun ConciergeThinking(
     ) {
         if (style.thinkingText.isNotEmpty()) {
             Text(
-                modifier = Modifier.weight(1f),
                 text = style.thinkingText,
                 style = style.textStyle,
                 color = style.textColor

code/concierge/src/main/kotlin/com/adobe/marketing/mobile/concierge/ui/theme/ConciergeStyles.kt

@@ -220,7 +220,7 @@ internal object ConciergeStyles {
         @Composable get() {
             val themeColors = ConciergeTheme.colors
             val cssLayout = ConciergeTheme.tokens?.cssLayout
-            val cornerRadius = (ConciergeTheme.tokens?.cssLayout?.messageBorderRadius?.dp ?: 12.dp)
+            val cornerRadius = cssLayout?.messageBorderRadius?.dp ?: 12.dp
             val defaultShape = RoundedCornerShape(cornerRadius)
             val userMessageShape = when (ConciergeTheme.behavior?.chat?.userMessageBubbleStyle) {
                 UserMessageBubbleStyle.BALLOON -> RoundedCornerShape(

code/concierge/src/main/kotlin/com/adobe/marketing/mobile/concierge/ui/theme/ConciergeThemeTokens.kt

@@ -209,11 +209,29 @@ data class ConciergePromptSuggestionsBehavior(
  * Chat behavior configuration from `behavior.chat` in theme JSON.
  */
 data class ConciergeChatBehavior(
-    val messageAlignment: String? = null,
+    val messageAlignment: ChatMessageAlignment = ChatMessageAlignment.START,
     val messageWidth: String? = null,
     val userMessageBubbleStyle: UserMessageBubbleStyle = UserMessageBubbleStyle.DEFAULT
 )
 
+/**
+ * Horizontal alignment for chat messages from `behavior.chat.messageAlignment` in theme JSON.
+ *
+ * - `"start"` — messages align to the leading edge (default).
+ * - `"center"` — messages are horizontally centered.
+ * - `"end"` — messages align to the trailing edge.
+ */
+enum class ChatMessageAlignment(val value: String) {
+    START("start"),
+    CENTER("center"),
+    END("end");
+
+    companion object {
+        fun fromString(value: String): ChatMessageAlignment =
+            values().firstOrNull { it.value.equals(value, ignoreCase = true) } ?: START
+    }
+}
+
 /**
  * User message bubble shape from `behavior.chat.userMessageBubbleStyle` in theme JSON.
  *

code/concierge/src/main/kotlin/com/adobe/marketing/mobile/concierge/ui/theme/ThemeParser.kt

@@ -440,7 +440,7 @@ internal object ThemeParser {
         val chatTyped = chatMap as? MutableMap<String?, Any?>
         val chat = chatTyped?.let {
             ConciergeChatBehavior(
-                messageAlignment = DataReader.optString(it, "messageAlignment", null),
+                messageAlignment = ChatMessageAlignment.fromString(DataReader.optString(it, "messageAlignment", "start") ?: "start"),
                 messageWidth = DataReader.optString(it, "messageWidth", null),
                 userMessageBubbleStyle = UserMessageBubbleStyle.fromString(DataReader.optString(it, "userMessageBubbleStyle", "default") ?: "default")
             )