# EuiCommentThreadComponent

**Type:** component

<p><code>eui-comment-thread</code> component for displaying nested conversations with reply functionality.
Provides a collapsible container for comment items with integrated textarea for adding new comments.
Supports flexible textarea positioning (top or bottom) and optional collapse/expand behavior.
Automatically counts and manages child comment items through content projection.
Typically used for discussion threads, feedback sections, or collaborative commenting features.</p>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-comment-thread
  [currentAuthorAvatarUrl]=&quot;currentUser.avatar&quot;
  [isOpen]=&quot;true&quot;
  (commentSend)=&quot;onAddComment($event)&quot;&gt;
  &lt;eui-comment-item
    [authorName]=&quot;&#39;John Doe&#39;&quot;
    [authorAvatarUrl]=&quot;&#39;path/to/avatar.jpg&#39;&quot;
    [createdAt]=&quot;&#39;2 hours ago&#39;&quot;&gt;
    This is a comment text.
  &lt;/eui-comment-item&gt;
&lt;/eui-comment-thread&gt;</code></pre></div><h3>Accessibility</h3>
<ul>
<li>Collapse/expand buttons include proper ARIA labels through translation keys</li>
<li>Comment count is announced to screen readers (singular/plural forms)</li>
<li>Nested comment structure maintains semantic HTML with proper list elements</li>
</ul>
<h3>Notes</h3>
<ul>
<li>Use <code>textareaPosition</code> to control whether new comments appear above or below existing ones</li>
<li>Set <code>isCollapsable</code> to false for always-visible comment threads</li>
<li>The component automatically counts child <code>eui-comment-item</code> elements</li>
</ul>


**Selector:** `eui-comment-thread`

**Standalone:** false

## Inputs

- **currentAuthorAvatarUrl**: `string` - <p>URL path to the current user&#39;s avatar image.
Displayed alongside the comment textarea to identify the commenter.
Optional.</p>

- **hasTextarea**: `boolean` - <p>Controls visibility of the comment textarea.
When false, hides the textarea preventing new comment input.</p>

- **isCollapsable**: `boolean` - <p>Enables collapse/expand functionality for the comment thread.
When true, displays toggle control; when false, thread remains static.</p>

- **isOpen**: `boolean` - <p>Controls the expanded/collapsed state of the comment thread.
When true, thread is expanded showing all comments; when false, thread is collapsed.</p>

- **placeholder**: `string` - <p>Placeholder text displayed in the comment textarea when empty.
Supports translation keys for internationalization.</p>

- **textareaPosition**: `unknown` - <p>Position of the comment textarea relative to the comment items.
When &#39;top&#39;, textarea appears above comments; when &#39;bottom&#39;, below comments.</p>


## Outputs

- **commentCancel**: `EventEmitter` - <p>Emitted when the user cancels comment input.
Payload: void
Triggered when user clicks cancel button in the comment textarea.</p>

- **commentSend**: `EventEmitter` - <p>Emitted when the user submits a new comment.
Payload: string - the comment text entered by the user
Triggered when user clicks send button in the comment textarea.</p>

