Merge pull request #98 from rymorale/center-extended-product-card

Miscellaneous UI fixes

Author: rymorale

Documentation/style-guide.md

@@ -248,6 +248,7 @@ Feature toggles and interaction configuration.
 | JSON Key | Type | Default | Description |
 |----------|------|---------|-------------|
 | `behavior.productCard.cardStyle` | string | `"actionButton"` | Product card layout. `"actionButton"` = image overlay with primary/secondary action buttons; `"productDetail"` = extended card with image, badge, name, subtitle, and price. |
+| `behavior.productCard.cardsAlignment` | string | `"center"` | Horizontal alignment of product cards within their display area. `"start"` = left-aligned; `"center"` = centered; `"end"` = right-aligned. |
 
 ### Input
 
@@ -301,7 +302,6 @@ Feature toggles and interaction configuration.
 |----------|------|---------|-------------|
 | `behavior.promptSuggestions.itemMaxLines` | number | `1` | Max lines for suggestion chip text before ellipsis. |
 | `behavior.promptSuggestions.showHeader` | boolean | `false` | Show a "Suggestions" header label above the chips. Label text is configurable via `text["suggestions.header"]`. |
-| `behavior.promptSuggestions.alignToMessage` | boolean | `false` | Align the suggestion chips to the message bubble edges. When `false`, uses the default offset. |
 
 > **Tip:** To hide the header subtitle, set `text["header.subtitle"]` to `""`. The subtitle is automatically hidden when its text is blank.
 
@@ -315,7 +315,8 @@ Feature toggles and interaction configuration.
       "carouselStyle": "scroll"
     },
     "productCard": {
-      "cardStyle": "productDetail"
+      "cardStyle": "productDetail",
+      "cardsAlignment": "center"
     },
     "input": {
       "enableVoiceInput": true,
@@ -347,8 +348,7 @@ Feature toggles and interaction configuration.
     },
     "promptSuggestions": {
       "itemMaxLines": 1,
-      "showHeader": true,
-      "alignToMessage": true
+      "showHeader": true
     }
   }
 }
@@ -554,7 +554,7 @@ Icon and image asset configuration.
 
 | JSON Key | Type | Default | Description |
 |----------|------|---------|-------------|
-| `assets.icons.company` | string | `""` | Company icon displayed to the left of agent text message bubbles. Accepts a remote URL (`http://` or `https://`) or a local asset name (without extension) resolved from the app's `assets/icons/` folder. Supported local formats: `.png`, `.webp`, `.jpg`, `.jpeg`. Leave empty to show no icon. |
+| `assets.icons.company` | string | `""` | Company icon displayed to the left of agent text message bubbles. When set, ALL agent response elements — message text, product cards, and prompt suggestion chips — are automatically aligned to the icon column (flush with the right edge of the icon). Accepts a remote URL (`http://` or `https://`) or a local asset name (without extension) resolved from the app's `assets/icons/` folder. Supported local formats: `.png`, `.webp`, `.jpg`, `.jpeg`. Leave empty to show no icon. |
 
 ### Example
 
@@ -731,8 +731,8 @@ Used when `behavior.productCard.cardStyle` is `"productDetail"`.
 | `--message-border-radius` | `cssLayout.messageBorderRadius` | `Double` | `10.0` | Message bubble corner radius (dp) |
 | `--message-padding` | `cssLayout.messagePadding` | `List<Double>` | `[8, 16]` | Message content padding (dp) |
 | `--message-max-width` | `cssLayout.messageMaxWidth` | `Double?` | `null` | Max message width (dp or %) |
-| `--agent-icon-size` | `cssLayout.agentIconSize` | `Double?` | `39.0` | Size (dp) of the agent icon shown to the left of agent text messages |
-| `--agent-icon-spacing` | `cssLayout.agentIconSpacing` | `Double?` | `12.0` | Horizontal gap (dp) between the agent icon and the message card |
+| `--agent-icon-size` | `cssLayout.agentIconSize` | `Double?` | `39.0` | Size (dp) of the agent icon shown to the left of agent messages. Also determines the start offset applied to product cards and prompt suggestion chips so they align with the message text column. |
+| `--agent-icon-spacing` | `cssLayout.agentIconSpacing` | `Double?` | `12.0` | Horizontal gap (dp) between the agent icon and the message card. Also contributes to the start offset of product cards and prompt suggestion chips. |
 
 ### Layout - Chat
 
