> ## Documentation Index
> Fetch the complete documentation index at: https://learn.social.plus/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.

<Info>**SDK v7.x** · Last verified March 2026 · iOS · Android · Web · Flutter</Info>

<Accordion title="Speed run — just the code" icon="forward">
  ```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 ↓
</Accordion>

<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.
</Tip>

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
```

<Info>
  **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) first — you need posts to comment on and react to.
</Info>

<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
</Note>

***

## 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)

***

## Step-by-Step Implementation

<Steps>
  <Step title="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)
  </Step>

  <Step title="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)
  </Step>

  <Step title="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)
  </Step>

  <Step title="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');
    ```
  </Step>

  <Step title="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)
  </Step>

  <Step title="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)
  </Step>
</Steps>

***

## 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.

<Frame caption="Admin Console — Comments & Replies tab with threaded replies and direct action menus">
  <img src="https://mintcdn.com/social-b97141fb/8fu7j6WVW0H6CBMI/images/analytics-and-moderation/console/posts-page-comments-tab.png?fit=max&auto=format&n=8fu7j6WVW0H6CBMI&q=85&s=79d92c7e289758df86bcbe8bcb57371b" alt="Admin Console — Comments & Replies tab showing threaded comment management" width="2052" height="1263" data-path="images/analytics-and-moderation/console/posts-page-comments-tab.png" />
</Frame>

<AccordionGroup>
  <Accordion title="Flagging abusive comments" icon="flag">
    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) · [Admin Console Moderation](/analytics-and-moderation/console/moderation/overview)
  </Accordion>

  <Accordion title="Reaction data & analytics" icon="chart-bar">
    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) · [Admin Console Social Analytics](/analytics-and-moderation/console/analytics/)
  </Accordion>

  <Accordion title="Webhook: new comment" icon="webhook">
    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)
  </Accordion>
</AccordionGroup>

***

## 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>

<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>

<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.
</Warning>

## Best Practices

<AccordionGroup>
  <Accordion title="Threading UX" icon="sitemap">
    * 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
  </Accordion>

  <Accordion title="Reactions UX" icon="face-smile">
    * 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
  </Accordion>

  <Accordion title="Performance" icon="gauge">
    * 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
  </Accordion>
</AccordionGroup>

***

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

## Next Steps

<Card title="Your next step → User Profiles & Social Graph" icon="arrow-right" href="/use-cases/social/user-profiles-and-social-graph">
  Engagement is working — now build profile pages, follow/unfollow flows, and friend connections.
</Card>

Or explore related guides:

<CardGroup cols={3}>
  <Card title="Rich Content Creation" href="/use-cases/social/rich-content-creation" icon="pen-to-square">
    Create the posts that comments attach to
  </Card>

  <Card title="Notifications & Engagement" href="/use-cases/social/notifications-and-engagement" icon="bell">
    Notify users of new comments and reactions
  </Card>

  <Card title="Content Moderation Pipeline" href="/use-cases/social/content-moderation-pipeline" icon="shield-check">
    Handle flagged comments and abusive content
  </Card>
</CardGroup>