Social Components
Social components add engagement to pages: threaded comments (authenticated and public/guest), comment counts, an AI-agent chat panel, and sharing controls. The comments components integrate with the table comment system and respect the table's comment permission. All accept the shared props bag plus visibility and responsive modules.
components:
- type: comments
props: { placeholder: 'Add a comment…', limit: 20, sort: newest, paginationStyle: loadMore }
- type: commentCount
props: { format: '{count} comments', emptyText: 'No comments yet' }comments
A full comment thread for a record. On a collection page it auto-resolves $record.id and collection.table for API calls. Displays author name, avatar, content, and relative timestamp; respects the table's comment permission (hidden when the user lacks it).
| Property | Description |
|---|---|
props.placeholder |
Placeholder text for the comment-form textarea. |
props.limit |
Comments loaded per page (default: 20). |
props.sort |
Order: newest (desc, default) or oldest (asc). |
props.paginationStyle |
loadMore (default, a Load More button) or numbered (page numbers). |
props.showCount |
Show a comment-count badge (default: true). |
props.emptyText |
Custom message when no comments exist (default: "No comments yet"). |
The comment form is shown to authenticated users with comment permission and hidden from unauthenticated visitors (who instead see a "Sign in to comment" prompt when comment: authenticated). Authors can edit/delete their own comments; admins can delete any. Content is limited to 10,000 characters (matching the API).
Public / guest comments
When the table's comment config enables guestComments, the form also accepts guest name and email, and supports moderation, threading, and spam protection:
| Concern | Behavior |
|---|---|
| Guest fields | Name required (1–100 chars); email required when guestEmailRequired (default), validated as an email. Stored with userId: null. |
| Threading | threading: true shows a single-level Reply on top-level comments; replies store a parentId. threading: false (default) is flat. |
| Moderation | moderation: 'manual' creates new comments as pending; admins approve/reject. 'auto' publishes immediately; 'auth-required' publishes immediately but only accepts comments from signed-in users. Write 'manual' where a config used true, and 'auto' where it used false. autoApprove.authenticated / autoApprove.previouslyApproved bypass moderation. |
| Spam protection | Honeypot field, IP rate limiting (rateLimitPerIp, default 5/min → 429), link threshold (maxLinksBeforeModeration), and blocked-word auto-reject — all enforced server-side. |
commentCount
A compact comment-count display. On collection pages it auto-resolves $record.id and collection.table; on dataSource-bound parents it resolves per $record.id for each record in a list.
| Property | Description |
|---|---|
props.format |
Count template with a {count} placeholder (default: '{count} comments'). |
props.emptyText |
Display when the count is 0 (default: '0 comments'). |
The count is read from the comments API pagination metadata and includes only approved comments when moderation is on.
ai-chat
An embedded chat panel backed by a configured AI agent. See Agents for agent configuration.
| Property | Description |
|---|---|
agent |
Agent name from app.agents[]. |
placeholder |
Placeholder text for the chat input. |
chatHeight |
Chat container height in pixels. |
showHistory |
Show previous conversation history on load. |
allowAttachments |
Allow file attachments in chat. |
- type: ai-chat
agent: support-assistant
chatHeight: 480
placeholder: 'Ask a question…'
allowAttachments: truesharing
Share controls for the current page or record (social links, copy-link). Sharing surfaces are composed from link/button components with navigate interactions; for copy-to-clipboard behavior see Interactivity & Scripts.
| Property | Description |
|---|---|
props |
HTML attributes and share-target options (e.g. className, share URL/text). |
children |
Custom share buttons/links. |
Related Pages
- Pages Overview — collection pages and
$record.*resolution. - Agents — configure the AI agents that power
ai-chat. - Table Permissions — the
commentpermission gating comments. - Interactivity & Scripts — clipboard and navigate actions for sharing.
- Notifications — comment automation triggers.
Last updated August 11, 2026
This documentation was written with AI, so errors or outdated content are possible. Sovrium is in beta. Contributions and corrections are welcome.