> ## Documentation Index
> Fetch the complete documentation index at: https://social-b97141fb-feat-user-history-moderation-detail.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Comments & Reactions

> Add threaded comments with @mentions and emoji reactions to posts, stories, and messages.

> [!NOTE]
>
> **SDK v7.x** · Last verified March 2026 · iOS · Android · Web · Flutter

> **Speed run — just the code**
>
> ```typescript theme={null}
> // 1. Add a reaction
> await ReactionRepository.addReaction('post', 'postId', 'like');
>
> // 2. Remove a reaction
> await ReactionRepository.removeReaction('post', 'postId', 'like');
>
> // 3. Create a comment
> await CommentRepository.createComment({
>   referenceId: 'postId', referenceType: 'post',
>   data: { text: 'Great post!' },
> });
>
> // 4. Query comments
> CommentRepository.getComments(
>   { referenceId: 'postId', referenceType: 'post', limit: 20 },
>   ({ data: comments }) => { /* render */ }
> );
> ```
>
> Full walkthrough below ↓

> [!TIP]
>
> **Platform note** — code samples below use TypeScript. Every method has an equivalent in the iOS (Swift), Android (Kotlin), and Flutter (Dart) SDKs — see the linked SDK reference in each step.

Comments and reactions turn passive content consumption into active engagement. This guide covers creating threaded comments, adding reactions to any content object, querying both in real-time, and surfacing them in your UI.

```mermaid theme={null}
graph TD
    A[Post / Story / Message] --> B[Add Reaction]
    A --> C[Add Comment]
    B --> D[Reaction stored on content]
    C --> E[Top-level comment]
    E --> F[Reply comment]
    F --> G[Nested thread]
    D & E & G --> H[Live Collection update]
    H --> I[UI updates in real-time]

    classDef action fill:#e1f5fe,stroke:#0288d1,color:#01579b
    classDef decision fill:#fff8e1,stroke:#f9a825,color:#f57f17
    classDef process fill:#f3e5f5,stroke:#7b1fa2,color:#4a148c
    classDef outcome fill:#e8f5e9,stroke:#388e3c,color:#1b5e20

    class A action
    class B,C,D,E,F,G,H process
    class I outcome
```

> [!NOTE]
>
> **Prerequisites**: SDK installed and authenticated. You'll need a `referenceId` (post ID, comment ID, or story ID) and `referenceType` to attach comments and reactions to.
>
> **Also recommended:** Complete [Rich Content Creation](/use-cases/social/rich-content-creation.md) first — you need posts to comment on and react to.

> [!NOTE]
>
> **After completing this guide you'll have:**
>
> * Threaded comments (comments + replies) on any post or story
> * Emoji reactions added and removed in real-time
> * Reaction counts and comment counts updating live in your UI

***

## Quick Start: Add a Reaction

Use the reactions API to add emoji reactions to posts, comments, stories, and messages:

```typescript TypeScript theme={null}
import { ReactionRepository } from '@amityco/ts-sdk';

const isAdded = await ReactionRepository.addReaction('post', 'postId', 'like');
```

Full reference → [Reactions](/social-plus-sdk/core-concepts/content-handling/reactions.md)

***

## Step-by-Step Implementation

**1. Create a text comment**

Use `referenceType: .post` for post comments. Other valid values: `.content` (stories), `.message` (chat).

```typescript TypeScript theme={null}
import { CommentRepository } from '@amityco/ts-sdk';

const { data: comment } = await CommentRepository.createComment({
  data: { text: 'hello!' },
  referenceId: 'postId',
  referenceType: 'post' as Amity.CommentReferenceType,
});
```

Full reference → [Text Comment](/social-plus-sdk/social/content-management/comments/creation/text-comment.md)

**2. Create a reply (threaded comment)**

Pass the parent comment's ID as `parentId` to create a nested reply.

```typescript TypeScript theme={null}
const { data: reply } = await CommentRepository.createComment({
  data: { text: 'I agree!' },
  referenceId: 'postId',
  referenceType: 'post' as Amity.CommentReferenceType,
  parentId: 'parent-comment-id', // makes this a reply
});
```

Full reference → [Text Comment](/social-plus-sdk/social/content-management/comments/creation/text-comment.md)

**3. Query comments with real-time updates**

Use a Live Collection to get comments and subscribe to new additions. Filter by `filterByParentId` to get top-level comments only or a flat list.

```typescript TypeScript theme={null}
import { CommentRepository } from '@amityco/ts-sdk';

const unsubscribe = CommentRepository.getComments(
  { referenceType: 'post', referenceId: 'postId', dataTypes: { values: ['text'], matchType: 'exact' } },
  ({ data: comments, onNextPage, hasNextPage, loading }) => {
    if (comments) { /* render comment thread */ }
  },
);
```

Full reference → [Query Comments](/social-plus-sdk/social/content-management/comments/retrieval/query-comments.md)

**4. Add a reaction**

Reactions use a single `addReaction()` call. Built-in types: `like`, `love`, `wow`, `laugh`, `sad`, `angry`. Custom types are also supported.

