Skip to content

Feature: right aligned user message variant #791

@nicolethoen

Description

@nicolethoen

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:

  1. Standard: All Left + Metadata Visible
  2. Simplified Standard: All Left + Metadata Hidden
  3. Threaded: User Right / AI Left + Metadata Visible
  4. 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

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    Status

    Needs triage

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions