Discussion

Collaborative comment threads for Insights and Resources

Overview

The Discussion component provides a full-featured comment system for collaborative discussions on Insights and Resources. It supports markdown formatting, @mentions, file attachments, emoji reactions, voting, and comprehensive moderation tools.

Key Features

Configurable threading: flat or single-level nested

Markdown editor with live preview

@mention autocomplete for users

Upvote/downvote with auto-hide threshold

6 emoji reactions

File attachments (20MB, 10 files max)

Admin moderation: hide, pin, lock, resolve

User flagging for inappropriate content

5-minute edit/delete window

Draft auto-save to localStorage

Quoted replies via text selection

Author role badges (Owner, Builder, OP)

Examples

Threaded Mode

Comments with single-level nested replies. Click "Show replies" to expand reply threads. Try adding a new comment or replying to existing ones.

Discussion(3)

Supports **bold**, *italic*, `code`, [links](url), and > quotes

Cmd+Enter

Sarah Chen

Owner

2 days ago

Pinned

This is a great insight! I noticed the same issue when testing on iOS 17. The navigation bar clips under the status bar in certain conditions.

The app crashes when rotating from portrait to landscape

I can confirm this happens specifically on iPhone 15 Pro Max.

Alex Riverayesterday

Resolved

Has anyone tried the workaround suggested in the release notes? Setting automaticallyAdjustsScrollViewInsets = false seems to help.

Jordan Lee

Builder

1 hour ago

New

We should definitely add this to the regression test suite. I'll create a test case for it.

Flat Thread Mode

Comments displayed in a single-level list without reply nesting. Useful for simpler discussions or when replies are not needed.

Discussion(3)

Supports **bold**, *italic*, `code`, [links](url), and > quotes

Cmd+Enter

Sarah Chen

Owner

2 days ago

Pinned

This is a great insight! I noticed the same issue when testing on iOS 17. The navigation bar clips under the status bar in certain conditions.

The app crashes when rotating from portrait to landscape

I can confirm this happens specifically on iPhone 15 Pro Max.

Alex Riverayesterday

Resolved

Has anyone tried the workaround suggested in the release notes? Setting automaticallyAdjustsScrollViewInsets = false seems to help.

Jordan Lee

Builder

1 hour ago

New

We should definitely add this to the regression test suite. I'll create a test case for it.

Locked Thread

When a thread is locked, only admins (Owners/Builders) can add new comments. Existing comments remain visible to all users.

Discussion(3)

Locked

Supports **bold**, *italic*, `code`, [links](url), and > quotes

Cmd+Enter

Sarah Chen

Owner

2 days ago

Pinned

This is a great insight! I noticed the same issue when testing on iOS 17. The navigation bar clips under the status bar in certain conditions.

The app crashes when rotating from portrait to landscape

I can confirm this happens specifically on iPhone 15 Pro Max.

Alex Riverayesterday

Resolved

Has anyone tried the workaround suggested in the release notes? Setting automaticallyAdjustsScrollViewInsets = false seems to help.

Jordan Lee

Builder

1 hour ago

New

We should definitely add this to the regression test suite. I'll create a test case for it.

Admin Features

Admins can pin comments (shown first), mark as resolved, and hide inappropriate content. Hidden comments show a placeholder to non-admins. Try the dropdown menu on any comment to see admin actions.

Discussion(4)

Supports **bold**, *italic*, `code`, [links](url), and > quotes

Cmd+Enter

Sarah Chen

Owner

2 days ago

Pinned

This is a great insight! I noticed the same issue when testing on iOS 17. The navigation bar clips under the status bar in certain conditions.

The app crashes when rotating from portrait to landscape

I can confirm this happens specifically on iPhone 15 Pro Max.

Alex Riverayesterday

Resolved

Has anyone tried the workaround suggested in the release notes? Setting automaticallyAdjustsScrollViewInsets = false seems to help.

Jordan Lee

Builder

1 hour ago

New

We should definitely add this to the regression test suite. I'll create a test case for it.

-8

Spam Userlast week

Hidden

This comment was hidden by a moderator for violating community guidelines.

Hide reason: Spam/promotional content

Participant View

A realistic thread from a participant's perspective. Beta testers discussing bugs, sharing discoveries, and helping each other - no admin posts. This demonstrates typical organic community discussion.

Discussion(3)

Supports **bold**, *italic*, `code`, [links](url), and > quotes

Cmd+Enter

Lisa Chen2 days ago

Unrelated but wanted to mention - the new dark mode looks amazing! The contrast is much better than the previous version. Really easy on the eyes during night testing sessions.

Marcus Thompson

3 days ago

Just tried the new checkout flow on my Galaxy S23. The payment button doesn't respond on the first tap - I have to tap it twice every time. Anyone else seeing this?

Steps to reproduce:
1. Add item to cart
2. Go to checkout
3. Fill in payment details
4. Tap "Pay Now" button

First tap does nothing, second tap works.

Priya Sharma2 hours ago

New

Quick question for everyone - when you complete a purchase, does the confirmation email arrive immediately or is there a delay? Mine took about 15 minutes which seemed long.

Props Reference

Prop	Type	Default	Description
`entityType`	`"INSIGHT" \| "RESOURCE"`	`required`	Type of entity the discussion is attached to
`entityId`	`string`	`required`	ID of the entity
`currentUser`	`CurrentUser`	`required`	Current user context with id, name, image, and role
`mentionSuggestions`	`MentionSuggestion[]`	`[]`	Users available for @mention autocomplete
`demoMode`	`boolean`	`false`	Enable demo mode (no API calls, local state only)
`demoData`	`{discussions, settings}`	`undefined`	Mock data for demo mode

Usage

import { Discussion } from '@/ui/components';

// Basic usage with API integration
<Discussion
  entityType="INSIGHT"
  entityId="insight-123"
  currentUser={{
    id: 'user-1',
    name: 'John Doe',
    image: null,
    role: 'OWNER'
  }}
/>

// Demo mode (for prototypes)
<Discussion
  entityType="INSIGHT"
  entityId="insight-123"
  currentUser={currentUser}
  demoMode
  demoData={{
    discussions: mockDiscussions,
    settings: { threadingMode: 'THREADED', isLocked: false, downvoteThreshold: 5 }
  }}
/>

Prop

Type

Default

Description

entityType

"INSIGHT" | "RESOURCE"

required

Type of entity the discussion is attached to

entityId

string

required

ID of the entity

currentUser

CurrentUser

required

Current user context with id, name, image, and role

mentionSuggestions

MentionSuggestion[]

[]

Users available for @mention autocomplete

demoMode

boolean

false

Enable demo mode (no API calls, local state only)

demoData

{discussions, settings}

undefined

Mock data for demo mode

import { Discussion } from '@/ui/components'; // Basic usage with API integration <Discussion entityType="INSIGHT" entityId="insight-123" currentUser={{ id: 'user-1', name: 'John Doe', image: null, role: 'OWNER' }} /> // Demo mode (for prototypes) <Discussion entityType="INSIGHT" entityId="insight-123" currentUser={currentUser} demoMode demoData={{ discussions: mockDiscussions, settings: { threadingMode: 'THREADED', isLocked: false, downvoteThreshold: 5 } }} />