File

packages/components/eui-discussion-thread/eui-discussion-thread.component.ts

Description

A component for displaying threaded discussions or conversation timelines in a structured format. Renders a list of discussion items with support for titles, subtitles, and tooltips. Ideal for comment threads, activity feeds, chat histories, and collaborative communication interfaces.

Basic Usage with Items Array

// Component
discussionItems: EuiDiscussionThreadItem[] = [
  {
    author: 'John Doe',
    timestamp: new Date(),
    message: 'First comment'
  },
  {
    author: 'Jane Smith',
    timestamp: new Date(),
    message: 'Reply to comment'
  }
];

// Template
<eui-discussion-thread
  [items]="discussionItems"
  [titleLabel]="'Project Discussion'"
  [subTitleLabel]="'Team Collaboration'">
</eui-discussion-thread>

Using Content Projection

<eui-discussion-thread
  [titleLabel]="'Comments'"
  [tooltip]="'Discussion thread for this task'">
  <eui-discussion-thread-item
    [author]="'Alice'"
    [timestamp]="date1"
    [message]="'Initial comment'">
  </eui-discussion-thread-item>
  <eui-discussion-thread-item
    [author]="'Bob'"
    [timestamp]="date2"
    [message]="'Follow-up response'">
  </eui-discussion-thread-item>
</eui-discussion-thread>

Accessibility

• Automatically applies role="list" when items are present
• Each discussion item should have role="listitem" for proper structure
• Timestamps should be formatted for screen reader clarity
• Author names are announced before message content
• Tooltip provides additional context for assistive technologies

Notes

• Supports both data-driven (items array) and content projection approaches
• Use titleLabel and subTitleLabel for thread categorization
• Items are rendered in the order provided
• Component automatically detects and counts projected eui-discussion-thread-item children
• Styling adapts based on thread depth and nesting level