Based on the results of the Compass/unified theme dev/design sync on Jan 14 and as a follow up to the design issue patternfly/patternfly-design-kit#907
Implement technical updates to the Chat Message component to support right-aligned user messages and optional metadata. This must be an opt-in change via new props to ensure we do not break existing implementations.
Functional Requirements
1. Alignment Logic
- Variable Alignment: Support a mechanism to switch message alignment between Left (default) and Right.
- User Messages: Support right-alignment within the chat container.
- AI Messages: Should remain full-width/left-aligned.
- Spacing: For right-aligned messages, implement the defined design token for the left margin/padding to maintain the visual offset.
2. Component Variants & Toggles
- Metadata Toggle: Provide props to allow consumers to hide/show:
- Username and AI Labels
- Timestamps
- Avatars (integrating with existing pre-release functionality)
- Default State: Maintain current behavior (Left-aligned, all metadata visible) unless props are explicitly passed.
3. Accessibility (A11y)
- Screen Reader Identity: Ensure that when metadata/avatars are visually hidden, the component still communicates the sender's identity (User vs. AI) to screen readers.
- Logic: Maintain or optimize
aria-label logic to announce the sender before the message content.
Use Case Matrix
The implementation must support:
- Standard: All Left + Metadata Visible
- Simplified Standard: All Left + Metadata Hidden
- Threaded: User Right / AI Left + Metadata Visible
- Simplified Threaded: User Right / AI Left + Metadata Hidden
Acceptance Criteria
Jira Issue: PF-3425
Based on the results of the Compass/unified theme dev/design sync on Jan 14 and as a follow up to the design issue patternfly/patternfly-design-kit#907
Implement technical updates to the Chat Message component to support right-aligned user messages and optional metadata. This must be an opt-in change via new props to ensure we do not break existing implementations.
Functional Requirements
1. Alignment Logic
2. Component Variants & Toggles
3. Accessibility (A11y)
aria-labellogic to announce the sender before the message content.Use Case Matrix
The implementation must support:
Acceptance Criteria
Jira Issue: PF-3425