# EuiDiscussionThreadComponent

**Type:** component

<p>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.</p>
<h3>Basic Usage with Items Array</h3>
<b>Example :</b><div><pre class="line-numbers"><code class="language-typescript">// Component
discussionItems: EuiDiscussionThreadItem[] = [
  {
    author: &#39;John Doe&#39;,
    timestamp: new Date(),
    message: &#39;First comment&#39;
  },
  {
    author: &#39;Jane Smith&#39;,
    timestamp: new Date(),
    message: &#39;Reply to comment&#39;
  }
];

// Template
&lt;eui-discussion-thread
  [items]=&quot;discussionItems&quot;
  [titleLabel]=&quot;&#39;Project Discussion&#39;&quot;
  [subTitleLabel]=&quot;&#39;Team Collaboration&#39;&quot;&gt;
&lt;/eui-discussion-thread&gt;</code></pre></div><h3>Using Content Projection</h3>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-discussion-thread
  [titleLabel]=&quot;&#39;Comments&#39;&quot;
  [tooltip]=&quot;&#39;Discussion thread for this task&#39;&quot;&gt;
  &lt;eui-discussion-thread-item
    [author]=&quot;&#39;Alice&#39;&quot;
    [timestamp]=&quot;date1&quot;
    [message]=&quot;&#39;Initial comment&#39;&quot;&gt;
  &lt;/eui-discussion-thread-item&gt;
  &lt;eui-discussion-thread-item
    [author]=&quot;&#39;Bob&#39;&quot;
    [timestamp]=&quot;date2&quot;
    [message]=&quot;&#39;Follow-up response&#39;&quot;&gt;
  &lt;/eui-discussion-thread-item&gt;
&lt;/eui-discussion-thread&gt;</code></pre></div><h3>Accessibility</h3>
<ul>
<li>Automatically applies <code>role=&quot;list&quot;</code> when items are present</li>
<li>Each discussion item should have <code>role=&quot;listitem&quot;</code> for proper structure</li>
<li>Timestamps should be formatted for screen reader clarity</li>
<li>Author names are announced before message content</li>
<li>Tooltip provides additional context for assistive technologies</li>
</ul>
<h3>Notes</h3>
<ul>
<li>Supports both data-driven (<code>items</code> array) and content projection approaches</li>
<li>Use <code>titleLabel</code> and <code>subTitleLabel</code> for thread categorization</li>
<li>Items are rendered in the order provided</li>
<li>Component automatically detects and counts projected <code>eui-discussion-thread-item</code> children</li>
<li>Styling adapts based on thread depth and nesting level</li>
</ul>


**Selector:** `eui-discussion-thread`

**Standalone:** false

## Inputs

- **items**: `EuiDiscussionThreadItem[]` - <p>Array of discussion thread items to be displayed.
Each item should conform to the EuiDiscussionThreadItem interface.</p>

- **subTitleLabel**: `string` - <p>The subtitle label for the discussion thread, typically used to provide
additional context or categorization.</p>

- **titleLabel**: `string` - <p>The main title label for the discussion thread.</p>

- **tooltip**: `string` - <p>Tooltip text to display when hovering over the discussion thread.</p>

