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)
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.
Just so you have it handy, these are the aladdin figma files we were looking at during this discussion.
Jira Issue: PF-3428
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.
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.
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