<AIChatMessage> with "user" variant does not flush to the right

[leroychan]

Description

When I use AIChatMessage with variant "user", there are the following issues:

1. The user's text within AIChatMessageBody does not flush to the right. The default example shows "user" messages flushed to the right
2. There is no background colour on the bubble for variant="user"

This is very different from ChatMessage whereby if i set the "variant" to "outbound", it auto flushes to the right.

Link to Reproduction

https://codesandbox.io/p/sandbox/elated-lumiere-d687sw

Steps to reproduce

Using plain vanilla example from: https://paste.twilio.design/components/ai-chat-log

Paste Core Version

21.3.0

Browser

Version 137.0.7151.104 (Official Build) (arm64)

Operating System

• macOS
• Windows
• Linux

Additional Information

No response

[dosubot]

Hi @leroychan! I'm Dosu and I’m helping the paste team.

The current appearance of with variant="user" is intentional and differs from due to design choices in Paste. For , the parent container uses flexbox to align the message to the right, and the message bubble uses a subtle background color (colorBackgroundWeakElevation) rather than the high-contrast style of outbound bubbles. The text inside the bubble is not explicitly right-aligned, which is why it may not appear fully flushed right like does. This is by design, but you can override these styles if you want a look closer to outbound bubbles or want stronger contrast citation.

To customize the appearance, use the Paste CustomizationProvider to target the AI_CHAT_MESSAGE_BODY element. For example, to set a stronger background color and right-align the text:

<CustomizationProvider
  theme={theme}
  elements={{
    AI_CHAT_MESSAGE_BODY: {
      backgroundColor: 'colorBackgroundInverseStronger',
      color: 'colorTextInverse',
      textAlign: 'right',
    },
  }}
>
  {/* ...your AIChatLog here... */}
</CustomizationProvider>

You can adjust these styles as needed to match your desired look. This approach gives you full control over the alignment and background color for user messages.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}   

[leroychan]

^ the above response from the bot doesn't make sense since the default example showing on Twilio's paste doc shows the "user" message flushed automatically to the right.

I shouldn't have to modify to modify the Provider to achieve the result.

[serifluous]

Hey @leroychan ! You're right—the user message should be flush to the right and have a background color. In your reproduction right now, you're seeing a previous version of our AI Chat Log components that were all aligned to the left.

Once we release our new version (through PR #4340, if you want to follow along), you'll see the user messages aligned to the right!

Unfortunately, our doc site gets ahead of the actual release, but it reflects what the components will look and behave like soon. If you use the components as is right now, you'll automatically get the design updates when you upgrade to the next version.