@@ -1147,6 +1147,7 @@ This section documents which properties are fully implemented, partially impleme
 | `behavior.multimodalCarousel.cardClickAction` | ⚠️ | Parsed but not implemented in carousel composables | - |
 | `behavior.multimodalCarousel.carouselStyle` | ✅ | Switches between paged (prev/next/dots) and continuous scroll | `ProductCarousel` |
 | `behavior.productCard.cardStyle` | ✅ | Switches between action-button cards and extended product-detail cards | `RecommendationCards`, `ProductCarousel` |
+| `behavior.productCard.cardsAlignment` | ✅ | Controls horizontal alignment of product cards (`"start"`, `"center"`, `"end"`) | `RecommendationCards` |
 | `behavior.input.enableVoiceInput` | ✅ | Controls mic button visibility | `InputActionButtons` |
 | `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` |
@@ -1221,7 +1222,7 @@ This section documents which properties are fully implemented, partially impleme
 
 | Property | Status | Notes | Used In |
 |----------|--------|-------|---------|
-| `assets.icons.company` | ✅ | Company icon displayed to the left of agent text message bubbles | `ChatMessageItem` (`RenderTextMessageWithIcon`) |
+| `assets.icons.company` | ✅ | Company icon displayed to the left of agent text message bubbles. When set, product cards and prompt suggestion chips are automatically offset to align with the agent text column. | `ChatMessageItem` (`RenderTextMessageWithIcon`, `RenderMixedMessage`) |
 
 ### Theme Tokens - Typography
 
@@ -1449,6 +1450,7 @@ When creating themes for the Android SDK, focus on these **actively used** prope
 - `behavior.input.enableVoiceInput` - Show/hide microphone button
 - `behavior.input.sendButtonStyle` - `"default"` (paper airplane) or `"arrow"` (filled circle with upward arrow)
 - `behavior.productCard.cardStyle` - Use `"productDetail"` for extended product cards (image, badge, name, subtitle, price)
+- `behavior.productCard.cardsAlignment` - Horizontal alignment of product cards: `"start"` (left), `"center"` (default), or `"end"` (right)
 - `behavior.multimodalCarousel.carouselStyle` - Use `"paged"` for prev/next/dots or `"scroll"` for continuous scroll
 - `behavior.welcomeCard.closeButtonAlignment` - Close button position (`"start"` or `"end"`)
 - `behavior.welcomeCard.promptFullWidth` - Full-width cards vs compact pill chips

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

@@ -111,6 +111,46 @@ class ChatMessageItemTest {
             .assertIsDisplayed()
     }
 
