Comments

Widget Comments is a UI component that displays a list of user comments or feedback within an application.

Demo

Alex Johnson2h

This looks great! I really like the new design direction we're taking.

Sarah Chen1h

I agree! The color scheme works really well.

Mike Wilson45m

Should we consider accessibility implications?

Emma Davis4h

Could we explore some alternative layouts? I have a few ideas that might work better for mobile users.

Cmd+Enter to send

Usage

<CommentsWidget :comments="comments"/>

interface IComments {
  data: IComment[];
  title: string;
  maxHeight?: number;  // optional parameter for height of the scrollable area
}
interface IComment {
  id: string;
  entityId: string;          // ID of the related post, file, or item
  entityType: 'post' | 'file' | 'product' | 'custom'; // type of linked entity
  author: string;           // who posted the comment
  text: string;             // comment body
  createdAt: Date;
  updatedAt?: Date;         // optional if edited
  parentId?: string;        // for nested replies
  replies?: IComment[];      // child comments
  status: 'visible' | 'hidden' | 'deleted';  // moderation
  keywords?: string[];      // tags or search terms
  likes?: number;           // optional reaction count
}

Key features:

• Shows comment text, author, and timestamp.
• Supports threaded or nested replies.
• Can include likes, reactions, or moderation actions.
• Often integrates with an API for posting and retrieving comments.

Common use cases:

• Blog posts and articles (user discussions).
• Social media feeds.
• Project management or collaboration tools.
• Product review sections in e-commerce apps.