-
Notifications
You must be signed in to change notification settings - Fork 34
Open
Description
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-labellogic 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
- Component supports alignment and visibility toggles without side effects for existing consumers.
- Right-aligned messages respect the design-defined margin tokens.
- Screen readers correctly identify the sender in "Simplified" views.
Metadata
Metadata
Assignees
Labels
No labels
Type
Projects
Status
Needs triage