+    @Test
+    fun chatMessageItem_mixedContentMessage_withCompanyIcon_displaysTextContent() {
+        // RenderMixedMessage applies an icon-column start offset when assets.icons.company is set.
+        // The text content must still be visible.
+        val theme = ConciergeThemeData(
+            config = ConciergeThemeConfig(),
+            tokens = ConciergeThemeTokens(
+                assets = ConciergeThemeAssets(
+                    icons = ConciergeIconAssets(company = "https://example.com/brand-icon.png")
+                )
+            )
+        )
+
+        val multimodalElement = MultimodalElement(
+            id = "element-1",
+            alttext = "Product Image",
+            url = "https://example.com/image.jpg"
+        )
+
+        val message = ChatMessage(
+            content = MessageContent.Mixed(
+                text = "Here are your results:",
+                multimodalElements = listOf(multimodalElement)
+            ),
+            isFromUser = false,
+            timestamp = System.currentTimeMillis()
+        )
+
+        composeTestRule.setContent {
+            ConciergeTheme(theme = theme) {
+                CompositionLocalProvider(LocalImageProvider provides DefaultImageProvider()) {
+                    ChatMessageItem(message = message)
+                }
+            }
+        }
+
+        composeTestRule.onNodeWithText("Here are your results:")
+            .assertIsDisplayed()
+    }
+
     @Test
     fun chatMessageItem_displaysCitationsWhenPresent() {
         val citations = listOf(

code/concierge/src/androidTest/kotlin/com/adobe/marketing/mobile/concierge/ui/theme/ConciergeStylesTest.kt

@@ -155,6 +155,44 @@ class ConciergeStylesTest {
         assertEquals(expectedUserShape, style!!.userMessageShape)
     }
 
+    @Test
+    fun messageBubbleStyle_defaultAgentIconDimensions_usedWhenTokensAbsent() {
+        var style: ConciergeStyles.MessageBubbleStyle? = null
+
+        composeTestRule.setContent {
+            ConciergeTheme {
+                style = ConciergeStyles.messageBubbleStyle
+            }
+        }
+
+        composeTestRule.waitForIdle()
+        assertNotNull(style)
+        assertEquals(39.dp, style!!.agentIconSize)
+        assertEquals(12.dp, style!!.agentIconSpacing)
+    }
+
+    @Test
+    fun messageBubbleStyle_agentIconDimensions_readFromCssLayoutTokens() {
+        var style: ConciergeStyles.MessageBubbleStyle? = null
+        val themeData = ConciergeThemeData(
+            config = ConciergeThemeConfig(),
+            tokens = ConciergeThemeTokens(
+                cssLayout = ConciergeLayout(agentIconSize = 48.0, agentIconSpacing = 16.0)
+            )
+        )
+
+        composeTestRule.setContent {
+            ConciergeTheme(theme = themeData) {
+                style = ConciergeStyles.messageBubbleStyle
+            }
+        }
+
+        composeTestRule.waitForIdle()
+        assertNotNull(style)
+        assertEquals(48.dp, style!!.agentIconSize)
+        assertEquals(16.dp, style!!.agentIconSpacing)
+    }
+
     // -----------------------------------------------------------------------
     // thinkingAnimationStyle
     // -----------------------------------------------------------------------

code/concierge/src/main/kotlin/com/adobe/marketing/mobile/concierge/ui/chat/ConciergeChatViewModel.kt

@@ -682,7 +682,7 @@ class ConciergeChatViewModel : AndroidViewModel {
                 )
                 updateAssistantMessageContent(
                     MessageContent.Text(parsedMessage.messageContent),
-                    parsedMessage.promptSuggestions,
+                    emptyList(),
                     parsedMessage.sources,
                     interactionId = if (hasCtas) null else parsedMessage.interactionId,
                     sseComplete = true
@@ -697,7 +697,7 @@ class ConciergeChatViewModel : AndroidViewModel {
                 )
                 removeLastAssistantPlaceholder()
             }
-            appendOrderedElementMessages(parsedMessage.orderedElements)
+            appendOrderedElementMessages(parsedMessage.orderedElements, parsedMessage.promptSuggestions)
         } else {
             // Legacy path: text-only or mixed message
             val messageContent = if (parsedMessage.multimodalElements.isEmpty()) {
@@ -732,7 +732,10 @@ class ConciergeChatViewModel : AndroidViewModel {
      * All cards are batched into one Mixed message at the position of the first Card element.
      * Each CTA becomes its own CtaButton message.
      */
-    private fun appendOrderedElementMessages(orderedElements: List<ParsedMultimodalItem>) {
+    private fun appendOrderedElementMessages(
+        orderedElements: List<ParsedMultimodalItem>,
+        promptSuggestions: List<String> = emptyList()
+    ) {
         val cardElements = orderedElements
             .filterIsInstance<ParsedMultimodalItem.Card>()
             .map { it.element }
@@ -756,7 +759,8 @@ class ConciergeChatViewModel : AndroidViewModel {
                             content = MessageContent.Mixed(text = "", multimodalElements = cardElements),
                             isFromUser = false,
                             timestamp = System.currentTimeMillis(),
-                            sseComplete = true
+                            sseComplete = true,
+                            promptSuggestions = promptSuggestions
                         )
                         _messages.update { it + cardMessage }
                     }

code/concierge/src/main/kotlin/com/adobe/marketing/mobile/concierge/ui/components/card/RecommendationCards.kt

@@ -19,9 +19,11 @@ import androidx.compose.animation.fadeOut
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import com.adobe.marketing.mobile.concierge.ConciergeConstants
 import com.adobe.marketing.mobile.concierge.network.MultimodalElement
+import com.adobe.marketing.mobile.concierge.ui.theme.CardsAlignment
 import com.adobe.marketing.mobile.concierge.ui.theme.ConciergeTheme
 import com.adobe.marketing.mobile.concierge.ui.theme.ProductCardStyle
 import com.adobe.marketing.mobile.services.Log
@@ -55,8 +57,14 @@ internal fun RecommendationCards(
         enter = fadeIn(animationSpec = tween(durationMillis = 220)),
         exit = fadeOut(animationSpec = tween(durationMillis = 180))
     ) {
+        val horizontalAlignment = when (ConciergeTheme.behavior?.productCard?.cardsAlignment) {
+            CardsAlignment.CENTER -> Alignment.CenterHorizontally
+            CardsAlignment.END -> Alignment.End
+            else -> Alignment.Start
+        }
         Column(
-            modifier = modifier.fillMaxWidth()
+            modifier = modifier.fillMaxWidth(),
+            horizontalAlignment = horizontalAlignment
         ) {
             val cardStyle = ConciergeTheme.behavior?.productCard?.cardStyle ?: ProductCardStyle.ACTION_BUTTON
             val useExtendedProductCards = cardStyle == ProductCardStyle.PRODUCT_DETAIL

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

@@ -288,11 +288,14 @@ private fun RenderTextMessageWithIcon(
             }
         }
 
-        BotMessageSuffix(
-            message = message,
-            onSuggestionClick = onSuggestionClick,
-            onCtaButtonClick = onCtaButtonClick
-        )
+        Row(modifier = Modifier.fillMaxWidth()) {
+            Spacer(modifier = Modifier.width(style.agentIconSize + style.agentIconSpacing))
+            BotMessageSuffix(
+                message = message,
+                onSuggestionClick = onSuggestionClick,
+                onCtaButtonClick = onCtaButtonClick
+            )
+        }
     }
 }
 
@@ -309,28 +312,43 @@ private fun RenderMixedMessage(
 ) {
     val style = ConciergeStyles.messageBubbleStyle
     val content = message.content as MessageContent.Mixed
+    val companyIconName = if (!message.isFromUser) ConciergeTheme.tokens?.assets?.icons?.company?.takeIf { it.isNotEmpty() } else null
     val messageAlignment = ConciergeTheme.behavior?.chat?.messageAlignment ?: ChatMessageAlignment.START
 
     Column(
-        modifier = Modifier.fillMaxWidth()
+        modifier = Modifier
+            .fillMaxWidth()
+            .then(
+                if (companyIconName != null) Modifier.padding(start = style.agentIconSize + style.agentIconSpacing)
+                else Modifier
+            )
     ) {
         Card(
             modifier = Modifier
                 .then(messageAlignment.toModifier())
-                .padding(style.padding),
+                .padding(
+                    top = if (companyIconName != null) 0.dp else style.padding,
+                    bottom = style.padding,
+                    end = style.padding,
+                    start = if (companyIconName != null) 0.dp else style.padding
+                ),
             colors = CardDefaults.cardColors(
                 containerColor = style.botMessageBackgroundColor
             ),
             elevation = CardDefaults.cardElevation(defaultElevation = style.elevation),
             shape = style.shape
         ) {
             Box(
-                modifier = Modifier.padding(style.innerPadding)
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(
+                        top = if (companyIconName != null) 0.dp else style.innerPadding,
+                        bottom = style.innerPadding,
+                        end = style.innerPadding,
+                        start = if (companyIconName != null) 0.dp else style.innerPadding
+                    )
             ) {
-                Column(
-                    modifier = Modifier
-                        .fillMaxWidth()
-                ) {
+                Column(modifier = Modifier.fillMaxWidth()) {
                     // Render text content if present
                     if (content.text.isNotEmpty()) {
                         ConciergeResponse(

code/concierge/src/main/kotlin/com/adobe/marketing/mobile/concierge/ui/components/welcomescreen/SuggestedPromptItem.kt

@@ -24,9 +24,9 @@ import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.filled.AutoAwesome
 import androidx.compose.material3.Icon
+import androidx.compose.ui.res.painterResource
+import com.adobe.marketing.mobile.concierge.R
 import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.ui.text.style.TextOverflow
@@ -36,7 +36,9 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.painter.Painter
 import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.graphics.vector.rememberVectorPainter
 import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.unit.dp
 import com.adobe.marketing.mobile.concierge.ui.components.image.AsyncImage
 import com.adobe.marketing.mobile.concierge.ui.theme.ConciergeStyles
 import com.adobe.marketing.mobile.concierge.ui.theme.ConciergeTheme
@@ -98,12 +100,13 @@ internal fun SuggestedPromptItem(
                 PromptImage(prompt = prompt, style = style)
                 Spacer(modifier = Modifier.width(style.promptImageSpacing))
             } else {
+                // TODO: Add style controls for the compact chip layout (icon size, spacing, etc.) if needed in the future
                 // Compact chip layout: small icon only
                 Icon(
-                    imageVector = prompt.imageVector ?: Icons.Default.AutoAwesome,
+                    painter = promptIconPainter(prompt.imageVector),
                     contentDescription = null,
                     tint = style.promptTextColor.copy(alpha = 0.6f),
-                    modifier = Modifier.size(style.promptImageSize)
+                    modifier = Modifier.size(16.dp)
                 )
                 Spacer(modifier = Modifier.width(style.promptImageSpacing))
             }
@@ -120,6 +123,10 @@ internal fun SuggestedPromptItem(
     }
 }
 
+@Composable
+private fun promptIconPainter(imageVector: ImageVector?): Painter =
+    imageVector?.let { rememberVectorPainter(it) } ?: painterResource(R.drawable.sparkle)
+
 @Composable
 private fun PromptImage(
     prompt: SuggestedPrompt,
@@ -148,7 +155,7 @@ private fun PromptImage(
                 contentScale = ContentScale.Crop
             )
             else -> Icon(
-                imageVector = prompt.imageVector ?: Icons.Default.AutoAwesome,
+                painter = promptIconPainter(prompt.imageVector),
                 contentDescription = null,
                 tint = style.promptTextColor.copy(alpha = 0.6f),
                 modifier = Modifier.size(style.promptImageSize * 0.6f)

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

@@ -652,13 +652,10 @@ internal object ConciergeStyles {
             val contentColor = themeColors.conciergeMessageText ?: themeColors.onSurface
             val textColor = themeColors.suggestionText ?: contentColor
             val behavior = ConciergeTheme.behavior?.promptSuggestions
-            val bubbleStyle = messageBubbleStyle
-            val alignToMessage = behavior?.alignToMessage ?: false
-            val alignedPadding = bubbleStyle.padding + bubbleStyle.innerPadding
             return PromptSuggestionsStyle(
                 containerTopPadding = 6.dp,
-                containerStartPadding = if (alignToMessage) alignedPadding else 12.dp,
-                containerEndPadding = if (alignToMessage) alignedPadding else 48.dp,
+                containerStartPadding = 12.dp,
+                containerEndPadding = 48.dp,
                 itemSpacing = 8.dp,
                 itemShape = RoundedCornerShape(ConciergeTheme.tokens?.cssLayout?.suggestionItemBorderRadius?.dp ?: 10.dp),
                 itemBackgroundColor = themeColors.suggestionBackground ?: themeColors.container,