Chatbot: Right aligned user message variant

[nicolethoen]

Based on the results of the Compass/unified theme dev/design sync on Jan 14:

We are updating our existing Chat components to support a more modern "threaded" appearance. This issue focuses on defining the spacing and layout behavior when messages are right-aligned and when metadata is hidden.

1. Standard Layout (Left-Aligned)

• Case A (Full): Message is left-aligned; Avatar and Metadata (AI label, timestamp) are visible.
• Case B (Minimal): Message is left-aligned; Avatar and Metadata are hidden. Ensure the message body aligns correctly with the container edge.

2. User-Specific Layout (Right-Aligned)

• Case C (Full): Message is right-aligned; Avatar and Metadata are visible.
• Case D (Minimal): Message is right-aligned; Avatar and Metadata are hidden.

Specs Needed

• Margin/Padding Tokens: Define the specific left-margin or padding value for right-aligned user messages to ensure they don't span the full width of the container (creating the "right-aligned" look).
• Vertical Spacing: Double check if vertical spacing between messages changes when metadata/avatars are removed to ensure the "simplified" view doesn't look too cramped or spaced.

Alignment Logic: Ensure the design clarifies if the message "bubble" expands to fit content or remains a fixed width with a margin.

• High-fidelity mockups for all 4 use cases listed above.
• Redline specs showing token values for margins and padding.
• Documentation on how the layout behaves in a responsive/narrow container.

Just so you have it handy, these are the aladdin figma files we were looking at during this discussion.

---

Jira Issue: PF-3428