# EuiCommentThreadComponent

**Type:** component



`eui-comment-thread` 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.

```html
<eui-comment-thread
  [currentAuthorAvatarUrl]="currentUser.avatar"
  [isOpen]="true"
  (commentSend)="onAddComment($event)">
  <eui-comment-item
    [authorName]="'John Doe'"
    [authorAvatarUrl]="'path/to/avatar.jpg'"
    [createdAt]="'2 hours ago'">
    This is a comment text.
  </eui-comment-item>
</eui-comment-thread>
```

### Accessibility
- Collapse/expand buttons include proper ARIA labels through translation keys
- Comment count is announced to screen readers (singular/plural forms)
- Nested comment structure maintains semantic HTML with proper list elements

### Notes
- Use `textareaPosition` to control whether new comments appear above or below existing ones
- Set `isCollapsable` to false for always-visible comment threads
- The component automatically counts child `eui-comment-item` elements


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

## Inputs
- **currentAuthorAvatarUrl**: `string` - URL path to the current user's avatar image. Displayed alongside the comment textarea to identify the commenter. Optional.
- **hasTextarea**: `boolean` - Controls visibility of the comment textarea. When false, hides the textarea preventing new comment input.
- **isCollapsable**: `boolean` - Enables collapse/expand functionality for the comment thread. When true, displays toggle control; when false, thread remains static.
- **isOpen**: `boolean` - Controls the expanded/collapsed state of the comment thread. When true, thread is expanded showing all comments; when false, thread is collapsed.
- **placeholder**: `string` - Placeholder text displayed in the comment textarea when empty. Supports translation keys for internationalization.
- **textareaPosition**: `unknown` - Position of the comment textarea relative to the comment items. When 'top', textarea appears above comments; when 'bottom', below comments.

## Outputs
- **commentCancel**: `EventEmitter` - Emitted when the user cancels comment input. Payload: void Triggered when user clicks cancel button in the comment textarea.
- **commentSend**: `EventEmitter` - 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.