Skip to main content
View as Markdown

Composants sociaux

Les composants sociaux ajoutent de l'engagement aux pages : commentaires en fil de discussion (authentifiés et publics/invités), comptes de commentaires, un panneau de chat avec agent IA et des contrôles de partage. Les composants de commentaires s'intègrent au système de commentaires de table et respectent la permission comment de la table. Tous acceptent l'ensemble partagé props ainsi que les modules visibility et responsive.

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

Un fil de commentaires complet pour un enregistrement. Sur une page de collection, il résout automatiquement $record.id et collection.table pour les appels API. Affiche le nom de l'auteur, l'avatar, le contenu et l'horodatage relatif ; respecte la permission comment de la table (masqué lorsque l'utilisateur ne la possède pas).

Propriété Description
props.placeholder Texte indicatif pour la zone de texte du formulaire de commentaire.
props.limit Commentaires chargés par page (défaut : 20).
props.sort Ordre : newest (décroissant, défaut) ou oldest (croissant).
props.paginationStyle loadMore (défaut, un bouton Charger plus) ou numbered (numéros de page).
props.showCount Afficher un badge de nombre de commentaires (défaut : true).
props.emptyText Message personnalisé lorsqu'aucun commentaire n'existe (défaut : « No comments yet »).

Le formulaire de commentaire est affiché aux utilisateurs authentifiés ayant la permission comment et masqué aux visiteurs non authentifiés (qui voient à la place une invite « Connectez-vous pour commenter » lorsque comment: authenticated). Les auteurs peuvent modifier/supprimer leurs propres commentaires ; les administrateurs peuvent supprimer n'importe lequel. Le contenu est limité à 10 000 caractères (correspondant à l'API).

Commentaires publics / d'invités

Lorsque la config de commentaires de la table active guestComments, le formulaire accepte aussi le nom et l'e-mail de l'invité, et prend en charge la modération, les fils de discussion et la protection anti-spam :

Préoccupation Comportement
Champs d'invité Nom requis (1–100 caractères) ; e-mail requis lorsque guestEmailRequired (défaut), validé comme e-mail. Stocké avec userId: null.
Fils de discussion threading: true affiche une Réponse à un seul niveau sur les commentaires de premier niveau ; les réponses stockent un parentId. threading: false (défaut) est plat.
Modération moderation: true crée les nouveaux commentaires comme pending ; les administrateurs approuvent/rejettent. autoApprove.authenticated / autoApprove.previouslyApproved contournent la modération.
Protection anti-spam Champ pot de miel, limitation de débit par IP (rateLimitPerIp, défaut 5/min → 429), seuil de liens (maxLinksBeforeModeration) et rejet automatique de mots bloqués — tous appliqués côté serveur.

commentCount

Un affichage compact du nombre de commentaires. Sur les pages de collection, il résout automatiquement $record.id et collection.table ; sur les parents liés à un dataSource, il se résout par $record.id pour chaque enregistrement d'une liste.

Propriété Description
props.format Modèle de comptage avec un espace réservé {count} (défaut : '{count} comments').
props.emptyText Affichage lorsque le compte est 0 (défaut : '0 comments').

Le compte est lu depuis les métadonnées de pagination de l'API de commentaires et n'inclut que les commentaires approved lorsque la modération est activée.

ai-chat

Un panneau de chat intégré soutenu par un agent IA configuré. Voir Agents pour la configuration des agents.

Propriété Description
agent Nom d'agent depuis app.agents[].
placeholder Texte indicatif pour le champ de chat.
height Hauteur du conteneur de chat en pixels.
showHistory Afficher l'historique des conversations précédentes au chargement.
allowAttachments Autoriser les pièces jointes dans le chat. 
- type: ai-chat
  agent: support-assistant
  height: 480
  placeholder: 'Ask a question…'
  allowAttachments: true

sharing

Contrôles de partage pour la page ou l'enregistrement courant (liens sociaux, copier le lien). Les surfaces de partage sont composées de composants link/button avec des interactions navigate ; pour le comportement de copie vers le presse-papiers, voir Interactivité et scripts.

Propriété Description
props Attributs HTML et options de cible de partage (p. ex. className, URL/texte de partage).
children Boutons/liens de partage personnalisés.

Pages connexes