```typescript TypeScript theme={null}
import { ReactionRepository } from '@amityco/ts-sdk';

const isAdded = await ReactionRepository.addReaction('post', 'postId', 'like');
```

**5. Remove a reaction**

```typescript TypeScript theme={null}
import { ReactionRepository } from '@amityco/ts-sdk';

const isRemoved = await ReactionRepository.removeReaction('post', 'postId', 'like');
```

Full reference → [Reactions](/social-plus-sdk/core-concepts/content-handling/reactions.md)

**6. Mention a user in a comment**

Pass user IDs and their positions in the comment text to trigger mention notifications.

```typescript TypeScript theme={null}
const { data: comment } = await CommentRepository.createComment({
  data: { text: 'great point @userId1!' },
  referenceId: 'postId',
  referenceType: 'post' as Amity.CommentReferenceType,
  mentionees: [{ type: 'user', userIds: ['userId1'] }] as Amity.UserMention[],
});
```

Full reference → [Mentions](/social-plus-sdk/core-concepts/content-handling/mentions.md)

***

## Connect to Moderation & Analytics

The Admin Console **Posts and comments management** page gives moderators full visibility into every comment thread — including threaded replies, AI moderation status, and direct action menus.

![Admin Console — Comments & Replies tab showing threaded comment management](https://mintcdn.com/social-b97141fb-feat-user-history-moderation-detail/EuQgtDswnsuEu3tu/images/analytics-and-moderation/console/posts-page-comments-tab.png?fit=max\&auto=format\&n=EuQgtDswnsuEu3tu\&q=85\&s=4f7dd3d1dc1b7d6b793b593dba236a76)

Admin Console — Comments & Replies tab with threaded replies and direct action menus

> **Flagging abusive comments**
>
> Users can flag comments for moderator review using the same flagging system as posts. Flagged comments appear in the Admin Console moderation queue.
>
> → [Content Flagging](/social-plus-sdk/social/content-management/moderation/content-flagging.md) · [Admin Console Moderation](/analytics-and-moderation/console/moderation/overview.md)

> **Reaction data & analytics**
>
> Query aggregated reaction counts and per-user reaction data via the SDK. View engagement metrics in the Admin Console analytics dashboard.
>
> → [Reactions](/social-plus-sdk/core-concepts/content-handling/reactions.md) · [Admin Console Social Analytics](/analytics-and-moderation/console/analytics/)

> **Webhook: new comment**
>
> Receive `comment.created` webhook events to build notification workflows or sync comment data to your own backend.
>
> → [Webhook Events](/analytics-and-moderation/social+-apis-and-services/webhook-event.md)

***

## Common Mistakes

> [!WARNING]
>
> **Adding duplicate reactions** — Calling `addReaction` twice with the same reaction name throws an error. Check the post's `myReactions` array before adding.
>
> ```typescript theme={null}
> // ❌ Bad — no check
> await ReactionRepository.addReaction('post', postId, 'like');
>
> // ✅ Good — check first
> if (!post.myReactions.includes('like')) {
>   await ReactionRepository.addReaction('post', postId, 'like');
> }
> ```

> [!WARNING]
>
> **Loading all comments without pagination** — Deeply nested threads can have hundreds of replies. Always set a `limit` and let users tap "Load more" for the rest.

> [!WARNING]
>
> **Not subscribing to comment Live Collections** — If another user replies while the thread is open, your UI won't update. Use the observable pattern so new comments appear in real time.

## Best Practices

> **Threading UX**
>
> * Limit visible nesting depth to 2-3 levels in the UI — deeper nesting is confusing to users
> * Show a "View X replies" collapsed state instead of rendering all replies upfront
> * Use `getLatestComment()` to show a preview of the most recent comment in feed cards without loading the full comment thread
> * Sort by `lastCreated` (newest first) for fast-moving communities; `firstCreated` for long-form discussion

> **Reactions UX**
>
> * Display a compact reaction pill with the top 3 reactions and total count
> * Show the user's own reaction as highlighted/selected so they can tap to remove it
> * Animate reaction additions — a small bounce or pop goes a long way
> * For communities that want positivity-only, restrict available reactions to a custom subset

> **Performance**
>
> * Paginate comments — load 20 at a time and use `loadMore()` on scroll
> * Unsubscribe comment Live Collections when the user navigates away
> * Cache reaction counts client-side and reconcile with server state on resume

***

> [!TIP]
>
> **Dive deeper**: [Comments API Reference](/social-plus-sdk/social/content-management/comments/overview.md) has full parameter tables, method signatures, and platform-specific details for every API used in this guide.

## Next Steps

> **[Your next step → User Profiles & Social Graph](/use-cases/social/user-profiles-and-social-graph.md)**
>
> Engagement is working — now build profile pages, follow/unfollow flows, and friend connections.

Or explore related guides:

> **[Rich Content Creation](/use-cases/social/rich-content-creation.md)**
>
> Create the posts that comments attach to

> **[Notifications & Engagement](/use-cases/social/notifications-and-engagement.md)**
>
> Notify users of new comments and reactions

> **[Content Moderation Pipeline](/use-cases/social/content-moderation-pipeline.md)**
>
> Handle flagged comments and abusive content


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.