# `PhiaUi.Components.Collab.CollabComment`
[🔗](https://github.com/charlenopires/PhiaUI/blob/v0.1.17/lib/phia_ui/components/collab/collab_comment.ex#L1)

Collaboration Comment Suite — 6 components for rendering and interacting
with comments in a collaborative editing context.

## Components

- `collab_comment/1`          — Single comment with avatar, body, reactions, actions
- `collab_comment_body/1`     — Comment body with rendered @mentions
- `collab_comment_reactions/1` — Emoji reaction bar
- `collab_comment_actions/1`  — Edit/Delete action dropdown
- `collab_comment_pin/1`      — Pin marker for document annotations
- `collab_comment_indicator/1` — Margin indicator showing comment count

# `collab_comment`

Renders a single collaboration comment.

Displays an avatar on the left, and the comment body, header (name + time),
action menu, and reactions bar on the right.

## Attributes

- `:id` — unique identifier (required)
- `:comment` — comment map with keys: `id`, `user_id`, `user_name`, `user_color`,
  `user_avatar_url`, `body`, `created_at`, `edited_at`, `reactions`, `thread_id`
- `:current_user_id` — ID of the viewing user, for edit/delete permissions
- `:editable` — whether the comment can be edited
- `:on_edit` — event name for edit action
- `:on_delete` — event name for delete action
- `:on_react` — event name for reaction action

## Slots

- `:header_extra` — extra content after the header line
- `:footer_extra` — extra content after the reactions

## Attributes

* `id` (`:string`) (required)
* `comment` (`:map`) (required)
* `current_user_id` (`:string`) - Defaults to `nil`.
* `editable` (`:boolean`) - Defaults to `false`.
* `on_edit` (`:string`) - Defaults to `"collab:comment:edit"`.
* `on_delete` (`:string`) - Defaults to `"collab:comment:delete"`.
* `on_react` (`:string`) - Defaults to `"collab:comment:react"`.
* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.
## Slots

* `header_extra`
* `footer_extra`

# `collab_comment_actions`

Renders a three-dot action menu for a comment with edit and delete options.

Only shows actions the current user is permitted to perform.

## Attributes

* `id` (`:string`) (required)
* `comment_id` (`:string`) (required)
* `can_edit` (`:boolean`) - Defaults to `false`.
* `can_delete` (`:boolean`) - Defaults to `false`.
* `on_edit` (`:string`) - Defaults to `"collab:comment:edit"`.
* `on_delete` (`:string`) - Defaults to `"collab:comment:delete"`.
* `class` (`:string`) - Defaults to `nil`.

# `collab_comment_body`

Renders the comment body text with @mentions highlighted.

Mention format in raw text: `@[Display Name](user_id)`.
Rendered as a styled span with the display name.

## Attributes

* `body` (`:string`) (required)
* `class` (`:string`) - Defaults to `nil`.

# `collab_comment_indicator`

Renders a margin indicator showing comment count for a document line or block.

Appears in the document margin/gutter to indicate that comments exist
for the adjacent content.

## Attributes

* `id` (`:string`) (required)
* `count` (`:integer`) - Defaults to `0`.
* `active` (`:boolean`) - Defaults to `false`.
* `on_click` (`:string`) - Defaults to `"collab:comment:show"`.
* `class` (`:string`) - Defaults to `nil`.

# `collab_comment_pin`

Renders a small colored pin marker for document annotations.

Displays as a colored circle with optional count badge. Used to mark
specific locations in a document that have associated comments.

## Attributes

* `id` (`:string`) (required)
* `color` (`:string`) - Defaults to `"#6366F1"`.
* `count` (`:any`) - Defaults to `nil`.
* `active` (`:boolean`) - Defaults to `false`.
* `class` (`:string`) - Defaults to `nil`.

# `collab_comment_reactions`

Renders a row of emoji reaction pills.

Each reaction shows the emoji and count. Active reactions (where the
current user has reacted) are highlighted. Includes a "+" button to
add a new reaction.

## Attributes

* `id` (`:string`) (required)
* `reactions` (`:list`) - Defaults to `[]`.
* `on_react` (`:string`) - Defaults to `"collab:comment:react"`.
* `class` (`:string`) - Defaults to `nil`.

---

*Consult [api-reference.md](api-reference.md) for complete listing*