# 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`. ```yaml 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](/fr/docs/ai-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. | ```yaml - 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](/fr/docs/interactivity-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 - [Présentation des pages](/fr/docs/pages-overview) — pages de collection et résolution `$record.*`. - [Agents](/fr/docs/ai-agents) — configurer les agents IA qui alimentent `ai-chat`. - [Permissions de table](/fr/docs/table-permissions) — la permission `comment` qui protège les commentaires. - [Interactivité et scripts](/fr/docs/interactivity-scripts) — actions de presse-papiers et de navigation pour le partage. - [Notifications](/fr/docs/automation-email-actions) — déclencheurs d'automatisation de commentaires.