Chatbot: Right aligned user message variant #907
Description
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.
- 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.
- 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.